drab 2.1.1 → 2.2.1

package/dist/components/Accordion.svelte

@@ -0,0 +1,170 @@
+<!--
+@component
+
+### Accordion
+
+Displays a list of `details` elements.
+
+@props
+
+- `autoClose` - if `true`, other items close when a new one is opened
+- `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
+- `class` 
+- `content` - array of `AccordionContent` elements
+- `icon` 
+- `id` 
+- `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`.
+
+@example
+
+```svelte
+<script>
+    import { Accordion } from "drab";
+</script>
+
+<Accordion
+	content={[
+		{ summary: "Is it accessible?", slot: "Yes." },
+		{
+			summary: "Is it styled?",
+			slot: "Nope, style with global styles.",
+		},
+		{
+			summary: "Is it animated?",
+			slot: "Yes, with the transition prop.",
+		},
+		{ summary: "Does it work without Javascript?", slot: "Yes." },
+	]}
+/>
+```
+-->
+
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import { slide } from "svelte/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+let className = "";
+export { className as class };
+export let id = "";
+export let content;
+export let icon = "";
+export let classDetails = "";
+export let classSummary = "";
+export let classSlot = "";
+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;
+  if (autoClose) {
+    for (let j = 0; j < content.length; j++) {
+      const item = content[j];
+      if (j !== i)
+        item.open = false;
+    }
+  }
+};
+onMount(() => {
+  clientJs = true;
+  if (prefersReducedMotion())
+    transition = false;
+});
+</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>
+				<!-- svelte-ignore a11y-no-redundant-roles -->
+				<summary
+					role="button"
+					tabindex="0"
+					class={classSummary}
+					on:click={(e) => {
+						e.preventDefault();
+						toggleOpen(i);
+					}}
+					on:keydown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							toggleOpen(i);
+						}
+					}}
+				>
+					{#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}
+				</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>
+				{/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}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	.db-rotate-180 {
+		transform: rotate(180deg);
+	}
+	.db-transition {
+		transition-property: transform;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 150ms;
+	}
+</style>

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

@@ -0,0 +1,86 @@
+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 */
+    open?: boolean;
+}
+import { type SlideParams } from "svelte/transition";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** array of `AccordionContent` elements */ content: AccordionContent[];
+        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;
+        /** 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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+/**
+ * ### Accordion
+ *
+ * Displays a list of `details` elements.
+ *
+ * @props
+ *
+ * - `autoClose` - if `true`, other items close when a new one is opened
+ * - `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
+ * - `class`
+ * - `content` - array of `AccordionContent` elements
+ * - `icon`
+ * - `id`
+ * - `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`.
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { Accordion } from "drab";
+ * </script>
+ *
+ * <Accordion
+ * content={[
+ * 	{ summary: "Is it accessible?", slot: "Yes." },
+ * 	{
+ * 		summary: "Is it styled?",
+ * 		slot: "Nope, style with global styles.",
+ * 	},
+ * 	{
+ * 		summary: "Is it animated?",
+ * 		slot: "Yes, with the transition prop.",
+ * 	},
+ * 	{ summary: "Does it work without Javascript?", slot: "Yes." },
+ * ]}
+ * />
+ * ```
+ */
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

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>
@@ -91,6 +91,7 @@ onMount(() => {
 	style:opacity={display ? "100%" : "0%"}
 	style:top="{coordinates.y}px"
 	style:left="{coordinates.x}px"
+	inert={display ? false : true}
 >
 	<slot>Context Menu</slot>
 </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

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
 /**
  * - `EditorContentElement` to pass into the `contentElements` array prop
  * - `contentElements` prop creates a list of button controls to insert
@@ -11,17 +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;
 }
-import { type ComponentType } from "svelte";
 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
@@ -130,6 +130,7 @@ onMount(() => {
 		class:db-type-hover={clientEventType === "hover"}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
+		inert={clientEventType === "hover" || display ? false : true}
 	>
 		<slot>Popover</slot>
 	</div>

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,3 +1,5 @@
+import Accordion from "./components/Accordion.svelte";
+import type { AccordionContent } from "./components/Accordion.svelte";
 import Chord from "./components/Chord.svelte";
 import type { ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -10,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 { Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };
+export { Accordion, type AccordionContent, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };

package/dist/index.js

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

package/dist/util/accessibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Checks to see if the user prefers reduced motion
+ *
+ * @returns `true` if the user prefers reduced motion
+ */
+export declare const prefersReducedMotion: () => boolean;

package/dist/util/accessibility.js

@@ -0,0 +1,11 @@
+/**
+ * Checks to see if the user prefers reduced motion
+ *
+ * @returns `true` if the user prefers reduced motion
+ */
+export const prefersReducedMotion = () => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mediaQuery.matches)
+        return true;
+    return false;
+};

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "drab",
-	"version": "2.1.1",
+	"version": "2.2.1",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
 		"Svelte",
 		"SvelteKit",
+		"Accordion",
 		"Chord",
 		"ContextMenu",
 		"Copy",
@@ -34,7 +35,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
 		"pub": "npm publish --access public",
-		"doc": "node src/lib/util/buildDocs.js"
+		"doc": "node scripts/buildDocs.js"
 	},
 	"exports": {
 		".": {

package/dist/util/buildDocs.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/util/buildDocs.js

@@ -1,3 +0,0 @@
-import { documentPropsDir } from "./documentProps.js";
-
-documentPropsDir("./src/lib/components");

package/dist/util/documentProps.d.ts

@@ -1,2 +0,0 @@
-export function documentPropsDir(dir: string): Promise<void>;
-export function documentProps(path: string): Promise<void>;

package/dist/util/documentProps.js

@@ -1,86 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-/**
- * Runs `documentProps` over a given directory
- *
- * @param {string} dir path to directory
- */
-export const documentPropsDir = async (dir) => {
-	const files = await fs.readdir(dir);
-	for (const file of files) {
-		if (path.extname(file) === ".svelte") {
-			documentProps(path.join(dir, file));
-		}
-	}
-};
-
-/**
- * - Finds "@props" in a component
- * - If found, overwrites the docs with the generated docs
- *
- * @param {string} path path to component
- */
-export const documentProps = async (path) => {
-	const code = await fs.readFile(path, "utf-8");
-	const lines = code.split("\n");
-	const docs = getPropDocs(lines);
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i].trim();
-		if (line.startsWith("@props")) {
-			for (let j = i + 1; j < lines.length; j++) {
-				// for the following lines...
-				const checkLine = lines[j].trim();
-				if (
-					checkLine.startsWith("@") ||
-					checkLine.startsWith("-->") ||
-					checkLine.startsWith("#") ||
-					checkLine.startsWith("|")
-				) {
-					// delete current / add new
-					lines.splice(i + 1, j - i - 1, docs);
-					// join back together
-					const documented = lines.join("\n");
-					await fs.writeFile(path, documented);
-					console.log("Documented " + path);
-					break;
-				}
-			}
-			break;
-		}
-		if (i === lines.length - 1) {
-			// last line
-			console.log("No `@props` found for " + path);
-		}
-	}
-};
-
-/**
- * - Finds the props and JSDoc comments
- *
- * @param {string[]} lines lines of code
- */
-const getPropDocs = (lines) => {
-	const docs = ["\n"];
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i].trim();
-		const isClass = line === "export { className as class };";
-		if (line.startsWith("export let ") || isClass) {
-			let propName = line.split(" ")[2];
-			if (isClass) {
-				propName = "class";
-			}
-			if (propName.endsWith(":")) propName = propName.slice(0, -1);
-			const previousLine = lines[i - 1].trim();
-			let jsDoc = "";
-			if (previousLine.endsWith("*/")) {
-				if (previousLine.startsWith("/**")) {
-					jsDoc = "- " + previousLine.slice(3, -2).trim();
-				}
-			}
-			docs.push(`- \`${propName}\` ${jsDoc}\n`);
-		}
-	}
-	docs.sort();
-	return docs.join("");
-};