grid roving focus work

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-content.svelte

@@ -22,10 +22,9 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, tagContentState.props));
-	const mergedWrapperProps = $derived(mergeProps(tagContentState.wrapperProps, {}));
 </script>
 
-<div {...mergedWrapperProps}>
+<div {...tagContentState.root.sharedGridCellProps}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-remove.svelte

@@ -22,10 +22,9 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, tagRemoveState.props));
-	const mergedWrapperProps = $derived(mergeProps(tagRemoveState.wrapperProps, {}));
 </script>
 
-<div {...mergedWrapperProps}>
+<div {...tagRemoveState.root.sharedGridCellProps}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

packages/bits-ui/src/lib/bits/tags-input/components/tags-input-tag-widget.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { TagContentProps } from "../index.js";
+	import { useTagsInputTagWidget } from "../tags-input.svelte.js";
+	import { useId } from "$lib/internal/useId.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: TagContentProps = $props();
+
+	const tagWidgetState = useTagsInputTagWidget({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tagWidgetState.props));
+</script>
+
+<div {...tagWidgetState.root.sharedGridCellProps}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

packages/bits-ui/src/lib/bits/tags-input/components/tags-input.svelte

@@ -12,8 +12,11 @@
 		ref = $bindable(null),
 		onValueChange = noop,
 		controlledValue = false,
-		delimiter = ",",
+		delimiters = [","],
 		blurBehavior = "none",
+		editable = true,
+		required = false,
+		name = "",
 		children,
 		child,
 		...restProps
@@ -36,8 +39,11 @@
 			() => ref,
 			(v) => (ref = v)
 		),
-		delimiter: box.with(() => delimiter),
+		delimiters: box.with(() => delimiters),
 		blurBehavior: box.with(() => blurBehavior),
+		editable: box.with(() => editable),
+		name: box.with(() => name),
+		required: box.with(() => required),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));