bits-ui 1.0.0-next.6 → 1.0.0-next.61

package/dist/bits/popover/exports.js

@@ -0,0 +1,7 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";

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

@@ -1,9 +1 @@
-export { default as Root } from "./components/popover.svelte";
-export { default as Arrow } from "./components/popover-arrow.svelte";
-export { default as Content } from "./components/popover-content.svelte";
-export { default as ContentStatic } from "./components/popover-content-static.svelte";
-export { default as Trigger } from "./components/popover-trigger.svelte";
-export { default as Close } from "./components/popover-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
-export type { PortalProps } from "../utilities/portal/types.js";
+export * as Popover from "./exports.js";

package/dist/bits/popover/index.js

@@ -1,7 +1 @@
-export { default as Root } from "./components/popover.svelte";
-export { default as Arrow } from "./components/popover-arrow.svelte";
-export { default as Content } from "./components/popover-content.svelte";
-export { default as ContentStatic } from "./components/popover-content-static.svelte";
-export { default as Trigger } from "./components/popover-trigger.svelte";
-export { default as Close } from "./components/popover-close.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
+export * as Popover from "./exports.js";

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

@@ -1,3 +1,4 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
 import type { WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 type PopoverRootStateProps = WritableBoxedValues<{
@@ -11,23 +12,24 @@ declare class PopoverRootState {
     constructor(props: PopoverRootStateProps);
     toggleOpen: () => void;
     close: () => void;
-    createTrigger: (props: PopoverTriggerStateProps) => PopoverTriggerState;
-    createContent: (props: PopoverContentStateProps) => PopoverContentState;
-    createClose: (props: PopoverCloseStateProps) => PopoverCloseState;
 }
-type PopoverTriggerStateProps = WithRefProps;
+type PopoverTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class PopoverTriggerState {
     #private;
     constructor(props: PopoverTriggerStateProps, root: PopoverRootState);
     props: {
         readonly id: string;
         readonly "aria-haspopup": "dialog";
-        readonly "aria-expanded": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
         readonly "data-popover-trigger": "";
-        readonly onclick: () => void;
+        readonly disabled: boolean;
+        readonly onpointerdown: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
     };
 }
 type PopoverContentStateProps = WithRefProps;
@@ -43,6 +45,9 @@ declare class PopoverContentState {
         tabindex: number;
         "data-state": "open" | "closed";
         "data-popover-content": string;
+        style: {
+            pointerEvents: string;
+        };
     };
 }
 type PopoverCloseStateProps = WithRefProps;
@@ -51,7 +56,7 @@ declare class PopoverCloseState {
     constructor(props: PopoverCloseStateProps, root: PopoverRootState);
     props: {
         readonly id: string;
-        readonly onclick: () => void;
+        readonly onclick: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
         readonly type: "button";
         readonly "data-popover-close": "";

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

@@ -1,7 +1,7 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
-import { createContext } from "../../internal/createContext.js";
+import { createContext } from "../../internal/create-context.js";
 class PopoverRootState {
     open;
     contentNode = $state(null);
@@ -18,24 +18,17 @@ class PopoverRootState {
             return;
         this.open.current = false;
     };
-    createTrigger = (props) => {
-        return new PopoverTriggerState(props, this);
-    };
-    createContent = (props) => {
-        return new PopoverContentState(props, this);
-    };
-    createClose = (props) => {
-        return new PopoverCloseState(props, this);
-    };
 }
 class PopoverTriggerState {
     #id;
     #ref;
+    #disabled;
     #root;
     constructor(props, root) {
         this.#id = props.id;
         this.#root = root;
         this.#ref = props.ref;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -44,10 +37,24 @@ class PopoverTriggerState {
             },
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#root.toggleOpen();
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#root.toggleOpen();
+        }
+    };
     #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
         if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
             return;
         e.preventDefault();
@@ -66,9 +73,11 @@ class PopoverTriggerState {
         "data-state": getDataOpenClosed(this.#root.open.current),
         "aria-controls": this.#getAriaControls(),
         "data-popover-trigger": "",
+        disabled: this.#disabled.current,
         //
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
         onkeydown: this.#onkeydown,
+        onpointerup: this.#onpointerup,
     }));
 }
 class PopoverContentState {
@@ -82,7 +91,7 @@ class PopoverContentState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.root.open.current,
+            deps: () => this.root.open.current,
             onRefChange: (node) => {
                 this.root.contentNode = node;
                 this.root.contentId = node?.id;
@@ -95,6 +104,9 @@ class PopoverContentState {
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.open.current),
         "data-popover-content": "",
+        style: {
+            pointerEvents: "auto",
+        },
     }));
 }
 class PopoverCloseState {
@@ -108,12 +120,20 @@ class PopoverCloseState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.#root.open.current,
+            deps: () => this.#root.open.current,
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (e.pointerType === "touch")
+            return e.preventDefault();
         this.#root.close();
     };
+    #onpointerup = (e) => {
+        e.preventDefault();
+        if (e.pointerType === "touch") {
+            this.#root.close();
+        }
+    };
     #onkeydown = (e) => {
         if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
             return;
@@ -122,7 +142,7 @@ class PopoverCloseState {
     };
     props = $derived.by(() => ({
         id: this.#id.current,
-        onclick: this.#onclick,
+        onclick: this.#onpointerdown,
         onkeydown: this.#onkeydown,
         type: "button",
         "data-popover-close": "",
@@ -136,11 +156,11 @@ export function usePopoverRoot(props) {
     return setPopoverRootContext(new PopoverRootState(props));
 }
 export function usePopoverTrigger(props) {
-    return getPopoverRootContext().createTrigger(props);
+    return new PopoverTriggerState(props, getPopoverRootContext());
 }
 export function usePopoverContent(props) {
-    return getPopoverRootContext().createContent(props);
+    return new PopoverContentState(props, getPopoverRootContext());
 }
 export function usePopoverClose(props) {
-    return getPopoverRootContext().createClose(props);
+    return new PopoverCloseState(props, getPopoverRootContext());
 }

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

@@ -1,7 +1,7 @@
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type PopoverRootPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the popover.
@@ -28,13 +28,13 @@ export type PopoverContentSnippetProps = {
      */
     open: boolean;
 };
-export type PopoverContentPropsWithoutHTML = WithChild<Omit<PopperLayerProps, "content" | "loop">, PopoverContentSnippetProps>;
-export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<PrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
-export type PopoverContentStaticPropsWithoutHTML = WithChild<Omit<PopperLayerStaticProps, "content" | "loop">, PopoverContentSnippetProps>;
-export type PopoverContentStaticProps = PopoverContentStaticPropsWithoutHTML & Without<PrimitiveDivAttributes, PopoverContentStaticPropsWithoutHTML>;
+export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "loop">, PopoverContentSnippetProps>;
+export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
+export type PopoverContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "loop">, PopoverContentSnippetProps>;
+export type PopoverContentStaticProps = PopoverContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentStaticPropsWithoutHTML>;
 export type PopoverTriggerPropsWithoutHTML = WithChild;
-export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
+export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
 export type PopoverClosePropsWithoutHTML = WithChild;
-export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<PrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
+export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
 export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type PopoverArrowProps = ArrowProps;

package/dist/bits/progress/components/progress.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { ProgressRootProps } from "../types.js";
 	import { useProgressRootState } from "../progress.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -13,7 +12,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: RootProps = $props();
+	}: ProgressRootProps = $props();
 
 	const rootState = useProgressRootState({
 		value: box.with(() => value),

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { ProgressRootProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Progress: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Progress: $$__sveltets_2_IsomorphicComponent<ProgressRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type Progress = InstanceType<typeof Progress>;

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/progress.svelte";
+export type { ProgressRootProps as RootProps } from "./types.js";

package/dist/bits/progress/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/progress.svelte";

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/progress.svelte";
-export type { ProgressRootProps as RootProps } from "./types.js";
+export * as Progress from "./exports.js";

package/dist/bits/progress/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/progress.svelte";
+export * as Progress from "./exports.js";

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

@@ -1,4 +1,4 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
 const ROOT_ATTR = "data-progress-root";
 class ProgressRootState {
     #id;

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

@@ -1,5 +1,5 @@
 import type { WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type ProgressRootPropsWithoutHTML = WithChild<{
     /**
      * The current value of the progress bar.
@@ -12,4 +12,4 @@ export type ProgressRootPropsWithoutHTML = WithChild<{
      */
     max?: number;
 }>;
-export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;
+export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ItemProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { RadioGroupItemProps } from "../types.js";
 	import { useRadioGroupItem } from "../radio-group.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -13,7 +12,7 @@
 		disabled = false,
 		ref = $bindable(null),
 		...restProps
-	}: ItemProps = $props();
+	}: RadioGroupItemProps = $props();
 
 	const itemState = useRadioGroupItem({
 		value: box.with(() => value),

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

@@ -1,4 +1,4 @@
-import type { ItemProps } from "../index.js";
+import type { RadioGroupItemProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RadioGroupItem: $$__sveltets_2_IsomorphicComponent<ItemProps, {
+declare const RadioGroupItem: $$__sveltets_2_IsomorphicComponent<RadioGroupItemProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type RadioGroupItem = InstanceType<typeof RadioGroupItem>;

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

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { RadioGroupRootProps } from "../types.js";
 	import { useRadioGroupRoot } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		disabled = false,
@@ -21,7 +20,7 @@
 		onValueChange = noop,
 		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: RadioGroupRootProps = $props();
 
 	const rootState = useRadioGroupRoot({
 		orientation: box.with(() => orientation),
@@ -33,6 +32,7 @@
 		value: box.with(
 			() => value,
 			(v) => {
+				if (v === value) return;
 				if (controlledValue) {
 					onValueChange(v);
 				} else {

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { RadioGroupRootProps } from "../types.js";
 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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RadioGroup: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const RadioGroup: $$__sveltets_2_IsomorphicComponent<RadioGroupRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type RadioGroup = InstanceType<typeof RadioGroup>;

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

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

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

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

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

@@ -1,3 +1 @@
-export { default as Root } from "./components/radio-group.svelte";
-export { default as Item } from "./components/radio-group-item.svelte";
-export type { RadioGroupRootProps as RootProps, RadioGroupItemProps as ItemProps, } from "./types.js";
+export * as RadioGroup from "./exports.js";

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

@@ -1,2 +1 @@
-export { default as Root } from "./components/radio-group.svelte";
-export { default as Item } from "./components/radio-group-item.svelte";
+export * as RadioGroup from "./exports.js";

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

@@ -1,7 +1,8 @@
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 type RadioGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
@@ -20,15 +21,14 @@ declare class RadioGroupRootState {
     name: RadioGroupRootStateProps["name"];
     value: RadioGroupRootStateProps["value"];
     rovingFocusGroup: UseRovingFocusReturn;
+    hasValue: boolean;
     constructor(props: RadioGroupRootStateProps);
     isChecked: (value: string) => boolean;
     setValue: (value: string) => void;
-    createItem: (props: RadioGroupItemStateProps) => RadioGroupItemState;
-    createInput: () => RadioGroupInputState;
     props: {
         readonly id: string;
         readonly role: "radiogroup";
-        readonly "aria-required": "false" | "true";
+        readonly "aria-required": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-orientation": Orientation;
         readonly "data-radio-group-root": "";
@@ -52,14 +52,14 @@ declare class RadioGroupItemState {
         readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
-        readonly "aria-checked": "mixed" | "false" | "true";
+        readonly "aria-checked": "true" | "false" | "mixed";
         readonly "data-radio-group-item": "";
         readonly type: "button";
         readonly role: "radio";
         readonly tabindex: number;
-        readonly onclick: () => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
-        readonly onfocus: () => void;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+        readonly onfocus: FocusEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
     };
 }
 declare class RadioGroupInputState {

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

@@ -1,8 +1,8 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
-import { srOnlyStyles, styleToString } from "../../internal/style.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createContext } from "../../internal/create-context.js";
+import { kbd } from "../../internal/kbd.js";
 const RADIO_GROUP_ROOT_ATTR = "data-radio-group-root";
 const RADIO_GROUP_ITEM_ATTR = "data-radio-group-item";
 class RadioGroupRootState {
@@ -15,6 +15,7 @@ class RadioGroupRootState {
     name;
     value;
     rovingFocusGroup;
+    hasValue = $derived.by(() => this.value.current !== "");
     constructor(props) {
         this.#id = props.id;
         this.disabled = props.disabled;
@@ -41,12 +42,6 @@ class RadioGroupRootState {
     setValue = (value) => {
         this.value.current = value;
     };
-    createItem = (props) => {
-        return new RadioGroupItemState(props, this);
-    };
-    createInput = () => {
-        return new RadioGroupInputState(this);
-    };
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "radiogroup",
@@ -75,17 +70,31 @@ class RadioGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
-    #onclick = () => {
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
         this.#root.setValue(this.#value.current);
     };
     #onfocus = () => {
+        if (!this.#root.hasValue)
+            return;
         this.#root.setValue(this.#value.current);
     };
     #onkeydown = (e) => {
-        this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#root.setValue(this.#value.current);
+            return;
+        }
+        this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e, true);
     };
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
     props = $derived.by(() => ({
         id: this.#id.current,
@@ -94,15 +103,15 @@ class RadioGroupItemState {
         "data-orientation": this.#root.orientation.current,
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-state": this.#isChecked ? "checked" : "unchecked",
-        "aria-checked": getAriaChecked(this.#isChecked),
+        "aria-checked": getAriaChecked(this.#isChecked, false),
         [RADIO_GROUP_ITEM_ATTR]: "",
         type: "button",
         role: "radio",
         tabindex: this.#tabIndex,
         //
-        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
         onfocus: this.#onfocus,
+        onclick: this.#onclick,
     }));
 }
 //
@@ -133,8 +142,8 @@ export function useRadioGroupRoot(props) {
     return setRadioGroupRootContext(new RadioGroupRootState(props));
 }
 export function useRadioGroupItem(props) {
-    return getRadioGroupRootContext().createItem(props);
+    return new RadioGroupItemState(props, getRadioGroupRootContext());
 }
 export function useRadioGroupInput() {
-    return getRadioGroupRootContext().createInput();
+    return new RadioGroupInputState(getRadioGroupRootContext());
 }

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

@@ -1,6 +1,6 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { Orientation } from "../../index.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type RadioGroupRootPropsWithoutHTML = WithChild<{
     /**
      * The orientation of the radio group. Used to determine
@@ -55,7 +55,7 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      */
     controlledValue?: boolean;
 }>;
-export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, RadioGroupRootPropsWithoutHTML>;
+export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RadioGroupRootPropsWithoutHTML>;
 export type RadioGroupItemSnippetProps = {
     checked: boolean;
 };
@@ -71,4 +71,4 @@ export type RadioGroupItemPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean | null | undefined;
 }, RadioGroupItemSnippetProps>;
-export type RadioGroupItemProps = RadioGroupItemPropsWithoutHTML & Without<PrimitiveButtonAttributes, RadioGroupItemPropsWithoutHTML>;
+export type RadioGroupItemProps = RadioGroupItemPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, RadioGroupItemPropsWithoutHTML>;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { CellProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { RangeCalendarCellProps } from "../types.js";
 	import { useRangeCalendarCell } from "../range-calendar.svelte.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
@@ -13,7 +12,7 @@
 		date,
 		month,
 		...restProps
-	}: CellProps = $props();
+	}: RangeCalendarCellProps = $props();
 
 	const cellState = useRangeCalendarCell({
 		id: box.with(() => id),