drab 2.2.0 → 2.2.1

package/dist/components/Accordion.svelte

@@ -7,7 +7,7 @@ Displays a list of `details` elements.
 
 @props
 
-- `autoClose` - if true, other items close when a new one is opened
+- `autoClose` - if `true`, other items close when a new one is opened
 - `classDetails` - class of the `div` around each `details` element
 - `classIcon` - class of the `div` around the icon
 - `classSlot` - class of all the `slot` elements
@@ -153,6 +153,12 @@ onMount(() => {
 </div>
 
 <style>
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
 	.db-rotate-180 {
 		transform: rotate(180deg);
 	}

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

@@ -26,7 +26,7 @@ declare const __propDef: {
         /** class of all the `slot` elements */ classSlot?: string | undefined;
         /** class of the `div` around the icon */ classIcon?: string | undefined;
         /** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
-        /** if true, other items close when a new one is opened */ autoClose?: boolean | undefined;
+        /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -43,7 +43,7 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `autoClose` - if true, other items close when a new one is opened
+ * - `autoClose` - if `true`, other items close when a new one is opened
  * - `classDetails` - class of the `div` around each `details` element
  * - `classIcon` - class of the `div` around the icon
  * - `classSlot` - class of all the `slot` elements

package/dist/components/ContextMenu.svelte

@@ -7,7 +7,7 @@ Displays when the parent element is right clicked.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `display` - controls `display` css property
 - `id` 
@@ -25,14 +25,14 @@ Displays when the parent element is right clicked.
     import { ContextMenu } from "drab";
 </script>
 
-<div class="p-12 border border-dashed flex justify-center">
+<div>
 	<div>Right click here</div>
-	<ContextMenu class="rounded shadow p-2 bg-white">
-		<div class="flex flex-col gap-2 not-prose w-48">
-			<div class="font-bold">Context Menu</div>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
+	<ContextMenu>
+		<div>
+			<div>Context Menu</div>
+			<button>Button</button>
+			<button>Button</button>
+			<button>Button</button>
 		</div>
 	</ContextMenu>
 </div>

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** controls `display` css property */ display?: boolean | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,7 +23,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `display` - controls `display` css property
  * - `id`
@@ -41,14 +41,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *    import { ContextMenu } from "drab";
  * </script>
  *
- * <div class="p-12 border border-dashed flex justify-center">
+ * <div>
  * <div>Right click here</div>
- * <ContextMenu class="rounded shadow p-2 bg-white">
- * 	<div class="flex flex-col gap-2 not-prose w-48">
- * 		<div class="font-bold">Context Menu</div>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
+ * <ContextMenu>
+ * 	<div>
+ * 		<div>Context Menu</div>
+ * 		<button>Button</button>
+ * 		<button>Button</button>
+ * 		<button>Button</button>
  * 	</div>
  * </ContextMenu>
  * </div>

package/dist/components/CopyButton.svelte

@@ -7,7 +7,7 @@ Uses the navigator api to copy text to the clipboard.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `id` 
 - `text` - text to copy

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         title?: string | undefined;
         /** text to copy */ text: string;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,7 +25,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
  * - `text` - text to copy

package/dist/components/DataTable.svelte

@@ -8,24 +8,24 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
-- `classButton` - button class
-- `classFooter` - footer class
-- `classNoscript` - noscript class
+- `classButton` - `button` class
+- `classFooter` - `footer` class
+- `classNoscript` - `noscript` class
 - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
 - `classPageNumber` - class of `div` wrapping page numbers
-- `classTable` - table class
-- `classTbodyTr` - tbody tr class
-- `classTbody` - tbody class
-- `classTdSorted` - currently sorted td
-- `classTd` - td class
-- `classThSorted` - currently sorted th
-- `classTh` - th class
-- `classTheadTr` - thead tr class
-- `classThead` - thead class
+- `classTable` - `table` class
+- `classTbodyTr` - `tbody tr` class
+- `classTbody` - `tbody` class
+- `classTdSorted` - currently sorted `td`
+- `classTd` - `td` class
+- `classThSorted` - currently sorted `th`
+- `classTh` - `th` class
+- `classTheadTr` - `thead tr` class
+- `classThead` - `thead` class
 - `columns` - table columns, in order
 - `currentPage` - current page, defaults to `1`
 - `data` - a list of objects to render in the table
-- `idTable` - table id
+- `idTable` - `table` id
 - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by--defaults to first column
 

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

@@ -8,23 +8,23 @@ declare const __propDef: {
         /** table columns, in order */ columns?: string[] | undefined;
         /** column to sort by--defaults to first column */ sortBy?: string | undefined;
         /** default sort order */ ascending?: boolean | undefined;
-        /** table class */ classTable?: string | undefined;
-        /** table id */ idTable?: string | undefined;
-        /** thead class */ classThead?: string | undefined;
-        /** tbody class */ classTbody?: string | undefined;
-        /** thead tr class */ classTheadTr?: string | undefined;
-        /** tbody tr class */ classTbodyTr?: string | undefined;
-        /** th class */ classTh?: string | undefined;
-        /** td class */ classTd?: string | undefined;
-        /** currently sorted th */ classThSorted?: string | undefined;
-        /** currently sorted td */ classTdSorted?: string | undefined;
-        /** button class */ classButton?: string | undefined;
-        /** footer class */ classFooter?: string | undefined;
+        /** `table` class */ classTable?: string | undefined;
+        /** `table` id */ idTable?: string | undefined;
+        /** `thead` class */ classThead?: string | undefined;
+        /** `tbody` class */ classTbody?: string | undefined;
+        /** `thead tr` class */ classTheadTr?: string | undefined;
+        /** `tbody tr` class */ classTbodyTr?: string | undefined;
+        /** `th` class */ classTh?: string | undefined;
+        /** `td` class */ classTd?: string | undefined;
+        /** currently sorted `th` */ classThSorted?: string | undefined;
+        /** currently sorted `td` */ classTdSorted?: string | undefined;
+        /** `button` class */ classButton?: string | undefined;
+        /** `footer` class */ classFooter?: string | undefined;
         /** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
         /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
         /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -45,24 +45,24 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
- * - `classButton` - button class
- * - `classFooter` - footer class
- * - `classNoscript` - noscript class
+ * - `classButton` - `button` class
+ * - `classFooter` - `footer` class
+ * - `classNoscript` - `noscript` class
  * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
  * - `classPageNumber` - class of `div` wrapping page numbers
- * - `classTable` - table class
- * - `classTbodyTr` - tbody tr class
- * - `classTbody` - tbody class
- * - `classTdSorted` - currently sorted td
- * - `classTd` - td class
- * - `classThSorted` - currently sorted th
- * - `classTh` - th class
- * - `classTheadTr` - thead tr class
- * - `classThead` - thead class
+ * - `classTable` - `table` class
+ * - `classTbodyTr` - `tbody tr` class
+ * - `classTbody` - `tbody` class
+ * - `classTdSorted` - currently sorted `td`
+ * - `classTd` - `td` class
+ * - `classThSorted` - currently sorted `th`
+ * - `classTh` - `th` class
+ * - `classTheadTr` - `thead tr` class
+ * - `classThead` - `thead` class
  * - `columns` - table columns, in order
  * - `currentPage` - current page, defaults to `1`
  * - `data` - a list of objects to render in the table
- * - `idTable` - table id
+ * - `idTable` - `table` id
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by--defaults to first column
  *

package/dist/components/Editor.svelte

@@ -9,9 +9,9 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 - `classButton` - `class` of all the `button` elements
 - `classControls` - `class` of the `div` that wraps the controls
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `classTextarea` - `class` of the `textarea` element
-- `contentElements` - an array of content elements for the controls
+- `contentElements` - an array of `EditorContentElement`s for the controls
 - `idControls` - `id` of the `div` that wraps the controls
 - `idTextarea` - `id` of the `textarea` element
 - `keyPairs` - keys that will auto-close if typed, value is their closing character

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

@@ -12,16 +12,16 @@ export interface EditorContentElement {
     text: string;
     /** controls how the text is added */
     display: "inline" | "block" | "wrap";
-    /** contents of the button */
+    /** contents of the `button` */
     icon: string | ComponentType;
     /** keyboard shortcut */
     key?: string;
-    /** class to apply to the specific button */
+    /** class to apply to the specific `button` */
     class?: string;
 }
 declare const __propDef: {
     props: {
-        /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
+        /** an array of `EditorContentElement`s for the controls */ contentElements?: EditorContentElement[] | undefined;
         /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
         /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
         /** `class` of the `textarea` element */ classTextarea?: string | undefined;
@@ -34,7 +34,7 @@ declare const __propDef: {
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         input: Event;
@@ -55,9 +55,9 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * - `classButton` - `class` of all the `button` elements
  * - `classControls` - `class` of the `div` that wraps the controls
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `classTextarea` - `class` of the `textarea` element
- * - `contentElements` - an array of content elements for the controls
+ * - `contentElements` - an array of `EditorContentElement`s for the controls
  * - `idControls` - `id` of the `div` that wraps the controls
  * - `idTextarea` - `id` of the `textarea` element
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character

package/dist/components/FullscreenButton.svelte

@@ -7,7 +7,7 @@ Make the document or a specific element fullscreen.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
 - `id` 

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: HTMLElement | null | undefined;
         /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,7 +26,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
  * - `id`

package/dist/components/Popover.svelte

@@ -7,12 +7,12 @@ Displays a popover relatively positioned to the button.
 
 @props
 
-- `classButton` - button class
+- `classButton` - `button` class
 - `classPopover` - popover class
 - `class` 
 - `display` - if `eventType="click"`, controls the display
 - `eventType` - controls if hovering or clicking the button displays the popover
-- `idButton` - button id
+- `idButton` - `button` id
 - `idPopover` - popover id
 - `id` 
 - `position` - where the popover is displayed in relation to the button

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

@@ -3,9 +3,9 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** button class */ classButton?: string | undefined;
+        /** `button` class */ classButton?: string | undefined;
         /** popover class */ classPopover?: string | undefined;
-        /** button id */ idButton?: string | undefined;
+        /** `button` id */ idButton?: string | undefined;
         /** popover id */ idPopover?: string | undefined;
         /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
         /** where the popover is displayed in relation to the button */ position?: "top" | "bottom" | "left" | "right" | undefined;
@@ -29,12 +29,12 @@ export type PopoverSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classButton` - button class
+ * - `classButton` - `button` class
  * - `classPopover` - popover class
  * - `class`
  * - `display` - if `eventType="click"`, controls the display
  * - `eventType` - controls if hovering or clicking the button displays the popover
- * - `idButton` - button id
+ * - `idButton` - `button` id
  * - `idPopover` - popover id
  * - `id`
  * - `position` - where the popover is displayed in relation to the button

package/dist/components/ShareButton.svelte

@@ -7,11 +7,11 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 @props
 
-- `classNoscript` - noscript class
+- `classNoscript` - `noscript` class
 - `class` 
 - `id` 
 - `text` - prefixed text in share message
-- `title` - title of share message and button attribute, defaults to end of url
+- `title` - title of share message and `button` attribute, defaults to end of url
 - `url` - url to be shared
 
 @slots

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         id?: string | undefined;
         /** prefixed text in share message */ text?: string | undefined;
         /** url to be shared */ url: string;
-        /** title of share message and button attribute, defaults to end of url */ title?: string | undefined;
-        /** noscript class */ classNoscript?: string | undefined;
+        /** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,11 +26,11 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classNoscript` - noscript class
+ * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
  * - `text` - prefixed text in share message
- * - `title` - title of share message and button attribute, defaults to end of url
+ * - `title` - title of share message and `button` attribute, defaults to end of url
  * - `url` - url to be shared
  *
  * @slots

package/dist/components/Tabs.svelte

@@ -0,0 +1,102 @@
+<!--
+@component
+
+### Tabs
+
+Displays tabs and slotted content.
+
+@props
+
+- `classButtonActive` - class of the active tab's `button`
+- `classButtonInactive` - class of all the inactive tabs' `button`s
+- `classButton` - `button` class
+- `classHeader` - class of the `div` that wraps the `button`s
+- `classNoscript` - `noscript` class
+- `classSlot` - class of `div` that wraps the slotted content
+- `class` 
+- `content` - array of `TabContent` elements
+- `id` 
+- `transition` - fades the content in, defaults to empty object, set to false to remove
+
+@slots
+
+Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+
+@example
+
+```svelte
+<script>
+    import { Tabs } from "drab";
+	import { FullscreenButton } from "drab";
+</script>
+
+<Tabs content={[
+		{ name: "String", slot: "Slot" },
+		{ name: "Component", slot: FullscreenButton },
+	]}
+/>
+```
+-->
+
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+import { fade } from "svelte/transition";
+import { messageNoScript } from "../util/messages";
+let className = "";
+export { className as class };
+export let id = "";
+export let classHeader = "";
+export let classButton = "";
+export let classButtonActive = "";
+export let classButtonInactive = "";
+export let classNoscript = "";
+export let classSlot = "";
+export let content;
+export let transition = {};
+const fadeTransition = transition ? transition : { duration: 0 };
+let clientJs = false;
+let activeIndex = 0;
+for (const item of content) {
+  if (!item.classContentSlot)
+    item.classContentSlot = "";
+}
+$:
+  activeTab = content[activeIndex];
+onMount(() => clientJs = true);
+</script>
+
+<div class={className} {id}>
+	<div class={classHeader}>
+		{#each content as { name }, i}
+			<button
+				disabled={!clientJs}
+				class="{classButton} {activeIndex === i
+					? classButtonActive
+					: ''} {activeIndex !== i ? classButtonInactive : ''}"
+				on:click={() => (activeIndex = i)}
+			>
+				{name}
+			</button>
+		{/each}
+	</div>
+	<div class={classSlot}>
+		{#if typeof activeTab.slot !== "string"}
+			<div in:fade={fadeTransition}>
+				<svelte:component
+					this={activeTab.slot}
+					class={activeTab.classContentSlot}
+				/>
+			</div>
+		{:else}
+			<div in:fade={fadeTransition} class={activeTab.classContentSlot}>
+				{activeTab.slot}
+			</div>
+		{/if}
+	</div>
+	<noscript>
+		<div class={classNoscript}>
+			{messageNoScript}
+		</div>
+	</noscript>
+</div>

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

@@ -0,0 +1,72 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
+export interface TabsContent {
+    /** tab name, displayed in `button` element */
+    name: string;
+    /** slotted content, displayed once tab is clicked */
+    slot: string | ComponentType;
+    /** class of the slotted content */
+    classContentSlot?: string;
+}
+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;
+        /** `button` class */ classButton?: string | undefined;
+        /** class of the active tab's `button` */ classButtonActive?: string | undefined;
+        /** class of all the inactive tabs' `button`s */ classButtonInactive?: string | undefined;
+        /** `noscript` class */ classNoscript?: string | undefined;
+        /** class of `div` that wraps the slotted content */ classSlot?: string | undefined;
+        /** array of `TabContent` elements */ content: TabsContent[];
+        /** fades the content in, defaults to empty object, set to false to remove */ transition?: false | FadeParams | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+/**
+ * ### Tabs
+ *
+ * Displays tabs and slotted content.
+ *
+ * @props
+ *
+ * - `classButtonActive` - class of the active tab's `button`
+ * - `classButtonInactive` - class of all the inactive tabs' `button`s
+ * - `classButton` - `button` class
+ * - `classHeader` - class of the `div` that wraps the `button`s
+ * - `classNoscript` - `noscript` class
+ * - `classSlot` - class of `div` that wraps the slotted content
+ * - `class`
+ * - `content` - array of `TabContent` elements
+ * - `id`
+ * - `transition` - fades the content in, defaults to empty object, set to false to remove
+ *
+ * @slots
+ *
+ * Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { Tabs } from "drab";
+ * import { FullscreenButton } from "drab";
+ * </script>
+ *
+ * <Tabs content={[
+ * 	{ name: "String", slot: "Slot" },
+ * 	{ name: "Component", slot: FullscreenButton },
+ * ]}
+ * />
+ * ```
+ */
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/package.json

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