bits-ui 2.3.0 → 2.4.0

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

@@ -5,7 +5,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/bo
 import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.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 RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateRange;
@@ -39,16 +39,14 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
 export declare class RangeCalendarRootState {
     #private;
     readonly opts: RangeCalendarRootStateProps;
+    readonly visibleMonths: DateValue[];
     months: Month<DateValue>[];
-    visibleMonths: DateValue[];
     announcer: Announcer;
     formatter: Formatter;
     accessibleHeadingId: string;
     focusedValue: DateValue | undefined;
     lastPressedDateValue: DateValue | undefined;
     domContext: DOMContext;
-    constructor(opts: RangeCalendarRootStateProps);
-    setMonths: (months: Month<DateValue>[]) => void;
     /**
      * This derived state holds an array of localized day names for the current
      * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
@@ -56,24 +54,26 @@ export declare class RangeCalendarRootState {
      * calendar's days of the week is strongly recommended, as it guarantees that
      * the days are correctly formatted for the current locale and calendar view.
      */
-    weekdays: string[];
+    readonly weekdays: string[];
+    readonly isStartInvalid: boolean;
+    readonly isEndInvalid: boolean;
+    readonly isInvalid: boolean;
+    readonly isNextButtonDisabled: boolean;
+    readonly isPrevButtonDisabled: boolean;
+    readonly headingValue: string;
+    readonly fullCalendarLabel: string;
+    readonly highlightedRange: {
+        start: DateValue;
+        end: DateValue;
+    } | null;
+    constructor(opts: RangeCalendarRootStateProps);
+    setMonths: (months: Month<DateValue>[]) => void;
     isOutsideVisibleMonths(date: DateValue): boolean;
     isDateDisabled(date: DateValue): boolean;
     isDateUnavailable(date: DateValue): boolean;
-    isStartInvalid: boolean;
-    isEndInvalid: boolean;
-    isInvalid: boolean;
-    isNextButtonDisabled: boolean;
-    isPrevButtonDisabled: boolean;
-    headingValue: string;
-    fullCalendarLabel: string;
     isSelectionStart(date: DateValue): boolean;
     isSelectionEnd(date: DateValue): boolean;
     isSelected(date: DateValue): boolean;
-    highlightedRange: {
-        start: DateValue;
-        end: DateValue;
-    } | null;
     shiftFocus(node: HTMLElement, add: number): void;
     handleCellClick(e: Event, date: DateValue): void;
     onkeydown(event: BitsKeyboardEvent): void;
@@ -89,12 +89,12 @@ export declare class RangeCalendarRootState {
     prevYear(): void;
     setYear(year: number): void;
     setMonth(month: number): void;
-    getBitsAttr(part: CalendarParts): string;
-    snippetProps: {
+    getBitsAttr: (typeof calendarAttrs)["getAttr"];
+    readonly snippetProps: {
         months: Month<DateValue>[];
         weekdays: string[];
     };
-    props: {
+    readonly props: {
         readonly onkeydown: (event: BitsKeyboardEvent) => void;
         readonly id: string;
         readonly role: "application";
@@ -111,26 +111,26 @@ type RangeCalendarCellStateProps = WithRefProps<ReadableBoxedValues<{
 export declare class RangeCalendarCellState {
     readonly opts: RangeCalendarCellStateProps;
     readonly root: RangeCalendarRootState;
-    cellDate: Date;
-    isDisabled: boolean;
-    isUnavailable: boolean;
-    isDateToday: boolean;
-    isOutsideMonth: boolean;
-    isOutsideVisibleMonths: boolean;
-    isFocusedDate: boolean;
-    isSelectedDate: boolean;
-    isSelectionStart: boolean;
-    isSelectionEnd: boolean;
-    isHighlighted: boolean;
-    labelText: string;
+    readonly cellDate: Date;
+    readonly isDisabled: boolean;
+    readonly isUnavailable: boolean;
+    readonly isDateToday: boolean;
+    readonly isOutsideMonth: boolean;
+    readonly isOutsideVisibleMonths: boolean;
+    readonly isFocusedDate: boolean;
+    readonly isSelectedDate: boolean;
+    readonly isSelectionStart: boolean;
+    readonly isSelectionEnd: boolean;
+    readonly isHighlighted: boolean;
+    readonly labelText: string;
     constructor(opts: RangeCalendarCellStateProps, root: RangeCalendarRootState);
-    snippetProps: {
+    readonly snippetProps: {
         disabled: boolean;
         unavailable: boolean;
         selected: boolean;
     };
-    ariaDisabled: boolean;
-    sharedDataAttrs: {
+    readonly ariaDisabled: boolean;
+    readonly sharedDataAttrs: {
         readonly "data-unavailable": "" | undefined;
         readonly "data-today": "" | undefined;
         readonly "data-outside-month": "" | undefined;
@@ -144,7 +144,7 @@ export declare class RangeCalendarCellState {
         readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
     };
-    props: {
+    readonly props: {
         readonly "data-unavailable": "" | undefined;
         readonly "data-today": "" | undefined;
         readonly "data-outside-month": "" | undefined;
@@ -172,14 +172,14 @@ declare class RangeCalendarDayState {
     onclick(e: BitsMouseEvent): void;
     onmouseenter(_: BitsMouseEvent): void;
     onfocusin(_: BitsFocusEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         disabled: boolean;
         unavailable: boolean;
         selected: boolean;
         day: string;
     };
-    props: {
-        readonly tabindex: number | undefined;
+    readonly props: {
+        readonly tabindex: 0 | -1 | undefined;
         readonly "data-bits-day": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onmouseenter: (_: BitsMouseEvent) => void;

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

@@ -6,19 +6,93 @@ import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
 import { onMount } from "svelte";
 export class RangeCalendarRootState {
     opts;
-    months = $state([]);
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
+    months = $state([]);
     announcer;
     formatter;
     accessibleHeadingId = useId();
     focusedValue = $state(undefined);
     lastPressedDateValue = undefined;
     domContext;
+    /**
+     * This derived state holds an array of localized day names for the current
+     * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
+     * updating its content when the option changes. Using this state to render the
+     * calendar's days of the week is strongly recommended, as it guarantees that
+     * the days are correctly formatted for the current locale and calendar view.
+     */
+    weekdays = $derived.by(() => {
+        return getWeekdays({
+            months: this.months,
+            formatter: this.formatter,
+            weekdayFormat: this.opts.weekdayFormat.current,
+        });
+    });
+    isStartInvalid = $derived.by(() => {
+        if (!this.opts.startValue.current)
+            return false;
+        return (this.isDateUnavailable(this.opts.startValue.current) ||
+            this.isDateDisabled(this.opts.startValue.current));
+    });
+    isEndInvalid = $derived.by(() => {
+        if (!this.opts.endValue.current)
+            return false;
+        return (this.isDateUnavailable(this.opts.endValue.current) ||
+            this.isDateDisabled(this.opts.endValue.current));
+    });
+    isInvalid = $derived.by(() => {
+        if (this.isStartInvalid || this.isEndInvalid)
+            return true;
+        if (this.opts.endValue.current &&
+            this.opts.startValue.current &&
+            isBefore(this.opts.endValue.current, this.opts.startValue.current))
+            return true;
+        return false;
+    });
+    isNextButtonDisabled = $derived.by(() => {
+        return getIsNextButtonDisabled({
+            maxValue: this.opts.maxValue.current,
+            months: this.months,
+            disabled: this.opts.disabled.current,
+        });
+    });
+    isPrevButtonDisabled = $derived.by(() => {
+        return getIsPrevButtonDisabled({
+            minValue: this.opts.minValue.current,
+            months: this.months,
+            disabled: this.opts.disabled.current,
+        });
+    });
+    headingValue = $derived.by(() => {
+        return getCalendarHeadingValue({
+            months: this.months,
+            formatter: this.formatter,
+            locale: this.opts.locale.current,
+        });
+    });
+    fullCalendarLabel = $derived.by(() => `${this.opts.calendarLabel.current} ${this.headingValue}`);
+    highlightedRange = $derived.by(() => {
+        if (this.opts.startValue.current && this.opts.endValue.current)
+            return null;
+        if (!this.opts.startValue.current || !this.focusedValue)
+            return null;
+        const isStartBeforeFocused = isBefore(this.opts.startValue.current, this.focusedValue);
+        const start = isStartBeforeFocused ? this.opts.startValue.current : this.focusedValue;
+        const end = isStartBeforeFocused ? this.focusedValue : this.opts.startValue.current;
+        const range = { start, end };
+        if (isSameDay(start.add({ days: 1 }), end) || isSameDay(start, end)) {
+            return range;
+        }
+        const isValid = areAllDaysBetweenValid(start, end, this.isDateUnavailable, this.isDateDisabled);
+        if (isValid)
+            return range;
+        return null;
+    });
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(opts.ref);
@@ -173,20 +247,6 @@ export class RangeCalendarRootState {
     setMonths = (months) => {
         this.months = months;
     };
-    /**
-     * This derived state holds an array of localized day names for the current
-     * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
-     * updating its content when the option changes. Using this state to render the
-     * calendar's days of the week is strongly recommended, as it guarantees that
-     * the days are correctly formatted for the current locale and calendar view.
-     */
-    weekdays = $derived.by(() => {
-        return getWeekdays({
-            months: this.months,
-            formatter: this.formatter,
-            weekdayFormat: this.opts.weekdayFormat.current,
-        });
-    });
     isOutsideVisibleMonths(date) {
         return !this.visibleMonths.some((month) => isSameMonth(date, month));
     }
@@ -206,49 +266,6 @@ export class RangeCalendarRootState {
             return true;
         return false;
     }
-    isStartInvalid = $derived.by(() => {
-        if (!this.opts.startValue.current)
-            return false;
-        return (this.isDateUnavailable(this.opts.startValue.current) ||
-            this.isDateDisabled(this.opts.startValue.current));
-    });
-    isEndInvalid = $derived.by(() => {
-        if (!this.opts.endValue.current)
-            return false;
-        return (this.isDateUnavailable(this.opts.endValue.current) ||
-            this.isDateDisabled(this.opts.endValue.current));
-    });
-    isInvalid = $derived.by(() => {
-        if (this.isStartInvalid || this.isEndInvalid)
-            return true;
-        if (this.opts.endValue.current &&
-            this.opts.startValue.current &&
-            isBefore(this.opts.endValue.current, this.opts.startValue.current))
-            return true;
-        return false;
-    });
-    isNextButtonDisabled = $derived.by(() => {
-        return getIsNextButtonDisabled({
-            maxValue: this.opts.maxValue.current,
-            months: this.months,
-            disabled: this.opts.disabled.current,
-        });
-    });
-    isPrevButtonDisabled = $derived.by(() => {
-        return getIsPrevButtonDisabled({
-            minValue: this.opts.minValue.current,
-            months: this.months,
-            disabled: this.opts.disabled.current,
-        });
-    });
-    headingValue = $derived.by(() => {
-        return getCalendarHeadingValue({
-            months: this.months,
-            formatter: this.formatter,
-            locale: this.opts.locale.current,
-        });
-    });
-    fullCalendarLabel = $derived.by(() => `${this.opts.calendarLabel.current} ${this.headingValue}`);
     isSelectionStart(date) {
         if (!this.opts.startValue.current)
             return false;
@@ -269,23 +286,6 @@ export class RangeCalendarRootState {
         }
         return false;
     }
-    highlightedRange = $derived.by(() => {
-        if (this.opts.startValue.current && this.opts.endValue.current)
-            return null;
-        if (!this.opts.startValue.current || !this.focusedValue)
-            return null;
-        const isStartBeforeFocused = isBefore(this.opts.startValue.current, this.focusedValue);
-        const start = isStartBeforeFocused ? this.opts.startValue.current : this.focusedValue;
-        const end = isStartBeforeFocused ? this.focusedValue : this.opts.startValue.current;
-        const range = { start, end };
-        if (isSameDay(start.add({ days: 1 }), end) || isSameDay(start, end)) {
-            return range;
-        }
-        const isValid = areAllDaysBetweenValid(start, end, this.isDateUnavailable, this.isDateDisabled);
-        if (isValid)
-            return range;
-        return null;
-    });
     shiftFocus(node, add) {
         return shiftCalendarFocus({
             node,
@@ -403,9 +403,9 @@ export class RangeCalendarRootState {
     setMonth(month) {
         this.opts.placeholder.current = this.opts.placeholder.current.set({ month });
     }
-    getBitsAttr(part) {
-        return `data-range-calendar-${part}`;
-    }
+    getBitsAttr = (part) => {
+        return calendarAttrs.getAttr(part, "range-calendar");
+    };
     snippetProps = $derived.by(() => ({
         months: this.months,
         weekdays: this.weekdays,

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

@@ -65,7 +65,6 @@ declare class RatingGroupRootState {
         readonly "data-readonly": "" | undefined;
         readonly "data-orientation": Orientation;
         readonly tabindex: 0 | -1;
-        readonly "data-rating-group-root": "";
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onpointerleave: () => void;
     };
@@ -92,7 +91,6 @@ declare class RatingGroupItemState {
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
         readonly "data-state": RatingGroupItemStateType;
-        readonly "data-rating-group-item": "";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onpointermove: (e: BitsPointerEvent) => void;
     };

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

@@ -1,9 +1,11 @@
 import { attachRef, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-const RATING_GROUP_ROOT_ATTR = "data-rating-group-root";
-const RATING_GROUP_ITEM_ATTR = "data-rating-group-item";
+const ratingGroupAttrs = createBitsAttrs({
+    component: "rating-group",
+    parts: ["root", "item"],
+});
 class RatingGroupRootState {
     opts;
     #hoverValue = $state(null);
@@ -85,22 +87,42 @@ class RatingGroupRootState {
         this.setHoverValue(null);
     }
     handlers = {
-        [kbd.ARROW_UP]: () => this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1),
+        [kbd.ARROW_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1);
+        },
         [kbd.ARROW_RIGHT]: () => {
+            this.setHoverValue(null);
             const increment = this.opts.allowHalf.current ? 0.5 : 1;
             // in RTL mode, right arrow should decrement
             this.#adjustValue(this.isRTL ? -increment : increment);
         },
-        [kbd.ARROW_DOWN]: () => this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1),
+        [kbd.ARROW_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1);
+        },
         [kbd.ARROW_LEFT]: () => {
+            this.setHoverValue(null);
             const increment = this.opts.allowHalf.current ? 0.5 : 1;
             // in RTL mode, left arrow should increment
             this.#adjustValue(this.isRTL ? increment : -increment);
         },
-        [kbd.HOME]: () => this.setValue(this.opts.min.current),
-        [kbd.END]: () => this.setValue(this.opts.max.current),
-        [kbd.PAGE_UP]: () => this.#adjustValue(1),
-        [kbd.PAGE_DOWN]: () => this.#adjustValue(-1),
+        [kbd.HOME]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.min.current);
+        },
+        [kbd.END]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.max.current);
+        },
+        [kbd.PAGE_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(1);
+        },
+        [kbd.PAGE_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(-1);
+        },
     };
     onkeydown(e) {
         if (this.opts.disabled.current || this.opts.readonly.current)
@@ -188,7 +210,7 @@ class RatingGroupRootState {
             "data-readonly": this.opts.readonly.current ? "" : undefined,
             "data-orientation": this.opts.orientation.current,
             tabindex: this.opts.disabled.current ? -1 : 0,
-            [RATING_GROUP_ROOT_ATTR]: "",
+            [ratingGroupAttrs.root]: "",
             onkeydown: this.onkeydown,
             onpointerleave: this.onpointerleave,
             ...attachRef(this.opts.ref),
@@ -263,7 +285,7 @@ class RatingGroupItemState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-readonly": this.root.opts.readonly.current ? "" : undefined,
         "data-state": this.#state,
-        [RATING_GROUP_ITEM_ATTR]: "",
+        [ratingGroupAttrs.item]: "",
         //
         onclick: this.onclick,
         onpointermove: this.onpointermove,

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -45,7 +45,6 @@ declare class ScrollAreaRootState {
             readonly "--bits-scroll-area-corner-height": `${number}px`;
             readonly "--bits-scroll-area-corner-width": `${number}px`;
         };
-        readonly "data-scroll-area-root": "";
     };
 }
 type ScrollAreaViewportStateProps = WithRefProps;
@@ -60,7 +59,6 @@ declare class ScrollAreaViewportState {
             readonly overflowX: "hidden" | "scroll";
             readonly overflowY: "hidden" | "scroll";
         };
-        readonly "data-scroll-area-viewport": "";
     };
     contentProps: {
         readonly id: string;
@@ -83,7 +81,7 @@ type ScrollAreaScrollbarStateProps = WithRefProps<ReadableBoxedValues<{
 declare class ScrollAreaScrollbarState {
     readonly opts: ScrollAreaScrollbarStateProps;
     readonly root: ScrollAreaRootState;
-    isHorizontal: boolean;
+    readonly isHorizontal: boolean;
     hasThumb: boolean;
     constructor(opts: ScrollAreaScrollbarStateProps, root: ScrollAreaRootState);
 }
@@ -92,7 +90,7 @@ declare class ScrollAreaScrollbarHoverState {
     root: ScrollAreaRootState;
     isVisible: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
     };
 }
@@ -103,11 +101,11 @@ declare class ScrollAreaScrollbarScrollState {
         state: import("svelte-toolbelt").WritableBox<"hidden" | "scrolling" | "idle" | "interacting">;
         dispatch: (event: string | number | symbol) => void;
     };
-    isHidden: boolean;
+    readonly isHidden: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
     onpointerenter(_: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
         readonly onpointerenter: (_: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
@@ -118,7 +116,7 @@ declare class ScrollAreaScrollbarAutoState {
     root: ScrollAreaRootState;
     isVisible: boolean;
     constructor(scrollbar: ScrollAreaScrollbarState);
-    props: {
+    readonly props: {
         readonly "data-state": "hidden" | "visible";
     };
 }
@@ -128,8 +126,8 @@ declare class ScrollAreaScrollbarVisibleState {
     thumbNode: HTMLElement | null;
     pointerOffset: number;
     sizes: Sizes;
-    thumbRatio: number;
-    hasThumb: boolean;
+    readonly thumbRatio: number;
+    readonly hasThumb: boolean;
     prevTransformStyle: string;
     constructor(scrollbar: ScrollAreaScrollbarState);
     setSizes(sizes: Sizes): void;
@@ -184,8 +182,8 @@ declare class ScrollAreaScrollbarXState implements ScrollbarAxisState {
     onThumbPositionChange: () => void;
     onWheelScroll: (e: WheelEvent, maxScrollPos: number) => void;
     onResize: () => void;
-    thumbSize: number;
-    props: {
+    readonly thumbSize: number;
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal";
         readonly style: {
@@ -215,8 +213,8 @@ declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
     onThumbPositionChange(): void;
     onWheelScroll(e: WheelEvent, maxScrollPos: number): void;
     onResize(): void;
-    thumbSize: number;
-    props: {
+    readonly thumbSize: number;
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "vertical";
         readonly style: {
@@ -244,7 +242,7 @@ declare class ScrollAreaScrollbarSharedState {
         y: number;
     }) => void;
     handleThumbPointerUp: () => void;
-    maxScrollPos: number;
+    readonly maxScrollPos: number;
     constructor(scrollbarState: ScrollbarAxis);
     handleDragScroll(e: PointerEvent): void;
     onpointerdown(e: BitsPointerEvent): void;
@@ -262,7 +260,7 @@ declare class ScrollAreaThumbImplState {
     constructor(opts: ScrollAreaThumbImplStateProps, scrollbarState: ScrollAreaScrollbarSharedState);
     onpointerdowncapture(e: BitsPointerEvent): void;
     onpointerup(_: BitsPointerEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-state": "hidden" | "visible";
         readonly style: {
@@ -272,7 +270,6 @@ declare class ScrollAreaThumbImplState {
         };
         readonly onpointerdowncapture: (e: BitsPointerEvent) => void;
         readonly onpointerup: (_: BitsPointerEvent) => void;
-        readonly "data-scroll-area-thumb": "";
     };
 }
 type ScrollAreaCornerImplStateProps = WithRefProps;
@@ -280,9 +277,9 @@ declare class ScrollAreaCornerImplState {
     #private;
     readonly opts: ScrollAreaCornerImplStateProps;
     readonly root: ScrollAreaRootState;
-    hasSize: boolean;
+    readonly hasSize: boolean;
     constructor(opts: ScrollAreaCornerImplStateProps, root: ScrollAreaRootState);
-    props: {
+    readonly props: {
         id: string;
         style: {
             width: number;
@@ -292,7 +289,6 @@ declare class ScrollAreaCornerImplState {
             left: number | undefined;
             bottom: number;
         };
-        "data-scroll-area-corner": string;
     };
 }
 export declare const ScrollAreaRootContext: Context<ScrollAreaRootState>;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -13,11 +13,11 @@ import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
 import { clamp } from "../../internal/clamp.js";
 import { useResizeObserver } from "../../internal/use-resize-observer.svelte.js";
 import { on } from "svelte/events";
-const SCROLL_AREA_ROOT_ATTR = "data-scroll-area-root";
-const SCROLL_AREA_VIEWPORT_ATTR = "data-scroll-area-viewport";
-const SCROLL_AREA_CORNER_ATTR = "data-scroll-area-corner";
-const SCROLL_AREA_THUMB_ATTR = "data-scroll-area-thumb";
-const SCROLL_AREA_SCROLLBAR_ATTR = "data-scroll-area-scrollbar";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const scrollAreaAttrs = createBitsAttrs({
+    component: "scroll-area",
+    parts: ["root", "viewport", "corner", "thumb", "scrollbar"],
+});
 class ScrollAreaRootState {
     opts;
     scrollAreaNode = $state(null);
@@ -42,7 +42,7 @@ class ScrollAreaRootState {
             "--bits-scroll-area-corner-height": `${this.cornerHeight}px`,
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
-        [SCROLL_AREA_ROOT_ATTR]: "",
+        [scrollAreaAttrs.root]: "",
         ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
@@ -61,7 +61,7 @@ class ScrollAreaViewportState {
             overflowX: this.root.scrollbarXEnabled ? "scroll" : "hidden",
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
-        [SCROLL_AREA_VIEWPORT_ATTR]: "",
+        [scrollAreaAttrs.viewport]: "",
         ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
     }));
     contentProps = $derived.by(() => ({
@@ -565,7 +565,7 @@ class ScrollAreaScrollbarSharedState {
             position: "absolute",
             ...this.scrollbarState.props.style,
         },
-        [SCROLL_AREA_SCROLLBAR_ATTR]: "",
+        [scrollAreaAttrs.scrollbar]: "",
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
         onpointerup: this.onpointerup,
@@ -627,7 +627,7 @@ class ScrollAreaThumbImplState {
         },
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
-        [SCROLL_AREA_THUMB_ATTR]: "",
+        [scrollAreaAttrs.thumb]: "",
         ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
@@ -661,7 +661,7 @@ class ScrollAreaCornerImplState {
             left: this.root.opts.dir.current === "rtl" ? 0 : undefined,
             bottom: 0,
         },
-        [SCROLL_AREA_CORNER_ATTR]: "",
+        [scrollAreaAttrs.corner]: "",
         ...attachRef(this.opts.ref),
     }));
 }