bits-ui 2.6.2 → 2.8.0

package/dist/bits/menubar/menubar.svelte.js

@@ -1,17 +1,22 @@
-import { afterTick, box, attachRef } from "svelte-toolbelt";
+import { afterTick, box, attachRef, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { wrapArray } from "../../internal/arrays.js";
 import { FocusScopeContext, } from "../utilities/focus-scope/use-focus-scope.svelte.js";
 import { onMount } from "svelte";
 import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const menubarAttrs = createBitsAttrs({
     component: "menubar",
     parts: ["root", "trigger", "content"],
 });
-class MenubarRootState {
+const MenubarRootContext = new Context("Menubar.Root");
+const MenubarMenuContext = new Context("Menubar.Menu");
+export class MenubarRootState {
+    static create(opts) {
+        return MenubarRootContext.set(new MenubarRootState(opts));
+    }
     opts;
     rovingFocusGroup;
     wasOpenedByKeyboard = $state(false);
@@ -19,7 +24,7 @@ class MenubarRootState {
     valueToChangeHandler = new Map();
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: menubarAttrs.trigger,
             loop: this.opts.loop,
@@ -82,7 +87,10 @@ class MenubarRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-class MenubarMenuState {
+export class MenubarMenuState {
+    static create(opts) {
+        return MenubarMenuContext.set(new MenubarMenuState(opts, MenubarRootContext.get()));
+    }
     opts;
     root;
     open = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
@@ -113,7 +121,10 @@ class MenubarMenuState {
         this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? "");
     }
 }
-class MenubarTriggerState {
+export class MenubarTriggerState {
+    static create(opts) {
+        return new MenubarTriggerState(opts, MenubarMenuContext.get());
+    }
     opts;
     menu;
     root;
@@ -197,7 +208,10 @@ class MenubarTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.menu.triggerNode = v)),
     }));
 }
-class MenubarContentState {
+export class MenubarContentState {
+    static create(opts) {
+        return new MenubarContentState(opts, MenubarMenuContext.get());
+    }
     opts;
     menu;
     root;
@@ -278,17 +292,3 @@ class MenubarContentState {
         onOpenAutoFocus: this.onOpenAutoFocus,
     };
 }
-const MenubarRootContext = new Context("Menubar.Root");
-const MenubarMenuContext = new Context("Menubar.Menu");
-export function useMenubarRoot(props) {
-    return MenubarRootContext.set(new MenubarRootState(props));
-}
-export function useMenubarMenu(props) {
-    return MenubarMenuContext.set(new MenubarMenuState(props, MenubarRootContext.get()));
-}
-export function useMenubarTrigger(props) {
-    return new MenubarTriggerState(props, MenubarMenuContext.get());
-}
-export function useMenubarContent(props) {
-    return new MenubarContentState(props, MenubarMenuContext.get());
-}

package/dist/bits/meter/components/meter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MeterRootProps } from "../types.js";
-	import { useMeterRootState } from "../meter.svelte.js";
+	import { MeterRootState } from "../meter.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: MeterRootProps = $props();
 
-	const rootState = useMeterRootState({
+	const rootState = MeterRootState.create({
 		value: box.with(() => value),
 		max: box.with(() => max),
 		min: box.with(() => min),

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

@@ -1,14 +1,16 @@
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
-type MeterRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { WithRefOpts } from "../../internal/types.js";
+interface MeterRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: number;
     max: number;
     min: number;
-}>>;
-declare class MeterRootState {
-    readonly opts: MeterRootStateProps;
-    constructor(opts: MeterRootStateProps);
-    props: {
+}> {
+}
+export declare class MeterRootState {
+    static create(opts: MeterRootStateOpts): MeterRootState;
+    readonly opts: MeterRootStateOpts;
+    constructor(opts: MeterRootStateOpts);
+    readonly props: {
         readonly role: "meter";
         readonly value: number;
         readonly "aria-valuemin": number;
@@ -19,5 +21,4 @@ declare class MeterRootState {
         readonly "data-min": number;
     };
 }
-export declare function useMeterRootState(props: MeterRootStateProps): MeterRootState;
 export {};

package/dist/bits/meter/meter.svelte.js

@@ -4,7 +4,10 @@ const meterAttrs = createBitsAttrs({
     component: "meter",
     parts: ["root"],
 });
-class MeterRootState {
+export class MeterRootState {
+    static create(opts) {
+        return new MeterRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -22,6 +25,3 @@ class MeterRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function useMeterRootState(props) {
-    return new MeterRootState(props);
-}

package/dist/bits/navigation-menu/components/navigation-menu-content-impl.svelte

@@ -5,7 +5,7 @@
 	import {
 		NavigationMenuItemContext,
 		NavigationMenuItemState,
-		useNavigationMenuContentImpl,
+		NavigationMenuContentImplState,
 	} from "../navigation-menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -33,7 +33,7 @@
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 	} = $props();
 
-	const contentImplState = useNavigationMenuContentImpl(
+	const contentImplState = NavigationMenuContentImplState.create(
 		{
 			id: box.with(() => id),
 			ref: box.with(

package/dist/bits/navigation-menu/components/navigation-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useNavigationMenuContent } from "../navigation-menu.svelte.js";
+	import { NavigationMenuContentState } from "../navigation-menu.svelte.js";
 	import NavigationMenuContentImpl from "./navigation-menu-content-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import type { NavigationMenuContentProps } from "../../../types.js";
@@ -19,7 +19,7 @@
 		...restProps
 	}: NavigationMenuContentProps = $props();
 
-	const contentState = useNavigationMenuContent({
+	const contentState = NavigationMenuContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -35,7 +35,7 @@
 	disabled={!contentState.context.viewportRef.current}
 >
 	<PresenceLayer
-		present={forceMount || contentState.open || contentState.isLastActiveValue}
+		open={forceMount || contentState.open || contentState.isLastActiveValue}
 		ref={contentState.opts.ref}
 	>
 		{#snippet presence()}

package/dist/bits/navigation-menu/components/navigation-menu-indicator-impl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
-	import { useNavigationMenuIndicatorImpl } from "../navigation-menu.svelte.js";
+	import { NavigationMenuIndicatorImplState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -14,7 +14,7 @@
 		...restProps
 	}: NavigationMenuIndicatorProps = $props();
 
-	const indicatorState = useNavigationMenuIndicatorImpl({
+	const indicatorState = NavigationMenuIndicatorImplState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/navigation-menu/components/navigation-menu-indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuIndicatorProps } from "../types.js";
-	import { useNavigationMenuIndicator } from "../navigation-menu.svelte.js";
+	import { NavigationMenuIndicatorState } from "../navigation-menu.svelte.js";
 	import NavigationMenuIndicatorImpl from "./navigation-menu-indicator-impl.svelte";
 	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
@@ -18,13 +18,13 @@
 		...restProps
 	}: NavigationMenuIndicatorProps = $props();
 
-	const indicatorState = useNavigationMenuIndicator();
+	const indicatorState = NavigationMenuIndicatorState.create();
 	const mergedProps = $derived(mergeProps(restProps));
 </script>
 
 {#if indicatorState.context.indicatorTrackRef.current}
 	<Portal to={indicatorState.context.indicatorTrackRef.current}>
-		<PresenceLayer present={forceMount || indicatorState.isVisible} ref={box.with(() => ref)}>
+		<PresenceLayer open={forceMount || indicatorState.isVisible} ref={box.with(() => ref)}>
 			{#snippet presence()}
 				<NavigationMenuIndicatorImpl {...mergedProps} {children} {child} {id} bind:ref />
 			{/snippet}

package/dist/bits/navigation-menu/components/navigation-menu-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuItemProps } from "../types.js";
-	import { useNavigationMenuItem } from "../navigation-menu.svelte.js";
+	import { NavigationMenuItemState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: NavigationMenuItemProps = $props();
 
-	const itemState = useNavigationMenuItem({
+	const itemState = NavigationMenuItemState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/navigation-menu/components/navigation-menu-link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuLinkProps } from "../types.js";
-	import { useNavigationMenuLink } from "../navigation-menu.svelte.js";
+	import { NavigationMenuLinkState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: NavigationMenuLinkProps = $props();
 
-	const linkState = useNavigationMenuLink({
+	const linkState = NavigationMenuLinkState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/navigation-menu/components/navigation-menu-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuListProps } from "../types.js";
-	import { useNavigationMenuList } from "../navigation-menu.svelte.js";
+	import { NavigationMenuListState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: NavigationMenuListProps = $props();
 
-	const listState = useNavigationMenuList({
+	const listState = NavigationMenuListState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/navigation-menu/components/navigation-menu-sub.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuSubProps } from "../types.js";
-	import { useNavigationMenuSub } from "../navigation-menu.svelte.js";
+	import { NavigationMenuSubState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -18,7 +18,7 @@
 		...restProps
 	}: NavigationMenuSubProps = $props();
 
-	const rootState = useNavigationMenuSub({
+	const rootState = NavigationMenuSubState.create({
 		id: box.with(() => id),
 		value: box.with(
 			() => value,

package/dist/bits/navigation-menu/components/navigation-menu-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuTriggerProps } from "../types.js";
-	import { useNavigationMenuTrigger } from "../navigation-menu.svelte.js";
+	import { NavigationMenuTriggerState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
@@ -17,7 +17,7 @@
 		...restProps
 	}: NavigationMenuTriggerProps = $props();
 
-	const triggerState = useNavigationMenuTrigger({
+	const triggerState = NavigationMenuTriggerState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(

package/dist/bits/navigation-menu/components/navigation-menu-viewport.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { NavigationMenuViewportProps } from "../types.js";
-	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
+	import { NavigationMenuViewportState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import { box, mergeProps } from "svelte-toolbelt";
@@ -17,7 +17,7 @@
 		...restProps
 	}: NavigationMenuViewportProps = $props();
 
-	const viewportState = useNavigationMenuViewport({
+	const viewportState = NavigationMenuViewportState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -28,7 +28,7 @@
 	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
 </script>
 
-<PresenceLayer present={forceMount || viewportState.open} ref={viewportState.opts.ref}>
+<PresenceLayer open={forceMount || viewportState.open} ref={viewportState.opts.ref}>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergedProps })}

package/dist/bits/navigation-menu/components/navigation-menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { NavigationMenuRootProps } from "../types.js";
-	import { useNavigationMenuRoot } from "../navigation-menu.svelte.js";
+	import { NavigationMenuRootState } from "../navigation-menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -21,7 +21,7 @@
 		...restProps
 	}: NavigationMenuRootProps = $props();
 
-	const rootState = useNavigationMenuRoot({
+	const rootState = NavigationMenuRootState.create({
 		id: box.with(() => id),
 		value: box.with(
 			() => value,