bits-ui 2.8.14 → 2.9.0

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

@@ -6,6 +6,7 @@ interface CheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
     name: string | undefined;
     disabled: boolean;
     required: boolean;
+    readonly: boolean;
     onValueChange: OnChangeFn<string[]>;
 }>, WritableBoxedValues<{
     value: string[];
@@ -43,6 +44,7 @@ export declare class CheckboxGroupLabelState {
 interface CheckboxRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     required: boolean;
+    readonly: boolean;
     name: string | undefined;
     value: string | undefined;
     type: HTMLButtonAttributes["type"];
@@ -59,6 +61,7 @@ export declare class CheckboxRootState {
     readonly trueName: string | undefined;
     readonly trueRequired: boolean;
     readonly trueDisabled: boolean;
+    readonly trueReadonly: boolean;
     readonly attachment: RefAttachment;
     constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null);
     onkeydown(e: BitsKeyboardEvent): void;
@@ -74,7 +77,9 @@ export declare class CheckboxRootState {
         readonly disabled: boolean;
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "aria-required": "true" | "false";
+        readonly "aria-readonly": "true" | "false";
         readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
@@ -93,6 +98,7 @@ export declare class CheckboxInputState {
         readonly required: boolean;
         readonly name: string | undefined;
         readonly value: string | undefined;
+        readonly readonly: boolean;
     };
 }
 export {};

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

@@ -1,6 +1,6 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaChecked, getAriaRequired, getDataDisabled, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaChecked, getAriaReadonly, getAriaRequired, getDataDisabled, getDataReadonly, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { arraysAreEqual } from "../../internal/arrays.js";
 const checkboxAttrs = createBitsAttrs({
@@ -82,25 +82,25 @@ export class CheckboxRootState {
     opts;
     group;
     trueName = $derived.by(() => {
-        if (this.group && this.group.opts.name.current) {
+        if (this.group && this.group.opts.name.current)
             return this.group.opts.name.current;
-        }
-        else {
-            return this.opts.name.current;
-        }
+        return this.opts.name.current;
     });
     trueRequired = $derived.by(() => {
-        if (this.group && this.group.opts.required.current) {
+        if (this.group && this.group.opts.required.current)
             return true;
-        }
         return this.opts.required.current;
     });
     trueDisabled = $derived.by(() => {
-        if (this.group && this.group.opts.disabled.current) {
+        if (this.group && this.group.opts.disabled.current)
             return true;
-        }
         return this.opts.disabled.current;
     });
+    trueReadonly = $derived.by(() => {
+        if (this.group && this.group.opts.readonly.current)
+            return true;
+        return this.opts.readonly.current;
+    });
     attachment;
     constructor(opts, group) {
         this.opts = opts;
@@ -125,7 +125,7 @@ export class CheckboxRootState {
         });
     }
     onkeydown(e) {
-        if (this.opts.disabled.current)
+        if (this.trueDisabled || this.trueReadonly)
             return;
         if (e.key === kbd.ENTER)
             e.preventDefault();
@@ -144,7 +144,7 @@ export class CheckboxRootState {
         }
     }
     onclick(e) {
-        if (this.opts.disabled.current)
+        if (this.trueDisabled || this.trueReadonly)
             return;
         e.preventDefault();
         this.#toggle();
@@ -160,7 +160,9 @@ export class CheckboxRootState {
         disabled: this.trueDisabled,
         "aria-checked": getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
         "aria-required": getAriaRequired(this.trueRequired),
+        "aria-readonly": getAriaReadonly(this.trueReadonly),
         "data-disabled": getDataDisabled(this.trueDisabled),
+        "data-readonly": getDataReadonly(this.trueReadonly),
         "data-state": getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
         [checkboxAttrs.root]: "",
         //
@@ -194,6 +196,7 @@ export class CheckboxInputState {
         required: this.root.trueRequired,
         name: this.root.trueName,
         value: this.root.opts.value.current,
+        readonly: this.root.trueReadonly,
     }));
 }
 function getCheckboxDataState(checked, indeterminate) {

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

@@ -18,6 +18,7 @@
 		disabled,
 		children,
 		child,
+		readonly,
 		...restProps
 	}: CheckboxGroupProps = $props();
 
@@ -29,6 +30,7 @@
 		),
 		disabled: box.with(() => Boolean(disabled)),
 		required: box.with(() => Boolean(required)),
+		readonly: box.with(() => Boolean(readonly)),
 		name: box.with(() => name),
 		value: box.with(
 			() => $state.snapshot(value),

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

@@ -22,6 +22,7 @@
 		onIndeterminateChange,
 		child,
 		type = "button",
+		readonly,
 		...restProps
 	}: CheckboxRootProps = $props();
 
@@ -74,6 +75,7 @@
 				}
 			),
 			type: box.with(() => type),
+			readonly: box.with(() => Boolean(readonly)),
 		},
 		group
 	);

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

@@ -8,20 +8,29 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
     /**
      * Whether the checkbox is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean | null | undefined;
     /**
      * Whether the checkbox is required (for form validation).
      *
-     * @defaultValue false
+     * @default false
      */
     required?: boolean;
+    /**
+     * Whether the checkbox is read only.
+     *
+     * If readonly, the checkbox will be focusable by the user,
+     * but will not be able to be checked/unchecked.
+     *
+     * @default false
+     */
+    readonly?: boolean | null | undefined;
     /**
      * The name of the checkbox used in form submission.
      * If not provided, the hidden input will not be rendered.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     name?: any;
     /**
@@ -29,7 +38,7 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * the checkbox when in a `Checkbox.Group`. If not provided while in a
      * `Checkbox.Group`, the checkbox will use a random identifier.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     value?: string;
     /**
@@ -37,7 +46,7 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * - `true` for checked
      * - `false` for unchecked
      *
-     * @defaultValue false
+     * @default false
      */
     checked?: boolean;
     /**
@@ -47,7 +56,7 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
     /**
      * Whether the checkbox is in an indeterminate state or not.
      *
-     * @defaultValue false
+     * @default false
      */
     indeterminate?: boolean;
     /**
@@ -61,14 +70,23 @@ export type CheckboxGroupPropsWithoutHTML = WithChild<{
      * Whether the checkbox group is disabled.
      * This will disable all checkboxes in the group.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean | null | undefined;
+    /**
+     * Whether the checkbox group is read only.
+     *
+     * If readonly, the group will be focusable by the user,
+     * but the checkboxes not be able to be checked/unchecked.
+     *
+     * @default false
+     */
+    readonly?: boolean | null | undefined;
     /**
      * Whether the checkbox group is required (for form validation).
      * This will mark all checkboxes in the group as required.
      *
-     * @defaultValue false
+     * @default false
      */
     required?: boolean;
     /**
@@ -76,7 +94,7 @@ export type CheckboxGroupPropsWithoutHTML = WithChild<{
      * If not provided, the hidden input will not be rendered.
      * This will be used as the name for all checkboxes in the group.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     name?: any;
     /**
@@ -84,7 +102,7 @@ export type CheckboxGroupPropsWithoutHTML = WithChild<{
      * of the checkboxes in the group are checked.
      *
      * @bindable
-     * @defaultValue []
+     * @default []
      */
     value?: string[];
     /**

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -259,18 +259,19 @@ export function handleCalendarNextPage({ months, setMonths, numberOfMonths, page
         setPlaceholder(firstMonth.add({ months: numberOfMonths }));
     }
     else {
+        // Calculate the target date first, then update both months and placeholder
+        // to ensure they're synchronized and prevent useMonthViewPlaceholderSync from
+        // double-triggering
+        const targetDate = firstMonth.add({ months: 1 });
         const newMonths = createMonths({
-            dateObj: firstMonth.add({ months: 1 }),
+            dateObj: targetDate,
             weekStartsOn,
             locale,
             fixedWeeks,
             numberOfMonths,
         });
+        setPlaceholder(targetDate);
         setMonths(newMonths);
-        const firstNewMonth = newMonths[0];
-        if (!firstNewMonth)
-            return;
-        setPlaceholder(firstNewMonth.value.set({ day: 1 }));
     }
 }
 export function handleCalendarPrevPage({ months, setMonths, numberOfMonths, pagedNavigation, weekStartsOn, locale, fixedWeeks, setPlaceholder, }) {
@@ -281,18 +282,19 @@ export function handleCalendarPrevPage({ months, setMonths, numberOfMonths, page
         setPlaceholder(firstMonth.subtract({ months: numberOfMonths }));
     }
     else {
+        // Calculate the target date first, then update both months and placeholder
+        // to ensure they're synchronized and prevent useMonthViewPlaceholderSync from
+        // double-triggering
+        const targetDate = firstMonth.subtract({ months: 1 });
         const newMonths = createMonths({
-            dateObj: firstMonth.subtract({ months: 1 }),
+            dateObj: targetDate,
             weekStartsOn,
             locale,
             fixedWeeks,
             numberOfMonths,
         });
+        setPlaceholder(targetDate);
         setMonths(newMonths);
-        const firstNewMonth = newMonths[0];
-        if (!firstNewMonth)
-            return;
-        setPlaceholder(firstNewMonth.value.set({ day: 1 }));
     }
 }
 export function getWeekdays({ months, formatter, weekdayFormat }) {

package/package.json

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