bits-ui 1.3.9 → 1.3.11

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.js

@@ -258,7 +258,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;
@@ -662,7 +662,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;

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/select/select.svelte.d.ts

@@ -138,6 +138,8 @@ 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;
         readonly "data-placeholder": "" | undefined;
@@ -173,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,8 @@ 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),
         "data-placeholder": this.root.hasValue ? undefined : "",
@@ -664,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.9",
+  "version": "1.3.11",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",