next: accordion test updates (#501)

packages/bits-ui/package.json

@@ -39,6 +39,7 @@
 		"@types/node": "^20.12.2",
 		"@types/resize-observer-browser": "^0.1.11",
 		"@types/testing-library__jest-dom": "^5.14.9",
+		"@vitest/ui": "^1.5.0",
 		"csstype": "^3.1.3",
 		"jest-axe": "^8.0.0",
 		"jsdom": "^24.0.0",

packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts

@@ -50,10 +50,6 @@ class AccordionBaseState {
 		);
 	}
 
-	createHeader(props: AccordionHeaderStateProps) {
-		return new AccordionHeaderState(props);
-	}
-
 	props = $derived({
 		id: this.id.value,
 		[ROOT_ATTR]: "",
@@ -107,7 +103,7 @@ export class AccordionMultiState extends AccordionBaseState {
 		if (this.includesItem(item)) {
 			this.#value.value = this.#value.value.filter((v) => v !== item);
 		} else {
-			this.#value.value.push(item);
+			this.#value.value = [...this.#value.value, item];
 		}
 	}
 }
@@ -148,6 +144,10 @@ export class AccordionItemState {
 		return new AccordionContentState(props, this);
 	}
 
+	createHeader(props: AccordionHeaderStateProps) {
+		return new AccordionHeaderState(props, this);
+	}
+
 	props = $derived({
 		[ITEM_ATTR]: "",
 		"data-state": getDataOpenClosed(this.isSelected),
@@ -320,16 +320,18 @@ type AccordionHeaderStateProps = ReadonlyBoxedValues<{
 }>;
 
 class AccordionHeaderState {
+	#item = undefined as unknown as AccordionItemState;
 	#level = undefined as unknown as AccordionHeaderStateProps["level"];
-
-	constructor(props: AccordionHeaderStateProps) {
+	constructor(props: AccordionHeaderStateProps, item: AccordionItemState) {
 		this.#level = props.level;
+		this.#item = item;
 	}
 
 	props = $derived({
 		role: "heading",
 		"aria-level": this.#level.value,
 		"data-heading-level": this.#level.value,
+		"data-state": getDataOpenClosed(this.#item.isSelected),
 		[HEADER_ATTR]: "",
 	});
 }
@@ -360,33 +362,32 @@ export function setAccordionRootState(props: InitAccordionProps) {
 }
 
 export function getAccordionRootState() {
+	verifyContextDeps(ACCORDION_ROOT_KEY);
 	return getContext<AccordionState>(ACCORDION_ROOT_KEY);
 }
 
 export function setAccordionItemState(props: Omit<AccordionItemStateProps, "rootState">) {
-	verifyContextDeps(ACCORDION_ROOT_KEY);
 	const rootState = getAccordionRootState();
 	const itemState = new AccordionItemState({ ...props, rootState });
 	setContext(ACCORDION_ITEM_KEY, itemState);
 	return itemState;
 }
 
 export function getAccordionItemState() {
+	verifyContextDeps(ACCORDION_ITEM_KEY);
 	return getContext<AccordionItemState>(ACCORDION_ITEM_KEY);
 }
 
 export function getAccordionTriggerState(props: AccordionTriggerStateProps): AccordionTriggerState {
-	verifyContextDeps(ACCORDION_ITEM_KEY);
 	const itemState = getAccordionItemState();
 	return itemState.createTrigger(props);
 }
 
 export function getAccordionContentState(props: AccordionContentStateProps): AccordionContentState {
-	verifyContextDeps(ACCORDION_ITEM_KEY);
 	const itemState = getAccordionItemState();
 	return itemState.createContent(props);
 }
 
 export function getAccordionHeaderState(props: AccordionHeaderStateProps): AccordionHeaderState {
-	return getAccordionRootState().createHeader(props);
+	return getAccordionItemState().createHeader(props);
 }

packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte

@@ -9,21 +9,21 @@
 		children,
 		child,
 		type,
-		value: valueProp = $bindable(),
+		value = $bindable(),
 		el = $bindable(),
 		id = useId(),
 		onValueChange,
 		...restProps
 	}: RootProps = $props();
 
-	valueProp === undefined && (valueProp = type === "single" ? "" : []);
+	value === undefined && (value = type === "single" ? "" : []);
 
 	const rootState = setAccordionRootState({
 		type,
 		value: box(
-			() => valueProp!,
+			() => value!,
 			(v) => {
-				valueProp = v;
+				value = v;
 				onValueChange?.(v as any);
 			}
 		) as Box<string> | Box<string[]>,

packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts

@@ -12,7 +12,8 @@ import {
 	type ReadonlyBoxedValues,
 	boxedState,
 } from "$lib/internal/box.svelte.js";
-import { getDirectionalKeys, kbd } from "$lib/internal/kbd.js";
+import { kbd } from "$lib/internal/kbd.js";
+import { getDirectionalKeys } from "$lib/internal/get-directional-keys.js";
 import { getElemDirection } from "$lib/internal/locale.js";
 import { useNodeById } from "$lib/internal/use-node-by-id.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";