bits-ui 2.2.1 → 2.3.1

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

@@ -4,6 +4,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
 import type { SliderLabelPosition } from "./types.js";
+declare const sliderAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "thumb", "range", "tick", "tick-label", "thumb-label"]>;
 type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
@@ -33,7 +34,6 @@ declare class SliderBaseRootState {
         readonly style: {
             readonly touchAction: string | undefined;
         };
-        readonly "data-slider-root": "";
     };
 }
 type SliderSingleRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
@@ -56,6 +56,7 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
     thumbsPropsArr: {
+        readonly [sliderAttrs.thumb]: "";
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -65,17 +66,16 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "data-value": number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     }[];
     thumbsRenderArr: number[];
     ticksPropsArr: {
+        readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     }[];
     ticksRenderArr: number[];
     tickItemsArr: {
@@ -127,7 +127,8 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     handlePointerUp: () => void;
     getAllThumbs: () => HTMLElement[];
     updateValue: (thumbValue: number, idx: number) => void;
-    thumbsPropsArr: {
+    readonly thumbsPropsArr: {
+        readonly [sliderAttrs.thumb]: "";
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -137,27 +138,26 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "data-value": number | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     }[];
-    thumbsRenderArr: number[];
-    ticksPropsArr: {
+    readonly thumbsRenderArr: number[];
+    readonly ticksPropsArr: {
+        readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     }[];
-    ticksRenderArr: number[];
-    tickItemsArr: {
+    readonly ticksRenderArr: number[];
+    readonly tickItemsArr: {
         value: number;
         index: number;
     }[];
-    thumbItemsArr: {
+    readonly thumbItemsArr: {
         value: number;
         index: number;
     }[];
-    snippetProps: {
+    readonly snippetProps: {
         readonly ticks: number[];
         readonly thumbs: number[];
         readonly tickItems: {
@@ -175,7 +175,7 @@ declare class SliderRangeState {
     readonly opts: SliderRangeStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderRangeStateProps, root: SliderRootState);
-    rangeStyles: {
+    readonly rangeStyles: {
         accentColor?: import("csstype").Property.AccentColor | undefined;
         alignContent?: import("csstype").Property.AlignContent | undefined;
         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -1002,7 +1002,7 @@ declare class SliderRangeState {
         textAnchor?: import("csstype").Property.TextAnchor | undefined;
         vectorEffect?: import("csstype").Property.VectorEffect | undefined;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -1833,7 +1833,6 @@ declare class SliderRangeState {
             textAnchor?: import("csstype").Property.TextAnchor | undefined;
             vectorEffect?: import("csstype").Property.VectorEffect | undefined;
         };
-        readonly "data-slider-range": "";
     };
 }
 type SliderThumbStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1846,7 +1845,7 @@ declare class SliderThumbState {
     readonly root: SliderRootState;
     constructor(opts: SliderThumbStateProps, root: SliderRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-active": "" | undefined;
@@ -1861,7 +1860,6 @@ declare class SliderThumbState {
         readonly "data-value": number;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     } | {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -1877,7 +1875,6 @@ declare class SliderThumbState {
         readonly "data-value": number | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb": "";
     };
 }
 type SliderTickStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1887,7 +1884,7 @@ declare class SliderTickState {
     readonly opts: SliderTickStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderTickStateProps, root: SliderRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": "horizontal" | "vertical";
@@ -1895,7 +1892,6 @@ declare class SliderTickState {
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     } | {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
@@ -1903,7 +1899,6 @@ declare class SliderTickState {
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick": "";
     };
 }
 type SliderTickLabelStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1914,7 +1909,7 @@ declare class SliderTickLabelState {
     readonly opts: SliderTickLabelStateProps;
     readonly root: SliderRootState;
     constructor(opts: SliderTickLabelStateProps, root: SliderRootState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
@@ -1923,7 +1918,6 @@ declare class SliderTickLabelState {
         readonly "data-selected": "" | undefined;
         readonly "data-position": SliderLabelPosition;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-tick-label": "";
     };
 }
 type SliderThumbLabelStateProps = WithRefProps & ReadableBoxedValues<{
@@ -1942,7 +1936,6 @@ declare class SliderThumbLabelState {
         readonly "data-active": "" | undefined;
         readonly "data-position": SliderLabelPosition;
         readonly style: import("../../shared/index.js").StyleProperties;
-        readonly "data-slider-thumb-label": "";
     };
 }
 type SliderRootState = SliderSingleRootState | SliderMultiRootState;

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/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/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";