bits-ui 1.0.0-next.22 → 1.0.0-next.24

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref, ...restProps }: ButtonRootProps = $props();
+	let { href, type, children, ref = $bindable(), ...restProps }: ButtonRootProps = $props();
 </script>
 
 <svelte:element

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

@@ -14,6 +14,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Button: $$__sveltets_2_IsomorphicComponent<ButtonRootProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type Button = InstanceType<typeof Button>;
 export default Button;

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

@@ -9,6 +9,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		type = "button",
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
@@ -20,7 +21,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 {#if child}

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

@@ -68,6 +68,9 @@ class RadioGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     #onpointerdown = (e) => {
         if (this.#disabled.current)
@@ -90,7 +93,7 @@ class RadioGroupItemState {
     #onkeydown = (e) => {
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e, true);
     };
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
     props = $derived.by(() => ({
         id: this.#id.current,

package/dist/bits/select/components/select-trigger.svelte

@@ -10,6 +10,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		type = "button",
 		...restProps
 	}: SelectTriggerProps = $props();
 
@@ -21,7 +22,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 <FloatingLayer.Anchor {id}>

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

@@ -98,6 +98,14 @@ class ToggleGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            if (!this.#root.rovingFocus.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+            }
+        });
     }
     toggleItem = () => {
         if (this.#isDisabled)
@@ -128,9 +136,7 @@ class ToggleGroupItemState {
     #ariaPressed = $derived.by(() => {
         return this.#root.isMulti ? getAriaPressed(this.isPressed) : undefined;
     });
-    #tabIndex = $derived.by(() => !this.#root.rovingFocus.current
-        ? 0
-        : this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         role: this.#root.isMulti ? undefined : "radio",

package/dist/bits/toolbar/toolbar.svelte.js

@@ -124,6 +124,9 @@ class ToolbarGroupItemState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     toggleItem = () => {
         if (this.#isDisabled)
@@ -162,7 +165,7 @@ class ToolbarGroupItemState {
     #ariaPressed = $derived.by(() => {
         return this.#group.isMulti ? getAriaPressed(this.isPressed) : undefined;
     });
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         role: this.#group.isMulti ? undefined : "radio",
@@ -194,6 +197,9 @@ class ToolbarLinkState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     #onkeydown = (e) => {
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
@@ -206,7 +212,7 @@ class ToolbarLinkState {
             return "link";
         return undefined;
     });
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     props = $derived.by(() => ({
         id: this.#id.current,
         [LINK_ATTR]: "",
@@ -232,11 +238,14 @@ class ToolbarButtonState {
             id: this.#id,
             ref: this.#ref,
         });
+        $effect(() => {
+            this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+        });
     }
     #onkeydown = (e) => {
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
     };
-    #tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+    #tabIndex = $state(0);
     #role = $derived.by(() => {
         if (!this.#ref.current)
             return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.22",
+  "version": "1.0.0-next.24",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -27,7 +27,7 @@
     "jest-axe": "^9.0.0",
     "jsdom": "^24.1.0",
     "publint": "^0.2.11",
-    "svelte": "^5.0.0",
+    "svelte": "^5.1.0",
     "svelte-check": "4.0.3",
     "tslib": "^2.7.0",
     "typescript": "^5.6.2",