bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,55 +1,106 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
-	import { useSelectContent, useSelectContentFrag } from "../select.svelte.js";
-	import SelectProvider from "./select-provider.svelte";
-	import SelectContentImpl from "./select-content-impl.svelte";
-	import { useId } from "../../../internal/useId.js";
-	import Portal from "../../utilities/portal/portal.svelte";
-	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SelectContentProps } 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";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		forceMount = false,
-		position = "floating",
+		side = "bottom",
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
+		preventScroll = false,
 		...restProps
-	}: ContentProps = $props();
+	}: 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));
+
+	function handleInteractOutside(e: PointerEvent) {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}
 </script>
 
-{#if isPresent}
-	<PresenceLayer present={isPresent} {id}>
-		{#snippet presence({ present })}
-			{@const finalProps = restProps as any}
-			<SelectContentImpl
-				{present}
-				{...finalProps}
-				{ref}
-				{id}
-				{position}
-				context={contentContext}
-			/>
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{side}
+		enabled={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		{preventScroll}
+		onPlaced={() => (contentState.isPositioned = true)}
+		forceMount={true}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{side}
+		present={contentState.root.open.current}
+		{id}
+		onInteractOutside={handleInteractOutside}
+		onEscapeKeydown={handleEscapeKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={(e) => e.preventDefault()}
+		trapFocus={false}
+		loop={false}
+		{preventScroll}
+		onPlaced={() => (contentState.isPositioned = true)}
+		forceMount={false}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
 		{/snippet}
-	</PresenceLayer>
-{:else if contentState.root.contentFragment}
-	<Portal to={contentState.root.contentFragment}>
-		<div>
-			<SelectProvider rootContext={contentState.root}>
-				{@render restProps.children?.()}
-			</SelectProvider>
-		</div>
-	</Portal>
+	</PopperLayer>
 {/if}

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

@@ -1,19 +1,4 @@
-import type { ContentProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectContent = InstanceType<typeof SelectContent>;
+import type { SelectContentProps } from "../types.js";
+declare const SelectContent: import("svelte").Component<SelectContentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
 export default SelectContent;

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

@@ -1,17 +1,16 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { GroupHeadingProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SelectGroupHeadingProps } from "../types.js";
 	import { useSelectGroupHeading } from "../select.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
-		children,
-		child,
-		ref = $bindable(null),
 		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
 		...restProps
-	}: GroupHeadingProps = $props();
+	}: SelectGroupHeadingProps = $props();
 
 	const groupHeadingState = useSelectGroupHeading({
 		id: box.with(() => id),

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

@@ -1,19 +1,4 @@
-import type { GroupHeadingProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectGroupHeading: $$__sveltets_2_IsomorphicComponent<GroupHeadingProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectGroupHeading = InstanceType<typeof SelectGroupHeading>;
+import type { SelectGroupHeadingProps } from "../types.js";
+declare const SelectGroupHeading: import("svelte").Component<SelectGroupHeadingProps, {}, "ref">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
 export default SelectGroupHeading;

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

@@ -1,17 +1,16 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { GroupProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectGroup } from "../select.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.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
-	}: GroupProps = $props();
+	}: SelectGroupProps = $props();
 
 	const groupState = useSelectGroup({
 		id: box.with(() => id),
@@ -20,6 +19,7 @@
 			(v) => (ref = v)
 		),
 	});
+
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));
 </script>
 

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

@@ -1,19 +1,4 @@
-import type { GroupProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectGroup: $$__sveltets_2_IsomorphicComponent<GroupProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectGroup = InstanceType<typeof SelectGroup>;
+import type { SelectGroupProps } from "../types.js";
+declare const SelectGroup: import("svelte").Component<SelectGroupProps, {}, "ref">;
+type SelectGroup = ReturnType<typeof SelectGroup>;
 export default SelectGroup;

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/select/components/select-hidden-input.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    value?: string;
+};
+declare const SelectHiddenInput: import("svelte").Component<Props, {}, "value">;
+type SelectHiddenInput = ReturnType<typeof SelectHiddenInput>;
+export default SelectHiddenInput;

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

@@ -1,39 +1,50 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ItemProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectItem } from "../select.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { SelectItemProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import Mounted from "../../utilities/mounted.svelte";
 
 	let {
 		id = useId(),
-		value,
-		textValue = "",
 		ref = $bindable(null),
+		value,
+		label = value,
+		disabled = false,
 		children,
 		child,
-		disabled = false,
+		onHighlight = noop,
+		onUnhighlight = noop,
 		...restProps
-	}: ItemProps = $props();
+	}: 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}
+
+<Mounted
+	onMountedChange={(m) => {
+		itemState.mounted = m;
+	}}
+/>

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

@@ -1,19 +1,4 @@
-import type { ItemProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectItem: $$__sveltets_2_IsomorphicComponent<ItemProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectItem = InstanceType<typeof SelectItem>;
+import type { SelectItemProps } from "../types.js";
+declare const SelectItem: import("svelte").Component<SelectItemProps, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
 export default SelectItem;

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

@@ -1,29 +1,39 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ScrollUpButtonProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	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/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { Mounted } from "../../utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: ScrollUpButtonProps = $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,19 +1,4 @@
-import type { ScrollUpButtonProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectScrollDownButton: $$__sveltets_2_IsomorphicComponent<ScrollUpButtonProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectScrollDownButton = InstanceType<typeof SelectScrollDownButton>;
+import type { SelectScrollDownButtonProps } from "../types.js";
+declare const SelectScrollDownButton: import("svelte").Component<SelectScrollDownButtonProps, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
 export default SelectScrollDownButton;

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

@@ -1,29 +1,39 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ScrollUpButtonProps } from "../index.js";
+	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/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { Mounted } from "../../utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: ScrollUpButtonProps = $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}

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

@@ -1,19 +1,4 @@
-import type { ScrollUpButtonProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectScrollUpButton: $$__sveltets_2_IsomorphicComponent<ScrollUpButtonProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectScrollUpButton = InstanceType<typeof SelectScrollUpButton>;
+import type { SelectScrollUpButtonProps } from "../types.js";
+declare const SelectScrollUpButton: import("svelte").Component<SelectScrollUpButtonProps, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
 export default SelectScrollUpButton;

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

@@ -1,30 +1,28 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { TriggerProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectTrigger } from "../select.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { SelectTriggerProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
 	let {
 		id = useId(),
-		disabled = false,
 		ref = $bindable(null),
-		children,
 		child,
+		children,
+		type = "button",
 		...restProps
-	}: TriggerProps = $props();
+	}: SelectTriggerProps = $props();
 
 	const triggerState = useSelectTrigger({
 		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 <FloatingLayer.Anchor {id}>

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

@@ -1,19 +1,4 @@
-import type { TriggerProps } from "../index.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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SelectTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type SelectTrigger = InstanceType<typeof SelectTrigger>;
+import type { SelectTriggerProps } from "../types.js";
+declare const SelectTrigger: import("svelte").Component<SelectTriggerProps, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
 export default SelectTrigger;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ViewportProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SelectViewportProps } from "../types.js";
 	import { useSelectViewport } from "../select.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -11,7 +10,7 @@
 		children,
 		child,
 		...restProps
-	}: ViewportProps = $props();
+	}: SelectViewportProps = $props();
 
 	const viewportState = useSelectViewport({
 		id: box.with(() => id),
@@ -39,6 +38,16 @@
 		-ms-overflow-style: none !important;
 		-webkit-overflow-scrolling: touch !important;
 	}
+
+	:global([data-combobox-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
 	:global([data-select-viewport])::-webkit-scrollbar {
 		display: none !important;
 	}