drab 2.6.1 → 2.8.0

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

@@ -7,6 +7,7 @@ export interface TabsTab<T = any> {
     /** any data to pass back to the parent */
     data?: T;
 }
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -17,19 +18,21 @@ declare const __propDef: {
         /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
         /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
-        /** array of tabs */ tabs: TabsTab[];
-        /** index of selected tab, defaults to 0 */ selectedIndex?: number | undefined;
+        /** array of `TabsTab` objects */ tabs: TabsTab[];
+        /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
+        /** fades the panel content, set to `false` to remove */ transition?: false | FadeParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         tab: {
-            item: TabsTab<any>;
+            tab: TabsTab<any>;
             index: any;
         };
-        default: {
+        panel: {
             selectedTab: TabsTab<any>;
+            index: any;
         };
     };
 };
@@ -39,7 +42,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the active tab's content.
+ * Displays tabs and the selected tab's content.
  *
  * @props
  *
@@ -51,15 +54,16 @@ export type TabsSlots = typeof __propDef.slots;
  * - `classTab` - class of all title `button`s
  * - `class`
  * - `id`
- * - `selectedIndex` - index of selected tab, defaults to 0
- * - `tabs` - array of tabs
+ * - `selectedIndex` - index of selected tab, defaults to `0`
+ * - `tabs` - array of `TabsTab` objects
+ * - `transition` - fades the panel content, set to `false` to remove
  *
  * @slots
  *
- * | name      | purpose               | default value      | slot props      |
- * | --------- | --------------------- | ------------------ | --------------- |
- * | `default` | active item's content | `activeItem.panel` | `activeItem`    |
- * | `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
+ * | name    | purpose            | default value       | slot props             |
+ * | ------- | ------------------ | ------------------- | ---------------------- |
+ * | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
+ * | `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
  *
  * @example
  *
@@ -71,10 +75,10 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * <Tabs
  * 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"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Content" },
@@ -83,10 +87,10 @@ export type TabsSlots = typeof __propDef.slots;
  * />
  *
  * <Tabs
- * 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"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Generated indexes" },
@@ -96,16 +100,17 @@ export type TabsSlots = typeof __propDef.slots;
  * 		data: { component: FullscreenButton },
  * 	},
  * ]}
- * let:selectedTab
  * >
- * <svelte:fragment slot="tab" let:item let:index>
- * 	{item.tab}
+ * <svelte:fragment slot="tab" let:tab let:index>
+ * 	{tab.tab}
  * 	{index + 1}
  * </svelte:fragment>
- * <div class="mb-2">{selectedTab.panel}</div>
- * {#if selectedTab.data?.component}
- * 	<svelte:component this={selectedTab.data.component} class="btn" />
- * {/if}
+ * <svelte:fragment slot="panel" let:selectedTab>
+ * 	<div class="mb-2">{selectedTab.panel}</div>
+ * 	{#if selectedTab.data?.component}
+ * 		<svelte:component this={selectedTab.data.component} class="btn" />
+ * 	{/if}
+ * </svelte:fragment>
  * </Tabs>
  * ```
  */

package/package.json

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