drab 2.8.3 → 2.8.5

package/dist/components/Sheet.svelte

@@ -1,11 +1,11 @@
-<!--
-@component
-
-### Sheet
-
-Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
-
-@props
+<!--
+@component
+
+### Sheet
+
+Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
+
+@props
 
 - `classSheet` - sheet class - not the backdrop
 - `class` 
@@ -16,48 +16,48 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 - `transitionSheet` - flies the sheet, set to `false` to remove
 - `transition` - blurs the entire component, set to `false` to remove
 
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | content                         | `Content`     |
-
-@example
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | content                         | `Content`     |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { Sheet } from "drab";
-
-	let display = false;
-</script>
-
-<button type="button" class="btn" on:click={() => (display = true)}>
-	Open
-</button>
-
-<Sheet
-	bind:display
-	class="bg-neutral-50/80 backdrop-blur"
-	classSheet="p-4 shadow bg-white"
-	position="right"
->
-	<div class="mb-4 flex items-center justify-between">
-		<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
-		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-		cillum dolore eu fugiat nulla pariatur.
-	</div>
-</Sheet>
+<script lang="ts">
+	import { Sheet } from "drab";
+
+	let display = false;
+</script>
+
+<button type="button" class="btn" on:click={() => (display = true)}>
+	Open
+</button>
+
+<Sheet
+	bind:display
+	class="bg-neutral-50/80 backdrop-blur"
+	classSheet="p-4 shadow bg-white"
+	position="right"
+>
+	<div class="mb-4 flex items-center justify-between">
+		<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
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur.
+	</div>
+</Sheet>
 ```
--->
-
+-->
+
 <script>import { onMount } from "svelte";
 import {
   blur,
@@ -101,56 +101,56 @@ onMount(() => {
     transitionSheet = false;
   }
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#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"
-			bind:this={sheet}
-			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
-			style={position === "top" || position === "bottom"
-				? `max-height: ${maxSize}px;`
-				: `max-width: ${maxSize}px`}
-			class={classSheet}
-		>
-			<slot>Content</slot>
-		</div>
-		<button title="Close" on:click={() => (display = false)}></button>
-	</div>
-{/if}
-
-<style>
-	button {
-		flex-grow: 1;
-	}
-	.d-backdrop {
-		position: fixed;
-		display: flex;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		overflow: hidden;
-	}
-	.d-backdrop-bottom {
-		flex-direction: column-reverse;
-	}
-	.d-backdrop-top {
-		flex-direction: column;
-	}
-	.d-backdrop-right {
-		flex-direction: row-reverse;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#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"
+			bind:this={sheet}
+			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
+			style={position === "top" || position === "bottom"
+				? `max-height: ${maxSize}px;`
+				: `max-width: ${maxSize}px`}
+			class={classSheet}
+		>
+			<slot>Content</slot>
+		</div>
+		<button title="Close" on:click={() => (display = false)}></button>
+	</div>
+{/if}
+
+<style>
+	button {
+		flex-grow: 1;
+	}
+	.d-backdrop {
+		position: fixed;
+		display: flex;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+	}
+	.d-backdrop-bottom {
+		flex-direction: column-reverse;
+	}
+	.d-backdrop-top {
+		flex-direction: column;
+	}
+	.d-backdrop-right {
+		flex-direction: row-reverse;
+	}
+</style>

package/dist/components/Tabs.svelte

@@ -1,126 +1,103 @@
-<!--
-@component
+<!--
+@component
+
+### Tabs
+
+Displays tabs and the selected tab's content.
+
+@props
 
-### Tabs
-
-Displays tabs and the selected tab's content.
-
-@props
-
-- `classNoscript` - `noscript` class
-- `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
+- `classTab` - class of all tab `button`s
 - `class` 
 - `data` - provides the content for each tab
 - `id` 
-- `selectedIndex` - index of selected tab, defaults to `0`
+- `indexSelected` - index of selected tab, defaults to `0`
 
-@slots
-
-| 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
+@slots
+
+| name       | purpose              | default value   | slot props                              |
+| ---------- | -------------------- | --------------- | --------------------------------------- |
+| `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `selectedIndex`, `tab` |
+| `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`                         |
+
+@example
 
 ```svelte
-<script lang="ts">
-	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
-	{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"
->
-	<svelte:fragment slot="tab" let:item let:index>
-		{index + 1}.
-		{item.tab}
-	</svelte:fragment>
-	<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>
+<script lang="ts">
+	import { Tabs, FullscreenButton } from "drab";
+</script>
+
+<Tabs
+	data={[
+		{ tab: "Tab", tabPanel: "Content" },
+		{
+			tab: "Another Tab",
+			tabPanel: "Some more content",
+			component: FullscreenButton,
+		},
+	]}
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+>
+	<svelte:fragment slot="tab" let:item let:index let:indexSelected>
+		<div
+			class="btn btn-s {index === indexSelected
+				? 'bg-white text-neutral-950 shadow'
+				: 'bg-neutral-200 text-neutral-600'}"
+		>
+			{item.tab}
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="tabPanel" let:item>
+		<div class="py-2">
+			<div>{item.tabPanel}</div>
+			{#if item.component}
+				<svelte:component this={item.component} class="btn mt-2" />
+			{/if}
+		</div>
+	</svelte:fragment>
+</Tabs>
 ```
--->
-
-<script context="module"></script>
-
+-->
+
 <script>import { onMount } from "svelte";
-import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let classTabList = "";
 export let classTab = "";
-export let classTabActive = "";
-export let classTabInactive = "";
-export let classNoscript = "";
-export let classTabPanel = "";
 export let data;
-export let selectedIndex = 0;
+export let indexSelected = 0;
 let clientJs = false;
 const idPanel = "tabPanel-" + Math.random().toString().substring(2, 8);
 onMount(() => clientJs = true);
-</script>
-
-<div class={className} {id}>
-	<div class={classTabList} role="tablist">
-		{#each data as item, index}
-			<button
-				role="tab"
-				tabindex={index === selectedIndex ? 0 : -1}
-				aria-selected={index === selectedIndex}
-				aria-controls={idPanel}
-				disabled={!clientJs}
-				class="{classTab} {selectedIndex === index
-					? classTabActive
-					: ''} {selectedIndex !== index ? classTabInactive : ''}"
-				on:click={() => (selectedIndex = index)}
-			>
-				<slot name="tab" {item} {index} tab={item.tab}>{item.tab}</slot>
-			</button>
-		{/each}
-	</div>
-	{#each data as item, index}
-		{#if index === selectedIndex}
-			<div class={classTabPanel} role="tabpanel" id={idPanel}>
-				<slot name="tabPanel" {item} {index}>
-					{item.tabPanel}
-				</slot>
-			</div>
-		{/if}
-	{/each}
-	<noscript>
-		<div class={classNoscript}>{messageNoScript}</div>
-	</noscript>
-</div>
+</script>
+
+<div class={className} {id}>
+	<div class={classTabList} role="tablist">
+		{#each data as item, index}
+			<button
+				role="tab"
+				tabindex={index === indexSelected ? 0 : -1}
+				aria-selected={index === indexSelected}
+				aria-controls={idPanel}
+				disabled={!clientJs}
+				class={classTab}
+				on:click={() => (indexSelected = index)}
+			>
+				<slot name="tab" {item} {index} {indexSelected} tab={item.tab}>
+					{item.tab}
+				</slot>
+			</button>
+		{/each}
+	</div>
+	{#each data as item, index}
+		{#if index === indexSelected}
+			<div role="tabpanel" id={idPanel}>
+				<slot name="tabPanel" {item} {index}>
+					{item.tabPanel}
+				</slot>
+			</div>
+		{/if}
+	{/each}
+</div>

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

@@ -1,36 +1,46 @@
 import { SvelteComponent } from "svelte";
-export interface TabsItem {
-    /** tab title, displayed in `button` element */
-    tab?: string;
-    /** slotted content, displayed once tab is clicked */
-    tabPanel?: string;
-    /** any data to pass back to the parent */
-    [key: string | number]: any;
-}
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: 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 */ classTabPanel?: string | undefined;
-        /** provides the content for each tab */ data: TabsItem[];
-        /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
+        /** class of all tab `button`s */ classTab?: string | undefined;
+        /** provides the content for each tab */ data: {
+            [key: string]: any;
+            [key: number]: any;
+            /** tab title, displayed in `button` element */
+            tab?: string | undefined;
+            /** slotted content, displayed once tab is clicked */
+            tabPanel?: string | undefined;
+        }[];
+        /** index of selected tab, defaults to `0` */ indexSelected?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         tab: {
-            item: TabsItem;
+            item: {
+                [key: string]: any;
+                [key: number]: any;
+                /** tab title, displayed in `button` element */
+                tab?: string | undefined;
+                /** slotted content, displayed once tab is clicked */
+                tabPanel?: string | undefined;
+            };
             index: any;
+            indexSelected: number;
             tab: string | undefined;
         };
         tabPanel: {
-            item: TabsItem;
+            item: {
+                [key: string]: any;
+                [key: number]: any;
+                /** tab title, displayed in `button` element */
+                tab?: string | undefined;
+                /** slotted content, displayed once tab is clicked */
+                tabPanel?: string | undefined;
+            };
             index: any;
         };
     };
@@ -45,67 +55,54 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - `noscript` class
- * - `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
+ * - `classTab` - class of all tab `button`s
  * - `class`
  * - `data` - provides the content for each tab
  * - `id`
- * - `selectedIndex` - index of selected tab, defaults to `0`
+ * - `indexSelected` - index of selected tab, defaults to `0`
  *
  * @slots
  *
- * | 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`        |
+ * | name       | purpose              | default value   | slot props                              |
+ * | ---------- | -------------------- | --------------- | --------------------------------------- |
+ * | `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `selectedIndex`, `tab` |
+ * | `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`                         |
  *
  * @example
  *
  * ```svelte
  * <script lang="ts">
- * import { Tabs, type TabsItem, FullscreenButton } from "drab";
+ * import { Tabs, FullscreenButton } from "drab";
+ * </script>
  *
- * const data: TabsItem[] = [
+ * <Tabs
+ * data={[
  * 	{ 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
- * {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"
  * >
- * <svelte:fragment slot="tab" let:item let:index>
- * 	{index + 1}.
- * 	{item.tab}
+ * <svelte:fragment slot="tab" let:item let:index let:indexSelected>
+ * 	<div
+ * 		class="btn btn-s {index === indexSelected
+ * 			? 'bg-white text-neutral-950 shadow'
+ * 			: 'bg-neutral-200 text-neutral-600'}"
+ * 	>
+ * 		{item.tab}
+ * 	</div>
  * </svelte:fragment>
  * <svelte:fragment slot="tabPanel" let:item>
- * 	<div>{item.tabPanel}</div>
- * 	{#if item.component}
- * 		<svelte:component this={item.component} class="btn mt-2" />
- * 	{/if}
+ * 	<div class="py-2">
+ * 		<div>{item.tabPanel}</div>
+ * 		{#if item.component}
+ * 			<svelte:component this={item.component} class="btn mt-2" />
+ * 		{/if}
+ * 	</div>
  * </svelte:fragment>
  * </Tabs>
  * ```

package/dist/components/YouTube.svelte

@@ -17,15 +17,15 @@ Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.
 @example
 
 ```svelte
-<script lang="ts">
-	import { YouTube } from "drab";
-</script>
-
-<YouTube
-	class="aspect-video w-full rounded"
-	title="Renegade - Kevin Olusola"
-	uid="gouiY85kD2o"
-/>
+<script lang="ts">
+	import { YouTube } from "drab";
+</script>
+
+<YouTube
+	class="aspect-video w-full rounded"
+	title="Renegade - Kevin Olusola"
+	uid="gouiY85kD2o"
+/>
 ```
 -->
 

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,14 +1,14 @@
-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 Details from "./components/Details.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, };
+export { Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Details, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };