drab 2.8.0 → 2.8.2

package/README.md

@@ -5,5 +5,3 @@
 [drab.robino.dev](https://drab.robino.dev)
 
 ### MIT License
-
-### Open to contributions

package/dist/components/Accordion.svelte

@@ -3,7 +3,7 @@
 
 ### Accordion
 
-Displays a list of `details` elements with helpful defaults and transitions.
+Displays a list of `details` elements with helpful defaults and transitions. Use `AccordionItem.data` to send any additional data through the slot props. Works without JavaScript. 
 
 @props
 

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

@@ -49,7 +49,7 @@ export type AccordionSlots = typeof __propDef.slots;
 /**
  * ### Accordion
  *
- * Displays a list of `details` elements with helpful defaults and transitions.
+ * Displays a list of `details` elements with helpful defaults and transitions. Use `AccordionItem.data` to send any additional data through the slot props. Works without JavaScript.
  *
  * @props
  *

package/dist/components/Breakpoint.svelte

@@ -20,11 +20,9 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check
 	import { Breakpoint } from "drab";
 </script>
 
-<div>
-	<Breakpoint
-		class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
-	/>
-</div>
+<Breakpoint
+	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+/>
 ```
 -->
 

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

@@ -36,11 +36,9 @@ export type BreakpointSlots = typeof __propDef.slots;
  * import { Breakpoint } from "drab";
  * </script>
  *
- * <div>
  * <Breakpoint
- * 	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+ * class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
  * />
- * </div>
  * ```
  */
 export default class Breakpoint extends SvelteComponent<BreakpointProps, BreakpointEvents, BreakpointSlots> {

package/dist/components/Chord.svelte

@@ -17,7 +17,7 @@ Generates a guitar chord `svg`.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Chord } from "drab";
 </script>
 

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

@@ -41,7 +41,7 @@ export type ChordSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Chord } from "drab";
  * </script>
  *

package/dist/components/ContextMenu.svelte

@@ -3,14 +3,15 @@
 
 ### ContextMenu
 
-Displays when the parent element is right clicked, or long pressed on mobile.
+Displays when the `target` element is right clicked, or long pressed on mobile.
 
 @props
 
 - `class` 
-- `display` - controls `display` css property
+- `display` - shows / hides the menu
 - `id` 
-- `transition` - fades the content, set to `false` to remove
+- `target` - target element to right click, defaults to the parent element
+- `transition` - scales the menu, set to `false` to disable
 
 @slots
 
@@ -21,12 +22,14 @@ Displays when the parent element is right clicked, or long pressed on mobile.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { ContextMenu } from "drab";
+
+	let target: HTMLButtonElement;
 </script>
 
-<div class="flex justify-center rounded border border-dashed p-12">
-	<div>Right click here</div>
+<div class="mb-8 flex justify-center rounded border border-dashed p-12">
+	<div>Parent right click</div>
 	<ContextMenu>
 		<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 			<div class="font-bold">Context Menu</div>
@@ -36,20 +39,30 @@ Displays when the parent element is right clicked, or long pressed on mobile.
 		</div>
 	</ContextMenu>
 </div>
+
+<button type="button" class="btn" bind:this={target}>Target Right Click</button>
+<ContextMenu {target}>
+	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+		<div class="font-bold">Context Menu</div>
+		<button role="menuitem" class="btn">Button</button>
+		<button role="menuitem" class="btn">Button</button>
+		<button role="menuitem" class="btn">Button</button>
+	</div>
+</ContextMenu>
 ```
 -->
 
 <script>import { onMount, tick } from "svelte";
-import { fade } from "svelte/transition";
-import { duration } from "../util/transition";
-import { messageNoScript } from "../util/messages";
+import { scale } from "svelte/transition";
+import { duration, start } from "../util/transition";
 import { prefersReducedMotion } from "../util/accessibility";
 import { delay } from "../util/delay";
 let className = "";
 export { className as class };
 export let id = "";
 export let display = false;
-export let transition = { duration };
+export let transition = { duration, start };
+export let target = null;
 let contextMenu;
 let base;
 let coordinates = { x: 0, y: 0 };
@@ -89,17 +102,20 @@ const onTouchStart = (e) => {
 const onTouchEnd = () => {
   clearTimeout(timer);
 };
-onMount(() => {
+onMount(async () => {
   if (prefersReducedMotion()) {
     if (transition)
       transition.duration = 0;
   }
-  const parentElement = base.parentElement;
-  if (parentElement) {
-    parentElement.addEventListener("contextmenu", displayMenu);
-    parentElement.addEventListener("touchstart", onTouchStart);
-    parentElement.addEventListener("touchend", onTouchEnd);
-    parentElement.addEventListener("touchcancel", onTouchEnd);
+  await tick();
+  if (!target) {
+    target = base.parentElement;
+  }
+  if (target) {
+    target.addEventListener("contextmenu", displayMenu);
+    target.addEventListener("touchstart", onTouchStart);
+    target.addEventListener("touchend", onTouchEnd);
+    target.addEventListener("touchcancel", onTouchEnd);
   }
 });
 </script>
@@ -116,7 +132,7 @@ onMount(() => {
 		bind:this={contextMenu}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
-		transition:fade={transition ? transition : { duration: 0 }}
+		transition:scale={transition ? transition : { duration: 0 }}
 	>
 		<slot>Context Menu</slot>
 	</div>

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

@@ -1,11 +1,12 @@
 import { SvelteComponent } from "svelte";
-import { type FadeParams } from "svelte/transition";
+import { type ScaleParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** controls `display` css property */ display?: boolean | undefined;
-        /** fades the content, set to `false` to remove */ transition?: false | FadeParams | undefined;
+        /** shows / hides the menu */ display?: boolean | undefined;
+        /** scales the menu, set to `false` to disable */ transition?: false | ScaleParams | undefined;
+        /** target element to right click, defaults to the parent element */ target?: HTMLElement | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,14 +21,15 @@ export type ContextMenuSlots = typeof __propDef.slots;
 /**
  * ### ContextMenu
  *
- * Displays when the parent element is right clicked, or long pressed on mobile.
+ * Displays when the `target` element is right clicked, or long pressed on mobile.
  *
  * @props
  *
  * - `class`
- * - `display` - controls `display` css property
+ * - `display` - shows / hides the menu
  * - `id`
- * - `transition` - fades the content, set to `false` to remove
+ * - `target` - target element to right click, defaults to the parent element
+ * - `transition` - scales the menu, set to `false` to disable
  *
  * @slots
  *
@@ -38,12 +40,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { ContextMenu } from "drab";
+ *
+ * let target: HTMLButtonElement;
  * </script>
  *
- * <div class="flex justify-center rounded border border-dashed p-12">
- * <div>Right click here</div>
+ * <div class="mb-8 flex justify-center rounded border border-dashed p-12">
+ * <div>Parent right click</div>
  * <ContextMenu>
  * 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 		<div class="font-bold">Context Menu</div>
@@ -53,6 +57,16 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * 	</div>
  * </ContextMenu>
  * </div>
+ *
+ * <button type="button" class="btn" bind:this={target}>Target Right Click</button>
+ * <ContextMenu {target}>
+ * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+ * 	<div class="font-bold">Context Menu</div>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * 	<button role="menuitem" class="btn">Button</button>
+ * </div>
+ * </ContextMenu>
  * ```
  */
 export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {

package/dist/components/CopyButton.svelte

@@ -3,7 +3,7 @@
 
 ### CopyButton
 
-Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
+Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard. If JavaScript is disabled, the button is disabled and `text` is displayed after the button.
 
 @props
 
@@ -23,13 +23,11 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { CopyButton } from "drab";
 </script>
 
-<div>
-	<CopyButton class="btn" text="Text to copy" />
-</div>
+<CopyButton class="btn" text="Text to copy" />
 ```
 -->
 

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

@@ -21,7 +21,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
 /**
  * ### CopyButton
  *
- * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard.
+ * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text to the clipboard. If JavaScript is disabled, the button is disabled and `text` is displayed after the button.
  *
  * @props
  *
@@ -41,13 +41,11 @@ export type CopyButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { CopyButton } from "drab";
  * </script>
  *
- * <div>
  * <CopyButton class="btn" text="Text to copy" />
- * </div>
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

package/dist/components/DataTable.svelte

@@ -1,15 +1,15 @@
-<!--
-@component
+<!--
+@component
+
+### DataTable
+
+Data table to display an array of JS objects. Provides sorting and pagination. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props. 
+
+@props
 
-### DataTable
-
-Data table to display an array of JS objects. Click a column header to sort.
-
-@props
-
-- `ascending` - default sort order
+- `ascending` - current sort order
 - `classButton` - `button` class
-- `classFooter` - `footer` 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
@@ -32,20 +32,20 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `sortBy` - column to sort by, defaults to first column
 - `transition` - fades the rows in, set to `false` to disable
 
-@slots
-
-| name         | purpose                  | default value                    | slot props                     |
-| ------------ | ------------------------ | -------------------------------- | ------------------------------ |
-| `next`       | next button contents     | `Next`                           | `currentPage`                  |
-| `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
-| `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
-| `td`         | td contents              | `Previous`                       | `column`, `row`                |
-| `th`         | th contents              | `Previous`                       | `column`                       |
-
-@example
+@slots
+
+| name         | purpose                  | default value                    | slot props                     |
+| ------------ | ------------------------ | -------------------------------- | ------------------------------ |
+| `next`       | next button contents     | `Next`                           | `currentPage`                  |
+| `pageNumber` | page numbers             |  `currentPage` / `numberOfPages` | `currentPage`, `numberOfPages` |
+| `previous`   | previous button contents | `Previous`                       | `currentPage`                  |
+| `td`         | td contents              | `Previous`                       | `column`, `row`                |
+| `th`         | th contents              | `Previous`                       | `column`                       |
+
+@example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { DataTable } from "drab";
 </script>
 
@@ -106,10 +106,10 @@ Data table to display an array of JS objects. Click a column header to sort.
 	</svelte:fragment>
 </DataTable>
 ```
--->
-
-<script context="module"></script>
-
+-->
+
+<script context="module"></script>
+
 <script>import { onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { duration } from "../util/transition";
@@ -195,67 +195,67 @@ onMount(() => {
   }
   clientJs = true;
 });
-</script>
-
-<div class={className} {id}>
-	<table class={classTable} id={idTable}>
-		<thead class={classThead}>
-			<tr class={classTheadTr}>
-				{#each columns as column}
-					<th
-						class="{classTh} {sortBy === column ? classThSorted : ''}"
-						on:click={() => sort(column)}
-					>
-						<slot name="th" {column}>{column}</slot>
-					</th>
-				{/each}
-			</tr>
-		</thead>
-		<tbody class={classTbody}>
-			{#each data as row, i}
-				{#if showRow(i, currentPage)}
-					<tr
-						in:fade={transition ? transition : { duration: 0 }}
-						class={classTbodyTr}
-					>
-						{#each columns as column}
-							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-								<slot name="td" {row} {column}>{row[column]}</slot>
-							</td>
-						{/each}
-					</tr>
-				{/if}
-			{/each}
-		</tbody>
-	</table>
-
-	{#if maxRows}
-		<div class={classFooter}>
-			<div class={classPageNumber}>
-				<slot name="pageNumber" {currentPage} {numberOfPages}>
-					{currentPage} / {numberOfPages}
-				</slot>
-			</div>
-			<div class={classPageControls}>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage < 2}
-					on:click={() => currentPage--}
-				>
-					<slot name="previous" {currentPage}>Previous</slot>
-				</button>
-				<button
-					type="button"
-					class={classButton}
-					disabled={!clientJs || currentPage >= numberOfPages}
-					on:click={() => currentPage++}
-				>
-					<slot name="next" {currentPage}>Next</slot>
-				</button>
-			</div>
-		</div>
-
-		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
-	{/if}
-</div>
+</script>
+
+<div class={className} {id}>
+	<table class={classTable} id={idTable}>
+		<thead class={classThead}>
+			<tr class={classTheadTr}>
+				{#each columns as column}
+					<th
+						class="{classTh} {sortBy === column ? classThSorted : ''}"
+						on:click={() => sort(column)}
+					>
+						<slot name="th" {column}>{column}</slot>
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody class={classTbody}>
+			{#each data as row, i}
+				{#if showRow(i, currentPage)}
+					<tr
+						in:fade={transition ? transition : { duration: 0 }}
+						class={classTbodyTr}
+					>
+						{#each columns as column}
+							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
+								<slot name="td" {row} {column}>{row[column]}</slot>
+							</td>
+						{/each}
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
+
+	{#if maxRows}
+		<div class={classFooter}>
+			<div class={classPageNumber}>
+				<slot name="pageNumber" {currentPage} {numberOfPages}>
+					{currentPage} / {numberOfPages}
+				</slot>
+			</div>
+			<div class={classPageControls}>
+				<button
+					type="button"
+					class={classButton}
+					disabled={!clientJs || currentPage < 2}
+					on:click={() => currentPage--}
+				>
+					<slot name="previous" {currentPage}>Previous</slot>
+				</button>
+				<button
+					type="button"
+					class={classButton}
+					disabled={!clientJs || currentPage >= numberOfPages}
+					on:click={() => currentPage++}
+				>
+					<slot name="next" {currentPage}>Next</slot>
+				</button>
+			</div>
+		</div>
+
+		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
+	{/if}
+</div>

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         /** a list of objects to render in the table */ data: DataTableRow<any>[];
         /** table columns, in order */ columns?: string[] | undefined;
         /** column to sort by, defaults to first column */ sortBy?: string | undefined;
-        /** default sort order */ ascending?: boolean | undefined;
+        /** current sort order */ ascending?: boolean | undefined;
         /** `table` class */ classTable?: string | undefined;
         /** `table` id */ idTable?: string | undefined;
         /** `thead` class */ classThead?: string | undefined;
@@ -22,7 +22,7 @@ declare const __propDef: {
         /** currently sorted `th` */ classThSorted?: string | undefined;
         /** currently sorted `td` */ classTdSorted?: string | undefined;
         /** `button` class */ classButton?: string | undefined;
-        /** `footer` class */ classFooter?: 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;
         /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
@@ -59,13 +59,13 @@ export type DataTableSlots = typeof __propDef.slots;
 /**
  * ### DataTable
  *
- * Data table to display an array of JS objects. Click a column header to sort.
+ * Data table to display an array of JS objects. Provides sorting and pagination. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
  *
  * @props
  *
- * - `ascending` - default sort order
+ * - `ascending` - current sort order
  * - `classButton` - `button` class
- * - `classFooter` - `footer` 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
@@ -101,7 +101,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { DataTable } from "drab";
  * </script>
  *

package/dist/components/Editor.svelte

@@ -3,7 +3,9 @@
 
 ### Editor
 
-Text editor with controls to add elements and keyboard shortcuts.
+`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API. 
+
+- This component is used to create [Typo](https://typo.robino.dev)
 
 @props
 
@@ -17,13 +19,13 @@ Text editor with controls to add elements and keyboard shortcuts.
 - `keyPairs` - keys that will auto-close if typed, value is their closing character
 - `nameTextarea` - `name` of the `textarea` element
 - `placeholderTextarea` - `placeholder` of the `textarea` element
-- `selectionStart` - `selectionStart` value of the text area
+- `selectionStartTextarea` - `selectionStart` value of the `textarea`
 - `valueTextarea` - `value` of the `textarea` element
 
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Editor } from "drab";
 </script>
 
@@ -72,7 +74,7 @@ export let nameTextarea = "";
 export let classButton = "";
 export let classControls = "";
 export let idControls = "";
-export let selectionStart = 0;
+export let selectionStartTextarea = 0;
 export let keyPairs = {
   "(": ")",
   "{": "}",
@@ -95,11 +97,11 @@ const insertChar = (str, char, index) => {
 const removeChar = (str, index) => {
   return str.slice(0, index) + str.slice(index + 1);
 };
-const insertText = async (el, selectionStart2, selectionEnd) => {
+const insertText = async (el, selectionStart, selectionEnd) => {
   if (el.display === "inline") {
     valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
   } else if (el.display === "wrap") {
-    valueTextarea = insertChar(valueTextarea, el.text, selectionStart2);
+    valueTextarea = insertChar(valueTextarea, el.text, selectionStart);
     valueTextarea = insertChar(
       valueTextarea,
       keyPairs[el.text],
@@ -117,7 +119,7 @@ const insertText = async (el, selectionStart2, selectionEnd) => {
     valueTextarea = lines.join("\n");
   }
 };
-const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
+const setCaretPosition = async (text, selectionStart, selectionEnd) => {
   let startPos = 0;
   let endPos = 0;
   if (/[a-z]/i.test(text)) {
@@ -133,7 +135,7 @@ const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
       }
     }
   } else {
-    startPos = selectionStart2 + text.length;
+    startPos = selectionStart + text.length;
     endPos = selectionEnd + text.length;
   }
   textArea.setSelectionRange(startPos, endPos);
@@ -141,9 +143,9 @@ const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
 };
 const addContent = async (el) => {
   const selectionEnd = textArea.selectionEnd;
-  const selectionStart2 = textArea.selectionStart;
-  await insertText(el, selectionStart2, selectionEnd);
-  setCaretPosition(el.text, selectionStart2, selectionEnd);
+  const selectionStart = textArea.selectionStart;
+  await insertText(el, selectionStart, selectionEnd);
+  setCaretPosition(el.text, selectionStart, selectionEnd);
 };
 const onKeyDown = async (e) => {
   const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
@@ -267,7 +269,7 @@ const trimSelection = () => {
   }
 };
 const updateSelectionStart = () => {
-  selectionStart = textArea.selectionStart;
+  selectionStartTextarea = textArea.selectionStart;
 };
 const getLineInfo = () => {
   const lines = valueTextarea.split("\n");

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

@@ -30,7 +30,7 @@ declare const __propDef: {
         /** `class` of all the `button` elements */ classButton?: string | undefined;
         /** `class` of the `div` that wraps the controls */ classControls?: string | undefined;
         /** `id` of the `div` that wraps the controls */ idControls?: string | undefined;
-        /** `selectionStart` value of the text area */ selectionStart?: number | undefined;
+        /** `selectionStart` value of the `textarea` */ selectionStartTextarea?: number | undefined;
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
@@ -49,7 +49,9 @@ export type EditorSlots = typeof __propDef.slots;
 /**
  * ### Editor
  *
- * Text editor with controls to add elements and keyboard shortcuts.
+ * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API.
+ *
+ * - This component is used to create [Typo](https://typo.robino.dev)
  *
  * @props
  *
@@ -63,13 +65,13 @@ export type EditorSlots = typeof __propDef.slots;
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character
  * - `nameTextarea` - `name` of the `textarea` element
  * - `placeholderTextarea` - `placeholder` of the `textarea` element
- * - `selectionStart` - `selectionStart` value of the text area
+ * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
  * - `valueTextarea` - `value` of the `textarea` element
  *
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Editor } from "drab";
  * </script>
  *

package/dist/components/FullscreenButton.svelte

@@ -9,7 +9,7 @@ Make the document or a specific element fullscreen.
 
 - `classNoscript` - `noscript` class
 - `class` 
-- `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
 - `id` 
 - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
 - `title` 
@@ -24,22 +24,17 @@ Make the document or a specific element fullscreen.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { FullscreenButton } from "drab";
 
-	let fullscreenDiv;
+	let target: HTMLDivElement;
 </script>
 
-<div>
-	<FullscreenButton class="btn" />
-</div>
+<FullscreenButton class="btn" />
 
-<div
-	bind:this={fullscreenDiv}
-	class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
->
+<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
 	<div class="mb-2">Target element</div>
-	<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
 		Enable Element Fullscreen
 	</FullscreenButton>
 </div>
@@ -55,7 +50,7 @@ export let title = "";
 export let target = null;
 export let confirmMessage = "";
 export let classNoscript = "";
-let supported = false;
+let disabled = true;
 let fullscreen = false;
 const onClick = () => {
   if (fullscreen) {
@@ -74,7 +69,7 @@ const onClick = () => {
 };
 onMount(() => {
   if (document.documentElement.requestFullscreen)
-    supported = true;
+    disabled = false;
   if (!target)
     target = document.documentElement;
 });
@@ -84,7 +79,7 @@ onMount(() => {
 
 <button
 	type="button"
-	disabled={!supported}
+	{disabled}
 	on:click={onClick}
 	class={className}
 	{id}
@@ -97,8 +92,4 @@ onMount(() => {
 	{/if}
 </button>
 
-<noscript>
-	<div class={classNoscript}>
-		{messageNoScript}
-	</div>
-</noscript>
+<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ target?: HTMLElement | null | undefined;
-        /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
+        /** message to display in the `confirm` popup, defaults to empty string `""` -- disabled */ confirmMessage?: string | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -28,7 +28,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * - `classNoscript` - `noscript` class
  * - `class`
- * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
+ * - `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
  * - `id`
  * - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
  * - `title`
@@ -43,22 +43,17 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { FullscreenButton } from "drab";
  *
- * let fullscreenDiv;
+ * let target: HTMLDivElement;
  * </script>
  *
- * <div>
  * <FullscreenButton class="btn" />
- * </div>
  *
- * <div
- * bind:this={fullscreenDiv}
- * class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
- * >
+ * <div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
  * <div class="mb-2">Target element</div>
- * <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+ * <FullscreenButton {target} class="btn btn-s bg-neutral-50">
  * 	Enable Element Fullscreen
  * </FullscreenButton>
  * </div>

package/dist/components/Popover.svelte

@@ -3,23 +3,22 @@
 
 ### Popover
 
-Displays a popover relatively positioned to the target.
+Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
 
 @props
 
 - `class` 
-- `display` - if `eventType="click"`, controls the display
+- `display` - shows / hides the popover
 - `id` 
-- `position` - where the popover is displayed in relation to the target
+- `position` - where the popover is displayed in relation to the `target`
 - `target` - target element to position the popover in relation to
-- `transition` - fades in and out, set to false to disable
+- `transition` - scales the popover, set to `false` to disable
 
 @slots
 
 | name       | purpose                         | default value |
 | ---------- | ------------------------------- | ------------- |
 | `default`  | default                         | Popover       |
-| `button`   | button contents                 | Open          |
 
 @example
 
@@ -27,8 +26,7 @@ Displays a popover relatively positioned to the target.
 <script lang="ts">
 	import { Popover } from "drab";
 
-	let button: HTMLButtonElement;
-	let hoverButton: HTMLButtonElement;
+	let target: HTMLButtonElement;
 
 	let display = false;
 </script>
@@ -36,13 +34,13 @@ Displays a popover relatively positioned to the target.
 <button
 	class="btn"
 	type="button"
-	bind:this={button}
+	bind:this={target}
 	on:click={() => (display = !display)}
 >
 	{display ? "Close" : "Open"}
 </button>
 
-<Popover target={button} bind:display class="p-2">
+<Popover {target} bind:display class="p-2">
 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 		<div class="font-bold">Bottom</div>
 		<button class="btn">Button</button>
@@ -54,16 +52,16 @@ Displays a popover relatively positioned to the target.
 -->
 
 <script>import { prefersReducedMotion } from "../util/accessibility";
-import { duration } from "../util/transition";
+import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
-import { fade } from "svelte/transition";
+import { scale } from "svelte/transition";
 let className = "";
 export { className as class };
 export let id = "";
 export let display = true;
 export let position = "bottom";
 export let target;
-export let transition = { duration };
+export let transition = { duration, start };
 let popover;
 let coordinates = { x: 0, y: 0 };
 const setPosition = async () => {
@@ -124,7 +122,7 @@ onMount(() => {
 		{id}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
-		transition:fade={transition ? transition : { duration: 0 }}
+		transition:scale={transition ? transition : { duration: 0 }}
 	>
 		<slot>Popover</slot>
 	</div>

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

@@ -1,13 +1,13 @@
 import { SvelteComponent } from "svelte";
-import { type FadeParams } from "svelte/transition";
+import { type ScaleParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
+        /** shows / hides the popover */ display?: boolean | undefined;
+        /** where the popover is displayed in relation to the `target` */ position?: "top" | "bottom" | "left" | "right" | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
-        /** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
+        /** scales the popover, set to `false` to disable */ transition?: false | ScaleParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,23 +22,22 @@ export type PopoverSlots = typeof __propDef.slots;
 /**
  * ### Popover
  *
- * Displays a popover relatively positioned to the target.
+ * Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
  *
  * @props
  *
  * - `class`
- * - `display` - if `eventType="click"`, controls the display
+ * - `display` - shows / hides the popover
  * - `id`
- * - `position` - where the popover is displayed in relation to the target
+ * - `position` - where the popover is displayed in relation to the `target`
  * - `target` - target element to position the popover in relation to
- * - `transition` - fades in and out, set to false to disable
+ * - `transition` - scales the popover, set to `false` to disable
  *
  * @slots
  *
  * | name       | purpose                         | default value |
  * | ---------- | ------------------------------- | ------------- |
  * | `default`  | default                         | Popover       |
- * | `button`   | button contents                 | Open          |
  *
  * @example
  *
@@ -46,8 +45,7 @@ export type PopoverSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { Popover } from "drab";
  *
- * let button: HTMLButtonElement;
- * let hoverButton: HTMLButtonElement;
+ * let target: HTMLButtonElement;
  *
  * let display = false;
  * </script>
@@ -55,13 +53,13 @@ export type PopoverSlots = typeof __propDef.slots;
  * <button
  * class="btn"
  * type="button"
- * bind:this={button}
+ * bind:this={target}
  * on:click={() => (display = !display)}
  * >
  * {display ? "Close" : "Open"}
  * </button>
  *
- * <Popover target={button} bind:display class="p-2">
+ * <Popover {target} bind:display class="p-2">
  * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 	<div class="font-bold">Bottom</div>
  * 	<button class="btn">Button</button>

package/dist/components/ShareButton.svelte

@@ -10,7 +10,7 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 	- `files` - uses a hidden `anchor` element to download the first file in the `files` array
 - If no JavaScript:
 	- `button` is disabled
-	- `url` - displayed after the button
+	- `url` - displayed after the `button`
 
 @props
 

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

@@ -28,7 +28,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
  * - `files` - uses a hidden `anchor` element to download the first file in the `files` array
  * - If no JavaScript:
  * - `button` is disabled
- * - `url` - displayed after the button
+ * - `url` - displayed after the `button`
  *
  * @props
  *

package/dist/components/Sheet.svelte

@@ -3,7 +3,7 @@
 
 ### Sheet
 
-Creates a sheet element based on the `position` provided.
+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
 
@@ -13,7 +13,7 @@ Creates a sheet element based on the `position` provided.
 - `id` 
 - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
-- `transitionSheet` - slides the sheet, set to `false` to remove
+- `transitionSheet` - flys the sheet, set to `false` to remove
 - `transition` - blurs the entire component, set to `false` to remove
 
 @slots
@@ -31,16 +31,15 @@ Creates a sheet element based on the `position` provided.
 	let display = false;
 </script>
 
-<div>
-	<button type="button" class="btn" on:click={() => (display = true)}>
-		Open
-	</button>
-</div>
+<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>

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;
-        /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
+        /** flys the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,7 +24,7 @@ export type SheetSlots = typeof __propDef.slots;
 /**
  * ### Sheet
  *
- * Creates a sheet element based on the `position` provided.
+ * 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
  *
@@ -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` - slides the sheet, set to `false` to remove
+ * - `transitionSheet` - flys the sheet, set to `false` to remove
  * - `transition` - blurs the entire component, set to `false` to remove
  *
  * @slots
@@ -52,16 +52,15 @@ export type SheetSlots = typeof __propDef.slots;
  * let display = false;
  * </script>
  *
- * <div>
  * <button type="button" class="btn" on:click={() => (display = true)}>
- * 	Open
+ * Open
  * </button>
- * </div>
  *
  * <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>

package/dist/components/Tabs.svelte

@@ -3,7 +3,7 @@
 
 ### Tabs
 
-Displays tabs and the selected tab's content.
+Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props. 
 
 @props
 
@@ -29,7 +29,7 @@ Displays tabs and the selected tab's content.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Tabs } from "drab";
 	import { FullscreenButton } from "drab";
 </script>

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

@@ -42,7 +42,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the selected tab's content.
+ * Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
  *
  * @props
  *
@@ -68,7 +68,7 @@ export type TabsSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Tabs } from "drab";
  * import { FullscreenButton } from "drab";
  * </script>

package/dist/components/YouTube.svelte

@@ -3,7 +3,7 @@
 
 ### YouTube
 
-Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
 
 @props
 
@@ -17,7 +17,7 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { YouTube } from "drab";
 </script>
 

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

@@ -19,7 +19,7 @@ export type YouTubeSlots = typeof __propDef.slots;
 /**
  * ### YouTube
  *
- * Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+ * Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
  *
  * @props
  *
@@ -33,7 +33,7 @@ export type YouTubeSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { YouTube } from "drab";
  * </script>
  *

package/dist/util/transition.d.ts

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

package/dist/util/transition.js

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

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "drab",
-	"version": "2.8.0",
+	"version": "2.8.2",
 	"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"
 	],