bits-ui 2.6.2 → 2.7.0

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

@@ -18,6 +18,7 @@
 		loop = true,
 		name = undefined,
 		required = false,
+		readonly = false,
 		id = createId(uid),
 		onValueChange = noop,
 		...restProps
@@ -29,6 +30,7 @@
 		loop: box.with(() => loop),
 		name: box.with(() => name),
 		required: box.with(() => required),
+		readonly: box.with(() => readonly),
 		id: box.with(() => id),
 		value: box.with(
 			() => value,

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

@@ -8,6 +8,7 @@ type RadioGroupRootStateProps = WithRefProps<ReadableBoxedValues<{
     loop: boolean;
     orientation: Orientation;
     name: string | undefined;
+    readonly: boolean;
 }> & WritableBoxedValues<{
     value: string;
 }>>;
@@ -22,7 +23,10 @@ declare class RadioGroupRootState {
         readonly id: string;
         readonly role: "radiogroup";
         readonly "aria-required": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-readonly": "true" | undefined;
         readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
         readonly "data-orientation": Orientation;
     };
 }
@@ -48,6 +52,7 @@ declare class RadioGroupItemState {
         readonly "data-value": string;
         readonly "data-orientation": Orientation;
         readonly "data-disabled": "" | undefined;
+        readonly "data-readonly": "" | undefined;
         readonly "data-state": "checked" | "unchecked";
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly type: "button";

package/dist/bits/radio-group/radio-group.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, getAriaRequired, getDataDisabled, getDataReadonly, getAriaDisabled, } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
 const radioGroupAttrs = createBitsAttrs({
@@ -30,7 +30,10 @@ class RadioGroupRootState {
         id: this.opts.id.current,
         role: "radiogroup",
         "aria-required": getAriaRequired(this.opts.required.current),
+        "aria-disabled": getAriaDisabled(this.opts.disabled.current),
+        "aria-readonly": this.opts.readonly.current ? "true" : undefined,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-readonly": getDataReadonly(this.opts.readonly.current),
         "data-orientation": this.opts.orientation.current,
         [radioGroupAttrs.root]: "",
         ...attachRef(this.opts.ref),
@@ -41,6 +44,7 @@ class RadioGroupItemState {
     root;
     checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #isReadonly = $derived.by(() => this.root.opts.readonly.current);
     #isChecked = $derived.by(() => this.root.isChecked(this.opts.value.current));
     #tabIndex = $state(-1);
     constructor(opts, root) {
@@ -67,12 +71,12 @@ class RadioGroupItemState {
         this.onfocus = this.onfocus.bind(this);
     }
     onclick(_) {
-        if (this.opts.disabled.current)
+        if (this.opts.disabled.current || this.#isReadonly)
             return;
         this.root.setValue(this.opts.value.current);
     }
     onfocus(_) {
-        if (!this.root.hasValue)
+        if (!this.root.hasValue || this.#isReadonly)
             return;
         this.root.setValue(this.opts.value.current);
     }
@@ -81,7 +85,9 @@ class RadioGroupItemState {
             return;
         if (e.key === kbd.SPACE) {
             e.preventDefault();
-            this.root.setValue(this.opts.value.current);
+            if (!this.#isReadonly) {
+                this.root.setValue(this.opts.value.current);
+            }
             return;
         }
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
@@ -93,6 +99,7 @@ class RadioGroupItemState {
         "data-value": this.opts.value.current,
         "data-orientation": this.root.opts.orientation.current,
         "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-readonly": getDataReadonly(this.#isReadonly),
         "data-state": this.#isChecked ? "checked" : "unchecked",
         "aria-checked": getAriaChecked(this.#isChecked, false),
         [radioGroupAttrs.item]: "",

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

@@ -6,20 +6,20 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * The orientation of the radio group. Used to determine
      * how keyboard navigation should work.
      *
-     * @defaultValue "vertical"
+     * @default "vertical"
      */
     orientation?: Orientation;
     /**
      * Whether to loop around the radio items when navigating
      * with the keyboard.
      *
-     * @defaultValue true
+     * @default true
      */
     loop?: boolean;
     /**
      * The value of the selected radio item.
      *
-     * @defaultValue ""
+     * @default ""
      */
     value?: string;
     /**
@@ -31,13 +31,13 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * form submission. If not provided, a hidden input will not
      * be rendered and the radio group will not be part of a form.
      *
-     * @defaultValue undefined
+     * @default undefined
      */
     name?: string;
     /**
      * Whether the radio group is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -46,6 +46,13 @@ export type RadioGroupRootPropsWithoutHTML = WithChild<{
      * input is rendered.
      */
     required?: boolean;
+    /**
+     * Whether the radio group is readonly. When readonly, users can
+     * focus and navigate through items but cannot change the value.
+     *
+     * @default false
+     */
+    readonly?: boolean;
 }>;
 export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RadioGroupRootPropsWithoutHTML>;
 export type RadioGroupItemSnippetProps = {
@@ -59,7 +66,7 @@ export type RadioGroupItemPropsWithoutHTML = WithChild<{
     /**
      * Whether the radio item is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean | null | undefined;
 }, RadioGroupItemSnippetProps>;

package/dist/bits/select/select.svelte.js

@@ -615,6 +615,8 @@ class SelectTriggerState {
         }
     }
     onpointerup(e) {
+        if (this.root.opts.disabled.current)
+            return;
         e.preventDefault();
         if (e.pointerType === "touch") {
             if (this.root.opts.open.current === false) {

package/package.json

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