@torpor/ui 0.3.5 → 0.3.6

package/test/Disclosure/default.test.ts

@@ -1,15 +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 DisclosureTest from "./components/DisclosureTest.torp";
-
-describe("Disclosure", () => {
-	it("Default value", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DisclosureTest, { expanded: true });
-
-		expect(queryByText(container, "Disclosure content")).toBeInTheDocument();
-	});
-});

package/test/Disclosure/toggle.test.ts

@@ -1,20 +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("Toggle", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, DisclosureTest);
-
-		expect(queryByText(container, "Disclosure content")).not.toBeInTheDocument();
-
-		// Clicking the header should reveal the body
-		await userEvent.click(getByText(container, "Disclosure header"));
-		expect(queryByText(container, "Disclosure content")).toBeInTheDocument();
-	});
-});

package/test/Form/components/FieldTest.torp

@@ -1,25 +0,0 @@
-import {
-	Field,
-	Label,
-	Input,
-	Message,
-} from "../../../src/Form/index";
-import * as z from "zod";
-
-export default function FormTest($props: { value: string }) {
-	const schema = z.string().trim().min(1, { message: 'Name is required!' });
-
-	let $state = $watch({
-		data: {
-			name: "",
-		}
-	});
-
-	@render {
-		<Field name="name" &value={$state.data.name} {schema}>
-			<Label>Name:</Label>
-			<Input id="name-id" placeholder="Name..." />
-			<Message />
-		</Field>
-	}
-}

package/test/Form/components/FormTest.torp

@@ -1,31 +0,0 @@
-import {
-	Form,
-	Field,
-	Label,
-	Input,
-	Message,
-} from "../../../src/Form/index";
-import * as z from "zod";
-
-export default function FormTest($props: { value: string }) {
-	const schema = z.object({
-		name: z.string().trim().min(1, { message: 'Name is required!' }),
-	});
-
-	let $state = $watch({
-		data: {
-			name: "",
-		}
-	});
-
-	@render {
-		<Form {$state.data} {schema}>
-			<Field name="name" &value={$state.data.name}>
-				<Label>Name:</Label>
-				<Input id="name-id" placeholder="Name..." />
-				<Message />
-			</Field>
-			<button>Submit</button>
-		</Form>
-	}
-}

package/test/Form/components/InputTest.torp

@@ -1,9 +0,0 @@
-import {
-	Input,
-} from "../../../src/Form/index";
-
-export default function FormTest($props: { value: string }) {
-	@render {
-		<Input id="name-id" placeholder="Name..." &value={$props.value} />
-	}
-}

package/test/Form/field.test.ts

@@ -1,34 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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,83 +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 MenuAccessibility from "./components/MenuAccessibility.torp";
-
-describe("Menu", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, MenuAccessibility);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
-
-		// A menu is a container of items that represent choices. The element serving as the menu has
-		// a role of either menu or menubar
-		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute("role", "menu");
-
-		// The items contained in a menu are child elements of the containing menu or menubar and have
-		// any of the following roles:
-		//   * menuitem
-		//   * menuitemcheckbox
-		//   * menuitemradio
-		expect(queryByText(container, "Menu button")).toHaveAttribute("role", "menuitem");
-		expect(queryByText(container, "Check popout button")).toHaveAttribute("role", "menuitem");
-
-		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
-		// menu element is:
-		//   * Contained inside the same menu element as its parent menuitem
-		//   * Is the sibling element immediately following its parent menuitem
-
-		// A parent menuitem has aria-haspopup set to either menu or true
-		expect(queryByText(container, "Check popout button")).toHaveAttribute("aria-haspopup", "true");
-
-		// 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");
-		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
-		// menu as described in Keyboard Navigation Inside Components:
-		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
-		//     of the focused item
-		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
-		//     has tabindex set to 0
-
-		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
-		// NOTE: We don't (currently?) have checkboxes or radios in Menus
-
-		// When a menu item is disabled, aria-disabled is set to true
-		expect(queryByText(container, "Menu button")).not.toHaveAttribute("aria-disabled");
-		expect(queryByText(container, "Disabled button")).toHaveAttribute("aria-disabled", "true");
-
-		// Items in a menu may be divided into groups by placing an element with a role of separator
-		// between groups. For example, this technique should be used when a menu contains a set of
-		// menuitemradio items
-		expect(queryByText(container, "---")).toHaveAttribute("role", "separator");
-
-		// All separators should have aria-orientation consistent with the separator's orientation
-		// NOTE: What does this mean? None of the example separators have aria-orientation set
-
-		// An element with role menu either has:
-		//   * aria-labelledby set to a value that refers to the menuitem or button that controls its
-		//     display
-		//   * A label provided by aria-label
-		// NOTE: We only support aria-label and it's required
-		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute(
-			"aria-label",
-			"A menu",
-		);
-
-		// If a menu is horizontally oriented, it has aria-orientation set to horizontal. The default
-		// value of aria-orientation for a menu is vertical
-		// NOTE: For these menus, the only orientation is vertical -- can't really think of a situation
-		// where horizontal would make sense?
-		expect(queryByText(container, "Menu button")?.parentElement).toHaveAttribute(
-			"aria-orientation",
-			"vertical",
-		);
-	});
-});

package/test/Menu/basic.test.ts

@@ -1,58 +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 MenuBasic from "./components/MenuBasic.torp";
-
-describe("Menu", () => {
-	it("Basic operation", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, MenuBasic);
-
-		// By default, the top-level buttons should be displayed
-		expect(queryByText(container, "Menu button")).toBeInTheDocument();
-		expect(queryByText(container, "Check popout button")).toBeInTheDocument();
-		expect(queryByText(container, "Radio popout button")).toBeInTheDocument();
-
-		// Submenus should not be displayed
-		expect(queryByText(container, "Checked 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Radio 1")).not.toBeInTheDocument();
-
-		// Clicking a popout button should show the appropriate menu
-		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
-		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
-		await userEvent.click(getByText(container, "Check popout button"));
-		expect(queryByText(container, "Tick 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
-		await userEvent.click(getByText(container, "Checked 1"));
-		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
-		expect(queryByText(container, "Tick 2")).not.toBeInTheDocument();
-		await userEvent.click(getByText(container, "Checked 2"));
-		expect(queryByText(container, "Tick 1")).toBeInTheDocument();
-		expect(queryByText(container, "Tick 2")).toBeInTheDocument();
-		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
-		await userEvent.click(getByText(container, "Radio popout button"));
-		expect(queryByText(container, "Circle 1")).not.toBeInTheDocument();
-		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
-		await userEvent.click(getByText(container, "Radio 1"));
-		expect(queryByText(container, "Circle 1")).toBeInTheDocument();
-		expect(queryByText(container, "Circle 2")).not.toBeInTheDocument();
-		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,59 +0,0 @@
-import { Modal, ModalContent } from "../../../src/Modal";
-import {
-	Menu,
-	MenuButton,
-	MenuRadioGroup,
-	MenuCheck,
-	MenuRadio,
-	MenuIndicator,
-	MenuPopout,
-	MenuPopoutTrigger,
-	MenuPopoutContent,
-	MenuSeparator
-} from "../../../src/Menu";
-
-export default function MenuAccessibility() {
-	@render {
-		<Modal visible>
-			<ModalContent>
-				<Menu ariaLabel="A menu">
-					<MenuButton>Menu button</MenuButton>
-					<MenuButton disabled>Disabled button</MenuButton>
-					<MenuSeparator>---</MenuSeparator>
-					<MenuPopout>
-						<MenuPopoutTrigger>Check popout button</MenuPopoutTrigger>
-						<MenuPopoutContent>
-							<Menu ariaLabel="A checked menu">
-								<MenuCheck>
-									<MenuIndicator>✔</MenuIndicator>
-									Checked 1
-								</MenuCheck>
-								<MenuCheck>
-									<MenuIndicator>✔</MenuIndicator>
-									Checked 2
-								</MenuCheck>
-							</Menu>
-						</MenuPopoutContent>
-					</MenuPopout>
-					<MenuPopout>
-						<MenuPopoutTrigger>Radio popout button</MenuPopoutTrigger>
-						<MenuPopoutContent>
-							<Menu ariaLabel="A radio menu">
-								<MenuRadioGroup ariaLabel="Options">
-									<MenuRadio value="radio1">
-										<MenuIndicator>•</MenuIndicator>
-										Radio 1
-									</MenuRadio>
-									<MenuRadio value="radio2">
-										<MenuIndicator>•</MenuIndicator>
-										Radio 2
-									</MenuRadio>
-								</MenuRadioGroup>
-							</Menu>
-						</MenuPopoutContent>
-					</MenuPopout>
-				</Menu>
-			</ModalContent>
-		</Modal>
-	}
-}

package/test/Menu/components/MenuBasic.torp

@@ -1,58 +0,0 @@
-import { Modal, ModalContent } from "../../../src/Modal";
-import {
-	Menu,
-	MenuButton,
-	MenuRadioGroup,
-	MenuCheck,
-	MenuRadio,
-	MenuIndicator,
-	MenuPopout,
-	MenuPopoutTrigger,
-	MenuPopoutContent,
-	MenuSeparator
-} from "../../../src/Menu";
-
-export default function MenuBasic() {
-	@render {
-		<Modal visible>
-			<ModalContent>
-				<Menu ariaLabel="A menu">
-					<MenuButton>Menu button</MenuButton>
-					<MenuSeparator>---</MenuSeparator>
-					<MenuPopout>
-						<MenuPopoutTrigger>Check popout button</MenuPopoutTrigger>
-						<MenuPopoutContent>
-							<Menu ariaLabel="A checked menu">
-								<MenuCheck>
-									<MenuIndicator>Tick 1</MenuIndicator>
-									Checked 1
-								</MenuCheck>
-								<MenuCheck>
-									<MenuIndicator>Tick 2</MenuIndicator>
-									Checked 2
-								</MenuCheck>
-							</Menu>
-						</MenuPopoutContent>
-					</MenuPopout>
-					<MenuPopout>
-						<MenuPopoutTrigger>Radio popout button</MenuPopoutTrigger>
-						<MenuPopoutContent>
-							<Menu ariaLabel="A radio menu">
-								<MenuRadioGroup ariaLabel="Font color">
-									<MenuRadio value="radio1">
-										<MenuIndicator>Circle 1</MenuIndicator>
-										Radio 1
-									</MenuRadio>
-									<MenuRadio value="radio2">
-										<MenuIndicator>Circle 2</MenuIndicator>
-										Radio 2
-									</MenuRadio>
-								</MenuRadioGroup>
-							</Menu>
-						</MenuPopoutContent>
-					</MenuPopout>
-				</Menu>
-			</ModalContent>
-		</Modal>
-	}
-}

package/test/MenuBar/accessibility.test.ts

@@ -1,87 +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 MenuBarAccessibility from "./components/MenuBarAccessibility.torp";
-
-describe("MenuBar", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, MenuBarAccessibility);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
-		// NOTE: MenuBar is a menubar
-
-		// A menu is a container of items that represent choices. The element serving as the menu has
-		// a role of either menu or menubar
-		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
-			"role",
-			"menubar",
-		);
-
-		// The items contained in a menu are child elements of the containing menu or menubar and have
-		// any of the following roles:
-		//   * menuitem
-		//   * menuitemcheckbox
-		//   * menuitemradio
-		expect(queryByText(container, "Top level")).toHaveAttribute("role", "menuitem");
-
-		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
-		// menu element is:
-		//   * Contained inside the same menu element as its parent menuitem
-		//   * Is the sibling element immediately following its parent menuitem
-
-		// A parent menuitem has aria-haspopup set to either menu or true
-		expect(queryByText(container, "Top level")).toHaveAttribute("aria-haspopup", "true");
-
-		// 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");
-		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
-		// menu as described in Keyboard Navigation Inside Components:
-		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
-		//     of the focused item
-		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
-		//     has tabindex set to 0
-
-		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
-		// NOTE: We don't (currently?) have checkboxes or radios in MenuBars
-
-		// When a menu item is disabled, aria-disabled is set to true
-		expect(queryByText(container, "Top level")).not.toHaveAttribute("aria-disabled");
-		expect(queryByText(container, "Disabled")).toHaveAttribute("aria-disabled", "true");
-
-		// Items in a menu may be divided into groups by placing an element with a role of separator
-		// between groups. For example, this technique should be used when a menu contains a set of
-		// menuitemradio items
-		expect(queryByText(container, "---")).toHaveAttribute("role", "separator");
-
-		// All separators should have aria-orientation consistent with the separator's orientation
-		// NOTE: What does this mean? None of the example separators have aria-orientation set
-
-		// If a menubar has a visible label, the element with role menubar has aria-labelledby set to
-		// a value that refers to the labelling element. Otherwise, the menubar element has a label
-		// provided by aria-label
-		// NOTE: We only support aria-label and it's required
-		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
-			"aria-label",
-			"Window menu",
-		);
-
-		// If a menubar is vertically oriented, it has aria-orientation set to vertical. The default
-		// value of aria-orientation for a menubar is horizontal
-		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
-			"aria-orientation",
-			"horizontal",
-		);
-		expect(queryByText(container, "Sub item 1")?.parentElement).toHaveAttribute(
-			"aria-orientation",
-			"vertical",
-		);
-	});
-});

package/test/MenuBar/basic.test.ts

@@ -1,22 +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 MenuBarBasic from "./components/MenuBarBasic.torp";
-
-describe("MenuBar", () => {
-	it("Basic operation", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, MenuBarBasic);
-
-		// The top level item should be displayed
-		expect(queryByText(container, "Top level")).toBeInTheDocument();
-		expect(queryByText(container, "Sub item 1")).not.toBeInTheDocument();
-
-		// Clicking the top level item should show the sub item
-		await userEvent.click(getByText(container, "Top level"));
-		expect(queryByText(container, "Sub item 1")).toBeInTheDocument();
-	});
-});

package/test/MenuBar/components/MenuBarAccessibility.torp

@@ -1,34 +0,0 @@
-import {
-	MenuBar,
-	MenuBarItem,
-	MenuBarItemTrigger,
-	MenuBarItemContent
-} from "../../../src/MenuBar";
-import { Menu, MenuButton, MenuSeparator } from "../../../src/Menu";
-
-export default function MenuBarAccessibility() {
-	@render {
-		<MenuBar ariaLabel="Window menu">
-			<MenuBarItem>
-				<MenuBarItemTrigger>Top level</MenuBarItemTrigger>
-				<MenuBarItemContent>
-					<Menu ariaLabel="Sub window menu">
-						<MenuButton>Sub item 1</MenuButton>
-						<MenuButton>Sub item 2</MenuButton>
-						<MenuSeparator>---</MenuSeparator>
-						<MenuButton>Sub item 3</MenuButton>
-					</Menu>
-				</MenuBarItemContent>
-			</MenuBarItem>
-			<MenuBarItem>
-				<MenuBarItemTrigger disabled>Disabled</MenuBarItemTrigger>
-				<MenuBarItemContent>
-					<Menu ariaLabel="Disabled sub window menu">
-						<MenuButton>Disabled sub 1</MenuButton>
-						<MenuButton>Disabled sub 2</MenuButton>
-					</Menu>
-				</MenuBarItemContent>
-			</MenuBarItem>
-		</MenuBar>
-	}
-}

package/test/MenuBar/components/MenuBarBasic.torp

@@ -1,25 +0,0 @@
-import {
-	MenuBar,
-	MenuBarItem,
-	MenuBarItemTrigger,
-	MenuBarItemContent
-} from "../../../src/MenuBar";
-import { Menu, MenuButton, MenuSeparator } from "../../../src/Menu";
-
-export default function MenuBarBasic() {
-	@render {
-		<MenuBar ariaLabel="Window menu">
-			<MenuBarItem>
-				<MenuBarItemTrigger>Top level</MenuBarItemTrigger>
-				<MenuBarItemContent>
-					<Menu ariaLabel="Sub window menu">
-						<MenuButton>Sub item 1</MenuButton>
-						<MenuButton>Sub item 2</MenuButton>
-						<MenuSeparator />
-						<MenuButton>Sub item 3</MenuButton>
-					</Menu>
-				</MenuBarItemContent>
-			</MenuBarItem>
-		</MenuBar>
-	}
-}