@torpor/ui 0.2.0 → 0.3.0

package/test/Form/field.test.ts

@@ -0,0 +1,34 @@
+import {
+	fireEvent,
+	getByPlaceholderText,
+	queryByPlaceholderText,
+	queryByText,
+} from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Field from "./components/FieldTest.torp";
+
+test("Field", async () => {
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Field);
+
+	// Label, input, message
+	expect(queryByText(container, "Name:")).not.toBeNull();
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+	expect(queryByText(container, "Name is required!")).toBeNull();
+
+	// Label `for` should be automatically hooked up
+	expect(queryByPlaceholderText(container, "Name...")).toHaveAttribute("id", "name-id");
+	expect(queryByText(container, "Name:")).toHaveAttribute("for", "name-id");
+
+	// Validation should be fired on blur
+	fireEvent.blur(queryByPlaceholderText(container, "Name...")!);
+	expect(queryByText(container, "Name is required!")).not.toBeNull();
+
+	// After blur, validation should fire on input
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "G");
+	expect(queryByText(container, "Name is required!")).toBeNull();
+});

package/test/Form/form.test.ts

@@ -0,0 +1,34 @@
+import {
+	getByPlaceholderText,
+	getByText,
+	queryByPlaceholderText,
+	queryByText,
+} from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Form from "./components/FormTest.torp";
+
+test("Form", async () => {
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Form);
+
+	// Label, input, message
+	expect(queryByText(container, "Name:")).not.toBeNull();
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+	expect(queryByText(container, "Name is required!")).toBeNull();
+
+	// Label `for` should be automatically hooked up
+	expect(queryByPlaceholderText(container, "Name...")).toHaveAttribute("id", "name-id");
+	expect(queryByText(container, "Name:")).toHaveAttribute("for", "name-id");
+
+	// Validation should be fired on submit
+	await userEvent.click(getByText(container, "Submit"));
+	expect(queryByText(container, "Name is required!")).not.toBeNull();
+
+	// After submitting, validation should fire on input
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "G");
+	expect(queryByText(container, "Name is required!")).toBeNull();
+});

package/test/Form/input.test.ts

@@ -0,0 +1,19 @@
+import { getByPlaceholderText, queryByPlaceholderText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { expect, test } from "vitest";
+import Input from "./components/InputTest.torp";
+
+test("Input", async () => {
+	let props = { value: "" };
+
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	mount(container, Input, props);
+
+	expect(queryByPlaceholderText(container, "Name...")).not.toBeNull();
+
+	await userEvent.type(getByPlaceholderText(container, "Name..."), "Greg");
+	expect(props.value).toBe("Greg");
+});

package/test/Menu/accessibility.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import MenuAccessibility from "./components/MenuAccessibility.torp";
@@ -35,7 +36,7 @@ describe("Menu", () => {
 		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
 		// to true when the child menu is visible
 		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-expanded", "false");
-		fireEvent.click(getByText(container, "Check popout button"));
+		await userEvent.click(getByText(container, "Check popout button"));
 		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-expanded", "true");
 
 		// One of the following approaches is used to enable scripts to move focus among items in a

package/test/Menu/basic.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import MenuBasic from "./components/MenuBasic.torp";
@@ -20,37 +21,37 @@ describe("Menu", () => {
 		expect(queryByText(container, "Radio 1")).not.toBeInTheDocument();
 
 		// Clicking a popout button should show the appropriate menu
-		fireEvent.click(getByText(container, "Check popout button"));
+		await userEvent.click(getByText(container, "Check popout button"));
 		expect(queryByText(container, "Checked 1")).toBeInTheDocument();
 		expect(queryByText(container, "Radio 1")).not.toBeInTheDocument();
 
 		// Clicking another popout button should show that menu instead
-		fireEvent.click(getByText(container, "Radio popout button"));
+		await userEvent.click(getByText(container, "Radio popout button"));
 		//expect(queryByText(container, 'Checked 1')).not.toBeInTheDocument();
 		expect(queryByText(container, "Radio 1")).toBeInTheDocument();
 
 		// Checking a box should show or hide the indicator
-		fireEvent.click(getByText(container, "Check popout button"));
+		await userEvent.click(getByText(container, "Check popout button"));
 		expect(queryByText(container, "Tick 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
-		fireEvent.click(getByText(container, "Checked 1"));
+		await userEvent.click(getByText(container, "Checked 1"));
 		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
 		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
-		fireEvent.click(getByText(container, "Checked 2"));
+		await userEvent.click(getByText(container, "Checked 2"));
 		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
 		expect(queryByText(container, "Tick 2")).toBeInTheDocument();
-		fireEvent.click(getByText(container, "Checked 1"));
+		await userEvent.click(getByText(container, "Checked 1"));
 		expect(queryByText(container, "Tick 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Tick 2")).toBeInTheDocument();
 
 		// Checking a radio should show the indicator, and hide another indicator if already selected
-		fireEvent.click(getByText(container, "Radio popout button"));
+		await userEvent.click(getByText(container, "Radio popout button"));
 		expect(queryByText(container, "Circle 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
-		fireEvent.click(getByText(container, "Radio 1"));
+		await userEvent.click(getByText(container, "Radio 1"));
 		expect(queryByText(container, "Circle 1")).toBeInTheDocument();
 		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
-		fireEvent.click(getByText(container, "Radio 2"));
+		await userEvent.click(getByText(container, "Radio 2"));
 		expect(queryByText(container, "Circle 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Circle 2")).toBeInTheDocument();
 	});

package/test/Menu/components/MenuAccessibility.torp

@@ -1,4 +1,4 @@
-import { Popover, PopoverContent } from "../../../src/Popover";
+import { Modal, ModalContent } from "../../../src/Modal";
 import {
 	Menu,
 	MenuButton,
@@ -14,8 +14,8 @@ import {
 
 export default function MenuAccessibility() {
 	@render {
-		<Popover visible>
-			<PopoverContent>
+		<Modal visible>
+			<ModalContent>
 				<Menu ariaLabel="A menu">
 					<MenuButton>Menu button</MenuButton>
 					<MenuButton disabled>Disabled button</MenuButton>
@@ -53,7 +53,7 @@ export default function MenuAccessibility() {
 						</MenuPopoutContent>
 					</MenuPopout>
 				</Menu>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/Menu/components/MenuBasic.torp

@@ -1,4 +1,4 @@
-import { Popover, PopoverContent } from "../../../src/Popover";
+import { Modal, ModalContent } from "../../../src/Modal";
 import {
 	Menu,
 	MenuButton,
@@ -14,8 +14,8 @@ import {
 
 export default function MenuBasic() {
 	@render {
-		<Popover visible>
-			<PopoverContent>
+		<Modal visible>
+			<ModalContent>
 				<Menu ariaLabel="A menu">
 					<MenuButton>Menu button</MenuButton>
 					<MenuSeparator>---</MenuSeparator>
@@ -52,7 +52,7 @@ export default function MenuBasic() {
 						</MenuPopoutContent>
 					</MenuPopout>
 				</Menu>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/MenuBar/accessibility.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import MenuBarAccessibility from "./components/MenuBarAccessibility.torp";
@@ -38,7 +39,7 @@ describe("MenuBar", () => {
 		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
 		// to true when the child menu is visible
 		expect(queryByText(container, "Top level")).toHaveAttribute("aria-expanded", "false");
-		fireEvent.click(getByText(container, "Top level"));
+		await userEvent.click(getByText(container, "Top level"));
 		expect(queryByText(container, "Top level")).toHaveAttribute("aria-expanded", "true");
 
 		// One of the following approaches is used to enable scripts to move focus among items in a

package/test/MenuBar/basic.test.ts

@@ -1,5 +1,6 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import { getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import MenuBarBasic from "./components/MenuBarBasic.torp";
@@ -15,7 +16,7 @@ describe("MenuBar", () => {
 		expect(queryByText(container, "Sub item 1")).not.toBeInTheDocument();
 
 		// Clicking the top level item should show the sub item
-		fireEvent.click(getByText(container, "Top level"));
+		await userEvent.click(getByText(container, "Top level"));
 		expect(queryByText(container, "Sub item 1")).toBeInTheDocument();
 	});
 });

package/test/NavMenu/basic.test.ts

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
-import NavMenu from "./components/NavMenu.torp";
+import NavMenu from "./components/NavMenuBasic.torp";
 
 describe("NavMenu", () => {
 	it("Basic operation", async () => {

package/test/NavMenu/components/{NavMenu.torp → NavMenuBasic.torp}

@@ -7,7 +7,7 @@ import {
 	NavMenuSeparator
 } from "../../../src/NavMenu";
 
-export default function NavMenu($props: any) {
+export default function NavMenuBasic($props: any) {
 	@render {
 		<NavMenu ariaLabel="Site navigation">
 			<NavMenuLink href="/">Home</NavMenuLink>

package/test/Notification/components/NotificationFunction.torp

@@ -1,8 +1,5 @@
 import {
-	Notification,
 	NotificationContainer,
-	NotificationContent,
-	NotificationClose,
 	showNotification
 } from "../../../src/Notification/index";
 import CustomNotification from "./CustomNotification.torp";

package/test/Notification/components/NotificationVariable.torp

@@ -10,7 +10,7 @@ export default function NotificationVariable() {
 	});
 
 	@render {
-		<button type="button" onclick={(e) => ($state.showNotification = !$state.showNotification)}>
+		<button type="button" onclick={() => ($state.showNotification = !$state.showNotification)}>
 			Show a notification
 		</button>
 

package/test/Popover/components/PopoverFunction.torp

@@ -0,0 +1,37 @@
+import { Popover, PopoverContent, showPopover } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function PopoverFunction() {
+	let anchor;
+
+	async function show() {
+		showPopover(CustomDialog, anchor);
+	}
+
+	@render {
+		<button type="button" &ref={anchor} onclick={show}>Show the prompt</button>
+	}
+}
+
+function CustomDialog($props) {
+	@render {
+		<Popover visible {$props.anchor}>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/components/PopoverTrigger.torp

@@ -0,0 +1,36 @@
+import { Popover, PopoverContent, PopoverTrigger } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function PopoverTriggerTest() {
+	let $state = $watch({
+		color: "",
+	});
+
+	@render {
+		@if ($state.color) {
+			<p>Your favorite color is {$state.color}?!</p>
+		}
+
+		<Popover &visible={$state.showPopover}>
+			<PopoverTrigger>
+				Show the prompt
+			</PopoverTrigger>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
+						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/components/{PromptVariable.torp → PopoverVariable.torp}

@@ -6,14 +6,16 @@ import {
 	DialogButton
 } from "../../../src/Dialog/index";
 
-export default function PromptVariable() {
+export default function PopoverVariable() {
 	let $state = $watch({
 		color: "",
 		showPopover: false
 	});
 
+	let button: HTMLButtonElement;
+
 	@render {
-		<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+		<button type="button" onclick={() => ($state.showPopover = !$state.showPopover)} &ref={button}>
 			Show the prompt
 		</button>
 
@@ -21,7 +23,7 @@ export default function PromptVariable() {
 			<p>Your favorite color is {$state.color}?!</p>
 		}
 
-		<Popover &visible={$state.showPopover}>
+		<Popover &visible={$state.showPopover} anchor={button}>
 			<PopoverContent>
 				<Dialog>
 					<DialogBody>

package/test/Popover/function.test.ts

@@ -3,13 +3,13 @@ import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
-import PromptFunction from "./components/PromptFunction.torp";
+import PopoverFunction from "./components/PopoverFunction.torp";
 
 describe("Prompt", () => {
 	it("Showing with a function", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, PromptFunction);
+		mount(container, PopoverFunction);
 
 		// By default, the prompt shouldn't be shown
 		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
@@ -17,10 +17,5 @@ describe("Prompt", () => {
 		// Clicking the button should show the prompt
 		await userEvent.click(getByText(container, "Show the prompt"));
 		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the prompt and set the value
-		await userEvent.click(getByText(container, "Blue"));
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
 	});
 });

package/test/Popover/trigger.test.ts

@@ -0,0 +1,27 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import PopoverTrigger from "./components/PopoverTrigger.torp";
+
+describe("Prompt", () => {
+	it("Showing with a trigger", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, PopoverTrigger);
+
+		// By default, the prompt shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
+
+		// Clicking the button should show the prompt
+		await userEvent.click(getByText(container, "Show the prompt"));
+		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
+
+		// Clicking the blue button should hide the prompt and set the value
+		await userEvent.click(getByText(container, "Blue"));
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
+	});
+});

package/test/Popover/variable.test.ts

@@ -3,13 +3,13 @@ import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
-import PromptVariable from "./components/PromptVariable.torp";
+import PopoverVariable from "./components/PopoverVariable.torp";
 
 describe("Prompt", () => {
 	it("Showing with a variable", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, PromptVariable);
+		mount(container, PopoverVariable);
 
 		// By default, the prompt shouldn't be shown
 		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();

package/test/TabGroup/components/TabGroupAccessibility.torp

@@ -8,7 +8,7 @@ import {
 
 export default function TabGroupAccessibility() {
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList ariaLabel="Example tabs">
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/test/TabGroup/components/TabGroupKeyboard.torp

@@ -8,7 +8,7 @@ import {
 
 export default function TabGroupKeyboard() {
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/test/TabGroup/components/TabGroupList.torp

@@ -8,7 +8,7 @@ import {
 
 export default function TabGroupList() {
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 			@for (let item of $props.items) {
 				@key = item.id

package/test/TabGroup/components/TabGroupTrigger.torp

@@ -8,7 +8,7 @@ import {
 
 export default function TabGroupTrigger() {
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/tsup.config.ts

@@ -10,16 +10,18 @@ export default defineConfig({
 		"src/Accordion/index.ts",
 		"src/Breadcrumb/index.ts",
 		"src/Calendar/index.ts",
+		"src/Contextual/index.ts",
 		"src/Dialog/index.ts",
 		"src/Disclosure/index.ts",
 		"src/Drawer/index.ts",
+		"src/Form/index.ts",
 		"src/Menu/index.ts",
 		"src/MenuBar/index.ts",
+		"src/Modal/index.ts",
 		"src/NavMenu/index.ts",
 		"src/Notification/index.ts",
 		"src/Popover/index.ts",
 		"src/TabGroup/index.ts",
-		"src/form/index.ts",
 		"src/icons/index.ts",
 		"src/motion/index.ts",
 	],

package/dist/Popover/PopoverContentAnchored.torp

@@ -1,106 +0,0 @@
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- *
- * @prop {"top" | "right" | "bottom" | "left"} site -- Where the popover will be
- * shown, relative to the popover button
- * @prop {"start" | "center" | "end"} alignment -- How the popover will be
- * aligned, relative to the popover button
- */
-export default function PopoverContentAnchored($props: any) {
-	$props.side ??= "bottom";
-	$props.alignment ??= "center";
-
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverContentAnchored must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
-		// before we close on click. Otherwise the click immediately bubbles to the document
-		closeOnClick = false;
-		addDocumentEvent("mousedown", handleDocumentMouseDown);
-		addDocumentEvent("click", handleDocumentClick);
-
-		// Set the position and listen for window resize and scroll to reset the position
-		setPosition();
-		const scrollParent = getScrollParent(context.anchorElement)
-		scrollParent.addEventListener("resize", setPosition);
-		scrollParent.addEventListener("scroll", setPosition);
-		if (context.focusFirstElement) {
-			context.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		const scrollParent = getScrollParent(context.anchorElement)
-		scrollParent.removeEventListener("resize", setPosition);
-		scrollParent.removeEventListener("scroll", setPosition);
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
-		}
-	}
-
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
-
-	function handleDocumentClick(e: MouseEvent) {
-		if (
-			closeOnClick &&
-			div &&
-			!div.contains(e.target as HTMLElement) &&
-			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
-		) {
-			e.preventDefault();
-			context.handleClickOutside!(e);
-		}
-	}
-
-	function setPosition() {
-		if (!context.anchorElement) {
-			throw new Error("PopoverContentAnchored must have an anchor element");
-		}
-
-		setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}