drab 2.8.5 → 2.8.6

package/dist/components/Editor.svelte

@@ -41,10 +41,10 @@
 			icon: "Bullet",
 		},
 		{
-			name: "Asterisk",
+			name: "Italic",
 			text: "*",
 			display: "wrap",
-			icon: "Asterisk",
+			icon: "Italic",
 			key: "i",
 			class: "italic",
 		},

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

@@ -80,10 +80,10 @@ export type EditorSlots = typeof __propDef.slots;
  * 		icon: "Bullet",
  * 	},
  * 	{
- * 		name: "Asterisk",
+ * 		name: "Italic",
  * 		text: "*",
  * 		display: "wrap",
- * 		icon: "Asterisk",
+ * 		icon: "Italic",
  * 		key: "i",
  * 		class: "italic",
  * 	},

package/dist/components/Sheet.svelte

@@ -37,7 +37,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 
 <Sheet
 	bind:display
-	class="bg-neutral-50/80 backdrop-blur"
+	class="backdrop-blur"
 	classSheet="p-4 shadow bg-white"
 	position="right"
 >

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

@@ -58,7 +58,7 @@ export type SheetSlots = typeof __propDef.slots;
  *
  * <Sheet
  * bind:display
- * class="bg-neutral-50/80 backdrop-blur"
+ * class="backdrop-blur"
  * classSheet="p-4 shadow bg-white"
  * position="right"
  * >

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.8.5",
+	"version": "2.8.6",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -17,7 +17,6 @@
 		"Popover",
 		"Share",
 		"Sheet",
-		"Tabs",
 		"YouTube"
 	],
 	"homepage": "https://drab.robino.dev",

package/dist/components/Tabs.svelte

@@ -1,103 +0,0 @@
-<!--
-@component
-
-### Tabs
-
-Displays tabs and the selected tab's content.
-
-@props
-
-- `classTabList` - class of the `div` that wraps the `button`s
-- `classTab` - class of all tab `button`s
-- `class` 
-- `data` - provides the content for each tab
-- `id` 
-- `indexSelected` - index of selected tab, defaults to `0`
-
-@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, 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>import { onMount } from "svelte";
-let className = "";
-export { className as class };
-export let id = "";
-export let classTabList = "";
-export let classTab = "";
-export let data;
-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 === 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,112 +0,0 @@
-import { SvelteComponent } from "svelte";
-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 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: {
-                [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: {
-                [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;
-        };
-    };
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-/**
- * ### Tabs
- *
- * Displays tabs and the selected tab's content.
- *
- * @props
- *
- * - `classTabList` - class of the `div` that wraps the `button`s
- * - `classTab` - class of all tab `button`s
- * - `class`
- * - `data` - provides the content for each tab
- * - `id`
- * - `indexSelected` - index of selected tab, defaults to `0`
- *
- * @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, 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>
- * ```
- */
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
-}
-export {};