bits-ui 1.0.0-next.16 → 1.0.0-next.18

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

@@ -3,7 +3,7 @@
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { useListboxInput } from "../../listbox/listbox.svelte.js";
+	import { useSelectInput } from "../../select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -13,7 +13,7 @@
 		...restProps
 	}: ComboboxInputProps = $props();
 
-	const inputState = useListboxInput({
+	const inputState = useSelectInput({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
-	import { useListboxComboTrigger } from "../../listbox/listbox.svelte.js";
+	import { useSelectComboTrigger } from "../../select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -12,7 +12,7 @@
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
-	const triggerState = useListboxComboTrigger({
+	const triggerState = useSelectComboTrigger({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -3,8 +3,8 @@
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.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";
+	import { useSelectRoot } from "../../select/select.svelte.js";
+	import ListboxHiddenInput from "../../select/components/select-hidden-input.svelte";
 
 	let {
 		value = $bindable(),
@@ -19,6 +19,7 @@
 		required = false,
 		controlledOpen = false,
 		controlledValue = false,
+		items = [],
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -31,7 +32,7 @@
 		}
 	}
 
-	useListboxRoot({
+	const rootState = useSelectRoot({
 		type,
 		value: box.with(
 			() => value!,
@@ -61,6 +62,7 @@
 		scrollAlignment: box.with(() => scrollAlignment),
 		name: box.with(() => name),
 		isCombobox: true,
+		items: box.with(() => items),
 	});
 </script>
 
@@ -68,14 +70,14 @@
 	{@render children?.()}
 </FloatingLayer>
 
-{#if Array.isArray(value)}
-	{#if value.length === 0}
+{#if Array.isArray(rootState.value.current)}
+	{#if rootState.value.current.length === 0}
 		<ListboxHiddenInput value="" />
 	{:else}
-		{#each value as item}
+		{#each rootState.value.current as item}
 			<ListboxHiddenInput value={item} />
 		{/each}
 	{/if}
 {:else}
-	<ListboxHiddenInput {value} />
+	<ListboxHiddenInput bind:value={rootState.value.current as string} />
 {/if}

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

@@ -4,12 +4,12 @@ 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 { default as Content } from "../select/components/select-content.svelte";
+export { default as ContentStatic } from "../select/components/select-content-static.svelte";
+export { default as Item } from "../select/components/select-item.svelte";
+export { default as Group } from "../select/components/select-group.svelte";
+export { default as GroupHeading } from "../select/components/select-group-heading.svelte";
+export { default as Viewport } from "../select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "../select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../select/components/select-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

@@ -4,11 +4,11 @@ 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 { default as Content } from "../select/components/select-content.svelte";
+export { default as ContentStatic } from "../select/components/select-content-static.svelte";
+export { default as Item } from "../select/components/select-item.svelte";
+export { default as Group } from "../select/components/select-group.svelte";
+export { default as GroupHeading } from "../select/components/select-group-heading.svelte";
+export { default as Viewport } from "../select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "../select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "../select/components/select-scroll-up-button.svelte";

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

@@ -1,6 +1,6 @@
 import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
 import type { WithChild, Without } from "../../internal/types.js";
-export type { ListboxBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, ListboxContentProps as ComboboxContentProps, ListboxContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, ListboxContentStaticProps as ComboboxContentStaticProps, ListboxContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, ListboxItemProps as ComboboxItemProps, ListboxItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, ListboxItemSnippetProps as ComboboxItemSnippetProps, ListboxMultipleRootProps as ComboboxMultipleRootProps, ListboxMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, ListboxRootProps as ComboboxRootProps, ListboxRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, ListboxSingleRootProps as ComboboxSingleRootProps, ListboxSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, ListboxTriggerProps as ComboboxTriggerProps, ListboxTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, ListboxGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, ListboxGroupProps as ComboboxGroupProps, ListboxGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, ListboxGroupHeadingProps as ComboboxGroupHeadingProps, ListboxViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, ListboxViewportProps as ComboboxViewportProps, ListboxScrollDownButtonProps as ComboboxScrollDownButtonProps, ListboxScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, ListboxScrollUpButtonProps as ComboboxScrollUpButtonProps, ListboxScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, ListboxArrowProps as ComboboxArrowProps, ListboxArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, ListboxPortalProps as ComboboxPortalProps, ListboxPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../listbox/types.js";
+export type { SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectMultipleRootProps as ComboboxMultipleRootProps, SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, SelectRootProps as ComboboxRootProps, SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, SelectSingleRootProps as ComboboxSingleRootProps, SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
 export type ComboboxInputPropsWithoutHTML = WithChild<{
     /**
      * The default value of the input. This is not a reactive prop and is only used to populate

package/dist/bits/index.d.ts

@@ -17,7 +17,6 @@ export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
-export { Listbox } from "./listbox/index.js";
 export { Menubar } from "./menubar/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";

package/dist/bits/index.js

@@ -17,7 +17,6 @@ export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
-export { Listbox } from "./listbox/index.js";
 export { Menubar } from "./menubar/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";

package/dist/bits/menu/menu.svelte.js

@@ -4,7 +4,7 @@ import { IsFocusWithin } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { addEventListener } from "../../internal/events.js";
-import { useTypeahead } from "../../internal/use-typeahead.svelte.js";
+import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
@@ -116,7 +116,7 @@ class MenuContentState {
         onDestroyEffect(() => {
             window.clearTimeout(this.#timer);
         });
-        this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch;
+        this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: this.parentMenu.contentId,
             candidateAttr: this.parentMenu.root.getAttr("item"),

package/dist/bits/menubar/menubar.svelte.js

@@ -4,7 +4,7 @@ import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { createContext } from "../../internal/create-context.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { wrapArray } from "../../internal/use-typeahead.svelte.js";
+import { wrapArray } from "../../internal/arrays.js";
 import { isBrowser } from "../../internal/is.js";
 const ROOT_ATTR = "data-menubar-root";
 const TRIGGER_ATTR = "data-menubar-trigger";

package/dist/bits/pagination/types.d.ts

@@ -6,6 +6,7 @@ type PaginationSnippetProps = {
         start: number;
         end: number;
     };
+    currentPage: number;
 };
 export type PaginationRootPropsWithoutHTML = WithChild<{
     /**

package/dist/bits/{listbox/components/listbox-content-static.svelte → select/components/select-content-static.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxContentStaticProps } from "../types.js";
-	import { useListboxContent } from "../listbox.svelte.js";
+	import type { SelectContentStaticProps } from "../types.js";
+	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -15,9 +15,9 @@
 		children,
 		child,
 		...restProps
-	}: ListboxContentStaticProps = $props();
+	}: SelectContentStaticProps = $props();
 
-	const contentState = useListboxContent({
+	const contentState = useSelectContent({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -38,12 +38,12 @@
 		if (e.defaultPrevented) return;
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
+		contentState.root.handleClose();
 	}}
 	onEscapeKeydown={(e) => {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
+		contentState.root.handleClose();
 	}}
 	onOpenAutoFocus={(e) => e.preventDefault()}
 	onCloseAutoFocus={(e) => e.preventDefault()}

package/dist/bits/{listbox/components/listbox-group-heading.svelte.d.ts → select/components/select-content-static.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ListboxGroupHeadingProps } from "../types.js";
+import type { SelectContentStaticProps } 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,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ListboxGroupHeading: $$__sveltets_2_IsomorphicComponent<ListboxGroupHeadingProps, {
+declare const SelectContentStatic: $$__sveltets_2_IsomorphicComponent<SelectContentStaticProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
-type ListboxGroupHeading = InstanceType<typeof ListboxGroupHeading>;
-export default ListboxGroupHeading;
+type SelectContentStatic = InstanceType<typeof SelectContentStatic>;
+export default SelectContentStatic;

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

@@ -1,55 +1,76 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentProps } from "../types.js";
-	import { useSelectContent, useSelectContentFrag } from "../select.svelte.js";
-	import SelectProvider from "./select-provider.svelte";
-	import SelectContentImpl from "./select-content-impl.svelte";
+	import { useSelectContent } from "../select.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { useId } from "../../../internal/use-id.js";
-	import Portal from "../../utilities/portal/portal.svelte";
-	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		forceMount = false,
-		position = "floating",
+		side = "bottom",
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
 		...restProps
 	}: SelectContentProps = $props();
 
-	const contentState = useSelectContentFrag();
-
-	const contentContext = useSelectContent({
+	const contentState = useSelectContent({
 		id: box.with(() => id),
-		position: box.with(() => position),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const isPresent = $derived(contentState.root.open.current || forceMount);
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-{#if isPresent}
-	<PresenceLayer present={isPresent} {id}>
-		{#snippet presence({ present })}
-			{@const finalProps = restProps as any}
-			<SelectContentImpl
-				{present}
-				{...finalProps}
-				{ref}
-				{id}
-				{position}
-				context={contentContext}
-			/>
-		{/snippet}
-	</PresenceLayer>
-{:else if contentState.root.contentFragment}
-	<Portal to={contentState.root.contentFragment}>
-		<div>
-			<SelectProvider rootContext={contentState.root}>
-				{@render restProps.children?.()}
-			</SelectProvider>
-		</div>
-	</Portal>
-{/if}
+<PopperLayer
+	{...mergedProps}
+	{side}
+	present={contentState.root.open.current || forceMount}
+	{id}
+	onInteractOutside={(e) => {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}}
+	onEscapeKeydown={(e) => {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
+	trapFocus={false}
+	loop={false}
+	preventScroll={false}
+	onPlaced={() => (contentState.isPositioned = true)}
+	{forceMount}
+>
+	{#snippet popper({ props })}
+		{@const finalProps = mergeProps(props, {
+			style: {
+				"--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
+				"--bits-select-content-available-width": "var(--bits-floating-available-width)",
+				"--bits-select-content-available-height": "var(--bits-floating-available-height)",
+				"--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
+				"--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
+				...contentState.props.style,
+			},
+		})}
+		{#if child}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
+		{:else}
+			<div {...finalProps}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>

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

@@ -5,10 +5,10 @@
 	import { useId } from "../../../internal/use-id.js";
 
 	let {
-		children,
-		child,
-		ref = $bindable(null),
 		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
 		...restProps
 	}: SelectGroupHeadingProps = $props();
 

package/dist/bits/select/components/select-group.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectGroupProps } from "../types.js";
 	import { useSelectGroup } from "../select.svelte.js";
+	import type { SelectGroupProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 
 	let {
-		children,
-		child,
 		id = useId(),
 		ref = $bindable(null),
+		children,
+		child,
 		...restProps
 	}: SelectGroupProps = $props();
 
@@ -19,6 +19,7 @@
 			(v) => (ref = v)
 		),
 	});
+
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));
 </script>
 

package/dist/bits/{listbox/components/listbox-hidden-input.svelte → select/components/select-hidden-input.svelte}

@@ -1,21 +1,21 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useListboxHiddenInput } from "../listbox.svelte.js";
+	import { useSelectHiddenInput } from "../select.svelte.js";
 	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
 
 	type Props = {
 		value?: string;
 	};
 
-	let { value = "" }: Props = $props();
+	let { value = $bindable("") }: Props = $props();
 
-	const hiddenInputState = useListboxHiddenInput({
+	const hiddenInputState = useSelectHiddenInput({
 		value: box.with(() => value),
 	});
 </script>
 
 <VisuallyHidden>
 	{#if hiddenInputState.shouldRender}
-		<input {...hiddenInputState.props} />
+		<input {...hiddenInputState.props} bind:value />
 	{/if}
 </VisuallyHidden>

package/dist/bits/{listbox/components/listbox-hidden-input.svelte.d.ts → select/components/select-hidden-input.svelte.d.ts}

@@ -11,10 +11,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ListboxHiddenInput: $$__sveltets_2_IsomorphicComponent<{
+declare const SelectHiddenInput: $$__sveltets_2_IsomorphicComponent<{
     value?: string;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ListboxHiddenInput = InstanceType<typeof ListboxHiddenInput>;
-export default ListboxHiddenInput;
+}, {}, {}, "value">;
+type SelectHiddenInput = InstanceType<typeof SelectHiddenInput>;
+export default SelectHiddenInput;

package/dist/bits/select/components/select-item.svelte

@@ -1,38 +1,43 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectItemProps } from "../types.js";
 	import { useSelectItem } from "../select.svelte.js";
+	import type { SelectItemProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id = useId(),
-		value,
-		textValue = "",
 		ref = $bindable(null),
+		value,
+		label = value,
+		disabled = false,
 		children,
 		child,
-		disabled = false,
+		onHighlight = noop,
+		onUnhighlight = noop,
 		...restProps
 	}: SelectItemProps = $props();
 
 	const itemState = useSelectItem({
 		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		value: box.with(() => value),
-		textValue: box.with(() => textValue),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
+		label: box.with(() => label),
+		onHighlight: box.with(() => onHighlight),
+		onUnhighlight: box.with(() => onUnhighlight),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, selected: itemState.isSelected })}
+	{@render child({ props: mergedProps, ...itemState.snippetProps })}
 {:else}
 	<div {...mergedProps}>
-		{@render children?.({ selected: itemState.isSelected })}
+		{@render children?.(itemState.snippetProps)}
 	</div>
 {/if}

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -1,28 +1,39 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectScrollUpButtonProps } from "../types.js";
+	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { useSelectScrollDownButton } from "../select.svelte.js";
-	import SelectScrollDownButtonMounted from "./select-scroll-down-button-mounted.svelte";
 	import { useId } from "../../../internal/use-id.js";
+	import { Mounted } from "../../utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: SelectScrollUpButtonProps = $props();
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: SelectScrollDownButtonProps = $props();
 
-	const mounted = box(false);
+	let mounted = $state(false);
 
 	const scrollDownButtonState = useSelectScrollDownButton({
 		id: box.with(() => id),
-		mounted: box.from(mounted),
+		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const { child: _child, children: _children, ...restWithoutChildren } = restProps;
-	const mergedProps = $derived(mergeProps(restWithoutChildren, scrollDownButtonState.props));
-	const { style: _style, ...restWithoutStyle } = restProps;
+	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
 </script>
 
 {#if scrollDownButtonState.canScrollDown}
-	<SelectScrollDownButtonMounted {mounted} {...restWithoutStyle} {...mergedProps} />
+	<Mounted onMountedChange={(m) => (mounted = m)} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
 {/if}

package/dist/bits/select/components/select-scroll-down-button.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SelectScrollUpButtonProps } from "../types.js";
+import type { SelectScrollDownButtonProps } 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 SelectScrollDownButton: $$__sveltets_2_IsomorphicComponent<SelectScrollUpButtonProps, {
+declare const SelectScrollDownButton: $$__sveltets_2_IsomorphicComponent<SelectScrollDownButtonProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type SelectScrollDownButton = InstanceType<typeof SelectScrollDownButton>;

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -2,27 +2,38 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { useSelectScrollUpButton } from "../select.svelte.js";
-	import SelectScrollUpButtonMounted from "./select-scroll-up-button-mounted.svelte";
 	import { useId } from "../../../internal/use-id.js";
+	import { Mounted } from "../../utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: SelectScrollUpButtonProps = $props();
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: SelectScrollUpButtonProps = $props();
 
-	const mounted = box(false);
+	let mounted = $state(false);
 
-	const scrollUpButtonState = useSelectScrollUpButton({
+	const scrollDownButtonState = useSelectScrollUpButton({
 		id: box.with(() => id),
-		mounted: box.from(mounted),
+		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const { child: _child, children: _children, ...restWithoutChildren } = restProps;
-	const mergedProps = $derived(mergeProps(restWithoutChildren, scrollUpButtonState.props));
-	const { style: _style, ...restWithoutStyle } = restProps;
+	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
 </script>
 
-{#if scrollUpButtonState.canScrollUp}
-	<SelectScrollUpButtonMounted {...restWithoutStyle} {...mergedProps} {mounted} />
+{#if scrollDownButtonState.canScrollUp}
+	<Mounted onMountedChange={(m) => (mounted = m)} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
 {/if}