bits-ui 2.2.1 → 2.3.1

package/dist/bits/pin-input/pin-input.svelte.js

@@ -2,13 +2,15 @@ import { Previous, watch } from "runed";
 import { onMount } from "svelte";
 import { box, attachRef, DOMContext } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
-import { getDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
 export const REGEXP_ONLY_DIGITS = "^\\d+$";
 export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
-const ROOT_ATTR = "data-pin-input-root";
-const CELL_ATTR = "data-pin-input-cell";
+const pinInputAttrs = createBitsAttrs({
+    component: "pin-input",
+    parts: ["root", "cell"],
+});
 const KEYS_TO_IGNORE = [
     "Backspace",
     "Delete",
@@ -151,7 +153,7 @@ class PinInputRootState {
     }));
     rootProps = $derived.by(() => ({
         id: this.opts.id.current,
-        [ROOT_ATTR]: "",
+        [pinInputAttrs.root]: "",
         style: this.#rootStyles,
         ...attachRef(this.opts.ref),
     }));
@@ -394,7 +396,7 @@ class PinInputCellState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [CELL_ATTR]: "",
+        [pinInputAttrs.cell]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
         ...attachRef(this.opts.ref),

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

@@ -28,7 +28,6 @@ declare class PopoverTriggerState {
         readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
-        readonly "data-popover-trigger": "";
         readonly disabled: boolean;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
@@ -53,7 +52,6 @@ declare class PopoverContentState {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
-        readonly "data-popover-content": "";
         readonly style: {
             readonly pointerEvents: "auto";
         };
@@ -76,7 +74,6 @@ declare class PopoverCloseState {
         readonly onclick: (_: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly type: "button";
-        readonly "data-popover-close": "";
     };
 }
 export declare function usePopoverRoot(props: PopoverRootStateProps): PopoverRootState;

package/dist/bits/popover/popover.svelte.js

@@ -1,8 +1,12 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement } from "../../internal/is.js";
+const popoverAttrs = createBitsAttrs({
+    component: "popover",
+    parts: ["root", "trigger", "content", "close"],
+});
 class PopoverRootState {
     opts;
     contentNode = $state(null);
@@ -55,7 +59,7 @@ class PopoverTriggerState {
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "aria-controls": this.#getAriaControls(),
-        "data-popover-trigger": "",
+        [popoverAttrs.trigger]: "",
         disabled: this.opts.disabled.current,
         //
         onkeydown: this.onkeydown,
@@ -76,7 +80,7 @@ class PopoverContentState {
             return;
         if (!isElement(e.target))
             return;
-        const closestTrigger = e.target.closest(`[data-popover-trigger]`);
+        const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
         if (closestTrigger === this.root.triggerNode)
             return;
         this.root.handleClose();
@@ -99,7 +103,7 @@ class PopoverContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-popover-content": "",
+        [popoverAttrs.content]: "",
         style: {
             pointerEvents: "auto",
         },
@@ -134,7 +138,7 @@ class PopoverCloseState {
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         type: "button",
-        "data-popover-close": "",
+        [popoverAttrs.close]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -19,7 +19,6 @@ declare class ProgressRootState {
         readonly "data-max": number;
         readonly "data-min": number;
         readonly "data-indeterminate": "" | undefined;
-        readonly "data-progress-root": "";
     };
 }
 export declare function useProgressRootState(props: ProgressRootStateProps): ProgressRootState;

package/dist/bits/progress/progress.svelte.js

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const ROOT_ATTR = "data-progress-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const progressAttrs = createBitsAttrs({
+    component: "progress",
+    parts: ["root"],
+});
 class ProgressRootState {
     opts;
     constructor(opts) {
@@ -16,7 +20,7 @@ class ProgressRootState {
         "data-max": this.opts.max.current,
         "data-min": this.opts.min.current,
         "data-indeterminate": this.opts.value.current === null ? "" : undefined,
-        [ROOT_ATTR]: "",
+        [progressAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }

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

@@ -13,18 +13,17 @@ type RadioGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
 }>>;
 declare class RadioGroupRootState {
     readonly opts: RadioGroupRootStateProps;
+    readonly hasValue: boolean;
     rovingFocusGroup: UseRovingFocusReturn;
-    hasValue: boolean;
     constructor(opts: RadioGroupRootStateProps);
     isChecked(value: string): boolean;
     setValue(value: string): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "radiogroup";
         readonly "aria-required": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": Orientation;
-        readonly "data-radio-group-root": "";
     };
 }
 type RadioGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
@@ -35,15 +34,15 @@ declare class RadioGroupItemState {
     #private;
     readonly opts: RadioGroupItemStateProps;
     readonly root: RadioGroupRootState;
-    checked: boolean;
+    readonly checked: boolean;
     constructor(opts: RadioGroupItemStateProps, root: RadioGroupRootState);
     onclick(_: BitsMouseEvent): void;
     onfocus(_: BitsFocusEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    snippetProps: {
+    readonly snippetProps: {
         checked: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "data-value": string;
@@ -51,7 +50,6 @@ declare class RadioGroupItemState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
         readonly "aria-checked": "true" | "false" | "mixed";
-        readonly "data-radio-group-item": "";
         readonly type: "button";
         readonly role: "radio";
         readonly tabindex: number;
@@ -62,8 +60,8 @@ declare class RadioGroupItemState {
 }
 declare class RadioGroupInputState {
     readonly root: RadioGroupRootState;
-    shouldRender: boolean;
-    props: {
+    readonly shouldRender: boolean;
+    readonly props: {
         readonly name: string | undefined;
         readonly value: string;
         readonly required: boolean;

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

@@ -1,19 +1,21 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
-const RADIO_GROUP_ROOT_ATTR = "data-radio-group-root";
-const RADIO_GROUP_ITEM_ATTR = "data-radio-group-item";
+const radioGroupAttrs = createBitsAttrs({
+    component: "radio-group",
+    parts: ["root", "item"],
+});
 class RadioGroupRootState {
     opts;
-    rovingFocusGroup;
     hasValue = $derived.by(() => this.opts.value.current !== "");
+    rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
             rootNode: this.opts.ref,
-            candidateAttr: RADIO_GROUP_ITEM_ATTR,
+            candidateAttr: radioGroupAttrs.item,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
@@ -30,7 +32,7 @@ class RadioGroupRootState {
         "aria-required": getAriaRequired(this.opts.required.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-orientation": this.opts.orientation.current,
-        [RADIO_GROUP_ROOT_ATTR]: "",
+        [radioGroupAttrs.root]: "",
         ...attachRef(this.opts.ref),
     }));
 }
@@ -93,7 +95,7 @@ class RadioGroupItemState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-state": this.#isChecked ? "checked" : "unchecked",
         "aria-checked": getAriaChecked(this.#isChecked, false),
-        [RADIO_GROUP_ITEM_ATTR]: "",
+        [radioGroupAttrs.item]: "",
         type: "button",
         role: "radio",
         tabindex: this.#tabIndex,
@@ -104,9 +106,6 @@ class RadioGroupItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-//
-// INPUT
-//
 class RadioGroupInputState {
     root;
     shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);

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/components/rating-group-input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { useRatingGroupHiddenInput } from "../rating-group.svelte.js";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
+
+	const inputState = useRatingGroupHiddenInput();
+</script>
+
+{#if inputState.shouldRender}
+	<HiddenInput {...inputState.props} />
+{/if}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RatingGroupInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RatingGroupInput = InstanceType<typeof RatingGroupInput>;
+export default RatingGroupInput;

package/dist/bits/rating-group/components/rating-group-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { RatingGroupItemProps } from "../types.js";
+	import { useRatingGroupItem } from "../rating-group.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		disabled = false,
+		index,
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		...restProps
+	}: RatingGroupItemProps = $props();
+
+	const itemState = useRatingGroupItem({
+		disabled: box.with(() => Boolean(disabled)),
+		index: box.with(() => index),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...itemState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(itemState.snippetProps)}
+	</div>
+{/if}