bits-ui 1.0.0-next.1 → 1.0.0-next.11

package/dist/bits/checkbox/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/checkbox.svelte";

package/dist/bits/checkbox/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/checkbox.svelte";
-export type { CheckboxRootProps as RootProps } from "./types.js";
+export * as Checkbox from "./exports.js";

package/dist/bits/checkbox/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/checkbox.svelte";
+export * as Checkbox from "./exports.js";

package/dist/bits/collapsible/collapsible.svelte.d.ts

@@ -14,8 +14,6 @@ declare class CollapsibleRootState {
     contentId: string | undefined;
     constructor(props: CollapsibleRootStateProps);
     toggleOpen(): void;
-    createContent(props: CollapsibleContentStateProps): CollapsibleContentState;
-    createTrigger(props: CollapsibleTriggerStateProps): CollapsibleTriggerState;
     props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,7 +1,7 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { afterTick } from "../../internal/afterTick.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
+import { afterTick } from "../../internal/after-tick.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
+import { createContext } from "../../internal/create-context.js";
 const COLLAPSIBLE_ROOT_ATTR = "data-collapsible-root";
 const COLLAPSIBLE_CONTENT_ATTR = "data-collapsible-content";
 const COLLAPSIBLE_TRIGGER_ATTR = "data-collapsible-trigger";
@@ -25,12 +25,6 @@ class CollapsibleRootState {
     toggleOpen() {
         this.open.current = !this.open.current;
     }
-    createContent(props) {
-        return new CollapsibleContentState(props, this);
-    }
-    createTrigger(props) {
-        return new CollapsibleTriggerState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-state": getDataOpenClosed(this.open.current),
@@ -154,8 +148,10 @@ export function useCollapsibleRoot(props) {
     return setCollapsibleRootContext(new CollapsibleRootState(props));
 }
 export function useCollapsibleTrigger(props) {
-    return getCollapsibleRootContext().createTrigger(props);
+    const root = getCollapsibleRootContext();
+    return new CollapsibleTriggerState(props, root);
 }
 export function useCollapsibleContent(props) {
-    return getCollapsibleRootContext().createContent(props);
+    const root = getCollapsibleRootContext();
+    return new CollapsibleContentState(props, root);
 }

package/dist/bits/collapsible/components/collapsible-content.svelte

@@ -3,8 +3,8 @@
 	import { useCollapsibleContent } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,

package/dist/bits/collapsible/components/collapsible-trigger.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
+	import type { CollapsibleTriggerProps } from "../types.js";
 	import { useCollapsibleTrigger } from "../collapsible.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -12,7 +12,7 @@
 		id = useId(),
 		disabled = false,
 		...restProps
-	}: TriggerProps = $props();
+	}: CollapsibleTriggerProps = $props();
 
 	const triggerState = useCollapsibleTrigger({
 		id: box.with(() => id),

package/dist/bits/collapsible/components/collapsible-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { CollapsibleTriggerProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CollapsibleTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const CollapsibleTrigger: $$__sveltets_2_IsomorphicComponent<CollapsibleTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type CollapsibleTrigger = InstanceType<typeof CollapsibleTrigger>;

package/dist/bits/collapsible/components/collapsible.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { CollapsibleRootProps } from "../types.js";
 	import { useCollapsibleRoot } from "../collapsible.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/callbacks.js";
 
 	let {
@@ -16,7 +16,7 @@
 		controlledOpen = false,
 		onOpenChange = noop,
 		...restProps
-	}: RootProps = $props();
+	}: CollapsibleRootProps = $props();
 
 	const rootState = useCollapsibleRoot({
 		open: box.with(

package/dist/bits/collapsible/components/collapsible.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { CollapsibleRootProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Collapsible: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Collapsible: $$__sveltets_2_IsomorphicComponent<CollapsibleRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "open" | "ref">;
 type Collapsible = InstanceType<typeof Collapsible>;

package/dist/bits/collapsible/exports.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/collapsible.svelte";
+export { default as Content } from "./components/collapsible-content.svelte";
+export { default as Trigger } from "./components/collapsible-trigger.svelte";
+export type { CollapsibleRootProps as RootProps, CollapsibleContentProps as ContentProps, CollapsibleTriggerProps as TriggerProps, } from "./types.js";

package/dist/bits/collapsible/exports.js

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/collapsible.svelte";
+export { default as Content } from "./components/collapsible-content.svelte";
+export { default as Trigger } from "./components/collapsible-trigger.svelte";

package/dist/bits/collapsible/index.d.ts

@@ -1,4 +1 @@
-export { default as Root } from "./components/collapsible.svelte";
-export { default as Content } from "./components/collapsible-content.svelte";
-export { default as Trigger } from "./components/collapsible-trigger.svelte";
-export type { CollapsibleRootProps as RootProps, CollapsibleContentProps as ContentProps, CollapsibleTriggerProps as TriggerProps, } from "./types.js";
+export * as Collapsible from "./exports.js";

package/dist/bits/collapsible/index.js

@@ -1,3 +1 @@
-export { default as Root } from "./components/collapsible.svelte";
-export { default as Content } from "./components/collapsible-content.svelte";
-export { default as Trigger } from "./components/collapsible-trigger.svelte";
+export * as Collapsible from "./exports.js";

package/dist/bits/combobox/components/combobox-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { InputProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { ComboboxInputProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 	import { useListboxInput } from "../../listbox/listbox.svelte.js";
 
@@ -12,7 +12,7 @@
 		child,
 		defaultValue,
 		...restProps
-	}: InputProps = $props();
+	}: ComboboxInputProps = $props();
 
 	const inputState = useListboxInput({
 		id: box.with(() => id),

package/dist/bits/combobox/components/combobox-input.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InputProps } from "../index.js";
+import type { ComboboxInputProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ComboboxInput: $$__sveltets_2_IsomorphicComponent<InputProps, {
+declare const ComboboxInput: $$__sveltets_2_IsomorphicComponent<ComboboxInputProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ComboboxInput = InstanceType<typeof ComboboxInput>;

package/dist/bits/combobox/components/combobox-trigger.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { ComboboxTriggerProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 	import { useListboxComboTrigger } from "../../listbox/listbox.svelte.js";
 
 	let {
@@ -11,7 +11,7 @@
 		child,
 		children,
 		...restProps
-	}: TriggerProps = $props();
+	}: ComboboxTriggerProps = $props();
 
 	const triggerState = useListboxComboTrigger({
 		id: box.with(() => id),

package/dist/bits/combobox/components/combobox-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { ComboboxTriggerProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ComboboxTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const ComboboxTrigger: $$__sveltets_2_IsomorphicComponent<ComboboxTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ComboboxTrigger = InstanceType<typeof ComboboxTrigger>;

package/dist/bits/combobox/components/combobox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "../../../internal/callbacks.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { useListboxRoot } from "../../listbox/listbox.svelte.js";
 	import ListboxHiddenInput from "../../listbox/components/listbox-hidden-input.svelte";
 
@@ -20,7 +20,7 @@
 		controlledOpen = false,
 		controlledValue = false,
 		children,
-	}: RootProps = $props();
+	}: ComboboxRootProps = $props();
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];
@@ -64,9 +64,9 @@
 	});
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{@render children?.()}
-</FloatingLayer.Root>
+</FloatingLayer>
 
 {#if Array.isArray(value)}
 	{#if value.length === 0}

package/dist/bits/combobox/exports.d.ts

@@ -0,0 +1,15 @@
+export { default as Root } from "./components/combobox.svelte";
+export { default as Input } from "./components/combobox-input.svelte";
+export { default as Separator } from "../separator/components/separator.svelte";
+export { default as Arrow } from "../utilities/arrow/arrow.svelte";
+export { default as Trigger } from "./components/combobox-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "../listbox/components/listbox-content.svelte";
+export { default as ContentStatic } from "../listbox/components/listbox-content-static.svelte";
+export { default as Item } from "../listbox/components/listbox-item.svelte";
+export { default as Group } from "../listbox/components/listbox-group.svelte";
+export { default as GroupHeading } from "../listbox/components/listbox-group-heading.svelte";
+export { default as Viewport } from "../listbox/components/listbox-viewport.svelte";
+export { default as ScrollDownButton } from "../listbox/components/listbox-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../listbox/components/listbox-scroll-up-button.svelte";
+export type { ComboboxRootProps as RootProps, ComboboxContentProps as ContentProps, ComboboxContentStaticProps as ContentStaticProps, ComboboxInputProps as InputProps, ComboboxItemProps as ItemProps, ComboboxGroupProps as GroupProps, ComboboxGroupHeadingProps as GroupHeadingProps, ComboboxPortalProps as PortalProps, ComboboxArrowProps as ArrowProps, ComboboxTriggerProps as TriggerProps, ComboboxScrollDownButtonProps as ScrollDownButtonProps, ComboboxScrollUpButtonProps as ScrollUpButtonProps, ComboboxViewportProps as ViewportProps, } from "./types.js";

package/dist/bits/combobox/exports.js

@@ -0,0 +1,14 @@
+export { default as Root } from "./components/combobox.svelte";
+export { default as Input } from "./components/combobox-input.svelte";
+export { default as Separator } from "../separator/components/separator.svelte";
+export { default as Arrow } from "../utilities/arrow/arrow.svelte";
+export { default as Trigger } from "./components/combobox-trigger.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "../listbox/components/listbox-content.svelte";
+export { default as ContentStatic } from "../listbox/components/listbox-content-static.svelte";
+export { default as Item } from "../listbox/components/listbox-item.svelte";
+export { default as Group } from "../listbox/components/listbox-group.svelte";
+export { default as GroupHeading } from "../listbox/components/listbox-group-heading.svelte";
+export { default as Viewport } from "../listbox/components/listbox-viewport.svelte";
+export { default as ScrollDownButton } from "../listbox/components/listbox-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../listbox/components/listbox-scroll-up-button.svelte";

package/dist/bits/combobox/index.d.ts

@@ -1,8 +1 @@
-export { default as Root } from "./components/combobox.svelte";
-export { default as Input } from "./components/combobox-input.svelte";
-export { default as Separator } from "../separator/components/separator.svelte";
-export { default as Arrow } from "../utilities/arrow/arrow.svelte";
-export { default as Trigger } from "./components/combobox-trigger.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { Content, ContentStatic, Item, Group, GroupHeading, Viewport, ScrollDownButton, ScrollUpButton, } from "../listbox/index.js";
-export type { ComboboxRootProps as RootProps, ComboboxContentProps as ContentProps, ComboboxContentStaticProps as ContentStaticProps, ComboboxInputProps as InputProps, ComboboxItemProps as ItemProps, ComboboxGroupProps as GroupProps, ComboboxGroupHeadingProps as GroupHeadingProps, ComboboxPortalProps as PortalProps, ComboboxArrowProps as ArrowProps, ComboboxTriggerProps as TriggerProps, ComboboxScrollDownButtonProps as ScrollDownButtonProps, ComboboxScrollUpButtonProps as ScrollUpButtonProps, ComboboxViewportProps as ViewportProps, } from "./types.js";
+export * as Combobox from "./exports.js";

package/dist/bits/combobox/index.js

@@ -1,7 +1 @@
-export { default as Root } from "./components/combobox.svelte";
-export { default as Input } from "./components/combobox-input.svelte";
-export { default as Separator } from "../separator/components/separator.svelte";
-export { default as Arrow } from "../utilities/arrow/arrow.svelte";
-export { default as Trigger } from "./components/combobox-trigger.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { Content, ContentStatic, Item, Group, GroupHeading, Viewport, ScrollDownButton, ScrollUpButton, } from "../listbox/index.js";
+export * as Combobox from "./exports.js";

package/dist/bits/command/command.svelte.d.ts

@@ -49,13 +49,6 @@ declare class CommandRootState {
         readonly tabindex: -1;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
-    createEmpty(props: CommandEmptyStateProps): CommandEmptyState;
-    createGroupContainer(props: CommandGroupContainerStateProps): CommandGroupContainerState;
-    createInput(props: CommandInputStateProps): CommandInputState;
-    createItem(props: CommandItemStateProps): CommandItemState;
-    createSeparator(props: CommandSeparatorStateProps): CommandSeparatorState;
-    createList(props: CommandListStateProps): CommandListState;
-    createLabel(props: CommandLabelStateProps): CommandLabelState;
 }
 type CommandEmptyStateProps = WithRefProps & ReadableBoxedValues<{
     forceMount: boolean;
@@ -207,7 +200,6 @@ declare class CommandListState {
         readonly "aria-label": string;
         readonly "data-command-list": "";
     };
-    createViewport(props: CommandViewportStateProps): CommandViewportState;
 }
 type CommandLabelStateProps = WithRefProps<ReadableBoxedValues<{
     for?: string;

package/dist/bits/command/command.svelte.js

@@ -1,14 +1,14 @@
 import { untrack } from "svelte";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
 import { commandScore } from "./command-score.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterSleep } from "../../internal/afterSleep.js";
+import { useRefById } from "../../internal/use-ref-by-id.svelte.js";
+import { createContext } from "../../internal/create-context.js";
+import { afterSleep } from "../../internal/after-sleep.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { srOnlyStyles } from "../../internal/style.js";
-import { afterTick } from "../../internal/afterTick.js";
+import { afterTick } from "../../internal/after-tick.js";
 const ROOT_ATTR = "data-command-root";
 const LIST_ATTR = "data-command-list";
 const INPUT_ATTR = "data-command-input";
@@ -90,7 +90,7 @@ class CommandRootState {
         const defaultState = {
             /** Value of the search query */
             search: "",
-            /** Currnetly selected item value */
+            /** Currently selected item value */
             value: this.valueProp.current ?? "",
             filtered: {
                 /** The count of all visible items. */
@@ -107,10 +107,6 @@ class CommandRootState {
             id: this.id,
             ref: this.ref,
         });
-        $effect(() => {
-            this._commandState.value;
-            this.#scrollSelectedIntoView();
-        });
     }
     #score = (value, keywords) => {
         const filter = this.filter.current ?? defaultFilter;
@@ -239,12 +235,16 @@ class CommandRootState {
             const item = this.#getSelectedItem();
             if (!item)
                 return;
-            const firstChildOfParent = getFirstNonCommentChild(item.parentElement);
-            if (firstChildOfParent === item) {
+            const grandparent = item.parentElement?.parentElement;
+            if (!grandparent)
+                return;
+            const firstChildOfParent = getFirstNonCommentChild(grandparent);
+            if (firstChildOfParent && firstChildOfParent.dataset.value === item.dataset.value) {
                 item
                     ?.closest(GROUP_SELECTOR)
                     ?.querySelector(GROUP_HEADING_SELECTOR)
                     ?.scrollIntoView({ block: "nearest" });
+                return;
             }
             item.scrollIntoView({ block: "nearest" });
         });
@@ -432,27 +432,6 @@ class CommandRootState {
         tabindex: -1,
         onkeydown: this.#onkeydown,
     }));
-    createEmpty(props) {
-        return new CommandEmptyState(props, this);
-    }
-    createGroupContainer(props) {
-        return new CommandGroupContainerState(props, this);
-    }
-    createInput(props) {
-        return new CommandInputState(props, this);
-    }
-    createItem(props) {
-        return new CommandItemState(props, this);
-    }
-    createSeparator(props) {
-        return new CommandSeparatorState(props, this);
-    }
-    createList(props) {
-        return new CommandListState(props, this);
-    }
-    createLabel(props) {
-        return new CommandLabelState(props, this);
-    }
 }
 class CommandEmptyState {
     #ref;
@@ -804,9 +783,6 @@ class CommandListState {
         "aria-label": this.#ariaLabel.current,
         [LIST_ATTR]: "",
     }));
-    createViewport(props) {
-        return new CommandViewportState(props, this);
-    }
 }
 class CommandLabelState {
     #ref;
@@ -876,35 +852,45 @@ export function useCommandRoot(props) {
     return setCommandRootContext(new CommandRootState(props));
 }
 export function useCommandEmpty(props) {
-    return getCommandRootContext().createEmpty(props);
+    const root = getCommandRootContext();
+    return new CommandEmptyState(props, root);
 }
 export function useCommandItem(props) {
-    return getCommandRootContext().createItem(props);
+    const root = getCommandRootContext();
+    return new CommandItemState(props, root);
 }
 export function useCommandGroupContainer(props) {
-    return setCommandGroupContainerContext(getCommandRootContext().createGroupContainer(props));
+    const root = getCommandRootContext();
+    return setCommandGroupContainerContext(new CommandGroupContainerState(props, root));
 }
 export function useCommandGroupHeading(props) {
-    return getCommandGroupContainerContext().createGroupHeading(props);
+    const groupContainer = getCommandGroupContainerContext();
+    return new CommandGroupHeadingState(props, groupContainer);
 }
 export function useCommandGroupItems(props) {
-    return getCommandGroupContainerContext().createGroupItems(props);
+    const groupContainer = getCommandGroupContainerContext();
+    return new CommandGroupItemsState(props, groupContainer);
 }
 export function useCommandInput(props) {
-    return getCommandRootContext().createInput(props);
+    const root = getCommandRootContext();
+    return new CommandInputState(props, root);
 }
 export function useCommandLoading(props) {
     return new CommandLoadingState(props);
 }
 export function useCommandSeparator(props) {
-    return getCommandRootContext().createSeparator(props);
+    const root = getCommandRootContext();
+    return new CommandSeparatorState(props, root);
 }
 export function useCommandList(props) {
-    return setCommandListContext(getCommandRootContext().createList(props));
+    const root = getCommandRootContext();
+    return setCommandListContext(new CommandListState(props, root));
 }
 export function useCommandViewport(props) {
-    return getCommandListContext().createViewport(props);
+    const list = getCommandListContext();
+    return new CommandViewportState(props, list);
 }
 export function useCommandLabel(props) {
-    return getCommandRootContext().createLabel(props);
+    const root = getCommandRootContext();
+    return new CommandLabelState(props, root);
 }

package/dist/bits/command/components/command-empty.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { EmptyProps } from "../index.js";
+	import type { CommandEmptyProps } from "../types.js";
 	import { useCommandEmpty } from "../command.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -12,7 +12,7 @@
 		child,
 		forceMount = false,
 		...restProps
-	}: EmptyProps = $props();
+	}: CommandEmptyProps = $props();
 
 	const emptyState = useCommandEmpty({
 		id: box.with(() => id),

package/dist/bits/command/components/command-empty.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { EmptyProps } from "../index.js";
+import type { CommandEmptyProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CommandEmpty: $$__sveltets_2_IsomorphicComponent<EmptyProps, {
+declare const CommandEmpty: $$__sveltets_2_IsomorphicComponent<CommandEmptyProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type CommandEmpty = InstanceType<typeof CommandEmpty>;

package/dist/bits/command/components/command-group-heading.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useCommandGroupHeading } from "../command.svelte.js";
-	import type { GroupHeadingProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { CommandGroupHeadingProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		id = useId(),
@@ -11,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: GroupHeadingProps = $props();
+	}: CommandGroupHeadingProps = $props();
 
 	const headingState = useCommandGroupHeading({
 		id: box.with(() => id),

package/dist/bits/command/components/command-group-heading.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GroupHeadingProps } from "../index.js";
+import type { CommandGroupHeadingProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CommandGroupHeading: $$__sveltets_2_IsomorphicComponent<GroupHeadingProps, {
+declare const CommandGroupHeading: $$__sveltets_2_IsomorphicComponent<CommandGroupHeadingProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type CommandGroupHeading = InstanceType<typeof CommandGroupHeading>;

package/dist/bits/command/components/command-group-items.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { GroupItemsProps } from "../index.js";
+	import type { CommandGroupItemsProps } from "../types.js";
 	import { useCommandGroupItems } from "../command.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { mergeProps } from "../../../internal/merge-props.js";
 
 	let {
 		id = useId(),
@@ -11,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: GroupItemsProps = $props();
+	}: CommandGroupItemsProps = $props();
 
 	const groupItemsState = useCommandGroupItems({
 		id: box.with(() => id),

package/dist/bits/command/components/command-group-items.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GroupItemsProps } from "../index.js";
+import type { CommandGroupItemsProps } from "../types.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CommandGroupItems: $$__sveltets_2_IsomorphicComponent<GroupItemsProps, {
+declare const CommandGroupItems: $$__sveltets_2_IsomorphicComponent<CommandGroupItemsProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type CommandGroupItems = InstanceType<typeof CommandGroupItems>;