bits-ui 2.3.0 → 2.4.0

package/dist/bits/slider/slider.svelte.js

@@ -7,17 +7,15 @@ import { executeCallbacks, onMountEffect, attachRef, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
-import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
 import { linearScale } from "../../internal/math.js";
-const SLIDER_ROOT_ATTR = "data-slider-root";
-const SLIDER_THUMB_ATTR = "data-slider-thumb";
-const SLIDER_RANGE_ATTR = "data-slider-range";
-const SLIDER_TICK_ATTR = "data-slider-tick";
-const SLIDER_TICK_LABEL_ATTR = "data-slider-tick-label";
-const SLIDER_THUMB_LABEL_ATTR = "data-slider-thumb-label";
+const sliderAttrs = createBitsAttrs({
+    component: "slider",
+    parts: ["root", "thumb", "range", "tick", "tick-label", "thumb-label"],
+});
 class SliderBaseRootState {
     opts;
     isActive = $state(false);
@@ -48,7 +46,7 @@ class SliderBaseRootState {
         const node = this.opts.ref.current;
         if (!node)
             return [];
-        return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
+        return Array.from(node.querySelectorAll(sliderAttrs.selector("thumb")));
     };
     getThumbScale = () => {
         // If trackPadding is explicitly set, use it directly instead of calculating from thumb size
@@ -92,7 +90,7 @@ class SliderBaseRootState {
         style: {
             touchAction: this.#touchAction,
         },
-        [SLIDER_ROOT_ATTR]: "",
+        [sliderAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -225,7 +223,7 @@ class SliderSingleRootState extends SliderBaseRootState {
                 "data-value": thumbValue,
                 "data-orientation": getDataOrientation(this.opts.orientation.current),
                 style,
-                [SLIDER_THUMB_ATTR]: "",
+                [sliderAttrs.thumb]: "",
             };
         });
     });
@@ -250,7 +248,7 @@ class SliderSingleRootState extends SliderBaseRootState {
                 "data-value": tickValue,
                 "data-selected": this.isTickValueSelected(tickValue) ? "" : undefined,
                 style,
-                [SLIDER_TICK_ATTR]: "",
+                [sliderAttrs.tick]: "",
             };
         });
     });
@@ -428,7 +426,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         const node = this.opts.ref.current;
         if (!node)
             return [];
-        const thumbs = Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
+        const thumbs = Array.from(node.querySelectorAll(sliderAttrs.selector("thumb")));
         return thumbs;
     };
     updateValue = (thumbValue, idx) => {
@@ -487,7 +485,7 @@ class SliderMultiRootState extends SliderBaseRootState {
                 "data-value": thumbValue,
                 "data-orientation": getDataOrientation(this.opts.orientation.current),
                 style,
-                [SLIDER_THUMB_ATTR]: "",
+                [sliderAttrs.thumb]: "",
             };
         });
     });
@@ -513,7 +511,7 @@ class SliderMultiRootState extends SliderBaseRootState {
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
                 style,
-                [SLIDER_TICK_ATTR]: "",
+                [sliderAttrs.tick]: "",
             };
         });
     });
@@ -591,7 +589,7 @@ class SliderRangeState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         style: this.rangeStyles,
-        [SLIDER_RANGE_ATTR]: "",
+        [sliderAttrs.range]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -740,7 +738,7 @@ class SliderTickLabelState {
             "data-selected": this.root.isTickValueSelected(tickValue) ? "" : undefined,
             "data-position": labelPosition,
             style,
-            [SLIDER_TICK_LABEL_ATTR]: "",
+            [sliderAttrs["tick-label"]]: "",
             ...attachRef(this.opts.ref),
         };
     });
@@ -766,7 +764,7 @@ class SliderThumbLabelState {
             "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
             "data-position": labelPosition,
             style,
-            [SLIDER_THUMB_LABEL_ATTR]: "",
+            [sliderAttrs["thumb-label"]]: "",
             ...attachRef(this.opts.ref),
         };
     });

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

@@ -14,21 +14,20 @@ declare class SwitchRootState {
     constructor(opts: SwitchRootStateProps);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsPointerEvent): void;
-    sharedProps: {
+    readonly sharedProps: {
         "data-disabled": "" | undefined;
         "data-state": "checked" | "unchecked";
         "data-required": "" | undefined;
     };
-    snippetProps: {
+    readonly snippetProps: {
         checked: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "switch";
         readonly disabled: true | undefined;
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "aria-required": "true" | "false";
-        readonly "data-switch-root": "";
         readonly onclick: (_: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-disabled": "" | undefined;
@@ -38,7 +37,7 @@ declare class SwitchRootState {
 }
 declare class SwitchInputState {
     readonly root: SwitchRootState;
-    shouldRender: boolean;
+    readonly shouldRender: boolean;
     constructor(root: SwitchRootState);
     props: {
         readonly type: "checkbox";
@@ -54,12 +53,11 @@ declare class SwitchThumbState {
     readonly opts: SwitchThumbStateProps;
     readonly root: SwitchRootState;
     constructor(opts: SwitchThumbStateProps, root: SwitchRootState);
-    snippetProps: {
+    readonly snippetProps: {
         checked: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
-        readonly "data-switch-thumb": "";
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
         readonly "data-required": "" | undefined;

package/dist/bits/switch/switch.svelte.js

@@ -1,9 +1,11 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, } from "../../internal/attrs.js";
+import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, createBitsAttrs, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-const SWITCH_ROOT_ATTR = "data-switch-root";
-const SWITCH_THUMB_ATTR = "data-switch-thumb";
+const switchAttrs = createBitsAttrs({
+    component: "switch",
+    parts: ["root", "thumb"],
+});
 class SwitchRootState {
     opts;
     constructor(opts) {
@@ -40,7 +42,7 @@ class SwitchRootState {
         disabled: getDisabled(this.opts.disabled.current),
         "aria-checked": getAriaChecked(this.opts.checked.current, false),
         "aria-required": getAriaRequired(this.opts.required.current),
-        [SWITCH_ROOT_ATTR]: "",
+        [switchAttrs.root]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
@@ -75,7 +77,7 @@ class SwitchThumbState {
     props = $derived.by(() => ({
         ...this.root.sharedProps,
         id: this.opts.id.current,
-        [SWITCH_THUMB_ATTR]: "",
+        [switchAttrs.thumb]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -16,16 +16,15 @@ declare class TabsRootState {
     readonly opts: TabsRootStateProps;
     rovingFocusGroup: UseRovingFocusReturn;
     triggerIds: string[];
-    valueToTriggerId: SvelteMap<string, string>;
-    valueToContentId: SvelteMap<string, string>;
+    readonly valueToTriggerId: SvelteMap<string, string>;
+    readonly valueToContentId: SvelteMap<string, string>;
     constructor(opts: TabsRootStateProps);
     registerTrigger(id: string, value: string): () => void;
     registerContent(id: string, value: string): () => void;
     setValue(v: string): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-tabs-root": "";
     };
 }
 type TabsListStateProps = WithRefProps;
@@ -34,12 +33,11 @@ declare class TabsListState {
     readonly opts: TabsListStateProps;
     readonly root: TabsRootState;
     constructor(opts: TabsListStateProps, root: TabsRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "tablist";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-tabs-list": "";
         readonly "data-disabled": "" | undefined;
     };
 }
@@ -55,7 +53,7 @@ declare class TabsTriggerState {
     onfocus(_: BitsFocusEvent): void;
     onclick(_: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "tab";
         readonly "data-state": "active" | "inactive";
@@ -64,7 +62,6 @@ declare class TabsTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "aria-selected": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly "data-tabs-trigger": "";
         readonly disabled: true | undefined;
         readonly tabindex: number;
         readonly onclick: (_: BitsMouseEvent) => void;
@@ -88,7 +85,6 @@ declare class TabsContentState {
         readonly "data-value": string;
         readonly "data-state": "active" | "inactive";
         readonly "aria-labelledby": string | undefined;
-        readonly "data-tabs-content": "";
     };
 }
 export declare function useTabsRoot(props: TabsRootStateProps): TabsRootState;

package/dist/bits/tabs/tabs.svelte.js

@@ -1,13 +1,13 @@
 import { SvelteMap } from "svelte/reactivity";
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaOrientation, getAriaSelected, getDataDisabled, getDataOrientation, getDisabled, getHidden, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-const TABS_ROOT_ATTR = "data-tabs-root";
-const TABS_LIST_ATTR = "data-tabs-list";
-const TABS_TRIGGER_ATTR = "data-tabs-trigger";
-const TABS_CONTENT_ATTR = "data-tabs-content";
+const tabsAttrs = createBitsAttrs({
+    component: "tabs",
+    parts: ["root", "list", "trigger", "content"],
+});
 class TabsRootState {
     opts;
     rovingFocusGroup;
@@ -19,7 +19,7 @@ class TabsRootState {
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
-            candidateAttr: TABS_TRIGGER_ATTR,
+            candidateAttr: tabsAttrs.trigger,
             rootNode: this.opts.ref,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
@@ -47,7 +47,7 @@ class TabsRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
-        [TABS_ROOT_ATTR]: "",
+        [tabsAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -64,7 +64,7 @@ class TabsListState {
         role: "tablist",
         "aria-orientation": getAriaOrientation(this.root.opts.orientation.current),
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        [TABS_LIST_ATTR]: "",
+        [tabsAttrs.list]: "",
         "data-disabled": getDataDisabled(this.#isDisabled),
         ...attachRef(this.opts.ref),
     }));
@@ -72,9 +72,9 @@ class TabsListState {
 class TabsTriggerState {
     opts;
     root;
+    #tabIndex = $state(0);
     #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
-    #tabIndex = $state(0);
     #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value.current));
     constructor(opts, root) {
         this.opts = opts;
@@ -129,7 +129,7 @@ class TabsTriggerState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "aria-selected": getAriaSelected(this.#isActive),
         "aria-controls": this.#ariaControls,
-        [TABS_TRIGGER_ATTR]: "",
+        [tabsAttrs.trigger]: "",
         disabled: getDisabled(this.#isDisabled),
         tabindex: this.#tabIndex,
         //
@@ -159,7 +159,7 @@ class TabsContentState {
         "data-value": this.opts.value.current,
         "data-state": getTabDataState(this.#isActive),
         "aria-labelledby": this.#ariaLabelledBy,
-        [TABS_CONTENT_ATTR]: "",
+        [tabsAttrs.content]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -5,19 +5,20 @@
 </script>
 
 <script lang="ts" generics="T extends TimeValue = Time">
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import { useTimeFieldRoot } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } 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,
@@ -78,7 +79,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/time-field/time-field.svelte.d.ts

@@ -8,7 +8,7 @@ import { type TimeFormatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import type { TimeValue } from "../../shared/date/types.js";
 import type { TimeRangeFieldRootState } from "../time-range-field/time-range-field.svelte.js";
-export declare const TIME_FIELD_INPUT_ATTR = "data-time-field-input";
+export declare const timeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["input", "label"]>;
 type SegmentConfig = {
     min: number | ((root: TimeFieldRootState) => number);
     max: number | ((root: TimeFieldRootState) => number);
@@ -160,7 +160,6 @@ export declare class TimeFieldInputState {
         readonly "aria-disabled": "true" | "false";
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-time-field-input": "";
     };
 }
 declare class TimeFieldHiddenInputState {
@@ -184,7 +183,6 @@ declare class TimeFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-time-field-label": "";
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }

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

@@ -2,7 +2,7 @@ import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
 import { onDestroyEffect, attachRef, box, 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";
@@ -13,8 +13,10 @@ import { toDate } from "../../internal/date-time/utils.js";
 import { areAllTimeSegmentsFilled, convertTimeValueToTime, createTimeContent, getISOTimeValue, getTimeValueFromSegments, initTimeSegmentStates, isFirstTimeSegment, isTimeBefore, removeTimeDescriptionElement, setTimeDescription, } from "../../internal/date-time/field/time-helpers.js";
 import { getFirstTimeSegment, handleTimeSegmentNavigation, isSegmentNavigationKey, moveToNextTimeSegment, moveToPrevTimeSegment, } from "../../internal/date-time/field/segments.js";
 import { getDefaultHourCycle, isAcceptableSegmentKey, } from "../../internal/date-time/field/helpers.js";
-export const TIME_FIELD_INPUT_ATTR = "data-time-field-input";
-const TIME_FIELD_LABEL_ATTR = "data-time-field-label";
+export const timeFieldAttrs = createBitsAttrs({
+    component: "time-field",
+    parts: ["input", "label"],
+});
 const SEGMENT_CONFIGS = {
     hour: {
         min: (root) => (root.hourCycle === 12 ? 1 : 0),
@@ -478,7 +480,7 @@ export class TimeFieldInputState {
         "aria-disabled": getAriaDisabled(this.root.disabled.current),
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [TIME_FIELD_INPUT_ATTR]: "",
+        [timeFieldAttrs.input]: "",
         ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
@@ -515,7 +517,7 @@ class TimeFieldLabelState {
         id: this.opts.id.current,
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [TIME_FIELD_LABEL_ATTR]: "",
+        [timeFieldAttrs.label]: "",
         onclick: this.onclick,
         ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
     }));

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

@@ -6,13 +6,14 @@
 </script>
 
 <script lang="ts" generics="T extends TimeValue = Time">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useTimeRangeFieldRoot } from "../time-range-field.svelte.js";
 	import type { TimeRangeFieldRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -28,7 +29,7 @@
 		required = false,
 		hourCycle,
 		granularity,
-		locale = "en-US",
+		locale,
 		hideTimeZone = false,
 		validate = noop,
 		onInvalid = noop,
@@ -94,7 +95,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/time-range-field/time-range-field.svelte.d.ts

@@ -8,7 +8,7 @@ import type { TimeSegmentPart } from "../../shared/index.js";
 import type { WithRefProps } from "../../internal/types.js";
 import type { TimeGranularity, TimeOnInvalid, TimeRange, TimeRangeValidator, TimeValue } from "../../shared/date/types.js";
 import { type TimeFormatter } from "../../internal/date-time/formatter.js";
-export declare const TIME_RANGE_FIELD_ROOT_ATTR = "data-time-range-field-root";
+export declare const timeRangeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "label"]>;
 type TimeRangeFieldRootStateProps<T extends TimeValue = Time> = WithRefProps<WritableBoxedValues<{
     value: TimeRange<T>;
     placeholder: TimeValue;
@@ -62,7 +62,6 @@ export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
     props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-time-range-field-root": "";
         readonly "data-invalid": "" | undefined;
     };
 }
@@ -76,7 +75,6 @@ declare class TimeRangeFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-time-range-field-label": "";
         readonly onclick: () => void;
     };
 }

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

@@ -2,13 +2,15 @@ import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { TimeFieldInputState, useTimeFieldRoot } from "../time-field/time-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 { createTimeFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { getFirstSegment } from "../../internal/date-time/field/segments.js";
 import { convertTimeValueToTime, isTimeBefore, } from "../../internal/date-time/field/time-helpers.js";
-export const TIME_RANGE_FIELD_ROOT_ATTR = "data-time-range-field-root";
-const TIME_RANGE_FIELD_LABEL_ATTR = "data-time-range-field-label";
+export const timeRangeFieldAttrs = createBitsAttrs({
+    component: "time-range-field",
+    parts: ["root", "label"],
+});
 export class TimeRangeFieldRootState {
     opts;
     startFieldState = undefined;
@@ -151,7 +153,7 @@ export class TimeRangeFieldRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [TIME_RANGE_FIELD_ROOT_ATTR]: "",
+        [timeRangeFieldAttrs.root]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
         ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
@@ -176,7 +178,7 @@ class TimeRangeFieldLabelState {
         // TODO: invalid state for field
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        [TIME_RANGE_FIELD_LABEL_ATTR]: "",
+        [timeRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));

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

@@ -1,5 +1,6 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+export declare const toggleAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root"]>;
 type ToggleRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
 }> & WritableBoxedValues<{
@@ -10,11 +11,10 @@ declare class ToggleRootState {
     readonly opts: ToggleRootStateProps;
     constructor(opts: ToggleRootStateProps);
     onclick(_: BitsMouseEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         pressed: boolean;
     };
-    props: {
-        readonly "data-toggle-root": "";
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "aria-pressed": "true" | "false";

package/dist/bits/toggle/toggle.svelte.js

@@ -1,6 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-import { getAriaPressed, getDataDisabled, getDisabled } from "../../internal/attrs.js";
-const TOGGLE_ROOT_ATTR = "data-toggle-root";
+import { createBitsAttrs, getAriaPressed, getDataDisabled, getDisabled, } from "../../internal/attrs.js";
+export const toggleAttrs = createBitsAttrs({
+    component: "toggle",
+    parts: ["root"],
+});
 class ToggleRootState {
     opts;
     constructor(opts) {
@@ -21,7 +24,7 @@ class ToggleRootState {
         pressed: this.opts.pressed.current,
     }));
     props = $derived.by(() => ({
-        [TOGGLE_ROOT_ATTR]: "",
+        [toggleAttrs.root]: "",
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "aria-pressed": getAriaPressed(this.opts.pressed.current),

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import type { Orientation } from "../../shared/index.js";
 import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+export declare const toggleGroupAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "item"]>;
 type ToggleGroupBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     rovingFocus: boolean;
@@ -15,7 +16,6 @@ declare class ToggleGroupBaseState {
     constructor(opts: ToggleGroupBaseStateProps);
     props: {
         readonly id: string;
-        readonly "data-toggle-group-root": "";
         readonly role: "group";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -70,7 +70,6 @@ declare class ToggleGroupItemState {
         readonly "aria-pressed": "true" | "false" | undefined;
         readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly disabled: true | undefined;
-        readonly "data-toggle-group-item": "";
         readonly onclick: (_: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -1,17 +1,19 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-const TOGGLE_GROUP_ROOT_ATTR = "data-toggle-group-root";
-const TOGGLE_GROUP_ITEM_ATTR = "data-toggle-group-item";
+export const toggleGroupAttrs = createBitsAttrs({
+    component: "toggle-group",
+    parts: ["root", "item"],
+});
 class ToggleGroupBaseState {
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
-            candidateAttr: TOGGLE_GROUP_ITEM_ATTR,
+            candidateAttr: toggleGroupAttrs.item,
             rootNode: opts.ref,
             loop: opts.loop,
             orientation: opts.orientation,
@@ -19,7 +21,7 @@ class ToggleGroupBaseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [TOGGLE_GROUP_ROOT_ATTR]: "",
+        [toggleGroupAttrs.root]: "",
         role: "group",
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
@@ -130,7 +132,7 @@ class ToggleGroupItemState {
         "aria-pressed": this.#ariaPressed,
         "aria-checked": this.#ariaChecked,
         disabled: getDisabled(this.#isDisabled),
-        [TOGGLE_GROUP_ITEM_ATTR]: "",
+        [toggleGroupAttrs.item]: "",
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,