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

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -1,8 +1,8 @@
+import { useRefById } from "svelte-toolbelt";
+import { Context } from "runed";
 import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 const ROOT_ATTR = "data-toggle-group-root";
 const ITEM_ATTR = "data-toggle-group-item";
 class ToggleGroupBaseState {
@@ -47,10 +47,10 @@ class ToggleGroupSingleState extends ToggleGroupBaseState {
         super(props);
         this.#value = props.value;
     }
-    includesItem = (item) => {
+    includesItem(item) {
         return this.#value.current === item;
-    };
-    toggleItem = (item, id) => {
+    }
+    toggleItem(item, id) {
         if (this.includesItem(item)) {
             this.#value.current = "";
         }
@@ -58,7 +58,7 @@ class ToggleGroupSingleState extends ToggleGroupBaseState {
             this.#value.current = item;
             this.rovingFocusGroup.setCurrentTabStopId(id);
         }
-    };
+    }
 }
 class ToggleGroupMultipleState extends ToggleGroupBaseState {
     #value;
@@ -68,10 +68,10 @@ class ToggleGroupMultipleState extends ToggleGroupBaseState {
         super(props);
         this.#value = props.value;
     }
-    includesItem = (item) => {
+    includesItem(item) {
         return this.#value.current.includes(item);
-    };
-    toggleItem = (item, id) => {
+    }
+    toggleItem(item, id) {
         if (this.includesItem(item)) {
             this.#value.current = this.#value.current.filter((v) => v !== item);
         }
@@ -79,7 +79,7 @@ class ToggleGroupMultipleState extends ToggleGroupBaseState {
             this.#value.current = [...this.#value.current, item];
             this.rovingFocusGroup.setCurrentTabStopId(id);
         }
-    };
+    }
 }
 class ToggleGroupItemState {
     #id;
@@ -98,37 +98,47 @@ class ToggleGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            if (!this.#root.rovingFocus.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+            }
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    toggleItem = () => {
+    #toggleItem() {
         if (this.#isDisabled)
             return;
         this.#root.toggleItem(this.#value.current, this.#id.current);
-    };
-    #onclick = () => {
-        this.toggleItem();
-    };
-    #onkeydown = (e) => {
+    }
+    onclick(_) {
+        if (this.#isDisabled)
+            return;
+        this.#root.toggleItem(this.#value.current, this.#id.current);
+    }
+    onkeydown(e) {
         if (this.#isDisabled)
             return;
         if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
             e.preventDefault();
-            this.toggleItem();
+            this.#toggleItem();
             return;
         }
         if (!this.#root.rovingFocus.current)
             return;
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    };
+    }
     isPressed = $derived.by(() => this.#root.includesItem(this.#value.current));
     #ariaChecked = $derived.by(() => {
-        return this.#root.isMulti ? undefined : getAriaChecked(this.isPressed);
+        return this.#root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
         return this.#root.isMulti ? getAriaPressed(this.isPressed) : undefined;
     });
-    #tabIndex = $derived.by(() => !this.#root.rovingFocus.current
-        ? 0
-        : this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         role: this.#root.isMulti ? undefined : "radio",
@@ -142,8 +152,8 @@ class ToggleGroupItemState {
         disabled: getDisabled(this.#isDisabled),
         [ITEM_ATTR]: "",
         //
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
     }));
 }
 //
@@ -152,18 +162,14 @@ class ToggleGroupItemState {
 function getToggleItemDataState(condition) {
     return condition ? "on" : "off";
 }
-//
-// CONTEXT METHODS
-//
-const [setToggleGroupRootContext, getToggleGroupRootContext] = createContext("ToggleGroup.Root");
+const ToggleGroupRootContext = new Context("ToggleGroup.Root");
 export function useToggleGroupRoot(props) {
     const { type, ...rest } = props;
     const rootState = type === "single"
         ? new ToggleGroupSingleState(rest)
         : new ToggleGroupMultipleState(rest);
-    return setToggleGroupRootContext(rootState);
+    return ToggleGroupRootContext.set(rootState);
 }
 export function useToggleGroupItem(props) {
-    const rootState = getToggleGroupRootContext();
-    return new ToggleGroupItemState({ ...props, rootState });
+    return new ToggleGroupItemState({ ...props, rootState: ToggleGroupRootContext.get() });
 }

package/dist/bits/toggle-group/types.d.ts

@@ -1,5 +1,5 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { Orientation } from "../../index.js";
 export type BaseToggleGroupRootProps = {
     /**
@@ -28,29 +28,21 @@ export type BaseToggleGroupRootProps = {
      * users navigate between the items using the tab key.
      */
     rovingFocus?: boolean;
-    /**
-     * Whether or not the value state is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
 };
 export type SingleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps & {
     type: "single";
     value?: string;
     onValueChange?: OnChangeFn<string>;
 }>;
-export type SingleToggleGroupRootProps = SingleToggleGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, SingleToggleGroupRootPropsWithoutHTML>;
+export type SingleToggleGroupRootProps = SingleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SingleToggleGroupRootPropsWithoutHTML>;
 export type MultipleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps> & {
     type: "multiple";
     value?: string[];
     onValueChange?: OnChangeFn<string[]>;
 };
-export type MultipleToggleGroupRootProps = MultipleToggleGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, MultipleToggleGroupRootPropsWithoutHTML>;
+export type MultipleToggleGroupRootProps = MultipleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MultipleToggleGroupRootPropsWithoutHTML>;
 export type ToggleGroupRootPropsWithoutHTML = SingleToggleGroupRootPropsWithoutHTML | MultipleToggleGroupRootPropsWithoutHTML;
-export type ToggleGroupRootProps = ToggleGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML>;
+export type ToggleGroupRootProps = ToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML>;
 export type ToggleGroupItemSnippetProps = {
     pressed: boolean;
 };
@@ -66,4 +58,4 @@ export type ToggleGroupItemPropsWithoutHTML = WithChild<{
      */
     value: string;
 }, ToggleGroupItemSnippetProps>;
-export type ToggleGroupItemProps = ToggleGroupItemPropsWithoutHTML & Without<PrimitiveButtonAttributes, ToggleGroupItemPropsWithoutHTML>;
+export type ToggleGroupItemProps = ToggleGroupItemPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleGroupItemPropsWithoutHTML>;

package/dist/bits/toolbar/components/toolbar-button.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ButtonProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToolbarButtonProps } from "../types.js";
 	import { useToolbarButton } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -13,7 +12,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: ButtonProps = $props();
+	}: ToolbarButtonProps = $props();
 
 	const buttonState = useToolbarButton({
 		id: box.with(() => id),

package/dist/bits/toolbar/components/toolbar-button.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { ButtonProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToolbarButton: $$__sveltets_2_IsomorphicComponent<ButtonProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ToolbarButton = InstanceType<typeof ToolbarButton>;
+import type { ToolbarButtonProps } from "../types.js";
+declare const ToolbarButton: import("svelte").Component<ToolbarButtonProps, {}, "ref">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
 export default ToolbarButton;

package/dist/bits/toolbar/components/toolbar-group-item.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { GroupItemProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToolbarGroupItemProps } from "../types.js";
 	import { useToolbarGroupItem } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -14,7 +13,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: GroupItemProps = $props();
+	}: ToolbarGroupItemProps = $props();
 
 	const groupItemState = useToolbarGroupItem({
 		id: box.with(() => id),

package/dist/bits/toolbar/components/toolbar-group-item.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToolbarGroupItem: $$__sveltets_2_IsomorphicComponent<import("../../toggle-group/types.js").ToggleGroupItemProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ToolbarGroupItem = InstanceType<typeof ToolbarGroupItem>;
+declare const ToolbarGroupItem: import("svelte").Component<import("../../toggle-group/types.js").ToggleGroupItemProps, {}, "ref">;
+type ToolbarGroupItem = ReturnType<typeof ToolbarGroupItem>;
 export default ToolbarGroupItem;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
-	import type { GroupProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { ToolbarGroupProps } from "../types.js";
 	import { useToolbarGroup } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		id = useId(),
@@ -13,19 +13,14 @@
 		onValueChange = noop,
 		type,
 		disabled = false,
-		controlledValue = false,
 		child,
 		children,
 		...restProps
-	}: GroupProps = $props();
+	}: ToolbarGroupProps = $props();
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];
-		if (controlledValue) {
-			onValueChange(defaultValue as any);
-		} else {
-			value = defaultValue;
-		}
+		value = defaultValue;
 	}
 
 	const groupState = useToolbarGroup({
@@ -35,12 +30,9 @@
 		value: box.with(
 			() => value!,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v as any);
-				} else {
-					value = v;
-					onValueChange(v as any);
-				}
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
 		ref: box.with(

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

@@ -1,19 +1,4 @@
-import type { GroupProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToolbarGroup: $$__sveltets_2_IsomorphicComponent<GroupProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "ref">;
-type ToolbarGroup = InstanceType<typeof ToolbarGroup>;
+import type { ToolbarGroupProps } from "../types.js";
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "value" | "ref">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
 export default ToolbarGroup;

package/dist/bits/toolbar/components/toolbar-link.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useToolbarLink } from "../toolbar.svelte.js";
-	import type { LinkProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { ToolbarLinkProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -12,7 +11,7 @@
 		ref = $bindable(null),
 		id = useId(),
 		...restProps
-	}: LinkProps = $props();
+	}: ToolbarLinkProps = $props();
 
 	const linkState = useToolbarLink({
 		id: box.with(() => id),

package/dist/bits/toolbar/components/toolbar-link.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { LinkProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToolbarLink: $$__sveltets_2_IsomorphicComponent<LinkProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type ToolbarLink = InstanceType<typeof ToolbarLink>;
+import type { ToolbarLinkProps } from "../types.js";
+declare const ToolbarLink: import("svelte").Component<ToolbarLinkProps, {}, "ref">;
+type ToolbarLink = ReturnType<typeof ToolbarLink>;
 export default ToolbarLink;

package/dist/bits/toolbar/components/toolbar.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToolbarRootProps } from "../types.js";
 	import { useToolbarRoot } from "../toolbar.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,7 @@
 		child,
 		children,
 		...restProps
-	}: RootProps = $props();
+	}: ToolbarRootProps = $props();
 
 	const rootState = useToolbarRoot({
 		id: box.with(() => id),

package/dist/bits/toolbar/components/toolbar.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toolbar: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type Toolbar = InstanceType<typeof Toolbar>;
+import type { ToolbarRootProps } from "../types.js";
+declare const Toolbar: import("svelte").Component<ToolbarRootProps, {}, "ref">;
+type Toolbar = ReturnType<typeof Toolbar>;
 export default Toolbar;

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

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from "./types.js";

package/dist/bits/toolbar/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";

package/dist/bits/toolbar/index.d.ts

@@ -1,6 +1 @@
-export { default as Root } from "./components/toolbar.svelte";
-export { default as Button } from "./components/toolbar-button.svelte";
-export { default as Link } from "./components/toolbar-link.svelte";
-export { default as Group } from "./components/toolbar-group.svelte";
-export { default as GroupItem } from "./components/toolbar-group-item.svelte";
-export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from "./types.js";
+export * as Toolbar from "./exports.js";

package/dist/bits/toolbar/index.js

@@ -1,5 +1 @@
-export { default as Root } from "./components/toolbar.svelte";
-export { default as Button } from "./components/toolbar-button.svelte";
-export { default as Link } from "./components/toolbar-link.svelte";
-export { default as Group } from "./components/toolbar-group.svelte";
-export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export * as Toolbar from "./exports.js";

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

@@ -1,8 +1,8 @@
 import { type WritableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type ToolbarRootStateProps = WithRefProps<ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
@@ -12,9 +12,6 @@ declare class ToolbarRootState {
     orientation: ToolbarRootStateProps["orientation"];
     rovingFocusGroup: UseRovingFocusReturn;
     constructor(props: ToolbarRootStateProps);
-    createGroup(props: InitToolbarGroupProps): ToolbarGroupSingleState | ToolbarGroupMultipleState;
-    createLink(props: ToolbarLinkStateProps): ToolbarLinkState;
-    createButton(props: ToolbarButtonStateProps): ToolbarButtonState;
     props: {
         readonly id: string;
         readonly role: "toolbar";
@@ -47,9 +44,8 @@ declare class ToolbarGroupSingleState extends ToolbarGroupBaseState {
     isMulti: boolean;
     anyPressed: boolean;
     constructor(props: ToolbarGroupSingleStateProps, root: ToolbarRootState);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
-    createItem(props: ToolbarGroupItemStateProps): ToolbarGroupItemState;
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
 }
 type ToolbarGroupMultipleStateProps = ToolbarGroupBaseStateProps & WritableBoxedValues<{
     value: string[];
@@ -59,9 +55,8 @@ declare class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
     isMulti: boolean;
     anyPressed: boolean;
     constructor(props: ToolbarGroupMultipleStateProps, root: ToolbarRootState);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
-    createItem(props: ToolbarGroupItemStateProps): ToolbarGroupItemState;
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
 }
 type ToolbarGroupState = ToolbarGroupSingleState | ToolbarGroupMultipleState;
 type ToolbarGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -71,7 +66,8 @@ type ToolbarGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
 declare class ToolbarGroupItemState {
     #private;
     constructor(props: ToolbarGroupItemStateProps, group: ToolbarGroupState, root: ToolbarRootState);
-    toggleItem: () => void;
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     isPressed: boolean;
     props: {
         readonly id: string;
@@ -79,21 +75,22 @@ declare class ToolbarGroupItemState {
         readonly tabindex: number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
-        readonly "data-state": "on" | "off";
+        readonly "data-state": "off" | "on";
         readonly "data-value": string;
-        readonly "aria-pressed": "false" | "true" | undefined;
-        readonly "aria-checked": "mixed" | "false" | "true" | undefined;
+        readonly "aria-pressed": "true" | "false" | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly "data-toolbar-item": "";
         readonly "data-toolbar-group-item": "";
         readonly disabled: true | undefined;
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 type ToolbarLinkStateProps = WithRefProps;
 declare class ToolbarLinkState {
     #private;
     constructor(props: ToolbarLinkStateProps, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         id: string;
         "data-toolbar-link": string;
@@ -101,7 +98,7 @@ declare class ToolbarLinkState {
         role: "link" | undefined;
         tabindex: number;
         "data-orientation": "horizontal" | "vertical";
-        onkeydown: (e: KeyboardEvent) => void;
+        onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 type ToolbarButtonStateProps = WithRefProps<ReadableBoxedValues<{
@@ -110,6 +107,7 @@ type ToolbarButtonStateProps = WithRefProps<ReadableBoxedValues<{
 declare class ToolbarButtonState {
     #private;
     constructor(props: ToolbarButtonStateProps, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
         readonly "data-toolbar-item": "";
@@ -119,7 +117,7 @@ declare class ToolbarButtonState {
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly disabled: true | undefined;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 export declare function useToolbarRoot(props: ToolbarRootStateProps): ToolbarRootState;