bits-ui 2.2.1 → 2.3.1

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;
     };

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

@@ -7,7 +7,7 @@ import { Context, useDebounce, watch } from "runed";
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { useId } from "../../shared/index.js";
-import { getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { noop } from "../../internal/noop.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { kbd } from "../../internal/kbd.js";
@@ -17,16 +17,21 @@ import { useArrowNavigation } from "../../internal/use-arrow-navigation.js";
 import { boxAutoReset } from "../../internal/box-auto-reset.svelte.js";
 import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { isElement } from "../../internal/is.js";
-const NAVIGATION_MENU_ROOT_ATTR = "data-navigation-menu-root";
-const NAVIGATION_MENU_ATTR = "data-navigation-menu";
-const NAVIGATION_MENU_SUB_ATTR = "data-navigation-menu-sub";
-const NAVIGATION_MENU_ITEM_ATTR = "data-navigation-menu-item";
-const NAVIGATION_MENU_INDICATOR_ATTR = "data-navigation-menu-indicator";
-const NAVIGATION_MENU_LIST_ATTR = "data-navigation-menu-list";
-const NAVIGATION_MENU_TRIGGER_ATTR = "data-navigation-menu-trigger";
-const NAVIGATION_MENU_CONTENT_ATTR = "data-navigation-menu-content";
-const NAVIGATION_MENU_LINK_ATTR = "data-navigation-menu-link";
-const NAVIGATION_MENU_VIEWPORT_ATTR = "data-navigation-menu-viewport";
+const navigationMenuAttrs = createBitsAttrs({
+    component: "navigation-menu",
+    parts: [
+        "root",
+        "sub",
+        "item",
+        "list",
+        "trigger",
+        "content",
+        "link",
+        "viewport",
+        "menu",
+        "indicator",
+    ],
+});
 class NavigationMenuProviderState {
     opts;
     indicatorTrackRef = box(null);
@@ -135,8 +140,8 @@ class NavigationMenuRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         dir: this.opts.dir.current,
-        [NAVIGATION_MENU_ROOT_ATTR]: "",
-        [NAVIGATION_MENU_ATTR]: "",
+        [navigationMenuAttrs.root]: "",
+        [navigationMenuAttrs.menu]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -173,8 +178,8 @@ class NavigationMenuSubState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [NAVIGATION_MENU_SUB_ATTR]: "",
-        [NAVIGATION_MENU_ATTR]: "",
+        [navigationMenuAttrs.sub]: "",
+        [navigationMenuAttrs.menu]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -191,7 +196,7 @@ class NavigationMenuListState {
         this.context = context;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: opts.ref,
-            candidateSelector: `[${NAVIGATION_MENU_TRIGGER_ATTR}]:not([data-disabled]), [${NAVIGATION_MENU_LINK_ATTR}]:not([data-disabled])`,
+            candidateSelector: `${navigationMenuAttrs.selector("trigger")}:not([data-disabled]), ${navigationMenuAttrs.selector("link")}:not([data-disabled])`,
             loop: box.with(() => false),
             orientation: this.context.opts.orientation,
         });
@@ -210,7 +215,7 @@ class NavigationMenuListState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
-        [NAVIGATION_MENU_LIST_ATTR]: "",
+        [navigationMenuAttrs.list]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -254,7 +259,7 @@ export class NavigationMenuItemState {
     onContentFocusOutside = this.#handleContentExit;
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [NAVIGATION_MENU_ITEM_ATTR]: "",
+        [navigationMenuAttrs.item]: "",
     }));
 }
 class NavigationMenuTriggerState {
@@ -347,7 +352,7 @@ class NavigationMenuTriggerState {
         "data-value": this.itemContext.opts.value.current,
         "aria-expanded": getAriaExpanded(this.open),
         "aria-controls": this.itemContext.contentId,
-        [NAVIGATION_MENU_TRIGGER_ATTR]: "",
+        [navigationMenuAttrs.trigger]: "",
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
         onpointerenter: this.onpointerenter,
@@ -428,7 +433,7 @@ class NavigationMenuLinkState {
         onblur: this.onblur,
         onpointerenter: this.onpointerenter,
         onpointermove: this.onpointermove,
-        [NAVIGATION_MENU_LINK_ATTR]: "",
+        [navigationMenuAttrs.link]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -489,7 +494,7 @@ class NavigationMenuIndicatorImplState {
                     transform: `translateY(${this.position?.offset}px)`,
                 }),
         },
-        [NAVIGATION_MENU_INDICATOR_ATTR]: "",
+        [navigationMenuAttrs.indicator]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -632,7 +637,7 @@ class NavigationMenuContentImplState {
         const target = e.target;
         if (!isElement(target))
             return;
-        if (target.closest(`[${NAVIGATION_MENU_ATTR}]`) !==
+        if (target.closest(navigationMenuAttrs.selector("menu")) !==
             this.context.opts.rootNavigationMenuRef.current)
             return;
         const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
@@ -669,7 +674,7 @@ class NavigationMenuContentImplState {
             return;
         const newSelectedElement = useArrowNavigation(e, activeEl, undefined, {
             itemsArray: candidates,
-            attributeName: `[${NAVIGATION_MENU_LINK_ATTR}]`,
+            candidateSelector: navigationMenuAttrs.selector("link"),
             loop: false,
             enableIgnoredElement: true,
         });
@@ -688,7 +693,7 @@ class NavigationMenuContentImplState {
         "data-orientation": getDataOrientation(this.context.opts.orientation.current),
         "data-state": getDataOpenClosed(this.context.opts.value.current === this.itemContext.opts.value.current),
         onkeydown: this.onkeydown,
-        [NAVIGATION_MENU_CONTENT_ATTR]: "",
+        [navigationMenuAttrs.content]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -745,7 +750,7 @@ class NavigationMenuViewportState {
             "--bits-navigation-menu-viewport-width": this.viewportWidth,
             "--bits-navigation-menu-viewport-height": this.viewportHeight,
         },
-        [NAVIGATION_MENU_VIEWPORT_ATTR]: "",
+        [navigationMenuAttrs.viewport]: "",
         onpointerenter: this.context.onContentEnter,
         onpointerleave: this.context.onContentLeave,
         ...attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v)),

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

@@ -38,7 +38,6 @@ declare class PaginationRootState {
     props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-pagination-root": "";
     };
 }
 type PaginationPageStateProps = WithRefProps<ReadableBoxedValues<{
@@ -57,7 +56,6 @@ declare class PaginationPageState {
         readonly "aria-label": `Page ${number}`;
         readonly "data-value": `${number}`;
         readonly "data-selected": "" | undefined;
-        readonly "data-pagination-page": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
@@ -76,8 +74,6 @@ declare class PaginationButtonState {
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
-        readonly "data-pagination-prev": "" | undefined;
-        readonly "data-pagination-next": "" | undefined;
         readonly disabled: boolean;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;

package/dist/bits/pagination/pagination.svelte.js

@@ -1,14 +1,14 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getDataOrientation } from "../../internal/attrs.js";
+import { createBitsAttrs, getDataOrientation } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
 import { kbd } from "../../internal/kbd.js";
 import { getDirectionalKeys } from "../../internal/get-directional-keys.js";
 import { useId } from "../../shared/index.js";
-const PAGINATION_ROOT_ATTR = "data-pagination-root";
-const PAGINATION_PAGE_ATTR = "data-pagination-page";
-const PAGINATION_PREV_ATTR = "data-pagination-prev";
-const PAGINATION_NEXT_ATTR = "data-pagination-next";
+const paginationAttrs = createBitsAttrs({
+    component: "pagination",
+    parts: ["root", "page", "prev", "next"],
+});
 class PaginationRootState {
     opts;
     totalPages = $derived.by(() => {
@@ -42,7 +42,7 @@ class PaginationRootState {
         const node = this.opts.ref.current;
         if (!node)
             return;
-        return node.querySelector(`[data-pagination-${type}]`);
+        return node.querySelector(paginationAttrs.selector(type));
     }
     hasPrevPage = $derived.by(() => this.opts.page.current > 1);
     hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
@@ -60,7 +60,7 @@ class PaginationRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [PAGINATION_ROOT_ATTR]: "",
+        [paginationAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -95,7 +95,7 @@ class PaginationPageState {
         "aria-label": `Page ${this.opts.page.current.value}`,
         "data-value": `${this.opts.page.current.value}`,
         "data-selected": this.#isSelected ? "" : undefined,
-        [PAGINATION_PAGE_ATTR]: "",
+        [paginationAttrs.page]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -141,8 +141,7 @@ class PaginationButtonState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [PAGINATION_PREV_ATTR]: this.opts.type === "prev" ? "" : undefined,
-        [PAGINATION_NEXT_ATTR]: this.opts.type === "next" ? "" : undefined,
+        [paginationAttrs[this.opts.type]]: "",
         disabled: this.#isDisabled,
         //
         onclick: this.onclick,

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -27,7 +27,6 @@ declare class PinInputRootState {
     onkeydown: (e: BitsKeyboardEvent) => void;
     rootProps: {
         readonly id: string;
-        readonly "data-pin-input-root": "";
         readonly style: {
             position: string;
             cursor: string;
@@ -108,7 +107,6 @@ declare class PinInputCellState {
     constructor(opts: PinInputCellStateProps);
     props: {
         readonly id: string;
-        readonly "data-pin-input-cell": "";
         readonly "data-active": "" | undefined;
         readonly "data-inactive": "" | undefined;
     };