bits-ui 1.0.0-next.47 → 1.0.0-next.49

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

@@ -6,7 +6,8 @@ type CheckboxRootStateProps = WithRefProps<ReadableBoxedValues<{
     name: string | undefined;
     value: string | undefined;
 }> & WritableBoxedValues<{
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 }>>;
 declare class CheckboxRootState {
     #private;
@@ -15,6 +16,7 @@ declare class CheckboxRootState {
     required: CheckboxRootStateProps["required"];
     name: CheckboxRootStateProps["name"];
     value: CheckboxRootStateProps["value"];
+    indeterminate: CheckboxRootStateProps["indeterminate"];
     constructor(props: CheckboxRootStateProps);
     props: {
         readonly id: string;

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

@@ -11,6 +11,7 @@ class CheckboxRootState {
     required;
     name;
     value;
+    indeterminate;
     constructor(props) {
         this.checked = props.checked;
         this.disabled = props.disabled;
@@ -19,6 +20,7 @@ class CheckboxRootState {
         this.value = props.value;
         this.#ref = props.ref;
         this.#id = props.id;
+        this.indeterminate = props.indeterminate;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -35,7 +37,8 @@ class CheckboxRootState {
         }
     };
     #toggle = () => {
-        if (this.checked.current === "indeterminate") {
+        if (this.indeterminate.current) {
+            this.indeterminate.current = false;
             this.checked.current = true;
         }
         else {
@@ -52,10 +55,10 @@ class CheckboxRootState {
         role: "checkbox",
         type: "button",
         disabled: this.disabled.current,
-        "aria-checked": getAriaChecked(this.checked.current),
+        "aria-checked": getAriaChecked(this.checked.current, this.indeterminate.current),
         "aria-required": getAriaRequired(this.required.current),
         "data-disabled": getDataDisabled(this.disabled.current),
-        "data-state": getCheckboxDataState(this.checked.current),
+        "data-state": getCheckboxDataState(this.checked.current, this.indeterminate.current),
         [CHECKBOX_ROOT_ATTR]: "",
         //
         onclick: this.#onclick,
@@ -85,8 +88,8 @@ class CheckboxInputState {
 //
 // HELPERS
 //
-function getCheckboxDataState(checked) {
-    if (checked === "indeterminate") {
+function getCheckboxDataState(checked, indeterminate) {
+    if (indeterminate) {
         return "indeterminate";
     }
     return checked ? "checked" : "unchecked";

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

@@ -16,6 +16,9 @@
 		value = "on",
 		id = useId(),
 		controlledChecked = false,
+		indeterminate = $bindable(false),
+		controlledIndeterminate = false,
+		onIndeterminateChange,
 		child,
 		...restProps
 	}: CheckboxRootProps = $props();
@@ -41,17 +44,33 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		indeterminate: box.with(
+			() => indeterminate,
+			(v) => {
+				if (controlledIndeterminate) {
+					onIndeterminateChange?.(v);
+				} else {
+					indeterminate = v;
+					onIndeterminateChange?.(v);
+				}
+			}
+		),
 	});
 
 	const mergedProps = $derived(mergeProps({ ...restProps }, rootState.props));
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, checked: rootState.checked.current })}
+	{@render child({
+		props: mergedProps,
+		checked: rootState.checked.current,
+		indeterminate: rootState.indeterminate.current,
+	})}
 {:else}
 	<button {...mergedProps}>
 		{@render children?.({
 			checked: rootState.checked.current,
+			indeterminate: rootState.indeterminate.current,
 		})}
 	</button>
 {/if}

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

@@ -14,6 +14,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Checkbox: $$__sveltets_2_IsomorphicComponent<CheckboxRootProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked" | "ref">;
+}, {}, {}, "checked" | "indeterminate" | "ref">;
 type Checkbox = InstanceType<typeof Checkbox>;
 export default Checkbox;

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

@@ -1,7 +1,8 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes } from "../../shared/attributes.js";
 export type CheckboxRootSnippetProps = {
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 };
 export type CheckboxRootPropsWithoutHTML = WithChild<{
     /**
@@ -33,15 +34,14 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * The checked state of the checkbox. It can be one of:
      * - `true` for checked
      * - `false` for unchecked
-     * - `"indeterminate"` for indeterminate
      *
      * @defaultValue false
      */
-    checked?: boolean | "indeterminate" | undefined;
+    checked?: boolean;
     /**
      * A callback function called when the checked state changes.
      */
-    onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+    onCheckedChange?: OnChangeFn<boolean>;
     /**
      * Whether or not the checkbox is controlled or not. If `true`, the checkbox will not update
      * the checked state internally, instead it will call `onCheckedChange` when it would have
@@ -51,5 +51,24 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * @defaultValue false
      */
     controlledChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state or not.
+     *
+     * @defaultValue false
+     */
+    indeterminate?: boolean;
+    /**
+     * A callback function called when the indeterminate state changes.
+     */
+    onIndeterminateChange?: OnChangeFn<boolean>;
+    /**
+     * Whether the indeterminate state is controlled or not. If `true`, the checkbox will
+     * not update the indeterminate state internally, instead it will call
+     * `onIndeterminateChange` when it would have otherwise, and it is up to you to update
+     * the `indeterminate` prop that is passed to the component.
+     *
+     * @defaultValue false
+     */
+    controlledIndeterminate?: boolean;
 }, CheckboxRootSnippetProps>;
 export type CheckboxRootProps = CheckboxRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CheckboxRootPropsWithoutHTML>;

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -16,6 +16,9 @@
 		onSelect = noop,
 		controlledChecked = false,
 		closeOnSelect = true,
+		indeterminate = $bindable(false),
+		controlledIndeterminate = false,
+		onIndeterminateChange = noop,
 		...restProps
 	}: MenuCheckboxItemProps = $props();
 
@@ -39,6 +42,17 @@
 			(v) => (ref = v)
 		),
 		closeOnSelect: box.with(() => closeOnSelect),
+		indeterminate: box.with(
+			() => indeterminate,
+			(v) => {
+				if (controlledIndeterminate) {
+					onIndeterminateChange(v);
+				} else {
+					indeterminate = v;
+					onIndeterminateChange(v);
+				}
+			}
+		),
 	});
 
 	function handleSelect(e: Event) {
@@ -51,9 +65,9 @@
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, checked })}
+	{@render child({ props: mergedProps, ...checkboxItemState.snippetProps })}
 {:else}
 	<div {...mergedProps}>
-		{@render children?.({ checked })}
+		{@render children?.(checkboxItemState.snippetProps)}
 	</div>
 {/if}

package/dist/bits/menu/components/menu-checkbox-item.svelte.d.ts

@@ -14,6 +14,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const MenuCheckboxItem: $$__sveltets_2_IsomorphicComponent<MenuCheckboxItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked" | "ref">;
+}, {}, {}, "checked" | "indeterminate" | "ref">;
 type MenuCheckboxItem = InstanceType<typeof MenuCheckboxItem>;
 export default MenuCheckboxItem;

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

@@ -167,12 +167,17 @@ declare class MenuSubTriggerState {
     };
 }
 type MenuCheckboxItemStateProps = WritableBoxedValues<{
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 }>;
 declare class MenuCheckboxItemState {
     #private;
     constructor(props: MenuCheckboxItemStateProps, item: MenuItemState);
     toggleChecked: () => void;
+    snippetProps: {
+        checked: boolean;
+        indeterminate: boolean;
+    };
     props: {
         readonly [x: string]: string | -1 | ((e: PointerEvent) => void) | undefined;
         readonly role: "menuitemcheckbox";

package/dist/bits/menu/menu.svelte.js

@@ -511,25 +511,29 @@ class MenuSubTriggerState {
 class MenuCheckboxItemState {
     #item;
     #checked;
+    #indeterminate;
     constructor(props, item) {
         this.#item = item;
         this.#checked = props.checked;
+        this.#indeterminate = props.indeterminate;
     }
     toggleChecked = () => {
-        if (this.#checked.current === true) {
-            this.#checked.current = false;
-        }
-        else if (this.#checked.current === false) {
+        if (this.#indeterminate.current) {
+            this.#indeterminate.current = false;
             this.#checked.current = true;
         }
-        else if (this.#checked.current === "indeterminate") {
-            this.#checked.current = true;
+        else {
+            this.#checked.current = !this.#checked.current;
         }
     };
+    snippetProps = $derived.by(() => ({
+        checked: this.#checked.current,
+        indeterminate: this.#indeterminate.current,
+    }));
     props = $derived.by(() => ({
         ...this.#item.props,
         role: "menuitemcheckbox",
-        "aria-checked": getAriaChecked(this.#checked.current),
+        "aria-checked": getAriaChecked(this.#checked.current, this.#indeterminate.current),
         "data-state": getCheckedState(this.#checked.current),
         [this.#item.root.getAttr("checkbox-item")]: "",
     }));
@@ -660,7 +664,7 @@ class MenuRadioItemState {
         [this.#group.root.getAttr("radio-item")]: "",
         ...this.#item.props,
         role: "menuitemradio",
-        "aria-checked": getAriaChecked(this.isChecked),
+        "aria-checked": getAriaChecked(this.isChecked, false),
         "data-state": getCheckedState(this.isChecked),
     }));
 }

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

@@ -80,19 +80,22 @@ export type MenuItemPropsWithoutHTML<U extends Record<PropertyKey, unknown> = {
 }, U>;
 export type MenuItemProps = MenuItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuItemPropsWithoutHTML>;
 export type MenuCheckboxItemSnippetProps = {
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 };
 export type MenuCheckboxItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuCheckboxItemSnippetProps> & {
     /**
-     * The checked state of the checkbox item.
+     * The checked state of the checkbox. It can be one of:
+     * - `true` for checked
+     * - `false` for unchecked
      *
-     * Supports two-way binding with `bind:checked`.
+     * @defaultValue false
      */
-    checked?: boolean | "indeterminate";
+    checked?: boolean;
     /**
      * A callback that is fired when the checked state changes.
      */
-    onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+    onCheckedChange?: OnChangeFn<boolean>;
     /**
      * Whether or not the checked state is controlled or not. If `true`, the component will not
      * update the checked state internally, instead it will call `onCheckedChange` when it
@@ -102,6 +105,25 @@ export type MenuCheckboxItemPropsWithoutHTML = MenuItemPropsWithoutHTML<MenuChec
      * @defaultValue false
      */
     controlledChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state or not.
+     *
+     * @defaultValue false
+     */
+    indeterminate?: boolean;
+    /**
+     * A callback function called when the indeterminate state changes.
+     */
+    onIndeterminateChange?: OnChangeFn<boolean>;
+    /**
+     * Whether the indeterminate state is controlled or not. If `true`, the checkbox will
+     * not update the indeterminate state internally, instead it will call
+     * `onIndeterminateChange` when it would have otherwise, and it is up to you to update
+     * the `indeterminate` prop that is passed to the component.
+     *
+     * @defaultValue false
+     */
+    controlledIndeterminate?: boolean;
     /**
      * Whether or not the menu item should close when selected.
      *

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

@@ -102,7 +102,7 @@ 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",

package/dist/bits/switch/switch.svelte.js

@@ -49,7 +49,7 @@ class SwitchRootState {
         id: this.#id.current,
         role: "switch",
         disabled: getDisabled(this.disabled.current),
-        "aria-checked": getAriaChecked(this.checked.current),
+        "aria-checked": getAriaChecked(this.checked.current, false),
         "aria-required": getAriaRequired(this.required.current),
         [ROOT_ATTR]: "",
         //

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

@@ -131,7 +131,7 @@ class ToggleGroupItemState {
     };
     isPressed = $derived.by(() => this.#root.includesItem(this.#value.current));
     #ariaChecked = $derived.by(() => {
-        return this.#root.isMulti ? undefined : getAriaChecked(this.isPressed);
+        return this.#root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
         return this.#root.isMulti ? getAriaPressed(this.isPressed) : undefined;

package/dist/bits/toolbar/toolbar.svelte.js

@@ -150,7 +150,7 @@ class ToolbarGroupItemState {
     };
     isPressed = $derived.by(() => this.#group.includesItem(this.#value.current));
     #ariaChecked = $derived.by(() => {
-        return this.#group.isMulti ? undefined : getAriaChecked(this.isPressed);
+        return this.#group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
     });
     #ariaPressed = $derived.by(() => {
         return this.#group.isMulti ? getAriaPressed(this.isPressed) : undefined;

package/dist/internal/attrs.d.ts

@@ -6,7 +6,7 @@ export declare function getAriaExpanded(condition: boolean): "true" | "false";
 export declare function getDataDisabled(condition: boolean): "" | undefined;
 export declare function getAriaRequired(condition: boolean): "true" | "false";
 export declare function getAriaSelected(condition: boolean): "true" | "false";
-export declare function getAriaChecked(condition: boolean | "indeterminate"): "true" | "false" | "mixed";
+export declare function getAriaChecked(checked: boolean, indeterminate: boolean): "true" | "false" | "mixed";
 export declare function getAriaOrientation(orientation: "horizontal" | "vertical"): "horizontal" | "vertical";
 export declare function getAriaHidden(condition: boolean): "true" | undefined;
 export declare function getAriaInvalid(condition: boolean): "true" | undefined;

package/dist/internal/attrs.js

@@ -22,11 +22,11 @@ export function getAriaRequired(condition) {
 export function getAriaSelected(condition) {
     return condition ? "true" : "false";
 }
-export function getAriaChecked(condition) {
-    if (condition === "indeterminate") {
+export function getAriaChecked(checked, indeterminate) {
+    if (indeterminate) {
         return "mixed";
     }
-    return condition ? "true" : "false";
+    return checked ? "true" : "false";
 }
 export function getAriaOrientation(orientation) {
     return orientation;

package/package.json

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