bits-ui 2.10.0 → 2.11.0

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

@@ -3,7 +3,7 @@ import { DEV } from "esm-env";
 import { onMount, untrack } from "svelte";
 import { attachRef, DOMContext, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
+import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { useId } from "../../internal/use-id.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
@@ -435,9 +435,9 @@ export class CalendarHeadingState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-hidden": getAriaHidden(true),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "aria-hidden": boolToStrTrueOrUndef(true),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("heading")]: "",
         ...this.attachment,
     }));
@@ -482,22 +482,22 @@ export class CalendarCellState {
             this.isUnavailable);
     });
     sharedDataAttrs = $derived.by(() => ({
-        "data-unavailable": getDataUnavailable(this.isUnavailable),
+        "data-unavailable": boolToEmptyStrOrUndef(this.isUnavailable),
         "data-today": this.isDateToday ? "" : undefined,
         "data-outside-month": this.isOutsideMonth ? "" : undefined,
         "data-outside-visible-months": this.isOutsideVisibleMonths ? "" : undefined,
         "data-focused": this.isFocusedDate ? "" : undefined,
-        "data-selected": getDataSelected(this.isSelectedDate),
+        "data-selected": boolToEmptyStrOrUndef(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),
         "data-type": getDateValueType(this.opts.date.current),
-        "data-disabled": getDataDisabled(this.isDisabled ||
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled ||
             (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current)),
     }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "gridcell",
-        "aria-selected": getAriaSelected(this.isSelectedDate),
-        "aria-disabled": getAriaDisabled(this.ariaDisabled),
+        "aria-selected": boolToStr(this.isSelectedDate),
+        "aria-disabled": boolToStr(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
         ...this.attachment,
@@ -537,7 +537,7 @@ export class CalendarDayState {
         id: this.opts.id.current,
         role: "button",
         "aria-label": this.cell.labelText,
-        "aria-disabled": getAriaDisabled(this.cell.ariaDisabled),
+        "aria-disabled": boolToStr(this.cell.ariaDisabled),
         ...this.cell.sharedDataAttrs,
         tabindex: this.#tabindex,
         [this.cell.root.getBitsAttr("day")]: "",
@@ -572,8 +572,8 @@ export class CalendarNextButtonState {
         role: "button",
         type: "button",
         "aria-label": "Next",
-        "aria-disabled": getAriaDisabled(this.isDisabled),
-        "data-disabled": getDataDisabled(this.isDisabled),
+        "aria-disabled": boolToStr(this.isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
         disabled: this.isDisabled,
         [this.root.getBitsAttr("next-button")]: "",
         //
@@ -605,8 +605,8 @@ export class CalendarPrevButtonState {
         role: "button",
         type: "button",
         "aria-label": "Previous",
-        "aria-disabled": getAriaDisabled(this.isDisabled),
-        "data-disabled": getDataDisabled(this.isDisabled),
+        "aria-disabled": boolToStr(this.isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
         disabled: this.isDisabled,
         [this.root.getBitsAttr("prev-button")]: "",
         //
@@ -630,10 +630,10 @@ export class CalendarGridState {
         id: this.opts.id.current,
         tabindex: -1,
         role: "grid",
-        "aria-readonly": getAriaReadonly(this.root.opts.readonly.current),
-        "aria-disabled": getAriaDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "aria-readonly": boolToStr(this.root.opts.readonly.current),
+        "aria-disabled": boolToStr(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [this.root.getBitsAttr("grid")]: "",
         ...this.attachment,
     }));
@@ -652,8 +652,8 @@ export class CalendarGridBodyState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-body")]: "",
         ...this.attachment,
     }));
@@ -672,8 +672,8 @@ export class CalendarGridHeadState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-head")]: "",
         ...this.attachment,
     }));
@@ -692,8 +692,8 @@ export class CalendarGridRowState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-row")]: "",
         ...this.attachment,
     }));
@@ -712,8 +712,8 @@ export class CalendarHeadCellState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("head-cell")]: "",
         ...this.attachment,
     }));
@@ -732,8 +732,8 @@ export class CalendarHeaderState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        "data-readonly": getDataReadonly(this.root.opts.readonly.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.root.opts.readonly.current),
         [this.root.getBitsAttr("header")]: "",
         ...this.attachment,
     }));
@@ -794,7 +794,7 @@ export class CalendarMonthSelectState {
         id: this.opts.id.current,
         value: this.currentMonth,
         disabled: this.isDisabled,
-        "data-disabled": getDataDisabled(this.isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
         [this.root.getBitsAttr("month-select")]: "",
         //
         onchange: this.onchange,
@@ -861,7 +861,7 @@ export class CalendarYearSelectState {
         id: this.opts.id.current,
         value: this.currentYear,
         disabled: this.isDisabled,
-        "data-disabled": getDataDisabled(this.isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.isDisabled),
         [this.root.getBitsAttr("year-select")]: "",
         //
         onchange: this.onchange,

package/dist/bits/calendar/components/calendar-cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarCellState } from "../calendar.svelte.js";
 	import type { CalendarCellProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,13 +17,13 @@
 	}: CalendarCellProps = $props();
 
 	const cellState = CalendarCellState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		date: box.with(() => date),
-		month: box.with(() => month),
+		date: boxWith(() => date),
+		month: boxWith(() => month),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, cellState.props));

package/dist/bits/calendar/components/calendar-day.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarDayState } from "../calendar.svelte.js";
 	import type { CalendarDayProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarDayProps = $props();
 
 	const dayState = CalendarDayState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-grid-body.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CalendarGridBodyProps } from "../types.js";
 	import { CalendarGridBodyState } from "../calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarGridBodyProps = $props();
 
 	const gridBodyState = CalendarGridBodyState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-grid-head.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarGridHeadState } from "../calendar.svelte.js";
 	import type { CalendarGridHeadProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarGridHeadProps = $props();
 
 	const gridHeadState = CalendarGridHeadState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-grid-row.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarGridRowState } from "../calendar.svelte.js";
 	import type { CalendarGridRowProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarGridRowProps = $props();
 
 	const gridRowState = CalendarGridRowState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-grid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarGridState } from "../calendar.svelte.js";
 	import type { CalendarGridProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarGridProps = $props();
 
 	const gridState = CalendarGridState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-head-cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarHeadCellState } from "../calendar.svelte.js";
 	import type { CalendarHeadCellProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarHeadCellProps = $props();
 
 	const headCellState = CalendarHeadCellState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarHeaderState } from "../calendar.svelte.js";
 	import type { CalendarHeaderProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarHeaderProps = $props();
 
 	const headerState = CalendarHeaderState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-heading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CalendarHeadingProps } from "../types.js";
 	import { CalendarHeadingState } from "../calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CalendarHeadingProps = $props();
 
 	const headingState = CalendarHeadingState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-month-select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CalendarMonthSelectProps } from "../types.js";
 	import { CalendarMonthSelectState } from "../calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,14 +19,14 @@
 	}: CalendarMonthSelectProps = $props();
 
 	const monthSelectState = CalendarMonthSelectState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		months: box.with(() => months),
-		monthFormat: box.with(() => monthFormat),
-		disabled: box.with(() => Boolean(disabled)),
+		months: boxWith(() => months),
+		monthFormat: boxWith(() => monthFormat),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(

package/dist/bits/calendar/components/calendar-next-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CalendarNextButtonState } from "../calendar.svelte.js";
 	import type { CalendarNextButtonProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,8 +17,8 @@
 	}: CalendarNextButtonProps = $props();
 
 	const nextButtonState = CalendarNextButtonState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-prev-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CalendarPrevButtonProps } from "../types.js";
 	import { CalendarPrevButtonState } from "../calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,8 +17,8 @@
 	}: CalendarPrevButtonProps = $props();
 
 	const prevButtonState = CalendarPrevButtonState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/calendar/components/calendar-year-select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CalendarYearSelectProps } from "../types.js";
 	import { CalendarYearSelectState } from "../calendar.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -19,14 +19,14 @@
 	}: CalendarYearSelectProps = $props();
 
 	const yearSelectState = CalendarYearSelectState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		years: box.with(() => years),
-		yearFormat: box.with(() => yearFormat),
-		disabled: box.with(() => Boolean(disabled)),
+		years: boxWith(() => years),
+		yearFormat: boxWith(() => yearFormat),
+		disabled: boxWith(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(

package/dist/bits/calendar/components/calendar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import { CalendarRootState } from "../calendar.svelte.js";
 	import type { CalendarRootProps } from "../types.js";
@@ -76,36 +76,36 @@
 	);
 
 	const rootState = CalendarRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		weekdayFormat: box.with(() => weekdayFormat),
-		weekStartsOn: box.with(() => weekStartsOn),
-		pagedNavigation: box.with(() => pagedNavigation),
-		isDateDisabled: box.with(() => isDateDisabled),
-		isDateUnavailable: box.with(() => isDateUnavailable),
-		fixedWeeks: box.with(() => fixedWeeks),
-		numberOfMonths: box.with(() => numberOfMonths),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		numberOfMonths: boxWith(() => numberOfMonths),
 		locale: resolveLocaleProp(() => locale),
-		calendarLabel: box.with(() => calendarLabel),
-		readonly: box.with(() => readonly),
-		disabled: box.with(() => disabled),
-		minValue: box.with(() => minValue),
-		maxValue: box.with(() => maxValue),
-		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
-		initialFocus: box.with(() => initialFocus),
-		maxDays: box.with(() => maxDays),
-		placeholder: box.with(
+		calendarLabel: boxWith(() => calendarLabel),
+		readonly: boxWith(() => readonly),
+		disabled: boxWith(() => disabled),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		initialFocus: boxWith(() => initialFocus),
+		maxDays: boxWith(() => maxDays),
+		placeholder: boxWith(
 			() => placeholder as DateValue,
 			(v) => {
 				placeholder = v;
 				onPlaceholderChange(v as DateValue);
 			}
 		),
-		preventDeselect: box.with(() => preventDeselect),
-		value: box.with(
+		preventDeselect: boxWith(() => preventDeselect),
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
@@ -113,9 +113,9 @@
 				onValueChange(v as any);
 			}
 		),
-		type: box.with(() => type),
-		monthFormat: box.with(() => monthFormat),
-		yearFormat: box.with(() => yearFormat),
+		type: boxWith(() => type),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
 		defaultPlaceholder,
 	});
 

package/dist/bits/calendar/components/calendar.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CalendarRootProps } from "../types.js";
-declare const Calendar: import("svelte").Component<CalendarRootProps, {}, "value" | "placeholder" | "ref">;
+declare const Calendar: import("svelte").Component<CalendarRootProps, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

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

@@ -73,7 +73,7 @@ export declare class CheckboxRootState {
     readonly props: {
         readonly id: string;
         readonly role: "checkbox";
-        readonly type: "button" | "reset" | "submit" | null | undefined;
+        readonly type: "reset" | "submit" | "button" | null | undefined;
         readonly disabled: boolean;
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "aria-required": "true" | "false";

package/dist/bits/checkbox/checkbox.svelte.js

@@ -1,6 +1,6 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaChecked, getAriaReadonly, getAriaRequired, getDataDisabled, getDataReadonly, } from "../../internal/attrs.js";
+import { boolToStr, createBitsAttrs, getAriaChecked, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { arraysAreEqual } from "../../internal/arrays.js";
 import { isHTMLElement } from "../../internal/is.js";
@@ -47,7 +47,7 @@ export class CheckboxGroupState {
         id: this.opts.id.current,
         role: "group",
         "aria-labelledby": this.labelId,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         [checkboxAttrs.group]: "",
         ...this.attachment,
     }));
@@ -70,7 +70,7 @@ export class CheckboxGroupLabelState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-disabled": getDataDisabled(this.group.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.group.opts.disabled.current),
         [checkboxAttrs["group-label"]]: "",
         ...this.attachment,
     }));
@@ -164,10 +164,10 @@ export class CheckboxRootState {
         type: this.opts.type.current,
         disabled: this.trueDisabled,
         "aria-checked": getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
-        "aria-required": getAriaRequired(this.trueRequired),
-        "aria-readonly": getAriaReadonly(this.trueReadonly),
-        "data-disabled": getDataDisabled(this.trueDisabled),
-        "data-readonly": getDataReadonly(this.trueReadonly),
+        "aria-required": boolToStr(this.trueRequired),
+        "aria-readonly": boolToStr(this.trueReadonly),
+        "data-disabled": boolToEmptyStrOrUndef(this.trueDisabled),
+        "data-readonly": boolToEmptyStrOrUndef(this.trueReadonly),
         "data-state": getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
         [checkboxAttrs.root]: "",
         //

package/dist/bits/checkbox/components/checkbox-group-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CheckboxGroupLabelProps } from "../types.js";
 	import { CheckboxGroupLabelState } from "../checkbox.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CheckboxGroupLabelProps = $props();
 
 	const labelState = CheckboxGroupLabelState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/checkbox/components/checkbox-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CheckboxGroupProps } from "../types.js";
 	import { CheckboxGroupState } from "../checkbox.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -23,16 +23,16 @@
 	}: CheckboxGroupProps = $props();
 
 	const groupState = CheckboxGroupState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => Boolean(disabled)),
-		required: box.with(() => Boolean(required)),
-		readonly: box.with(() => Boolean(readonly)),
-		name: box.with(() => name),
-		value: box.with(
+		disabled: boxWith(() => Boolean(disabled)),
+		required: boxWith(() => Boolean(required)),
+		readonly: boxWith(() => Boolean(readonly)),
+		name: boxWith(() => name),
+		value: boxWith(
 			() => $state.snapshot(value),
 			(v) => {
 				if (arraysAreEqual(value, v)) return;
@@ -40,7 +40,7 @@
 				onValueChange(v);
 			}
 		),
-		onValueChange: box.with(() => onValueChange),
+		onValueChange: boxWith(() => onValueChange),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));

package/dist/bits/checkbox/components/checkbox-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CheckboxGroupProps } from "../types.js";
-declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value" | "ref">;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "ref" | "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;