bits-ui 2.3.0 → 2.4.0

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

package/dist/bits/date-field/components/date-field.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateFieldRoot } from "../date-field.svelte.js";
 	import type { DateFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		disabled = false,
 		granularity,
 		hideTimeZone = false,
 		hourCycle,
-		locale = "en",
+		locale,
 		maxValue,
 		minValue,
 		onPlaceholderChange = noop,
@@ -73,7 +74,7 @@
 		granularity: box.with(() => granularity),
 		hideTimeZone: box.with(() => hideTimeZone),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		maxValue: box.with(() => maxValue),
 		minValue: box.with(() => minValue),
 		validate: box.with(() => validate),

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -7,7 +7,7 @@ import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps }
 import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
-export declare const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
+export declare const dateFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["input", "label", "segment"]>;
 type SegmentConfig = {
     min: number | ((root: DateFieldRootState) => number);
     max: number | ((root: DateFieldRootState) => number);
@@ -138,6 +138,7 @@ export declare class DateFieldRootState {
     updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
     handleSegmentClick(e: BitsMouseEvent): void;
     getBaseSegmentAttrs(part: SegmentPart, segmentId: string): {
+        [dateFieldAttrs.segment]: string;
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -176,7 +177,6 @@ export declare class DateFieldInputState {
         readonly "aria-disabled": "true" | "false";
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-field-input": "";
     };
 }
 declare class DateFieldHiddenInputState {
@@ -200,7 +200,6 @@ declare class DateFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-field-label": "";
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
@@ -415,7 +414,6 @@ declare class DateFieldTimeZoneSegmentState {
             readonly caretColor: "transparent";
         };
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly tabindex: 0;
     } | {
         readonly "data-readonly": "" | undefined;
         readonly "aria-labelledby": string;

package/dist/bits/date-field/date-field.svelte.js

@@ -1,7 +1,7 @@
 import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import { Context, watch } from "runed";
-import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
 import { useId } from "../../internal/use-id.js";
@@ -11,8 +11,10 @@ import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranula
 import { DATE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "../../internal/date-time/field/parts.js";
 import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
 import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
-export const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
-const DATE_FIELD_LABEL_ATTR = "data-date-field-label";
+export const dateFieldAttrs = createBitsAttrs({
+    component: "date-field",
+    parts: ["input", "label", "segment"],
+});
 const SEGMENT_CONFIGS = {
     day: {
         min: 1,
@@ -535,6 +537,7 @@ export class DateFieldRootState {
             "data-disabled": getDataDisabled(this.disabled.current),
             "data-readonly": getDataReadonly(this.readonly.current || inReadonlySegments),
             "data-segment": `${part}`,
+            [dateFieldAttrs.segment]: "",
         };
         if (part === "literal")
             return defaultAttrs;
@@ -585,7 +588,7 @@ export class DateFieldInputState {
         "aria-disabled": getAriaDisabled(this.root.disabled.current),
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [DATE_FIELD_INPUT_ATTR]: "",
+        [dateFieldAttrs.input]: "",
         ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
@@ -624,7 +627,7 @@ class DateFieldLabelState {
         id: this.opts.id.current,
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [DATE_FIELD_LABEL_ATTR]: "",
+        [dateFieldAttrs.label]: "",
         onclick: this.onclick,
         ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
     }));
@@ -1173,7 +1176,6 @@ class DateFieldTimeZoneSegmentState {
             caretColor: "transparent",
         },
         onkeydown: this.onkeydown,
-        tabindex: 0,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
         "data-readonly": getDataReadonly(true),
         ...attachRef(this.opts.ref),

package/dist/bits/date-picker/components/date-picker-trigger.svelte

@@ -2,7 +2,7 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { DatePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
-	import { DATE_FIELD_INPUT_ATTR } from "../../date-field/date-field.svelte.js";
+	import { dateFieldAttrs } from "../../date-field/date-field.svelte.js";
 	import {
 		handleSegmentNavigation,
 		isSegmentNavigationKey,
@@ -14,7 +14,7 @@
 		if (isSegmentNavigationKey(e.key)) {
 			const currNode = e.currentTarget as HTMLElement;
 			const dateFieldInputNode = currNode.closest(
-				`[${DATE_FIELD_INPUT_ATTR}]`
+				dateFieldAttrs.selector("input")
 			) as HTMLElement;
 			if (!dateFieldInputNode) return;
 			handleSegmentNavigation(e, dateFieldInputNode);

package/dist/bits/date-picker/components/date-picker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	// Date Picker composes the DateField, Popover, and Calendar components
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDatePickerRoot } from "../date-picker.svelte.js";
@@ -9,7 +10,7 @@
 	import { useDateFieldRoot } from "../../date-field/date-field.svelte.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		open = $bindable(false),
@@ -28,7 +29,7 @@
 		granularity,
 		readonlySegments = [],
 		hourCycle,
-		locale = "en",
+		locale,
 		hideTimeZone = false,
 		required = false,
 		calendarLabel = "Event",
@@ -107,7 +108,7 @@
 		granularity: box.with(() => granularity),
 		readonlySegments: box.with(() => readonlySegments),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		required: box.with(() => required),
 		calendarLabel: box.with(() => calendarLabel),

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangeFieldRoot } from "../date-range-field.svelte.js";
@@ -7,7 +8,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -23,7 +24,7 @@
 		required = false,
 		hourCycle,
 		granularity,
-		locale = "en-US",
+		locale,
 		hideTimeZone = false,
 		validate = noop,
 		onInvalid = noop,
@@ -89,7 +90,7 @@
 		required: box.with(() => required),
 		hourCycle: box.with(() => hourCycle),
 		granularity: box.with(() => granularity),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		validate: box.with(() => validate),
 		maxValue: box.with(() => maxValue),

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -8,7 +8,7 @@ import type { DateOnInvalid, DateRange, DateRangeValidator, SegmentPart } from "
 import type { WithRefProps } from "../../internal/types.js";
 import type { Granularity } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
-export declare const DATE_RANGE_FIELD_ROOT_ATTR = "data-date-range-field-root";
+export declare const dateRangeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "label"]>;
 type DateRangeFieldRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateRange;
     placeholder: DateValue;
@@ -58,7 +58,6 @@ export declare class DateRangeFieldRootState {
     props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-date-range-field-root": "";
         readonly "data-invalid": "" | undefined;
     };
 }
@@ -72,7 +71,6 @@ declare class DateRangeFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-range-field-label": "";
         readonly onclick: () => void;
     };
 }

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -2,13 +2,15 @@ import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
-import { getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
+import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { isBefore } from "../../internal/date-time/utils.js";
 import { getFirstSegment } from "../../internal/date-time/field/segments.js";
-export const DATE_RANGE_FIELD_ROOT_ATTR = "data-date-range-field-root";
-const DATE_RANGE_FIELD_LABEL_ATTR = "data-date-range-field-label";
+export const dateRangeFieldAttrs = createBitsAttrs({
+    component: "date-range-field",
+    parts: ["root", "label"],
+});
 export class DateRangeFieldRootState {
     opts;
     startFieldState = undefined;
@@ -130,7 +132,7 @@ export class DateRangeFieldRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [DATE_RANGE_FIELD_ROOT_ATTR]: "",
+        [dateRangeFieldAttrs.root]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
         ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
@@ -155,7 +157,7 @@ class DateRangeFieldLabelState {
         // TODO: invalid state for field
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        [DATE_RANGE_FIELD_LABEL_ATTR]: "",
+        [dateRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));

package/dist/bits/date-range-picker/components/date-range-picker-trigger.svelte

@@ -2,7 +2,7 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { DateRangePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
-	import { DATE_RANGE_FIELD_ROOT_ATTR } from "../../date-range-field/date-range-field.svelte.js";
+	import { dateRangeFieldAttrs } from "../../date-range-field/date-range-field.svelte.js";
 	import {
 		handleSegmentNavigation,
 		isSegmentNavigationKey,
@@ -14,7 +14,7 @@
 		if (isSegmentNavigationKey(e.key)) {
 			const currNode = e.currentTarget as HTMLElement;
 			const dateFieldInputNode = currNode.closest(
-				`[${DATE_RANGE_FIELD_ROOT_ATTR}]`
+				dateRangeFieldAttrs.selector("root")
 			) as HTMLElement;
 			if (!dateFieldInputNode) return;
 			handleSegmentNavigation(e, dateFieldInputNode);

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangePickerRoot } from "../date-range-picker.svelte.js";
@@ -10,7 +11,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		open = $bindable(false),
@@ -30,7 +31,7 @@
 		granularity,
 		readonlySegments = [],
 		hourCycle,
-		locale = "en",
+		locale,
 		hideTimeZone = false,
 		required = false,
 		calendarLabel = "Event",
@@ -136,7 +137,7 @@
 		granularity: box.with(() => granularity),
 		readonlySegments: box.with(() => readonlySegments),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		required: box.with(() => required),
 		calendarLabel: box.with(() => calendarLabel),

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

@@ -1,6 +1,7 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
+declare const dialogAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
 type DialogRootStateProps = WritableBoxedValues<{
     open: boolean;
 }> & ReadableBoxedValues<{
@@ -16,19 +17,10 @@ declare class DialogRootState {
     triggerId: string | undefined;
     descriptionId: string | undefined;
     cancelNode: HTMLElement | null;
-    attrs: {
-        readonly content: "data-dialog-content" | "data-alert-dialog-content";
-        readonly trigger: "data-dialog-trigger" | "data-alert-dialog-trigger";
-        readonly overlay: "data-dialog-overlay" | "data-alert-dialog-overlay";
-        readonly title: "data-dialog-title" | "data-alert-dialog-title";
-        readonly description: "data-dialog-description" | "data-alert-dialog-description";
-        readonly close: "data-dialog-close" | "data-alert-dialog-close";
-        readonly cancel: "data-dialog-cancel" | "data-alert-dialog-cancel";
-        readonly action: "data-dialog-action" | "data-alert-dialog-action";
-    };
     constructor(opts: DialogRootStateProps);
     handleOpen(): void;
     handleClose(): void;
+    getBitsAttr: typeof dialogAttrs.getAttr;
     sharedProps: {
         readonly "data-state": "open" | "closed";
     };
@@ -58,7 +50,6 @@ type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
     disabled: boolean;
 }>;
 declare class DialogCloseState {
-    #private;
     readonly opts: DialogCloseStateProps;
     readonly root: DialogRootState;
     constructor(opts: DialogCloseStateProps, root: DialogRootState);
@@ -75,7 +66,6 @@ declare class DialogCloseState {
 }
 type DialogActionStateProps = WithRefProps;
 declare class DialogActionState {
-    #private;
     readonly opts: DialogActionStateProps;
     readonly root: DialogRootState;
     constructor(opts: DialogActionStateProps, root: DialogRootState);

package/dist/bits/dialog/dialog.svelte.js

@@ -1,20 +1,12 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { untrack } from "svelte";
-function createAttrs(variant) {
-    return {
-        content: `data-${variant}-content`,
-        trigger: `data-${variant}-trigger`,
-        overlay: `data-${variant}-overlay`,
-        title: `data-${variant}-title`,
-        description: `data-${variant}-description`,
-        close: `data-${variant}-close`,
-        cancel: `data-${variant}-cancel`,
-        action: `data-${variant}-action`,
-    };
-}
+const dialogAttrs = createBitsAttrs({
+    component: "dialog",
+    parts: ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"],
+});
 class DialogRootState {
     opts;
     triggerNode = $state(null);
@@ -25,7 +17,6 @@ class DialogRootState {
     triggerId = $state(undefined);
     descriptionId = $state(undefined);
     cancelNode = $state(null);
-    attrs = $derived.by(() => createAttrs(this.opts.variant.current));
     constructor(opts) {
         this.opts = opts;
         this.handleOpen = this.handleOpen.bind(this);
@@ -41,6 +32,9 @@ class DialogRootState {
             return;
         this.opts.open.current = false;
     }
+    getBitsAttr = (part) => {
+        return dialogAttrs.getAttr(part, this.opts.variant.current);
+    };
     sharedProps = $derived.by(() => ({
         "data-state": getDataOpenClosed(this.opts.open.current),
     }));
@@ -74,7 +68,7 @@ class DialogTriggerState {
         "aria-haspopup": "dialog",
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "aria-controls": this.root.contentId,
-        [this.root.attrs.trigger]: "",
+        [this.root.getBitsAttr("trigger")]: "",
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,
@@ -88,7 +82,6 @@ class DialogTriggerState {
 class DialogCloseState {
     opts;
     root;
-    #attr = $derived.by(() => this.root.attrs[this.opts.variant.current]);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -112,7 +105,7 @@ class DialogCloseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.#attr]: "",
+        [this.root.getBitsAttr(this.opts.variant.current)]: "",
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         disabled: this.opts.disabled.current ? true : undefined,
@@ -124,14 +117,13 @@ class DialogCloseState {
 class DialogActionState {
     opts;
     root;
-    #attr = $derived.by(() => this.root.attrs.action);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.#attr]: "",
+        [this.root.getBitsAttr("action")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref),
     }));
@@ -147,7 +139,7 @@ class DialogTitleState {
         id: this.opts.id.current,
         role: "heading",
         "aria-level": this.opts.level.current,
-        [this.root.attrs.title]: "",
+        [this.root.getBitsAttr("title")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
     }));
@@ -161,7 +153,7 @@ class DialogDescriptionState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.description]: "",
+        [this.root.getBitsAttr("description")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref, (v) => {
             this.root.descriptionNode = v;
@@ -183,7 +175,7 @@ class DialogContentState {
         "aria-modal": "true",
         "aria-describedby": this.root.descriptionId,
         "aria-labelledby": this.root.titleId,
-        [this.root.attrs.content]: "",
+        [this.root.getBitsAttr("content")]: "",
         style: {
             pointerEvents: "auto",
             outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
@@ -206,7 +198,7 @@ class DialogOverlayState {
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.overlay]: "",
+        [this.root.getBitsAttr("overlay")]: "",
         style: {
             pointerEvents: "auto",
         },
@@ -240,7 +232,7 @@ class AlertDialogCancelState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.cancel]: "",
+        [this.root.getBitsAttr("cancel")]: "",
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         tabindex: 0,