From b9255fd2c21385fc17db348ae47c81f2876f4026 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:15:08 -0500
Subject: [PATCH] chore: cleanup internals (#1014)

---
 .../bits/collapsible/collapsible.svelte.ts    |  4 +--
 .../bits/link-preview/link-preview.svelte.ts  |  4 +--
 .../src/lib/bits/popover/popover.svelte.ts    | 27 ++++++++++---------
 .../bits-ui/src/lib/bits/tabs/tabs.svelte.ts  | 12 ++++-----
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
index bce1b4836..1aff9cf8e 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
@@ -24,7 +24,6 @@ class CollapsibleRootState {
 	open: CollapsibleRootStateProps["open"];
 	disabled: CollapsibleRootStateProps["disabled"];
 	contentNode = $state<HTMLElement | null>(null);
-	contentId = $state<string | undefined>(undefined);
 
 	constructor(props: CollapsibleRootStateProps) {
 		this.open = props.open;
@@ -87,7 +86,6 @@ class CollapsibleContentState {
 			deps: () => this.present,
 			onRefChange: (node) => {
 				this.root.contentNode = node;
-				this.root.contentId = node?.id;
 			},
 		});
 
@@ -206,7 +204,7 @@ class CollapsibleTriggerState {
 				id: this.#id.current,
 				type: "button",
 				disabled: this.#isDisabled,
-				"aria-controls": this.#root.contentId,
+				"aria-controls": this.#root.contentNode?.id,
 				"aria-expanded": getAriaExpanded(this.#root.open.current),
 				"data-state": getDataOpenClosed(this.#root.open.current),
 				"data-disabled": getDataDisabled(this.#isDisabled),
diff --git a/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts b/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts
index 73dae753c..50ddce7e2 100644
--- a/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/link-preview/link-preview.svelte.ts
@@ -29,7 +29,6 @@ class LinkPreviewRootState {
 	containsSelection = $state(false);
 	timeout: number | null = null;
 	contentNode = $state<HTMLElement | null>(null);
-	contentId = $state<string | undefined>(undefined);
 	contentMounted = $state(false);
 	triggerNode = $state<HTMLElement | null>(null);
 	isPointerInTransit = box(false);
@@ -170,7 +169,7 @@ class LinkPreviewTriggerState {
 				"aria-haspopup": "dialog",
 				"aria-expanded": getAriaExpanded(this.#root.open.current),
 				"data-state": getDataOpenClosed(this.#root.open.current),
-				"aria-controls": this.#root.contentId,
+				"aria-controls": this.#root.contentNode?.id,
 				role: "button",
 				[TRIGGER_ATTR]: "",
 				onpointerenter: this.onpointerenter,
@@ -202,7 +201,6 @@ class LinkPreviewContentState {
 			ref: this.#ref,
 			onRefChange: (node) => {
 				this.root.contentNode = node;
-				this.root.contentId = node?.id;
 			},
 			deps: () => this.root.open.current,
 		});
diff --git a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
index bdff2895a..89966bae6 100644
--- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
@@ -17,7 +17,6 @@ type PopoverRootStateProps = WritableBoxedValues<{
 class PopoverRootState {
 	open: PopoverRootStateProps["open"];
 	contentNode = $state<HTMLElement | null>(null);
-	contentId = $state<string | undefined>(undefined);
 	triggerNode = $state<HTMLElement | null>(null);
 
 	constructor(props: PopoverRootStateProps) {
@@ -83,8 +82,8 @@ class PopoverTriggerState {
 	}
 
 	#getAriaControls() {
-		if (this.#root.open.current && this.#root.contentId) {
-			return this.#root.contentId;
+		if (this.#root.open.current && this.#root.contentNode?.id) {
+			return this.#root.contentNode?.id;
 		}
 		return undefined;
 	}
@@ -124,22 +123,24 @@ class PopoverContentState {
 			deps: () => this.root.open.current,
 			onRefChange: (node) => {
 				this.root.contentNode = node;
-				this.root.contentId = node?.id;
 			},
 		});
 	}
 
 	snippetProps = $derived.by(() => ({ open: this.root.open.current }));
 
-	props = $derived.by(() => ({
-		id: this.#id.current,
-		tabindex: -1,
-		"data-state": getDataOpenClosed(this.root.open.current),
-		"data-popover-content": "",
-		style: {
-			pointerEvents: "auto",
-		},
-	}));
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				tabindex: -1,
+				"data-state": getDataOpenClosed(this.root.open.current),
+				"data-popover-content": "",
+				style: {
+					pointerEvents: "auto",
+				},
+			}) as const
+	);
 }
 
 type PopoverCloseStateProps = WithRefProps;
diff --git a/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts b/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
index 148925577..c8cf11fa0 100644
--- a/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
@@ -215,17 +215,17 @@ class TabsTriggerState {
 		this.#root.setValue(this.#value.current);
 	}
 
-	onfocus = (_: BitsFocusEvent) => {
+	onfocus(_: BitsFocusEvent) {
 		if (this.#root.activationMode.current !== "automatic" || this.#isDisabled) return;
 		this.#activate();
-	};
+	}
 
-	onclick = (_: BitsMouseEvent) => {
+	onclick(_: BitsMouseEvent) {
 		if (this.#isDisabled) return;
 		this.#activate();
-	};
+	}
 
-	onkeydown = (e: BitsKeyboardEvent) => {
+	onkeydown(e: BitsKeyboardEvent) {
 		if (this.#isDisabled) return;
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
@@ -233,7 +233,7 @@ class TabsTriggerState {
 			return;
 		}
 		this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-	};
+	}
 
 	props = $derived.by(
 		() =>