more docs

packages/bits-ui/src/lib/bits/context-menu/index.ts

@@ -2,7 +2,7 @@ export { default as Root } from "$lib/bits/menu/components/menu.svelte";
 export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
 export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
 export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
-export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as Label } from "$lib/bits/menu/components/menu-group-label.svelte";
 export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
 export { default as Content } from "./components/context-menu-content.svelte";
 export { default as Trigger } from "./components/context-menu-trigger.svelte";
@@ -19,7 +19,7 @@ export type {
 	ContextMenuCheckboxItemProps as CheckboxItemProps,
 	ContextMenuGroupProps as GroupProps,
 	ContextMenuItemProps as ItemProps,
-	ContextMenuLabelProps as LabelProps,
+	ContextMenuGroupLabelProps as GroupLabelProps,
 	ContextMenuRootProps as RootProps,
 	ContextMenuRadioGroupProps as RadioGroupProps,
 	ContextMenuRadioItemProps as RadioItemProps,

packages/bits-ui/src/lib/bits/context-menu/types.ts

@@ -25,7 +25,7 @@ export type {
 	CheckboxItemProps as ContextMenuCheckboxItemProps,
 	GroupProps as ContextMenuGroupProps,
 	ItemProps as ContextMenuItemProps,
-	LabelProps as ContextMenuLabelProps,
+	GroupLabelProps as ContextMenuGroupLabelProps,
 	RootProps as ContextMenuRootProps,
 	RadioGroupProps as ContextMenuRadioGroupProps,
 	RadioItemProps as ContextMenuRadioItemProps,
@@ -42,7 +42,7 @@ export type {
 	MenuCheckboxItemPropsWithoutHTML as ContextMenuCheckboxItemPropsWithoutHTML,
 	MenuGroupPropsWithoutHTML as ContextMenuGroupPropsWithoutHTML,
 	MenuItemPropsWithoutHTML as ContextMenuItemPropsWithoutHTML,
-	MenuLabelPropsWithoutHTML as ContextMenuLabelPropsWithoutHTML,
+	MenuGroupLabelPropsWithoutHTML as ContextMenuLabelPropsWithoutHTML,
 	MenuRadioGroupPropsWithoutHTML as ContextMenuRadioGroupPropsWithoutHTML,
 	MenuRadioItemPropsWithoutHTML as ContextMenuRadioItemPropsWithoutHTML,
 	MenuSeparatorPropsWithoutHTML as ContextMenuSeparatorPropsWithoutHTML,

packages/bits-ui/src/lib/bits/dropdown-menu/index.ts

@@ -2,7 +2,7 @@ export { default as Root } from "$lib/bits/menu/components/menu.svelte";
 export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
 export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
 export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
-export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as GroupLabel } from "$lib/bits/menu/components/menu-group-label.svelte";
 export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
 export { default as Content } from "./components/dropdown-menu-content.svelte";
 export { default as Trigger } from "$lib/bits/menu/components/menu-trigger.svelte";
@@ -20,7 +20,7 @@ export type {
 	DropdownMenuContentProps as ContentProps,
 	DropdownMenuGroupProps as GroupProps,
 	DropdownMenuItemProps as ItemProps,
-	DropdownMenuLabelProps as LabelProps,
+	DropdownMenuGroupLabelProps as GroupLabelProps,
 	DropdownMenuRootProps as RootProps,
 	DropdownMenuRadioGroupProps as RadioGroupProps,
 	DropdownMenuRadioItemProps as RadioItemProps,

packages/bits-ui/src/lib/bits/dropdown-menu/types.ts

@@ -4,7 +4,7 @@ export type {
 	ContentProps as DropdownMenuContentProps,
 	GroupProps as DropdownMenuGroupProps,
 	ItemProps as DropdownMenuItemProps,
-	LabelProps as DropdownMenuLabelProps,
+	GroupLabelProps as DropdownMenuGroupLabelProps,
 	RootProps as DropdownMenuRootProps,
 	RadioGroupProps as DropdownMenuRadioGroupProps,
 	RadioItemProps as DropdownMenuRadioItemProps,
@@ -23,7 +23,7 @@ export type {
 	MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML,
 	MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML,
 	MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML,
-	MenuLabelPropsWithoutHTML as DropdownMenuLabelPropsWithoutHTML,
+	MenuGroupLabelPropsWithoutHTML as DropdownMenuLabelPropsWithoutHTML,
 	MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML,
 	MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML,
 	MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML,

packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte → packages/bits-ui/src/lib/bits/menu/components/menu-group-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import type { LabelProps } from "../index.js";
+	import type { GroupLabelProps } from "../index.js";
 	import { useMenuLabel } from "../menu.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.js";
@@ -11,16 +11,16 @@
 		ref = $bindable(null),
 		id = useId(),
 		...restProps
-	}: LabelProps = $props();
+	}: GroupLabelProps = $props();
 
-	const labelState = useMenuLabel({
+	const groupLabelState = useMenuLabel({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
-	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+	const mergedProps = $derived(mergeProps(restProps, groupLabelState.props));
 </script>
 
 {#if child}

packages/bits-ui/src/lib/bits/menu/index.ts

@@ -4,7 +4,7 @@ export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte"
 export { default as Content } from "./components/menu-content.svelte";
 export { default as Group } from "./components/menu-group.svelte";
 export { default as Item } from "./components/menu-item.svelte";
-export { default as Label } from "./components/menu-label.svelte";
+export { default as GroupLabel } from "./components/menu-group-label.svelte";
 export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 export { default as RadioGroup } from "./components/menu-radio-group.svelte";
 export { default as RadioItem } from "./components/menu-radio-item.svelte";
@@ -24,7 +24,7 @@ export type {
 	MenuSeparatorProps as SeparatorProps,
 	MenuArrowProps as ArrowProps,
 	MenuCheckboxItemProps as CheckboxItemProps,
-	MenuLabelProps as LabelProps,
+	MenuGroupLabelProps as GroupLabelProps,
 	MenuGroupProps as GroupProps,
 	MenuRadioGroupProps as RadioGroupProps,
 	MenuRadioItemProps as RadioItemProps,

packages/bits-ui/src/lib/bits/menu/menu.svelte.ts

@@ -20,7 +20,7 @@ import { addEventListener } from "$lib/internal/events.js";
 import type { AnyFn, WithRefProps } from "$lib/internal/types.js";
 import { executeCallbacks } from "$lib/internal/callbacks.js";
 import { useTypeahead } from "$lib/internal/useTypeahead.svelte.js";
-import { isBrowser, isElement, isHTMLElement } from "$lib/internal/is.js";
+import { isElement, isHTMLElement } from "$lib/internal/is.js";
 import { useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import {
@@ -61,6 +61,8 @@ const [setMenuMenuContext, getMenuMenuContext] = createContext<MenuMenuState>(
 const [setMenuContentContext, getMenuContentContext] =
 	createContext<MenuContentState>("Menu.Content");
 
+const [setMenuGroupContext, getMenuGroupContext] = createContext<MenuGroupState>("Menu.Group");
+
 const [setMenuRadioGroupContext, getMenuRadioGroupContext] =
 	createContext<MenuRadioGroupState>("Menu.RadioGroup");
 
@@ -698,6 +700,7 @@ type MenuGroupStateProps = WithRefProps;
 class MenuGroupState {
 	#id: MenuGroupStateProps["id"];
 	#ref: MenuGroupStateProps["ref"];
+	labelNode = $state<HTMLElement | null>(null);
 
 	constructor(props: MenuGroupStateProps) {
 		this.#id = props.id;
@@ -714,23 +717,33 @@ class MenuGroupState {
 			({
 				id: this.#id.current,
 				role: "group",
+				"aria-labelledby": this.labelNode?.id ?? undefined,
 				[GROUP_ATTR]: "",
 			}) as const
 	);
+
+	createGroupLabel(props: MenuGroupLabelStateProps) {
+		return new MenuGroupLabelState(props, this);
+	}
 }
 
-type MenuLabelStateProps = WithRefProps;
-class MenuLabelState {
-	#id: MenuLabelStateProps["id"];
-	#ref: MenuLabelStateProps["ref"];
+type MenuGroupLabelStateProps = WithRefProps;
+class MenuGroupLabelState {
+	#id: MenuGroupLabelStateProps["id"];
+	#ref: MenuGroupLabelStateProps["ref"];
+	#group: MenuGroupState;
 
-	constructor(props: MenuLabelStateProps) {
+	constructor(props: MenuGroupLabelStateProps, group: MenuGroupState) {
 		this.#id = props.id;
 		this.#ref = props.ref;
+		this.#group = group;
 
 		useRefById({
 			id: this.#id,
 			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#group.labelNode = node;
+			},
 		});
 	}
 
@@ -1114,11 +1127,11 @@ export function useMenuRadioItem(props: MenuRadioItemStateProps & MenuItemCombin
 }
 
 export function useMenuGroup(props: MenuGroupStateProps) {
-	return new MenuGroupState(props);
+	return setMenuGroupContext(new MenuGroupState(props));
 }
 
-export function useMenuLabel(props: MenuLabelStateProps) {
-	return new MenuLabelState(props);
+export function useMenuLabel(props: MenuGroupLabelStateProps) {
+	return getMenuGroupContext().createGroupLabel(props);
 }
 
 export function useMenuSeparator(props: MenuSeparatorStateProps) {

packages/bits-ui/src/lib/bits/menu/types.ts

@@ -125,9 +125,9 @@ export type MenuGroupPropsWithoutHTML = WithChild;
 export type MenuGroupProps = MenuGroupPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuGroupPropsWithoutHTML>;
 
-export type MenuLabelPropsWithoutHTML = WithChild;
-export type MenuLabelProps = MenuLabelPropsWithoutHTML &
-	Without<PrimitiveDivAttributes, MenuLabelPropsWithoutHTML>;
+export type MenuGroupLabelPropsWithoutHTML = WithChild;
+export type MenuGroupLabelProps = MenuGroupLabelPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, MenuGroupLabelPropsWithoutHTML>;
 
 export type MenuRadioGroupPropsWithoutHTML = WithChild<{
 	/**

packages/bits-ui/src/lib/bits/menubar/index.ts

@@ -5,7 +5,7 @@ export { default as Trigger } from "./components/menubar-trigger.svelte";
 export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
 export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
 export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
-export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as Label } from "$lib/bits/menu/components/menu-group-label.svelte";
 export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
 export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte";
 export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte";
@@ -25,7 +25,7 @@ export type {
 	MenuSubPropsWithoutHTML as SubProps,
 	MenuItemProps as ItemProps,
 	MenuGroupProps as GroupProps,
-	MenuLabelProps as LabelProps,
+	MenuGroupLabelProps as LabelProps,
 	MenuArrowProps as ArrowProps,
 	MenuRadioItemProps as RadioItemProps,
 	MenuSeparatorProps as SeparatorProps,

packages/bits-ui/src/lib/bits/menubar/types.ts

@@ -1,7 +1,8 @@
-import type { MenuContentProps, MenuContentPropsWithoutHTML } from "../menu/types.js";
 import type { OnChangeFn, WithChild, WithChildren, Without } from "$lib/internal/types.js";
 import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "$lib/shared/attributes.js";
 import type { Direction } from "$lib/shared/index.js";
+import type { ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
+import type { ArrowProps } from "../menu/index.js";
 
 export type MenubarRootPropsWithoutHTML = WithChild<{
 	/**
@@ -51,6 +52,30 @@ export type MenubarTriggerPropsWithoutHTML = WithChild<{
 export type MenubarTriggerProps = MenubarTriggerPropsWithoutHTML &
 	Without<PrimitiveButtonAttributes, MenubarTriggerPropsWithoutHTML>;
 
-export type MenubarContentPropsWithoutHTML = MenuContentPropsWithoutHTML;
+export type {
+	MenuContentPropsWithoutHTML as MenubarContentPropsWithoutHTML,
+	MenuContentProps as MenubarContentProps,
+	MenuItemPropsWithoutHTML as MenubarItemPropsWithoutHTML,
+	MenuItemProps as MenubarItemProps,
+	MenuGroupPropsWithoutHTML as MenubarGroupPropsWithoutHTML,
+	MenuGroupProps as MenubarGroupProps,
+	MenuGroupLabelPropsWithoutHTML as MenubarGroupLabelPropsWithoutHTML,
+	MenuGroupLabelProps as MenubarGroupLabelProps,
+	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,
+	MenuSubTriggerPropsWithoutHTML as MenubarSubTriggerPropsWithoutHTML,
+	MenuSubTriggerProps as MenubarSubTriggerProps,
+	MenuSubPropsWithoutHTML as MenubarSubPropsWithoutHTML,
+} from "../menu/types.js";
 
-export type MenubarContentProps = MenuContentProps;
+export type MenubarArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
+
+export type MenubarArrowProps = ArrowProps;

packages/bits-ui/src/lib/bits/navigation-menu/types.ts

@@ -25,16 +25,22 @@ export type NavigationMenuRootPropsWithoutHTML = WithChild<{
 
 	/**
 	 * The duration from when the mouse enters a trigger until the content opens.
+	 *
+	 * @defaultValue 200
 	 */
 	delayDuration?: number;
 
 	/**
 	 * How much time a user has to enter another trigger without incurring a delay again.
+	 *
+	 * @defaultValue 300
 	 */
 	skipDelayDuration?: number;
 
 	/**
 	 * The reading direction of the content.
+	 *
+	 * @defaultValue "ltr"
 	 */
 	dir?: Direction;
 

packages/bits-ui/src/lib/bits/select/types.ts

@@ -64,7 +64,7 @@ export type SelectRootPropsWithoutHTML = WithChildren<{
 export type SelectRootProps = SelectRootPropsWithoutHTML;
 
 export type SelectContentImplPropsWithoutHTML = WithChild<
-	PopperLayerProps & {
+	Omit<PopperLayerProps, "content"> & {
 		/**
 		 *  The positioning mode to use
 		 *

packages/bits-ui/src/lib/bits/switch/types.ts

@@ -47,10 +47,6 @@ export type SwitchRootPropsWithoutHTML = WithChild<
 		 * A callback function called when the checked state changes.
 		 */
 		onCheckedChange?: OnChangeFn<boolean>;
-
-		onclick?: EventCallback<MouseEvent>;
-
-		onkeydown?: EventCallback<KeyboardEvent>;
 	},
 	SwitchRootSnippetProps
 >;

packages/bits-ui/src/lib/bits/tabs/types.ts

@@ -35,7 +35,7 @@ export type TabsRootPropsWithoutHTML = WithChild<{
 	 * will be activated when the trigger is focused. If set to `'manual'`,
 	 * the tabs will be activated when the trigger is pressed.
 	 *
-	 * @defaultValue true
+	 * @defaultValue "automatic"
 	 */
 	activationMode?: TabsActivationMode;
 

packages/bits-ui/src/lib/bits/utilities/focus-scope/types.ts

@@ -14,6 +14,13 @@ export type FocusScopeProps = {
 	 * Can be prevented.
 	 */
 	onDestroyAutoFocus?: EventCallback;
+
+	/**
+	 * When `true` will loop through the tabbable elements in the focus scope.
+	 *
+	 * @defaultValue false
+	 */
+	loop?: boolean;
 };
 
 export type FocusScopeImplProps = {
@@ -29,12 +36,5 @@ export type FocusScopeImplProps = {
 	 */
 	trapped?: boolean;
 
-	/**
-	 * When `true` will loop through the tabbable elements in the focus scope.
-	 *
-	 * @defaultValue false
-	 */
-	loop?: boolean;
-
 	focusScope?: Snippet<[{ props: FocusScopeContainerProps }]>;
 } & FocusScopeProps;

packages/bits-ui/src/tests/dropdown-menu/DropdownMenuTest.svelte

@@ -35,7 +35,7 @@
 				<DropdownMenu.Content data-testid="content" {...contentProps}>
 					<DropdownMenu.Separator data-testid="separator" />
 					<DropdownMenu.Group data-testid="group">
-						<DropdownMenu.Label data-testid="label">Stuff</DropdownMenu.Label>
+						<DropdownMenu.GroupLabel data-testid="label">Stuff</DropdownMenu.GroupLabel>
 						<DropdownMenu.Item data-testid="item">
 							<span>item</span>
 						</DropdownMenu.Item>

sites/docs/src/lib/content/api-reference/helpers.ts

@@ -21,6 +21,8 @@ type ElementKind =
 	| "HTMLHeadingElement"
 	| "HTMLImageElement"
 	| "HTMLInputElement"
+	| "HTMLUListElement"
+	| "HTMLLiElement"
 	| "HTMLElement";
 
 export function domElProps(elType: ElementKind) {