drab 2.6.1 → 2.7.0

package/dist/components/Accordion.svelte

@@ -3,7 +3,7 @@
 
 ### Accordion
 
-Displays a list of `details` elements.
+Displays a list of `details` elements with helpful defaults and transitions.
 
 @props
 
@@ -30,15 +30,18 @@ Displays a list of `details` elements.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Accordion } from "drab";
+	import { FullscreenButton } from "drab";
 	import { Chevron } from "../../site/svg/Chevron.svelte";
 </script>
 
 <Accordion
 	icon={Chevron}
+	class="mb-12"
 	classDetails="border-b"
-	classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
+	classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+	classContent="pb-4 px-4"
 	items={[
 		{ summary: "Is it accessible?", content: "Yes." },
 		{
@@ -51,12 +54,35 @@ Displays a list of `details` elements.
 		},
 		{ summary: "Does it work without Javascript?", content: "Yes." },
 	]}
+/>
+
+<Accordion
+	icon={Chevron}
+	classDetails="border-b"
+	classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+	classContent="pb-4 px-4"
+	autoClose={false}
+	items={[
+		{ summary: "Summary", content: "Content" },
+		{ summary: "Summary", content: "Content", data: { uppercase: true } },
+		{
+			summary: "Summary",
+			content: "Content",
+			data: { component: FullscreenButton },
+		},
+	]}
 >
-	<svelte:fragment slot="content" let:item let:index>
-		<div class="pb-4">
-			<span>{index + 1}.</span>
-			<span>{item.content}</span>
-		</div>
+	<svelte:fragment slot="summary" let:item let:index>
+		<span class:uppercase={item.data?.uppercase}>
+			{item.summary}
+			{index + 1}
+		</span>
+	</svelte:fragment>
+	<svelte:fragment slot="content" let:item>
+		<span>{item.content}</span>
+		{#if item.data?.component === FullscreenButton}
+			<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
+		{/if}
 	</svelte:fragment>
 </Accordion>
 ```

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

@@ -49,7 +49,7 @@ export type AccordionSlots = typeof __propDef.slots;
 /**
  * ### Accordion
  *
- * Displays a list of `details` elements.
+ * Displays a list of `details` elements with helpful defaults and transitions.
  *
  * @props
  *
@@ -76,15 +76,18 @@ export type AccordionSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Accordion } from "drab";
+ * import { FullscreenButton } from "drab";
  * import { Chevron } from "../../site/svg/Chevron.svelte";
  * </script>
  *
  * <Accordion
  * icon={Chevron}
+ * class="mb-12"
  * classDetails="border-b"
- * classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
+ * classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+ * classContent="pb-4 px-4"
  * items={[
  * 	{ summary: "Is it accessible?", content: "Yes." },
  * 	{
@@ -97,12 +100,35 @@ export type AccordionSlots = typeof __propDef.slots;
  * 	},
  * 	{ summary: "Does it work without Javascript?", content: "Yes." },
  * ]}
+ * />
+ *
+ * <Accordion
+ * icon={Chevron}
+ * classDetails="border-b"
+ * classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+ * classContent="pb-4 px-4"
+ * autoClose={false}
+ * items={[
+ * 	{ summary: "Summary", content: "Content" },
+ * 	{ summary: "Summary", content: "Content", data: { uppercase: true } },
+ * 	{
+ * 		summary: "Summary",
+ * 		content: "Content",
+ * 		data: { component: FullscreenButton },
+ * 	},
+ * ]}
  * >
- * <svelte:fragment slot="content" let:item let:index>
- * 	<div class="pb-4">
- * 		<span>{index + 1}.</span>
- * 		<span>{item.content}</span>
- * 	</div>
+ * <svelte:fragment slot="summary" let:item let:index>
+ * 	<span class:uppercase={item.data?.uppercase}>
+ * 		{item.summary}
+ * 		{index + 1}
+ * 	</span>
+ * </svelte:fragment>
+ * <svelte:fragment slot="content" let:item>
+ * 	<span>{item.content}</span>
+ * 	{#if item.data?.component === FullscreenButton}
+ * 		<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
+ * 	{/if}
  * </svelte:fragment>
  * </Accordion>
  * ```

package/dist/components/Breakpoint.svelte

@@ -5,17 +5,7 @@
 
 Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
 
-```svelte
-<script lang="ts">
-	import { dev } from "$app/environment"; // SvelteKit Example
-</script>
-
-{#if dev}
-	<Breakpoint
-		class="fixed bottom-4 right-4 rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
-	/>
-{/if}
-```
+With SvelteKit, this component can be wrapped in an `{#if dev}` block that checks for the [dev module](https://kit.svelte.dev/docs/modules#$app-environment-dev), to show only during development.
 
 @props
 

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

@@ -21,17 +21,7 @@ export type BreakpointSlots = typeof __propDef.slots;
  *
  * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
  *
- * ```svelte
- * <script lang="ts">
- * import { dev } from "$app/environment"; // SvelteKit Example
- * </script>
- *
- * {#if dev}
- * <Breakpoint
- * 	class="fixed bottom-4 right-4 rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
- * />
- * {/if}
- * ```
+ * With SvelteKit, this component can be wrapped in an `{#if dev}` block that checks for the [dev module](https://kit.svelte.dev/docs/modules#$app-environment-dev), to show only during development.
  *
  * @props
  *

package/dist/components/ContextMenu.svelte

@@ -7,7 +7,6 @@ Displays when the parent element is right clicked, or long pressed on mobile.
 
 @props
 
-- `classNoscript` - `noscript` class
 - `class` 
 - `display` - controls `display` css property
 - `id` 
@@ -50,7 +49,6 @@ let className = "";
 export { className as class };
 export let id = "";
 export let display = false;
-export let classNoscript = "";
 export let transition = { duration };
 let contextMenu;
 let base;
@@ -124,8 +122,6 @@ onMount(() => {
 	</div>
 {/if}
 
-<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
-
 <style>
 	span {
 		width: 0;

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** controls `display` css property */ display?: boolean | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
         /** fades the content, set to `false` to remove */ transition?: false | FadeParams | undefined;
     };
     events: {
@@ -25,7 +24,6 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - `noscript` class
  * - `class`
  * - `display` - controls `display` css property
  * - `id`

package/dist/components/CopyButton.svelte

@@ -3,7 +3,7 @@
 
 ### CopyButton
 
-Uses the navigator api to copy text to the clipboard.
+Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
 
 @props
 

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

@@ -21,7 +21,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
 /**
  * ### CopyButton
  *
- * Uses the navigator api to copy text to the clipboard.
+ * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
  *
  * @props
  *

package/dist/components/DataTable.svelte

@@ -28,15 +28,18 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `data` - a list of objects to render in the table
 - `idTable` - `table` id
 - `id` 
-- `paginate` - number of rows to show on each page, defaults to `0` - no pagination
-- `sortBy` - column to sort by--defaults to first column
+- `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
+- `sortBy` - column to sort by, defaults to first column
 
 @slots
 
-| name       | purpose                  | default value |
-| ---------- | ------------------------ | ------------- |
-| `previous` | previous button contents | `Previous`    |
-| `next`     | next button contents     | `Next`        |
+| 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`                       |
 
 @example
 
@@ -46,6 +49,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 </script>
 
 <DataTable
+	class="mb-12"
 	data={[
 		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
 		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
@@ -57,15 +61,49 @@ Data table to display an array of JS objects. Click a column header to sort.
 		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
 		{ make: "BMW", model: "X3", year: 2023, awd: true },
 	]}
-	sortBy="make"
-	paginate={4}
+/>
+
+<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 },
+	]}
+	sortBy="year"
+	maxRows={4}
 	class="tabular-nums"
-	classTh="cursor-pointer uppercase"
+	classTh="cursor-pointer"
 	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>
+	<svelte:fragment slot="td" let:column let:row>
+		{@const item = row[column]}
+		{#if typeof item === "boolean"}
+			{#if item}
+				Yes
+			{:else}
+				No
+			{/if}
+		{:else}
+			{item}
+		{/if}
+	</svelte:fragment>
+</DataTable>
 ```
 -->
 
@@ -97,12 +135,12 @@ export let classButton = "";
 export let classFooter = "";
 export let classPageNumber = "";
 export let classPageControls = "";
-export let paginate = 0;
+export let maxRows = 0;
 export let currentPage = 1;
 export let classNoscript = "";
 let clientJs = false;
 $:
-  numberOfPages = Math.floor(data.length / paginate) + 1;
+  numberOfPages = Math.floor(data.length / maxRows) + 1;
 const sort = (column, toggleAscending = true) => {
   if (column === sortBy && toggleAscending) {
     ascending = !ascending;
@@ -150,7 +188,7 @@ onMount(() => clientJs = true);
 						class="{classTh} {sortBy === column ? classThSorted : ''}"
 						on:click={() => sort(column)}
 					>
-						{column}
+						<slot name="th" {column}>{column}</slot>
 					</th>
 				{/each}
 			</tr>
@@ -158,12 +196,12 @@ onMount(() => clientJs = true);
 		<tbody class={classTbody}>
 			{#each data as row, i}
 				{@const showRow =
-					i < paginate * currentPage && i >= paginate * (currentPage - 1)}
-				{#if paginate ? showRow : true}
+					i < maxRows * currentPage && i >= maxRows * (currentPage - 1)}
+				{#if maxRows ? showRow : true}
 					<tr class={classTbodyTr}>
 						{#each columns as column}
 							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-								{row[column]}
+								<slot name="td" {row} {column}>{row[column]}</slot>
 							</td>
 						{/each}
 					</tr>
@@ -172,23 +210,29 @@ onMount(() => clientJs = true);
 		</tbody>
 	</table>
 
-	{#if paginate}
+	{#if maxRows}
 		<div class={classFooter}>
-			<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+			<div class={classPageNumber}>
+				<slot name="pageNumber" {currentPage} {numberOfPages}>
+					{currentPage} / {numberOfPages}
+				</slot>
+			</div>
 			<div class={classPageControls}>
 				<button
+					type="button"
 					class={classButton}
 					disabled={!clientJs || currentPage < 2}
 					on:click={() => currentPage--}
 				>
-					<slot name="previous">Previous</slot>
+					<slot name="previous" {currentPage}>Previous</slot>
 				</button>
 				<button
+					type="button"
 					class={classButton}
 					disabled={!clientJs || currentPage >= numberOfPages}
 					on:click={() => currentPage++}
 				>
-					<slot name="next">Next</slot>
+					<slot name="next" {currentPage}>Next</slot>
 				</button>
 			</div>
 		</div>

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         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;
+        /** column to sort by, defaults to first column */ sortBy?: string | undefined;
         /** default sort order */ ascending?: boolean | undefined;
         /** `table` class */ classTable?: string | undefined;
         /** `table` id */ idTable?: string | undefined;
@@ -24,7 +24,7 @@ declare const __propDef: {
         /** `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;
-        /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | 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;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
@@ -32,8 +32,23 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        previous: {};
-        next: {};
+        th: {
+            column: string;
+        };
+        td: {
+            row: DataTableRow<any>;
+            column: string;
+        };
+        pageNumber: {
+            currentPage: number;
+            numberOfPages: number;
+        };
+        previous: {
+            currentPage: number;
+        };
+        next: {
+            currentPage: number;
+        };
     };
 };
 export type DataTableProps = typeof __propDef.props;
@@ -67,15 +82,18 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `data` - a list of objects to render in the table
  * - `idTable` - `table` id
  * - `id`
- * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
- * - `sortBy` - column to sort by--defaults to first column
+ * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
+ * - `sortBy` - column to sort by, defaults to first column
  *
  * @slots
  *
- * | name       | purpose                  | default value |
- * | ---------- | ------------------------ | ------------- |
- * | `previous` | previous button contents | `Previous`    |
- * | `next`     | next button contents     | `Next`        |
+ * | 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`                       |
  *
  * @example
  *
@@ -85,6 +103,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * </script>
  *
  * <DataTable
+ * class="mb-12"
  * data={[
  * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
  * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
@@ -96,15 +115,49 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
  * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
  * ]}
- * sortBy="make"
- * paginate={4}
+ * />
+ *
+ * <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 },
+ * ]}
+ * sortBy="year"
+ * maxRows={4}
  * class="tabular-nums"
- * classTh="cursor-pointer uppercase"
+ * classTh="cursor-pointer"
  * 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>
+ * <svelte:fragment slot="td" let:column let:row>
+ * 	{@const item = row[column]}
+ * 	{#if typeof item === "boolean"}
+ * 		{#if item}
+ * 			Yes
+ * 		{:else}
+ * 			No
+ * 		{/if}
+ * 	{:else}
+ * 		{item}
+ * 	{/if}
+ * </svelte:fragment>
+ * </DataTable>
  * ```
  */
 export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {

package/dist/components/FullscreenButton.svelte

@@ -38,10 +38,9 @@ Make the document or a specific element fullscreen.
 	bind:this={fullscreenDiv}
 	class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
 >
-	<div class="mb-2">Target element fullscreen</div>
+	<div class="mb-2">Target element</div>
 	<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
-		<span>Enable Element Fullscreen</span>
-		<span slot="enabled">Exit Element Fullscreen</span>
+		Enable Element Fullscreen
 	</FullscreenButton>
 </div>
 ```

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

@@ -57,10 +57,9 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * bind:this={fullscreenDiv}
  * class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
  * >
- * <div class="mb-2">Target element fullscreen</div>
+ * <div class="mb-2">Target element</div>
  * <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
- * 	<span>Enable Element Fullscreen</span>
- * 	<span slot="enabled">Exit Element Fullscreen</span>
+ * 	Enable Element Fullscreen
  * </FullscreenButton>
  * </div>
  * ```

package/dist/components/Popover.svelte

@@ -3,7 +3,7 @@
 
 ### Popover
 
-Displays a popover relatively positioned to the button.
+Displays a popover relatively positioned to the target.
 
 @props
 

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

@@ -22,7 +22,7 @@ export type PopoverSlots = typeof __propDef.slots;
 /**
  * ### Popover
  *
- * Displays a popover relatively positioned to the button.
+ * Displays a popover relatively positioned to the target.
  *
  * @props
  *

package/dist/components/ShareButton.svelte

@@ -3,7 +3,7 @@
 
 ### ShareButton
 
-Uses the navigator api to share or copy a url link depending on browser support.
+Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
 
 @props
 

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

@@ -22,7 +22,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
 /**
  * ### ShareButton
  *
- * Uses the navigator api to share or copy a url link depending on browser support.
+ * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
  *
  * @props
  *

package/dist/components/Sheet.svelte

@@ -11,9 +11,8 @@ Creates a sheet element based on the `position` provided.
 - `class` 
 - `display` - controls whether the sheet is displayed
 - `id` 
-- `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `size` - width/height of sheet based on the `side` - can also use css instead
 - `transitionSheet` - slides the sheet, set to `false` to remove
 - `transition` - fades the entire component, set to `false` to remove
 
@@ -28,7 +27,6 @@ Creates a sheet element based on the `position` provided.
 ```svelte
 <script lang="ts">
 	import { Sheet } from "drab";
-	import { X } from "../../site/svg/X.svelte";
 
 	let display = false;
 </script>
@@ -46,13 +44,8 @@ Creates a sheet element based on the `position` provided.
 >
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="my-0">Sheet</h2>
-		<button
-			type="button"
-			title="Close"
-			class="btn btn-s"
-			on:click={() => (display = false)}
-		>
-			<X />
+		<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+			Close
 		</button>
 	</div>
 	<div>
@@ -80,15 +73,9 @@ export let classSheet = "";
 export let display = false;
 export let transition = { duration };
 export let position = "right";
-export let size = 488;
+export let maxSize = 488;
 export let transitionSheet = { duration };
-export let onClickClose = false;
 let sheet;
-const clickOutside = (e) => {
-  if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
-    display = false;
-  }
-};
 const onKeyDown = (e) => {
   if (e.key === "Escape") {
     display = false;
@@ -96,13 +83,13 @@ const onKeyDown = (e) => {
 };
 if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
   if (position === "bottom") {
-    transitionSheet.y = size;
+    transitionSheet.y = maxSize;
   } else if (position === "top") {
-    transitionSheet.y = -size;
+    transitionSheet.y = -maxSize;
   } else if (position === "right") {
-    transitionSheet.x = size;
+    transitionSheet.x = maxSize;
   } else {
-    transitionSheet.x = -size;
+    transitionSheet.x = -maxSize;
   }
 }
 onMount(() => {
@@ -119,12 +106,11 @@ onMount(() => {
 
 {#if display}
 	<div
-		role="button"
-		tabindex="0"
-		on:click={clickOutside}
-		on:keydown={onKeyDown}
 		transition:fade={transition ? transition : { duration: 0 }}
 		class="d-backdrop {className}"
+		class:d-backdrop-bottom={position === "bottom"}
+		class:d-backdrop-top={position === "top"}
+		class:d-backdrop-right={position === "right"}
 		{id}
 	>
 		<div
@@ -132,47 +118,59 @@ onMount(() => {
 			bind:this={sheet}
 			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
 			style={position === "top" || position === "bottom"
-				? `max-height: ${size}px;`
-				: `max-width: ${size}px`}
+				? `max-height: ${maxSize}px;`
+				: `max-width: ${maxSize}px`}
 			class="d-sheet {classSheet}"
-			class:d-bottom={position === "bottom"}
-			class:d-top={position === "top"}
-			class:d-left={position === "left"}
-			class:d-right={position === "right"}
+			class:d-sheet-bottom={position === "bottom"}
+			class:d-sheet-top={position === "top"}
+			class:d-sheet-left={position === "left"}
+			class:d-sheet-right={position === "right"}
 		>
 			<slot>Content</slot>
 		</div>
+		<button title="Close" on:click={() => (display = false)}></button>
 	</div>
 {/if}
 
 <style>
+	button {
+		flex-grow: 1;
+	}
 	.d-backdrop {
 		position: fixed;
-		display: grid;
+		display: flex;
 		z-index: 40;
 		top: 0;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		overflow: hidden;
-		cursor: default;
+	}
+	.d-backdrop-bottom {
+		flex-direction: column-reverse;
+	}
+	.d-backdrop-top {
+		flex-direction: column;
+	}
+	.d-backdrop-right {
+		flex-direction: row-reverse;
 	}
 	.d-sheet {
 		margin: auto;
 	}
-	.d-bottom {
+	.d-sheet-bottom {
 		margin-bottom: 0;
 		width: 100%;
 	}
-	.d-top {
+	.d-sheet-top {
 		margin-top: 0;
 		width: 100%;
 	}
-	.d-right {
+	.d-sheet-right {
 		margin-right: 0;
 		height: 100%;
 	}
-	.d-left {
+	.d-sheet-left {
 		margin-left: 0;
 		height: 100%;
 	}

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

@@ -8,9 +8,8 @@ declare const __propDef: {
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
         /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
-        /** width/height of sheet based on the `side` - can also use css instead */ size?: number | undefined;
+        /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
-        /** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -33,9 +32,8 @@ export type SheetSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - controls whether the sheet is displayed
  * - `id`
- * - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+ * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
- * - `size` - width/height of sheet based on the `side` - can also use css instead
  * - `transitionSheet` - slides the sheet, set to `false` to remove
  * - `transition` - fades the entire component, set to `false` to remove
  *
@@ -50,7 +48,6 @@ export type SheetSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { Sheet } from "drab";
- * import { X } from "../../site/svg/X.svelte";
  *
  * let display = false;
  * </script>
@@ -68,13 +65,8 @@ export type SheetSlots = typeof __propDef.slots;
  * >
  * <div class="mb-4 flex items-center justify-between">
  * 	<h2 class="my-0">Sheet</h2>
- * 	<button
- * 		type="button"
- * 		title="Close"
- * 		class="btn btn-s"
- * 		on:click={() => (display = false)}
- * 	>
- * 		<X />
+ * 	<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+ * 		Close
  * 	</button>
  * </div>
  * <div>

package/dist/components/Tabs.svelte

@@ -3,7 +3,7 @@
 
 ### Tabs
 
-Displays tabs and the active tab's content.
+Displays tabs and the selected tab's content.
 
 @props
 
@@ -15,15 +15,16 @@ Displays tabs and the active tab's content.
 - `classTab` - class of all title `button`s
 - `class` 
 - `id` 
-- `selectedIndex` - index of selected tab, defaults to 0
-- `tabs` - array of tabs
+- `selectedIndex` - index of selected tab, defaults to `0`
+- `tabs` - array of `TabsTab` objects
+- `transition` - fades the panel content, set to `false` to remove
 
 @slots
 
-| name      | purpose               | default value      | slot props      |
-| --------- | --------------------- | ------------------ | --------------- |
-| `default` | active item's content | `activeItem.panel` | `activeItem`    |
-| `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
+| name    | purpose            | default value       | slot props             |
+| ------- | ------------------ | ------------------- | ---------------------- |
+| `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
+| `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
 
 @example
 
@@ -60,16 +61,17 @@ Displays tabs and the active tab's content.
 			data: { component: FullscreenButton },
 		},
 	]}
-	let:selectedTab
 >
-	<svelte:fragment slot="tab" let:item let:index>
-		{item.tab}
+	<svelte:fragment slot="tab" let:tab let:index>
+		{tab.tab}
 		{index + 1}
 	</svelte:fragment>
-	<div class="mb-2">{selectedTab.panel}</div>
-	{#if selectedTab.data?.component}
-		<svelte:component this={selectedTab.data.component} class="btn" />
-	{/if}
+	<svelte:fragment slot="panel" let:selectedTab>
+		<div class="mb-2">{selectedTab.panel}</div>
+		{#if selectedTab.data?.component}
+			<svelte:component this={selectedTab.data.component} class="btn" />
+		{/if}
+	</svelte:fragment>
 </Tabs>
 ```
 -->
@@ -78,6 +80,9 @@ Displays tabs and the active tab's content.
 
 <script>import { onMount } from "svelte";
 import { messageNoScript } from "../util/messages";
+import { fade } from "svelte/transition";
+import { duration } from "../util/transition";
+import { prefersReducedMotion } from "../util/accessibility";
 let className = "";
 export { className as class };
 export let id = "";
@@ -89,15 +94,20 @@ export let classNoscript = "";
 export let classTabPanel = "";
 export let tabs;
 export let selectedIndex = 0;
+export let transition = { duration };
 let clientJs = false;
-$:
-  selectedTab = tabs[selectedIndex];
-onMount(() => clientJs = true);
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  clientJs = true;
+});
 </script>
 
 <div class={className} {id}>
 	<div class={classTabList} role="tablist">
-		{#each tabs as item, index}
+		{#each tabs as tab, index}
 			<button
 				role="tab"
 				tabindex={index === selectedIndex ? 0 : -1}
@@ -109,13 +119,22 @@ onMount(() => clientJs = true);
 					: ''} {selectedIndex !== index ? classTabInactive : ''}"
 				on:click={() => (selectedIndex = index)}
 			>
-				<slot name="tab" {item} {index}>{item.tab}</slot>
+				<slot name="tab" {tab} {index}>{tab.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classTabPanel} role="tabpanel" id="tabpanel">
-		<slot {selectedTab}>{selectedTab.panel}</slot>
-	</div>
+	{#each tabs as tab, index}
+		{#if index === selectedIndex}
+			<div
+				class={classTabPanel}
+				role="tabpanel"
+				id="tabpanel"
+				in:fade={transition ? transition : { duration: 0 }}
+			>
+				<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+			</div>
+		{/if}
+	{/each}
 	<noscript>
 		<div class={classNoscript}>{messageNoScript}</div>
 	</noscript>

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

@@ -7,6 +7,7 @@ export interface TabsTab<T = any> {
     /** any data to pass back to the parent */
     data?: T;
 }
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -17,19 +18,21 @@ declare const __propDef: {
         /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
         /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
-        /** array of tabs */ tabs: TabsTab[];
-        /** index of selected tab, defaults to 0 */ selectedIndex?: number | undefined;
+        /** array of `TabsTab` objects */ tabs: TabsTab[];
+        /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
+        /** fades the panel content, set to `false` to remove */ transition?: false | FadeParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         tab: {
-            item: TabsTab<any>;
+            tab: TabsTab<any>;
             index: any;
         };
-        default: {
+        panel: {
             selectedTab: TabsTab<any>;
+            index: any;
         };
     };
 };
@@ -39,7 +42,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the active tab's content.
+ * Displays tabs and the selected tab's content.
  *
  * @props
  *
@@ -51,15 +54,16 @@ export type TabsSlots = typeof __propDef.slots;
  * - `classTab` - class of all title `button`s
  * - `class`
  * - `id`
- * - `selectedIndex` - index of selected tab, defaults to 0
- * - `tabs` - array of tabs
+ * - `selectedIndex` - index of selected tab, defaults to `0`
+ * - `tabs` - array of `TabsTab` objects
+ * - `transition` - fades the panel content, set to `false` to remove
  *
  * @slots
  *
- * | name      | purpose               | default value      | slot props      |
- * | --------- | --------------------- | ------------------ | --------------- |
- * | `default` | active item's content | `activeItem.panel` | `activeItem`    |
- * | `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
+ * | name    | purpose            | default value       | slot props             |
+ * | ------- | ------------------ | ------------------- | ---------------------- |
+ * | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
+ * | `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
  *
  * @example
  *
@@ -96,16 +100,17 @@ export type TabsSlots = typeof __propDef.slots;
  * 		data: { component: FullscreenButton },
  * 	},
  * ]}
- * let:selectedTab
  * >
- * <svelte:fragment slot="tab" let:item let:index>
- * 	{item.tab}
+ * <svelte:fragment slot="tab" let:tab let:index>
+ * 	{tab.tab}
  * 	{index + 1}
  * </svelte:fragment>
- * <div class="mb-2">{selectedTab.panel}</div>
- * {#if selectedTab.data?.component}
- * 	<svelte:component this={selectedTab.data.component} class="btn" />
- * {/if}
+ * <svelte:fragment slot="panel" let:selectedTab>
+ * 	<div class="mb-2">{selectedTab.panel}</div>
+ * 	{#if selectedTab.data?.component}
+ * 		<svelte:component this={selectedTab.data.component} class="btn" />
+ * 	{/if}
+ * </svelte:fragment>
  * </Tabs>
  * ```
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.6.1",
+	"version": "2.7.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",