drab 2.3.0 → 2.4.1

package/dist/components/Accordion.svelte

@@ -21,20 +21,26 @@ Displays a list of `details` elements.
 
 @slots
 
-| name       | purpose                       | default value  |
-| ---------- | ----------------------------- | -------------- |
-| `summary`  | summary element               | `item.summary` |
-| `icon`     | icon element                  | `icon` prop    |
-| `content`  | content of the accordion item | `item.content` |
+| name      | purpose                       | default value  | slot props      |
+| --------- | ----------------------------- | -------------- | --------------- |
+| `summary` | summary element               | `item.summary` | `item`, `index` |
+| `icon`    | icon element                  | `icon` prop    | `item`, `index` |
+| `content` | content of the accordion item | `item.content` | `item`, `index` |
 
 @example
 
 ```svelte
 <script>
-    import { Accordion } from "drab";
+    import Accordion from "./Accordion.svelte";
+    import FullscreenButton from "./FullscreenButton.svelte";
+	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." },
 		{
@@ -46,38 +52,22 @@ Displays a list of `details` elements.
 			content: "Yes, with the transition prop.",
 		},
 		{ 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>
-```
-
-To render a component on unique items, pass it into the `data` prop and utilize `<svelte:component this={item.data.component}>` inside of the slot.
-
-```svelte
-<script>
-    import { Accordion, FullScreenButton } from "drab";
-</script>
-
-<Accordion
-	items={[
 		{
-			summary: "A Component",
+			summary: "Component",
 			content: "Rendered only on this item.",
 			data: { component: FullscreenButton },
 		},
-		{ summary: "Summary", content: "Some other content" },
 	]}
 >
-	<div slot="content" let:item>
-		{item.content}
+	<svelte:fragment slot="content" let:item let:index>
+		<div class="mb-4">
+			<span>{index + 1}.</span>
+			<span>{item.content}</span>
+		</div>
 		{#if item.data?.component}
-			<svelte:component this={item.data.component} />
+			<svelte:component class="btn" this={item.data.component} />
 		{/if}
-	</div>
+	</svelte:fragment>
 </Accordion>
 ```
 -->

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-/** use `data` to pass anything back to the parent */
 export interface AccordionItem<T = any> {
     /** text summary of the item */
     summary?: string;
@@ -7,7 +6,7 @@ export interface AccordionItem<T = any> {
     content?: string;
     /** controls whether the content is displayed */
     open?: boolean;
-    /** any data to pass back */
+    /** any data to pass back to the parent */
     data?: T;
 }
 import { type ComponentType } from "svelte";
@@ -68,20 +67,26 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * @slots
  *
- * | name       | purpose                       | default value  |
- * | ---------- | ----------------------------- | -------------- |
- * | `summary`  | summary element               | `item.summary` |
- * | `icon`     | icon element                  | `icon` prop    |
- * | `content`  | content of the accordion item | `item.content` |
+ * | name      | purpose                       | default value  | slot props      |
+ * | --------- | ----------------------------- | -------------- | --------------- |
+ * | `summary` | summary element               | `item.summary` | `item`, `index` |
+ * | `icon`    | icon element                  | `icon` prop    | `item`, `index` |
+ * | `content` | content of the accordion item | `item.content` | `item`, `index` |
  *
  * @example
  *
  * ```svelte
  * <script>
- *    import { Accordion } from "drab";
+ *    import Accordion from "./Accordion.svelte";
+ *    import FullscreenButton from "./FullscreenButton.svelte";
+ * 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." },
  * 	{
@@ -93,38 +98,22 @@ export type AccordionSlots = typeof __propDef.slots;
  * 		content: "Yes, with the transition prop.",
  * 	},
  * 	{ 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>
- * ```
- *
- * To render a component on unique items, pass it into the `data` prop and utilize `<svelte:component this={item.data.component}>` inside of the slot.
- *
- * ```svelte
- * <script>
- *    import { Accordion, FullScreenButton } from "drab";
- * </script>
- *
- * <Accordion
- * items={[
  * 	{
- * 		summary: "A Component",
+ * 		summary: "Component",
  * 		content: "Rendered only on this item.",
  * 		data: { component: FullscreenButton },
  * 	},
- * 	{ summary: "Summary", content: "Some other content" },
  * ]}
  * >
- * <div slot="content" let:item>
- * 	{item.content}
+ * <svelte:fragment slot="content" let:item let:index>
+ * 	<div class="mb-4">
+ * 		<span>{index + 1}.</span>
+ * 		<span>{item.content}</span>
+ * 	</div>
  * 	{#if item.data?.component}
- * 		<svelte:component this={item.data.component} />
+ * 		<svelte:component class="btn" this={item.data.component} />
  * 	{/if}
- * </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

@@ -25,14 +25,14 @@ Displays when the parent element is right clicked.
     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/ContextMenu.svelte.d.ts

@@ -41,14 +41,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *    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

@@ -27,7 +27,9 @@ Uses the navigator api to copy text to the clipboard.
     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

@@ -42,10 +42,12 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * ```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>
  * ```
  */
 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

@@ -31,13 +31,27 @@ Displays a popover relatively positioned to the button.
     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/Popover.svelte.d.ts

@@ -53,13 +53,27 @@ export type PopoverSlots = typeof __propDef.slots;
  *    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

@@ -28,11 +28,14 @@ Uses the navigator api to share or copy a url link depending on browser support.
     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

@@ -47,11 +47,14 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *    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/Tabs.svelte

@@ -3,100 +3,115 @@
 
 ### Tabs
 
-Displays tabs and slotted content.
+Displays tabs and the active tab's content.
 
 @props
 
-- `classButtonActive` - class of the active tab's `button`
-- `classButtonInactive` - class of all the inactive tabs' `button`s
-- `classButton` - `button` class
+- `activeIndex` - index of active tab, defaults to 0
+- `classContent` - class of `div` that wraps the slotted content
 - `classHeader` - class of the `div` that wraps the `button`s
 - `classNoscript` - `noscript` class
-- `classSlot` - class of `div` that wraps the slotted content
+- `classTitleActive` - class of the active tab's `button`
+- `classTitleInactive` - class of all the inactive tabs' `button`s
+- `classTitle` - class of all title `button`s
 - `class` 
-- `content` - array of `TabContent` elements
 - `id` 
-- `transition` - fades the content in, defaults to empty object, set to false to remove
+- `tabs` - array of tabs
 
 @slots
 
-Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+| name      | purpose               | default value        | slot props      |
+| --------- | --------------------- | -------------------- | --------------- |
+| `default` | active item's content | `activeItem.content` | `activeItem`    |
+| `title`   | title of each tab     | `item.title`         | `item`, `index` |
 
 @example
 
 ```svelte
 <script>
     import { Tabs } from "drab";
-	import { FullscreenButton } from "drab";
+	import FullscreenButton from "./FullscreenButton.svelte";
 </script>
 
-<Tabs content={[
-		{ name: "String", slot: "Slot" },
-		{ name: "Component", slot: FullscreenButton },
+<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: "Generated indexes" },
+		{
+			title: "Tab",
+			content: "A tab with a component",
+			data: { component: FullscreenButton },
+		},
+	]}
+	let:activeTab
+>
+	<svelte:fragment slot="title" let:item let:index>
+		{item.title}
+		{index + 1}
+	</svelte:fragment>
+	<div>{activeTab.content}</div>
+	{#if activeTab.data?.component}
+		<svelte:component class="btn" this={activeTab.data.component} />
+	{/if}
+</Tabs>
 ```
 -->
 
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { fade } from "svelte/transition";
 import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let classHeader = "";
-export let classButton = "";
-export let classButtonActive = "";
-export let classButtonInactive = "";
+export let classTitle = "";
+export let classTitleActive = "";
+export let classTitleInactive = "";
 export let classNoscript = "";
-export let classSlot = "";
-export let content;
-export let transition = {};
-const fadeTransition = transition ? transition : { duration: 0 };
+export let classContent = "";
+export let tabs;
+export let activeIndex = 0;
 let clientJs = false;
-let activeIndex = 0;
-for (const item of content) {
-  if (!item.classContentSlot)
-    item.classContentSlot = "";
-}
 $:
-  activeTab = content[activeIndex];
+  activeTab = tabs[activeIndex];
 onMount(() => clientJs = true);
 </script>
 
 <div class={className} {id}>
 	<div class={classHeader}>
-		{#each content as { name }, i}
+		{#each tabs as item, index}
 			<button
 				disabled={!clientJs}
-				class="{classButton} {activeIndex === i
-					? classButtonActive
-					: ''} {activeIndex !== i ? classButtonInactive : ''}"
-				on:click={() => (activeIndex = i)}
+				class="{classTitle} {activeIndex === index
+					? classTitleActive
+					: ''} {activeIndex !== index ? classTitleInactive : ''}"
+				on:click={() => (activeIndex = index)}
 			>
-				{name}
+				<slot name="title" {item} {index}>{item.title}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classSlot}>
-		{#if typeof activeTab.slot !== "string"}
-			<div in:fade={fadeTransition}>
-				<svelte:component
-					this={activeTab.slot}
-					class={activeTab.classContentSlot}
-				/>
-			</div>
-		{:else}
-			<div in:fade={fadeTransition} class={activeTab.classContentSlot}>
-				{activeTab.slot}
-			</div>
-		{/if}
+	<div class={classContent}>
+		<slot {activeTab}>{activeTab.content}</slot>
 	</div>
 	<noscript>
-		<div class={classNoscript}>
-			{messageNoScript}
-		</div>
+		<div class={classNoscript}>{messageNoScript}</div>
 	</noscript>
 </div>

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

@@ -1,31 +1,37 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-export interface TabsContent {
-    /** tab name, displayed in `button` element */
-    name: string;
+export interface TabsTab<T = any> {
+    /** tab title, displayed in `button` element */
+    title?: string;
     /** slotted content, displayed once tab is clicked */
-    slot: string | ComponentType;
-    /** class of the slotted content */
-    classContentSlot?: string;
+    content?: string;
+    /** any data to pass back to the parent */
+    data?: T;
 }
-import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
         /** class of the `div` that wraps the `button`s */ classHeader?: string | undefined;
-        /** `button` class */ classButton?: string | undefined;
-        /** class of the active tab's `button` */ classButtonActive?: string | undefined;
-        /** class of all the inactive tabs' `button`s */ classButtonInactive?: string | undefined;
+        /** class of all title `button`s */ classTitle?: string | undefined;
+        /** class of the active tab's `button` */ classTitleActive?: string | undefined;
+        /** class of all the inactive tabs' `button`s */ classTitleInactive?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
-        /** class of `div` that wraps the slotted content */ classSlot?: string | undefined;
-        /** array of `TabContent` elements */ content: TabsContent[];
-        /** fades the content in, defaults to empty object, set to false to remove */ transition?: false | FadeParams | undefined;
+        /** class of `div` that wraps the slotted content */ classContent?: string | undefined;
+        /** array of tabs */ tabs: TabsTab[];
+        /** index of active tab, defaults to 0 */ activeIndex?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        title: {
+            item: TabsTab<any>;
+            index: any;
+        };
+        default: {
+            activeTab: TabsTab<any>;
+        };
+    };
 };
 export type TabsProps = typeof __propDef.props;
 export type TabsEvents = typeof __propDef.events;
@@ -33,38 +39,73 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and slotted content.
+ * Displays tabs and the active tab's content.
  *
  * @props
  *
- * - `classButtonActive` - class of the active tab's `button`
- * - `classButtonInactive` - class of all the inactive tabs' `button`s
- * - `classButton` - `button` class
+ * - `activeIndex` - index of active tab, defaults to 0
+ * - `classContent` - class of `div` that wraps the slotted content
  * - `classHeader` - class of the `div` that wraps the `button`s
  * - `classNoscript` - `noscript` class
- * - `classSlot` - class of `div` that wraps the slotted content
+ * - `classTitleActive` - class of the active tab's `button`
+ * - `classTitleInactive` - class of all the inactive tabs' `button`s
+ * - `classTitle` - class of all title `button`s
  * - `class`
- * - `content` - array of `TabContent` elements
  * - `id`
- * - `transition` - fades the content in, defaults to empty object, set to false to remove
+ * - `tabs` - array of tabs
  *
  * @slots
  *
- * Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+ * | name      | purpose               | default value        | slot props      |
+ * | --------- | --------------------- | -------------------- | --------------- |
+ * | `default` | active item's content | `activeItem.content` | `activeItem`    |
+ * | `title`   | title of each tab     | `item.title`         | `item`, `index` |
  *
  * @example
  *
  * ```svelte
  * <script>
  *    import { Tabs } from "drab";
- * import { FullscreenButton } from "drab";
+ * import FullscreenButton from "./FullscreenButton.svelte";
  * </script>
  *
- * <Tabs content={[
- * 	{ name: "String", slot: "Slot" },
- * 	{ name: "Component", slot: FullscreenButton },
+ * <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: "Generated indexes" },
+ * 	{
+ * 		title: "Tab",
+ * 		content: "A tab with a component",
+ * 		data: { component: FullscreenButton },
+ * 	},
+ * ]}
+ * let:activeTab
+ * >
+ * <svelte:fragment slot="title" let:item let:index>
+ * 	{item.title}
+ * 	{index + 1}
+ * </svelte:fragment>
+ * <div>{activeTab.content}</div>
+ * {#if activeTab.data?.component}
+ * 	<svelte:component class="btn" this={activeTab.data.component} />
+ * {/if}
+ * </Tabs>
  * ```
  */
 export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {

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,5 +11,7 @@ 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 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, YouTube, };
+export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Tabs, type TabsTab, YouTube, };

package/dist/index.js

@@ -7,5 +7,6 @@ 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 Tabs from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };
+export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Tabs, YouTube, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.3.0",
+	"version": "2.4.1",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -15,6 +15,7 @@
 		"Fullscreen",
 		"Popover",
 		"Share",
+		"Tabs",
 		"YouTube"
 	],
 	"homepage": "https://drab.robino.dev",
@@ -35,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": {
 		".": {