drab 2.6.0 → 2.6.1

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 = 250;
+export declare const duration = 150;

package/dist/util/transition.js

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

package/package.json

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