drab 2.4.0 → 2.4.1

package/dist/components/Accordion.svelte

@@ -31,10 +31,16 @@ Displays a list of `details` elements.
 
 ```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,28 +52,20 @@ 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>
-
-<Accordion
-	items={[
 		{
-			summary: "A Component",
+			summary: "Component",
 			content: "Rendered only on this item.",
 			data: { component: FullscreenButton },
 		},
-		{ summary: "Summary", content: "Some other content" },
 	]}
 >
-	<svelte:fragment 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}
 	</svelte:fragment>
 </Accordion>

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

@@ -77,10 +77,16 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * ```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." },
  * 	{
@@ -92,28 +98,20 @@ 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>
- *
- * <Accordion
- * items={[
  * 	{
- * 		summary: "A Component",
+ * 		summary: "Component",
  * 		content: "Rendered only on this item.",
  * 		data: { component: FullscreenButton },
  * 	},
- * 	{ summary: "Summary", content: "Some other content" },
  * ]}
  * >
- * <svelte:fragment 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}
  * </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

@@ -30,18 +30,29 @@ Displays tabs and the active tab's content.
 ```svelte
 <script>
     import { Tabs } from "drab";
+	import FullscreenButton from "./FullscreenButton.svelte";
 </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 class="btn" this={activeTab.data.component} />
 	{/if}
 </Tabs>
 ```

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

@@ -66,18 +66,29 @@ export type TabsSlots = typeof __propDef.slots;
  * ```svelte
  * <script>
  *    import { Tabs } from "drab";
+ * import FullscreenButton from "./FullscreenButton.svelte";
  * </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 class="btn" this={activeTab.data.component} />
  * {/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.4.0",
+	"version": "2.4.1",
 	"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": {
 		".": {