drab 2.4.0 → 2.5.0

package/dist/components/Accordion.svelte

@@ -17,7 +17,7 @@ Displays a list of `details` elements.
 - `icon` 
 - `id` 
 - `items` - array of `AccordionItem` elements
-- `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+- `transition` - rotates the icon, slides the content, set to `false` to remove
 
 @slots
 
@@ -31,10 +31,15 @@ Displays a list of `details` elements.
 
 ```svelte
 <script>
-    import { Accordion } from "drab";
+	import { Accordion } from "drab";
+	import { Chevron } from "../../site/svg/Chevron.svelte";
 </script>
 
-<Accordion 
+<Accordion
+	icon={Chevron}
+	classDetails="border-b"
+	classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
+	classContent="pb-4"
 	items={[
 		{ summary: "Is it accessible?", content: "Yes." },
 		{
@@ -48,27 +53,11 @@ Displays a list of `details` elements.
 		{ summary: "Does it work without Javascript?", content: "Yes." },
 	]}
 >
-	<div slot="content" let:item let:index>
-		<span>{index + 1}.</span>
-		<span>{item.content}</span>
-	</div>
-</Accordion>
-
-<Accordion
-	items={[
-		{
-			summary: "A Component",
-			content: "Rendered only on this item.",
-			data: { component: FullscreenButton },
-		},
-		{ summary: "Summary", content: "Some other content" },
-	]}
->
-	<svelte:fragment slot="content" let:item>
-		{item.content}
-		{#if item.data?.component}
-			<svelte:component this={item.data.component} />
-		{/if}
+	<svelte:fragment slot="content" let:item let:index>
+		<div class="mb-4">
+			<span>{index + 1}.</span>
+			<span>{item.content}</span>
+		</div>
 	</svelte:fragment>
 </Accordion>
 ```
@@ -79,6 +68,7 @@ Displays a list of `details` elements.
 <script>import { onMount } from "svelte";
 import { slide } from "svelte/transition";
 import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
 let className = "";
 export { className as class };
 export let id = "";
@@ -89,7 +79,8 @@ export let classHeader = "";
 export let classSummary = "";
 export let classContent = "";
 export let classIcon = "";
-export let transition = {};
+export let transition = { duration };
+const cssDuration = transition ? transition.duration : 0;
 export let autoClose = true;
 let clientJs = false;
 const toggleOpen = (i) => {
@@ -135,6 +126,7 @@ onMount(() => {
 								class={classIcon}
 								class:d-rotate-180={item.open}
 								class:d-transition={transition}
+								style="--duration: {cssDuration}ms;"
 							>
 								{#if typeof icon !== "string"}
 									<svelte:component this={icon} />
@@ -173,6 +165,6 @@ onMount(() => {
 	.d-transition {
 		transition-property: transform;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: 150ms;
+		transition-duration: var(--duration);
 	}
 </style>

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

@@ -22,7 +22,7 @@ declare const __propDef: {
         /** class of all the `div`s that wrap the `summary` slot */ classSummary?: string | undefined;
         /** class of all the `div`s that wrap the `content` slot */ classContent?: string | undefined;
         /** class of the `div` that wrap the icon if displayed */ classIcon?: string | undefined;
-        /** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
+        /** rotates the icon, slides the content, set to `false` to remove */ transition?: false | SlideParams | undefined;
         /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
     };
     events: {
@@ -63,7 +63,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * - `icon`
  * - `id`
  * - `items` - array of `AccordionItem` elements
- * - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+ * - `transition` - rotates the icon, slides the content, set to `false` to remove
  *
  * @slots
  *
@@ -77,10 +77,15 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { Accordion } from "drab";
+ * import { Accordion } from "drab";
+ * import { Chevron } from "../../site/svg/Chevron.svelte";
  * </script>
  *
  * <Accordion
+ * icon={Chevron}
+ * classDetails="border-b"
+ * classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
+ * classContent="pb-4"
  * items={[
  * 	{ summary: "Is it accessible?", content: "Yes." },
  * 	{
@@ -94,27 +99,11 @@ export type AccordionSlots = typeof __propDef.slots;
  * 	{ summary: "Does it work without Javascript?", content: "Yes." },
  * ]}
  * >
- * <div slot="content" let:item let:index>
- * 	<span>{index + 1}.</span>
- * 	<span>{item.content}</span>
- * </div>
- * </Accordion>
- *
- * <Accordion
- * items={[
- * 	{
- * 		summary: "A Component",
- * 		content: "Rendered only on this item.",
- * 		data: { component: FullscreenButton },
- * 	},
- * 	{ summary: "Summary", content: "Some other content" },
- * ]}
- * >
- * <svelte:fragment slot="content" let:item>
- * 	{item.content}
- * 	{#if item.data?.component}
- * 		<svelte:component this={item.data.component} />
- * 	{/if}
+ * <svelte:fragment slot="content" let:item let:index>
+ * 	<div class="mb-4">
+ * 		<span>{index + 1}.</span>
+ * 		<span>{item.content}</span>
+ * 	</div>
  * </svelte:fragment>
  * </Accordion>
  * ```

package/dist/components/Chord.svelte

@@ -21,7 +21,10 @@ Generates a guitar chord `svg`.
 	import { Chord } from "drab";
 </script>
 
-<Chord name="D" notes={[
+<Chord
+	class="text-gray-950"
+	name="D"
+	notes={[
 		{
 			finger: 0,
 			string: 4,

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

@@ -45,7 +45,10 @@ export type ChordSlots = typeof __propDef.slots;
  * import { Chord } from "drab";
  * </script>
  *
- * <Chord name="D" notes={[
+ * <Chord
+ * class="text-gray-950"
+ * name="D"
+ * notes={[
  * 	{
  * 		finger: 0,
  * 		string: 4,

package/dist/components/ContextMenu.svelte

@@ -22,17 +22,17 @@ Displays when the parent element is right clicked.
 
 ```svelte
 <script>
-    import { ContextMenu } from "drab";
+	import { ContextMenu } from "drab";
 </script>
 
-<div>
+<div class="flex justify-center rounded border border-dashed p-12">
 	<div>Right click here</div>
-	<ContextMenu>
-		<div>
-			<div>Context Menu</div>
-			<button>Button</button>
-			<button>Button</button>
-			<button>Button</button>
+	<ContextMenu class="transition">
+		<div class="card flex w-48 flex-col gap-2">
+			<div class="font-bold">Context Menu</div>
+			<button class="btn">Button</button>
+			<button class="btn">Button</button>
+			<button class="btn">Button</button>
 		</div>
 	</ContextMenu>
 </div>
@@ -81,7 +81,7 @@ onMount(() => {
 });
 </script>
 
-<svelte:document on:click={hide} on:keydown={onKeyDown} />
+<svelte:body on:click={hide} on:keydown={onKeyDown} />
 
 <div
 	class={className}

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

@@ -38,17 +38,17 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ContextMenu } from "drab";
+ * import { ContextMenu } from "drab";
  * </script>
  *
- * <div>
+ * <div class="flex justify-center rounded border border-dashed p-12">
  * <div>Right click here</div>
- * <ContextMenu>
- * 	<div>
- * 		<div>Context Menu</div>
- * 		<button>Button</button>
- * 		<button>Button</button>
- * 		<button>Button</button>
+ * <ContextMenu class="transition">
+ * 	<div class="card flex w-48 flex-col gap-2">
+ * 		<div class="font-bold">Context Menu</div>
+ * 		<button class="btn">Button</button>
+ * 		<button class="btn">Button</button>
+ * 		<button class="btn">Button</button>
  * 	</div>
  * </ContextMenu>
  * </div>

package/dist/components/CopyButton.svelte

@@ -24,10 +24,12 @@ Uses the navigator api to copy text to the clipboard.
 
 ```svelte
 <script>
-    import { CopyButton } from "drab";
+	import { CopyButton } from "drab";
 </script>
 
-<CopyButton text="Text to copy" />
+<div>
+	<CopyButton class="btn" text="Text to copy" />
+</div>
 ```
 -->
 

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

@@ -45,7 +45,9 @@ export type CopyButtonSlots = typeof __propDef.slots;
  * import { CopyButton } from "drab";
  * </script>
  *
- * <CopyButton text="Text to copy" />
+ * <div>
+ * <CopyButton class="btn" text="Text to copy" />
+ * </div>
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

package/dist/components/DataTable.svelte

@@ -22,10 +22,12 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `classTh` - `th` class
 - `classTheadTr` - `thead tr` class
 - `classThead` - `thead` 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` 
 - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by--defaults to first column
 
@@ -43,15 +45,26 @@ Data table to display an array of JS objects. Click a column header to sort.
 	import { DataTable } from "drab";
 </script>
 
-<DataTable 
+<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="make"
+	paginate={4}
+	class="tabular-nums"
+	classTh="cursor-pointer uppercase"
+	classThSorted="underline"
+	classTbodyTr="transition hover:bg-gray-50"
+	classFooter="flex justify-between items-center"
+	classButton="btn"
 />
 ```
 -->
@@ -60,6 +73,9 @@ Data table to display an array of JS objects. Click a column header to sort.
 
 <script>import { messageNoScript } from "../util/messages";
 import { onMount } from "svelte";
+let className = "";
+export { className as class };
+export let id = "";
 export let data;
 export let columns = [];
 if (!columns.length && data[0]) {
@@ -125,60 +141,62 @@ sort(sortBy, false);
 onMount(() => clientJs = true);
 </script>
 
-<table class={classTable} id={idTable}>
-	<thead class={classThead}>
-		<tr class={classTheadTr}>
-			{#each columns as column}
-				<th
-					class="{classTh} {sortBy === column ? classThSorted : ''}"
-					on:click={() => sort(column)}
-				>
-					{column}
-				</th>
+<div class={className} {id}>
+	<table class={classTable} id={idTable}>
+		<thead class={classThead}>
+			<tr class={classTheadTr}>
+				{#each columns as column}
+					<th
+						class="{classTh} {sortBy === column ? classThSorted : ''}"
+						on:click={() => sort(column)}
+					>
+						{column}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody class={classTbody}>
+			{#each data as row, i}
+				{@const showRow =
+					i < paginate * currentPage && i >= paginate * (currentPage - 1)}
+				{#if paginate ? showRow : true}
+					<tr class={classTbodyTr}>
+						{#each columns as column}
+							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
+								{row[column]}
+							</td>
+						{/each}
+					</tr>
+				{/if}
 			{/each}
-		</tr>
-	</thead>
-	<tbody class={classTbody}>
-		{#each data as row, i}
-			{@const showRow =
-				i < paginate * currentPage && i >= paginate * (currentPage - 1)}
-			{#if paginate ? showRow : true}
-				<tr class={classTbodyTr}>
-					{#each columns as column}
-						<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-							{row[column]}
-						</td>
-					{/each}
-				</tr>
-			{/if}
-		{/each}
-	</tbody>
-</table>
+		</tbody>
+	</table>
 
-{#if paginate}
-	<div class={classFooter}>
-		<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
-		<div class={classPageControls}>
-			<button
-				class={classButton}
-				disabled={!clientJs || currentPage < 2}
-				on:click={() => currentPage--}
-			>
-				<slot name="previous">Previous</slot>
-			</button>
-			<button
-				class={classButton}
-				disabled={!clientJs || currentPage >= numberOfPages}
-				on:click={() => currentPage++}
-			>
-				<slot name="next">Next</slot>
-			</button>
+	{#if paginate}
+		<div class={classFooter}>
+			<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+			<div class={classPageControls}>
+				<button
+					class={classButton}
+					disabled={!clientJs || currentPage < 2}
+					on:click={() => currentPage--}
+				>
+					<slot name="previous">Previous</slot>
+				</button>
+				<button
+					class={classButton}
+					disabled={!clientJs || currentPage >= numberOfPages}
+					on:click={() => currentPage++}
+				>
+					<slot name="next">Next</slot>
+				</button>
+			</div>
 		</div>
-	</div>
 
-	<noscript>
-		<div class={classNoscript}>
-			{messageNoScript}
-		</div>
-	</noscript>
-{/if}
+		<noscript>
+			<div class={classNoscript}>
+				{messageNoScript}
+			</div>
+		</noscript>
+	{/if}
+</div>

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

@@ -4,6 +4,8 @@ export type DataTableRow<T> = {
 };
 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;
@@ -59,10 +61,12 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `classTh` - `th` class
  * - `classTheadTr` - `thead tr` class
  * - `classThead` - `thead` 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`
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by--defaults to first column
  *
@@ -87,8 +91,19 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ 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="make"
+ * paginate={4}
+ * class="tabular-nums"
+ * classTh="cursor-pointer uppercase"
+ * classThSorted="underline"
+ * classTbodyTr="transition hover:bg-gray-50"
+ * classFooter="flex justify-between items-center"
+ * classButton="btn"
  * />
  * ```
  */

package/dist/components/Editor.svelte

@@ -27,7 +27,12 @@ Text editor with controls to add elements and keyboard shortcuts.
 	import { Editor } from "drab";
 </script>
 
-<Editor contentElements={[
+<Editor
+	classButton="btn"
+	classControls="flex gap-2"
+	classTextarea="border w-full h-36 p-2 rounded"
+	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
+	contentElements={[
 		{
 			name: "Bullet",
 			text: "- ",

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

@@ -73,7 +73,12 @@ export type EditorSlots = typeof __propDef.slots;
  * import { Editor } from "drab";
  * </script>
  *
- * <Editor contentElements={[
+ * <Editor
+ * classButton="btn"
+ * classControls="flex gap-2"
+ * classTextarea="border w-full h-36 p-2 rounded"
+ * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
+ * contentElements={[
  * 	{
  * 		name: "Bullet",
  * 		text: "- ",

package/dist/components/FullscreenButton.svelte

@@ -30,13 +30,18 @@ Make the document or a specific element fullscreen.
 	let fullscreenDiv;
 </script>
 
-<FullscreenButton />
+<div>
+	<FullscreenButton class="btn" />
+</div>
 
-<div bind:this={fullscreenDiv}>
-	<div>Target element fullscreen</div>
-	<FullscreenButton targetElement={fullscreenDiv}>
+<div
+	bind:this={fullscreenDiv}
+	class="mt-4 rounded bg-gray-800 p-4 text-gray-50"
+>
+	<div class="mb-2">Target element fullscreen</div>
+	<FullscreenButton targetElement={fullscreenDiv} class="btn">
+		<span>Enable Element Fullscreen</span>
 		<span slot="enabled">Exit Element Fullscreen</span>
-		<span slot="disabled">Enable Element Fullscreen</span>
 	</FullscreenButton>
 </div>
 ```

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

@@ -49,13 +49,18 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * let fullscreenDiv;
  * </script>
  *
- * <FullscreenButton />
+ * <div>
+ * <FullscreenButton class="btn" />
+ * </div>
  *
- * <div bind:this={fullscreenDiv}>
- * <div>Target element fullscreen</div>
- * <FullscreenButton targetElement={fullscreenDiv}>
+ * <div
+ * bind:this={fullscreenDiv}
+ * class="mt-4 rounded bg-gray-800 p-4 text-gray-50"
+ * >
+ * <div class="mb-2">Target element fullscreen</div>
+ * <FullscreenButton targetElement={fullscreenDiv} class="btn">
+ * 	<span>Enable Element Fullscreen</span>
  * 	<span slot="enabled">Exit Element Fullscreen</span>
- * 	<span slot="disabled">Enable Element Fullscreen</span>
  * </FullscreenButton>
  * </div>
  * ```

package/dist/components/Popover.svelte

@@ -28,16 +28,30 @@ Displays a popover relatively positioned to the button.
 
 ```svelte
 <script>
-    import { Popover } from "drab";
+	import { Popover } from "drab";
 </script>
 
-<Popover>
+<Popover classButton="btn" classPopover="p-2 transition">
 	<span slot="button">Hover</span>
-	<div>
-		<div>Popover</div>
-		<button>Button</button>
-		<button>Button</button>
-		<button>Button</button>
+	<div class="card flex w-48 flex-col gap-2">
+		<div class="font-bold">Bottom</div>
+		<button class="btn">Button</button>
+		<button class="btn">Button</button>
+		<button class="btn">Button</button>
+	</div>
+</Popover>
+<Popover
+	classButton="btn"
+	classPopover="p-2 transition"
+	eventType="click"
+	position="right"
+>
+	<span slot="button">Click</span>
+	<div class="card flex w-48 flex-col gap-2">
+		<div class="font-bold">Right</div>
+		<button class="btn">Button</button>
+		<button class="btn">Button</button>
+		<button class="btn">Button</button>
 	</div>
 </Popover>
 ```
@@ -109,7 +123,7 @@ onMount(() => {
 });
 </script>
 
-<svelte:document on:keydown={onKeyDown} on:click={clickOutside} />
+<svelte:body on:keydown={onKeyDown} on:click={clickOutside} />
 
 <div class="db-relative {className}" {id}>
 	<button

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

@@ -50,16 +50,30 @@ export type PopoverSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { Popover } from "drab";
+ * import { Popover } from "drab";
  * </script>
  *
- * <Popover>
+ * <Popover classButton="btn" classPopover="p-2 transition">
  * <span slot="button">Hover</span>
- * <div>
- * 	<div>Popover</div>
- * 	<button>Button</button>
- * 	<button>Button</button>
- * 	<button>Button</button>
+ * <div class="card flex w-48 flex-col gap-2">
+ * 	<div class="font-bold">Bottom</div>
+ * 	<button class="btn">Button</button>
+ * 	<button class="btn">Button</button>
+ * 	<button class="btn">Button</button>
+ * </div>
+ * </Popover>
+ * <Popover
+ * classButton="btn"
+ * classPopover="p-2 transition"
+ * eventType="click"
+ * position="right"
+ * >
+ * <span slot="button">Click</span>
+ * <div class="card flex w-48 flex-col gap-2">
+ * 	<div class="font-bold">Right</div>
+ * 	<button class="btn">Button</button>
+ * 	<button class="btn">Button</button>
+ * 	<button class="btn">Button</button>
  * </div>
  * </Popover>
  * ```

package/dist/components/ShareButton.svelte

@@ -25,14 +25,17 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 ```svelte
 <script>
-    import { ShareButton } from "drab";
+	import { ShareButton } from "drab";
 </script>
 
-<ShareButton
-	text="Check out this page: "
-	title="drab"
-    url="https://drab.robino.dev"
-/>
+<div>
+	<ShareButton
+		class="btn"
+		text="Check out this page: "
+		title="drab"
+		url="https://drab.robino.dev"
+	/>
+</div>
 ```
 -->
 

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

@@ -44,14 +44,17 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ShareButton } from "drab";
+ * import { ShareButton } from "drab";
  * </script>
  *
+ * <div>
  * <ShareButton
- * text="Check out this page: "
- * title="drab"
- *    url="https://drab.robino.dev"
+ * 	class="btn"
+ * 	text="Check out this page: "
+ * 	title="drab"
+ * 	url="https://drab.robino.dev"
  * />
+ * </div>
  * ```
  */
 export default class ShareButton extends SvelteComponent<ShareButtonProps, ShareButtonEvents, ShareButtonSlots> {

package/dist/components/Sheet.svelte

@@ -0,0 +1,166 @@
+<!--
+@component
+
+### Sheet
+
+Creates a sheet element based on the `position` provided.
+
+@props
+
+- `classSheet` - sheet class - not the backdrop
+- `class` 
+- `display` - controls whether the sheet is displayed
+- `id` 
+- `position` - determines the position of sheet
+- `size` - size of sheet based on position - can also use css instead
+- `transitionSheet` - slides the sheet, set to `false` to remove
+- `transition` - fades the entire component, set to `false` to remove
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | content                         | `Content`     |
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Sheet } from "drab";
+
+	let display = false;
+</script>
+
+<div>
+	<button class="btn" on:click={() => (display = true)}>Open</button>
+</div>
+
+<Sheet
+	bind:display
+	class="bg-gray-50/80 backdrop-blur"
+	classSheet="p-4 shadow bg-white"
+>
+	<div class="mb-4 flex items-center justify-between">
+		<div class="text-lg font-bold">Sheet</div>
+		<button class="btn" on:click={() => (display = false)}>Close</button>
+	</div>
+	<div>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur.
+	</div>
+</Sheet>
+```
+-->
+
+<script>import { onMount } from "svelte";
+import {
+  fade,
+  fly
+} from "svelte/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
+let className = "";
+export { className as class };
+export let id = "";
+export let classSheet = "";
+export let display = true;
+export let transition = { duration };
+export let position = "right";
+export let size = 488;
+export let transitionSheet = { duration };
+let sheet;
+const clickOutside = (e) => {
+  if (e.target instanceof Node && !sheet.contains(e.target)) {
+    display = false;
+  }
+};
+const onKeyDown = (e) => {
+  if (e.key === "Escape") {
+    display = false;
+  }
+};
+if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
+  if (position === "bottom") {
+    transitionSheet.y = size;
+  } else if (position === "top") {
+    transitionSheet.y = -size;
+  } else if (position === "right") {
+    transitionSheet.x = size;
+  } else {
+    transitionSheet.x = -size;
+  }
+}
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+    if (transitionSheet)
+      transitionSheet.duration = 0;
+  }
+});
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		role="button"
+		tabindex="0"
+		on:click={clickOutside}
+		on:keydown={onKeyDown}
+		transition:fade={transition ? transition : { duration: 0 }}
+		class="d-backdrop {className}"
+		{id}
+	>
+		<div
+			bind:this={sheet}
+			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
+			style={position === "top" || position === "bottom"
+				? `max-height: ${size}px;`
+				: `max-width: ${size}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"}
+		>
+			<slot>Content</slot>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.d-backdrop {
+		position: fixed;
+		display: grid;
+		z-index: 10;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+		cursor: default;
+	}
+	.d-sheet {
+		margin: auto;
+	}
+	.d-bottom {
+		margin-bottom: 0;
+		width: 100%;
+	}
+	.d-top {
+		margin-top: 0;
+		width: 100%;
+	}
+	.d-right {
+		margin-right: 0;
+		height: 100%;
+	}
+	.d-left {
+		margin-left: 0;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,80 @@
+import { SvelteComponent } from "svelte";
+import { type FadeParams, type FlyParams } from "svelte/transition";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** sheet class - not the backdrop */ classSheet?: string | undefined;
+        /** 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;
+        /** size of sheet based on position - can also use css instead */ size?: number | undefined;
+        /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SheetProps = typeof __propDef.props;
+export type SheetEvents = typeof __propDef.events;
+export type SheetSlots = typeof __propDef.slots;
+/**
+ * ### Sheet
+ *
+ * Creates a sheet element based on the `position` provided.
+ *
+ * @props
+ *
+ * - `classSheet` - sheet class - not the backdrop
+ * - `class`
+ * - `display` - controls whether the sheet is displayed
+ * - `id`
+ * - `position` - determines the position of sheet
+ * - `size` - size of sheet based on position - can also use css instead
+ * - `transitionSheet` - slides the sheet, set to `false` to remove
+ * - `transition` - fades the entire component, set to `false` to remove
+ *
+ * @slots
+ *
+ * | name       | purpose                         | default value |
+ * | ---------- | ------------------------------- | ------------- |
+ * | `default`  | content                         | `Content`     |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { Sheet } from "drab";
+ *
+ * let display = false;
+ * </script>
+ *
+ * <div>
+ * <button class="btn" on:click={() => (display = true)}>Open</button>
+ * </div>
+ *
+ * <Sheet
+ * bind:display
+ * class="bg-gray-50/80 backdrop-blur"
+ * classSheet="p-4 shadow bg-white"
+ * >
+ * <div class="mb-4 flex items-center justify-between">
+ * 	<div class="text-lg font-bold">Sheet</div>
+ * 	<button class="btn" on:click={() => (display = false)}>Close</button>
+ * </div>
+ * <div>
+ * 	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ * 	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ * 	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ * 	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ * 	cillum dolore eu fugiat nulla pariatur.
+ * </div>
+ * </Sheet>
+ * ```
+ */
+export default class Sheet extends SvelteComponent<SheetProps, SheetEvents, SheetSlots> {
+}
+export {};

package/dist/components/Tabs.svelte

@@ -29,19 +29,30 @@ Displays tabs and the active tab's content.
 
 ```svelte
 <script>
-    import { Tabs } from "drab";
+	import { Tabs } from "drab";
+	import { FullscreenButton } from "drab";
 </script>
 
-<Tabs 
-	items={[
-		{ name: "Tab 1", content: "Content 1" },
-		{ name: "Tab 2", content: "Content 2" },
+<Tabs
+	classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
+	classTitle="btn rounded-sm p-0.5"
+	classTitleActive="bg-white text-gray-950"
+	classTitleInactive="bg-gray-200 text-gray-500"
+	classContent="py-2"
+	tabs={[
+		{ title: "Tab 1", content: "Content 1" },
+		{ title: "Tab 2", content: "Content 2" },
 	]}
 />
 
 <Tabs
+	classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
+	classTitle="btn rounded-sm p-0.5"
+	classTitleActive="bg-white text-gray-950"
+	classTitleInactive="bg-gray-200 text-gray-500"
+	classContent="py-2"
 	tabs={[
-		{ title: "Tab", content: "Content 1" },
+		{ title: "Tab", content: "Generated indexes" },
 		{
 			title: "Tab",
 			content: "A tab with a component",
@@ -56,7 +67,7 @@ Displays tabs and the active tab's content.
 	</svelte:fragment>
 	<div>{activeTab.content}</div>
 	{#if activeTab.data?.component}
-		<svelte:component this={activeTab.data.component} />
+		<svelte:component this={activeTab.data.component} class="btn" />
 	{/if}
 </Tabs>
 ```

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

@@ -65,19 +65,30 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { Tabs } from "drab";
+ * import { Tabs } from "drab";
+ * import { FullscreenButton } from "drab";
  * </script>
  *
  * <Tabs
- * items={[
- * 	{ name: "Tab 1", content: "Content 1" },
- * 	{ name: "Tab 2", content: "Content 2" },
+ * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
+ * classTitle="btn rounded-sm p-0.5"
+ * classTitleActive="bg-white text-gray-950"
+ * classTitleInactive="bg-gray-200 text-gray-500"
+ * classContent="py-2"
+ * tabs={[
+ * 	{ title: "Tab 1", content: "Content 1" },
+ * 	{ title: "Tab 2", content: "Content 2" },
  * ]}
  * />
  *
  * <Tabs
+ * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
+ * classTitle="btn rounded-sm p-0.5"
+ * classTitleActive="bg-white text-gray-950"
+ * classTitleInactive="bg-gray-200 text-gray-500"
+ * classContent="py-2"
  * tabs={[
- * 	{ title: "Tab", content: "Content 1" },
+ * 	{ title: "Tab", content: "Generated indexes" },
  * 	{
  * 		title: "Tab",
  * 		content: "A tab with a component",
@@ -92,7 +103,7 @@ export type TabsSlots = typeof __propDef.slots;
  * </svelte:fragment>
  * <div>{activeTab.content}</div>
  * {#if activeTab.data?.component}
- * 	<svelte:component this={activeTab.data.component} />
+ * 	<svelte:component this={activeTab.data.component} class="btn" />
  * {/if}
  * </Tabs>
  * ```

package/dist/components/YouTube.svelte

@@ -21,7 +21,11 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
 	import { YouTube } from "drab";
 </script>
 
-<YouTube title="Video Title" uid="youtube_uid" />
+<YouTube
+	class="aspect-video w-full rounded"
+	title="Renegade - Kevin Olusola"
+	uid="gouiY85kD2o"
+/>
 ```
 -->
 

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

@@ -37,7 +37,11 @@ export type YouTubeSlots = typeof __propDef.slots;
  * import { YouTube } from "drab";
  * </script>
  *
- * <YouTube title="Video Title" uid="youtube_uid" />
+ * <YouTube
+ * class="aspect-video w-full rounded"
+ * title="Renegade - Kevin Olusola"
+ * uid="gouiY85kD2o"
+ * />
  * ```
  */
 export default class YouTube extends SvelteComponent<YouTubeProps, YouTubeEvents, YouTubeSlots> {

package/dist/index.d.ts

@@ -11,7 +11,8 @@ import type { EditorContentElement } from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
+import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import type { TabsTab } from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Tabs, type TabsTab, YouTube, };
+export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };

package/dist/index.js

@@ -7,6 +7,7 @@ import Editor from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
+import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Tabs, YouTube, };
+export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };

package/dist/util/transition.d.ts

@@ -0,0 +1 @@
+export declare const duration = 200;

package/dist/util/transition.js

@@ -0,0 +1 @@
+export const duration = 200;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.4.0",
+	"version": "2.5.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -36,7 +36,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
 		"pub": "npm publish --access public",
-		"doc": "node scripts/buildDocs.js"
+		"doc": "node src/scripts/buildDocs.js"
 	},
 	"exports": {
 		".": {