drab 2.8.1 → 2.8.3

package/dist/components/Sheet.svelte

@@ -13,7 +13,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 - `id` 
 - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `transitionSheet` - flys the sheet, set to `false` to remove
+- `transitionSheet` - flies the sheet, set to `false` to remove
 - `transition` - blurs the entire component, set to `false` to remove
 
 @slots
@@ -80,6 +80,10 @@ const onKeyDown = (e) => {
     display = false;
   }
 };
+const focusElement = (node) => {
+  if (node instanceof HTMLElement)
+    node.focus();
+};
 if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
   if (position === "bottom") {
     transitionSheet.y = maxSize;
@@ -93,10 +97,8 @@ if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
 }
 onMount(() => {
   if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-    if (transitionSheet)
-      transitionSheet.duration = 0;
+    transition = false;
+    transitionSheet = false;
   }
 });
 </script>
@@ -106,11 +108,13 @@ onMount(() => {
 {#if display}
 	<div
 		transition:blur={transition ? transition : { duration: 0 }}
+		use:focusElement
 		class="d-backdrop {className}"
 		class:d-backdrop-bottom={position === "bottom"}
 		class:d-backdrop-top={position === "top"}
 		class:d-backdrop-right={position === "right"}
 		{id}
+		tabindex="-1"
 	>
 		<div
 			role="dialog"
@@ -134,7 +138,6 @@ onMount(() => {
 	.d-backdrop {
 		position: fixed;
 		display: flex;
-		z-index: 40;
 		top: 0;
 		bottom: 0;
 		left: 0;

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
         /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
         /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
-        /** flys the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
+        /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -34,7 +34,7 @@ export type SheetSlots = typeof __propDef.slots;
  * - `id`
  * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
- * - `transitionSheet` - flys the sheet, set to `false` to remove
+ * - `transitionSheet` - flies the sheet, set to `false` to remove
  * - `transition` - blurs the entire component, set to `false` to remove
  *
  * @slots

package/dist/components/Tabs.svelte

@@ -3,7 +3,7 @@
 
 ### Tabs
 
-Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props. 
+Displays tabs and the selected tab's content.
 
 @props
 
@@ -14,62 +14,59 @@ Displays tabs and the selected tab's content. Use `TabsTab.data` to send additio
 - `classTabPanel` - class of `div` that wraps the slotted content
 - `classTab` - class of all title `button`s
 - `class` 
+- `data` - provides the content for each tab
 - `id` 
 - `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             |
-| ------- | ------------------ | ------------------- | ---------------------- |
-| `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
-| `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
+| name       | purpose              | default value   | slot props             |
+| ---------- | -------------------- | --------------- | ---------------------- |
+| `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `tab` |
+| `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`        |
 
 @example
 
 ```svelte
 <script lang="ts">
-	import { Tabs } from "drab";
-	import { FullscreenButton } from "drab";
+	import { Tabs, type TabsItem, FullscreenButton } from "drab";
+
+	const data: TabsItem[] = [
+		{ tab: "Tab", tabPanel: "Content" },
+		{
+			tab: "Another Tab",
+			tabPanel: "Some more content",
+			component: FullscreenButton,
+		},
+	];
 </script>
 
 <Tabs
+	{data}
 	class="mb-4"
 	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" },
-		{ tab: "Another Tab", panel: "Some more content" },
-	]}
 />
 
 <Tabs
+	{data}
 	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" },
-		{
-			tab: "Tab",
-			panel: "A tab with a component",
-			data: { component: FullscreenButton },
-		},
-	]}
 >
-	<svelte:fragment slot="tab" let:tab let:index>
-		{tab.tab}
-		{index + 1}
+	<svelte:fragment slot="tab" let:item let:index>
+		{index + 1}.
+		{item.tab}
 	</svelte:fragment>
-	<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" />
+	<svelte:fragment slot="tabPanel" let:item>
+		<div>{item.tabPanel}</div>
+		{#if item.component}
+			<svelte:component this={item.component} class="btn mt-2" />
 		{/if}
 	</svelte:fragment>
 </Tabs>
@@ -80,9 +77,6 @@ Displays tabs and the selected tab's content. Use `TabsTab.data` to send additio
 
 <script>import { onMount } from "svelte";
 import { messageNoScript } from "../util/messages";
-import { fade } from "svelte/transition";
-import { duration } from "../util/transition";
-import { prefersReducedMotion } from "../util/accessibility";
 let className = "";
 export { className as class };
 export let id = "";
@@ -92,44 +86,37 @@ export let classTabActive = "";
 export let classTabInactive = "";
 export let classNoscript = "";
 export let classTabPanel = "";
-export let tabs;
+export let data;
 export let selectedIndex = 0;
-export let transition = { duration };
 let clientJs = false;
-onMount(() => {
-  if (prefersReducedMotion()) {
-    if (transition)
-      transition.duration = 0;
-  }
-  clientJs = true;
-});
-const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
+const idPanel = "tabPanel-" + Math.random().toString().substring(2, 8);
+onMount(() => clientJs = true);
 </script>
 
 <div class={className} {id}>
 	<div class={classTabList} role="tablist">
-		{#each tabs as tab, index}
+		{#each data as item, index}
 			<button
 				role="tab"
 				tabindex={index === selectedIndex ? 0 : -1}
 				aria-selected={index === selectedIndex}
-				aria-controls={panelId}
+				aria-controls={idPanel}
 				disabled={!clientJs}
 				class="{classTab} {selectedIndex === index
 					? classTabActive
 					: ''} {selectedIndex !== index ? classTabInactive : ''}"
 				on:click={() => (selectedIndex = index)}
 			>
-				<slot name="tab" {tab} {index}>{tab.tab}</slot>
+				<slot name="tab" {item} {index} tab={item.tab}>{item.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	{#each tabs as tab, index}
+	{#each data as item, index}
 		{#if index === selectedIndex}
-			<div class={classTabPanel} role="tabpanel" id={panelId}>
-				<div in:fade={transition ? transition : { duration: 0 }}>
-					<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
-				</div>
+			<div class={classTabPanel} role="tabpanel" id={idPanel}>
+				<slot name="tabPanel" {item} {index}>
+					{item.tabPanel}
+				</slot>
 			</div>
 		{/if}
 	{/each}

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

@@ -1,13 +1,12 @@
 import { SvelteComponent } from "svelte";
-export interface TabsTab<T = any> {
+export interface TabsItem {
     /** tab title, displayed in `button` element */
     tab?: string;
     /** slotted content, displayed once tab is clicked */
-    panel?: string;
+    tabPanel?: string;
     /** any data to pass back to the parent */
-    data?: T;
+    [key: string | number]: any;
 }
-import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -18,20 +17,20 @@ 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 `TabsTab` objects */ tabs: TabsTab[];
+        /** provides the content for each tab */ data: TabsItem[];
         /** 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: {
-            tab: TabsTab<any>;
+            item: TabsItem;
             index: any;
+            tab: string | undefined;
         };
-        panel: {
-            selectedTab: TabsTab<any>;
+        tabPanel: {
+            item: TabsItem;
             index: any;
         };
     };
@@ -42,7 +41,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
+ * Displays tabs and the selected tab's content.
  *
  * @props
  *
@@ -53,62 +52,59 @@ export type TabsSlots = typeof __propDef.slots;
  * - `classTabPanel` - class of `div` that wraps the slotted content
  * - `classTab` - class of all title `button`s
  * - `class`
+ * - `data` - provides the content for each tab
  * - `id`
  * - `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             |
- * | ------- | ------------------ | ------------------- | ---------------------- |
- * | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
- * | `tab`   | title of each tab  | `tab.tab`           | `tab`, `index`         |
+ * | name       | purpose              | default value   | slot props             |
+ * | ---------- | -------------------- | --------------- | ---------------------- |
+ * | `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `tab` |
+ * | `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`        |
  *
  * @example
  *
  * ```svelte
  * <script lang="ts">
- * import { Tabs } from "drab";
- * import { FullscreenButton } from "drab";
+ * import { Tabs, type TabsItem, FullscreenButton } from "drab";
+ *
+ * const data: TabsItem[] = [
+ * 	{ tab: "Tab", tabPanel: "Content" },
+ * 	{
+ * 		tab: "Another Tab",
+ * 		tabPanel: "Some more content",
+ * 		component: FullscreenButton,
+ * 	},
+ * ];
  * </script>
  *
  * <Tabs
+ * {data}
  * class="mb-4"
  * 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" },
- * 	{ tab: "Another Tab", panel: "Some more content" },
- * ]}
  * />
  *
  * <Tabs
+ * {data}
  * 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" },
- * 	{
- * 		tab: "Tab",
- * 		panel: "A tab with a component",
- * 		data: { component: FullscreenButton },
- * 	},
- * ]}
  * >
- * <svelte:fragment slot="tab" let:tab let:index>
- * 	{tab.tab}
- * 	{index + 1}
+ * <svelte:fragment slot="tab" let:item let:index>
+ * 	{index + 1}.
+ * 	{item.tab}
  * </svelte:fragment>
- * <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" />
+ * <svelte:fragment slot="tabPanel" let:item>
+ * 	<div>{item.tabPanel}</div>
+ * 	{#if item.component}
+ * 		<svelte:component this={item.component} class="btn mt-2" />
  * 	{/if}
  * </svelte:fragment>
  * </Tabs>

package/dist/index.d.ts

@@ -1,19 +1,14 @@
-import Accordion from "./components/Accordion.svelte";
-import type { AccordionItem } from "./components/Accordion.svelte";
+import Accordion, { 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 Chord, { type ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
-import DataTable from "./components/DataTable.svelte";
-import type { DataTableRow } from "./components/DataTable.svelte";
-import Editor from "./components/Editor.svelte";
-import type { EditorContentElement } from "./components/Editor.svelte";
+import DataTable, { type DataTableItem } from "./components/DataTable.svelte";
+import Editor, { type EditorContentElement } from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import Sheet from "./components/Sheet.svelte";
-import Tabs from "./components/Tabs.svelte";
-import type { TabsTab } from "./components/Tabs.svelte";
+import Tabs, { type TabsItem } from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, type AccordionItem, Breakpoint, 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 DataTableItem, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsItem, YouTube, };

package/dist/index.js

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

package/dist/util/transition.d.ts

@@ -1 +1,2 @@
-export declare const duration = 150;
+export declare const duration = 200;
+export declare const start = 0.95;

package/dist/util/transition.js

@@ -1 +1,2 @@
-export const duration = 150;
+export const duration = 200;
+export const start = 0.95;

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "drab",
-	"version": "2.8.1",
+	"version": "2.8.3",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
 		"Svelte",
 		"SvelteKit",
 		"Accordion",
+		"Breakpoint",
 		"Chord",
 		"ContextMenu",
 		"Copy",
@@ -15,6 +16,7 @@
 		"Fullscreen",
 		"Popover",
 		"Share",
+		"Sheet",
 		"Tabs",
 		"YouTube"
 	],
@@ -36,7 +38,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/documentProps.js && node src/scripts/documentExamples.js"
+		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
 	},
 	"exports": {
 		".": {
@@ -48,29 +50,29 @@
 		"dist"
 	],
 	"dependencies": {
-		"svelte": "^4.1.2"
+		"svelte": "^4.2.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.22.5",
+		"@sveltejs/kit": "^1.22.6",
 		"@sveltejs/package": "^2.2.1",
 		"@tailwindcss/typography": "^0.5.9",
-		"@types/node": "^20.4.9",
-		"@typescript-eslint/eslint-plugin": "^6.3.0",
-		"@typescript-eslint/parser": "^6.3.0",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.46.0",
+		"@types/node": "^20.5.1",
+		"@typescript-eslint/eslint-plugin": "^6.4.0",
+		"@typescript-eslint/parser": "^6.4.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.32.4",
-		"marked": "^7.0.2",
-		"postcss": "^8.4.27",
-		"prettier": "^3.0.1",
+		"marked": "^7.0.4",
+		"postcss": "^8.4.28",
+		"prettier": "^3.0.2",
 		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.5.1",
-		"publint": "^0.2.0",
-		"svelte-check": "^3.4.6",
+		"prettier-plugin-tailwindcss": "^0.5.3",
+		"publint": "^0.2.1",
+		"svelte-check": "^3.5.0",
 		"tailwindcss": "^3.3.3",
-		"tslib": "^2.6.1",
+		"tslib": "^2.6.2",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9"
 	},