bits-ui 1.6.1 → 1.8.0

package/dist/bits/context-menu/exports.d.ts

@@ -15,4 +15,5 @@ export { default as SubContentStatic } from "../menu/components/menu-sub-content
 export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { ContextMenuArrowProps as ArrowProps, ContextMenuCheckboxItemProps as CheckboxItemProps, ContextMenuGroupProps as GroupProps, ContextMenuItemProps as ItemProps, ContextMenuGroupHeadingProps as GroupHeadingProps, ContextMenuRootProps as RootProps, ContextMenuRadioGroupProps as RadioGroupProps, ContextMenuRadioItemProps as RadioItemProps, ContextMenuSeparatorProps as SeparatorProps, ContextMenuSubContentProps as SubContentProps, ContextMenuSubContentStaticProps as SubContentStaticProps, ContextMenuSubProps as SubProps, ContextMenuSubTriggerProps as SubTriggerProps, ContextMenuContentProps as ContentProps, ContextMenuContentStaticProps as ContentStaticProps, ContextMenuTriggerProps as TriggerProps, ContextMenuPortalProps as PortalProps, } from "./types.js";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";
+export type { ContextMenuArrowProps as ArrowProps, ContextMenuCheckboxItemProps as CheckboxItemProps, ContextMenuGroupProps as GroupProps, ContextMenuItemProps as ItemProps, ContextMenuGroupHeadingProps as GroupHeadingProps, ContextMenuRootProps as RootProps, ContextMenuRadioGroupProps as RadioGroupProps, ContextMenuRadioItemProps as RadioItemProps, ContextMenuSeparatorProps as SeparatorProps, ContextMenuSubContentProps as SubContentProps, ContextMenuSubContentStaticProps as SubContentStaticProps, ContextMenuSubProps as SubProps, ContextMenuSubTriggerProps as SubTriggerProps, ContextMenuContentProps as ContentProps, ContextMenuContentStaticProps as ContentStaticProps, ContextMenuTriggerProps as TriggerProps, ContextMenuPortalProps as PortalProps, ContextMenuCheckboxGroupProps as CheckboxGroupProps, } from "./types.js";

package/dist/bits/context-menu/exports.js

@@ -15,3 +15,4 @@ export { default as SubContentStatic } from "../menu/components/menu-sub-content
 export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";

package/dist/bits/context-menu/types.d.ts

@@ -11,5 +11,5 @@ export type ContextMenuTriggerPropsWithoutHTML = WithChild<{
     disabled?: boolean;
 }>;
 export type ContextMenuTriggerProps = ContextMenuTriggerPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ContextMenuTriggerPropsWithoutHTML>;
-export type { MenuArrowProps as ContextMenuArrowProps, MenuContentStaticProps as ContextMenuContentStaticProps, MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuGroupProps as ContextMenuGroupProps, MenuItemProps as ContextMenuItemProps, MenuGroupHeadingProps as ContextMenuGroupHeadingProps, MenuRootProps as ContextMenuRootProps, MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioItemProps as ContextMenuRadioItemProps, MenuSeparatorProps as ContextMenuSeparatorProps, MenuSubContentProps as ContextMenuSubContentProps, MenuSubContentStaticProps as ContextMenuSubContentStaticProps, MenuSubProps as ContextMenuSubProps, MenuSubTriggerProps as ContextMenuSubTriggerProps, MenuPortalProps as ContextMenuPortalProps, } from "../menu/types.js";
-export type { MenuRootPropsWithoutHTML as ContextMenuRootPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as ContextMenuContentStaticPropsWithoutHTML, MenuArrowPropsWithoutHTML as ContextMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as ContextMenuCheckboxItemPropsWithoutHTML, MenuGroupPropsWithoutHTML as ContextMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as ContextMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as ContextMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as ContextMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as ContextMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as ContextMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as ContextMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as ContextMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as ContextMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as ContextMenuSubContentStaticPropsWithoutHTML, MenuPortalPropsWithoutHTML as ContextMenuPortalPropsWithoutHTML, } from "../menu/types.js";
+export type { MenuArrowProps as ContextMenuArrowProps, MenuContentStaticProps as ContextMenuContentStaticProps, MenuCheckboxItemProps as ContextMenuCheckboxItemProps, MenuGroupProps as ContextMenuGroupProps, MenuItemProps as ContextMenuItemProps, MenuGroupHeadingProps as ContextMenuGroupHeadingProps, MenuRootProps as ContextMenuRootProps, MenuRadioGroupProps as ContextMenuRadioGroupProps, MenuRadioItemProps as ContextMenuRadioItemProps, MenuSeparatorProps as ContextMenuSeparatorProps, MenuSubContentProps as ContextMenuSubContentProps, MenuSubContentStaticProps as ContextMenuSubContentStaticProps, MenuSubProps as ContextMenuSubProps, MenuSubTriggerProps as ContextMenuSubTriggerProps, MenuPortalProps as ContextMenuPortalProps, MenuCheckboxGroupProps as ContextMenuCheckboxGroupProps, } from "../menu/types.js";
+export type { MenuRootPropsWithoutHTML as ContextMenuRootPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as ContextMenuContentStaticPropsWithoutHTML, MenuArrowPropsWithoutHTML as ContextMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as ContextMenuCheckboxItemPropsWithoutHTML, MenuGroupPropsWithoutHTML as ContextMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as ContextMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as ContextMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as ContextMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as ContextMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as ContextMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as ContextMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as ContextMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as ContextMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as ContextMenuSubContentStaticPropsWithoutHTML, MenuPortalPropsWithoutHTML as ContextMenuPortalPropsWithoutHTML, MenuCheckboxGroupPropsWithoutHTML as ContextMenuCheckboxGroupPropsWithoutHTML, } from "../menu/types.js";

package/dist/bits/dropdown-menu/exports.d.ts

@@ -15,4 +15,5 @@ export { default as SubContentStatic } from "../menu/components/menu-sub-content
 export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { DropdownMenuArrowProps as ArrowProps, DropdownMenuCheckboxItemProps as CheckboxItemProps, DropdownMenuContentProps as ContentProps, DropdownMenuContentStaticProps as ContentStaticProps, DropdownMenuGroupProps as GroupProps, DropdownMenuItemProps as ItemProps, DropdownMenuGroupHeadingProps as GroupHeadingProps, DropdownMenuRootProps as RootProps, DropdownMenuRadioGroupProps as RadioGroupProps, DropdownMenuRadioItemProps as RadioItemProps, DropdownMenuSeparatorProps as SeparatorProps, DropdownMenuSubContentProps as SubContentProps, DropdownMenuSubContentStaticProps as SubContentStaticProps, DropdownMenuSubProps as SubProps, DropdownMenuSubTriggerProps as SubTriggerProps, DropdownMenuTriggerProps as TriggerProps, DropdownMenuPortalProps as PortalProps, } from "./types.js";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";
+export type { DropdownMenuArrowProps as ArrowProps, DropdownMenuCheckboxItemProps as CheckboxItemProps, DropdownMenuContentProps as ContentProps, DropdownMenuContentStaticProps as ContentStaticProps, DropdownMenuGroupProps as GroupProps, DropdownMenuItemProps as ItemProps, DropdownMenuGroupHeadingProps as GroupHeadingProps, DropdownMenuRootProps as RootProps, DropdownMenuRadioGroupProps as RadioGroupProps, DropdownMenuRadioItemProps as RadioItemProps, DropdownMenuSeparatorProps as SeparatorProps, DropdownMenuSubContentProps as SubContentProps, DropdownMenuSubContentStaticProps as SubContentStaticProps, DropdownMenuSubProps as SubProps, DropdownMenuSubTriggerProps as SubTriggerProps, DropdownMenuTriggerProps as TriggerProps, DropdownMenuPortalProps as PortalProps, DropdownMenuCheckboxGroupProps as CheckboxGroupProps, } from "./types.js";

package/dist/bits/dropdown-menu/exports.js

@@ -15,3 +15,4 @@ export { default as SubContentStatic } from "../menu/components/menu-sub-content
 export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";

package/dist/bits/dropdown-menu/types.d.ts

@@ -1,2 +1,2 @@
-export type { MenuArrowProps as DropdownMenuArrowProps, MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, MenuContentProps as DropdownMenuContentProps, MenuContentStaticProps as DropdownMenuContentStaticProps, MenuGroupProps as DropdownMenuGroupProps, MenuItemProps as DropdownMenuItemProps, MenuGroupHeadingProps as DropdownMenuGroupHeadingProps, MenuRootProps as DropdownMenuRootProps, MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparatorProps as DropdownMenuSeparatorProps, MenuSubContentProps as DropdownMenuSubContentProps, MenuSubContentStaticProps as DropdownMenuSubContentStaticProps, MenuSubProps as DropdownMenuSubProps, MenuSubTriggerProps as DropdownMenuSubTriggerProps, MenuTriggerProps as DropdownMenuTriggerProps, MenuPortalProps as DropdownMenuPortalProps, } from "../menu/types.js";
-export type { MenuRootPropsWithoutHTML as DropdownMenuRootPropsWithoutHTML, MenuArrowPropsWithoutHTML as DropdownMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as DropdownMenuCheckboxItemPropsWithoutHTML, MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as DropdownMenuContentStaticPropsWithoutHTML, MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as DropdownMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as DropdownMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as DropdownMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as DropdownMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as DropdownMenuSubContentStaticPropsWithoutHTML, MenuTriggerPropsWithoutHTML as DropdownMenuTriggerPropsWithoutHTML, MenuPortalPropsWithoutHTML as DropdownMenuPortalPropsWithoutHTML, } from "../menu/types.js";
+export type { MenuArrowProps as DropdownMenuArrowProps, MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, MenuContentProps as DropdownMenuContentProps, MenuContentStaticProps as DropdownMenuContentStaticProps, MenuGroupProps as DropdownMenuGroupProps, MenuItemProps as DropdownMenuItemProps, MenuGroupHeadingProps as DropdownMenuGroupHeadingProps, MenuRootProps as DropdownMenuRootProps, MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparatorProps as DropdownMenuSeparatorProps, MenuSubContentProps as DropdownMenuSubContentProps, MenuSubContentStaticProps as DropdownMenuSubContentStaticProps, MenuSubProps as DropdownMenuSubProps, MenuSubTriggerProps as DropdownMenuSubTriggerProps, MenuTriggerProps as DropdownMenuTriggerProps, MenuPortalProps as DropdownMenuPortalProps, MenuCheckboxGroupProps as DropdownMenuCheckboxGroupProps, } from "../menu/types.js";
+export type { MenuRootPropsWithoutHTML as DropdownMenuRootPropsWithoutHTML, MenuArrowPropsWithoutHTML as DropdownMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as DropdownMenuCheckboxItemPropsWithoutHTML, MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as DropdownMenuContentStaticPropsWithoutHTML, MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as DropdownMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as DropdownMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as DropdownMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as DropdownMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as DropdownMenuSubContentStaticPropsWithoutHTML, MenuTriggerPropsWithoutHTML as DropdownMenuTriggerPropsWithoutHTML, MenuPortalPropsWithoutHTML as DropdownMenuPortalPropsWithoutHTML, MenuCheckboxGroupPropsWithoutHTML as DropdownMenuCheckboxGroupPropsWithoutHTML, } from "../menu/types.js";

package/dist/bits/menu/components/menu-checkbox-group.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { MenuCheckboxGroupProps } from "../types.js";
+	import { useMenuCheckboxGroup } from "../menu.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { useId } from "../../../internal/use-id.js";
+
+	let {
+		id = useId(),
+		children,
+		child,
+		ref = $bindable(null),
+		value = $bindable([]),
+		onValueChange = noop,
+		...restProps
+	}: MenuCheckboxGroupProps = $props();
+
+	const checkboxGroupState = useMenuCheckboxGroup({
+		value: box.with(
+			() => $state.snapshot(value),
+			(v) => {
+				value = $state.snapshot(v);
+				onValueChange(v);
+			}
+		),
+		onValueChange: box.with(() => onValueChange),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		id: box.with(() => id),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, checkboxGroupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/menu/components/menu-checkbox-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenuCheckboxGroupProps } from "../types.js";
+declare const MenuCheckboxGroup: import("svelte").Component<MenuCheckboxGroupProps, {}, "value" | "ref">;
+type MenuCheckboxGroup = ReturnType<typeof MenuCheckboxGroup>;
+export default MenuCheckboxGroup;

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxItemProps } from "../types.js";
-	import { useMenuCheckboxItem } from "../menu.svelte.js";
+	import { MenuCheckboxGroupContext, useMenuCheckboxItem } from "../menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
 
 	let {
 		child,
@@ -17,33 +18,61 @@
 		closeOnSelect = true,
 		indeterminate = $bindable(false),
 		onIndeterminateChange = noop,
+		value = "",
 		...restProps
 	}: MenuCheckboxItemProps = $props();
 
-	const checkboxItemState = useMenuCheckboxItem({
-		checked: box.with(
-			() => checked,
-			(v) => {
-				checked = v;
-				onCheckedChange(v);
-			}
-		),
-		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => handleSelect),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-		closeOnSelect: box.with(() => closeOnSelect),
-		indeterminate: box.with(
-			() => indeterminate,
-			(v) => {
-				indeterminate = v;
-				onIndeterminateChange(v);
+	const group = MenuCheckboxGroupContext.getOr(null);
+
+	if (group && value) {
+		if (group.opts.value.current.includes(value)) {
+			checked = true;
+		} else {
+			checked = false;
+		}
+	}
+
+	watch.pre(
+		() => value,
+		() => {
+			if (group && value) {
+				if (group.opts.value.current.includes(value)) {
+					checked = true;
+				} else {
+					checked = false;
+				}
 			}
-		),
-	});
+		}
+	);
+
+	const checkboxItemState = useMenuCheckboxItem(
+		{
+			checked: box.with(
+				() => checked,
+				(v) => {
+					checked = v;
+					onCheckedChange(v);
+				}
+			),
+			id: box.with(() => id),
+			disabled: box.with(() => disabled),
+			onSelect: box.with(() => handleSelect),
+			ref: box.with(
+				() => ref,
+				(v) => (ref = v)
+			),
+			closeOnSelect: box.with(() => closeOnSelect),
+			indeterminate: box.with(
+				() => indeterminate,
+				(v) => {
+					indeterminate = v;
+					onIndeterminateChange(v);
+				}
+			),
+			value: box.with(() => value),
+		},
+		group
+	);
 
 	function handleSelect(e: Event) {
 		onSelect(e);

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

@@ -1,5 +1,6 @@
 export { default as Root } from "./components/menu.svelte";
 export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxGroup } from "./components/menu-checkbox-group.svelte";
 export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
 export { default as Content } from "./components/menu-content.svelte";
 export { default as ContentStatic } from "./components/menu-content-static.svelte";
@@ -15,4 +16,4 @@ export { default as SubContent } from "./components/menu-sub-content.svelte";
 export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
 export { default as Trigger } from "./components/menu-trigger.svelte";
 export { default as SubContentStatic } from "./components/menu-sub-content-static.svelte";
-export type { MenuRootPropsWithoutHTML as RootProps, MenuContentProps as ContentProps, MenuContentStaticProps as ContentStaticProps, MenuItemProps as ItemProps, MenuTriggerProps as TriggerProps, MenuSubPropsWithoutHTML as SubProps, MenuSubContentProps as SubContentProps, MenuSubContentStaticProps as SubContentStaticProps, MenuSeparatorProps as SeparatorProps, MenuArrowProps as ArrowProps, MenuCheckboxItemProps as CheckboxItemProps, MenuGroupHeadingProps as GroupHeadingProps, MenuGroupProps as GroupProps, MenuRadioGroupProps as RadioGroupProps, MenuRadioItemProps as RadioItemProps, MenuSubTriggerProps as SubTriggerProps, MenuPortalProps as PortalProps, } from "./types.js";
+export type { MenuRootPropsWithoutHTML as RootProps, MenuContentProps as ContentProps, MenuContentStaticProps as ContentStaticProps, MenuItemProps as ItemProps, MenuTriggerProps as TriggerProps, MenuSubPropsWithoutHTML as SubProps, MenuSubContentProps as SubContentProps, MenuSubContentStaticProps as SubContentStaticProps, MenuSeparatorProps as SeparatorProps, MenuArrowProps as ArrowProps, MenuCheckboxGroupProps as CheckboxGroupProps, MenuCheckboxItemProps as CheckboxItemProps, MenuGroupHeadingProps as GroupHeadingProps, MenuGroupProps as GroupProps, MenuRadioGroupProps as RadioGroupProps, MenuRadioItemProps as RadioItemProps, MenuSubTriggerProps as SubTriggerProps, MenuPortalProps as PortalProps, } from "./types.js";

package/dist/bits/menu/exports.js

@@ -1,5 +1,6 @@
 export { default as Root } from "./components/menu.svelte";
 export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxGroup } from "./components/menu-checkbox-group.svelte";
 export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
 export { default as Content } from "./components/menu-content.svelte";
 export { default as ContentStatic } from "./components/menu-content-static.svelte";

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

@@ -1,3 +1,4 @@
+import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
@@ -5,6 +6,7 @@ import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import type { Direction } from "../../shared/index.js";
 import { IsUsingKeyboard } from "../../index.js";
 export declare const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
+export declare const MenuCheckboxGroupContext: Context<MenuCheckboxGroupState>;
 type MenuVariant = "context-menu" | "dropdown-menu" | "menubar";
 export type MenuRootStateProps = ReadableBoxedValues<{
     dir: Direction;
@@ -184,11 +186,14 @@ declare class MenuSubTriggerState {
 type MenuCheckboxItemStateProps = WritableBoxedValues<{
     checked: boolean;
     indeterminate: boolean;
+}> & ReadableBoxedValues<{
+    value: string;
 }>;
 declare class MenuCheckboxItemState {
     readonly opts: MenuCheckboxItemStateProps;
     readonly item: MenuItemState;
-    constructor(opts: MenuCheckboxItemStateProps, item: MenuItemState);
+    readonly group: MenuCheckboxGroupState | null;
+    constructor(opts: MenuCheckboxItemStateProps, item: MenuItemState, group?: MenuCheckboxGroupState | null);
     toggleChecked(): void;
     snippetProps: {
         checked: boolean;
@@ -231,8 +236,8 @@ declare class MenuGroupState {
 type MenuGroupHeadingStateProps = WithRefProps;
 declare class MenuGroupHeadingState {
     readonly opts: MenuGroupHeadingStateProps;
-    readonly group: MenuGroupState | MenuRadioGroupState;
-    constructor(opts: MenuGroupHeadingStateProps, group: MenuGroupState | MenuRadioGroupState);
+    readonly group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState;
+    constructor(opts: MenuGroupHeadingStateProps, group: MenuGroupState | MenuRadioGroupState | MenuCheckboxGroupState);
     props: {
         readonly [x: string]: string;
         readonly id: string;
@@ -360,6 +365,26 @@ declare class ContextMenuTriggerState {
         readonly oncontextmenu: (e: BitsMouseEvent) => void;
     };
 }
+type MenuCheckboxGroupStateProps = WithRefProps & ReadableBoxedValues<{
+    onValueChange: (value: string[]) => void;
+}> & WritableBoxedValues<{
+    value: string[];
+}>;
+declare class MenuCheckboxGroupState {
+    readonly opts: MenuCheckboxGroupStateProps;
+    readonly content: MenuContentState;
+    groupHeadingId: string | null;
+    root: MenuRootState;
+    constructor(opts: MenuCheckboxGroupStateProps, content: MenuContentState);
+    addValue(checkboxValue: string | undefined): void;
+    removeValue(checkboxValue: string | undefined): void;
+    props: {
+        readonly [x: string]: string | null;
+        readonly id: string;
+        readonly role: "group";
+        readonly "aria-labelledby": string | null;
+    };
+}
 type MenuItemCombinedProps = MenuItemSharedStateProps & MenuItemStateProps;
 export declare function useMenuRoot(props: MenuRootStateProps): MenuRootState;
 export declare function useMenuMenu(root: MenuRootState, props: MenuMenuStateProps): MenuMenuState;
@@ -369,11 +394,12 @@ export declare function useMenuDropdownTrigger(props: DropdownMenuTriggerStatePr
 export declare function useMenuContextTrigger(props: ContextMenuTriggerStateProps): ContextMenuTriggerState;
 export declare function useMenuContent(props: MenuContentStateProps): MenuContentState;
 export declare function useMenuItem(props: MenuItemCombinedProps): MenuItemState;
-export declare function useMenuCheckboxItem(props: MenuItemCombinedProps & MenuCheckboxItemStateProps): MenuCheckboxItemState;
+export declare function useMenuCheckboxItem(props: MenuItemCombinedProps & MenuCheckboxItemStateProps, checkboxGroup: MenuCheckboxGroupState | null): MenuCheckboxItemState;
 export declare function useMenuRadioGroup(props: MenuRadioGroupStateProps): MenuGroupState | MenuRadioGroupState;
 export declare function useMenuRadioItem(props: MenuRadioItemStateProps & MenuItemCombinedProps): MenuRadioItemState;
 export declare function useMenuGroup(props: MenuGroupStateProps): MenuGroupState | MenuRadioGroupState;
 export declare function useMenuGroupHeading(props: MenuGroupHeadingStateProps): MenuGroupHeadingState;
 export declare function useMenuSeparator(props: MenuSeparatorStateProps): MenuSeparatorState;
 export declare function useMenuArrow(): MenuArrowState;
+export declare function useMenuCheckboxGroup(props: MenuCheckboxGroupStateProps): MenuCheckboxGroupState;
 export {};

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

@@ -19,6 +19,7 @@ const MenuMenuContext = new Context("Menu.Root | Menu.Sub");
 const MenuContentContext = new Context("Menu.Content");
 const MenuGroupContext = new Context("Menu.Group | Menu.RadioGroup");
 const MenuRadioGroupContext = new Context("Menu.RadioGroup");
+export const MenuCheckboxGroupContext = new Context("Menu.CheckboxGroup");
 export const MenuOpenEvent = new CustomEventDispatcher("bitsmenuopen", {
     bubbles: false,
     cancelable: true,
@@ -534,9 +535,26 @@ class MenuSubTriggerState {
 class MenuCheckboxItemState {
     opts;
     item;
-    constructor(opts, item) {
+    group;
+    constructor(opts, item, group = null) {
         this.opts = opts;
         this.item = item;
+        this.group = group;
+        // Watch for value changes in the group if we're part of one
+        if (this.group) {
+            watch(() => this.group.opts.value.current, (groupValues) => {
+                this.opts.checked.current = groupValues.includes(this.opts.value.current);
+            });
+            // Watch for checked state changes and sync with group
+            watch(() => this.opts.checked.current, (checked) => {
+                if (checked) {
+                    this.group.addValue(this.opts.value.current);
+                }
+                else {
+                    this.group.removeValue(this.opts.value.current);
+                }
+            });
+        }
     }
     toggleChecked() {
         if (this.opts.indeterminate.current) {
@@ -818,6 +836,43 @@ class ContextMenuTriggerState {
         oncontextmenu: this.oncontextmenu,
     }));
 }
+class MenuCheckboxGroupState {
+    opts;
+    content;
+    groupHeadingId = $state(null);
+    root;
+    constructor(opts, content) {
+        this.opts = opts;
+        this.content = content;
+        this.root = content.parentMenu.root;
+        useRefById(opts);
+    }
+    addValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        if (!this.opts.value.current.includes(checkboxValue)) {
+            const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
+            this.opts.value.current = newValue;
+            this.opts.onValueChange.current(newValue);
+        }
+    }
+    removeValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        const index = this.opts.value.current.indexOf(checkboxValue);
+        if (index === -1)
+            return;
+        const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
+        this.opts.value.current = newValue;
+        this.opts.onValueChange.current(newValue);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [this.root.getAttr("checkbox-group")]: "",
+        role: "group",
+        "aria-labelledby": this.groupHeadingId,
+    }));
+}
 export function useMenuRoot(props) {
     const root = new MenuRootState(props);
     FocusScopeContext.set({
@@ -853,9 +908,9 @@ export function useMenuItem(props) {
     const item = new MenuItemSharedState(props, MenuContentContext.get());
     return new MenuItemState(props, item);
 }
-export function useMenuCheckboxItem(props) {
+export function useMenuCheckboxItem(props, checkboxGroup) {
     const item = new MenuItemState(props, new MenuItemSharedState(props, MenuContentContext.get()));
-    return new MenuCheckboxItemState(props, item);
+    return new MenuCheckboxItemState(props, item, checkboxGroup);
 }
 export function useMenuRadioGroup(props) {
     return MenuGroupContext.set(MenuRadioGroupContext.set(new MenuRadioGroupState(props, MenuContentContext.get())));
@@ -870,6 +925,13 @@ export function useMenuGroup(props) {
     return MenuGroupContext.set(new MenuGroupState(props, MenuRootContext.get()));
 }
 export function useMenuGroupHeading(props) {
+    // Try to get checkbox group first, then radio group, then regular group
+    const checkboxGroup = MenuCheckboxGroupContext.getOr(null);
+    if (checkboxGroup)
+        return new MenuGroupHeadingState(props, checkboxGroup);
+    const radioGroup = MenuRadioGroupContext.getOr(null);
+    if (radioGroup)
+        return new MenuGroupHeadingState(props, radioGroup);
     return new MenuGroupHeadingState(props, MenuGroupContext.get());
 }
 export function useMenuSeparator(props) {
@@ -878,3 +940,6 @@ export function useMenuSeparator(props) {
 export function useMenuArrow() {
     return new MenuArrowState(MenuRootContext.get());
 }
+export function useMenuCheckboxGroup(props) {
+    return MenuCheckboxGroupContext.set(new MenuCheckboxGroupState(props, MenuContentContext.get()));
+}

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

@@ -98,8 +98,25 @@ export type MenuCheckboxItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuChec
      * @defaultValue true
      */
     closeOnSelect?: boolean;
+    /**
+     * The value of the checkbox item when used in a checkbox group.
+     */
+    value?: string;
 };
 export type MenuCheckboxItemProps = MenuCheckboxItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuCheckboxItemPropsWithoutHTML>;
+export type MenuCheckboxGroupPropsWithoutHTML = WithChild<{
+    /**
+     * The values of the selected checkbox items.
+     *
+     * Supports two-way binding with `bind:value`.
+     */
+    value?: string[];
+    /**
+     * A callback that is fired when the selected checkbox items change.
+     */
+    onValueChange?: OnChangeFn<string[]>;
+}>;
+export type MenuCheckboxGroupProps = MenuCheckboxGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuCheckboxGroupPropsWithoutHTML>;
 export type MenuTriggerPropsWithoutHTML = WithChild<{
     /**
      * Whether the trigger is disabled.

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

@@ -16,5 +16,6 @@ export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelt
 export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";
 export type { MenubarRootProps as RootProps, MenubarMenuProps as MenuProps, MenubarTriggerProps as TriggerProps, MenubarContentProps as ContentProps, MenubarContentStaticProps as ContentStaticProps, MenubarPortalProps as PortalProps, } from "./types.js";
-export type { MenuSubPropsWithoutHTML as SubProps, MenuItemProps as ItemProps, MenuGroupProps as GroupProps, MenuGroupHeadingProps as GroupHeadingProps, MenuArrowProps as ArrowProps, MenuRadioItemProps as RadioItemProps, MenuSeparatorProps as SeparatorProps, MenuSubContentProps as SubContentProps, MenuSubTriggerProps as SubTriggerProps, MenuRadioGroupProps as RadioGroupProps, MenuCheckboxItemProps as CheckboxItemProps, MenuSubContentStaticProps as SubContentStaticProps, } from "../menu/types.js";
+export type { MenuSubPropsWithoutHTML as SubProps, MenuItemProps as ItemProps, MenuGroupProps as GroupProps, MenuGroupHeadingProps as GroupHeadingProps, MenuArrowProps as ArrowProps, MenuRadioItemProps as RadioItemProps, MenuSeparatorProps as SeparatorProps, MenuSubContentProps as SubContentProps, MenuSubTriggerProps as SubTriggerProps, MenuRadioGroupProps as RadioGroupProps, MenuCheckboxItemProps as CheckboxItemProps, MenuSubContentStaticProps as SubContentStaticProps, MenuCheckboxGroupProps as CheckboxGroupProps, } from "../menu/types.js";

package/dist/bits/menubar/exports.js

@@ -16,3 +16,4 @@ export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelt
 export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
 export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";

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

@@ -44,6 +44,6 @@ export type MenubarTriggerPropsWithoutHTML = WithChild<{
     disabled?: boolean | null | undefined;
 }>;
 export type MenubarTriggerProps = MenubarTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, MenubarTriggerPropsWithoutHTML>;
-export type { MenuContentPropsWithoutHTML as MenubarContentPropsWithoutHTML, MenuContentProps as MenubarContentProps, MenuContentStaticPropsWithoutHTML as MenubarContentStaticPropsWithoutHTML, MenuContentStaticProps as MenubarContentStaticProps, MenuItemPropsWithoutHTML as MenubarItemPropsWithoutHTML, MenuItemProps as MenubarItemProps, MenuGroupPropsWithoutHTML as MenubarGroupPropsWithoutHTML, MenuGroupProps as MenubarGroupProps, MenuGroupHeadingPropsWithoutHTML as MenubarGroupHeadingPropsWithoutHTML, MenuGroupHeadingProps as MenubarGroupHeadingProps, MenuCheckboxItemPropsWithoutHTML as MenubarCheckboxItemPropsWithoutHTML, MenuCheckboxItemProps as MenubarCheckboxItemProps, MenuRadioGroupPropsWithoutHTML as MenubarRadioGroupPropsWithoutHTML, MenuRadioGroupProps as MenubarRadioGroupProps, MenuRadioItemPropsWithoutHTML as MenubarRadioItemPropsWithoutHTML, MenuRadioItemProps as MenubarRadioItemProps, MenuSeparatorPropsWithoutHTML as MenubarSeparatorPropsWithoutHTML, MenuSeparatorProps as MenubarSeparatorProps, MenuSubContentPropsWithoutHTML as MenubarSubContentPropsWithoutHTML, MenuSubContentProps as MenubarSubContentProps, MenuSubContentStaticPropsWithoutHTML as MenubarSubContentStaticPropsWithoutHTML, MenuSubContentStaticProps as MenubarSubContentStaticProps, MenuSubTriggerPropsWithoutHTML as MenubarSubTriggerPropsWithoutHTML, MenuSubTriggerProps as MenubarSubTriggerProps, MenuSubPropsWithoutHTML as MenubarSubPropsWithoutHTML, MenuPortalPropsWithoutHTML as MenubarPortalPropsWithoutHTML, MenuPortalProps as MenubarPortalProps, } from "../menu/types.js";
+export type { MenuContentPropsWithoutHTML as MenubarContentPropsWithoutHTML, MenuContentProps as MenubarContentProps, MenuContentStaticPropsWithoutHTML as MenubarContentStaticPropsWithoutHTML, MenuContentStaticProps as MenubarContentStaticProps, MenuItemPropsWithoutHTML as MenubarItemPropsWithoutHTML, MenuItemProps as MenubarItemProps, MenuGroupPropsWithoutHTML as MenubarGroupPropsWithoutHTML, MenuGroupProps as MenubarGroupProps, MenuGroupHeadingPropsWithoutHTML as MenubarGroupHeadingPropsWithoutHTML, MenuGroupHeadingProps as MenubarGroupHeadingProps, MenuCheckboxItemPropsWithoutHTML as MenubarCheckboxItemPropsWithoutHTML, MenuCheckboxItemProps as MenubarCheckboxItemProps, MenuRadioGroupPropsWithoutHTML as MenubarRadioGroupPropsWithoutHTML, MenuRadioGroupProps as MenubarRadioGroupProps, MenuRadioItemPropsWithoutHTML as MenubarRadioItemPropsWithoutHTML, MenuRadioItemProps as MenubarRadioItemProps, MenuSeparatorPropsWithoutHTML as MenubarSeparatorPropsWithoutHTML, MenuSeparatorProps as MenubarSeparatorProps, MenuSubContentPropsWithoutHTML as MenubarSubContentPropsWithoutHTML, MenuSubContentProps as MenubarSubContentProps, MenuSubContentStaticPropsWithoutHTML as MenubarSubContentStaticPropsWithoutHTML, MenuSubContentStaticProps as MenubarSubContentStaticProps, MenuSubTriggerPropsWithoutHTML as MenubarSubTriggerPropsWithoutHTML, MenuSubTriggerProps as MenubarSubTriggerProps, MenuSubPropsWithoutHTML as MenubarSubPropsWithoutHTML, MenuPortalPropsWithoutHTML as MenubarPortalPropsWithoutHTML, MenuPortalProps as MenubarPortalProps, MenuCheckboxGroupPropsWithoutHTML as MenubarCheckboxGroupPropsWithoutHTML, MenuCheckboxGroupProps as MenubarCheckboxGroupProps, } from "../menu/types.js";
 export type MenubarArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type MenubarArrowProps = MenuArrowProps;

package/dist/bits/navigation-menu/components/navigation-menu-item.svelte

@@ -10,6 +10,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		openOnHover = true,
 		...restProps
 	}: NavigationMenuItemProps = $props();
 
@@ -20,6 +21,7 @@
 			(v) => (ref = v)
 		),
 		value: box.with(() => value),
+		openOnHover: box.with(() => openOnHover),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/navigation-menu/components/navigation-menu-viewport.svelte

@@ -4,6 +4,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
+	import { Mounted } from "../../utilities/index.js";
 
 	let {
 		id = useId(),
@@ -34,5 +35,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:mounted={viewportState.mounted} />
 	{/snippet}
 </PresenceLayer>

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -9,6 +9,7 @@ import { SvelteMap } from "svelte/reactivity";
 import { type Direction, type Orientation } from "../../shared/index.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     dir: Direction;
     orientation: Orientation;
@@ -18,11 +19,11 @@ type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     previousValue: string;
 }> & {
     isRootMenu: boolean;
-    onTriggerEnter: (itemValue: string) => void;
+    onTriggerEnter: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onTriggerLeave?: () => void;
     onContentEnter?: () => void;
     onContentLeave?: () => void;
-    onItemSelect: (itemValue: string) => void;
+    onItemSelect: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
     onItemDismiss: () => void;
 };
 declare class NavigationMenuProviderState {
@@ -36,7 +37,10 @@ declare class NavigationMenuProviderState {
     onContentLeave: () => void;
     onItemSelect: NavigationMenuProviderStateProps["onItemSelect"];
     onItemDismiss: NavigationMenuProviderStateProps["onItemDismiss"];
+    activeItem: NavigationMenuItemState | null;
+    prevActiveItem: NavigationMenuItemState | null;
     constructor(opts: NavigationMenuProviderStateProps);
+    setActiveItem: (item: NavigationMenuItemState | null) => void;
 }
 type NavigationMenuRootStateProps = WithRefProps<WritableBoxedValues<{
     value: string;
@@ -53,7 +57,7 @@ declare class NavigationMenuRootState {
     previousValue: WritableBox<string>;
     isDelaySkipped: WritableBox<boolean>;
     constructor(opts: NavigationMenuRootStateProps);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -71,8 +75,9 @@ declare class NavigationMenuSubState {
     readonly opts: NavigationMenuSubStateProps;
     readonly context: NavigationMenuProviderState;
     previousValue: WritableBox<string>;
+    subProvider: NavigationMenuProviderState;
     constructor(opts: NavigationMenuSubStateProps, context: NavigationMenuProviderState);
-    setValue: (newValue: string) => void;
+    setValue: (newValue: string, itemState: NavigationMenuItemState | null) => void;
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -102,6 +107,7 @@ declare class NavigationMenuListState {
 }
 type NavigationMenuItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;
+    openOnHover: boolean;
 }>>;
 export declare class NavigationMenuItemState {
     #private;
@@ -147,13 +153,14 @@ declare class NavigationMenuTriggerState {
         provider: NavigationMenuProviderState;
         item: NavigationMenuItemState;
         list: NavigationMenuListState;
+        sub: NavigationMenuSubState | null;
     });
     onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-    onpointermove: BitsPointerEventHandler<HTMLElement>;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
-    onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-    onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
-    focusProxyOnFocus: (e: BitsFocusEvent) => void;
+    onpointermove: PointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
+    onclick: MouseEventHandler<HTMLButtonElement>;
+    onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+    focusProxyOnFocus: FocusEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly disabled: boolean | null | undefined;
@@ -163,16 +170,16 @@ declare class NavigationMenuTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
         readonly "data-navigation-menu-trigger": "";
-        readonly onpointermove: BitsPointerEventHandler<HTMLElement>;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
         readonly onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
-        readonly onclick: (_: BitsMouseEvent<HTMLButtonElement>) => void;
-        readonly onkeydown: (e: BitsKeyboardEvent<HTMLButtonElement>) => void;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
     focusProxyProps: {
         readonly id: string;
         readonly tabindex: 0;
-        readonly onfocus: (e: BitsFocusEvent) => void;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
     };
     restructureSpanProps: {
         readonly "aria-owns": string | undefined;
@@ -183,6 +190,7 @@ type NavigationMenuLinkStateProps = WithRefProps & ReadableBoxedValues<{
     onSelect: (e: Event) => void;
 }>;
 declare class NavigationMenuLinkState {
+    #private;
     readonly opts: NavigationMenuLinkStateProps;
     readonly context: {
         provider: NavigationMenuProviderState;
@@ -197,6 +205,8 @@ declare class NavigationMenuLinkState {
     onkeydown: (e: BitsKeyboardEvent) => void;
     onfocus: (_: BitsFocusEvent) => void;
     onblur: (_: BitsFocusEvent) => void;
+    onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+    onpointermove: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly "data-active": "" | undefined;
@@ -206,6 +216,8 @@ declare class NavigationMenuLinkState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
         readonly onblur: (_: BitsFocusEvent) => void;
+        readonly onpointerenter: PointerEventHandler<HTMLAnchorElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
         readonly "data-navigation-menu-link": "";
     };
 }
@@ -266,11 +278,11 @@ declare class NavigationMenuContentState {
         list: NavigationMenuListState;
     });
     onpointerenter: (_: BitsPointerEvent) => void;
-    onpointerleave: BitsPointerEventHandler<HTMLElement>;
+    onpointerleave: PointerEventHandler<HTMLElement>;
     props: {
         readonly id: string;
         readonly onpointerenter: (_: BitsPointerEvent) => void;
-        readonly onpointerleave: BitsPointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
     };
 }
 type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
@@ -309,6 +321,7 @@ declare class NavigationMenuViewportState {
     viewportWidth: string | undefined;
     viewportHeight: string | undefined;
     activeContentValue: string;
+    mounted: boolean;
     constructor(opts: NavigationMenuViewportImplStateProps, context: NavigationMenuProviderState);
     props: {
         readonly id: string;
@@ -338,5 +351,4 @@ export declare function useNavigationMenuLink(props: NavigationMenuLinkStateProp
 export declare function useNavigationMenuContentImpl(props: NavigationMenuContentImplStateProps, itemState?: NavigationMenuItemState): NavigationMenuContentImplState;
 export declare function useNavigationMenuViewport(props: NavigationMenuViewportImplStateProps): NavigationMenuViewportState;
 export declare function useNavigationMenuIndicator(): NavigationMenuIndicatorState;
-type BitsPointerEventHandler<T extends HTMLElement = HTMLElement> = (e: BitsPointerEvent<T>) => void;
 export {};

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

@@ -38,6 +38,8 @@ class NavigationMenuProviderState {
     onContentLeave = noop;
     onItemSelect;
     onItemDismiss;
+    activeItem = null;
+    prevActiveItem = null;
     constructor(opts) {
         this.opts = opts;
         this.onTriggerEnter = opts.onTriggerEnter;
@@ -47,6 +49,10 @@ class NavigationMenuProviderState {
         this.onItemDismiss = opts.onItemDismiss;
         this.onItemSelect = opts.onItemSelect;
     }
+    setActiveItem = (item) => {
+        this.prevActiveItem = this.activeItem;
+        this.activeItem = item;
+    };
 }
 class NavigationMenuRootState {
     opts;
@@ -74,8 +80,8 @@ class NavigationMenuRootState {
             orientation: this.opts.orientation,
             rootNavigationMenuRef: this.opts.ref,
             isRootMenu: true,
-            onTriggerEnter: (itemValue) => {
-                this.#onTriggerEnter(itemValue);
+            onTriggerEnter: (itemValue, itemState) => {
+                this.#onTriggerEnter(itemValue, itemState);
             },
             onTriggerLeave: this.#onTriggerLeave,
             onContentEnter: this.#onContentEnter,
@@ -84,34 +90,44 @@ class NavigationMenuRootState {
             onItemDismiss: this.#onItemDismiss,
         });
     }
-    #debouncedFn = useDebounce((val) => {
+    #debouncedFn = useDebounce((val, itemState) => {
         // passing `undefined` meant to reset the debounce timer
         if (typeof val === "string") {
-            this.setValue(val);
+            this.setValue(val, itemState);
         }
     }, () => this.#derivedDelay);
-    #onTriggerEnter = (itemValue) => {
-        this.#debouncedFn(itemValue);
+    #onTriggerEnter = (itemValue, itemState) => {
+        this.#debouncedFn(itemValue, itemState);
     };
     #onTriggerLeave = () => {
         this.isDelaySkipped.current = false;
-        this.#debouncedFn("");
+        this.#debouncedFn("", null);
     };
     #onContentEnter = () => {
-        this.#debouncedFn();
+        this.#debouncedFn(undefined, null);
     };
     #onContentLeave = () => {
-        this.#debouncedFn("");
+        if (this.provider.activeItem &&
+            this.provider.activeItem.opts.openOnHover.current === false) {
+            return;
+        }
+        this.#debouncedFn("", null);
     };
-    #onItemSelect = (itemValue) => {
-        this.setValue(itemValue);
+    #onItemSelect = (itemValue, itemState) => {
+        this.setValue(itemValue, itemState);
     };
     #onItemDismiss = () => {
-        this.setValue("");
+        this.setValue("", null);
     };
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
         this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.provider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -125,11 +141,12 @@ class NavigationMenuSubState {
     opts;
     context;
     previousValue = box("");
+    subProvider;
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
         useRefById(opts);
-        useNavigationMenuProvider({
+        this.subProvider = useNavigationMenuProvider({
             isRootMenu: false,
             value: this.opts.value,
             dir: this.context.opts.dir,
@@ -137,12 +154,19 @@ class NavigationMenuSubState {
             rootNavigationMenuRef: this.opts.ref,
             onTriggerEnter: this.setValue,
             onItemSelect: this.setValue,
-            onItemDismiss: () => this.setValue(""),
+            onItemDismiss: () => this.setValue("", null),
             previousValue: this.previousValue,
         });
     }
-    setValue = (newValue) => {
+    setValue = (newValue, itemState) => {
+        this.previousValue.current = this.opts.value.current;
         this.opts.value.current = newValue;
+        this.subProvider.setActiveItem(itemState);
+        // When all menus are closed, we want to reset previousValue to prevent
+        // weird transitions from old positions when opening fresh
+        if (newValue === "") {
+            this.previousValue.current = "";
+        }
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -281,28 +305,30 @@ class NavigationMenuTriggerState {
         if (this.opts.disabled.current ||
             this.wasClickClose ||
             this.itemContext.wasEscapeClose ||
-            this.hasPointerMoveOpened.current) {
+            this.hasPointerMoveOpened.current ||
+            !this.itemContext.opts.openOnHover.current) {
             return;
         }
-        this.context.onTriggerEnter(this.itemContext.opts.value.current);
+        this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
         this.hasPointerMoveOpened.current = true;
     });
     onpointerleave = whenMouse(() => {
-        if (this.opts.disabled.current)
+        if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current)
             return;
         this.context.onTriggerLeave();
         this.hasPointerMoveOpened.current = false;
     });
-    onclick = (_) => {
+    onclick = () => {
         // if opened via pointer move, we prevent the click event
         if (this.hasPointerMoveOpened.current)
             return;
-        const shouldClose = this.open && this.context.opts.isRootMenu;
+        const shouldClose = this.open &&
+            (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
         if (shouldClose) {
-            this.context.onItemSelect("");
+            this.context.onItemSelect("", null);
         }
         else if (!this.open) {
-            this.context.onItemSelect(this.itemContext.opts.value.current);
+            this.context.onItemSelect(this.itemContext.opts.value.current, this.itemContext);
         }
         this.wasClickClose = shouldClose;
     };
@@ -386,6 +412,23 @@ class NavigationMenuLinkState {
     onblur = (_) => {
         this.isFocused = false;
     };
+    #handlePointerDismiss = () => {
+        // only close submenu if this link is not inside the currently open submenu content
+        const currentlyOpenValue = this.context.provider.opts.value.current;
+        const isInsideOpenSubmenu = this.context.item.opts.value.current === currentlyOpenValue;
+        const activeItem = this.context.item.listContext.context.activeItem;
+        if (activeItem && !activeItem.opts.openOnHover.current)
+            return;
+        if (currentlyOpenValue && !isInsideOpenSubmenu) {
+            this.context.provider.onItemDismiss();
+        }
+    };
+    onpointerenter = () => {
+        this.#handlePointerDismiss();
+    };
+    onpointermove = whenMouse(() => {
+        this.#handlePointerDismiss();
+    });
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-active": this.opts.active.current ? "" : undefined,
@@ -395,6 +438,8 @@ class NavigationMenuLinkState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        onpointerenter: this.onpointerenter,
+        onpointermove: this.onpointermove,
         [NAVIGATION_MENU_LINK_ATTR]: "",
     }));
 }
@@ -497,6 +542,8 @@ class NavigationMenuContentState {
         this.context.onContentEnter();
     };
     onpointerleave = whenMouse(() => {
+        if (!this.itemContext.opts.openOnHover.current)
+            return;
         this.context.onContentLeave();
     });
     props = $derived.by(() => ({
@@ -520,6 +567,11 @@ class NavigationMenuContentImplState {
         const prevIndex = values.indexOf(this.context.opts.previousValue.current);
         const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
         const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
+        // When all menus are closed, we want to reset motion state to prevent residual animations
+        if (!this.context.opts.value.current && !this.context.opts.previousValue.current) {
+            untrack(() => (this.prevMotionAttribute = null));
+            return null;
+        }
         // We only want to update selected and the last selected content
         // this avoids animations being interrupted outside of that range
         if (!isSelected && !wasSelected)
@@ -585,8 +637,17 @@ class NavigationMenuContentImplState {
         const target = e.target;
         const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
         const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
-        if (isTrigger || isRootViewport || !this.context.opts.isRootMenu)
+        if (!this.context.opts.isRootMenu && !isTrigger) {
+            this.context.onItemDismiss();
+            return;
+        }
+        if (isTrigger || isRootViewport) {
             e.preventDefault();
+            return;
+        }
+        if (!this.itemContext.opts.openOnHover.current) {
+            this.context.onItemSelect("", null);
+        }
     };
     onkeydown = (e) => {
         // prevent parent menus handling sub-menu keydown events
@@ -661,6 +722,7 @@ class NavigationMenuViewportState {
     viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
     viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
     activeContentValue = $derived.by(() => this.context.opts.value.current);
+    mounted = $state(false);
     constructor(opts, context) {
         this.opts = opts;
         this.context = context;
@@ -695,6 +757,12 @@ class NavigationMenuViewportState {
                 };
             }
         });
+        // reset size when viewport closes to prevent residual size animations
+        watch(() => this.mounted, () => {
+            if (!this.mounted && this.size) {
+                this.size = null;
+            }
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -714,6 +782,7 @@ const NavigationMenuProviderContext = new Context("NavigationMenu.Root");
 export const NavigationMenuItemContext = new Context("NavigationMenu.Item");
 const NavigationMenuListContext = new Context("NavigationMenu.List");
 const NavigationMenuContentContext = new Context("NavigationMenu.Content");
+const NavigationMenuSubContext = new Context("NavigationMenu.Sub");
 export function useNavigationMenuRoot(props) {
     return new NavigationMenuRootState(props);
 }
@@ -740,6 +809,7 @@ export function useNavigationMenuTrigger(props) {
         provider: NavigationMenuProviderContext.get(),
         item: NavigationMenuItemContext.get(),
         list: NavigationMenuListContext.get(),
+        sub: NavigationMenuSubContext.getOr(null),
     });
 }
 export function useNavigationMenuContent(props) {

package/dist/bits/navigation-menu/types.d.ts

@@ -15,21 +15,22 @@ export type NavigationMenuRootPropsWithoutHTML = WithChild<{
      */
     onValueChange?: OnChangeFn<string>;
     /**
-     * The duration from when the mouse enters a trigger until the content opens.
+     * The amount of time in ms from when the mouse enters a trigger until the content opens.
      *
-     * @defaultValue 200
+     * @default 200
      */
     delayDuration?: number;
     /**
-     * How much time a user has to enter another trigger without incurring a delay again.
+     * The amount of time in ms that a user has to enter another trigger without
+     * incurring a delay again.
      *
-     * @defaultValue 300
+     * @default 300
      */
     skipDelayDuration?: number;
     /**
      * The reading direction of the content.
      *
-     * @defaultValue "ltr"
+     * @default "ltr"
      */
     dir?: Direction;
     /**
@@ -68,6 +69,13 @@ export type NavigationMenuItemPropsWithoutHTML = WithChild<{
      * The value of the menu item.
      */
     value?: string;
+    /**
+     * Whether to open the menu associated with the item when the item's trigger
+     * is hovered.
+     *
+     * @default true
+     */
+    openOnHover?: boolean;
 }>;
 export type NavigationMenuItemProps = NavigationMenuItemPropsWithoutHTML & Without<BitsPrimitiveLiAttributes, NavigationMenuItemPropsWithoutHTML>;
 export type NavigationMenuTriggerPropsWithoutHTML = WithChild<{
@@ -82,7 +90,6 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
     /**
      * Callback fired when an interaction occurs outside the content.
      * Default behavior can be prevented with `event.preventDefault()`
-     *
      */
     onInteractOutside?: (event: PointerEvent) => void;
     /**
@@ -108,7 +115,7 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
      * This is useful when wanting to use more custom transition and animation
      * libraries.
      *
-     * @defaultValue false
+     * @default false
      */
     forceMount?: boolean;
 }>;

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

@@ -27,7 +27,7 @@
 </script>
 
 {#if scrollButtonState.canScrollDown}
-	<Mounted bind:mounted={scrollButtonState.state.mounted} />
+	<Mounted bind:mounted={scrollButtonState.scrollButtonState.mounted} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}

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

@@ -27,7 +27,7 @@
 </script>
 
 {#if scrollButtonState.canScrollUp}
-	<Mounted bind:mounted={scrollButtonState.state.mounted} />
+	<Mounted bind:mounted={scrollButtonState.scrollButtonState.mounted} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}

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

@@ -334,12 +334,12 @@ declare class SelectScrollButtonImplState {
     };
 }
 declare class SelectScrollDownButtonState {
-    readonly state: SelectScrollButtonImplState;
+    readonly scrollButtonState: SelectScrollButtonImplState;
     content: SelectContentState;
     root: SelectBaseRootState;
     canScrollDown: boolean;
     scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null;
-    constructor(state: SelectScrollButtonImplState);
+    constructor(scrollButtonState: SelectScrollButtonImplState);
     /**
      * @param manual - if true, it means the function was invoked manually outside of an event
      * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
@@ -358,11 +358,11 @@ declare class SelectScrollDownButtonState {
     };
 }
 declare class SelectScrollUpButtonState {
-    readonly state: SelectScrollButtonImplState;
+    readonly scrollButtonState: SelectScrollButtonImplState;
     content: SelectContentState;
     root: SelectBaseRootState;
     canScrollUp: boolean;
-    constructor(state: SelectScrollButtonImplState);
+    constructor(scrollButtonState: SelectScrollButtonImplState);
     /**
      * @param manual - if true, it means the function was invoked manually outside of an event
      * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.

package/dist/bits/select/select.svelte.js

@@ -705,7 +705,11 @@ class SelectContentState {
         trapFocus: false,
         loop: false,
         onPlaced: () => {
-            this.isPositioned = true;
+            // onPlaced is also called when the menu is closed, so we need to check if the menu
+            // is actually open to avoid setting positioning to true when the menu is closed
+            if (this.root.opts.open.current) {
+                this.isPositioned = true;
+            }
         },
     };
 }
@@ -993,25 +997,24 @@ class SelectScrollButtonImplState {
     }));
 }
 class SelectScrollDownButtonState {
-    state;
+    scrollButtonState;
     content;
     root;
     canScrollDown = $state(false);
     scrollIntoViewTimer = null;
-    constructor(state) {
-        this.state = state;
-        this.content = state.content;
-        this.root = state.root;
-        this.state.onAutoScroll = this.handleAutoScroll;
+    constructor(scrollButtonState) {
+        this.scrollButtonState = scrollButtonState;
+        this.content = scrollButtonState.content;
+        this.root = scrollButtonState.root;
+        this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
         watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
-            if (!this.content.viewportNode || !this.content.isPositioned) {
+            if (!this.content.viewportNode || !this.content.isPositioned)
                 return;
-            }
             this.handleScroll(true);
             return on(this.content.viewportNode, "scroll", () => this.handleScroll());
         });
-        watch(() => this.state.mounted, () => {
-            if (!this.state.mounted)
+        watch(() => this.scrollButtonState.mounted, () => {
+            if (!this.scrollButtonState.mounted)
                 return;
             if (this.scrollIntoViewTimer) {
                 clearTimeout(this.scrollIntoViewTimer);
@@ -1028,7 +1031,7 @@ class SelectScrollDownButtonState {
      */
     handleScroll = (manual = false) => {
         if (!manual) {
-            this.state.handleUserScroll();
+            this.scrollButtonState.handleUserScroll();
         }
         if (!this.content.viewportNode)
             return;
@@ -1044,18 +1047,21 @@ class SelectScrollDownButtonState {
             return;
         viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
     };
-    props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-down-button"]]: "" }));
+    props = $derived.by(() => ({
+        ...this.scrollButtonState.props,
+        [this.root.bitsAttrs["scroll-down-button"]]: "",
+    }));
 }
 class SelectScrollUpButtonState {
-    state;
+    scrollButtonState;
     content;
     root;
     canScrollUp = $state(false);
-    constructor(state) {
-        this.state = state;
-        this.content = state.content;
-        this.root = state.root;
-        this.state.onAutoScroll = this.handleAutoScroll;
+    constructor(scrollButtonState) {
+        this.scrollButtonState = scrollButtonState;
+        this.content = scrollButtonState.content;
+        this.root = scrollButtonState.root;
+        this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
         watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
             if (!this.content.viewportNode || !this.content.isPositioned)
                 return;
@@ -1069,7 +1075,7 @@ class SelectScrollUpButtonState {
      */
     handleScroll = (manual = false) => {
         if (!manual) {
-            this.state.handleUserScroll();
+            this.scrollButtonState.handleUserScroll();
         }
         if (!this.content.viewportNode)
             return;
@@ -1082,7 +1088,10 @@ class SelectScrollUpButtonState {
         this.content.viewportNode.scrollTop =
             this.content.viewportNode.scrollTop - this.root.highlightedNode.offsetHeight;
     };
-    props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-up-button"]]: "" }));
+    props = $derived.by(() => ({
+        ...this.scrollButtonState.props,
+        [this.root.bitsAttrs["scroll-up-button"]]: "",
+    }));
 }
 const SelectRootContext = new Context("Select.Root | Combobox.Root");
 const SelectGroupContext = new Context("Select.Group | Combobox.Group");

package/dist/bits/slider/components/slider.svelte

@@ -22,6 +22,7 @@
 		dir = "ltr",
 		autoSort = true,
 		orientation = "horizontal",
+		thumbPositioning = "contain",
 		...restProps
 	}: SliderRootProps = $props();
 
@@ -63,6 +64,7 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		thumbPositioning: box.with(() => thumbPositioning),
 		type,
 	});
 

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

@@ -1,7 +1,7 @@
 import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
-import type { Direction, Orientation } from "../../shared/index.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
@@ -10,6 +10,7 @@ type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
+    thumbPositioning: SliderThumbPositioning;
 }>>;
 declare class SliderBaseRootState {
     #private;

package/dist/bits/slider/slider.svelte.js

@@ -46,6 +46,10 @@ class SliderBaseRootState {
         return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
     };
     getThumbScale = () => {
+        if (this.opts.thumbPositioning.current === "exact") {
+            // User opted out of containment
+            return [0, 100];
+        }
         const isVertical = this.opts.orientation.current === "vertical";
         // this assumes all thumbs are the same width
         const activeThumb = this.getAllThumbs()[0];

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

@@ -1,6 +1,6 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
-import type { Direction, Orientation } from "../../shared/index.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 export type SliderRootSnippetProps = {
     ticks: number[];
     thumbs: number[];
@@ -53,6 +53,12 @@ export type BaseSliderRootPropsWithoutHTML = {
      * @defaultValue false
      */
     disabled?: boolean;
+    /**
+     * The positioning of the slider thumb.
+     *
+     * @defaultValue "contain"
+     */
+    thumbPositioning?: SliderThumbPositioning;
 };
 export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
     /**

package/dist/shared/index.d.ts

@@ -12,6 +12,13 @@ export type StyleProperties = CSS.Properties & {
 };
 export type Orientation = "horizontal" | "vertical";
 export type Direction = "ltr" | "rtl";
+/**
+ * Controls positioning of the slider thumb.
+ *
+ * - `exact`: The thumb is centered exactly at the value of the slider.
+ * - `contain`: The thumb is centered exactly at the value of the slider, but will be contained within the slider track at the ends.
+ */
+export type SliderThumbPositioning = "exact" | "contain";
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithoutChildren<T> = T extends {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",