bits-ui 1.3.10 → 1.3.12

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { afterTick, box, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
@@ -64,7 +64,9 @@
 				onOpenAutoFocus(e);
 				if (e.defaultPrevented) return;
 				e.preventDefault();
-				contentState.root.cancelNode?.focus();
+				afterTick(() => {
+					contentState.opts.ref.current?.focus();
+				});
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}

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

@@ -26,6 +26,7 @@ declare class CommandRootState {
     labelNode: HTMLElement | null;
     commandState: CommandState;
     _commandState: CommandState;
+    searchHasHadValue: boolean;
     setState<K extends keyof CommandState>(key: K, value: CommandState[K], opts?: boolean): void;
     constructor(opts: CommandRootStateProps);
     /**
@@ -266,7 +267,7 @@ declare class CommandSeparatorState {
     constructor(opts: CommandSeparatorStateProps, root: CommandRootState);
     props: {
         readonly id: string;
-        readonly role: "separator";
+        readonly "aria-hidden": "true";
         readonly "data-command-separator": "";
     };
 }

package/dist/bits/command/command.svelte.js

@@ -44,6 +44,8 @@ class CommandRootState {
     commandState = $state.raw(null);
     // internal state that we mutate in batches and publish to the `state` at once
     _commandState = $state(null);
+    // whether the search has had a value other than ""
+    searchHasHadValue = $state(false);
     #snapshot() {
         return $state.snapshot(this._commandState);
     }
@@ -70,6 +72,9 @@ class CommandRootState {
             this.#filterItems();
             this.#sort();
             this.#selectFirstItem();
+            afterTick(() => {
+                this.#selectFirstItem();
+            });
         }
         else if (key === "value") {
             // opts is a boolean referring to whether it should NOT be scrolled into view
@@ -100,6 +105,11 @@ class CommandRootState {
         this.commandState = defaultState;
         useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
+        $effect(() => {
+            if (this._commandState.search !== "") {
+                this.searchHasHadValue = true;
+            }
+        });
     }
     /**
      * Calculates score for an item based on search text and keywords.
@@ -258,7 +268,7 @@ class CommandRootState {
         const node = this.opts.ref.current;
         if (!node)
             return;
-        const selectedNode = node.querySelector(`${COMMAND_VALID_ITEM_SELECTOR}[aria-selected="true"]`);
+        const selectedNode = node.querySelector(`${COMMAND_VALID_ITEM_SELECTOR}[data-selected]`);
         if (!selectedNode)
             return;
         return selectedNode;
@@ -268,7 +278,7 @@ class CommandRootState {
      * Special handling for first items in groups.
      */
     #scrollSelectedIntoView() {
-        afterSleep(1, () => {
+        afterTick(() => {
             const item = this.#getSelectedItem();
             if (!item)
                 return;
@@ -277,10 +287,10 @@ class CommandRootState {
                 return;
             const firstChildOfParent = getFirstNonCommentChild(grandparent);
             if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
-                item
+                const closestGroupHeader = item
                     ?.closest(COMMAND_GROUP_SELECTOR)
-                    ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR)
-                    ?.scrollIntoView({ block: "nearest" });
+                    ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR);
+                closestGroupHeader?.scrollIntoView({ block: "nearest" });
                 return;
             }
             item.scrollIntoView({ block: "nearest" });
@@ -419,15 +429,16 @@ class CommandRootState {
         this.#sort();
         this.#scheduleUpdate();
         return () => {
+            const selectedItem = this.#getSelectedItem();
             this.allIds.delete(id);
             this.allItems.delete(id);
             this.commandState.filtered.items.delete(id);
-            const selectedItem = this.#getSelectedItem();
             this.#filterItems();
             // The item removed have been the selected one,
             // so selection should be moved to the first
-            if (selectedItem?.getAttribute("id") === id)
+            if (selectedItem?.getAttribute("id") === id) {
                 this.#selectFirstItem();
+            }
             this.#scheduleUpdate();
         };
     }
@@ -558,12 +569,16 @@ class CommandEmptyState {
     opts;
     root;
     #isInitialRender = true;
-    shouldRender = $derived.by(() => (this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
-        this.opts.forceMount.current);
+    shouldRender = $derived.by(() => {
+        return ((this.root._commandState.filtered.count === 0 &&
+            this.#isInitialRender === false &&
+            this.root.searchHasHadValue) ||
+            this.opts.forceMount.current);
+    });
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        $effect(() => {
+        $effect.pre(() => {
             this.#isInitialRender = false;
         });
         useRefById({
@@ -599,7 +614,7 @@ class CommandGroupContainerState {
             ...opts,
             deps: () => this.shouldRender,
         });
-        $effect(() => {
+        watch(() => this.opts.id.current, () => {
             return this.root.registerGroup(this.opts.id.current);
         });
         $effect(() => {
@@ -662,7 +677,7 @@ class CommandInputState {
     opts;
     root;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(this.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(this.root.opts.value.current)}"]`);
         if (!item)
             return;
         return item?.getAttribute("id") ?? undefined;
@@ -712,6 +727,7 @@ class CommandItemState {
     });
     trueValue = $state("");
     shouldRender = $derived.by(() => {
+        this.opts.ref.current;
         if (this.#trueForceMount ||
             this.root.opts.shouldFilter.current === false ||
             !this.root.commandState.search) {
@@ -736,6 +752,7 @@ class CommandItemState {
             () => this.opts.id.current,
             () => this.#group?.opts.id.current,
             () => this.opts.forceMount.current,
+            () => this.opts.ref.current,
         ], () => {
             if (this.opts.forceMount.current)
                 return;
@@ -807,7 +824,7 @@ class CommandLoadingState {
 class CommandSeparatorState {
     opts;
     root;
-    shouldRender = $derived.by(() => !this.root.commandState.search || this.opts.forceMount.current);
+    shouldRender = $derived.by(() => !this.root._commandState.search || this.opts.forceMount.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -818,7 +835,8 @@ class CommandSeparatorState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        role: "separator",
+        // role="separator" cannot belong to a role="listbox"
+        "aria-hidden": "true",
         [COMMAND_SEPARATOR_ATTR]: "",
     }));
 }

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

@@ -35,7 +35,7 @@
 </script>
 
 {#key itemState.root.key}
-	<div style="display: contents;" data-item-wrapper data-value={value}>
+	<div style="display: contents;" data-item-wrapper data-value={itemState.trueValue}>
 		{#if itemState.shouldRender}
 			{#if child}
 				{@render child({ props: mergedProps })}

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

@@ -25,10 +25,12 @@
 	const mergedProps = $derived(mergeProps(restProps, listState.props));
 </script>
 
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
+{#key listState.root._commandState.search === ""}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+{/key}

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

@@ -17,6 +17,7 @@
 		loop = true,
 		onInteractOutside = noop,
 		onCloseAutoFocus = noop,
+		onOpenAutoFocus = noop,
 		preventScroll = true,
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
@@ -73,6 +74,7 @@
 		{preventScroll}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
+		{onOpenAutoFocus}
 		{isValidEvent}
 		trapFocus
 		{loop}
@@ -105,6 +107,7 @@
 		{preventScroll}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
+		{onOpenAutoFocus}
 		{isValidEvent}
 		trapFocus
 		{loop}

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

@@ -2,7 +2,7 @@ import type { MenuContentProps, MenuContentPropsWithoutHTML } from "../menu/type
 import type { WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 export type ContextMenuContentPropsWithoutHTML = Omit<MenuContentPropsWithoutHTML, "align" | "side" | "sideOffset">;
-export type ContextMenuContentProps = Omit<MenuContentProps, "side" | "onOpenAutoFocus" | "sideOffset" | "align">;
+export type ContextMenuContentProps = Omit<MenuContentProps, "side" | "sideOffset" | "align">;
 export type ContextMenuTriggerPropsWithoutHTML = WithChild<{
     /**
      * Whether the context menu trigger is disabled. If disabled, the trigger will not

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

@@ -71,6 +71,7 @@ declare class DialogCloseState {
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly disabled: true | undefined;
+        readonly tabindex: 0;
     };
 }
 type DialogActionStateProps = WithRefProps;
@@ -120,11 +121,14 @@ declare class DialogContentState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "dialog" | "alertdialog";
+        readonly "aria-modal": "true";
         readonly "aria-describedby": string | undefined;
         readonly "aria-labelledby": string | undefined;
         readonly style: {
             readonly pointerEvents: "auto";
+            readonly outline: "none" | undefined;
         };
+        readonly tabindex: -1 | undefined;
     };
 }
 type DialogOverlayStateProps = WithRefProps;
@@ -157,6 +161,7 @@ declare class AlertDialogCancelState {
         readonly id: string;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly tabindex: 0;
     };
 }
 export declare function useDialogRoot(props: DialogRootStateProps): DialogRootState;

package/dist/bits/dialog/dialog.svelte.js

@@ -123,6 +123,7 @@ class DialogCloseState {
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         disabled: this.opts.disabled.current ? true : undefined,
+        tabindex: 0,
         ...this.root.sharedProps,
     }));
 }
@@ -204,12 +205,15 @@ class DialogContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: this.root.opts.variant.current === "alert-dialog" ? "alertdialog" : "dialog",
+        "aria-modal": "true",
         "aria-describedby": this.root.descriptionId,
         "aria-labelledby": this.root.titleId,
         [this.root.attrs.content]: "",
         style: {
             pointerEvents: "auto",
+            outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
         },
+        tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         ...this.root.sharedProps,
     }));
 }
@@ -270,6 +274,7 @@ class AlertDialogCancelState {
         [this.root.attrs.cancel]: "",
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        tabindex: 0,
         ...this.root.sharedProps,
     }));
 }

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

@@ -1,5 +1,5 @@
 import { useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { kbd } from "../../internal/kbd.js";
@@ -43,6 +43,7 @@ class RadioGroupItemState {
     checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     #isChecked = $derived.by(() => this.root.isChecked(this.opts.value.current));
+    #tabIndex = $state(-1);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -57,6 +58,12 @@ class RadioGroupItemState {
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
+        watch([() => this.opts.value.current, () => this.root.opts.value.current], () => {
+            if (this.opts.value.current === this.root.opts.value.current) {
+                this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
+                this.#tabIndex = 0;
+            }
+        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         this.onfocus = this.onfocus.bind(this);
@@ -81,7 +88,6 @@ class RadioGroupItemState {
         }
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
     }
-    #tabIndex = $state(-1);
     snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

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

@@ -138,6 +138,7 @@ declare class SelectTriggerState {
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
+        readonly "aria-expanded": "true" | "false";
         readonly "aria-activedescendant": string | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
@@ -174,9 +175,10 @@ declare class SelectContentState {
             readonly outline: "none";
             readonly boxSizing: "border-box";
             readonly pointerEvents: "auto";
-        };
+        } | undefined;
         readonly id: string;
         readonly role: "listbox";
+        readonly "aria-multiselectable": "true" | undefined;
         readonly "data-state": "open" | "closed";
         readonly style: {
             readonly display: "flex";

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

@@ -589,6 +589,7 @@ class SelectTriggerState {
         id: this.opts.id.current,
         disabled: this.root.opts.disabled.current ? true : undefined,
         "aria-haspopup": "listbox",
+        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "aria-activedescendant": this.root.highlightedId,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
@@ -665,6 +666,7 @@ class SelectContentState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "listbox",
+        "aria-multiselectable": this.root.isMulti ? "true" : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         [this.root.bitsAttrs.content]: "",
         style: {

package/package.json

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