drab 2.8.1 → 2.8.2

package/dist/components/ContextMenu.svelte

@@ -11,7 +11,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 - `display` - shows / hides the menu
 - `id` 
 - `target` - target element to right click, defaults to the parent element
-- `transition` - fades the content, set to `false` to remove
+- `transition` - scales the menu, set to `false` to disable
 
 @slots
 
@@ -40,7 +40,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 	</ContextMenu>
 </div>
 
-<button class="btn" bind:this={target}>Target Right Click</button>
+<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>
@@ -53,15 +53,15 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 -->
 
 <script>import { onMount, tick } from "svelte";
-import { fade } from "svelte/transition";
-import { duration } from "../util/transition";
+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;
@@ -102,11 +102,12 @@ const onTouchStart = (e) => {
 const onTouchEnd = () => {
   clearTimeout(timer);
 };
-onMount(() => {
+onMount(async () => {
   if (prefersReducedMotion()) {
     if (transition)
       transition.duration = 0;
   }
+  await tick();
   if (!target) {
     target = base.parentElement;
   }
@@ -131,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,11 @@
 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;
         /** shows / hides the menu */ display?: boolean | undefined;
-        /** fades the content, set to `false` to remove */ transition?: false | FadeParams | 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: {
@@ -29,7 +29,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * - `display` - shows / hides the menu
  * - `id`
  * - `target` - target element to right click, defaults to the parent element
- * - `transition` - fades the content, set to `false` to remove
+ * - `transition` - scales the menu, set to `false` to disable
  *
  * @slots
  *
@@ -58,7 +58,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * </ContextMenu>
  * </div>
  *
- * <button class="btn" bind:this={target}>Target Right Click</button>
+ * <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>

package/dist/components/DataTable.svelte

@@ -1,11 +1,11 @@
-<!--
-@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
+<!--
+@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
 
 - `ascending` - current sort order
 - `classButton` - `button` class
@@ -32,17 +32,17 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 - `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 lang="ts">
@@ -106,10 +106,10 @@ Data table to display an array of JS objects. Provides sorting and pagination. S
 	</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/FullscreenButton.svelte

@@ -30,9 +30,9 @@ Make the document or a specific element fullscreen.
 	let target: HTMLDivElement;
 </script>
 
-<FullscreenButton class="btn mb-8" />
+<FullscreenButton class="btn" />
 
-<div bind:this={target} class="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} class="btn btn-s bg-neutral-50">
 		Enable Element Fullscreen

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

@@ -49,9 +49,9 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * let target: HTMLDivElement;
  * </script>
  *
- * <FullscreenButton class="btn mb-8" />
+ * <FullscreenButton class="btn" />
  *
- * <div bind:this={target} class="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} class="btn btn-s bg-neutral-50">
  * 	Enable Element Fullscreen

package/dist/components/Popover.svelte

@@ -10,9 +10,9 @@ Displays a popover relatively positioned to the target. Does not require the tar
 - `class` 
 - `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
 
@@ -52,16 +52,16 @@ Displays a popover relatively positioned to the target. Does not require the tar
 -->
 
 <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 () => {
@@ -122,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;
         /** shows / hides the popover */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | 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>;
@@ -29,9 +29,9 @@ export type PopoverSlots = typeof __propDef.slots;
  * - `class`
  * - `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
  *

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.1",
+	"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"
 	],