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

package/dist/bits/tabs/tabs.svelte.js

@@ -1,10 +1,10 @@
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
+import { useRefById } from "svelte-toolbelt";
 import { getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 const ROOT_ATTR = "data-tabs-root";
 const LIST_ATTR = "data-tabs-list";
 const TRIGGER_ATTR = "data-tabs-trigger";
@@ -61,15 +61,6 @@ class TabsRootState {
     setValue = (v) => {
         this.value.current = v;
     };
-    createList(props) {
-        return new TabsListState(props, this);
-    }
-    createTrigger(props) {
-        return new TabsTriggerState(props, this);
-    }
-    createContent(props) {
-        return new TabsContentState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-orientation": getDataOrientation(this.orientation.current),
@@ -123,7 +114,7 @@ class TabsTriggerState {
             // we want to track the value & id
             const id = this.#id.current;
             const value = this.#value.current;
-            untrack(() => {
+            return untrack(() => {
                 const deregister = this.#root.registerTrigger(id, value);
                 return () => {
                     deregister();
@@ -131,8 +122,12 @@ class TabsTriggerState {
             });
         });
         $effect(() => {
-            if (this.#root.triggerIds.length) {
-                this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+            this.#root.triggerIds.length;
+            if (this.#isActive || !this.#root.value.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = -1;
             }
         });
     }
@@ -142,15 +137,13 @@ class TabsTriggerState {
         this.#root.setValue(this.#value.current);
     };
     #onfocus = () => {
-        if (this.#root.activationMode.current !== "automatic" || this.#disabled.current)
+        if (this.#root.activationMode.current !== "automatic" || this.#isDisabled)
             return;
         this.activate();
     };
     #onclick = (e) => {
-        if (!this.#ref.current || this.#isDisabled)
+        if (this.#isDisabled)
             return;
-        e.preventDefault();
-        this.#ref.current.focus();
         this.activate();
     };
     #onkeydown = (e) => {
@@ -169,11 +162,11 @@ class TabsTriggerState {
         "data-state": getTabDataState(this.#isActive),
         "data-value": this.#value.current,
         "data-orientation": getDataOrientation(this.#root.orientation.current),
-        "data-disabled": getDataDisabled(this.#disabled.current),
+        "data-disabled": getDataDisabled(this.#isDisabled),
         "aria-selected": getAriaSelected(this.#isActive),
         "aria-controls": this.#ariaControls,
         [TRIGGER_ATTR]: "",
-        disabled: getDisabled(this.#disabled.current),
+        disabled: getDisabled(this.#isDisabled),
         tabindex: this.#tabIndex,
         //
         onclick: this.#onclick,
@@ -228,13 +221,13 @@ export function useTabsRoot(props) {
     return setTabsRootContext(new TabsRootState(props));
 }
 export function useTabsTrigger(props) {
-    return getTabsRootContext().createTrigger(props);
+    return new TabsTriggerState(props, getTabsRootContext());
 }
 export function useTabsList(props) {
-    return getTabsRootContext().createList(props);
+    return new TabsListState(props, getTabsRootContext());
 }
 export function useTabsContent(props) {
-    return getTabsRootContext().createContent(props);
+    return new TabsContentState(props, getTabsRootContext());
 }
 //
 // HELPERS

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

@@ -1,6 +1,6 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { Orientation } from "../../index.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type TabsActivationMode = "manual" | "automatic";
 export type TabsRootPropsWithoutHTML = WithChild<{
     /**
@@ -47,9 +47,9 @@ export type TabsRootPropsWithoutHTML = WithChild<{
      */
     controlledValue?: boolean;
 }>;
-export type TabsRootProps = TabsRootPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
+export type TabsRootProps = TabsRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
 export type TabsListPropsWithoutHTML = WithChild;
-export type TabsListProps = TabsListPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsListPropsWithoutHTML>;
+export type TabsListProps = TabsListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsListPropsWithoutHTML>;
 export type TabsTriggerPropsWithoutHTML = WithChild<{
     /**
      * The value of the tab associated with this trigger.
@@ -62,11 +62,11 @@ export type TabsTriggerPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }>;
-export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
+export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
 export type TabsContentPropsWithoutHTML = WithChild<{
     /**
      * The value of the tab associated with this content.
      */
     value: string;
 }>;
-export type TabsContentProps = TabsContentPropsWithoutHTML & Without<PrimitiveDivAttributes, TabsContentPropsWithoutHTML>;
+export type TabsContentProps = TabsContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsContentPropsWithoutHTML>;

package/dist/bits/toggle/components/toggle.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToggleRootProps } from "../types.js";
 	import { useToggleRoot } from "../toggle.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +16,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: ToggleRootProps = $props();
 
 	const toggleState = useToggleRoot({
 		pressed: box.with(

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ToggleRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<ToggleRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref" | "pressed">;
 type Toggle = InstanceType<typeof Toggle>;

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/toggle.svelte";
+export type { ToggleRootProps as RootProps } from "./types.js";

package/dist/bits/toggle/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/toggle.svelte";

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/toggle.svelte";
-export type { ToggleRootProps as RootProps } from "./types.js";
+export * as Toggle from "./exports.js";

package/dist/bits/toggle/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/toggle.svelte";
+export * as Toggle from "./exports.js";

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

@@ -11,12 +11,12 @@ declare class ToggleRootState {
     constructor(props: ToggleRootStateProps);
     props: {
         readonly "data-toggle-root": "";
+        readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "aria-pressed": "false" | "true";
-        readonly "data-state": "on" | "off";
+        readonly "aria-pressed": "true" | "false";
+        readonly "data-state": "off" | "on";
         readonly disabled: true | undefined;
         readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }
 export declare function useToggleRoot(props: ToggleRootStateProps): ToggleRootState;

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

@@ -1,6 +1,6 @@
+import { useRefById } from "svelte-toolbelt";
 import { getAriaPressed, getDataDisabled, getDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
 const ROOT_ATTR = "data-toggle-root";
 class ToggleRootState {
     #id;
@@ -23,22 +23,18 @@ class ToggleRootState {
         }
     };
     #onclick = () => {
-        this.#togglePressed();
-    };
-    #onkeydown = (e) => {
-        if (e.key !== kbd.ENTER || e.key !== kbd.SPACE)
+        if (this.#disabled.current)
             return;
-        e.preventDefault();
         this.#togglePressed();
     };
     props = $derived.by(() => ({
         [ROOT_ATTR]: "",
+        id: this.#id.current,
         "data-disabled": getDataDisabled(this.#disabled.current),
         "aria-pressed": getAriaPressed(this.pressed.current),
         "data-state": getToggleDataState(this.pressed.current),
         disabled: getDisabled(this.#disabled.current),
         onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
     }));
 }
 //

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

@@ -1,5 +1,5 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes } from "../../shared/attributes.js";
 export type ToggleRootSnippetProps = {
     pressed: boolean;
 };
@@ -30,4 +30,4 @@ export type ToggleRootPropsWithoutHTML = WithChild<{
      */
     controlledPressed?: boolean;
 }, ToggleRootSnippetProps>;
-export type ToggleRootProps = ToggleRootPropsWithoutHTML & Without<PrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;
+export type ToggleRootProps = ToggleRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ItemProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ToggleGroupItemProps } from "../types.js";
 	import { useToggleGroupItem } from "../toggle-group.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -14,7 +13,7 @@
 		id = useId(),
 		type = "button",
 		...restProps
-	}: ItemProps = $props();
+	}: ToggleGroupItemProps = $props();
 
 	const itemState = useToggleGroupItem({
 		id: box.with(() => id),

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

@@ -1,4 +1,4 @@
-import type { ItemProps } from "../index.js";
+import type { ToggleGroupItemProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToggleGroupItem: $$__sveltets_2_IsomorphicComponent<ItemProps, {
+declare const ToggleGroupItem: $$__sveltets_2_IsomorphicComponent<ToggleGroupItemProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ToggleGroupItem = InstanceType<typeof ToggleGroupItem>;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { type WritableBox, box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { ToggleGroupRootProps } from "../types.js";
 	import { useToggleGroupRoot } from "../toggle-group.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(),
@@ -20,7 +20,7 @@
 		child,
 		children,
 		...restProps
-	}: RootProps = $props();
+	}: ToggleGroupRootProps = $props();
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ToggleGroupRootProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToggleGroup: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const ToggleGroup: $$__sveltets_2_IsomorphicComponent<ToggleGroupRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type ToggleGroup = InstanceType<typeof ToggleGroup>;

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

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";
+export type { ToggleGroupRootProps as RootProps, ToggleGroupItemProps as ItemProps, } from "./types.js";

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";

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

@@ -1,3 +1 @@
-export { default as Root } from "./components/toggle-group.svelte";
-export { default as Item } from "./components/toggle-group-item.svelte";
-export type { ToggleGroupRootProps as RootProps, ToggleGroupItemProps as ItemProps, } from "./types.js";
+export * as ToggleGroup from "./exports.js";

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/toggle-group.svelte";
-export { default as Item } from "./components/toggle-group-item.svelte";
+export * as ToggleGroup from "./exports.js";

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

@@ -1,7 +1,7 @@
-import type { WritableBox } from "svelte-toolbelt";
+import { type WritableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 type ToggleGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -66,10 +66,10 @@ declare class ToggleGroupItemState {
         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 disabled: true | undefined;
         readonly "data-toggle-group-item": "";
         readonly onclick: () => void;

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

@@ -1,8 +1,8 @@
+import { useRefById } from "svelte-toolbelt";
 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";
+import { createContext } from "../../internal/create-context.js";
 const ROOT_ATTR = "data-toggle-group-root";
 const ITEM_ATTR = "data-toggle-group-item";
 class ToggleGroupBaseState {
@@ -98,6 +98,14 @@ 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);
+            }
+        });
     }
     toggleItem = () => {
         if (this.#isDisabled)
@@ -105,7 +113,9 @@ class ToggleGroupItemState {
         this.#root.toggleItem(this.#value.current, this.#id.current);
     };
     #onclick = () => {
-        this.toggleItem();
+        if (this.#isDisabled)
+            return;
+        this.#root.toggleItem(this.#value.current, this.#id.current);
     };
     #onkeydown = (e) => {
         if (this.#isDisabled)
@@ -121,14 +131,12 @@ class ToggleGroupItemState {
     };
     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",

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 = {
     /**
@@ -42,15 +42,15 @@ export type SingleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRoo
     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 +66,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,4 +1,4 @@
-import type { ButtonProps } from "../index.js";
+import type { ToolbarButtonProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToolbarButton: $$__sveltets_2_IsomorphicComponent<ButtonProps, {
+declare const ToolbarButton: $$__sveltets_2_IsomorphicComponent<ToolbarButtonProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ToolbarButton = InstanceType<typeof 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.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(),
@@ -17,7 +17,7 @@
 		child,
 		children,
 		...restProps
-	}: GroupProps = $props();
+	}: ToolbarGroupProps = $props();
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];

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

@@ -1,4 +1,4 @@
-import type { GroupProps } from "../index.js";
+import type { ToolbarGroupProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToolbarGroup: $$__sveltets_2_IsomorphicComponent<GroupProps, {
+declare const ToolbarGroup: $$__sveltets_2_IsomorphicComponent<ToolbarGroupProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type ToolbarGroup = InstanceType<typeof 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,4 +1,4 @@
-import type { LinkProps } from "../index.js";
+import type { ToolbarLinkProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ToolbarLink: $$__sveltets_2_IsomorphicComponent<LinkProps, {
+declare const ToolbarLink: $$__sveltets_2_IsomorphicComponent<ToolbarLinkProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type ToolbarLink = InstanceType<typeof 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),