bits-ui 1.0.0-next.6 → 1.0.0-next.61

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

@@ -1,60 +1,27 @@
-import { box } from "svelte-toolbelt";
+import { afterTick, box, executeCallbacks, mergeProps, onDestroyEffect, useRefById, } from "svelte-toolbelt";
 import { tick, untrack } from "svelte";
 import { IsFocusWithin } from "runed";
 import { FIRST_LAST_KEYS, LAST_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, getCheckedState, isMouseEvent, } from "./utils.js";
 import { focusFirst } from "../../internal/focus.js";
 import { addEventListener } from "../../internal/events.js";
-import { executeCallbacks } from "../../internal/executeCallbacks.js";
-import { useTypeahead } from "../../internal/useTypeahead.svelte.js";
+import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
+import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
-import { mergeProps } from "../../internal/mergeProps.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterTick } from "../../internal/afterTick.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 import { isPointerInGraceArea, makeHullFromElements } from "../../internal/polygon.js";
-import { onDestroyEffect } from "../../internal/onDestroyEffect.svelte.js";
-// const TRIGGER_ATTR = "data-menu-trigger";
-// const CONTENT_ATTR = "data-menu-content";
-// const ITEM_ATTR = "data-menu-item";
-// const SEPARATOR_ATTR = "data-menu-separator";
-// const SUB_TRIGGER_ATTR = "data-menu-sub-trigger";
-// const CHECKBOX_ITEM_ATTR = "data-menu-checkbox-item";
-// const GROUP_ATTR = "data-menu-group";
-// const LABEL_ATTR = "data-menu-group-heading";
-// const RADIO_GROUP_ATTR = "data-menu-radio-group";
-// const RADIO_ITEM_ATTR = "data-menu-radio-item";
-// const ARROW_ATTR = "data-menu-arrow";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 const [setMenuRootContext, getMenuRootContext] = createContext("Menu.Root");
 const [setMenuMenuContext, getMenuMenuContext] = createContext(["Menu.Root", "Menu.Sub"], "MenuContext");
 const [setMenuContentContext, getMenuContentContext] = createContext("Menu.Content");
 const [setMenuGroupContext, getMenuGroupContext] = createContext("Menu.Group");
 const [setMenuRadioGroupContext, getMenuRadioGroupContext] = createContext("Menu.RadioGroup");
-function createAttrs(variant) {
-    return {
-        trigger: `data-${variant}-trigger`,
-        content: `data-${variant}-content`,
-        item: `data-${variant}-item`,
-        separator: `data-${variant}-separator`,
-        subTrigger: `data-${variant}-sub-trigger`,
-        checkboxItem: `data-${variant}-checkbox-item`,
-        group: `data-${variant}-group`,
-        groupHeading: `data-${variant}-group-heading`,
-        radioGroup: `data-${variant}-radio-group`,
-        radioItem: `data-${variant}-radio-item`,
-        arrow: `data-${variant}-arrow`,
-        subContent: `data-${variant}-sub-content`,
-    };
-}
 class MenuRootState {
     onClose;
     variant;
     isUsingKeyboard = box(false);
     dir;
-    attrs = $derived.by(() => createAttrs(this.variant.current));
     constructor(props) {
         this.onClose = props.onClose;
         this.dir = props.dir;
@@ -79,18 +46,9 @@ class MenuRootState {
             };
         });
     }
-    createMenu(props) {
-        return new MenuMenuState(props, this);
-    }
-    createGroup(props) {
-        return new MenuGroupState(props, this);
-    }
-    createSeparator(props) {
-        return new MenuSeparatorState(props, this);
-    }
-    createArrow() {
-        return new MenuArrowState(this);
-    }
+    getAttr = (name) => {
+        return `data-${this.variant.current}-${name}`;
+    };
 }
 class MenuMenuState {
     root;
@@ -122,18 +80,6 @@ class MenuMenuState {
     onClose = () => {
         this.open.current = false;
     };
-    createContent(props) {
-        return new MenuContentState(props, this);
-    }
-    createSubmenu(props) {
-        return new MenuMenuState(props, this.root, this);
-    }
-    createDropdownTrigger(props) {
-        return new DropdownMenuTriggerState(props, this);
-    }
-    createContextTrigger(props) {
-        return new ContextMenuTriggerState(props, this);
-    }
 }
 class MenuContentState {
     #id;
@@ -160,7 +106,7 @@ class MenuContentState {
         useRefById({
             id: this.#id,
             ref: this.contentRef,
-            condition: () => this.parentMenu.open.current,
+            deps: () => this.parentMenu.open.current,
             onRefChange: (node) => {
                 if (this.parentMenu.contentNode !== node) {
                     this.parentMenu.contentNode = node;
@@ -170,10 +116,10 @@ class MenuContentState {
         onDestroyEffect(() => {
             window.clearTimeout(this.#timer);
         });
-        this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch;
+        this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
             rootNodeId: this.parentMenu.contentId,
-            candidateAttr: this.parentMenu.root.attrs.item,
+            candidateAttr: this.parentMenu.root.getAttr("item"),
             loop: this.#loop,
             orientation: box.with(() => "vertical"),
         });
@@ -182,7 +128,7 @@ class MenuContentState {
         const node = this.parentMenu.contentNode;
         if (!node)
             return [];
-        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.attrs.item}]:not([data-disabled])`));
+        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.getAttr("item")}]:not([data-disabled])`));
         return candidates;
     };
     isPointerMovingToSubmenu = (e) => {
@@ -199,7 +145,7 @@ class MenuContentState {
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(target) || !isHTMLElement(currentTarget))
             return;
-        const isKeydownInside = target.closest(`[${this.parentMenu.root.attrs.content}]`)?.id ===
+        const isKeydownInside = target.closest(`[${this.parentMenu.root.getAttr("content")}]`)?.id ===
             this.parentMenu.contentId.current;
         const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
         const isCharacterKey = e.key.length === 1;
@@ -304,7 +250,7 @@ class MenuContentState {
         id: this.#id.current,
         role: "menu",
         "aria-orientation": getAriaOrientation("vertical"),
-        [this.parentMenu.root.attrs.content]: "",
+        [this.parentMenu.root.getAttr("content")]: "",
         "data-state": getDataOpenClosed(this.parentMenu.open.current),
         onkeydown: this.#onkeydown,
         onblur: this.#onblur,
@@ -315,22 +261,6 @@ class MenuContentState {
             pointerEvents: "auto",
         },
     }));
-    createItem(props) {
-        const item = new MenuItemSharedState(props, this);
-        return new MenuItemState(props, item);
-    }
-    createCheckboxItem(props) {
-        const item = new MenuItemState(props, new MenuItemSharedState(props, this));
-        return new MenuCheckboxItemState(props, item);
-    }
-    createRadioGroup(props) {
-        return new MenuRadioGroupState(props, this);
-    }
-    createSubTrigger(props) {
-        const item = new MenuItemSharedState(props, this);
-        const submenu = getMenuMenuContext();
-        return new MenuSubTriggerState(item, this, submenu);
-    }
 }
 class MenuItemSharedState {
     content;
@@ -346,7 +276,7 @@ class MenuItemSharedState {
         useRefById({
             id: this.id,
             ref: this.ref,
-            condition: () => this.content.isMounted.current,
+            deps: () => this.content.isMounted.current,
         });
     }
     #onpointermove = (e) => {
@@ -397,7 +327,7 @@ class MenuItemSharedState {
         "aria-disabled": getAriaDisabled(this.disabled.current),
         "data-disabled": getDataDisabled(this.disabled.current),
         "data-highlighted": this.#isFocused ? "" : undefined,
-        [this.content.parentMenu.root.attrs.item]: "",
+        [this.content.parentMenu.root.getAttr("item")]: "",
         //
         onpointermove: this.#onpointermove,
         onpointerleave: this.#onpointerleave,
@@ -408,12 +338,14 @@ class MenuItemSharedState {
 class MenuItemState {
     #item;
     #onSelect;
+    #closeOnSelect;
     #isPointerDown = $state(false);
     root;
     constructor(props, item) {
         this.#item = item;
         this.root = item.content.parentMenu.root;
         this.#onSelect = props.onSelect;
+        this.#closeOnSelect = props.closeOnSelect;
     }
     #onkeydown = (e) => {
         const isTypingAhead = this.#item.content.search !== "";
@@ -440,8 +372,9 @@ class MenuItemState {
         await tick();
         if (selectEvent.defaultPrevented) {
             this.#item.content.parentMenu.root.isUsingKeyboard.current = false;
+            return;
         }
-        else {
+        if (this.#closeOnSelect.current) {
             this.#item.content.parentMenu.root.onClose();
         }
     };
@@ -568,7 +501,7 @@ class MenuSubTriggerState {
         "aria-controls": this.#submenu.open.current
             ? this.#submenu.contentId.current
             : undefined,
-        [this.#submenu.root.attrs.subTrigger]: "",
+        [this.#submenu.root.getAttr("sub-trigger")]: "",
         onclick: this.#onclick,
         onpointermove: this.#onpointermove,
         onpointerleave: this.#onpointerleave,
@@ -578,27 +511,31 @@ class MenuSubTriggerState {
 class MenuCheckboxItemState {
     #item;
     #checked;
+    #indeterminate;
     constructor(props, item) {
         this.#item = item;
         this.#checked = props.checked;
+        this.#indeterminate = props.indeterminate;
     }
     toggleChecked = () => {
-        if (this.#checked.current === true) {
-            this.#checked.current = false;
-        }
-        else if (this.#checked.current === false) {
+        if (this.#indeterminate.current) {
+            this.#indeterminate.current = false;
             this.#checked.current = true;
         }
-        else if (this.#checked.current === "indeterminate") {
-            this.#checked.current = true;
+        else {
+            this.#checked.current = !this.#checked.current;
         }
     };
+    snippetProps = $derived.by(() => ({
+        checked: this.#checked.current,
+        indeterminate: this.#indeterminate.current,
+    }));
     props = $derived.by(() => ({
         ...this.#item.props,
         role: "menuitemcheckbox",
-        "aria-checked": getAriaChecked(this.#checked.current),
+        "aria-checked": getAriaChecked(this.#checked.current, this.#indeterminate.current),
         "data-state": getCheckedState(this.#checked.current),
-        [this.#item.root.attrs.checkboxItem]: "",
+        [this.#item.root.getAttr("checkbox-item")]: "",
     }));
 }
 class MenuGroupState {
@@ -619,11 +556,8 @@ class MenuGroupState {
         id: this.#id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        [this.root.attrs.group]: "",
+        [this.root.getAttr("group")]: "",
     }));
-    createGroupHeading(props) {
-        return new MenuGroupHeadingState(props, this);
-    }
 }
 class MenuGroupHeadingState {
     #id;
@@ -644,7 +578,7 @@ class MenuGroupHeadingState {
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "group",
-        [this.#group.root.attrs.groupHeading]: "",
+        [this.#group.root.getAttr("group-heading")]: "",
     }));
 }
 class MenuSeparatorState {
@@ -663,7 +597,7 @@ class MenuSeparatorState {
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "group",
-        [this.#root.attrs.separator]: "",
+        [this.#root.getAttr("separator")]: "",
     }));
 }
 class MenuArrowState {
@@ -672,21 +606,21 @@ class MenuArrowState {
         this.#root = root;
     }
     props = $derived.by(() => ({
-        [this.#root.attrs.arrow]: "",
+        [this.#root.getAttr("arrow")]: "",
     }));
 }
 class MenuRadioGroupState {
     #id;
     value;
     #ref;
-    #content;
+    content;
     groupHeadingId = $state(null);
     root;
     constructor(props, content) {
         this.value = props.value;
         this.#id = props.id;
         this.#ref = props.ref;
-        this.#content = content;
+        this.content = content;
         this.root = content.parentMenu.root;
         useRefById({
             id: this.#id,
@@ -696,16 +630,9 @@ class MenuRadioGroupState {
     setValue = (v) => {
         this.value.current = v;
     };
-    createRadioItem(props) {
-        const item = this.#content.createItem(props);
-        return new MenuRadioItemState(props, item, this);
-    }
-    createGroupHeading(props) {
-        return new MenuGroupHeadingState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
-        [this.root.attrs.radioGroup]: "",
+        [this.root.getAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
     }));
@@ -713,6 +640,7 @@ class MenuRadioGroupState {
 class MenuRadioItemState {
     #id;
     #ref;
+    #closeOnSelect;
     #item;
     #value;
     #group;
@@ -723,6 +651,7 @@ class MenuRadioItemState {
         this.#ref = props.ref;
         this.#group = group;
         this.#value = props.value;
+        this.#closeOnSelect = props.closeOnSelect;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -732,10 +661,10 @@ class MenuRadioItemState {
         this.#group.setValue(this.#value.current);
     };
     props = $derived.by(() => ({
-        [this.#group.root.attrs.radioItem]: "",
+        [this.#group.root.getAttr("radio-item")]: "",
         ...this.#item.props,
         role: "menuitemradio",
-        "aria-checked": getAriaChecked(this.isChecked),
+        "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
     }));
 }
@@ -758,7 +687,11 @@ class DropdownMenuTriggerState {
         });
     }
     #onpointerdown = (e) => {
-        if (!this.#disabled.current && e.button === 0 && e.ctrlKey === false) {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button === 0 && e.ctrlKey === false) {
             this.#parentMenu.toggleOpen();
             // prevent trigger focusing when opening to allow
             // the content to be given focus without competition
@@ -766,6 +699,14 @@ class DropdownMenuTriggerState {
                 e.preventDefault();
         }
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#parentMenu.toggleOpen();
+        }
+    };
     #onkeydown = (e) => {
         if (this.#disabled.current)
             return;
@@ -792,9 +733,10 @@ class DropdownMenuTriggerState {
         "aria-controls": this.#ariaControls,
         "data-disabled": getDataDisabled(this.#disabled.current),
         "data-state": getDataOpenClosed(this.#parentMenu.open.current),
-        [this.#parentMenu.root.attrs.trigger]: "",
+        [this.#parentMenu.root.getAttr("trigger")]: "",
         //
         onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
         onkeydown: this.#onkeydown,
     }));
 }
@@ -819,7 +761,7 @@ class ContextMenuTriggerState {
             onRefChange: (node) => {
                 this.#parentMenu.triggerNode = node;
             },
-            condition: () => this.#parentMenu.open.current,
+            deps: () => this.#parentMenu.open.current,
         });
         $effect(() => {
             this.#point;
@@ -897,47 +839,65 @@ export function useMenuRoot(props) {
     return setMenuRootContext(new MenuRootState(props));
 }
 export function useMenuMenu(root, props) {
-    return setMenuMenuContext(root.createMenu(props));
+    const menu = new MenuMenuState(props, root);
+    return setMenuMenuContext(menu);
 }
 export function useMenuSubmenu(props) {
-    return setMenuMenuContext(getMenuMenuContext().createSubmenu(props));
+    const menu = getMenuMenuContext();
+    return setMenuMenuContext(new MenuMenuState(props, menu.root, menu));
 }
 export function useMenuSubTrigger(props) {
-    return getMenuContentContext().createSubTrigger(props);
+    const content = getMenuContentContext();
+    const item = new MenuItemSharedState(props, content);
+    const submenu = getMenuMenuContext();
+    return new MenuSubTriggerState(item, content, submenu);
 }
 export function useMenuDropdownTrigger(props) {
-    return getMenuMenuContext().createDropdownTrigger(props);
-}
-export function useMenuPortal() {
-    return getMenuMenuContext();
+    const menu = getMenuMenuContext();
+    return new DropdownMenuTriggerState(props, menu);
 }
 export function useMenuContextTrigger(props) {
-    return getMenuMenuContext().createContextTrigger(props);
+    const menu = getMenuMenuContext();
+    return new ContextMenuTriggerState(props, menu);
 }
 export function useMenuContent(props) {
-    return setMenuContentContext(getMenuMenuContext().createContent(props));
+    const menu = getMenuMenuContext();
+    return setMenuContentContext(new MenuContentState(props, menu));
 }
 export function useMenuItem(props) {
-    return getMenuContentContext().createItem(props);
+    const content = getMenuContentContext();
+    const item = new MenuItemSharedState(props, content);
+    return new MenuItemState(props, item);
 }
 export function useMenuCheckboxItem(props) {
-    return getMenuContentContext().createCheckboxItem(props);
+    const content = getMenuContentContext();
+    const item = new MenuItemState(props, new MenuItemSharedState(props, content));
+    return new MenuCheckboxItemState(props, item);
 }
 export function useMenuRadioGroup(props) {
-    return setMenuGroupContext(setMenuRadioGroupContext(getMenuContentContext().createRadioGroup(props)));
+    const content = getMenuContentContext();
+    const radioGroup = new MenuRadioGroupState(props, content);
+    return setMenuGroupContext(setMenuRadioGroupContext(radioGroup));
 }
 export function useMenuRadioItem(props) {
-    return getMenuRadioGroupContext().createRadioItem(props);
+    const radioGroup = getMenuRadioGroupContext();
+    const sharedItem = new MenuItemSharedState(props, radioGroup.content);
+    const item = new MenuItemState(props, sharedItem);
+    return new MenuRadioItemState(props, item, radioGroup);
 }
 export function useMenuGroup(props) {
-    return setMenuGroupContext(getMenuRootContext().createGroup(props));
+    const root = getMenuRootContext();
+    return setMenuGroupContext(new MenuGroupState(props, root));
 }
 export function useMenuGroupHeading(props) {
-    return getMenuGroupContext().createGroupHeading(props);
+    const group = getMenuGroupContext();
+    return new MenuGroupHeadingState(props, group);
 }
 export function useMenuSeparator(props) {
-    return getMenuRootContext().createSeparator(props);
+    const root = getMenuRootContext();
+    return new MenuSeparatorState(props, root);
 }
 export function useMenuArrow() {
-    return getMenuRootContext().createArrow();
+    const root = getMenuRootContext();
+    return new MenuArrowState(root);
 }

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

@@ -1,8 +1,8 @@
 import type { Expand } from "svelte-toolbelt";
 import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { Direction } from "../../shared/index.js";
 import type { PortalProps } from "../utilities/portal/types.js";
 export type MenuRootPropsWithoutHTML = WithChildren<{
@@ -45,10 +45,10 @@ export type MenuContentSnippetProps = {
      */
     open: boolean;
 };
-export type MenuContentPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerProps, "content"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
-export type MenuContentProps = MenuContentPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuContentPropsWithoutHTML>;
-export type MenuContentStaticPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerStaticProps, "content"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
-export type MenuContentStaticProps = MenuContentStaticPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuContentStaticPropsWithoutHTML>;
+export type MenuContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
+export type MenuContentProps = MenuContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuContentPropsWithoutHTML>;
+export type MenuContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
+export type MenuContentStaticProps = MenuContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuContentStaticPropsWithoutHTML>;
 export type MenuItemPropsWithoutHTML<U extends Record<PropertyKey, unknown> = {
     _default: never;
 }> = WithChild<{
@@ -72,22 +72,30 @@ export type MenuItemPropsWithoutHTML<U extends Record<PropertyKey, unknown> = {
      * Prevent default behavior of selection with `event.preventDefault()`.
      */
     onSelect?: (event: Event) => void;
+    /**
+     * Whether or not the menu item should close when selected.
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
 }, U>;
-export type MenuItemProps = MenuItemPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuItemPropsWithoutHTML>;
+export type MenuItemProps = MenuItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuItemPropsWithoutHTML>;
 export type MenuCheckboxItemSnippetProps = {
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 };
 export type MenuCheckboxItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuCheckboxItemSnippetProps> & {
     /**
-     * The checked state of the checkbox item.
+     * The checked state of the checkbox. It can be one of:
+     * - `true` for checked
+     * - `false` for unchecked
      *
-     * Supports two-way binding with `bind:checked`.
+     * @defaultValue false
      */
-    checked?: boolean | "indeterminate";
+    checked?: boolean;
     /**
      * A callback that is fired when the checked state changes.
      */
-    onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+    onCheckedChange?: OnChangeFn<boolean>;
     /**
      * Whether or not the checked state is controlled or not. If `true`, the component will not
      * update the checked state internally, instead it will call `onCheckedChange` when it
@@ -97,8 +105,33 @@ export type MenuCheckboxItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuChec
      * @defaultValue false
      */
     controlledChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state or not.
+     *
+     * @defaultValue false
+     */
+    indeterminate?: boolean;
+    /**
+     * A callback function called when the indeterminate state changes.
+     */
+    onIndeterminateChange?: OnChangeFn<boolean>;
+    /**
+     * Whether the indeterminate state is controlled or not. If `true`, the checkbox will
+     * not update the indeterminate state internally, instead it will call
+     * `onIndeterminateChange` when it would have otherwise, and it is up to you to update
+     * the `indeterminate` prop that is passed to the component.
+     *
+     * @defaultValue false
+     */
+    controlledIndeterminate?: boolean;
+    /**
+     * Whether or not the menu item should close when selected.
+     *
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
 };
-export type MenuCheckboxItemProps = MenuCheckboxItemPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuCheckboxItemPropsWithoutHTML>;
+export type MenuCheckboxItemProps = MenuCheckboxItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuCheckboxItemPropsWithoutHTML>;
 export type MenuTriggerPropsWithoutHTML = WithChild<{
     /**
      * Whether the trigger is disabled.
@@ -107,7 +140,7 @@ export type MenuTriggerPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }>;
-export type MenuTriggerProps = MenuTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, MenuTriggerPropsWithoutHTML>;
+export type MenuTriggerProps = MenuTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, MenuTriggerPropsWithoutHTML>;
 export type MenuSubPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the menu.
@@ -126,20 +159,21 @@ export type MenuSubPropsWithoutHTML = WithChildren<{
      */
     controlledOpen?: boolean;
 }>;
-export type MenuSubContentPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerProps, "content" | "preventScroll"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
-export type MenuSubContentProps = MenuSubContentPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
-export type MenuSubContentStaticPropsWithoutHTML = Expand<WithChild<Omit<PopperLayerStaticProps, "content" | "preventScroll"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
-export type MenuSubContentStaticProps = MenuSubContentStaticPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuSubContentStaticPropsWithoutHTML>;
+export type MenuSubProps = MenuSubPropsWithoutHTML;
+export type MenuSubContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "preventScroll"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
+export type MenuSubContentProps = MenuSubContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
+export type MenuSubContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "preventScroll"> & _SharedMenuContentProps, MenuContentSnippetProps>>;
+export type MenuSubContentStaticProps = MenuSubContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentStaticPropsWithoutHTML>;
 export type MenuSubTriggerPropsWithoutHTML = MenuItemPropsWithoutHTML;
 export type MenuSubTriggerProps = MenuItemProps;
 export type MenuSeparatorPropsWithoutHTML = WithChild;
-export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuSeparatorPropsWithoutHTML>;
+export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSeparatorPropsWithoutHTML>;
 export type MenuArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type MenuArrowProps = ArrowProps;
 export type MenuGroupPropsWithoutHTML = WithChild;
-export type MenuGroupProps = MenuGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuGroupPropsWithoutHTML>;
+export type MenuGroupProps = MenuGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuGroupPropsWithoutHTML>;
 export type MenuGroupHeadingPropsWithoutHTML = WithChild;
-export type MenuGroupHeadingProps = MenuGroupHeadingPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuGroupHeadingPropsWithoutHTML>;
+export type MenuGroupHeadingProps = MenuGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuGroupHeadingPropsWithoutHTML>;
 export type MenuRadioGroupPropsWithoutHTML = WithChild<{
     /**
      * The value of the selected radio item.
@@ -160,7 +194,7 @@ export type MenuRadioGroupPropsWithoutHTML = WithChild<{
      */
     controlledValue?: boolean;
 }>;
-export type MenuRadioGroupProps = MenuRadioGroupPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuRadioGroupPropsWithoutHTML>;
+export type MenuRadioGroupProps = MenuRadioGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuRadioGroupPropsWithoutHTML>;
 export type MenuRadioItemSnippetProps = {
     checked: boolean;
 };
@@ -169,7 +203,12 @@ export type MenuRadioItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuRadioIt
      * The value of the radio item.
      */
     value: string;
+    /**
+     * Whether or not the menu item should close when selected.
+     * @defaultValue true
+     */
+    closeOnSelect?: boolean;
 };
-export type MenuRadioItemProps = MenuRadioItemPropsWithoutHTML & Without<PrimitiveDivAttributes, MenuRadioItemPropsWithoutHTML>;
+export type MenuRadioItemProps = MenuRadioItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuRadioItemPropsWithoutHTML>;
 export type MenuPortalPropsWithoutHTML = PortalProps;
 export type MenuPortalProps = MenuPortalPropsWithoutHTML;

package/dist/bits/menubar/components/menubar-content-static.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentStaticProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { MenubarContentStaticProps } from "../types.js";
 	import { useMenubarContent } from "../menubar.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 	import MenuContentStatic from "../../menu/components/menu-content-static.svelte";
 
 	let {
@@ -11,7 +10,7 @@
 		interactOutsideBehavior = "close",
 		id = useId(),
 		...restProps
-	}: ContentStaticProps = $props();
+	}: MenubarContentStaticProps = $props();
 
 	const contentState = useMenubarContent({
 		id: box.with(() => id),