drab 2.8.1 → 2.8.3

package/dist/components/DataTable.svelte

@@ -12,7 +12,6 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 - `classFooter` - footer class
 - `classNoscript` - `noscript` class
 - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
-- `classPageNumber` - class of `div` wrapping page numbers
 - `classTable` - `table` class
 - `classTbodyTr` - `tbody tr` class
 - `classTbody` - `tbody` class
@@ -22,36 +21,33 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 - `classTh` - `th` class
 - `classTheadTr` - `thead tr` class
 - `classThead` - `thead` class
+- `classTr` - `tr` class
 - `class` 
-- `columns` - table columns, in order
 - `currentPage` - current page, defaults to `1`
 - `data` - a list of objects to render in the table
 - `idTable` - `table` id
 - `id` 
+- `keys` - table columns to include in the table, in order
 - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
-- `sortBy` - column to sort by, defaults to first column
-- `transition` - fades the rows in, set to `false` to disable
+- `sortBy` - key (column) to sort by, defaults to first key
 
 @slots
 
-| name         | purpose                  | default value                    | slot props                     |
-| ------------ | ------------------------ | -------------------------------- | ------------------------------ |
-| `next`       | next button contents     | `Next`                           | `currentPage`                  |
-| `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
-| `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
-| `td`         | td contents              | `Previous`                       | `column`, `row`                |
-| `th`         | th contents              | `Previous`                       | `column`                       |
+| name         | purpose                  | default value                   | slot props                      |
+| ------------ | ------------------------ | ------------------------------- | ------------------------------- |
+| `next`       | next button contents     | `Next`                          |                                 |
+| `pageNumber` | page numbers             | `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages`  |
+| `previous`   | previous button contents | `Previous`                      |                                 |
+| `td`         | td contents              | `item[key]`                     | `item`, `key`, `sortBy` `value` |
+| `th`         | th contents              | `key`                           | `key`, `sortBy`                 |
 
 @example
 
 ```svelte
 <script lang="ts">
-	import { DataTable } from "drab";
-</script>
+	import { DataTable, type DataTableItem } from "drab";
 
-<DataTable
-	class="mb-12"
-	data={[
+	const data: DataTableItem[] = [
 		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
 		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
 		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
@@ -61,47 +57,30 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
 		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
 		{ make: "BMW", model: "X3", year: 2023, awd: true },
-	]}
-/>
+	];
+</script>
+
+<DataTable {data} class="mb-12" />
 
 <DataTable
-	data={[
-		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
-		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
-		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
-		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
-		{ make: "Ford", model: "Model A", year: 1931, awd: false },
-		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
-		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
-		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
-		{ make: "BMW", model: "X3", year: 2023, awd: true },
-	]}
+	{data}
 	sortBy="year"
 	maxRows={4}
 	class="tabular-nums"
-	classTh="cursor-pointer"
+	classTh="cursor-pointer capitalize"
 	classThSorted="underline"
 	classTbodyTr="transition hover:bg-neutral-50"
 	classFooter="flex justify-between items-center"
 	classButton="btn"
 >
-	<svelte:fragment slot="th" let:column>
-		{#if column === "awd"}
-			<span class="uppercase">{column}</span>
-		{:else}
-			{column}
-		{/if}
+	<svelte:fragment slot="th" let:key>
+		<span class:uppercase={key === "awd"}>{key}</span>
 	</svelte:fragment>
-	<svelte:fragment slot="td" let:column let:row>
-		{@const item = row[column]}
-		{#if typeof item === "boolean"}
-			{#if item}
-				Yes
-			{:else}
-				No
-			{/if}
+	<svelte:fragment slot="td" let:value>
+		{#if typeof value === "boolean"}
+			{value ? "Yes" : "No"}
 		{:else}
-			{item}
+			{value}
 		{/if}
 	</svelte:fragment>
 </DataTable>
@@ -111,24 +90,22 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { fade } from "svelte/transition";
-import { duration } from "../util/transition";
-import { prefersReducedMotion } from "../util/accessibility";
 import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let data;
-export let columns = [];
-if (!columns.length && data[0]) {
-  columns = Object.keys(data[0]);
+export let keys = [];
+if (!keys.length && data[0]) {
+  keys = Object.keys(data[0]);
 }
-export let sortBy = columns[0];
+export let sortBy = keys[0];
 export let ascending = true;
 export let classTable = "";
 export let idTable = "";
 export let classThead = "";
 export let classTbody = "";
+export let classTr = "";
 export let classTheadTr = "";
 export let classTbodyTr = "";
 export let classTh = "";
@@ -137,31 +114,29 @@ export let classThSorted = "";
 export let classTdSorted = "";
 export let classButton = "";
 export let classFooter = "";
-export let classPageNumber = "";
 export let classPageControls = "";
 export let maxRows = 0;
 export let currentPage = 1;
-export let transition = { duration };
 export let classNoscript = "";
 let clientJs = false;
 $:
   numberOfPages = Math.floor(data.length / maxRows) + 1;
-const sort = (column, toggleAscending = true) => {
-  if (column === sortBy && toggleAscending) {
+const sort = (key, toggleAscending = true) => {
+  if (key === sortBy && toggleAscending) {
     ascending = !ascending;
   } else {
     ascending = true;
   }
   data.sort((a, b) => {
-    const aVal = a[column];
-    const bVal = b[column];
-    if (typeof aVal === "number") {
+    const aVal = a[key];
+    const bVal = b[key];
+    if (typeof aVal === "number" && typeof bVal === "number") {
       if (ascending) {
         return aVal - bVal;
       } else {
         return bVal - aVal;
       }
-    } else if (typeof aVal === "string") {
+    } else if (typeof aVal === "string" && typeof bVal === "string") {
       const collator = new Intl.Collator();
       if (ascending) {
         return collator.compare(aVal, bVal);
@@ -178,7 +153,7 @@ const sort = (column, toggleAscending = true) => {
       return 0;
   });
   data = data;
-  sortBy = column;
+  sortBy = key;
 };
 const showRow = (i, currentPage2) => {
   if (!maxRows)
@@ -188,39 +163,32 @@ const showRow = (i, currentPage2) => {
   return overMin && underMax;
 };
 sort(sortBy, false);
-onMount(() => {
-  if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-  }
-  clientJs = true;
-});
+onMount(() => clientJs = true);
 </script>
 
 <div class={className} {id}>
 	<table class={classTable} id={idTable}>
 		<thead class={classThead}>
-			<tr class={classTheadTr}>
-				{#each columns as column}
+			<tr class="{classTr} {classTheadTr}">
+				{#each keys as key}
 					<th
-						class="{classTh} {sortBy === column ? classThSorted : ''}"
-						on:click={() => sort(column)}
+						class="{classTh} {sortBy === key ? classThSorted : ''}"
+						on:click={() => sort(key)}
 					>
-						<slot name="th" {column}>{column}</slot>
+						<slot name="th" {key} {sortBy}>{key}</slot>
 					</th>
 				{/each}
 			</tr>
 		</thead>
 		<tbody class={classTbody}>
-			{#each data as row, i}
+			{#each data as item, i}
 				{#if showRow(i, currentPage)}
-					<tr
-						in:fade={transition ? transition : { duration: 0 }}
-						class={classTbodyTr}
-					>
-						{#each columns as column}
-							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-								<slot name="td" {row} {column}>{row[column]}</slot>
+					<tr class="{classTr} {classTbodyTr}">
+						{#each keys as key}
+							<td class="{classTd} {sortBy === key ? classTdSorted : ''}">
+								<slot name="td" {item} {key} {sortBy} value={item[key]}>
+									{item[key]}
+								</slot>
 							</td>
 						{/each}
 					</tr>
@@ -231,11 +199,9 @@ onMount(() => {
 
 	{#if maxRows}
 		<div class={classFooter}>
-			<div class={classPageNumber}>
-				<slot name="pageNumber" {currentPage} {numberOfPages}>
-					{currentPage} / {numberOfPages}
-				</slot>
-			</div>
+			<slot name="pageNumber" {currentPage} {numberOfPages}>
+				<div>{currentPage} / {numberOfPages}</div>
+			</slot>
 			<div class={classPageControls}>
 				<button
 					type="button"
@@ -243,7 +209,7 @@ onMount(() => {
 					disabled={!clientJs || currentPage < 2}
 					on:click={() => currentPage--}
 				>
-					<slot name="previous" {currentPage}>Previous</slot>
+					<slot name="previous">Previous</slot>
 				</button>
 				<button
 					type="button"
@@ -251,7 +217,7 @@ onMount(() => {
 					disabled={!clientJs || currentPage >= numberOfPages}
 					on:click={() => currentPage++}
 				>
-					<slot name="next" {currentPage}>Next</slot>
+					<slot name="next">Next</slot>
 				</button>
 			</div>
 		</div>

package/dist/components/DataTable.svelte.d.ts

@@ -1,20 +1,18 @@
 import { SvelteComponent } from "svelte";
-export type DataTableRow<T> = {
-    [K in keyof T]: T[K];
-};
-import { type FadeParams } from "svelte/transition";
+export type DataTableItem = Record<string | number, string | number | boolean>;
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** a list of objects to render in the table */ data: DataTableRow<any>[];
-        /** table columns, in order */ columns?: string[] | undefined;
-        /** column to sort by, defaults to first column */ sortBy?: string | undefined;
+        /** a list of objects to render in the table */ data: DataTableItem[];
+        /** table columns to include in the table, in order */ keys?: string[] | undefined;
+        /** key (column) to sort by, defaults to first key */ sortBy?: string | undefined;
         /** current sort order */ ascending?: boolean | undefined;
         /** `table` class */ classTable?: string | undefined;
         /** `table` id */ idTable?: string | undefined;
         /** `thead` class */ classThead?: string | undefined;
         /** `tbody` class */ classTbody?: string | undefined;
+        /** `tr` class */ classTr?: string | undefined;
         /** `thead tr` class */ classTheadTr?: string | undefined;
         /** `tbody tr` class */ classTbodyTr?: string | undefined;
         /** `th` class */ classTh?: string | undefined;
@@ -23,11 +21,9 @@ declare const __propDef: {
         /** currently sorted `td` */ classTdSorted?: string | undefined;
         /** `button` class */ classButton?: string | undefined;
         /** footer class */ classFooter?: string | undefined;
-        /** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
         /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
         /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
-        /** fades the rows in, set to `false` to disable */ transition?: false | FadeParams | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -35,22 +31,21 @@ declare const __propDef: {
     };
     slots: {
         th: {
-            column: string;
+            key: string;
+            sortBy: string;
         };
         td: {
-            row: DataTableRow<any>;
-            column: string;
+            item: DataTableItem;
+            key: string;
+            sortBy: string;
+            value: string | number | boolean;
         };
         pageNumber: {
             currentPage: number;
             numberOfPages: number;
         };
-        previous: {
-            currentPage: number;
-        };
-        next: {
-            currentPage: number;
-        };
+        previous: {};
+        next: {};
     };
 };
 export type DataTableProps = typeof __propDef.props;
@@ -68,7 +63,6 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `classFooter` - footer class
  * - `classNoscript` - `noscript` class
  * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
- * - `classPageNumber` - class of `div` wrapping page numbers
  * - `classTable` - `table` class
  * - `classTbodyTr` - `tbody tr` class
  * - `classTbody` - `tbody` class
@@ -78,36 +72,33 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `classTh` - `th` class
  * - `classTheadTr` - `thead tr` class
  * - `classThead` - `thead` class
+ * - `classTr` - `tr` class
  * - `class`
- * - `columns` - table columns, in order
  * - `currentPage` - current page, defaults to `1`
  * - `data` - a list of objects to render in the table
  * - `idTable` - `table` id
  * - `id`
+ * - `keys` - table columns to include in the table, in order
  * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
- * - `sortBy` - column to sort by, defaults to first column
- * - `transition` - fades the rows in, set to `false` to disable
+ * - `sortBy` - key (column) to sort by, defaults to first key
  *
  * @slots
  *
- * | name         | purpose                  | default value                    | slot props                     |
- * | ------------ | ------------------------ | -------------------------------- | ------------------------------ |
- * | `next`       | next button contents     | `Next`                           | `currentPage`                  |
- * | `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
- * | `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
- * | `td`         | td contents              | `Previous`                       | `column`, `row`                |
- * | `th`         | th contents              | `Previous`                       | `column`                       |
+ * | name         | purpose                  | default value                   | slot props                      |
+ * | ------------ | ------------------------ | ------------------------------- | ------------------------------- |
+ * | `next`       | next button contents     | `Next`                          |                                 |
+ * | `pageNumber` | page numbers             | `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages`  |
+ * | `previous`   | previous button contents | `Previous`                      |                                 |
+ * | `td`         | td contents              | `item[key]`                     | `item`, `key`, `sortBy` `value` |
+ * | `th`         | th contents              | `key`                           | `key`, `sortBy`                 |
  *
  * @example
  *
  * ```svelte
  * <script lang="ts">
- * import { DataTable } from "drab";
- * </script>
+ * import { DataTable, type DataTableItem } from "drab";
  *
- * <DataTable
- * class="mb-12"
- * data={[
+ * const data: DataTableItem[] = [
  * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
  * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
  * 	{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
@@ -117,47 +108,30 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ make: "Ford", model: "Bronco", year: 1970, awd: true },
  * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
  * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
- * ]}
- * />
+ * ];
+ * </script>
+ *
+ * <DataTable {data} class="mb-12" />
  *
  * <DataTable
- * data={[
- * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
- * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
- * 	{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
- * 	{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
- * 	{ make: "Ford", model: "Model A", year: 1931, awd: false },
- * 	{ make: "Subaru", model: "Outback", year: 2021, awd: true },
- * 	{ make: "Ford", model: "Bronco", year: 1970, awd: true },
- * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
- * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
- * ]}
+ * {data}
  * sortBy="year"
  * maxRows={4}
  * class="tabular-nums"
- * classTh="cursor-pointer"
+ * classTh="cursor-pointer capitalize"
  * classThSorted="underline"
  * classTbodyTr="transition hover:bg-neutral-50"
  * classFooter="flex justify-between items-center"
  * classButton="btn"
  * >
- * <svelte:fragment slot="th" let:column>
- * 	{#if column === "awd"}
- * 		<span class="uppercase">{column}</span>
- * 	{:else}
- * 		{column}
- * 	{/if}
+ * <svelte:fragment slot="th" let:key>
+ * 	<span class:uppercase={key === "awd"}>{key}</span>
  * </svelte:fragment>
- * <svelte:fragment slot="td" let:column let:row>
- * 	{@const item = row[column]}
- * 	{#if typeof item === "boolean"}
- * 		{#if item}
- * 			Yes
- * 		{:else}
- * 			No
- * 		{/if}
+ * <svelte:fragment slot="td" let:value>
+ * 	{#if typeof value === "boolean"}
+ * 		{value ? "Yes" : "No"}
  * 	{:else}
- * 		{item}
+ * 		{value}
  * 	{/if}
  * </svelte:fragment>
  * </DataTable>

package/dist/components/FullscreenButton.svelte

@@ -30,9 +30,9 @@ Make the document or a specific element fullscreen.
 	let target: HTMLDivElement;
 </script>
 
-<FullscreenButton class="btn mb-8" />
+<FullscreenButton class="btn" />
 
-<div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
+<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
 	<div class="mb-2">Target element</div>
 	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
 		Enable Element Fullscreen

package/dist/components/FullscreenButton.svelte.d.ts

@@ -49,9 +49,9 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * let target: HTMLDivElement;
  * </script>
  *
- * <FullscreenButton class="btn mb-8" />
+ * <FullscreenButton class="btn" />
  *
- * <div bind:this={target} class="rounded bg-neutral-800 p-4 text-neutral-50">
+ * <div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
  * <div class="mb-2">Target element</div>
  * <FullscreenButton {target} class="btn btn-s bg-neutral-50">
  * 	Enable Element Fullscreen

package/dist/components/Popover.svelte

@@ -10,9 +10,9 @@ Displays a popover relatively positioned to the target. Does not require the tar
 - `class` 
 - `display` - shows / hides the popover
 - `id` 
-- `position` - where the popover is displayed in relation to the target
+- `position` - where the popover is displayed in relation to the `target`
 - `target` - target element to position the popover in relation to
-- `transition` - fades in and out, set to false to disable
+- `transition` - scales the popover, set to `false` to disable
 
 @slots
 
@@ -29,39 +29,37 @@ Displays a popover relatively positioned to the target. Does not require the tar
 	let target: HTMLButtonElement;
 
 	let display = false;
+
+	const open = () => (display = true);
+	const close = () => (display = false);
 </script>
 
-<button
-	class="btn"
-	type="button"
-	bind:this={target}
-	on:click={() => (display = !display)}
->
-	{display ? "Close" : "Open"}
+<button class="btn" type="button" bind:this={target} on:click={open}>
+	Open
 </button>
 
 <Popover {target} bind:display class="p-2">
 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 		<div class="font-bold">Bottom</div>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
 	</div>
 </Popover>
 ```
 -->
 
 <script>import { prefersReducedMotion } from "../util/accessibility";
-import { duration } from "../util/transition";
+import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
-import { fade } from "svelte/transition";
+import { scale } from "svelte/transition";
 let className = "";
 export { className as class };
 export let id = "";
 export let display = true;
 export let position = "bottom";
 export let target;
-export let transition = { duration };
+export let transition = { duration, start };
 let popover;
 let coordinates = { x: 0, y: 0 };
 const setPosition = async () => {
@@ -105,10 +103,8 @@ $:
   if (target && popover)
     setPosition();
 onMount(() => {
-  if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-  }
+  if (prefersReducedMotion())
+    transition = false;
 });
 </script>
 
@@ -122,7 +118,7 @@ onMount(() => {
 		{id}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
-		transition:fade={transition ? transition : { duration: 0 }}
+		transition:scale={transition ? transition : { duration: 0 }}
 	>
 		<slot>Popover</slot>
 	</div>

package/dist/components/Popover.svelte.d.ts

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
-import { type FadeParams } from "svelte/transition";
+import { type ScaleParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
         /** shows / hides the popover */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
+        /** where the popover is displayed in relation to the `target` */ position?: "top" | "bottom" | "left" | "right" | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
-        /** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
+        /** scales the popover, set to `false` to disable */ transition?: false | ScaleParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -29,9 +29,9 @@ export type PopoverSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - shows / hides the popover
  * - `id`
- * - `position` - where the popover is displayed in relation to the target
+ * - `position` - where the popover is displayed in relation to the `target`
  * - `target` - target element to position the popover in relation to
- * - `transition` - fades in and out, set to false to disable
+ * - `transition` - scales the popover, set to `false` to disable
  *
  * @slots
  *
@@ -48,23 +48,21 @@ export type PopoverSlots = typeof __propDef.slots;
  * let target: HTMLButtonElement;
  *
  * let display = false;
+ *
+ * const open = () => (display = true);
+ * const close = () => (display = false);
  * </script>
  *
- * <button
- * class="btn"
- * type="button"
- * bind:this={target}
- * on:click={() => (display = !display)}
- * >
- * {display ? "Close" : "Open"}
+ * <button class="btn" type="button" bind:this={target} on:click={open}>
+ * Open
  * </button>
  *
  * <Popover {target} bind:display class="p-2">
  * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 	<div class="font-bold">Bottom</div>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
+ * 	<button class="btn" on:click={close}>Close</button>
+ * 	<button class="btn" on:click={close}>Close</button>
+ * 	<button class="btn" on:click={close}>Close</button>
  * </div>
  * </Popover>
  * ```