drab 2.5.0 → 2.6.1

package/dist/components/Tabs.svelte

@@ -7,23 +7,23 @@ Displays tabs and the active tab's content.
 
 @props
 
-- `activeIndex` - index of active tab, defaults to 0
-- `classContent` - class of `div` that wraps the slotted content
-- `classHeader` - class of the `div` that wraps the `button`s
 - `classNoscript` - `noscript` class
-- `classTitleActive` - class of the active tab's `button`
-- `classTitleInactive` - class of all the inactive tabs' `button`s
-- `classTitle` - class of all title `button`s
+- `classTabActive` - class of the active tab's `button`
+- `classTabInactive` - class of all the inactive tabs' `button`s
+- `classTabList` - class of the `div` that wraps the `button`s
+- `classTabPanel` - class of `div` that wraps the slotted content
+- `classTab` - class of all title `button`s
 - `class` 
 - `id` 
+- `selectedIndex` - index of selected tab, defaults to 0
 - `tabs` - array of tabs
 
 @slots
 
-| name      | purpose               | default value        | slot props      |
-| --------- | --------------------- | -------------------- | --------------- |
-| `default` | active item's content | `activeItem.content` | `activeItem`    |
-| `title`   | title of each tab     | `item.title`         | `item`, `index` |
+| name      | purpose               | default value      | slot props      |
+| --------- | --------------------- | ------------------ | --------------- |
+| `default` | active item's content | `activeItem.panel` | `activeItem`    |
+| `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
 
 @example
 
@@ -34,40 +34,41 @@ Displays tabs and the active tab's content.
 </script>
 
 <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"
+	class="mb-4"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
+	classTab="btn btn-s rounded-sm p-1"
+	classTabActive="bg-white text-neutral-950"
+	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabPanel="py-2"
 	tabs={[
-		{ title: "Tab 1", content: "Content 1" },
-		{ title: "Tab 2", content: "Content 2" },
+		{ tab: "Tab", panel: "Content" },
+		{ tab: "Another Tab", panel: "Some more content" },
 	]}
 />
 
 <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"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
+	classTab="btn btn-s rounded-sm p-1"
+	classTabActive="bg-white text-neutral-950"
+	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabPanel="py-2"
 	tabs={[
-		{ title: "Tab", content: "Generated indexes" },
+		{ tab: "Tab", panel: "Generated indexes" },
 		{
-			title: "Tab",
-			content: "A tab with a component",
+			tab: "Tab",
+			panel: "A tab with a component",
 			data: { component: FullscreenButton },
 		},
 	]}
-	let:activeTab
+	let:selectedTab
 >
-	<svelte:fragment slot="title" let:item let:index>
-		{item.title}
+	<svelte:fragment slot="tab" let:item let:index>
+		{item.tab}
 		{index + 1}
 	</svelte:fragment>
-	<div>{activeTab.content}</div>
-	{#if activeTab.data?.component}
-		<svelte:component this={activeTab.data.component} class="btn" />
+	<div class="mb-2">{selectedTab.panel}</div>
+	{#if selectedTab.data?.component}
+		<svelte:component this={selectedTab.data.component} class="btn" />
 	{/if}
 </Tabs>
 ```
@@ -80,36 +81,40 @@ import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
-export let classHeader = "";
-export let classTitle = "";
-export let classTitleActive = "";
-export let classTitleInactive = "";
+export let classTabList = "";
+export let classTab = "";
+export let classTabActive = "";
+export let classTabInactive = "";
 export let classNoscript = "";
-export let classContent = "";
+export let classTabPanel = "";
 export let tabs;
-export let activeIndex = 0;
+export let selectedIndex = 0;
 let clientJs = false;
 $:
-  activeTab = tabs[activeIndex];
+  selectedTab = tabs[selectedIndex];
 onMount(() => clientJs = true);
 </script>
 
 <div class={className} {id}>
-	<div class={classHeader}>
+	<div class={classTabList} role="tablist">
 		{#each tabs as item, index}
 			<button
+				role="tab"
+				tabindex={index === selectedIndex ? 0 : -1}
+				aria-selected={index === selectedIndex}
+				aria-controls="tabpanel"
 				disabled={!clientJs}
-				class="{classTitle} {activeIndex === index
-					? classTitleActive
-					: ''} {activeIndex !== index ? classTitleInactive : ''}"
-				on:click={() => (activeIndex = index)}
+				class="{classTab} {selectedIndex === index
+					? classTabActive
+					: ''} {selectedIndex !== index ? classTabInactive : ''}"
+				on:click={() => (selectedIndex = index)}
 			>
-				<slot name="title" {item} {index}>{item.title}</slot>
+				<slot name="tab" {item} {index}>{item.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classContent}>
-		<slot {activeTab}>{activeTab.content}</slot>
+	<div class={classTabPanel} role="tabpanel" id="tabpanel">
+		<slot {selectedTab}>{selectedTab.panel}</slot>
 	</div>
 	<noscript>
 		<div class={classNoscript}>{messageNoScript}</div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 export interface TabsTab<T = any> {
     /** tab title, displayed in `button` element */
-    title?: string;
+    tab?: string;
     /** slotted content, displayed once tab is clicked */
-    content?: string;
+    panel?: string;
     /** any data to pass back to the parent */
     data?: T;
 }
@@ -11,25 +11,25 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** class of the `div` that wraps the `button`s */ classHeader?: string | undefined;
-        /** class of all title `button`s */ classTitle?: string | undefined;
-        /** class of the active tab's `button` */ classTitleActive?: string | undefined;
-        /** class of all the inactive tabs' `button`s */ classTitleInactive?: string | undefined;
+        /** class of the `div` that wraps the `button`s */ classTabList?: string | undefined;
+        /** class of all title `button`s */ classTab?: string | undefined;
+        /** class of the active tab's `button` */ classTabActive?: string | undefined;
+        /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
-        /** class of `div` that wraps the slotted content */ classContent?: string | undefined;
+        /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
         /** array of tabs */ tabs: TabsTab[];
-        /** index of active tab, defaults to 0 */ activeIndex?: number | undefined;
+        /** index of selected tab, defaults to 0 */ selectedIndex?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        title: {
+        tab: {
             item: TabsTab<any>;
             index: any;
         };
         default: {
-            activeTab: TabsTab<any>;
+            selectedTab: TabsTab<any>;
         };
     };
 };
@@ -43,23 +43,23 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `activeIndex` - index of active tab, defaults to 0
- * - `classContent` - class of `div` that wraps the slotted content
- * - `classHeader` - class of the `div` that wraps the `button`s
  * - `classNoscript` - `noscript` class
- * - `classTitleActive` - class of the active tab's `button`
- * - `classTitleInactive` - class of all the inactive tabs' `button`s
- * - `classTitle` - class of all title `button`s
+ * - `classTabActive` - class of the active tab's `button`
+ * - `classTabInactive` - class of all the inactive tabs' `button`s
+ * - `classTabList` - class of the `div` that wraps the `button`s
+ * - `classTabPanel` - class of `div` that wraps the slotted content
+ * - `classTab` - class of all title `button`s
  * - `class`
  * - `id`
+ * - `selectedIndex` - index of selected tab, defaults to 0
  * - `tabs` - array of tabs
  *
  * @slots
  *
- * | name      | purpose               | default value        | slot props      |
- * | --------- | --------------------- | -------------------- | --------------- |
- * | `default` | active item's content | `activeItem.content` | `activeItem`    |
- * | `title`   | title of each tab     | `item.title`         | `item`, `index` |
+ * | name      | purpose               | default value      | slot props      |
+ * | --------- | --------------------- | ------------------ | --------------- |
+ * | `default` | active item's content | `activeItem.panel` | `activeItem`    |
+ * | `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
  *
  * @example
  *
@@ -70,40 +70,41 @@ export type TabsSlots = typeof __propDef.slots;
  * </script>
  *
  * <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"
+ * class="mb-4"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
+ * classTab="btn btn-s rounded-sm p-1"
+ * classTabActive="bg-white text-neutral-950"
+ * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabPanel="py-2"
  * tabs={[
- * 	{ title: "Tab 1", content: "Content 1" },
- * 	{ title: "Tab 2", content: "Content 2" },
+ * 	{ tab: "Tab", panel: "Content" },
+ * 	{ tab: "Another Tab", panel: "Some more content" },
  * ]}
  * />
  *
  * <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"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
+ * classTab="btn btn-s rounded-sm p-1"
+ * classTabActive="bg-white text-neutral-950"
+ * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabPanel="py-2"
  * tabs={[
- * 	{ title: "Tab", content: "Generated indexes" },
+ * 	{ tab: "Tab", panel: "Generated indexes" },
  * 	{
- * 		title: "Tab",
- * 		content: "A tab with a component",
+ * 		tab: "Tab",
+ * 		panel: "A tab with a component",
  * 		data: { component: FullscreenButton },
  * 	},
  * ]}
- * let:activeTab
+ * let:selectedTab
  * >
- * <svelte:fragment slot="title" let:item let:index>
- * 	{item.title}
+ * <svelte:fragment slot="tab" let:item let:index>
+ * 	{item.tab}
  * 	{index + 1}
  * </svelte:fragment>
- * <div>{activeTab.content}</div>
- * {#if activeTab.data?.component}
- * 	<svelte:component this={activeTab.data.component} class="btn" />
+ * <div class="mb-2">{selectedTab.panel}</div>
+ * {#if selectedTab.data?.component}
+ * 	<svelte:component this={selectedTab.data.component} class="btn" />
  * {/if}
  * </Tabs>
  * ```

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import Accordion from "./components/Accordion.svelte";
 import type { AccordionItem } from "./components/Accordion.svelte";
+import Breakpoint from "./components/Breakpoint.svelte";
 import Chord from "./components/Chord.svelte";
 import type { ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -15,4 +16,4 @@ import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import type { TabsTab } from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };
+export { Accordion, type AccordionItem, Breakpoint, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };

package/dist/index.js

@@ -1,4 +1,5 @@
 import Accordion from "./components/Accordion.svelte";
+import Breakpoint from "./components/Breakpoint.svelte";
 import Chord from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
@@ -10,4 +11,4 @@ import ShareButton from "./components/ShareButton.svelte";
 import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
+export { Accordion, Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };

package/dist/util/delay.d.ts

@@ -0,0 +1 @@
+export declare const delay = 800;

package/dist/util/delay.js

@@ -0,0 +1 @@
+export const delay = 800;

package/dist/util/transition.d.ts

@@ -1 +1 @@
-export declare const duration = 200;
+export declare const duration = 150;

package/dist/util/transition.js

@@ -1 +1 @@
-export const duration = 200;
+export const duration = 150;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.5.0",
+	"version": "2.6.1",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -27,7 +27,7 @@
 	"repository": "github:rossrobino/drab",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "npm run doc && vite build && npm run package",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
@@ -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 src/scripts/buildDocs.js"
+		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
 	},
 	"exports": {
 		".": {