@torpor/ui 0.3.4 → 0.3.6

package/test/Accordion/for-items.test.ts

@@ -1,52 +0,0 @@
-import { getByText, queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import userEvent from "@testing-library/user-event";
-import { $watch, mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import AccordionList from "./components/AccordionList.torp";
-
-describe("Accordion", () => {
-	it("Items in a for loop", async () => {
-		let $state = $watch({
-			value: "1",
-			items: [
-				{ id: 0, header: "Item 1", text: "Content 1" },
-				{ id: 1, header: "Item 2", text: "Content 2" },
-				{ id: 2, header: "Item 3", text: "Content 3" },
-			],
-		});
-
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionList, $state);
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Item 2")).toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-
-		$state.items.splice(1, 1);
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Item 2")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-
-		// Clicking header 1 should reveal body 1
-		await userEvent.click(getByText(container, "Item 1"));
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-
-		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
-
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-		expect(queryByText(container, "Item 4")).toBeInTheDocument();
-		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
-
-		// Clicking header 4 should reveal body 4
-		await userEvent.click(getByText(container, "Item 4"));
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 4")).toBeInTheDocument();
-	});
-});

package/test/Accordion/keyboard.test.ts

@@ -1,64 +0,0 @@
-import { fireEvent, getByText, queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import AccordionKeyboard from "./components/AccordionKeyboard.torp";
-
-describe("Accordion", () => {
-	it("Keyboard", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionKeyboard, { value: ["1", "2"] });
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
-
-		// Enter or Space:
-		//   * When focus is on the accordion header for a collapsed panel, expands the associated panel.
-		//     If the implementation allows only one panel to be expanded, and if another panel is expanded,
-		//     collapses that panel
-		//   * When focus is on the accordion header for an expanded panel, collapses the panel if the
-		//     implementation supports collapsing. Some implementations require one panel to be expanded
-		//     at all times and allow only one panel to be expanded; so, they do not support a collapse
-		//     function
-		// NOTE: I don't think we can test this
-		// NOTE: Accordion headers are buttons so this functionality should be baked in by default
-		//screen.queryByText('Header 1').focus();
-		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
-		//expect(screen.queryByText('Content 1')).toBeInTheDocument();
-		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
-		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-
-		// Tab: Moves focus to the next focusable element; all focusable elements in the accordion are
-		// included in the page Tab sequence
-		// NOTE: I don't think we can test this
-		//fireEvent(screen.getByText('Header 1'), { key: 'Tab' });
-		//expect(document.activeElement).toBe(screen.queryByText('Header 2'));
-
-		// Shift + Tab: Moves focus to the previous focusable element; all focusable elements in the
-		// accordion are included in the page Tab sequence
-		// NOTE: I don't think we can test this
-		//fireEvent(screen.getByText('Header 2'), { key: 'Tab', shiftKey: true });
-		//expect(document.activeElement).toBe(screen.queryByText('Header 1'));
-
-		// Down Arrow: If focus is on an accordion header, moves focus to the next accordion header.
-		// If focus is on the last accordion header, either does nothing or moves focus to the first
-		// accordion header
-		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "ArrowDown" }));
-		expect(document.activeElement).toBe(queryByText(container, "Header 2"));
-
-		// Up Arrow: If focus is on an accordion header, moves focus to the previous accordion header.
-		// If focus is on the first accordion header, either does nothing or moves focus to the last
-		// accordion header
-		fireEvent(getByText(container, "Header 2"), new KeyboardEvent("keydown", { key: "ArrowUp" }));
-		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
-
-		// Home: When focus is on an accordion header, moves focus to the first accordion header
-		fireEvent(getByText(container, "Header 3"), new KeyboardEvent("keydown", { key: "Home" }));
-		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
-
-		// End: When focus is on an accordion header, moves focus to the last accordion header
-		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "End" }));
-		expect(document.activeElement).toBe(queryByText(container, "Header 3"));
-	});
-});

package/test/Accordion/multiple-item-toggle.test.ts

@@ -1,32 +0,0 @@
-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 AccordionMultiple from "./components/AccordionMultiple.torp";
-
-describe("Accordion", () => {
-	it("Multiple item toggle", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionMultiple);
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-
-		// Clicking header 1 should reveal body 1
-		await userEvent.click(getByText(container, "Header 1"));
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-
-		// Clicking header 2 should reveal body 1 and body 2
-		await userEvent.click(getByText(container, "Header 2"));
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).toBeInTheDocument();
-
-		// Clicking header 2 again should hide body 2
-		await userEvent.click(getByText(container, "Header 2"));
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-	});
-});

package/test/Accordion/multiple-item-value.test.ts

@@ -1,17 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import AccordionMultiple from "./components/AccordionMultiple.torp";
-
-describe("Accordion", () => {
-	it("Multiple item default value", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionMultiple, { value: "1" });
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-	});
-});

package/test/Accordion/single-item-toggle.test.ts

@@ -1,31 +0,0 @@
-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 AccordionSingle from "./components/AccordionSingle.torp";
-
-describe("Accordion", () => {
-	it("Single item toggle", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionSingle);
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-
-		// Clicking header 1 should reveal body 1
-		await userEvent.click(getByText(container, "Header 1"));
-		expect(queryByText(container, "Content 1")).toBeInTheDocument();
-
-		// Clicking header 2 should hide body 1 and reveal body 2
-		await userEvent.click(getByText(container, "Header 2"));
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).toBeInTheDocument();
-
-		// Clicking header 2 again should hide body 2
-		await userEvent.click(getByText(container, "Header 2"));
-		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
-	});
-});

package/test/Accordion/single-item-value.test.ts

@@ -1,17 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import AccordionSingle from "./components/AccordionSingle.torp";
-
-describe("Accordion", () => {
-	it("Single item default value", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionSingle, { value: "1" });
-
-		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Content 2")).toBeInTheDocument();
-		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
-	});
-});

package/test/Breadcrumb/accessibility.test.ts

@@ -1,29 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import BreadcrumbTest from "./components/BreadcrumbTest.torp";
-
-describe("Breadcrumb", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, BreadcrumbTest);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
-
-		// Breadcrumb trail is contained within a navigation landmark region
-		expect(
-			queryByText(container, "Main page")?.parentElement?.parentElement?.tagName.toLowerCase(),
-		).toMatch("nav");
-
-		// The landmark region is labelled via aria-label or aria-labelledby
-		expect(queryByText(container, "Main page")?.parentElement?.parentElement).toHaveAttribute(
-			"aria-label",
-		);
-
-		// The link to the current page has aria-current set to page. If the element representing the
-		// current page is not a link, aria-current is optional
-		expect(queryByText(container, "Current page")).toHaveAttribute("aria-current", "page");
-	});
-});

package/test/Breadcrumb/basic.test.ts

@@ -1,17 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import BreadcrumbTest from "./components/BreadcrumbTest.torp";
-
-describe("Breadcrumb", () => {
-	it("Basic", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, BreadcrumbTest);
-
-		expect(queryByText(container, "Main page")).toBeInTheDocument();
-		expect(queryByText(container, "Sub page")).toBeInTheDocument();
-		expect(queryByText(container, "Current page")).toBeInTheDocument();
-	});
-});

package/test/Breadcrumb/components/BreadcrumbTest.torp

@@ -1,15 +0,0 @@
-import { Breadcrumb, BreadcrumbItem } from "../../../src/Breadcrumb/index";
-
-export default function BreadcrumbAccessibility() {
-	@render {
-		<Breadcrumb ariaLabel="Breadcrumb">
-			<BreadcrumbItem>
-				<a href={location + "#mainpage"}>Main page</a>
-			</BreadcrumbItem>
-			<BreadcrumbItem>
-				<a href={location + "#subpage"}>Sub page</a>
-			</BreadcrumbItem>
-			<BreadcrumbItem current>Current page</BreadcrumbItem>
-		</Breadcrumb>
-	}
-}

package/test/Calendar/components/CalendarTest.torp

@@ -1,9 +0,0 @@
-import {
-	Calendar,
-} from "../../../src/Calendar/index";
-
-export default function CalendarTest() {
-	@render {
-		<Calendar {$props.selectable} {$props.value} />
-	}
-}

package/test/Calendar/default.test.ts

@@ -1,18 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import CalendarTest from "./components/CalendarTest.torp";
-
-describe("Calendar", () => {
-	it("Default value", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, CalendarTest, { selectable: true, value: new Date(2025, 8, 15) });
-
-		expect(queryByText(container, "September 2025")).toBeInTheDocument();
-
-		expect(queryByText(container, "15")).toBeInTheDocument();
-		expect(queryByText(container, "15")!.parentElement!.parentElement).toHaveClass("active");
-	});
-});

package/test/Dialog/accessibility-alert.test.ts

@@ -1,40 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { assert, describe, expect, it } from "vitest";
-import DialogAccessibility from "./components/DialogAccessibility.torp";
-
-describe("Dialog", () => {
-	it("Accessibility -- alert", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DialogAccessibility, { alert: true });
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
-		// This is for a Dialog with its alert property set to true
-
-		// The element that contains all elements of the dialog, including the
-		// alert message and any dialog buttons, has role alertdialog
-		let dialog = queryByText(container, "Which color do you prefer?");
-		assert(dialog, "Dialog not found");
-		assert(dialog.parentElement, "Dialog parent not found");
-		dialog = dialog.parentElement;
-		expect(dialog).toHaveAttribute("role", "alertdialog");
-
-		// The element with role alertdialog has either:
-		//   * A value for aria-labelledby that refers to the element containing
-		//     the title of the dialog if the dialog has a visible label
-		//   * A value for aria-label if the dialog does not have a visible
-		//     label
-		const header = queryByText(container, "Color preference");
-		assert(header, "Header not found");
-		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
-
-		// The element with role alertdialog has a value set for
-		// aria-describedby that refers to the element containing the alert
-		// message
-		const body = queryByText(container, "Which color do you prefer?");
-		assert(body, "Body not found");
-		expect(dialog).toHaveAttribute("aria-describedby", body.id);
-	});
-});

package/test/Dialog/accessibility-modal.test.ts

@@ -1,52 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { assert, describe, expect, it } from "vitest";
-import DialogModal from "./components/DialogModal.torp";
-
-describe("Dialog", () => {
-	it("Accessibility -- modal", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DialogModal, { modal: true, ariaAnnounce: false });
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
-		// This is for a Dialog in a Popover with its modal property set to true
-
-		// The element that serves as the dialog container has a role of dialog
-		let dialog = queryByText(container, "Which color do you prefer?");
-		assert(dialog, "Dialog not found");
-		assert(dialog.parentElement, "Dialog parent not found");
-		dialog = dialog.parentElement;
-		expect(dialog).toHaveAttribute("role", "dialog");
-
-		// All elements required to operate the dialog are descendants of the
-		// element that has role dialog
-
-		// The dialog container element has aria-modal set to true
-		expect(dialog).toHaveAttribute("aria-modal", "true");
-
-		// The dialog has either:
-		//   * A value set for the aria-labelledby property that refers to a
-		//     visible dialog title
-		//   * A label specified by aria-label
-		const header = queryByText(container, "Color preference");
-		assert(header, "Header not found");
-		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
-
-		// Optionally, the aria-describedby property is set on the element with
-		// the dialog role to indicate which element or elements in the dialog
-		// contain content that describes the primary purpose or message of the
-		// dialog. Specifying descriptive elements enables screen readers to
-		// announce the description along with the dialog title and initially
-		// focused element when the dialog opens, which is typically helpful
-		// only when the descriptive content is simple and can easily be
-		// understood without structural information. It is advisable to omit
-		// specifying aria-describedby if the dialog content includes semantic
-		// structures, such as lists, tables, or multiple paragraphs, that need
-		// to be perceived in order to easily understand the content, i.e., if
-		// the content would be difficult to understand when announced as a
-		// single unbroken string
-		expect(dialog).not.toHaveAttribute("aria-describedby");
-	});
-});

package/test/Dialog/components/DialogAccessibility.torp

@@ -1,25 +0,0 @@
-import {
-	Dialog,
-	DialogHeader,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function DialogAccessibility($props: any) {
-	$props.alert ??= false;
-	$props.ariaAnnounce ??= true;
-
-	let color = "";
-
-	@render {
-		<Dialog alert={$props.alert}>
-			<DialogHeader>Color preference</DialogHeader>
-			<DialogBody ariaAnnounce={$props.ariaAnnounce}>Which color do you prefer?</DialogBody>
-			<DialogFooter>
-				<DialogButton value="blue" onclick={() => (color = "blue")}>Blue</DialogButton>
-				<DialogButton value="red" onclick={() => (color = "red")}>Red</DialogButton>
-			</DialogFooter>
-		</Dialog>
-	}
-}

package/test/Dialog/components/DialogFunction.torp

@@ -1,36 +0,0 @@
-import { Modal, ModalContent, showPrompt } from "../../../src/Modal/index";
-import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
-
-export default function DialogFunction($props: any) {
-	let $state = $watch({ color: "" });
-
-	async function show() {
-		$state.color = await showPrompt(CustomDialog, null, $parent);
-	}
-
-	@render {
-		<button type="button" onclick={show}>Show the modal</button>
-
-		@if ($state.color) {
-			<p>Your favorite color is {$state.color}?!</p>
-		}
-	}
-}
-
-function CustomDialog($props: any) {
-	@render {
-		<Modal visible callback={$props.callback}>
-			<ModalContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue">Blue</DialogButton>
-						<DialogButton value="red">Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</ModalContent>
-		</Modal>
-	}
-}

package/test/Dialog/components/DialogModal.torp

@@ -1,30 +0,0 @@
-import { Modal, ModalContent } from "../../../src/Modal/index";
-import {
-	Dialog,
-	DialogHeader,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function DialogModal($props: any) {
-	$props.alert ??= false;
-	$props.ariaAnnounce ??= true;
-
-	let color = "";
-
-	@render {
-		<Modal visible>
-			<ModalContent>
-				<Dialog alert={$props.alert}>
-					<DialogHeader>Color preference</DialogHeader>
-					<DialogBody ariaAnnounce={$props.ariaAnnounce}>Which color do you prefer?</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue" onclick={() => (color = "blue")}>Blue</DialogButton>
-						<DialogButton value="red" onclick={() => (color = "red")}>Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</ModalContent>
-		</Modal>
-	}
-}

package/test/Dialog/components/DialogVariable.torp

@@ -1,33 +0,0 @@
-import { Modal, ModalContent } from "../../../src/Modal/index";
-import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
-
-export default function DialogVariable($props: any) {
-	let $state = $watch({
-		color: "",
-		showModal: false
-	});
-
-	@render {
-		<button type="button" onclick={(e) => ($state.showModal = !$state.showModal)}>
-			Show the modal
-		</button>
-
-		@if ($state.color) {
-			<p>Your favorite color is {$state.color}?!</p>
-		}
-
-		<Modal &visible={$state.showModal}>
-			<ModalContent>
-				<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>
-			</ModalContent>
-		</Modal>
-	}
-}

package/test/Dialog/function.test.ts

@@ -1,26 +0,0 @@
-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 DialogFunction from "./components/DialogFunction.torp";
-
-describe("Dialog", () => {
-	it("Showing with a function", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DialogFunction);
-
-		// By default, the modal shouldn't be shown
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-
-		// Clicking the button should show the modal
-		await userEvent.click(getByText(container, "Show the modal"));
-		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the modal 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/Dialog/variable.test.ts

@@ -1,27 +0,0 @@
-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 DialogVariable from "./components/DialogVariable.torp";
-
-describe("Dialog", () => {
-	it("Showing with a variable", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DialogVariable);
-
-		// By default, the modal 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 modal
-		await userEvent.click(getByText(container, "Show the modal"));
-		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the modal 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/Disclosure/accessibility.test.ts

@@ -1,31 +0,0 @@
-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 DisclosureTest from "./components/DisclosureTest.torp";
-
-describe("Disclosure", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DisclosureTest);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
-
-		// The element that shows and hides the content has role button
-		expect(queryByText(container, "Disclosure header")?.tagName.toLowerCase()).toMatch("button");
-
-		// When the content is hidden, the element with role button has aria-expanded set to false
-		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-expanded", "false");
-
-		// When the content area is visible, it is set to true
-		await userEvent.click(getByText(container, "Disclosure header"));
-		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-expanded", "true");
-
-		// Optionally, the element with role button has a value specified for aria-controls that refers
-		// to the element that contains all the content that is shown or hidden
-		const contentId = queryByText(container, "Disclosure content")?.id;
-		expect(queryByText(container, "Disclosure header")).toHaveAttribute("aria-controls", contentId);
-	});
-});

package/test/Disclosure/components/DisclosureTest.torp

@@ -1,17 +0,0 @@
-import {
-	Disclosure,
-	DisclosureHeader,
-	DisclosureTrigger,
-	DisclosureContent
-} from "../../../src/Disclosure/index";
-
-export default function DisclosureAccessibility($props: { expanded: boolean }) {
-	@render {
-		<Disclosure {$props?.expanded}>
-			<DisclosureHeader as="h4">
-				<DisclosureTrigger>Disclosure header</DisclosureTrigger>
-			</DisclosureHeader>
-			<DisclosureContent>Disclosure content</DisclosureContent>
-		</Disclosure>
-	}
-}