bits-ui 2.10.0 → 2.11.0

package/dist/bits/select/components/select-trigger.svelte

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

package/dist/bits/select/components/select-viewport.svelte

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

package/dist/bits/select/components/select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import { SelectRootState } from "../select.svelte.js";
 	import type { SelectRootProps } from "../types.js";
 	import SelectHiddenInput from "./select-hidden-input.svelte";
@@ -44,7 +44,7 @@
 
 	const rootState = SelectRootState.create({
 		type,
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -52,26 +52,26 @@
 				onValueChange(v as any);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		disabled: box.with(() => disabled),
-		required: box.with(() => required),
-		open: box.with(
+		disabled: boxWith(() => disabled),
+		required: boxWith(() => required),
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		loop: box.with(() => loop),
-		scrollAlignment: box.with(() => scrollAlignment),
-		name: box.with(() => name),
+		loop: boxWith(() => loop),
+		scrollAlignment: boxWith(() => scrollAlignment),
+		name: boxWith(() => name),
 		isCombobox: false,
-		items: box.with(() => items),
-		allowDeselect: box.with(() => allowDeselect),
-		inputValue: box.with(
+		items: boxWith(() => items),
+		allowDeselect: boxWith(() => allowDeselect),
+		inputValue: boxWith(
 			() => inputValue,
 			(v) => (inputValue = v)
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/select/select.svelte.js

@@ -1,8 +1,8 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
-import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
+import { boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, getDataOpenClosed, boolToTrueOrUndef, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { noop } from "../../internal/noop.js";
 import { isIOS } from "../../internal/is.js";
@@ -70,7 +70,7 @@ class SelectBaseRootState {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
         new OpenChangeComplete({
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
@@ -382,9 +382,9 @@ export class SelectInputState {
         disabled: this.root.opts.disabled.current ? true : undefined,
         "aria-activedescendant": this.root.highlightedId,
         "aria-autocomplete": "list",
-        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
+        "aria-expanded": boolToStr(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         onkeydown: this.onkeydown,
         oninput: this.oninput,
         [this.root.getBitsAttr("input")]: "",
@@ -434,7 +434,7 @@ export class SelectComboTriggerState {
         disabled: this.root.opts.disabled.current ? true : undefined,
         "aria-haspopup": "listbox",
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [this.root.getBitsAttr("trigger")]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
@@ -668,10 +668,10 @@ export class SelectTriggerState {
         id: this.opts.id.current,
         disabled: this.root.opts.disabled.current ? true : undefined,
         "aria-haspopup": "listbox",
-        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
+        "aria-expanded": boolToStr(this.root.opts.open.current),
         "aria-activedescendant": this.root.highlightedId,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         "data-placeholder": this.root.hasValue ? undefined : "",
         [this.root.getBitsAttr("trigger")]: "",
         onpointerdown: this.onpointerdown,
@@ -879,7 +879,7 @@ export class SelectItemState {
             ? "true"
             : undefined,
         "data-value": this.opts.value.current,
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         "data-highlighted": this.root.highlightedValue === this.opts.value.current &&
             !this.opts.disabled.current
             ? ""
@@ -954,8 +954,8 @@ export class SelectHiddenInputState {
         }
     }
     props = $derived.by(() => ({
-        disabled: getDisabled(this.root.opts.disabled.current),
-        required: getRequired(this.root.opts.required.current),
+        disabled: boolToTrueOrUndef(this.root.opts.disabled.current),
+        required: boolToTrueOrUndef(this.root.opts.required.current),
         name: this.root.opts.name.current,
         value: this.opts.value.current,
         onfocus: this.onfocus,
@@ -1053,7 +1053,7 @@ export class SelectScrollButtonImplState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-hidden": getAriaHidden(true),
+        "aria-hidden": boolToStrTrueOrUndef(true),
         style: {
             flexShrink: 0,
         },

package/dist/bits/separator/components/separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { SeparatorRootState } from "../separator.svelte.js";
 	import type { SeparatorRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,13 +17,13 @@
 	}: SeparatorRootProps = $props();
 
 	const rootState = SeparatorRootState.create({
-		ref: box.with(
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		id: box.with(() => id),
-		decorative: box.with(() => decorative),
-		orientation: box.with(() => orientation),
+		id: boxWith(() => id),
+		decorative: boxWith(() => decorative),
+		orientation: boxWith(() => orientation),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

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

@@ -14,9 +14,9 @@ export declare class SeparatorRootState {
     readonly props: {
         readonly id: string;
         readonly role: "none" | "separator";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "aria-hidden": "true" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
     };
 }
 export {};

package/dist/bits/separator/separator.svelte.js

@@ -1,5 +1,5 @@
 import { attachRef } from "svelte-toolbelt";
-import { createBitsAttrs, getAriaHidden, getAriaOrientation, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStrTrueOrUndef } from "../../internal/attrs.js";
 const separatorAttrs = createBitsAttrs({
     component: "separator",
     parts: ["root"],
@@ -17,9 +17,9 @@ export class SeparatorRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: this.opts.decorative.current ? "none" : "separator",
-        "aria-orientation": getAriaOrientation(this.opts.orientation.current),
-        "aria-hidden": getAriaHidden(this.opts.decorative.current),
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
+        "aria-orientation": this.opts.orientation.current,
+        "aria-hidden": boolToStrTrueOrUndef(this.opts.decorative.current),
+        "data-orientation": this.opts.orientation.current,
         [separatorAttrs.root]: "",
         ...this.attachment,
     }));

package/dist/bits/slider/components/slider-range.svelte

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

package/dist/bits/slider/components/slider-thumb-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SliderThumbLabelProps } from "../types.js";
 	import { SliderRootContext, SliderThumbLabelState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -31,13 +31,13 @@
 	});
 
 	const tickLabelState = SliderThumbLabelState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		index: box.with(() => index),
-		position: box.with(() => position),
+		index: boxWith(() => index),
+		position: boxWith(() => position),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));

package/dist/bits/slider/components/slider-thumb.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SliderThumbProps } from "../types.js";
 	import { SliderThumbState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,13 +17,13 @@
 	}: SliderThumbProps = $props();
 
 	const thumbState = SliderThumbState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		index: box.with(() => index),
-		disabled: box.with(() => disabled),
+		index: boxWith(() => index),
+		disabled: boxWith(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, thumbState.props));

package/dist/bits/slider/components/slider-tick-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SliderTickLabelProps } from "../types.js";
 	import { SliderRootContext, SliderTickLabelState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -31,13 +31,13 @@
 	});
 
 	const tickLabelState = SliderTickLabelState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		index: box.with(() => index),
-		position: box.with(() => position),
+		index: boxWith(() => index),
+		position: boxWith(() => position),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));

package/dist/bits/slider/components/slider-tick.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { SliderTickProps } from "../types.js";
 	import { SliderTickState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: SliderTickProps = $props();
 
 	const tickState = SliderTickState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		index: box.with(() => index),
+		index: boxWith(() => index),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, tickState.props));

package/dist/bits/slider/components/slider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps, type WritableBox } from "svelte-toolbelt";
+	import { boxWith, mergeProps, type WritableBox } from "svelte-toolbelt";
 	import type { SliderRootProps } from "../types.js";
 	import { SliderRootState } from "../slider.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -60,12 +60,12 @@
 	);
 
 	const rootState = SliderRootState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
@@ -74,17 +74,17 @@
 			}
 		) as WritableBox<number> | WritableBox<number[]>,
 		// @ts-expect-error - we know
-		onValueCommit: box.with(() => onValueCommit),
-		disabled: box.with(() => disabled),
-		min: box.with(() => min),
-		max: box.with(() => max),
-		step: box.with(() => step),
-		dir: box.with(() => dir),
-		autoSort: box.with(() => autoSort),
-		orientation: box.with(() => orientation),
-		thumbPositioning: box.with(() => thumbPositioning),
+		onValueCommit: boxWith(() => onValueCommit),
+		disabled: boxWith(() => disabled),
+		min: boxWith(() => min),
+		max: boxWith(() => max),
+		step: boxWith(() => step),
+		dir: boxWith(() => dir),
+		autoSort: boxWith(() => autoSort),
+		orientation: boxWith(() => orientation),
+		thumbPositioning: boxWith(() => thumbPositioning),
 		type,
-		trackPadding: box.with(() => trackPadding),
+		trackPadding: boxWith(() => trackPadding),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

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

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

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

@@ -32,7 +32,7 @@ declare abstract class SliderBaseRootState {
     getPositionFromValue: (thumbValue: number) => number;
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly style: {
             readonly touchAction: "pan-x" | "pan-y" | undefined;
@@ -66,16 +66,16 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
     readonly thumbsRenderArr: number[];
     readonly ticksPropsArr: {
         readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
@@ -139,16 +139,16 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     }[];
     readonly thumbsRenderArr: number[];
     readonly ticksPropsArr: {
         readonly [sliderAttrs.tick]: "";
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
@@ -1021,7 +1021,7 @@ export declare class SliderRangeState {
     };
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly style: {
             accentColor?: import("csstype").Property.AccentColor | undefined;
@@ -1876,9 +1876,9 @@ export declare class SliderThumbState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     } | {
         readonly id: string;
@@ -1891,9 +1891,9 @@ export declare class SliderThumbState {
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
         readonly "aria-disabled": "true" | "false";
-        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "aria-orientation": Orientation;
         readonly "data-value": number | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly style: import("../../shared/index.js").StyleProperties;
     };
 }
@@ -1910,7 +1910,7 @@ export declare class SliderTickState {
     readonly props: {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly "data-selected": "" | undefined;
@@ -1918,7 +1918,7 @@ export declare class SliderTickState {
     } | {
         readonly id: string;
         readonly "data-disabled": "" | undefined;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
@@ -1937,7 +1937,7 @@ export declare class SliderTickLabelState {
     constructor(opts: SliderTickLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
@@ -1959,7 +1959,7 @@ export declare class SliderThumbLabelState {
     constructor(opts: SliderThumbLabelStateOpts, root: SliderRoot);
     readonly props: {
         readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-value": number;
         readonly "data-active": "" | undefined;

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

@@ -7,7 +7,7 @@ import { executeCallbacks, onMountEffect, attachRef, DOMContext, } from "svelte-
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
-import { createBitsAttrs, getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
@@ -90,8 +90,8 @@ class SliderBaseRootState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         style: {
             touchAction: this.#touchAction,
         },
@@ -223,10 +223,10 @@ class SliderSingleRootState extends SliderBaseRootState {
                 "aria-valuemin": this.opts.min.current,
                 "aria-valuemax": this.opts.max.current,
                 "aria-valuenow": thumbValue,
-                "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-                "aria-orientation": getAriaOrientation(this.opts.orientation.current),
+                "aria-disabled": boolToStr(this.opts.disabled.current),
+                "aria-orientation": this.opts.orientation.current,
                 "data-value": thumbValue,
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-orientation": this.opts.orientation.current,
                 style,
                 [sliderAttrs.thumb]: "",
             };
@@ -247,8 +247,8 @@ class SliderSingleRootState extends SliderBaseRootState {
             const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
             const bounded = tickValue <= currValue;
             return {
-                "data-disabled": getDataDisabled(this.opts.disabled.current),
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+                "data-orientation": this.opts.orientation.current,
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
                 "data-selected": this.isTickValueSelected(tickValue) ? "" : undefined,
@@ -485,10 +485,10 @@ class SliderMultiRootState extends SliderBaseRootState {
                 "aria-valuemin": this.opts.min.current,
                 "aria-valuemax": this.opts.max.current,
                 "aria-valuenow": thumbValue,
-                "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-                "aria-orientation": getAriaOrientation(this.opts.orientation.current),
+                "aria-disabled": boolToStr(this.opts.disabled.current),
+                "aria-orientation": this.opts.orientation.current,
                 "data-value": thumbValue,
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-orientation": this.opts.orientation.current,
                 style,
                 [sliderAttrs.thumb]: "",
             };
@@ -511,8 +511,8 @@ class SliderMultiRootState extends SliderBaseRootState {
                 ? tickValue <= currValue[0]
                 : currValue[0] <= tickValue && tickValue <= currValue[currValue.length - 1];
             return {
-                "data-disabled": getDataDisabled(this.opts.disabled.current),
-                "data-orientation": getDataOrientation(this.opts.orientation.current),
+                "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+                "data-orientation": this.opts.orientation.current,
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
                 style,
@@ -605,8 +605,8 @@ export class SliderRangeState {
     });
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         style: this.rangeStyles,
         [sliderAttrs.range]: "",
         ...this.attachment,
@@ -721,7 +721,7 @@ export class SliderThumbState {
         id: this.opts.id.current,
         onkeydown: this.onkeydown,
         "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
-        "data-disabled": getDataDisabled(this.opts.disabled.current || this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current || this.root.opts.disabled.current),
         tabindex: this.opts.disabled.current || this.root.opts.disabled.current ? -1 : 0,
         ...this.attachment,
     }));
@@ -765,8 +765,8 @@ export class SliderTickLabelState {
         const style = getTickLabelStyles(this.root.direction, tickPosition, labelPosition);
         return {
             id: this.opts.id.current,
-            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-orientation": this.root.opts.orientation.current,
+            "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
             "data-bounded": tickProps["data-bounded"],
             "data-value": tickValue,
             "data-selected": this.root.isTickValueSelected(tickValue) ? "" : undefined,
@@ -797,8 +797,8 @@ export class SliderThumbLabelState {
         const style = getThumbLabelStyles(this.root.direction, thumbPosition, labelPosition);
         return {
             id: this.opts.id.current,
-            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-orientation": this.root.opts.orientation.current,
+            "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
             "data-value": thumbValue,
             "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
             "data-position": labelPosition,