ui-ingredients 1.1.0 → 1.3.0

package/dist/accordion/accordion-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getAccordionContext, setAccordionContext] = createContext('Accordion');
-export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem  [PROPS]');
+export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem.props');

package/dist/anatomy.d.ts

@@ -18,6 +18,7 @@ export { anatomy as fieldAnatomy } from './field/field-anatomy.js';
 export { anatomy as fileUploadAnatomy } from './file-upload/file-upload-anatomy.js';
 export { anatomy as floatingPanelAnatomy } from './floating-panel/floating-panel-anatomy.js';
 export { anatomy as hoverCardAnatomy } from './hover-card/hover-card-anatomy.js';
+export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';

package/dist/anatomy.js

@@ -18,6 +18,7 @@ export { anatomy as fieldAnatomy } from './field/field-anatomy.js';
 export { anatomy as fileUploadAnatomy } from './file-upload/file-upload-anatomy.js';
 export { anatomy as floatingPanelAnatomy } from './floating-panel/floating-panel-anatomy.js';
 export { anatomy as hoverCardAnatomy } from './hover-card/hover-card-anatomy.js';
+export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';

package/dist/collection.d.ts

@@ -0,0 +1 @@
+export * from '@zag-js/collection';

package/dist/collection.js

@@ -0,0 +1 @@
+export * from '@zag-js/collection';

package/dist/color-picker/color-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getColorPickerContext, setColorPickerContext] = createContext('ColorPicker');
-export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea [PROPS]');
-export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch [PROPS]');
-export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPickerFormat [PROPS]', false);
-export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel [PROPS]');
+export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea.props');
+export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch.props');
+export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPickerFormat.props', false);
+export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel.props');

package/dist/combobox/combobox-context.svelte.js

@@ -1,4 +1,4 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getComboboxContext, setComboboxContext] = createContext('Combobox');
-export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem [PROPS]');
-export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup [PROPS]');
+export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem.props');
+export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup.props');

package/dist/date-picker/date-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getDatePickerContext, setDatePickerContext] = createContext('DatePicker');
-export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView [PROPS]');
-export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable [PROPS]');
-export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell [PROPS]');
-export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell [PROPS]');
+export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView.props');
+export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable.props');
+export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell.props');
+export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell.props');

package/dist/file-upload/file-upload-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getFileUploadContext, setFileUploadContext] = createContext('FileUpload');
-export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem [PROPS]');
+export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem.props');

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './floating-panel/index.js';
 export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
+export * from './listbox/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './floating-panel/index.js';
 export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
+export * from './listbox/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';

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

@@ -0,0 +1,6 @@
+import * as listbox from '@zag-js/listbox';
+export interface CreateListboxProps extends Omit<listbox.Props, 'dir' | 'getRootNode'> {
+}
+export interface CreateListboxReturn extends listbox.Api {
+}
+export declare function createListbox(props: CreateListboxProps): CreateListboxReturn;

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

@@ -0,0 +1,14 @@
+import * as listbox from '@zag-js/listbox';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
+export function createListbox(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const service = useMachine(listbox.machine, () => ({
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+        ...props,
+    }));
+    return reflect(() => listbox.connect(service, normalizeProps));
+}

package/dist/listbox/index.d.ts

@@ -0,0 +1,14 @@
+export * as Listbox from './listbox.js';
+export type { ListboxContentProps } from './listbox-content.svelte';
+export type { ListboxInputProps } from './listbox-input.svelte';
+export type { ListboxItemGroupLabelProps } from './listbox-item-group-label.svelte';
+export type { ListboxItemGroupProps } from './listbox-item-group.svelte';
+export type { ListboxItemIndicatorProps } from './listbox-item-indicator.svelte';
+export type { ListboxItemTextProps } from './listbox-item-text.svelte';
+export type { ListboxItemProps } from './listbox-item.svelte';
+export type { ListboxLabelProps } from './listbox-label.svelte';
+export type { ListboxProps } from './listbox-root.svelte';
+export type { ListboxValueTextProps } from './listbox-value-text.svelte';
+export { createListbox, type CreateListboxProps, type CreateListboxReturn, } from './create-listbox.svelte.js';
+export { anatomy as listboxAnatomy } from './listbox-anatomy.js';
+export { getListboxContext, setListboxContext, } from './listbox-context.svelte.js';

package/dist/listbox/index.js

@@ -0,0 +1,4 @@
+export * as Listbox from './listbox.js';
+export { createListbox, } from './create-listbox.svelte.js';
+export { anatomy as listboxAnatomy } from './listbox-anatomy.js';
+export { getListboxContext, setListboxContext, } from './listbox-context.svelte.js';

package/dist/listbox/listbox-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy } from '@zag-js/listbox';

package/dist/listbox/listbox-anatomy.js

@@ -0,0 +1 @@
+export { anatomy } from '@zag-js/listbox';

package/dist/listbox/listbox-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxContentProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getContentProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-content.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const ListboxContent: import("svelte").Component<ListboxContentProps, {}, "ref">;
+type ListboxContent = ReturnType<typeof ListboxContent>;
+export default ListboxContent;

package/dist/listbox/listbox-context.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ItemGroupProps, ItemProps } from '@zag-js/listbox';
+import type { CreateListboxReturn } from './create-listbox.svelte.js';
+export declare const getListboxContext: () => CreateListboxReturn, setListboxContext: (context: CreateListboxReturn | (() => CreateListboxReturn)) => void;
+export declare const getListboxItemPropsContext: () => ItemProps<any>, setListboxItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
+export declare const getListboxItemGroupPropsContext: () => ItemGroupProps, setListboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/listbox/listbox-context.svelte.js

@@ -0,0 +1,4 @@
+import { createContext } from '../create-context.svelte.js';
+export const [getListboxContext, setListboxContext] = createContext('Listbox');
+export const [getListboxItemPropsContext, setListboxItemPropsContext] = createContext('ListboxItem.props');
+export const [getListboxItemGroupPropsContext, setListboxItemGroupPropsContext,] = createContext('ListboxItemGroup.props');

package/dist/listbox/listbox-input.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {InputProps} from '@zag-js/listbox';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxInputProps
+    extends Assign<
+      HtmlIngredientProps<'input', HTMLInputElement>,
+      InputProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxInputProps = $props();
+
+  let [inputProps, localProps] = $derived(
+    createSplitProps<InputProps>(['autoHighlight'])(props),
+  );
+
+  let listbox = getListboxContext();
+
+  let mergedProps = $derived(
+    mergeProps(listbox.getInputProps(inputProps), localProps),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input bind:this={ref} {...mergedProps} />
+{/if}

package/dist/listbox/listbox-input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InputProps } from '@zag-js/listbox';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+export interface ListboxInputProps extends Assign<HtmlIngredientProps<'input', HTMLInputElement>, InputProps> {
+}
+declare const ListboxInput: import("svelte").Component<ListboxInputProps, {}, "ref">;
+type ListboxInput = ReturnType<typeof ListboxInput>;
+export default ListboxInput;

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

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemGroupLabelProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    getListboxItemGroupPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxItemGroupLabelProps = $props();
+
+  let listbox = getListboxContext();
+  let itemGroupProps = getListboxItemGroupPropsContext();
+  let mergedProps = $derived(
+    mergeProps(
+      listbox.getItemGroupLabelProps({
+        htmlFor: itemGroupProps.id,
+      }),
+      props,
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-item-group-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemGroupLabelProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemGroupLabel: import("svelte").Component<ListboxItemGroupLabelProps, {}, "ref">;
+type ListboxItemGroupLabel = ReturnType<typeof ListboxItemGroupLabel>;
+export default ListboxItemGroupLabel;

package/dist/listbox/listbox-item-group.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemGroupProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    setListboxItemGroupPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id,
+    asChild,
+    children,
+    ...props
+  }: ListboxItemGroupProps = $props();
+
+  let uid = $props.id();
+  let itemGroupProps = $derived({id: id ?? uid});
+  let listbox = getListboxContext();
+  let mergedProps = $derived(
+    mergeProps(listbox.getItemGroupProps(itemGroupProps), props),
+  );
+
+  setListboxItemGroupPropsContext(() => itemGroupProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-item-group.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const ListboxItemGroup: import("svelte").Component<ListboxItemGroupProps, {}, "ref">;
+type ListboxItemGroup = ReturnType<typeof ListboxItemGroup>;
+export default ListboxItemGroup;

package/dist/listbox/listbox-item-indicator.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    getListboxItemPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxItemIndicatorProps = $props();
+
+  let listbox = getListboxContext();
+  let itemProps = getListboxItemPropsContext();
+  let mergedProps = $derived(
+    mergeProps(listbox.getItemIndicatorProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-item-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemIndicator: import("svelte").Component<ListboxItemIndicatorProps, {}, "ref">;
+type ListboxItemIndicator = ReturnType<typeof ListboxItemIndicator>;
+export default ListboxItemIndicator;

package/dist/listbox/listbox-item-text.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    getListboxItemPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxItemTextProps = $props();
+
+  let listbox = getListboxContext();
+  let itemProps = getListboxItemPropsContext();
+  let mergedProps = $derived(
+    mergeProps(listbox.getItemTextProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/listbox/listbox-item-text.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemText: import("svelte").Component<ListboxItemTextProps, {}, "ref">;
+type ListboxItemText = ReturnType<typeof ListboxItemText>;
+export default ListboxItemText;

package/dist/listbox/listbox-item.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  import type {ItemProps, ItemState} from '@zag-js/listbox';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
+      ItemProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    setListboxItemPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxItemProps = $props();
+
+  let [itemProps, localProps] = createSplitProps<ItemProps>([
+    'highlightOnHover',
+    'item',
+  ])(props);
+
+  let listbox = getListboxContext();
+  let itemState = $derived(listbox.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(listbox.getItemProps(itemProps), localProps),
+  );
+
+  setListboxItemPropsContext(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/listbox/listbox-item.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ItemProps, ItemState } from '@zag-js/listbox';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+export interface ListboxItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, ItemProps> {
+}
+declare const ListboxItem: import("svelte").Component<ListboxItemProps, {}, "ref">;
+type ListboxItem = ReturnType<typeof ListboxItem>;
+export default ListboxItem;

package/dist/listbox/listbox-label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxLabelProps
+    extends HtmlIngredientProps<'label', HTMLLabelElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxLabelProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getLabelProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/listbox/listbox-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
+}
+declare const ListboxLabel: import("svelte").Component<ListboxLabelProps, {}, "ref">;
+type ListboxLabel = ReturnType<typeof ListboxLabel>;
+export default ListboxLabel;

package/dist/listbox/listbox-root.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
+  import type {
+    CreateListboxProps,
+    CreateListboxReturn,
+  } from './create-listbox.svelte.js';
+
+  export interface ListboxProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateListboxReturn>,
+      Optional<CreateListboxProps, 'id'>
+    > {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {createListbox} from './create-listbox.svelte.js';
+  import {setListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    id,
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxProps = $props();
+
+  let uid = $props.id();
+
+  let [createListboxProps, localProps] = $derived(
+    createSplitProps<Omit<CreateListboxProps, 'id'>>([
+      'collection',
+      'defaultHighlightedValue',
+      'defaultValue',
+      'deselectable',
+      'disabled',
+      'disallowSelectAll',
+      'highlightedValue',
+      'ids',
+      'loopFocus',
+      'onHighlightChange',
+      'onSelect',
+      'onValueChange',
+      'orientation',
+      'scrollToIndexFn',
+      'selectOnHighlight',
+      'selectionMode',
+      'typeahead',
+      'value',
+    ])(props),
+  );
+
+  let listbox = createListbox(
+    reflect(() => ({...createListboxProps, id: id ?? uid})),
+  );
+
+  let mergedProps = $derived(mergeProps(listbox.getRootProps(), localProps));
+
+  setListboxContext(listbox);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, listbox)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(listbox)}
+  </div>
+{/if}

package/dist/listbox/listbox-root.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
+import type { CreateListboxProps, CreateListboxReturn } from './create-listbox.svelte.js';
+export interface ListboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateListboxReturn>, Optional<CreateListboxProps, 'id'>> {
+}
+declare const ListboxRoot: import("svelte").Component<ListboxProps, {}, "ref">;
+type ListboxRoot = ReturnType<typeof ListboxRoot>;
+export default ListboxRoot;

package/dist/listbox/listbox-value-text.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxValueTextProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getValueTextProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {listbox.valueAsString}
+    {/if}
+  </span>
+{/if}

package/dist/listbox/listbox-value-text.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxValueText: import("svelte").Component<ListboxValueTextProps, {}, "ref">;
+type ListboxValueText = ReturnType<typeof ListboxValueText>;
+export default ListboxValueText;

package/dist/listbox/listbox.d.ts

@@ -0,0 +1,11 @@
+export { collection } from '@zag-js/listbox';
+export { default as Content } from './listbox-content.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Root } from './listbox-root.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/listbox/listbox.js

@@ -0,0 +1,11 @@
+export { collection } from '@zag-js/listbox';
+export { default as Content } from './listbox-content.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Root } from './listbox-root.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/menu/menu-context.svelte.js

@@ -1,5 +1,5 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getMenuContext, setMenuContext] = createContext('Menu', false);
-export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup [PROPS]');
-export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem [PROPS]');
+export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup.props');
+export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem.props');
 export const [getMenuTriggerItemContext, setMenuTriggerItemContext] = createContext('MenuTriggerItem');

package/dist/menu/menu-item.svelte

@@ -32,16 +32,17 @@
 
   let menu = getMenuContext();
 
+  let mergedProps = $derived(
+    mergeProps(menu?.getItemProps(itemProps) ?? {}, localProps),
+  );
+
   let itemState: ItemState = $derived(
     menu?.getItemState(itemProps) ?? {
+      id: '',
       disabled: false,
       highlighted: false,
     },
   );
-
-  let mergedProps = $derived(
-    mergeProps(menu?.getItemProps(itemProps) ?? {}, localProps),
-  );
 </script>
 
 {#if asChild}

package/dist/menu/menu-option-item.svelte

@@ -38,18 +38,19 @@
 
   let menu = getMenuContext();
 
+  let mergedProps = $derived(
+    mergeProps(menu?.getOptionItemProps(itemProps) ?? {}, localProps),
+  );
+
   let itemState: OptionItemState = $derived(
     menu?.getOptionItemState(itemProps) ?? {
+      id: '',
       checked: false,
       disabled: false,
       highlighted: false,
     },
   );
 
-  let mergedProps = $derived(
-    mergeProps(menu?.getOptionItemProps(itemProps) ?? {}, localProps),
-  );
-
   setMenuOptionItemPropsContext(() => itemProps);
 </script>
 

package/dist/portal/portal-context.svelte.js

@@ -1,2 +1,2 @@
 import { createContext } from '../create-context.svelte.js';
-export const [getPortalProviderPropsContext, setPortalProviderPropsContext] = createContext('PortalProvider [PROPS]', false);
+export const [getPortalProviderPropsContext, setPortalProviderPropsContext] = createContext('PortalProvider.props', false);

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

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

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

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

package/dist/slider/slider-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getSliderContext, setSliderContext] = createContext('Slider');
-export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb [PROPS]');
+export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb.props');

package/dist/splitter/splitter-panel.svelte

@@ -19,7 +19,7 @@
   }: SplitterPanelProps = $props();
 
   let [panelProps, localProps] = $derived(
-    createSplitProps<PanelProps>(['id', 'snapSize'])(props),
+    createSplitProps<PanelProps>(['id'])(props),
   );
 
   let splitter = getSplitterContext();

package/dist/splitter/splitter-resize-trigger.svelte

@@ -2,18 +2,9 @@
   import type {ResizeTriggerProps} from '@zag-js/splitter';
   import type {Assign, HtmlIngredientProps} from '../types.js';
 
-  interface ResizeTriggerState {
-    min: number | undefined;
-    max: number | undefined;
-    value: number;
-    focused: boolean;
-    disabled: boolean;
-    panelIds: string[];
-  }
-
   export interface SplitterResizeTriggerProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, ResizeTriggerState>,
+      HtmlIngredientProps<'div', HTMLDivElement>,
       ResizeTriggerProps
     > {}
 </script>
@@ -31,20 +22,19 @@
   }: SplitterResizeTriggerProps = $props();
 
   let [resizeTriggerProps, localProps] = $derived(
-    createSplitProps<ResizeTriggerProps>(['id', 'step', 'disabled'])(props),
+    createSplitProps<ResizeTriggerProps>(['id', 'disabled'])(props),
   );
 
   let splitter = getSplitterContext();
-  let itemState = $derived(splitter.getResizeTriggerState(resizeTriggerProps));
   let mergedProps = $derived(
     mergeProps(splitter.getResizeTriggerProps(resizeTriggerProps), localProps),
   );
 </script>
 
 {#if asChild}
-  {@render asChild(mergedProps, itemState)}
+  {@render asChild(mergedProps)}
 {:else}
   <div bind:this={ref} {...mergedProps}>
-    {@render children?.(itemState)}
+    {@render children?.()}
   </div>
 {/if}

package/dist/splitter/splitter-resize-trigger.svelte.d.ts

@@ -1,14 +1,6 @@
 import type { ResizeTriggerProps } from '@zag-js/splitter';
 import type { Assign, HtmlIngredientProps } from '../types.js';
-interface ResizeTriggerState {
-    min: number | undefined;
-    max: number | undefined;
-    value: number;
-    focused: boolean;
-    disabled: boolean;
-    panelIds: string[];
-}
-export interface SplitterResizeTriggerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ResizeTriggerState>, ResizeTriggerProps> {
+export interface SplitterResizeTriggerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ResizeTriggerProps> {
 }
 declare const SplitterResizeTrigger: import("svelte").Component<SplitterResizeTriggerProps, {}, "ref">;
 type SplitterResizeTrigger = ReturnType<typeof SplitterResizeTrigger>;

package/dist/splitter/splitter-root.svelte

@@ -33,9 +33,15 @@
     createSplitProps<Omit<CreateSplitterProps, 'id'>>([
       'defaultSize',
       'ids',
-      'onSizeChange',
-      'onSizeChangeEnd',
+      'keyboardResizeBy',
+      'nonce',
+      'onCollapse',
+      'onExpand',
+      'onResize',
+      'onResizeEnd',
+      'onResizeStart',
       'orientation',
+      'panels',
       'size',
     ])(props),
   );

package/dist/steps/steps-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getStepsContext, setStepsContext] = createContext('Steps');
-export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem [PROPS]');
+export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem.props');

package/dist/tags-input/tags-input-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getTagsInputContext, setTagsInputContext] = createContext('TagsInput');
-export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem [PROPS]');
+export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem.props');

package/dist/timer/timer-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getTimerContext, setTimerContext] = createContext('Timer');
-export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem [PROPS]');
+export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem.props');

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -90,6 +90,10 @@
       "types": "./dist/floating-panel/index.d.ts",
       "svelte": "./dist/floating-panel/index.js"
     },
+    "./focus-trap": {
+      "types": "./dist/focus-trap/index.d.ts",
+      "svelte": "./dist/focus-trap/index.js"
+    },
     "./highlight": {
       "types": "./dist/highlight/index.d.ts",
       "svelte": "./dist/highlight/index.js"
@@ -98,6 +102,10 @@
       "types": "./dist/hover-card/index.d.ts",
       "svelte": "./dist/hover-card/index.js"
     },
+    "./listbox": {
+      "types": "./dist/listbox/index.d.ts",
+      "svelte": "./dist/listbox/index.js"
+    },
     "./locale-provider": {
       "types": "./dist/locale-provider/index.d.ts",
       "svelte": "./dist/locale-provider/index.js"
@@ -218,6 +226,10 @@
       "types": "./dist/anatomy.d.ts",
       "import": "./dist/anatomy.js"
     },
+    "./collection": {
+      "types": "./dist/collection.d.ts",
+      "import": "./dist/collection.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -307,55 +319,57 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@zag-js/accordion": "^1.4.0",
-    "@zag-js/anatomy": "^1.4.0",
-    "@zag-js/angle-slider": "^1.4.0",
-    "@zag-js/auto-resize": "^1.4.0",
-    "@zag-js/avatar": "^1.4.0",
-    "@zag-js/carousel": "^1.4.0",
-    "@zag-js/checkbox": "^1.4.0",
-    "@zag-js/clipboard": "^1.4.0",
-    "@zag-js/collapsible": "^1.4.0",
-    "@zag-js/color-picker": "^1.4.0",
-    "@zag-js/combobox": "^1.4.0",
-    "@zag-js/core": "^1.4.0",
-    "@zag-js/date-picker": "^1.4.0",
-    "@zag-js/dialog": "^1.4.0",
-    "@zag-js/dom-query": "^1.4.0",
-    "@zag-js/editable": "^1.4.0",
-    "@zag-js/file-upload": "^1.4.0",
-    "@zag-js/floating-panel": "^1.4.0",
-    "@zag-js/focus-trap": "^1.4.0",
-    "@zag-js/highlight-word": "^1.4.0",
-    "@zag-js/hover-card": "^1.4.0",
-    "@zag-js/i18n-utils": "^1.4.0",
-    "@zag-js/menu": "^1.4.0",
-    "@zag-js/number-input": "^1.4.0",
-    "@zag-js/pagination": "^1.4.0",
-    "@zag-js/pin-input": "^1.4.0",
-    "@zag-js/popover": "^1.4.0",
-    "@zag-js/presence": "^1.4.0",
-    "@zag-js/progress": "^1.4.0",
-    "@zag-js/qr-code": "^1.4.0",
-    "@zag-js/radio-group": "^1.4.0",
-    "@zag-js/rating-group": "^1.4.0",
-    "@zag-js/select": "^1.4.0",
-    "@zag-js/signature-pad": "^1.4.0",
-    "@zag-js/slider": "^1.4.0",
-    "@zag-js/splitter": "^1.4.0",
-    "@zag-js/steps": "^1.4.0",
-    "@zag-js/svelte": "^1.4.0",
-    "@zag-js/switch": "^1.4.0",
-    "@zag-js/tabs": "^1.4.0",
-    "@zag-js/tags-input": "^1.4.0",
-    "@zag-js/time-picker": "^1.4.0",
-    "@zag-js/timer": "^1.4.0",
-    "@zag-js/toast": "^1.4.0",
-    "@zag-js/toggle": "^1.4.0",
-    "@zag-js/toggle-group": "^1.4.0",
-    "@zag-js/tooltip": "^1.4.0",
-    "@zag-js/tour": "^1.4.0",
-    "@zag-js/tree-view": "^1.4.0",
+    "@zag-js/accordion": "^1.8.2",
+    "@zag-js/anatomy": "^1.8.2",
+    "@zag-js/angle-slider": "^1.8.2",
+    "@zag-js/auto-resize": "^1.8.2",
+    "@zag-js/avatar": "^1.8.2",
+    "@zag-js/carousel": "^1.8.2",
+    "@zag-js/checkbox": "^1.8.2",
+    "@zag-js/clipboard": "^1.8.2",
+    "@zag-js/collapsible": "^1.8.2",
+    "@zag-js/collection": "^1.8.2",
+    "@zag-js/color-picker": "^1.8.2",
+    "@zag-js/combobox": "^1.8.2",
+    "@zag-js/core": "^1.8.2",
+    "@zag-js/date-picker": "^1.8.2",
+    "@zag-js/dialog": "^1.8.2",
+    "@zag-js/dom-query": "^1.8.2",
+    "@zag-js/editable": "^1.8.2",
+    "@zag-js/file-upload": "^1.8.2",
+    "@zag-js/floating-panel": "^1.8.2",
+    "@zag-js/focus-trap": "^1.8.2",
+    "@zag-js/highlight-word": "^1.8.2",
+    "@zag-js/hover-card": "^1.8.2",
+    "@zag-js/i18n-utils": "^1.8.2",
+    "@zag-js/listbox": "^1.8.2",
+    "@zag-js/menu": "^1.8.2",
+    "@zag-js/number-input": "^1.8.2",
+    "@zag-js/pagination": "^1.8.2",
+    "@zag-js/pin-input": "^1.8.2",
+    "@zag-js/popover": "^1.8.2",
+    "@zag-js/presence": "^1.8.2",
+    "@zag-js/progress": "^1.8.2",
+    "@zag-js/qr-code": "^1.8.2",
+    "@zag-js/radio-group": "^1.8.2",
+    "@zag-js/rating-group": "^1.8.2",
+    "@zag-js/select": "^1.8.2",
+    "@zag-js/signature-pad": "^1.8.2",
+    "@zag-js/slider": "^1.8.2",
+    "@zag-js/splitter": "^1.8.2",
+    "@zag-js/steps": "^1.8.2",
+    "@zag-js/svelte": "^1.8.2",
+    "@zag-js/switch": "^1.8.2",
+    "@zag-js/tabs": "^1.8.2",
+    "@zag-js/tags-input": "^1.8.2",
+    "@zag-js/time-picker": "^1.8.2",
+    "@zag-js/timer": "^1.8.2",
+    "@zag-js/toast": "^1.8.2",
+    "@zag-js/toggle": "^1.8.2",
+    "@zag-js/toggle-group": "^1.8.2",
+    "@zag-js/tooltip": "^1.8.2",
+    "@zag-js/tour": "^1.8.2",
+    "@zag-js/tree-view": "^1.8.2",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
@@ -363,8 +377,8 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
-    "@sveltejs/adapter-vercel": "^5.6.3",
-    "@sveltejs/kit": "^2.19.2",
+    "@sveltejs/adapter-vercel": "^5.7.0",
+    "@sveltejs/kit": "^2.20.4",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
@@ -372,14 +386,14 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jsdom": "^21.1.7",
     "jsdom": "^26.0.0",
-    "publint": "^0.3.9",
+    "publint": "^0.3.10",
     "release-it": "^18.1.2",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.23.0",
+    "svelte": "^5.25.7",
     "svelte-check": "^4.1.5",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.8",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"
   },