drab 2.6.0 → 2.7.0

package/dist/components/Sheet.svelte

@@ -11,9 +11,8 @@ Creates a sheet element based on the `position` provided.
 - `class` 
 - `display` - controls whether the sheet is displayed
 - `id` 
-- `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `size` - size of sheet based on position - can also use css instead
 - `transitionSheet` - slides the sheet, set to `false` to remove
 - `transition` - fades the entire component, set to `false` to remove
 
@@ -33,17 +32,21 @@ Creates a sheet element based on the `position` provided.
 </script>
 
 <div>
-	<button class="btn" on:click={() => (display = true)}>Open</button>
+	<button type="button" class="btn" on:click={() => (display = true)}>
+		Open
+	</button>
 </div>
 
 <Sheet
 	bind:display
-	class="bg-gray-50/80 backdrop-blur"
+	class="bg-neutral-50/80 backdrop-blur"
 	classSheet="p-4 shadow bg-white"
 >
 	<div class="mb-4 flex items-center justify-between">
-		<div class="text-lg font-bold">Sheet</div>
-		<button class="btn" on:click={() => (display = false)}>Close</button>
+		<h2 class="my-0">Sheet</h2>
+		<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+			Close
+		</button>
 	</div>
 	<div>
 		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -70,15 +73,9 @@ export let classSheet = "";
 export let display = false;
 export let transition = { duration };
 export let position = "right";
-export let size = 488;
+export let maxSize = 488;
 export let transitionSheet = { duration };
-export let onClickClose = false;
 let sheet;
-const clickOutside = (e) => {
-  if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
-    display = false;
-  }
-};
 const onKeyDown = (e) => {
   if (e.key === "Escape") {
     display = false;
@@ -86,13 +83,13 @@ const onKeyDown = (e) => {
 };
 if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
   if (position === "bottom") {
-    transitionSheet.y = size;
+    transitionSheet.y = maxSize;
   } else if (position === "top") {
-    transitionSheet.y = -size;
+    transitionSheet.y = -maxSize;
   } else if (position === "right") {
-    transitionSheet.x = size;
+    transitionSheet.x = maxSize;
   } else {
-    transitionSheet.x = -size;
+    transitionSheet.x = -maxSize;
   }
 }
 onMount(() => {
@@ -109,59 +106,71 @@ onMount(() => {
 
 {#if display}
 	<div
-		role="button"
-		tabindex="0"
-		on:click={clickOutside}
-		on:keydown={onKeyDown}
 		transition:fade={transition ? transition : { duration: 0 }}
 		class="d-backdrop {className}"
+		class:d-backdrop-bottom={position === "bottom"}
+		class:d-backdrop-top={position === "top"}
+		class:d-backdrop-right={position === "right"}
 		{id}
 	>
 		<div
+			role="dialog"
 			bind:this={sheet}
 			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
 			style={position === "top" || position === "bottom"
-				? `max-height: ${size}px;`
-				: `max-width: ${size}px`}
+				? `max-height: ${maxSize}px;`
+				: `max-width: ${maxSize}px`}
 			class="d-sheet {classSheet}"
-			class:d-bottom={position === "bottom"}
-			class:d-top={position === "top"}
-			class:d-left={position === "left"}
-			class:d-right={position === "right"}
+			class:d-sheet-bottom={position === "bottom"}
+			class:d-sheet-top={position === "top"}
+			class:d-sheet-left={position === "left"}
+			class:d-sheet-right={position === "right"}
 		>
 			<slot>Content</slot>
 		</div>
+		<button title="Close" on:click={() => (display = false)}></button>
 	</div>
 {/if}
 
 <style>
+	button {
+		flex-grow: 1;
+	}
 	.d-backdrop {
 		position: fixed;
-		display: grid;
-		z-index: 10;
+		display: flex;
+		z-index: 40;
 		top: 0;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		overflow: hidden;
-		cursor: default;
+	}
+	.d-backdrop-bottom {
+		flex-direction: column-reverse;
+	}
+	.d-backdrop-top {
+		flex-direction: column;
+	}
+	.d-backdrop-right {
+		flex-direction: row-reverse;
 	}
 	.d-sheet {
 		margin: auto;
 	}
-	.d-bottom {
+	.d-sheet-bottom {
 		margin-bottom: 0;
 		width: 100%;
 	}
-	.d-top {
+	.d-sheet-top {
 		margin-top: 0;
 		width: 100%;
 	}
-	.d-right {
+	.d-sheet-right {
 		margin-right: 0;
 		height: 100%;
 	}
-	.d-left {
+	.d-sheet-left {
 		margin-left: 0;
 		height: 100%;
 	}

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

@@ -8,9 +8,8 @@ declare const __propDef: {
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
         /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
-        /** size of sheet based on position - can also use css instead */ size?: number | undefined;
+        /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
-        /** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -33,9 +32,8 @@ export type SheetSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - controls whether the sheet is displayed
  * - `id`
- * - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
+ * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
- * - `size` - size of sheet based on position - can also use css instead
  * - `transitionSheet` - slides the sheet, set to `false` to remove
  * - `transition` - fades the entire component, set to `false` to remove
  *
@@ -55,17 +53,21 @@ export type SheetSlots = typeof __propDef.slots;
  * </script>
  *
  * <div>
- * <button class="btn" on:click={() => (display = true)}>Open</button>
+ * <button type="button" class="btn" on:click={() => (display = true)}>
+ * 	Open
+ * </button>
  * </div>
  *
  * <Sheet
  * bind:display
- * class="bg-gray-50/80 backdrop-blur"
+ * class="bg-neutral-50/80 backdrop-blur"
  * classSheet="p-4 shadow bg-white"
  * >
  * <div class="mb-4 flex items-center justify-between">
- * 	<div class="text-lg font-bold">Sheet</div>
- * 	<button class="btn" on:click={() => (display = false)}>Close</button>
+ * 	<h2 class="my-0">Sheet</h2>
+ * 	<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+ * 		Close
+ * 	</button>
  * </div>
  * <div>
  * 	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

package/dist/components/Tabs.svelte

@@ -3,27 +3,28 @@
 
 ### Tabs
 
-Displays tabs and the active tab's content.
+Displays tabs and the selected 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` 
-- `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.content` | `activeItem`    |
-| `title`   | title of each tab     | `item.title`         | `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
 
@@ -34,41 +35,43 @@ 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
 >
-	<svelte:fragment slot="title" let:item let:index>
-		{item.title}
+	<svelte:fragment slot="tab" let:tab let:index>
+		{tab.tab}
 		{index + 1}
 	</svelte:fragment>
-	<div>{activeTab.content}</div>
-	{#if activeTab.data?.component}
-		<svelte:component this={activeTab.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>
 ```
 -->
@@ -77,40 +80,61 @@ Displays tabs and the active tab's content.
 
 <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 = "";
-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;
+export let transition = { duration };
 let clientJs = false;
-$:
-  activeTab = tabs[activeIndex];
-onMount(() => clientJs = true);
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  clientJs = true;
+});
 </script>
 
 <div class={className} {id}>
-	<div class={classHeader}>
-		{#each tabs as item, index}
+	<div class={classTabList} role="tablist">
+		{#each tabs as tab, 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" {tab} {index}>{tab.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classContent}>
-		<slot {activeTab}>{activeTab.content}</slot>
-	</div>
+	{#each tabs as tab, index}
+		{#if index === selectedIndex}
+			<div
+				class={classTabPanel}
+				role="tabpanel"
+				id="tabpanel"
+				in:fade={transition ? transition : { duration: 0 }}
+			>
+				<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+			</div>
+		{/if}
+	{/each}
 	<noscript>
 		<div class={classNoscript}>{messageNoScript}</div>
 	</noscript>

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

@@ -1,35 +1,38 @@
 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;
 }
+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;
-        /** 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;
-        /** array of tabs */ tabs: TabsTab[];
-        /** index of active tab, defaults to 0 */ activeIndex?: number | undefined;
+        /** class of `div` that wraps the slotted content */ classTabPanel?: string | 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: {
-        title: {
-            item: TabsTab<any>;
+        tab: {
+            tab: TabsTab<any>;
             index: any;
         };
-        default: {
-            activeTab: TabsTab<any>;
+        panel: {
+            selectedTab: TabsTab<any>;
+            index: any;
         };
     };
 };
@@ -39,27 +42,28 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the active tab's content.
+ * Displays tabs and the selected 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`
- * - `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.content` | `activeItem`    |
- * | `title`   | title of each tab     | `item.title`         | `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
  *
@@ -70,41 +74,43 @@ 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
  * >
- * <svelte:fragment slot="title" let:item let:index>
- * 	{item.title}
+ * <svelte:fragment slot="tab" let:tab let:index>
+ * 	{tab.tab}
  * 	{index + 1}
  * </svelte:fragment>
- * <div>{activeTab.content}</div>
- * {#if activeTab.data?.component}
- * 	<svelte:component this={activeTab.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/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.7.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",