bits-ui 2.2.0 → 2.3.0

package/dist/bits/index.d.ts

@@ -26,6 +26,7 @@ export { Popover } from "./popover/index.js";
 export { Progress } from "./progress/index.js";
 export { RadioGroup } from "./radio-group/index.js";
 export { RangeCalendar } from "./range-calendar/index.js";
+export { RatingGroup } from "./rating-group/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export { Select } from "./select/index.js";
 export { Separator } from "./separator/index.js";

package/dist/bits/index.js

@@ -26,6 +26,7 @@ export { Popover } from "./popover/index.js";
 export { Progress } from "./progress/index.js";
 export { RadioGroup } from "./radio-group/index.js";
 export { RangeCalendar } from "./range-calendar/index.js";
+export { RatingGroup } from "./rating-group/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export { Select } from "./select/index.js";
 export { Separator } from "./separator/index.js";

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}

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

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

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { RatingGroupRootProps } from "../types.js";
+	import { useRatingGroupRoot } from "../rating-group.svelte.js";
+	import RatingGroupInput from "./rating-group-input.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		disabled = false,
+		children,
+		child,
+		value = $bindable(0),
+		ref = $bindable(null),
+		orientation = "horizontal",
+		name = undefined,
+		required = false,
+		min = 0,
+		max = 5,
+		allowHalf = false,
+		readonly = false,
+		id = createId(uid),
+		onValueChange = noop,
+		"aria-label": ariaLabel,
+		"aria-valuetext": ariaValuetextProp,
+		hoverPreview = true,
+		...restProps
+	}: RatingGroupRootProps = $props();
+
+	if (value < min || value > max) {
+		value = Math.max(min, Math.min(max, value));
+	}
+
+	const ariaValuetext: NonNullable<RatingGroupRootProps["aria-valuetext"]> = $derived.by(() => {
+		if (ariaValuetextProp) return ariaValuetextProp;
+		return (value: number, max: number) => `${value} out of ${max}`;
+	});
+
+	const rootState = useRatingGroupRoot({
+		orientation: box.with(() => orientation),
+		disabled: box.with(() => disabled),
+		name: box.with(() => name),
+		required: box.with(() => required),
+		min: box.with(() => min),
+		max: box.with(() => max),
+		allowHalf: box.with(() => allowHalf),
+		readonly: box.with(() => readonly),
+		id: box.with(() => id),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (v === value) return;
+				value = v;
+				onValueChange?.(v);
+			}
+		),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		ariaValuetext: box.with(() => ariaValuetext),
+		hoverPreview: box.with(() => hoverPreview),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, rootState.props, { "aria-label": ariaLabel })
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</div>
+{/if}
+
+<RatingGroupInput />

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

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

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

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/rating-group.svelte";
+export { default as Item } from "./components/rating-group-item.svelte";
+export type { RatingGroupRootProps as RootProps, RatingGroupItemProps as ItemProps, } from "./types.js";

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/rating-group.svelte";
+export { default as Item } from "./components/rating-group-item.svelte";

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

@@ -0,0 +1 @@
+export * as RatingGroup from "./exports.js";

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

@@ -0,0 +1 @@
+export * as RatingGroup from "./exports.js";

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

@@ -0,0 +1,114 @@
+import { DOMContext } from "svelte-toolbelt";
+import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { RatingGroupAriaValuetext, RatingGroupItemState as RatingGroupItemStateType } from "./types.js";
+import type { Orientation } from "../../shared/index.js";
+type RatingGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    orientation: Orientation;
+    name: string | undefined;
+    min: number;
+    max: number;
+    allowHalf: boolean;
+    readonly: boolean;
+    hoverPreview: boolean;
+    ariaValuetext: NonNullable<RatingGroupAriaValuetext>;
+}> & WritableBoxedValues<{
+    value: number;
+}>>;
+declare class RatingGroupRootState {
+    #private;
+    readonly opts: RatingGroupRootStateProps;
+    domContext: DOMContext;
+    readonly hasValue: boolean;
+    readonly valueToUse: number;
+    readonly isRTL: boolean;
+    readonly ariaValuetext: string;
+    readonly items: {
+        index: number;
+        state: RatingGroupItemStateType;
+    }[];
+    constructor(opts: RatingGroupRootStateProps);
+    isActive(itemIndex: number): boolean;
+    isPartial(itemIndex: number): boolean;
+    setHoverValue(value: number | null): void;
+    setValue(value: number): void;
+    calculateRatingFromPointer(itemIndex: number, event: {
+        clientX: number;
+        clientY: number;
+        currentTarget: HTMLElement;
+    }): number;
+    onpointerleave(): void;
+    readonly handlers: Record<string, () => void>;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly snippetProps: {
+        items: {
+            index: number;
+            state: RatingGroupItemStateType;
+        }[];
+        value: number;
+        max: number;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly role: "slider";
+        readonly "aria-valuenow": number;
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuetext": string;
+        readonly "aria-orientation": Orientation;
+        readonly "aria-required": "true" | "false";
+        readonly "aria-disabled": "true" | undefined;
+        readonly "aria-label": "Rating";
+        readonly "data-disabled": "" | undefined;
+        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;
+    };
+}
+type RatingGroupItemStateProps = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean;
+    index: number;
+}>>;
+declare class RatingGroupItemState {
+    #private;
+    readonly opts: RatingGroupItemStateProps;
+    readonly root: RatingGroupRootState;
+    constructor(opts: RatingGroupItemStateProps, root: RatingGroupRootState);
+    onclick(e: BitsMouseEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
+    readonly snippetProps: {
+        readonly state: RatingGroupItemStateType;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly role: "presentation";
+        readonly "data-value": number;
+        readonly "data-orientation": Orientation;
+        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;
+    };
+}
+declare class RatingGroupHiddenInputState {
+    readonly root: RatingGroupRootState;
+    readonly shouldRender: boolean;
+    readonly props: {
+        readonly name: string | undefined;
+        readonly value: number;
+        readonly required: boolean;
+        readonly disabled: boolean;
+    };
+    constructor(root: RatingGroupRootState);
+}
+export declare function useRatingGroupRoot(props: RatingGroupRootStateProps): RatingGroupRootState;
+export declare function useRatingGroupItem(props: RatingGroupItemStateProps): RatingGroupItemState;
+export declare function useRatingGroupHiddenInput(): RatingGroupHiddenInputState;
+export {};

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

@@ -0,0 +1,295 @@
+import { attachRef, DOMContext } from "svelte-toolbelt";
+import { Context } from "runed";
+import { 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";
+class RatingGroupRootState {
+    opts;
+    #hoverValue = $state(null);
+    #keySequence = $state("");
+    #keySequenceTimeout = null;
+    domContext;
+    hasValue = $derived.by(() => this.opts.value.current > 0);
+    valueToUse = $derived.by(() => this.#hoverValue ?? this.opts.value.current);
+    isRTL = $derived.by(() => {
+        const element = this.opts.ref.current;
+        if (!element)
+            return false;
+        const style = getComputedStyle(element);
+        return style.direction === "rtl";
+    });
+    ariaValuetext = $derived.by(() => {
+        return typeof this.opts.ariaValuetext.current === "function"
+            ? this.opts.ariaValuetext.current(this.opts.value.current, this.opts.max.current)
+            : this.opts.ariaValuetext.current;
+    });
+    items = $derived.by(() => {
+        const { max, allowHalf } = this.opts;
+        const value = this.valueToUse;
+        return Array.from({ length: max.current }, (_, i) => {
+            const itemValue = i + 1;
+            const halfValue = itemValue - 0.5;
+            const state = value >= itemValue
+                ? "active"
+                : allowHalf.current && value >= halfValue
+                    ? "partial"
+                    : "inactive";
+            return { index: i, state };
+        });
+    });
+    constructor(opts) {
+        this.opts = opts;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.domContext = new DOMContext(this.opts.ref);
+    }
+    isActive(itemIndex) {
+        return this.valueToUse >= itemIndex + 1;
+    }
+    isPartial(itemIndex) {
+        if (!this.opts.allowHalf.current)
+            return false;
+        const itemValue = itemIndex + 1;
+        return this.valueToUse >= itemValue - 0.5 && this.valueToUse < itemValue;
+    }
+    setHoverValue(value) {
+        if (this.opts.readonly.current ||
+            this.opts.disabled.current ||
+            !this.opts.hoverPreview.current)
+            return;
+        this.#hoverValue =
+            value === null
+                ? null
+                : Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));
+    }
+    setValue(value) {
+        if (this.opts.readonly.current || this.opts.disabled.current)
+            return;
+        this.opts.value.current = Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));
+    }
+    calculateRatingFromPointer(itemIndex, event) {
+        const ratingValue = itemIndex + 1;
+        if (!this.opts.allowHalf.current)
+            return ratingValue;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const style = getComputedStyle(event.currentTarget);
+        const isHorizontal = this.opts.orientation.current === "horizontal";
+        const position = isHorizontal
+            ? (event.clientX - rect.left) / rect.width
+            : (event.clientY - rect.top) / rect.height;
+        const normalizedPosition = style.direction === "rtl" ? 1 - position : position;
+        return normalizedPosition < 0.5 ? ratingValue - 0.5 : ratingValue;
+    }
+    onpointerleave() {
+        this.setHoverValue(null);
+    }
+    handlers = {
+        [kbd.ARROW_UP]: () => this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1),
+        [kbd.ARROW_RIGHT]: () => {
+            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_LEFT]: () => {
+            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),
+    };
+    onkeydown(e) {
+        if (this.opts.disabled.current || this.opts.readonly.current)
+            return;
+        if (this.handlers[e.key]) {
+            e.preventDefault();
+            this.#clearKeySequence();
+            this.handlers[e.key]?.();
+            return;
+        }
+        if (this.opts.allowHalf.current && this.#handleDecimalInput(e))
+            return;
+        // handle direct number input
+        const num = parseInt(e.key || "");
+        if (!isNaN(num) && e.key) {
+            e.preventDefault();
+            if (num >= this.opts.min.current && num <= this.opts.max.current) {
+                this.setValue(num);
+                if (this.opts.allowHalf.current) {
+                    this.#startDecimalListening(num);
+                }
+            }
+            return;
+        }
+        this.#clearKeySequence();
+    }
+    #adjustValue(delta) {
+        this.setValue(this.opts.value.current + delta);
+    }
+    #handleDecimalInput(e) {
+        if (!e.key)
+            return false;
+        if (e.key === ".") {
+            e.preventDefault();
+            this.#keySequence += e.key;
+            return true;
+        }
+        if (e.key === "5" && this.#keySequence.match(/^\d+\.$/)) {
+            e.preventDefault();
+            this.#keySequence += e.key;
+            const match = this.#keySequence.match(/^(\d+)\.5$/);
+            if (match?.[1]) {
+                const value = parseFloat(this.#keySequence);
+                if (value >= this.opts.min.current && value <= this.opts.max.current) {
+                    this.setValue(value);
+                    this.#clearKeySequence();
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    #startDecimalListening(baseValue) {
+        this.#keySequence = baseValue.toString();
+        if (this.#keySequenceTimeout) {
+            this.domContext.clearTimeout(this.#keySequenceTimeout);
+        }
+        this.#keySequenceTimeout = this.domContext.setTimeout(() => this.#clearKeySequence(), 1000);
+    }
+    #clearKeySequence() {
+        this.#keySequence = "";
+        if (this.#keySequenceTimeout) {
+            this.domContext.clearTimeout(this.#keySequenceTimeout);
+            this.#keySequenceTimeout = null;
+        }
+    }
+    snippetProps = $derived.by(() => ({
+        items: this.items,
+        value: this.opts.value.current,
+        max: this.opts.max.current,
+    }));
+    props = $derived.by(() => {
+        return {
+            id: this.opts.id.current,
+            role: "slider",
+            "aria-valuenow": this.opts.value.current,
+            "aria-valuemin": this.opts.min.current,
+            "aria-valuemax": this.opts.max.current,
+            "aria-valuetext": this.ariaValuetext,
+            "aria-orientation": this.opts.orientation.current,
+            "aria-required": getAriaRequired(this.opts.required.current),
+            "aria-disabled": this.opts.disabled.current ? "true" : undefined,
+            "aria-label": "Rating",
+            "data-disabled": getDataDisabled(this.opts.disabled.current),
+            "data-readonly": this.opts.readonly.current ? "" : undefined,
+            "data-orientation": this.opts.orientation.current,
+            tabindex: this.opts.disabled.current ? -1 : 0,
+            [RATING_GROUP_ROOT_ATTR]: "",
+            onkeydown: this.onkeydown,
+            onpointerleave: this.onpointerleave,
+            ...attachRef(this.opts.ref),
+        };
+    });
+}
+class RatingGroupItemState {
+    opts;
+    root;
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #isActive = $derived.by(() => this.root.isActive(this.opts.index.current));
+    #isPartial = $derived.by(() => this.root.isPartial(this.opts.index.current));
+    #state = $derived.by(() => {
+        if (this.#isActive)
+            return "active";
+        if (this.#isPartial)
+            return "partial";
+        return "inactive";
+    });
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.onclick = this.onclick.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+    }
+    onclick(e) {
+        if (this.#isDisabled || this.root.opts.readonly.current)
+            return;
+        // handle clearing when clicking on first item (index 0) that's already
+        // active and min is 0
+        if (this.opts.index.current === 0 &&
+            this.root.opts.min.current === 0 &&
+            this.root.opts.value.current > 0) {
+            const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+            const currentValue = this.root.opts.value.current;
+            // only clear if the calculated rating exactly matches current value
+            if (newValue === currentValue) {
+                this.root.setValue(0);
+                if (this.root.opts.ref.current) {
+                    this.root.opts.ref.current.focus();
+                }
+                return;
+            }
+        }
+        const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+        this.root.setValue(newValue);
+        if (this.root.opts.ref.current) {
+            this.root.opts.ref.current.focus();
+        }
+    }
+    onpointermove(e) {
+        if (this.#isDisabled ||
+            this.root.opts.readonly.current ||
+            !this.root.opts.hoverPreview.current)
+            return;
+        // skip hover preview for touch devices
+        if (e.pointerType === "touch")
+            return;
+        const hoverValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+        this.root.setHoverValue(hoverValue);
+    }
+    snippetProps = $derived.by(() => {
+        return {
+            state: this.#state,
+        };
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "presentation",
+        "data-value": this.opts.index.current + 1,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-readonly": this.root.opts.readonly.current ? "" : undefined,
+        "data-state": this.#state,
+        [RATING_GROUP_ITEM_ATTR]: "",
+        //
+        onclick: this.onclick,
+        onpointermove: this.onpointermove,
+        ...attachRef(this.opts.ref),
+    }));
+}
+class RatingGroupHiddenInputState {
+    root;
+    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
+    props = $derived.by(() => ({
+        name: this.root.opts.name.current,
+        value: this.root.opts.value.current,
+        required: this.root.opts.required.current,
+        disabled: this.root.opts.disabled.current,
+    }));
+    constructor(root) {
+        this.root = root;
+    }
+}
+const RatingGroupRootContext = new Context("RatingGroup.Root");
+export function useRatingGroupRoot(props) {
+    return RatingGroupRootContext.set(new RatingGroupRootState(props));
+}
+export function useRatingGroupItem(props) {
+    return new RatingGroupItemState(props, RatingGroupRootContext.get());
+}
+export function useRatingGroupHiddenInput() {
+    return new RatingGroupHiddenInputState(RatingGroupRootContext.get());
+}

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

@@ -0,0 +1,111 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../index.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type RatingGroupItemState = "active" | "partial" | "inactive";
+export type RatingGroupItemData = {
+    index: number;
+    state: RatingGroupItemState;
+};
+export type RatingGroupRootSnippetProps = {
+    items: RatingGroupItemData[];
+    value: number;
+    max: number;
+};
+export type RatingGroupAriaValuetext = BitsPrimitiveDivAttributes["aria-valuetext"] | ((value: number, max: number) => string);
+export type RatingGroupRootPropsWithoutHTML = WithChild<{
+    /**
+     * The orientation of the rating group. Used to determine
+     * how keyboard interactions work.
+     *
+     * @default "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * The current rating value.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The callback to call when the rating value changes.
+     */
+    onValueChange?: OnChangeFn<number>;
+    /**
+     * The name to apply to the rating group's input element for
+     * form submission. If not provided, a hidden input will not
+     * be rendered and the rating group will not be part of a form.
+     *
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Whether the rating group is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the rating group is required for form submission.
+     * If `true`, ensure you provide a `name` prop so the hidden
+     * input is rendered.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The minimum rating value.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum rating value (number of items).
+     *
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Whether to allow half-star ratings.
+     *
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Whether the rating group is readonly.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Whether to show a preview when hovering over rating items.
+     * Touch events are ignored to prevent accidental previews.
+     *
+     * @default true
+     */
+    hoverPreview?: boolean;
+    /**
+     * An extended `aria-valuetext` property to use for the rating group.
+     * Can either be a string, or a function that receives the current value
+     * and max value and returns a string.
+     *
+     * @default ((value: number, max: number) => `${value} out of ${max}`)
+     */
+    "aria-valuetext"?: RatingGroupAriaValuetext;
+}, RatingGroupRootSnippetProps>;
+export type RatingGroupRootProps = RatingGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RatingGroupRootPropsWithoutHTML>;
+export type RatingGroupItemSnippetProps = {
+    state: RatingGroupItemState;
+};
+export type RatingGroupItemPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the rating item (0-based index).
+     */
+    index: number;
+    /**
+     * Whether the rating item is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean | null | undefined;
+}, RatingGroupItemSnippetProps>;
+export type RatingGroupItemProps = RatingGroupItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RatingGroupItemPropsWithoutHTML>;

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

@@ -0,0 +1 @@
+export {};

package/dist/bits/slider/helpers.js

@@ -132,6 +132,29 @@ export function getThumbLabelStyles(direction, thumbPosition, labelPosition = "t
     }
     return style;
 }
+/**
+ * Gets the number of decimal places in a number
+ */
+function getDecimalPlaces(num) {
+    if (Math.floor(num) === num)
+        return 0;
+    const str = num.toString();
+    if (str.indexOf(".") !== -1 && str.indexOf("e-") === -1) {
+        return str.split(".")[1].length;
+    }
+    else if (str.indexOf("e-") !== -1) {
+        const parts = str.split("e-");
+        return parseInt(parts[1], 10);
+    }
+    return 0;
+}
+/**
+ * Rounds a number to the specified number of decimal places
+ */
+function roundToPrecision(num, precision) {
+    const factor = Math.pow(10, precision);
+    return Math.round(num * factor) / factor;
+}
 /**
  * Normalizes step to always be a sorted array of valid values within min/max range
  */
@@ -140,13 +163,21 @@ export function normalizeSteps(step, min, max) {
         // generate regular steps - match original behavior exactly
         const difference = max - min;
         let count = Math.ceil(difference / step);
-        if (difference % step === 0) {
+        // Get precision from step to avoid floating point errors
+        const precision = getDecimalPlaces(step);
+        // Check if difference is divisible by step using integer arithmetic to avoid floating point errors
+        const factor = Math.pow(10, precision);
+        const intDifference = Math.round(difference * factor);
+        const intStep = Math.round(step * factor);
+        if (intDifference % intStep === 0) {
             count++;
         }
         const steps = [];
         for (let i = 0; i < count; i++) {
             const value = min + i * step;
-            steps.push(value);
+            // Round to the precision of the step to avoid floating point errors
+            const roundedValue = roundToPrecision(value, precision);
+            steps.push(roundedValue);
         }
         return steps;
     }

package/dist/bits/tooltip/components/tooltip-content-static.svelte

@@ -46,6 +46,7 @@
 		preventScroll={false}
 		forceMount={true}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props })}
 			{@const mergedProps = mergeProps(props, {
@@ -64,6 +65,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		tooltip={true}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

package/dist/bits/tooltip/components/tooltip-content.svelte

@@ -64,6 +64,7 @@
 		preventScroll={false}
 		forceMount={true}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {
@@ -91,6 +92,7 @@
 		preventScroll={false}
 		forceMount={false}
 		ref={contentState.opts.ref}
+		tooltip={true}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const mergedProps = mergeProps(props, {

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

@@ -29,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref} tooltip={true}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/tooltip/components/tooltip.svelte

@@ -32,6 +32,6 @@
 	});
 </script>
 
-<FloatingLayer>
+<FloatingLayer tooltip>
 	{@render children?.()}
 </FloatingLayer>

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

@@ -1,7 +1,7 @@
 import { DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import type { PointerEventHandler } from "svelte/elements";
+import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 type TooltipProviderStateProps = ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -58,23 +58,21 @@ declare class TooltipTriggerState {
     constructor(opts: TooltipTriggerStateProps, root: TooltipRootState);
     handlePointerUp: () => void;
     props: {
-        id: string;
-        "aria-describedby": string | undefined;
-        "data-state": string;
-        "data-disabled": "" | undefined;
-        "data-delay-duration": string;
-        "data-tooltip-trigger": string;
-        tabindex: number | undefined;
-        disabled: boolean;
-        onpointerup: () => void;
-        onpointerdown: () => void;
-        onpointermove: PointerEventHandler<HTMLElement>;
-        onpointerleave: () => void;
-        onfocus: (e: FocusEvent & {
-            currentTarget: HTMLElement;
-        }) => void;
-        onblur: () => void;
-        onclick: () => void;
+        readonly id: string;
+        readonly "aria-describedby": string | undefined;
+        readonly "data-state": string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-delay-duration": `${number}`;
+        readonly "data-tooltip-trigger": "";
+        readonly tabindex: 0 | undefined;
+        readonly disabled: boolean;
+        readonly onpointerup: PointerEventHandler<HTMLElement>;
+        readonly onpointerdown: PointerEventHandler<HTMLElement>;
+        readonly onpointermove: PointerEventHandler<HTMLElement>;
+        readonly onpointerleave: PointerEventHandler<HTMLElement>;
+        readonly onfocus: FocusEventHandler<HTMLElement>;
+        readonly onblur: FocusEventHandler<HTMLElement>;
+        readonly onclick: MouseEventHandler<HTMLElement>;
     };
 }
 type TooltipContentStateProps = WithRefProps & ReadableBoxedValues<{

package/dist/bits/tooltip/tooltip.svelte.js

@@ -194,7 +194,9 @@ class TooltipTriggerState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-describedby": this.root.opts.open.current ? this.root.contentNode?.id : undefined,
+        "aria-describedby": this.root.opts.open.current
+            ? this.root.contentNode?.id
+            : undefined,
         "data-state": this.root.stateAttr,
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-delay-duration": `${this.root.delayDuration}`,

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -4,13 +4,16 @@
 	import type { AnchorProps } from "./index.js";
 	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
 
-	let { id, children, virtualEl, ref }: AnchorProps = $props();
+	let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
 
-	useFloatingAnchorState({
-		id: box.with(() => id),
-		virtualEl: box.with(() => virtualEl as unknown as Measurable | null),
-		ref,
-	});
+	useFloatingAnchorState(
+		{
+			id: box.with(() => id),
+			virtualEl: box.with(() => virtualEl as unknown as Measurable | null),
+			ref,
+		},
+		tooltip
+	);
 </script>
 
 {@render children?.()}

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -25,29 +25,33 @@
 		wrapperId = useId(),
 		customAnchor = null,
 		enabled,
+		tooltip = false,
 	}: ContentImplProps = $props();
 
-	const contentState = useFloatingContentState({
-		side: box.with(() => side),
-		sideOffset: box.with(() => sideOffset),
-		align: box.with(() => align),
-		alignOffset: box.with(() => alignOffset),
-		id: box.with(() => id),
-		arrowPadding: box.with(() => arrowPadding),
-		avoidCollisions: box.with(() => avoidCollisions),
-		collisionBoundary: box.with(() => collisionBoundary),
-		collisionPadding: box.with(() => collisionPadding),
-		hideWhenDetached: box.with(() => hideWhenDetached),
-		onPlaced: box.with(() => onPlaced),
-		sticky: box.with(() => sticky),
-		updatePositionStrategy: box.with(() => updatePositionStrategy),
-		strategy: box.with(() => strategy),
-		dir: box.with(() => dir),
-		style: box.with(() => style),
-		enabled: box.with(() => enabled),
-		wrapperId: box.with(() => wrapperId),
-		customAnchor: box.with(() => customAnchor),
-	});
+	const contentState = useFloatingContentState(
+		{
+			side: box.with(() => side),
+			sideOffset: box.with(() => sideOffset),
+			align: box.with(() => align),
+			alignOffset: box.with(() => alignOffset),
+			id: box.with(() => id),
+			arrowPadding: box.with(() => arrowPadding),
+			avoidCollisions: box.with(() => avoidCollisions),
+			collisionBoundary: box.with(() => collisionBoundary),
+			collisionPadding: box.with(() => collisionPadding),
+			hideWhenDetached: box.with(() => hideWhenDetached),
+			onPlaced: box.with(() => onPlaced),
+			sticky: box.with(() => sticky),
+			updatePositionStrategy: box.with(() => updatePositionStrategy),
+			strategy: box.with(() => strategy),
+			dir: box.with(() => dir),
+			style: box.with(() => style),
+			enabled: box.with(() => enabled),
+			wrapperId: box.with(() => wrapperId),
+			customAnchor: box.with(() => customAnchor),
+		},
+		tooltip
+	);
 
 	const mergedProps = $derived(
 		mergeProps(contentState.wrapperProps, {

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte

@@ -2,9 +2,9 @@
 	import type { Snippet } from "svelte";
 	import { useFloatingRootState } from "../use-floating-layer.svelte.js";
 
-	let { children }: { children?: Snippet } = $props();
+	let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
 
-	useFloatingRootState();
+	useFloatingRootState(tooltip);
 </script>
 
 {@render children?.()}

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     children?: Snippet;
+    tooltip?: boolean;
 };
 declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type FloatingLayer = ReturnType<typeof FloatingLayer>;

package/dist/bits/utilities/floating-layer/types.d.ts

@@ -107,10 +107,28 @@ export type FloatingLayerContentImplProps = {
      */
     onPlaced?: () => void;
     enabled: boolean;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 } & FloatingLayerContentProps;
 export type FloatingLayerAnchorProps = {
     id: string;
     children?: Snippet;
     virtualEl?: ReadableBox<Measurable | null>;
     ref: ReadableBox<HTMLElement | null>;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 };

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -942,10 +942,10 @@ declare class FloatingAnchorState {
     readonly root: FloatingRootState;
     constructor(opts: FloatingAnchorStateProps, root: FloatingRootState);
 }
-export declare function useFloatingRootState(): FloatingRootState;
-export declare function useFloatingContentState(props: FloatingContentStateProps): FloatingContentState;
+export declare function useFloatingRootState(tooltip?: boolean): FloatingRootState;
+export declare function useFloatingContentState(props: FloatingContentStateProps, tooltip?: boolean): FloatingContentState;
 export declare function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState;
-export declare function useFloatingAnchorState(props: FloatingAnchorStateProps): FloatingAnchorState;
+export declare function useFloatingAnchorState(props: FloatingAnchorStateProps, tooltip?: boolean): FloatingAnchorState;
 export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
 export declare function getAlignFromPlacement(placement: Placement): "end" | "center" | "start";
 export {};

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -140,9 +140,6 @@ class FloatingContentState {
         "data-align": this.placedAlign,
         style: styleToString({
             ...this.#transformedStyle,
-            // if the FloatingContent hasn't been placed yet (not all measurements done)
-            // we prevent animations so that users's animation don't kick in too early referring wrong sides
-            // animation: !this.floating.isPositioned ? "none" : undefined,
         }),
         ...attachRef(this.contentRef),
     }));
@@ -233,17 +230,24 @@ class FloatingAnchorState {
 }
 const FloatingRootContext = new Context("Floating.Root");
 const FloatingContentContext = new Context("Floating.Content");
-export function useFloatingRootState() {
-    return FloatingRootContext.set(new FloatingRootState());
+const FloatingTooltipRootContext = new Context("Floating.Root");
+export function useFloatingRootState(tooltip = false) {
+    return tooltip
+        ? FloatingTooltipRootContext.set(new FloatingRootState())
+        : FloatingRootContext.set(new FloatingRootState());
 }
-export function useFloatingContentState(props) {
-    return FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
+export function useFloatingContentState(props, tooltip = false) {
+    return tooltip
+        ? FloatingContentContext.set(new FloatingContentState(props, FloatingTooltipRootContext.get()))
+        : FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
 }
 export function useFloatingArrowState(props) {
     return new FloatingArrowState(props, FloatingContentContext.get());
 }
-export function useFloatingAnchorState(props) {
-    return new FloatingAnchorState(props, FloatingRootContext.get());
+export function useFloatingAnchorState(props, tooltip = false) {
+    return tooltip
+        ? new FloatingAnchorState(props, FloatingTooltipRootContext.get())
+        : new FloatingAnchorState(props, FloatingRootContext.get());
 }
 //
 // HELPERS

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -45,6 +45,7 @@
 		isStatic = false,
 		enabled,
 		ref,
+		tooltip = false,
 		...restProps
 	}: Omit<PopperLayerImplProps, "present" | "children"> & {
 		enabled: boolean;
@@ -72,6 +73,7 @@
 	{onPlaced}
 	{customAnchor}
 	{enabled}
+	{tooltip}
 >
 	{#snippet content({ props: floatingProps, wrapperProps })}
 		{#if restProps.forceMount && enabled}

package/dist/bits/utilities/popper-layer/types.d.ts

@@ -22,4 +22,13 @@ export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerI
         }
     ]>;
     isStatic?: boolean;
+    /**
+     * Tooltips are special in that they are commonly composed
+     * with other floating components, where the same trigger is
+     * used for both the tooltip and the popover.
+     *
+     * For situations like this, we need to use a different context
+     * symbol so that conflicts don't occur.
+     */
+    tooltip?: boolean;
 }, "enabled">;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/types.d.ts

@@ -27,6 +27,7 @@ export type * from "./bits/popover/types.js";
 export type * from "./bits/progress/types.js";
 export type * from "./bits/radio-group/types.js";
 export type * from "./bits/range-calendar/types.js";
+export type * from "./bits/rating-group/types.js";
 export type * from "./bits/scroll-area/types.js";
 export type * from "./bits/select/types.js";
 export type * from "./bits/separator/types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",