bits-ui 2.3.0 → 2.4.0

package/dist/bits/index.d.ts

@@ -2,6 +2,7 @@ export { Accordion } from "./accordion/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export { Avatar } from "./avatar/index.js";
+export { BitsConfig, getBitsConfig } from "./utilities/config/index.js";
 export { Button } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";

package/dist/bits/index.js

@@ -2,6 +2,7 @@ export { Accordion } from "./accordion/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export { Avatar } from "./avatar/index.js";
+export { BitsConfig, getBitsConfig } from "./utilities/config/index.js";
 export { Button } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";

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

@@ -6,7 +6,6 @@ declare class LabelRootState {
     onmousedown(e: BitsMouseEvent): void;
     props: {
         readonly id: string;
-        readonly "data-label-root": "";
         readonly onmousedown: (e: BitsMouseEvent) => void;
     };
 }

package/dist/bits/label/label.svelte.js

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const ROOT_ATTR = "data-label-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const labelAttrs = createBitsAttrs({
+    component: "label",
+    parts: ["root"],
+});
 class LabelRootState {
     opts;
     constructor(opts) {
@@ -12,7 +16,7 @@ class LabelRootState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [ROOT_ATTR]: "",
+        [labelAttrs.root]: "",
         onmousedown: this.onmousedown,
         ...attachRef(this.opts.ref),
     }));

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -40,7 +40,6 @@ declare class LinkPreviewTriggerState {
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
         readonly role: "button";
-        readonly "data-link-preview-trigger": "";
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocus: (e: BitsFocusEvent) => void;
         readonly onblur: (_: BitsFocusEvent) => void;
@@ -69,7 +68,6 @@ declare class LinkPreviewContentState {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
-        readonly "data-link-preview-content": "";
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => void;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,12 +1,14 @@
 import { afterSleep, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
-const LINK_PREVIEW_CONTENT_ATTR = "data-link-preview-content";
-const LINK_PREVIEW_TRIGGER_ATTR = "data-link-preview-trigger";
+const linkPreviewAttrs = createBitsAttrs({
+    component: "link-preview",
+    parts: ["content", "trigger"],
+});
 class LinkPreviewRootState {
     opts;
     hasSelection = $state(false);
@@ -126,7 +128,7 @@ class LinkPreviewTriggerState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "aria-controls": this.root.contentNode?.id,
         role: "button",
-        [LINK_PREVIEW_TRIGGER_ATTR]: "",
+        [linkPreviewAttrs.trigger]: "",
         onpointerenter: this.onpointerenter,
         onfocus: this.onfocus,
         onblur: this.onblur,
@@ -197,7 +199,7 @@ class LinkPreviewContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        [LINK_PREVIEW_CONTENT_ATTR]: "",
+        [linkPreviewAttrs.content]: "",
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -54,7 +54,7 @@
 		}
 	}
 
-	const dataAttr = $derived(subContentState.parentMenu.root.getAttr("sub-content"));
+	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr("sub-content"));
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {

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

@@ -55,7 +55,7 @@
 		}
 	}
 
-	const dataAttr = $derived(subContentState.parentMenu.root.getAttr("sub-content"));
+	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr("sub-content"));
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {

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

@@ -17,13 +17,14 @@ export type MenuRootStateProps = ReadableBoxedValues<{
     onClose: AnyFn;
 };
 export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
+export declare const menuAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
 declare class MenuRootState {
     readonly opts: MenuRootStateProps;
     isUsingKeyboard: IsUsingKeyboard;
     ignoreCloseAutoFocus: boolean;
     isPointerInTransit: boolean;
     constructor(opts: MenuRootStateProps);
-    getAttr(name: string): string;
+    getBitsAttr: typeof menuAttrs.getAttr;
 }
 type MenuMenuStateProps = WritableBoxedValues<{
     open: boolean;

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

@@ -7,7 +7,7 @@ import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.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 { createBitsAttrs, getAriaChecked, getAriaDisabled, getAriaExpanded, getAriaOrientation, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { IsUsingKeyboard } from "../../index.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
@@ -25,6 +25,24 @@ export const MenuOpenEvent = new CustomEventDispatcher("bitsmenuopen", {
     bubbles: false,
     cancelable: true,
 });
+export const menuAttrs = createBitsAttrs({
+    component: "menu",
+    parts: [
+        "trigger",
+        "content",
+        "sub-trigger",
+        "item",
+        "group",
+        "group-heading",
+        "checkbox-group",
+        "checkbox-item",
+        "radio-group",
+        "radio-item",
+        "separator",
+        "sub-content",
+        "arrow",
+    ],
+});
 class MenuRootState {
     opts;
     isUsingKeyboard = new IsUsingKeyboard();
@@ -33,9 +51,9 @@ class MenuRootState {
     constructor(opts) {
         this.opts = opts;
     }
-    getAttr(name) {
-        return `data-${this.opts.variant.current}-${name}`;
-    }
+    getBitsAttr = (part) => {
+        return menuAttrs.getAttr(part, this.opts.variant.current);
+    };
 }
 class MenuMenuState {
     opts;
@@ -90,7 +108,7 @@ class MenuContentState {
             contentNode: () => this.parentMenu.contentNode,
             triggerNode: () => this.parentMenu.triggerNode,
             enabled: () => this.parentMenu.opts.open.current &&
-                Boolean(this.parentMenu.triggerNode?.hasAttribute(this.parentMenu.root.getAttr("sub-trigger"))),
+                Boolean(this.parentMenu.triggerNode?.hasAttribute(this.parentMenu.root.getBitsAttr("sub-trigger"))),
             onPointerExit: () => {
                 this.parentMenu.opts.open.current = false;
             },
@@ -104,7 +122,7 @@ class MenuContentState {
         }).handleTypeaheadSearch;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: box.with(() => this.parentMenu.contentNode),
-            candidateAttr: this.parentMenu.root.getAttr("item"),
+            candidateAttr: this.parentMenu.root.getBitsAttr("item"),
             loop: this.opts.loop,
             orientation: box.with(() => "vertical"),
         });
@@ -130,7 +148,7 @@ class MenuContentState {
         const node = this.parentMenu.contentNode;
         if (!node)
             return [];
-        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.getAttr("item")}]:not([data-disabled])`));
+        const candidates = Array.from(node.querySelectorAll(`[${this.parentMenu.root.getBitsAttr("item")}]:not([data-disabled])`));
         return candidates;
     }
     #isPointerMovingToSubmenu() {
@@ -193,7 +211,7 @@ class MenuContentState {
         const currentTarget = e.currentTarget;
         if (!isHTMLElement(target) || !isHTMLElement(currentTarget))
             return;
-        const isKeydownInside = target.closest(`[${this.parentMenu.root.getAttr("content")}]`)?.id ===
+        const isKeydownInside = target.closest(`[${this.parentMenu.root.getBitsAttr("content")}]`)?.id ===
             this.parentMenu.contentId.current;
         const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
         const isCharacterKey = e.key.length === 1;
@@ -240,7 +258,7 @@ class MenuContentState {
         return this.#isPointerMovingToSubmenu();
     }
     onItemLeave(e) {
-        if (e.currentTarget.hasAttribute(this.parentMenu.root.getAttr("sub-trigger")))
+        if (e.currentTarget.hasAttribute(this.parentMenu.root.getBitsAttr("sub-trigger")))
             return;
         if (this.#isPointerMovingToSubmenu() || this.parentMenu.root.isUsingKeyboard.current)
             return;
@@ -277,7 +295,7 @@ class MenuContentState {
         id: this.opts.id.current,
         role: "menu",
         "aria-orientation": getAriaOrientation("vertical"),
-        [this.parentMenu.root.getAttr("content")]: "",
+        [this.parentMenu.root.getBitsAttr("content")]: "",
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
         onkeydown: this.onkeydown,
         onblur: this.onblur,
@@ -356,7 +374,7 @@ class MenuItemSharedState {
         "aria-disabled": getAriaDisabled(this.opts.disabled.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-highlighted": this.#isFocused ? "" : undefined,
-        [this.content.parentMenu.root.getAttr("item")]: "",
+        [this.content.parentMenu.root.getBitsAttr("item")]: "",
         //
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
@@ -520,7 +538,7 @@ class MenuSubTriggerState {
         "aria-controls": this.submenu.opts.open.current
             ? this.submenu.contentId.current
             : undefined,
-        [this.submenu.root.getAttr("sub-trigger")]: "",
+        [this.submenu.root.getBitsAttr("sub-trigger")]: "",
         onclick: this.onclick,
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
@@ -570,7 +588,7 @@ class MenuCheckboxItemState {
         role: "menuitemcheckbox",
         "aria-checked": getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
         "data-state": getCheckedState(this.opts.checked.current),
-        [this.item.root.getAttr("checkbox-item")]: "",
+        [this.item.root.getBitsAttr("checkbox-item")]: "",
     }));
 }
 class MenuGroupState {
@@ -585,7 +603,7 @@ class MenuGroupState {
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.groupHeadingId,
-        [this.root.getAttr("group")]: "",
+        [this.root.getBitsAttr("group")]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -599,7 +617,7 @@ class MenuGroupHeadingState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [this.group.root.getAttr("group-heading")]: "",
+        [this.group.root.getBitsAttr("group-heading")]: "",
         ...attachRef(this.opts.ref, (v) => (this.group.groupHeadingId = v?.id)),
     }));
 }
@@ -613,7 +631,7 @@ class MenuSeparatorState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [this.root.getAttr("separator")]: "",
+        [this.root.getBitsAttr("separator")]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -623,7 +641,7 @@ class MenuArrowState {
         this.root = root;
     }
     props = $derived.by(() => ({
-        [this.root.getAttr("arrow")]: "",
+        [this.root.getBitsAttr("arrow")]: "",
     }));
 }
 class MenuRadioGroupState {
@@ -641,7 +659,7 @@ class MenuRadioGroupState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.getAttr("radio-group")]: "",
+        [this.root.getBitsAttr("radio-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         ...attachRef(this.opts.ref),
@@ -661,7 +679,7 @@ class MenuRadioItemState {
         this.group.setValue(this.opts.value.current);
     }
     props = $derived.by(() => ({
-        [this.group.root.getAttr("radio-item")]: "",
+        [this.group.root.getBitsAttr("radio-item")]: "",
         ...this.item.props,
         role: "menuitemradio",
         "aria-checked": getAriaChecked(this.isChecked, false),
@@ -723,7 +741,7 @@ class DropdownMenuTriggerState {
         "aria-controls": this.#ariaControls,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
-        [this.parentMenu.root.getAttr("trigger")]: "",
+        [this.parentMenu.root.getBitsAttr("trigger")]: "",
         //
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
@@ -844,7 +862,7 @@ class MenuCheckboxGroupState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.getAttr("checkbox-group")]: "",
+        [this.root.getBitsAttr("checkbox-group")]: "",
         role: "group",
         "aria-labelledby": this.groupHeadingId,
         ...attachRef(this.opts.ref),

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

@@ -38,7 +38,6 @@ declare class MenubarRootState {
     props: {
         readonly id: string;
         readonly role: "menubar";
-        readonly "data-menubar-root": "";
     };
 }
 type MenubarMenuStateProps = ReadableBoxedValues<{
@@ -87,7 +86,6 @@ declare class MenubarTriggerState {
         readonly "data-menu-value": string;
         readonly disabled: true | undefined;
         readonly tabindex: number;
-        readonly "data-menubar-trigger": "";
         readonly onpointerdown: PointerEventHandler<HTMLElement>;
         readonly onpointerenter: PointerEventHandler<HTMLElement>;
         readonly onkeydown: KeyboardEventHandler<HTMLElement>;
@@ -117,11 +115,7 @@ declare class MenubarContentState {
         readonly id: string;
         readonly "aria-labelledby": string | undefined;
         readonly style: {
-            readonly "--bits-menubar-content-transform-origin": "var(--bits-floating-transform-origin)";
-            readonly "--bits-menubar-content-available-width": "var(--bits-floating-available-width)";
-            readonly "--bits-menubar-content-available-height": "var(--bits-floating-available-height)";
-            readonly "--bits-menubar-anchor-width": "var(--bits-floating-anchor-width)";
-            readonly "--bits-menubar-anchor-height": "var(--bits-floating-anchor-height)";
+            [x: string]: string;
         };
         readonly onkeydown: KeyboardEventHandler<HTMLElement>;
         readonly "data-menu-content": "";

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

@@ -1,13 +1,16 @@
 import { afterTick, box, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.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";
-const MENUBAR_ROOT_ATTR = "data-menubar-root";
-const MENUBAR_TRIGGER_ATTR = "data-menubar-trigger";
+import { getFloatingContentCSSVars } from "../../internal/floating-svelte/floating-utils.svelte";
+const menubarAttrs = createBitsAttrs({
+    component: "menubar",
+    parts: ["root", "trigger", "content"],
+});
 class MenubarRootState {
     opts;
     rovingFocusGroup;
@@ -18,7 +21,7 @@ class MenubarRootState {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: this.opts.ref,
-            candidateAttr: MENUBAR_TRIGGER_ATTR,
+            candidateAttr: menubarAttrs.trigger,
             loop: this.opts.loop,
             orientation: box.with(() => "horizontal"),
         });
@@ -60,7 +63,7 @@ class MenubarRootState {
         const node = this.opts.ref.current;
         if (!node)
             return [];
-        return Array.from(node.querySelectorAll(`[${MENUBAR_TRIGGER_ATTR}]`));
+        return Array.from(node.querySelectorAll(menubarAttrs.selector("trigger")));
     };
     onMenuOpen = (id, triggerId) => {
         this.updateValue(id);
@@ -75,7 +78,7 @@ class MenubarRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "menubar",
-        [MENUBAR_ROOT_ATTR]: "",
+        [menubarAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -185,7 +188,7 @@ class MenubarTriggerState {
         "data-menu-value": this.menu.opts.value.current,
         disabled: this.opts.disabled.current ? true : undefined,
         tabindex: this.#tabIndex,
-        [MENUBAR_TRIGGER_ATTR]: "",
+        [menubarAttrs.trigger]: "",
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onkeydown: this.onkeydown,
@@ -262,15 +265,10 @@ class MenubarContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "aria-labelledby": this.menu.triggerId,
-        style: {
-            "--bits-menubar-content-transform-origin": "var(--bits-floating-transform-origin)",
-            "--bits-menubar-content-available-width": "var(--bits-floating-available-width)",
-            "--bits-menubar-content-available-height": "var(--bits-floating-available-height)",
-            "--bits-menubar-anchor-width": "var(--bits-floating-anchor-width)",
-            "--bits-menubar-anchor-height": "var(--bits-floating-anchor-height)",
-        },
+        style: getFloatingContentCSSVars("menubar"),
         onkeydown: this.onkeydown,
         "data-menu-content": "",
+        [menubarAttrs.content]: "",
         ...attachRef(this.opts.ref, (v) => (this.menu.contentNode = v)),
     }));
     popperProps = {

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

@@ -17,7 +17,6 @@ declare class MeterRootState {
         readonly "data-value": number;
         readonly "data-max": number;
         readonly "data-min": number;
-        readonly "data-meter-root": "";
     };
 }
 export declare function useMeterRootState(props: MeterRootStateProps): MeterRootState;

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

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const METER_ROOT_ATTR = "data-meter-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const meterAttrs = createBitsAttrs({
+    component: "meter",
+    parts: ["root"],
+});
 class MeterRootState {
     opts;
     constructor(opts) {
@@ -14,7 +18,7 @@ class MeterRootState {
         "data-value": this.opts.value.current,
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
-        [METER_ROOT_ATTR]: "",
+        [meterAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }

package/dist/bits/navigation-menu/navigation-menu.svelte.d.ts

@@ -10,6 +10,7 @@ import { type Direction, type Orientation } from "../../shared/index.js";
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent } from "../../internal/types.js";
 import { useRovingFocus } from "../../internal/use-roving-focus.svelte.js";
 import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
+declare const navigationMenuAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "sub", "item", "list", "trigger", "content", "link", "viewport", "menu", "indicator"]>;
 type NavigationMenuProviderStateProps = ReadableBoxedValues<{
     dir: Direction;
     orientation: Orientation;
@@ -62,8 +63,6 @@ declare class NavigationMenuRootState {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly dir: Direction;
-        readonly "data-navigation-menu-root": "";
-        readonly "data-navigation-menu": "";
     };
 }
 type NavigationMenuSubStateProps = WithRefProps<WritableBoxedValues<{
@@ -81,8 +80,6 @@ declare class NavigationMenuSubState {
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-navigation-menu-sub": "";
-        readonly "data-navigation-menu": "";
     };
 }
 type NavigationMenuListStateProps = WithRefProps;
@@ -102,7 +99,6 @@ declare class NavigationMenuListState {
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-navigation-menu-list": "";
     };
 }
 type NavigationMenuItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -132,8 +128,8 @@ export declare class NavigationMenuItemState {
     onRootContentClose: () => void;
     onContentFocusOutside: () => void;
     props: {
+        readonly [navigationMenuAttrs.item]: "";
         readonly id: string;
-        readonly "data-navigation-menu-item": "";
     };
 }
 type NavigationMenuTriggerStateProps = WithRefProps & ReadableBoxedValues<{
@@ -170,7 +166,6 @@ declare class NavigationMenuTriggerState {
         readonly "data-value": string;
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly "data-navigation-menu-trigger": "";
         readonly onpointermove: PointerEventHandler<HTMLElement>;
         readonly onpointerleave: PointerEventHandler<HTMLElement>;
         readonly onpointerenter: (_: BitsPointerEvent<HTMLButtonElement>) => void;
@@ -219,7 +214,6 @@ declare class NavigationMenuLinkState {
         readonly onblur: (_: BitsFocusEvent) => void;
         readonly onpointerenter: PointerEventHandler<HTMLAnchorElement>;
         readonly onpointermove: PointerEventHandler<HTMLElement>;
-        readonly "data-navigation-menu-link": "";
     };
 }
 type NavigationMenuIndicatorStateProps = WithRefProps;
@@ -260,7 +254,6 @@ declare class NavigationMenuIndicatorImplState {
             readonly transform: string;
             readonly position: "absolute";
         };
-        readonly "data-navigation-menu-indicator": "";
     };
 }
 type NavigationMenuContentStateProps = WithRefProps;
@@ -308,7 +301,6 @@ declare class NavigationMenuContentImplState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-state": "open" | "closed";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly "data-navigation-menu-content": "";
     };
 }
 declare class NavigationMenuViewportState {
@@ -334,7 +326,6 @@ declare class NavigationMenuViewportState {
             readonly "--bits-navigation-menu-viewport-width": string | undefined;
             readonly "--bits-navigation-menu-viewport-height": string | undefined;
         };
-        readonly "data-navigation-menu-viewport": "";
         readonly onpointerenter: () => void;
         readonly onpointerleave: () => void;
     };