bits-ui 1.6.1 → 1.7.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/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/package.json

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