drab 2.2.0 → 2.3.0

package/dist/components/Accordion.svelte

@@ -7,20 +7,25 @@ Displays a list of `details` elements.
 
 @props
 
-- `autoClose` - if true, other items close when a new one is opened
+- `autoClose` - if `true`, other items close when a new one is opened
+- `classContent` - class of all the `div`s that wrap the `content` slot
 - `classDetails` - class of the `div` around each `details` element
-- `classIcon` - class of the `div` around the icon
-- `classSlot` - class of all the `slot` elements
-- `classSummary` - class of all the `summary` elements
+- `classHeader` - class of all the `summary` elements
+- `classIcon` - class of the `div` that wrap the icon if displayed
+- `classSummary` - class of all the `div`s that wrap the `summary` slot
 - `class` 
-- `content` - array of `AccordionContent` elements
 - `icon` 
 - `id` 
+- `items` - array of `AccordionItem` elements
 - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
 
 @slots
 
-Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
+| name       | purpose                       | default value  |
+| ---------- | ----------------------------- | -------------- |
+| `summary`  | summary element               | `item.summary` |
+| `icon`     | icon element                  | `icon` prop    |
+| `content`  | content of the accordion item | `item.content` |
 
 @example
 
@@ -29,20 +34,51 @@ Pass components into the `content` prop if needed. `AccordionContent` has `summa
     import { Accordion } from "drab";
 </script>
 
-<Accordion
-	content={[
-		{ summary: "Is it accessible?", slot: "Yes." },
+<Accordion 
+	items={[
+		{ summary: "Is it accessible?", content: "Yes." },
 		{
 			summary: "Is it styled?",
-			slot: "Nope, style with global styles.",
+			content: "Nope, style with global styles.",
 		},
 		{
 			summary: "Is it animated?",
-			slot: "Yes, with the transition prop.",
+			content: "Yes, with the transition prop.",
 		},
-		{ summary: "Does it work without Javascript?", slot: "Yes." },
+		{ 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",
+			content: "Rendered only on this item.",
+			data: { component: FullscreenButton },
+		},
+		{ summary: "Summary", content: "Some other content" },
+	]}
+>
+	<div slot="content" let:item>
+		{item.content}
+		{#if item.data?.component}
+			<svelte:component this={item.data.component} />
+		{/if}
+	</div>
+</Accordion>
 ```
 -->
 
@@ -54,28 +90,21 @@ import { prefersReducedMotion } from "../util/accessibility";
 let className = "";
 export { className as class };
 export let id = "";
-export let content;
+export let items;
 export let icon = "";
 export let classDetails = "";
+export let classHeader = "";
 export let classSummary = "";
-export let classSlot = "";
+export let classContent = "";
 export let classIcon = "";
 export let transition = {};
 export let autoClose = true;
 let clientJs = false;
-for (const item of content) {
-  if (!item.classContentDetails)
-    item.classContentDetails = "";
-  if (!item.classContentSlot)
-    item.classContentSlot = "";
-  if (!item.classContentSummary)
-    item.classContentSummary = "";
-}
 const toggleOpen = (i) => {
-  content[i].open = !content[i].open;
+  items[i].open = !items[i].open;
   if (autoClose) {
-    for (let j = 0; j < content.length; j++) {
-      const item = content[j];
+    for (let j = 0; j < items.length; j++) {
+      const item = items[j];
       if (j !== i)
         item.open = false;
     }
@@ -88,64 +117,51 @@ onMount(() => {
 });
 </script>
 
-<div class="transition"></div>
-
 <div class={className} {id}>
-	{#each content as { classContentDetails, summary, classContentSummary, slot, classContentSlot, open }, i}
-		<div class="{classDetails} {classContentDetails}">
-			<details bind:open>
+	{#each items as item, index}
+		<div class={classDetails}>
+			<details bind:open={item.open}>
 				<!-- svelte-ignore a11y-no-redundant-roles -->
 				<summary
 					role="button"
 					tabindex="0"
-					class={classSummary}
-					on:click={(e) => {
-						e.preventDefault();
-						toggleOpen(i);
-					}}
+					class={classHeader}
+					on:click|preventDefault={() => toggleOpen(index)}
 					on:keydown={(e) => {
 						if (e.key === "Enter") {
 							e.preventDefault();
-							toggleOpen(i);
+							toggleOpen(index);
 						}
 					}}
 				>
-					{#if typeof summary !== "string"}
-						<svelte:component this={summary} class={classContentSummary} />
-					{:else}
-						<span class={classContentSummary}>{summary}</span>
-					{/if}
-					{#if icon}
-						<div
-							class={classIcon}
-							class:db-rotate-180={open}
-							class:db-transition={transition}
-						>
-							{#if typeof icon !== "string"}
-								<svelte:component this={icon} />
-							{:else}
-								<span>{icon}</span>
-							{/if}
-						</div>
-					{/if}
+					<div class={classSummary}>
+						<slot name="summary" {item} {index}>{item.summary}</slot>
+					</div>
+					<slot name="icon" {item} {index}>
+						{#if icon}
+							<div
+								class={classIcon}
+								class:d-rotate-180={item.open}
+								class:d-transition={transition}
+							>
+								{#if typeof icon !== "string"}
+									<svelte:component this={icon} />
+								{:else}
+									<span>{icon}</span>
+								{/if}
+							</div>
+						{/if}
+					</slot>
 				</summary>
 				{#if !clientJs || !transition}
-					<div class={classSlot}>
-						{#if typeof slot !== "string"}
-							<svelte:component this={slot} class={classContentSlot} />
-						{:else}
-							<div class={classContentSlot}>{slot}</div>
-						{/if}
+					<div class={classContent}>
+						<slot name="content" {item} {index}>{item.content}</slot>
 					</div>
 				{/if}
 			</details>
-			{#if clientJs && open && transition}
-				<div transition:slide={transition} class={classSlot}>
-					{#if typeof slot !== "string"}
-						<svelte:component this={slot} class={classContentSlot} />
-					{:else}
-						<div class={classContentSlot}>{slot}</div>
-					{/if}
+			{#if clientJs && item.open && transition}
+				<div class={classContent} transition:slide={transition}>
+					<slot name="content" {item} {index}>{item.content}</slot>
 				</div>
 			{/if}
 		</div>
@@ -153,10 +169,16 @@ onMount(() => {
 </div>
 
 <style>
-	.db-rotate-180 {
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	.d-rotate-180 {
 		transform: rotate(180deg);
 	}
-	.db-transition {
+	.d-transition {
 		transition-property: transform;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 		transition-duration: 150ms;

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

@@ -1,37 +1,48 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from "svelte";
-export interface AccordionContent {
-    /** `details` element class */
-    classContentDetails?: string;
-    /** content of the `summary` element */
-    summary: string | ComponentType;
-    /** `summary` element class */
-    classContentSummary?: string;
-    /** content of the `slot` */
-    slot: string | ComponentType;
-    /** `slot` element class */
-    classContentSlot?: string;
-    /** controls whether the slotted content is displayed */
+/** use `data` to pass anything back to the parent */
+export interface AccordionItem<T = any> {
+    /** text summary of the item */
+    summary?: string;
+    /** text content of the item */
+    content?: string;
+    /** controls whether the content is displayed */
     open?: boolean;
+    /** any data to pass back */
+    data?: T;
 }
+import { type ComponentType } from "svelte";
 import { type SlideParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** array of `AccordionContent` elements */ content: AccordionContent[];
+        /** array of `AccordionItem` elements */ items: AccordionItem[];
         icon?: string | ComponentType | undefined;
         /** class of the `div` around each `details` element */ classDetails?: string | undefined;
-        /** class of all the `summary` elements */ classSummary?: string | undefined;
-        /** class of all the `slot` elements */ classSlot?: string | undefined;
-        /** class of the `div` around the icon */ classIcon?: string | undefined;
+        /** class of all the `summary` elements */ classHeader?: string | undefined;
+        /** 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;
-        /** if true, other items close when a new one is opened */ autoClose?: boolean | undefined;
+        /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        summary: {
+            item: AccordionItem<any>;
+            index: any;
+        };
+        icon: {
+            item: AccordionItem<any>;
+            index: any;
+        };
+        content: {
+            item: AccordionItem<any>;
+            index: any;
+        };
+    };
 };
 export type AccordionProps = typeof __propDef.props;
 export type AccordionEvents = typeof __propDef.events;
@@ -43,20 +54,25 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `autoClose` - if true, other items close when a new one is opened
+ * - `autoClose` - if `true`, other items close when a new one is opened
+ * - `classContent` - class of all the `div`s that wrap the `content` slot
  * - `classDetails` - class of the `div` around each `details` element
- * - `classIcon` - class of the `div` around the icon
- * - `classSlot` - class of all the `slot` elements
- * - `classSummary` - class of all the `summary` elements
+ * - `classHeader` - class of all the `summary` elements
+ * - `classIcon` - class of the `div` that wrap the icon if displayed
+ * - `classSummary` - class of all the `div`s that wrap the `summary` slot
  * - `class`
- * - `content` - array of `AccordionContent` elements
  * - `icon`
  * - `id`
+ * - `items` - array of `AccordionItem` elements
  * - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
  *
  * @slots
  *
- * Pass components into the `content` prop if needed. `AccordionContent` has `summary` and `slot` attributes of type `string | ComponentType`.
+ * | name       | purpose                       | default value  |
+ * | ---------- | ----------------------------- | -------------- |
+ * | `summary`  | summary element               | `item.summary` |
+ * | `icon`     | icon element                  | `icon` prop    |
+ * | `content`  | content of the accordion item | `item.content` |
  *
  * @example
  *
@@ -66,19 +82,50 @@ export type AccordionSlots = typeof __propDef.slots;
  * </script>
  *
  * <Accordion
- * content={[
- * 	{ summary: "Is it accessible?", slot: "Yes." },
+ * items={[
+ * 	{ summary: "Is it accessible?", content: "Yes." },
  * 	{
  * 		summary: "Is it styled?",
- * 		slot: "Nope, style with global styles.",
+ * 		content: "Nope, style with global styles.",
  * 	},
  * 	{
  * 		summary: "Is it animated?",
- * 		slot: "Yes, with the transition prop.",
+ * 		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",
+ * 		content: "Rendered only on this item.",
+ * 		data: { component: FullscreenButton },
  * 	},
- * 	{ summary: "Does it work without Javascript?", slot: "Yes." },
+ * 	{ summary: "Summary", content: "Some other content" },
  * ]}
- * />
+ * >
+ * <div slot="content" let:item>
+ * 	{item.content}
+ * 	{#if item.data?.component}
+ * 		<svelte:component this={item.data.component} />
+ * 	{/if}
+ * </div>
+ * </Accordion>
  * ```
  */
 export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {

package/dist/components/ContextMenu.svelte

@@ -7,7 +7,7 @@ Displays when the parent element is right clicked.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `display` - controls `display` css property
 - `id` 
@@ -25,14 +25,14 @@ Displays when the parent element is right clicked.
     import { ContextMenu } from "drab";
 </script>
 
-<div class="p-12 border border-dashed flex justify-center">
+<div>
 	<div>Right click here</div>
-	<ContextMenu class="rounded shadow p-2 bg-white">
-		<div class="flex flex-col gap-2 not-prose w-48">
-			<div class="font-bold">Context Menu</div>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
+	<ContextMenu>
+		<div>
+			<div>Context Menu</div>
+			<button>Button</button>
+			<button>Button</button>
+			<button>Button</button>
 		</div>
 	</ContextMenu>
 </div>

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** controls `display` css property */ display?: boolean | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,7 +23,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `display` - controls `display` css property
  * - `id`
@@ -41,14 +41,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *    import { ContextMenu } from "drab";
  * </script>
  *
- * <div class="p-12 border border-dashed flex justify-center">
+ * <div>
  * <div>Right click here</div>
- * <ContextMenu class="rounded shadow p-2 bg-white">
- * 	<div class="flex flex-col gap-2 not-prose w-48">
- * 		<div class="font-bold">Context Menu</div>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
+ * <ContextMenu>
+ * 	<div>
+ * 		<div>Context Menu</div>
+ * 		<button>Button</button>
+ * 		<button>Button</button>
+ * 		<button>Button</button>
  * 	</div>
  * </ContextMenu>
  * </div>

package/dist/components/CopyButton.svelte

@@ -7,7 +7,7 @@ Uses the navigator api to copy text to the clipboard.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `id` 
 - `text` - text to copy

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         title?: string | undefined;
         /** text to copy */ text: string;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,7 +25,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
  * - `text` - text to copy

package/dist/components/DataTable.svelte

@@ -8,24 +8,24 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
-- `classButton` - button class
-- `classFooter` - footer class
-- `classNoscript` - noscript class
+- `classButton` - `button` class
+- `classFooter` - `footer` class
+- `classNoscript` - `noscript` class
 - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
 - `classPageNumber` - class of `div` wrapping page numbers
-- `classTable` - table class
-- `classTbodyTr` - tbody tr class
-- `classTbody` - tbody class
-- `classTdSorted` - currently sorted td
-- `classTd` - td class
-- `classThSorted` - currently sorted th
-- `classTh` - th class
-- `classTheadTr` - thead tr class
-- `classThead` - thead class
+- `classTable` - `table` class
+- `classTbodyTr` - `tbody tr` class
+- `classTbody` - `tbody` class
+- `classTdSorted` - currently sorted `td`
+- `classTd` - `td` class
+- `classThSorted` - currently sorted `th`
+- `classTh` - `th` class
+- `classTheadTr` - `thead tr` class
+- `classThead` - `thead` 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
+- `idTable` - `table` id
 - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by--defaults to first column
 

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

@@ -8,23 +8,23 @@ declare const __propDef: {
         /** table columns, in order */ columns?: 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;
-        /** thead class */ classThead?: string | undefined;
-        /** tbody class */ classTbody?: string | undefined;
-        /** thead tr class */ classTheadTr?: string | undefined;
-        /** tbody tr class */ classTbodyTr?: string | undefined;
-        /** th class */ classTh?: string | undefined;
-        /** td class */ classTd?: string | undefined;
-        /** currently sorted th */ classThSorted?: string | undefined;
-        /** currently sorted td */ classTdSorted?: string | undefined;
-        /** button class */ classButton?: string | undefined;
-        /** footer class */ classFooter?: string | undefined;
+        /** `table` class */ classTable?: string | undefined;
+        /** `table` id */ idTable?: string | undefined;
+        /** `thead` class */ classThead?: string | undefined;
+        /** `tbody` class */ classTbody?: string | undefined;
+        /** `thead tr` class */ classTheadTr?: string | undefined;
+        /** `tbody tr` class */ classTbodyTr?: string | undefined;
+        /** `th` class */ classTh?: string | undefined;
+        /** `td` class */ classTd?: string | undefined;
+        /** currently sorted `th` */ classThSorted?: string | undefined;
+        /** currently sorted `td` */ classTdSorted?: string | undefined;
+        /** `button` class */ classButton?: string | undefined;
+        /** `footer` class */ classFooter?: string | undefined;
         /** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
         /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
         /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -45,24 +45,24 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
- * - `classButton` - button class
- * - `classFooter` - footer class
- * - `classNoscript` - noscript class
+ * - `classButton` - `button` class
+ * - `classFooter` - `footer` class
+ * - `classNoscript` - `noscript` class
  * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
  * - `classPageNumber` - class of `div` wrapping page numbers
- * - `classTable` - table class
- * - `classTbodyTr` - tbody tr class
- * - `classTbody` - tbody class
- * - `classTdSorted` - currently sorted td
- * - `classTd` - td class
- * - `classThSorted` - currently sorted th
- * - `classTh` - th class
- * - `classTheadTr` - thead tr class
- * - `classThead` - thead class
+ * - `classTable` - `table` class
+ * - `classTbodyTr` - `tbody tr` class
+ * - `classTbody` - `tbody` class
+ * - `classTdSorted` - currently sorted `td`
+ * - `classTd` - `td` class
+ * - `classThSorted` - currently sorted `th`
+ * - `classTh` - `th` class
+ * - `classTheadTr` - `thead tr` class
+ * - `classThead` - `thead` 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
+ * - `idTable` - `table` id
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by--defaults to first column
  *

package/dist/components/Editor.svelte

@@ -9,9 +9,9 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 - `classButton` - `class` of all the `button` elements
 - `classControls` - `class` of the `div` that wraps the controls
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `classTextarea` - `class` of the `textarea` element
-- `contentElements` - an array of content elements for the controls
+- `contentElements` - an array of `EditorContentElement`s for the controls
 - `idControls` - `id` of the `div` that wraps the controls
 - `idTextarea` - `id` of the `textarea` element
 - `keyPairs` - keys that will auto-close if typed, value is their closing character

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

@@ -12,16 +12,16 @@ export interface EditorContentElement {
     text: string;
     /** controls how the text is added */
     display: "inline" | "block" | "wrap";
-    /** contents of the button */
+    /** contents of the `button` */
     icon: string | ComponentType;
     /** keyboard shortcut */
     key?: string;
-    /** class to apply to the specific button */
+    /** class to apply to the specific `button` */
     class?: string;
 }
 declare const __propDef: {
     props: {
-        /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
+        /** an array of `EditorContentElement`s for the controls */ contentElements?: EditorContentElement[] | undefined;
         /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
         /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
         /** `class` of the `textarea` element */ classTextarea?: string | undefined;
@@ -34,7 +34,7 @@ declare const __propDef: {
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         input: Event;
@@ -55,9 +55,9 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * - `classButton` - `class` of all the `button` elements
  * - `classControls` - `class` of the `div` that wraps the controls
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `classTextarea` - `class` of the `textarea` element
- * - `contentElements` - an array of content elements for the controls
+ * - `contentElements` - an array of `EditorContentElement`s for the controls
  * - `idControls` - `id` of the `div` that wraps the controls
  * - `idTextarea` - `id` of the `textarea` element
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character

package/dist/components/FullscreenButton.svelte

@@ -7,7 +7,7 @@ Make the document or a specific element fullscreen.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
 - `id` 

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: HTMLElement | null | undefined;
         /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,7 +26,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
  * - `id`

package/dist/components/Popover.svelte

@@ -7,12 +7,12 @@ Displays a popover relatively positioned to the button.
 
 @props
 
-- `classButton` - button class
+- `classButton` - `button` class
 - `classPopover` - popover class
 - `class` 
 - `display` - if `eventType="click"`, controls the display
 - `eventType` - controls if hovering or clicking the button displays the popover
-- `idButton` - button id
+- `idButton` - `button` id
 - `idPopover` - popover id
 - `id` 
 - `position` - where the popover is displayed in relation to the button

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

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** button class */ classButton?: string | undefined;
+        /** `button` class */ classButton?: string | undefined;
         /** popover class */ classPopover?: string | undefined;
-        /** button id */ idButton?: string | undefined;
+        /** `button` id */ idButton?: string | undefined;
         /** popover id */ idPopover?: string | undefined;
         /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
         /** where the popover is displayed in relation to the button */ position?: "top" | "bottom" | "left" | "right" | undefined;
@@ -29,12 +29,12 @@ export type PopoverSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classButton` - button class
+ * - `classButton` - `button` class
  * - `classPopover` - popover class
  * - `class`
  * - `display` - if `eventType="click"`, controls the display
  * - `eventType` - controls if hovering or clicking the button displays the popover
- * - `idButton` - button id
+ * - `idButton` - `button` id
  * - `idPopover` - popover id
  * - `id`
  * - `position` - where the popover is displayed in relation to the button

package/dist/components/ShareButton.svelte

@@ -7,11 +7,11 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `id` 
 - `text` - prefixed text in share message
-- `title` - title of share message and button attribute, defaults to end of url
+- `title` - title of share message and `button` attribute, defaults to end of url
 - `url` - url to be shared
 
 @slots

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         id?: string | undefined;
         /** prefixed text in share message */ text?: string | undefined;
         /** url to be shared */ url: string;
-        /** title of share message and button attribute, defaults to end of url */ title?: string | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,11 +26,11 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
  * - `text` - prefixed text in share message
- * - `title` - title of share message and button attribute, defaults to end of url
+ * - `title` - title of share message and `button` attribute, defaults to end of url
  * - `url` - url to be shared
  *
  * @slots

package/dist/components/Tabs.svelte

@@ -0,0 +1,102 @@
+<!--
+@component
+
+### Tabs
+
+Displays tabs and slotted content.
+
+@props
+
+- `classButtonActive` - class of the active tab's `button`
+- `classButtonInactive` - class of all the inactive tabs' `button`s
+- `classButton` - `button` class
+- `classHeader` - class of the `div` that wraps the `button`s
+- `classNoscript` - `noscript` class
+- `classSlot` - class of `div` that wraps the slotted content
+- `class` 
+- `content` - array of `TabContent` elements
+- `id` 
+- `transition` - fades the content in, defaults to empty object, set to false to remove
+
+@slots
+
+Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+
+@example
+
+```svelte
+<script>
+    import { Tabs } from "drab";
+	import { FullscreenButton } from "drab";
+</script>
+
+<Tabs content={[
+		{ name: "String", slot: "Slot" },
+		{ name: "Component", slot: FullscreenButton },
+	]}
+/>
+```
+-->
+
+<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 classNoscript = "";
+export let classSlot = "";
+export let content;
+export let transition = {};
+const fadeTransition = transition ? transition : { duration: 0 };
+let clientJs = false;
+let activeIndex = 0;
+for (const item of content) {
+  if (!item.classContentSlot)
+    item.classContentSlot = "";
+}
+$:
+  activeTab = content[activeIndex];
+onMount(() => clientJs = true);
+</script>
+
+<div class={className} {id}>
+	<div class={classHeader}>
+		{#each content as { name }, i}
+			<button
+				disabled={!clientJs}
+				class="{classButton} {activeIndex === i
+					? classButtonActive
+					: ''} {activeIndex !== i ? classButtonInactive : ''}"
+				on:click={() => (activeIndex = i)}
+			>
+				{name}
+			</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>
+	<noscript>
+		<div class={classNoscript}>
+			{messageNoScript}
+		</div>
+	</noscript>
+</div>

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

@@ -0,0 +1,72 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+export interface TabsContent {
+    /** tab name, displayed in `button` element */
+    name: string;
+    /** slotted content, displayed once tab is clicked */
+    slot: string | ComponentType;
+    /** class of the slotted content */
+    classContentSlot?: string;
+}
+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;
+        /** `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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+/**
+ * ### Tabs
+ *
+ * Displays tabs and slotted content.
+ *
+ * @props
+ *
+ * - `classButtonActive` - class of the active tab's `button`
+ * - `classButtonInactive` - class of all the inactive tabs' `button`s
+ * - `classButton` - `button` class
+ * - `classHeader` - class of the `div` that wraps the `button`s
+ * - `classNoscript` - `noscript` class
+ * - `classSlot` - class of `div` that wraps the slotted content
+ * - `class`
+ * - `content` - array of `TabContent` elements
+ * - `id`
+ * - `transition` - fades the content in, defaults to empty object, set to false to remove
+ *
+ * @slots
+ *
+ * Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { Tabs } from "drab";
+ * import { FullscreenButton } from "drab";
+ * </script>
+ *
+ * <Tabs content={[
+ * 	{ name: "String", slot: "Slot" },
+ * 	{ name: "Component", slot: FullscreenButton },
+ * ]}
+ * />
+ * ```
+ */
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import Accordion from "./components/Accordion.svelte";
-import type { AccordionContent } from "./components/Accordion.svelte";
+import type { AccordionItem } from "./components/Accordion.svelte";
 import Chord from "./components/Chord.svelte";
 import type { ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -12,4 +12,4 @@ import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, type AccordionContent, 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, YouTube, };

package/package.json

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