bits-ui 1.0.0-next.76 → 1.0.0-next.78

package/dist/bits/accordion/components/accordion.svelte

@@ -16,7 +16,6 @@
 		onValueChange = noop,
 		loop = true,
 		orientation = "vertical",
-		controlledValue = false,
 		...restProps
 	}: AccordionRootProps = $props();
 
@@ -27,14 +26,9 @@
 		value: box.with(
 			() => value!,
 			(v) => {
-				if (controlledValue) {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				} else {
-					value = v;
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				}
+				value = v;
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				onValueChange(v as any);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
 		id: box.with(() => id),

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

@@ -21,15 +21,6 @@ export type BaseAccordionRootPropsWithoutHTML = {
      * @defaultValue "vertical"
      */
     orientation?: Orientation;
-    /**
-     * Whether the value of the accordion is controlled or not.
-     * If `true`, the accordion will not update the value internally, instead
-     * it will call `onValueChange` when it would have otherwise, and it is up to you
-     * to update the `value` prop.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
 };
 export type AccordionRootSinglePropsWithoutHTML = BaseAccordionRootPropsWithoutHTML & {
     /**

package/dist/bits/alert-dialog/components/alert-dialog.svelte

@@ -4,24 +4,15 @@
 	import { noop } from "../../../internal/noop.js";
 	import { useDialogRoot } from "../../dialog/dialog.svelte.js";
 
-	let {
-		open = $bindable(false),
-		onOpenChange = noop,
-		controlledOpen = false,
-		children,
-	}: AlertDialogRootProps = $props();
+	let { open = $bindable(false), onOpenChange = noop, children }: AlertDialogRootProps = $props();
 
 	useDialogRoot({
 		variant: box.with(() => "alert-dialog"),
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 	});

package/dist/bits/button/components/button.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
 	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref = $bindable(), ...restProps }: ButtonRootProps = $props();
+	let {
+		href,
+		type,
+		children,
+		disabled = false,
+		ref = $bindable(),
+		...restProps
+	}: ButtonRootProps = $props();
 </script>
 
 <svelte:element
 	this={href ? "a" : "button"}
 	type={href ? undefined : type}
-	{href}
-	tabindex="0"
+	href={href && !disabled ? href : undefined}
+	disabled={href ? undefined : disabled}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? "link" : undefined}
+	tabindex={href && disabled ? -1 : 0}
 	bind:this={ref}
 	{...restProps}
 >

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

@@ -7,10 +7,12 @@ export type ButtonRootPropsWithoutHTML = WithChildren<{
 type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
     href: HTMLAnchorAttributes["href"];
     type?: never;
+    disabled?: HTMLButtonAttributes["disabled"];
 };
 type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
     type?: HTMLButtonAttributes["type"];
     href?: never;
+    disabled?: HTMLButtonAttributes["disabled"];
 };
 export type ButtonRootProps = AnchorElement | ButtonElement;
 export {};

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

@@ -33,8 +33,6 @@
 		type,
 		disableDaysOutsideMonth = true,
 		initialFocus = false,
-		controlledValue = false,
-		controlledPlaceholder = false,
 		...restProps
 	}: CalendarRootProps = $props();
 
@@ -43,27 +41,15 @@
 			defaultPlaceholder: undefined,
 			defaultValue: value,
 		});
-
-		if (controlledPlaceholder) {
-			onPlaceholderChange(defaultPlaceholder);
-		} else {
-			placeholder = defaultPlaceholder;
-		}
+		placeholder = defaultPlaceholder;
 	}
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];
-		if (controlledValue) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			onValueChange(defaultValue as any);
-		} else {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			value = defaultValue as any;
-		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		value = defaultValue as any;
 	}
 
-	value === undefined && (value = type === "single" ? undefined : []);
-
 	const rootState = useCalendarRoot({
 		id: box.with(() => id),
 		ref: box.with(
@@ -88,26 +74,17 @@
 		placeholder: box.with(
 			() => placeholder as DateValue,
 			(v) => {
-				if (controlledPlaceholder) {
-					onPlaceholderChange(v as DateValue);
-				} else {
-					placeholder = v;
-					onPlaceholderChange(v as DateValue);
-				}
+				placeholder = v;
+				onPlaceholderChange(v as DateValue);
 			}
 		),
 		preventDeselect: box.with(() => preventDeselect),
 		value: box.with(
 			() => value,
 			(v) => {
-				if (controlledValue) {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				} else {
-					value = v;
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				}
+				value = v;
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				onValueChange(v as any);
 			}
 		),
 		type: box.with(() => type),

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

@@ -159,24 +159,6 @@ type CalendarBaseRootPropsWithoutHTML = {
      * @defaultValue false
      */
     disableDaysOutsideMonth?: boolean;
-    /**
-     * Whether or not the calendar is controlled or not. If `true`, the calendar will not update
-     * the value internally, instead it will call `onValueChange` when it would have otherwise,
-     * and it is up to you to update the `value` prop that is passed to the `Calendar.Root`
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
-    /**
-     * Whether or not the calendar placeholder is controlled or not. If `true`, the calendar will
-     * not update the placeholder internally, instead it will call `onPlaceholderChange` when it
-     * would have otherwise, and it is up to you to update the `placeholder` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledPlaceholder?: boolean;
 };
 export type CalendarSingleRootPropsWithoutHTML = {
     /**

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

@@ -15,9 +15,7 @@
 		name = undefined,
 		value = "on",
 		id = useId(),
-		controlledChecked = false,
 		indeterminate = $bindable(false),
-		controlledIndeterminate = false,
 		onIndeterminateChange,
 		child,
 		type = "button",
@@ -28,12 +26,8 @@
 		checked: box.with(
 			() => checked,
 			(v) => {
-				if (controlledChecked) {
-					onCheckedChange?.(v);
-				} else {
-					checked = v;
-					onCheckedChange?.(v);
-				}
+				checked = v;
+				onCheckedChange?.(v);
 			}
 		),
 		disabled: box.with(() => disabled ?? false),
@@ -48,12 +42,8 @@
 		indeterminate: box.with(
 			() => indeterminate,
 			(v) => {
-				if (controlledIndeterminate) {
-					onIndeterminateChange?.(v);
-				} else {
-					indeterminate = v;
-					onIndeterminateChange?.(v);
-				}
+				indeterminate = v;
+				onIndeterminateChange?.(v);
 			}
 		),
 		type: box.with(() => type),

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

@@ -44,15 +44,6 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * A callback function called when the checked state changes.
      */
     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
-     * otherwise, and it is up to you to update the `checked` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledChecked?: boolean;
     /**
      * Whether the checkbox is in an indeterminate state or not.
      *
@@ -63,15 +54,6 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * 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>;
 export type CheckboxGroupPropsWithoutHTML = WithChild<{
@@ -109,15 +91,6 @@ export type CheckboxGroupPropsWithoutHTML = WithChild<{
      * A callback function called when the value changes.
      */
     onValueChange?: OnChangeFn<string[]>;
-    /**
-     * Whether or not the checkbox group value is controlled or not. If `true`, the
-     * checkbox group will not update the value internally, instead it will call
-     * `onValueChange` when it would have otherwise, and it is up to you to update
-     * the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
 }>;
 export type CheckboxGroupProps = CheckboxGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CheckboxGroupPropsWithoutHTML>;
 export type CheckboxGroupLabelPropsWithoutHTML = WithChild;

package/dist/bits/collapsible/components/collapsible.svelte

@@ -12,7 +12,6 @@
 		ref = $bindable(null),
 		open = $bindable(false),
 		disabled = false,
-		controlledOpen = false,
 		onOpenChange = noop,
 		...restProps
 	}: CollapsibleRootProps = $props();
@@ -21,12 +20,8 @@
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 		disabled: box.with(() => disabled),

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

@@ -17,14 +17,6 @@ export type CollapsibleRootPropsWithoutHTML = WithChild<{
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
-    /**
-     * Whether or not the collapsible is controlled or not. If `true`, the collapsible will not
-     * update the open state internally, instead it will call `onOpenChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledOpen?: boolean;
 }>;
 export type CollapsibleRootProps = CollapsibleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleRootPropsWithoutHTML>;
 export type CollapsibleContentSnippetProps = {

package/dist/bits/combobox/components/combobox.svelte

@@ -17,8 +17,6 @@
 		loop = false,
 		scrollAlignment = "nearest",
 		required = false,
-		controlledOpen = false,
-		controlledValue = false,
 		items = [],
 		allowDeselect = true,
 		children,
@@ -26,12 +24,7 @@
 
 	if (value === undefined) {
 		const defaultValue = type === "single" ? "" : [];
-		if (controlledValue) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			onValueChange(defaultValue as any);
-		} else {
-			value = defaultValue;
-		}
+		value = defaultValue;
 	}
 
 	const rootState = useSelectRoot({
@@ -39,14 +32,9 @@
 		value: box.with(
 			() => value!,
 			(v) => {
-				if (controlledValue) {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				} else {
-					value = v;
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					onValueChange(v as any);
-				}
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
 		disabled: box.with(() => disabled),
@@ -54,12 +42,8 @@
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 		loop: box.with(() => loop),

package/dist/bits/command/components/command.svelte

@@ -18,7 +18,6 @@
 		label = "",
 		vimBindings = true,
 		disablePointerSelection = false,
-		controlledValue = false,
 		children,
 		child,
 		...restProps
@@ -36,12 +35,8 @@
 		value: box.with(
 			() => value,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				onValueChange(v);
 			}
 		),
 		vimBindings: box.with(() => vimBindings),

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

@@ -63,14 +63,6 @@ export type CommandRootPropsWithoutHTML = WithChild<{
      * @defaultValue true
      */
     vimBindings?: boolean;
-    /**
-     * Whether or not the command is controlled or not. If `true`, the command will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
 }>;
 export type CommandRootProps = CommandRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
 export type CommandEmptyPropsWithoutHTML = WithChild<{

package/dist/bits/context-menu/components/context-menu.svelte

@@ -9,7 +9,6 @@
 		open = $bindable(false),
 		dir = "ltr",
 		onOpenChange = noop,
-		controlledOpen = false,
 		children,
 	}: ContextMenuRootProps = $props();
 
@@ -17,12 +16,8 @@
 		variant: box.with(() => "context-menu"),
 		dir: box.with(() => dir),
 		onClose: () => {
-			if (controlledOpen) {
-				onOpenChange(false);
-			} else {
-				open = false;
-				onOpenChange?.(false);
-			}
+			open = false;
+			onOpenChange?.(false);
 		},
 	});
 
@@ -30,12 +25,8 @@
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 	});

package/dist/bits/date-field/components/date-field.svelte

@@ -23,8 +23,6 @@
 		readonly = false,
 		readonlySegments = [],
 		required = false,
-		controlledPlaceholder = false,
-		controlledValue = false,
 		errorMessageId,
 		children,
 	}: DateFieldRootProps = $props();
@@ -36,34 +34,22 @@
 			defaultValue: value,
 		});
 
-		if (controlledPlaceholder) {
-			onPlaceholderChange(defaultPlaceholder);
-		} else {
-			placeholder = defaultPlaceholder;
-		}
+		placeholder = defaultPlaceholder;
 	}
 
 	useDateFieldRoot({
 		value: box.with(
 			() => value,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				onValueChange(v);
 			}
 		),
 		placeholder: box.with(
 			() => placeholder as DateValue,
 			(v) => {
-				if (controlledPlaceholder) {
-					onPlaceholderChange(v);
-				} else {
-					placeholder = v;
-					onPlaceholderChange(v);
-				}
+				placeholder = v;
+				onPlaceholderChange(v);
 			}
 		),
 		disabled: box.with(() => disabled),

package/dist/bits/date-field/types.d.ts

@@ -9,7 +9,7 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{
      *
      * @bindable
      */
-    value?: DateValue | undefined;
+    value?: DateValue;
     /**
      * A callback that is called when the date field value changes.
      *
@@ -21,7 +21,7 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{
      *
      * @bindable
      */
-    placeholder?: DateValue | undefined;
+    placeholder?: DateValue;
     /**
      * A callback that is called when the date field's placeholder value changes.
      */
@@ -110,23 +110,6 @@ export type DateFieldRootPropsWithoutHTML = WithChildren<{
      * @defaultValue false
      */
     required?: boolean;
-    /**
-     * Whether or not the value is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
-    /**
-     * Whether or not the placeholder is controlled or not. If `true`, the component will not update
-     * the placeholder state internally, instead it will call `onPlaceholderChange` when it would
-     * have otherwise, and it is up to you to update the `value` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledPlaceholder?: boolean;
     /**
      * The `id` of the element which contains the error messages for the date field when the
      * date is invalid.

package/dist/bits/date-picker/components/date-picker.svelte

@@ -41,9 +41,6 @@
 		numberOfMonths = 1,
 		closeOnDateSelect = true,
 		initialFocus = false,
-		controlledPlaceholder = false,
-		controlledValue = false,
-		controlledOpen = false,
 		errorMessageId,
 		children,
 	}: DatePickerRootProps = $props();
@@ -55,20 +52,12 @@
 			defaultValue: value,
 		});
 
-		if (controlledPlaceholder) {
-			onPlaceholderChange(defaultPlaceholder);
-		} else {
-			placeholder = defaultPlaceholder;
-		}
+		placeholder = defaultPlaceholder;
 	}
 
 	function onDateSelect() {
 		if (closeOnDateSelect) {
-			if (controlledOpen) {
-				onOpenChange(false);
-			} else {
-				open = false;
-			}
+			open = false;
 		}
 	}
 
@@ -76,34 +65,22 @@
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 		value: box.with(
 			() => value,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				onValueChange(v);
 			}
 		),
 		placeholder: box.with(
 			() => placeholder as DateValue,
 			(v) => {
-				if (controlledPlaceholder) {
-					onPlaceholderChange(v as DateValue);
-				} else {
-					placeholder = v;
-					onPlaceholderChange(v as DateValue);
-				}
+				placeholder = v;
+				onPlaceholderChange(v as DateValue);
 			}
 		),
 		isDateUnavailable: box.with(() => isDateUnavailable),

package/dist/bits/date-picker/types.d.ts

@@ -220,32 +220,6 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{
      * Whether to focus a date when the picker is first opened.
      */
     initialFocus?: boolean;
-    /**
-     * Whether or not the value is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
-    /**
-     * Whether or not the placeholder is controlled or not. If `true`, the component will not update
-     * the placeholder state internally, instead it will call `onPlaceholderChange` when it would
-     * have otherwise, and it is up to you to update the `placeholder` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledPlaceholder?: boolean;
-    /**
-     * Whether or not the open state is controlled or not. If `true`, the component will not update
-     * the open state internally, instead it will call `onOpenChange` when it would
-     * have otherwise, and it is up to you to update the `open` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledOpen?: boolean;
     /**
      * The `id` of the element which contains the error messages for the date field when the
      * date is invalid.