Popover

<xtyle-popover label="Filters" arrow placement="bottom" align="start">
	<button slot="trigger" type="button">Filters</button>
	<form>
		<label><input type="checkbox" checked /> Open</label>
		<label><input type="checkbox" /> Merged</label>
		<button type="submit">Apply</button>
	</form>
</xtyle-popover>

<script>
	const popover = document.querySelector("xtyle-popover");
	popover.addEventListener("open", () => console.log("opened"));
	popover.addEventListener("close", (e) => console.log("closed:", e.detail.reason));
</script>

<script lang="ts">
	import { Popover, Button, Checkbox } from "@xtyle/svelte";
</script>

<Popover label="Filters" arrow placement="bottom" align="start" onclose={(e) => console.log(e.detail.reason)}>
	{#snippet trigger()}
		<Button>Filters</Button>
	{/snippet}
	<Checkbox label="Open" checked />
	<Checkbox label="Merged" />
</Popover>

---
import Popover from "@xtyle/astro/Popover.astro";
import Button from "@xtyle/astro/Button.astro";
---

<Popover label="Filters" arrow placement="bottom" align="start">
	<Button slot="trigger">Filters</Button>
	<p>Anything at all lives in the panel — it is your content, not the component's.</p>
</Popover>

<!-- `modal` opens the panel as a modal <dialog>: the platform makes the page behind it
     inert, so `aria-modal` is a fact. Tab, the pointer, and a screen reader in browse mode
     all stay inside — and a click outside is swallowed, not passed through to what it hit. -->
<xtyle-popover label="Confirm delete" modal arrow>
	<button slot="trigger" type="button">Delete…</button>
	<p>This cannot be undone. The page behind this panel is out of play until you answer.</p>
	<button id="confirm" type="button">Delete</button>
	<button id="cancel" type="button">Cancel</button>
</xtyle-popover>

<script>
	const popover = document.querySelector("xtyle-popover");
	for (const id of ["#confirm", "#cancel"]) {
		document.querySelector(id).addEventListener("click", (event) => {
			// a bubbling `select` closes the panel — the same discipline Menu and Dialog use
			event.currentTarget.dispatchEvent(new CustomEvent("select", { bubbles: true, detail: { id } }));
		});
	}
	popover.addEventListener("close", (e) => console.log("closed:", e.detail.reason));
</script>

<script lang="ts">
	import { Popover, Button, Text } from "@xtyle/svelte";

	let popover: { hide(): void };
</script>

<Popover bind:this={popover} label="Confirm delete" modal arrow>
	{#snippet trigger()}
		<Button tone="danger">Delete…</Button>
	{/snippet}
	<Text size="sm">This cannot be undone. The page behind this panel is out of play until you answer.</Text>
	<Button tone="danger" size="sm" onclick={() => popover.hide()}>Delete</Button>
	<Button tone="neutral" size="sm" onclick={() => popover.hide()}>Cancel</Button>
</Popover>

---
import Popover from "@xtyle/astro/Popover.astro";
import Button from "@xtyle/astro/Button.astro";
---

<Popover label="Confirm delete" modal arrow>
	<Button slot="trigger" tone="danger">Delete…</Button>
	<p>This cannot be undone. The page behind this panel is out of play until you answer.</p>
</Popover>

<div id="canvas">Click anywhere in here.</div>

<!-- no trigger slot: the host takes no layout, and the popover opens at a point -->
<xtyle-popover id="peek" label="Point details" arrow></xtyle-popover>

<script>
	const peek = document.querySelector("#peek");
	peek.innerHTML = "<p>Opened right where you clicked.</p>";

	document.querySelector("#canvas").addEventListener("click", (event) => {
		peek.openAt(event.clientX, event.clientY);
	});
</script>

<script lang="ts">
	import { Popover } from "@xtyle/svelte";

	let peek: { openAt(x: number, y: number): void };
</script>

<div onclick={(e) => peek.openAt(e.clientX, e.clientY)}>Click anywhere in here.</div>

<Popover bind:this={peek} label="Point details" arrow>
	<p>Opened right where you clicked.</p>
</Popover>

---
import Popover from "@xtyle/astro/Popover.astro";
---

<div id="canvas">Click anywhere in here.</div>
<Popover id="peek" label="Point details" arrow>
	<p>Opened right where you clicked.</p>
</Popover>

<script>
	const peek = document.querySelector("#peek");
	document.querySelector("#canvas").addEventListener("click", (event) => {
		peek.openAt(event.clientX, event.clientY);
	});
</script>

<!-- the shape a Combobox / CommandPalette builds on: an anchor the sibling owns,
     a flush panel, no focus theft, and the panel role its content actually is -->
<input id="filter" role="combobox" aria-autocomplete="list" placeholder="Filter…" />

<xtyle-popover id="results" for="filter" panel-role="listbox" flush align="start" gap="4"></xtyle-popover>

<script>
	const input = document.querySelector("#filter");
	const results = document.querySelector("#results");
	results.innerHTML = "<ul role='none'><li role='option'>alpha</li><li role='option'>beta</li></ul>";

	input.addEventListener("input", () => {
		// anchor to the element the sibling owns; the caret never leaves the input
		results.openFrom(input, { focus: "none" });
		results.reposition(); // the list resized as it filtered
	});

	// a `select` bubbling out of the panel closes it — the same discipline Menu and Dialog use
	results.addEventListener("close", (e) => console.log("closed:", e.detail.reason));
</script>

<script lang="ts">
	import { Popover, Field } from "@xtyle/svelte";

	let anchor: HTMLElement;
	let results: { openFrom(el: HTMLElement, opts?: { focus?: "none" }): void; reposition(): void };

	function onInput() {
		results.openFrom(anchor, { focus: "none" });
		results.reposition();
	}
</script>

<div bind:this={anchor}><Field label="Filter" oninput={onInput} /></div>

<Popover bind:this={results} panel-role="listbox" flush align="start" gap={4}>
	<ul role="none"><li role="option">alpha</li><li role="option">beta</li></ul>
</Popover>

---
import Popover from "@xtyle/astro/Popover.astro";
import Field from "@xtyle/astro/Field.astro";
---

<Field id="filter" label="Filter" />
<Popover id="results" for="filter" panelRole="listbox" flush align="start" gap={4}>
	<ul role="none"><li role="option">alpha</li><li role="option">beta</li></ul>
</Popover>

<script>
	const input = document.querySelector("#filter");
	const results = document.querySelector("#results");
	input.addEventListener("input", () => results.openFrom(input, { focus: "none" }));
</script>