bits-ui 2.2.1 → 2.3.1

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

@@ -48,7 +48,6 @@ declare abstract class AccordionBaseState {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
-        readonly "data-accordion-root": "";
     };
 }
 export declare class AccordionSingleState extends AccordionBaseState {
@@ -77,7 +76,6 @@ export declare class AccordionItemState {
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-accordion-item": "";
     };
 }
 declare class AccordionTriggerState {
@@ -95,7 +93,6 @@ declare class AccordionTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-accordion-trigger": "";
         readonly tabindex: 0;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -115,7 +112,6 @@ declare class AccordionContentState {
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-accordion-content": "";
         readonly style: {
             readonly "--bits-accordion-content-height": `${number}px`;
             readonly "--bits-accordion-content-width": `${number}px`;
@@ -133,7 +129,6 @@ declare class AccordionHeaderState {
         readonly "data-heading-level": 1 | 2 | 3 | 4 | 6 | 5;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-accordion-header": "";
     };
 }
 export declare function useAccordionRoot(props: InitAccordionProps): AccordionState;

package/dist/bits/accordion/accordion.svelte.js

@@ -3,14 +3,11 @@ import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-// Constants
-const ACCORDION_ATTRS = {
-    ROOT: "data-accordion-root",
-    TRIGGER: "data-accordion-trigger",
-    CONTENT: "data-accordion-content",
-    ITEM: "data-accordion-item",
-    HEADER: "data-accordion-header",
-};
+import { createBitsAttrs } from "../../internal/attrs.js";
+const accordionAttrs = createBitsAttrs({
+    component: "accordion",
+    parts: ["root", "trigger", "content", "item", "header"],
+});
 // Base class
 class AccordionBaseState {
     opts;
@@ -19,7 +16,7 @@ class AccordionBaseState {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: this.opts.ref,
-            candidateAttr: ACCORDION_ATTRS.TRIGGER,
+            candidateAttr: accordionAttrs.trigger,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
@@ -28,7 +25,7 @@ class AccordionBaseState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        [ACCORDION_ATTRS.ROOT]: "",
+        [accordionAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -78,7 +75,7 @@ export class AccordionItemState {
         "data-state": getDataOpenClosed(this.isActive),
         "data-disabled": getDataDisabled(this.isDisabled),
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        [ACCORDION_ATTRS.ITEM]: "",
+        [accordionAttrs.item]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -120,7 +117,7 @@ class AccordionTriggerState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-state": getDataOpenClosed(this.itemState.isActive),
         "data-orientation": getDataOrientation(this.#root.opts.orientation.current),
-        [ACCORDION_ATTRS.TRIGGER]: "",
+        [accordionAttrs.trigger]: "",
         tabindex: 0,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -179,7 +176,7 @@ class AccordionContentState {
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-disabled": getDataDisabled(this.item.isDisabled),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
-        [ACCORDION_ATTRS.CONTENT]: "",
+        [accordionAttrs.content]: "",
         style: {
             "--bits-accordion-content-height": `${this.#dimensions.height}px`,
             "--bits-accordion-content-width": `${this.#dimensions.width}px`,
@@ -202,7 +199,7 @@ class AccordionHeaderState {
         "data-heading-level": this.opts.level.current,
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
-        [ACCORDION_ATTRS.HEADER]: "",
+        [accordionAttrs.header]: "",
         ...attachRef(this.opts.ref),
     }));
 }

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -22,7 +22,6 @@ declare class AspectRatioRootState {
             readonly bottom: 0;
             readonly left: 0;
         };
-        readonly "data-aspect-ratio-root": "";
     };
 }
 export declare function useAspectRatioRoot(props: AspectRatioRootStateProps): AspectRatioRootState;

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const aspectRatioAttrs = createBitsAttrs({
+    component: "aspect-ratio",
+    parts: ["root"],
+});
 class AspectRatioRootState {
     opts;
     constructor(opts) {
@@ -21,7 +25,7 @@ class AspectRatioRootState {
             bottom: 0,
             left: 0,
         },
-        [ASPECT_RATIO_ROOT_ATTR]: "",
+        [aspectRatioAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -20,7 +20,6 @@ declare class AvatarRootState {
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {
         readonly id: string;
-        readonly "data-avatar-root": "";
         readonly "data-status": AvatarImageLoadingStatus;
     };
 }
@@ -42,7 +41,6 @@ declare class AvatarImageState {
             readonly display: "none" | "block";
         };
         readonly "data-status": AvatarImageLoadingStatus;
-        readonly "data-avatar-image": "";
         readonly src: AvatarImageSrc;
         readonly crossorigin: "" | "anonymous" | "use-credentials" | null | undefined;
         readonly referrerpolicy: globalThis.ReferrerPolicy | null | undefined;
@@ -64,7 +62,6 @@ declare class AvatarFallbackState {
             display: string;
         } | undefined;
         readonly "data-status": AvatarImageLoadingStatus;
-        readonly "data-avatar-fallback": "";
     };
 }
 export declare function useAvatarRoot(props: AvatarRootStateProps): AvatarRootState;

package/dist/bits/avatar/avatar.svelte.js

@@ -1,9 +1,11 @@
 import { untrack } from "svelte";
 import { DOMContext, attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-const AVATAR_ROOT_ATTR = "data-avatar-root";
-const AVATAR_IMAGE_ATTR = "data-avatar-image";
-const AVATAR_FALLBACK_ATTR = "data-avatar-fallback";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const avatarAttrs = createBitsAttrs({
+    component: "avatar",
+    parts: ["root", "image", "fallback"],
+});
 class AvatarRootState {
     opts;
     domContext;
@@ -37,7 +39,7 @@ class AvatarRootState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [AVATAR_ROOT_ATTR]: "",
+        [avatarAttrs.root]: "",
         "data-status": this.opts.loadingStatus.current,
         ...attachRef(this.opts.ref),
     }));
@@ -64,7 +66,7 @@ class AvatarImageState {
             display: this.root.opts.loadingStatus.current === "loaded" ? "block" : "none",
         },
         "data-status": this.root.opts.loadingStatus.current,
-        [AVATAR_IMAGE_ATTR]: "",
+        [avatarAttrs.image]: "",
         src: this.opts.src.current,
         crossorigin: this.opts.crossOrigin.current,
         referrerpolicy: this.opts.referrerPolicy.current,
@@ -82,7 +84,7 @@ class AvatarFallbackState {
     props = $derived.by(() => ({
         style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
-        [AVATAR_FALLBACK_ATTR]: "",
+        [avatarAttrs.fallback]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -7,7 +7,7 @@ import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../inte
 import type { DateMatcher, Month } from "../../shared/index.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
-import { type CalendarParts } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs } from "../../internal/date-time/calendar-helpers.svelte.js";
 import type { WeekStartsOn } from "../../shared/date/types.js";
 type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateValue | undefined | DateValue[];
@@ -86,7 +86,7 @@ export declare class CalendarRootState {
         months: Month<DateValue>[];
         weekdays: string[];
     };
-    getBitsAttr(part: CalendarParts): string;
+    getBitsAttr: (typeof calendarAttrs)["getAttr"];
     props: {
         readonly onkeydown: (event: BitsKeyboardEvent) => void;
         readonly id: string;

package/dist/bits/calendar/calendar.svelte.js

@@ -7,7 +7,7 @@ import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDa
 import { useId } from "../../internal/use-id.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs, createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { getDateValueType, isBefore, toDate } from "../../internal/date-time/utils.js";
 export class CalendarRootState {
     opts;
@@ -364,9 +364,9 @@ export class CalendarRootState {
         months: this.months,
         weekdays: this.weekdays,
     }));
-    getBitsAttr(part) {
-        return `data-bits-calendar-${part}`;
-    }
+    getBitsAttr = (part) => {
+        return calendarAttrs.getAttr(part);
+    };
     props = $derived.by(() => ({
         ...getCalendarElementProps({
             fullCalendarLabel: this.fullCalendarLabel,

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

@@ -21,7 +21,6 @@ declare class CheckboxGroupState {
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-checkbox-group": "";
     };
 }
 type CheckboxGroupLabelStateProps = WithRefProps;
@@ -32,7 +31,6 @@ declare class CheckboxGroupLabelState {
     props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "data-checkbox-group-label": "";
     };
 }
 type CheckboxRootStateProps = WithRefProps<ReadableBoxedValues<{
@@ -68,7 +66,6 @@ declare class CheckboxRootState {
         readonly "aria-required": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
-        readonly "data-checkbox-root": "";
         readonly onclick: (_: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

package/dist/bits/checkbox/checkbox.svelte.js

@@ -1,10 +1,11 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-const CHECKBOX_ROOT_ATTR = "data-checkbox-root";
-const CHECKBOX_GROUP_ATTR = "data-checkbox-group";
-const CHECKBOX_GROUP_LABEL_ATTR = "data-checkbox-group-label";
+const checkboxAttrs = createBitsAttrs({
+    component: "checkbox",
+    parts: ["root", "group", "group-label", "input"],
+});
 class CheckboxGroupState {
     opts;
     labelId = $state(undefined);
@@ -35,7 +36,7 @@ class CheckboxGroupState {
         role: "group",
         "aria-labelledby": this.labelId,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        [CHECKBOX_GROUP_ATTR]: "",
+        [checkboxAttrs.group]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -49,7 +50,7 @@ class CheckboxGroupLabelState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.group.opts.disabled.current),
-        [CHECKBOX_GROUP_LABEL_ATTR]: "",
+        [checkboxAttrs["group-label"]]: "",
         ...attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id)),
     }));
 }
@@ -134,7 +135,7 @@ class CheckboxRootState {
         "aria-required": getAriaRequired(this.trueRequired),
         "data-disabled": getDataDisabled(this.trueDisabled),
         "data-state": getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
-        [CHECKBOX_ROOT_ATTR]: "",
+        [checkboxAttrs.root]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -147,14 +148,13 @@ class CheckboxRootState {
 class CheckboxInputState {
     root;
     trueChecked = $derived.by(() => {
-        if (this.root.group) {
-            if (this.root.opts.value.current !== undefined &&
-                this.root.group.opts.value.current.includes(this.root.opts.value.current)) {
-                return true;
-            }
-            return false;
+        if (!this.root.group)
+            return this.root.opts.checked.current;
+        if (this.root.opts.value.current !== undefined &&
+            this.root.group.opts.value.current.includes(this.root.opts.value.current)) {
+            return true;
         }
-        return this.root.opts.checked.current;
+        return false;
     });
     shouldRender = $derived.by(() => Boolean(this.root.trueName));
     constructor(root) {

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

@@ -15,7 +15,6 @@ declare class CollapsibleRootState {
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-collapsible-root": "";
     };
 }
 type CollapsibleContentStateProps = WithRefProps & ReadableBoxedValues<{
@@ -38,7 +37,6 @@ declare class CollapsibleContentState {
         };
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-collapsible-content": "";
     };
 }
 type CollapsibleTriggerStateProps = WithRefProps & ReadableBoxedValues<{
@@ -59,7 +57,6 @@ declare class CollapsibleTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
-        readonly "data-collapsible-trigger": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,10 +1,11 @@
 import { afterTick, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-const COLLAPSIBLE_ROOT_ATTR = "data-collapsible-root";
-const COLLAPSIBLE_CONTENT_ATTR = "data-collapsible-content";
-const COLLAPSIBLE_TRIGGER_ATTR = "data-collapsible-trigger";
+const collapsibleAttrs = createBitsAttrs({
+    component: "collapsible",
+    parts: ["root", "content", "trigger"],
+});
 class CollapsibleRootState {
     opts;
     contentNode = $state(null);
@@ -19,7 +20,7 @@ class CollapsibleRootState {
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.opts.open.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        [COLLAPSIBLE_ROOT_ATTR]: "",
+        [collapsibleAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -84,7 +85,7 @@ class CollapsibleContentState {
         },
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        [COLLAPSIBLE_CONTENT_ATTR]: "",
+        [collapsibleAttrs.content]: "",
         ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
 }
@@ -121,7 +122,7 @@ class CollapsibleTriggerState {
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.#isDisabled),
-        [COLLAPSIBLE_TRIGGER_ATTR]: "",
+        [collapsibleAttrs.trigger]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,

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

@@ -124,7 +124,6 @@ declare class CommandRootState {
     props: {
         readonly id: string;
         readonly role: "application";
-        readonly "data-command-root": "";
         readonly tabindex: -1;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
@@ -141,7 +140,6 @@ declare class CommandEmptyState {
     props: {
         readonly id: string;
         readonly role: "presentation";
-        readonly "data-command-empty": "";
     };
 }
 type CommandGroupContainerStateProps = WithRefProps<ReadableBoxedValues<{
@@ -160,7 +158,6 @@ declare class CommandGroupContainerState {
         readonly role: "presentation";
         readonly hidden: true | undefined;
         readonly "data-value": string;
-        readonly "data-command-group": "";
     };
 }
 type CommandGroupHeadingStateProps = WithRefProps;
@@ -170,7 +167,6 @@ declare class CommandGroupHeadingState {
     constructor(opts: CommandGroupHeadingStateProps, group: CommandGroupContainerState);
     props: {
         readonly id: string;
-        readonly "data-command-group-heading": "";
     };
 }
 type CommandGroupItemsStateProps = WithRefProps;
@@ -181,7 +177,6 @@ declare class CommandGroupItemsState {
     props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-command-group-items": "";
         readonly "aria-labelledby": string | undefined;
     };
 }
@@ -198,7 +193,6 @@ declare class CommandInputState {
     props: {
         readonly id: string;
         readonly type: "text";
-        readonly "data-command-input": "";
         readonly autocomplete: "off";
         readonly autocorrect: "off";
         readonly spellcheck: false;
@@ -236,7 +230,6 @@ declare class CommandItemState {
         readonly "data-disabled": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
-        readonly "data-command-item": "";
         readonly role: "option";
         readonly onpointermove: (_: BitsPointerEvent) => void;
         readonly onclick: (_: BitsMouseEvent) => void;
@@ -255,7 +248,6 @@ declare class CommandLoadingState {
         readonly "aria-valuemin": 0;
         readonly "aria-valuemax": 100;
         readonly "aria-label": "Loading...";
-        readonly "data-command-loading": "";
     };
 }
 type CommandSeparatorStateProps = WithRefProps & ReadableBoxedValues<{
@@ -269,7 +261,6 @@ declare class CommandSeparatorState {
     props: {
         readonly id: string;
         readonly "aria-hidden": "true";
-        readonly "data-command-separator": "";
     };
 }
 type CommandListStateProps = WithRefProps & ReadableBoxedValues<{
@@ -283,7 +274,6 @@ declare class CommandListState {
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-label": string;
-        readonly "data-command-list": "";
     };
 }
 type CommandLabelStateProps = WithRefProps<ReadableBoxedValues<{
@@ -295,7 +285,6 @@ declare class CommandLabelState {
     constructor(opts: CommandLabelStateProps, root: CommandRootState);
     props: {
         readonly id: string;
-        readonly "data-command-input-label": "";
         readonly for: string | undefined;
         readonly style: import("svelte-toolbelt").StyleProperties;
     };
@@ -307,7 +296,6 @@ declare class CommandViewportState {
     constructor(opts: CommandViewportStateProps, list: CommandListState);
     props: {
         readonly id: string;
-        readonly "data-command-viewport": "";
     };
 }
 export declare function useCommandRoot(props: CommandRootStateProps): CommandRootState;

package/dist/bits/command/command.svelte.js

@@ -2,30 +2,34 @@ import { afterSleep, afterTick, srOnlyStyles, attachRef } from "svelte-toolbelt"
 import { Context, watch } from "runed";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
 import { kbd } from "../../internal/kbd.js";
-import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
 import cssesc from "css.escape";
-// attributes
-const COMMAND_ROOT_ATTR = "data-command-root";
-const COMMAND_LIST_ATTR = "data-command-list";
-const COMMAND_INPUT_ATTR = "data-command-input";
-const COMMAND_SEPARATOR_ATTR = "data-command-separator";
-const COMMAND_LOADING_ATTR = "data-command-loading";
-const COMMAND_EMPTY_ATTR = "data-command-empty";
-const COMMAND_GROUP_ATTR = "data-command-group";
-const COMMAND_GROUP_ITEMS_ATTR = "data-command-group-items";
-const COMMAND_GROUP_HEADING_ATTR = "data-command-group-heading";
-const COMMAND_ITEM_ATTR = "data-command-item";
-const COMMAND_VIEWPORT_ATTR = "data-command-viewport";
-const COMMAND_INPUT_LABEL_ATTR = "data-command-input-label";
 const COMMAND_VALUE_ATTR = "data-value";
+const commandAttrs = createBitsAttrs({
+    component: "command",
+    parts: [
+        "root",
+        "list",
+        "input",
+        "separator",
+        "loading",
+        "empty",
+        "group",
+        "group-items",
+        "group-heading",
+        "item",
+        "viewport",
+        "input-label",
+    ],
+});
 // selectors
-const COMMAND_GROUP_SELECTOR = `[${COMMAND_GROUP_ATTR}]`;
-const COMMAND_GROUP_ITEMS_SELECTOR = `[${COMMAND_GROUP_ITEMS_ATTR}]`;
-const COMMAND_GROUP_HEADING_SELECTOR = `[${COMMAND_GROUP_HEADING_ATTR}]`;
-const COMMAND_ITEM_SELECTOR = `[${COMMAND_ITEM_ATTR}]`;
-const COMMAND_VALID_ITEM_SELECTOR = `${COMMAND_ITEM_SELECTOR}:not([aria-disabled="true"])`;
+const COMMAND_GROUP_SELECTOR = commandAttrs.selector("group");
+const COMMAND_GROUP_ITEMS_SELECTOR = commandAttrs.selector("group-items");
+const COMMAND_GROUP_HEADING_SELECTOR = commandAttrs.selector("group-heading");
+const COMMAND_ITEM_SELECTOR = commandAttrs.selector("item");
+const COMMAND_VALID_ITEM_SELECTOR = `${commandAttrs.selector("item")}:not([aria-disabled="true"])`;
 const CommandRootContext = new Context("Command.Root");
 const CommandListContext = new Context("Command.List");
 const CommandGroupContainerContext = new Context("Command.Group");
@@ -568,7 +572,7 @@ class CommandRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "application",
-        [COMMAND_ROOT_ATTR]: "",
+        [commandAttrs.root]: "",
         tabindex: -1,
         onkeydown: this.onkeydown,
         ...attachRef(this.opts.ref),
@@ -592,7 +596,7 @@ class CommandEmptyState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "presentation",
-        [COMMAND_EMPTY_ATTR]: "",
+        [commandAttrs.empty]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -637,7 +641,7 @@ class CommandGroupContainerState {
         role: "presentation",
         hidden: this.shouldRender ? undefined : true,
         "data-value": this.trueValue,
-        [COMMAND_GROUP_ATTR]: "",
+        [commandAttrs.group]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -650,7 +654,7 @@ class CommandGroupHeadingState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [COMMAND_GROUP_HEADING_ATTR]: "",
+        [commandAttrs["group-heading"]]: "",
         ...attachRef(this.opts.ref, (v) => (this.group.headingNode = v)),
     }));
 }
@@ -664,7 +668,7 @@ class CommandGroupItemsState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [COMMAND_GROUP_ITEMS_ATTR]: "",
+        [commandAttrs["group-items"]]: "",
         "aria-labelledby": this.group.headingNode?.id ?? undefined,
         ...attachRef(this.opts.ref),
     }));
@@ -696,7 +700,7 @@ class CommandInputState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         type: "text",
-        [COMMAND_INPUT_ATTR]: "",
+        [commandAttrs.input]: "",
         autocomplete: "off",
         autocorrect: "off",
         spellcheck: false,
@@ -783,7 +787,7 @@ class CommandItemState {
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-selected": getDataSelected(this.isSelected),
         "data-value": this.trueValue,
-        [COMMAND_ITEM_ATTR]: "",
+        [commandAttrs.item]: "",
         role: "option",
         onpointermove: this.onpointermove,
         onclick: this.onclick,
@@ -802,7 +806,7 @@ class CommandLoadingState {
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": "Loading...",
-        [COMMAND_LOADING_ATTR]: "",
+        [commandAttrs.loading]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -818,7 +822,7 @@ class CommandSeparatorState {
         id: this.opts.id.current,
         // role="separator" cannot belong to a role="listbox"
         "aria-hidden": "true",
-        [COMMAND_SEPARATOR_ATTR]: "",
+        [commandAttrs.separator]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -833,7 +837,7 @@ class CommandListState {
         id: this.opts.id.current,
         role: "listbox",
         "aria-label": this.opts.ariaLabel.current,
-        [COMMAND_LIST_ATTR]: "",
+        [commandAttrs.list]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -846,7 +850,7 @@ class CommandLabelState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [COMMAND_INPUT_LABEL_ATTR]: "",
+        [commandAttrs["input-label"]]: "",
         for: this.opts.for?.current,
         style: srOnlyStyles,
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
@@ -879,7 +883,7 @@ class CommandViewportState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [COMMAND_VIEWPORT_ATTR]: "",
+        [commandAttrs.viewport]: "",
         ...attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v)),
     }));
 }