drab 2.6.0 → 2.7.0

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         id?: string | undefined;
         /** 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;
+        /** 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;
@@ -24,7 +24,7 @@ declare const __propDef: {
         /** `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;
+        /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
@@ -32,8 +32,23 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        previous: {};
-        next: {};
+        th: {
+            column: string;
+        };
+        td: {
+            row: DataTableRow<any>;
+            column: string;
+        };
+        pageNumber: {
+            currentPage: number;
+            numberOfPages: number;
+        };
+        previous: {
+            currentPage: number;
+        };
+        next: {
+            currentPage: number;
+        };
     };
 };
 export type DataTableProps = typeof __propDef.props;
@@ -67,15 +82,18 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `data` - a list of objects to render in the table
  * - `idTable` - `table` id
  * - `id`
- * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
- * - `sortBy` - column to sort by--defaults to first column
+ * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
+ * - `sortBy` - column to sort by, defaults to first column
  *
  * @slots
  *
- * | name       | purpose                  | default value |
- * | ---------- | ------------------------ | ------------- |
- * | `previous` | previous button contents | `Previous`    |
- * | `next`     | next button contents     | `Next`        |
+ * | 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
  *
@@ -85,6 +103,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * </script>
  *
  * <DataTable
+ * class="mb-12"
  * data={[
  * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
  * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
@@ -96,15 +115,49 @@ export type DataTableSlots = typeof __propDef.slots;
  * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
  * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
  * ]}
- * sortBy="make"
- * paginate={4}
+ * />
+ *
+ * <DataTable
+ * data={[
+ * 	{ make: "Honda", model: "CR-V", year: 2011, awd: true },
+ * 	{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
+ * 	{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
+ * 	{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
+ * 	{ make: "Ford", model: "Model A", year: 1931, awd: false },
+ * 	{ make: "Subaru", model: "Outback", year: 2021, awd: true },
+ * 	{ make: "Ford", model: "Bronco", year: 1970, awd: true },
+ * 	{ make: "GMC", model: "Acadia", year: 2008, awd: true },
+ * 	{ make: "BMW", model: "X3", year: 2023, awd: true },
+ * ]}
+ * sortBy="year"
+ * maxRows={4}
  * class="tabular-nums"
- * classTh="cursor-pointer uppercase"
+ * classTh="cursor-pointer"
  * classThSorted="underline"
- * classTbodyTr="transition hover:bg-gray-50"
+ * classTbodyTr="transition hover:bg-neutral-50"
  * classFooter="flex justify-between items-center"
  * classButton="btn"
- * />
+ * >
+ * <svelte:fragment slot="th" let:column>
+ * 	{#if column === "awd"}
+ * 		<span class="uppercase">{column}</span>
+ * 	{:else}
+ * 		{column}
+ * 	{/if}
+ * </svelte:fragment>
+ * <svelte:fragment slot="td" let:column let:row>
+ * 	{@const item = row[column]}
+ * 	{#if typeof item === "boolean"}
+ * 		{#if item}
+ * 			Yes
+ * 		{:else}
+ * 			No
+ * 		{/if}
+ * 	{:else}
+ * 		{item}
+ * 	{/if}
+ * </svelte:fragment>
+ * </DataTable>
  * ```
  */
 export default class DataTable extends SvelteComponent<DataTableProps, DataTableEvents, DataTableSlots> {

package/dist/components/Editor.svelte

@@ -363,6 +363,7 @@ onMount(() => clientJs = true);
 <div id={idControls} class={classControls}>
 	{#each contentElements as el}
 		<button
+			type="button"
 			class={el.class ? `${classButton} ${el.class}` : classButton}
 			on:click={() => addContent(el)}
 			title={el.name}

package/dist/components/FullscreenButton.svelte

@@ -11,7 +11,7 @@ Make the document or a specific element fullscreen.
 - `class` 
 - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
 - `id` 
-- `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
+- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
 - `title` 
 
 @slots
@@ -36,12 +36,11 @@ Make the document or a specific element fullscreen.
 
 <div
 	bind:this={fullscreenDiv}
-	class="mt-4 rounded bg-gray-800 p-4 text-gray-50"
+	class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
 >
-	<div class="mb-2">Target element fullscreen</div>
-	<FullscreenButton targetElement={fullscreenDiv} class="btn">
-		<span>Enable Element Fullscreen</span>
-		<span slot="enabled">Exit Element Fullscreen</span>
+	<div class="mb-2">Target element</div>
+	<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+		Enable Element Fullscreen
 	</FullscreenButton>
 </div>
 ```
@@ -52,8 +51,8 @@ import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
-export let title = "Fullscreen";
-export let targetElement = null;
+export let title = "";
+export let target = null;
 export let confirmMessage = "";
 export let classNoscript = "";
 let supported = false;
@@ -62,13 +61,13 @@ const onClick = () => {
   if (fullscreen) {
     document.exitFullscreen();
   } else {
-    if (targetElement && targetElement.requestFullscreen) {
+    if (target && target.requestFullscreen) {
       if (confirmMessage) {
         const permission = confirm(confirmMessage);
         if (permission)
-          targetElement.requestFullscreen();
+          target.requestFullscreen();
       } else {
-        targetElement.requestFullscreen();
+        target.requestFullscreen();
       }
     }
   }
@@ -76,14 +75,21 @@ const onClick = () => {
 onMount(() => {
   if (document.documentElement.requestFullscreen)
     supported = true;
-  if (!targetElement)
-    targetElement = document.documentElement;
+  if (!target)
+    target = document.documentElement;
 });
 </script>
 
 <svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
 
-<button disabled={!supported} on:click={onClick} class={className} {id} {title}>
+<button
+	type="button"
+	disabled={!supported}
+	on:click={onClick}
+	class={className}
+	{id}
+	{title}
+>
 	{#if fullscreen}
 		<slot name="enabled">Exit Fullscreen</slot>
 	{:else}

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         title?: string | undefined;
-        /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: HTMLElement | null | 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;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
@@ -30,7 +30,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * - `class`
  * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
  * - `id`
- * - `targetElement` - element to make fullscreen (defaults to `document.documentElement` upon mount)
+ * - `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
  * - `title`
  *
  * @slots
@@ -55,12 +55,11 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * <div
  * bind:this={fullscreenDiv}
- * class="mt-4 rounded bg-gray-800 p-4 text-gray-50"
+ * class="mt-4 rounded bg-neutral-800 p-4 text-neutral-50"
  * >
- * <div class="mb-2">Target element fullscreen</div>
- * <FullscreenButton targetElement={fullscreenDiv} class="btn">
- * 	<span>Enable Element Fullscreen</span>
- * 	<span slot="enabled">Exit Element Fullscreen</span>
+ * <div class="mb-2">Target element</div>
+ * <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
+ * 	Enable Element Fullscreen
  * </FullscreenButton>
  * </div>
  * ```

package/dist/components/Popover.svelte

@@ -3,19 +3,16 @@
 
 ### Popover
 
-Displays a popover relatively positioned to the button.
+Displays a popover relatively positioned to the target.
 
 @props
 
-- `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
-- `idPopover` - popover id
 - `id` 
-- `position` - where the popover is displayed in relation to the button
+- `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
 
 @slots
 
@@ -27,28 +24,27 @@ Displays a popover relatively positioned to the button.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Popover } from "drab";
+
+	let button: HTMLButtonElement;
+	let hoverButton: HTMLButtonElement;
+
+	let display = false;
 </script>
 
-<Popover classButton="btn" classPopover="p-2 transition">
-	<span slot="button">Hover</span>
-	<div class="card flex w-48 flex-col gap-2">
-		<div class="font-bold">Bottom</div>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-	</div>
-</Popover>
-<Popover
-	classButton="btn"
-	classPopover="p-2 transition"
-	eventType="click"
-	position="right"
+<button
+	class="btn"
+	type="button"
+	bind:this={button}
+	on:click={() => (display = !display)}
 >
-	<span slot="button">Click</span>
-	<div class="card flex w-48 flex-col gap-2">
-		<div class="font-bold">Right</div>
+	{display ? "Close" : "Open"}
+</button>
+
+<Popover target={button} 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>
 		<button class="btn">Button</button>
 		<button class="btn">Button</button>
@@ -57,55 +53,49 @@ Displays a popover relatively positioned to the button.
 ```
 -->
 
-<script>import { onMount, tick } from "svelte";
+<script>import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
+import { onMount, tick } from "svelte";
+import { fade } from "svelte/transition";
 let className = "";
 export { className as class };
 export let id = "";
-export let classButton = "";
-export let classPopover = "";
-export let idButton = "";
-export let idPopover = "";
-export let display = false;
+export let display = true;
 export let position = "bottom";
-export let eventType = "hover";
-let clientEventType = "hover";
+export let target;
+export let transition = { duration };
 let popover;
-let button;
 let coordinates = { x: 0, y: 0 };
-const correctPosition = async () => {
+const setPosition = async () => {
   if (position === "top" || position === "bottom") {
-    coordinates.x = button.offsetWidth / 2 - popover.offsetWidth / 2;
+    coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
     if (position === "top") {
       coordinates.y = -popover.offsetHeight;
     } else {
-      coordinates.y = button.offsetHeight;
+      coordinates.y = target.offsetHeight;
     }
   } else {
-    coordinates.y = button.offsetHeight / 2 - popover.offsetHeight / 2;
+    coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
     if (position === "left") {
       coordinates.x = -popover.offsetWidth;
     } else {
-      coordinates.x = button.offsetWidth;
+      coordinates.x = target.offsetWidth;
     }
   }
+  const targetRect = target.getBoundingClientRect();
+  coordinates.x += targetRect.x;
+  coordinates.y += targetRect.y;
   await tick();
-  const rect = popover.getBoundingClientRect();
-  if (rect.x < 0) {
-    coordinates.x += Math.abs(rect.x);
-  } else if (rect.x + popover.offsetWidth > window.innerWidth) {
-    coordinates.x -= rect.x + popover.offsetWidth - window.innerWidth + 16;
+  const popoverRect = popover.getBoundingClientRect();
+  if (popoverRect.x < 0) {
+    coordinates.x += Math.abs(popoverRect.x);
+  } else if (popoverRect.x + popover.offsetWidth > window.innerWidth) {
+    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + 16;
   }
-  if (rect.y < 0) {
-    coordinates.y += Math.abs(rect.y);
-  } else if (rect.y + popover.offsetHeight > window.innerHeight) {
-    coordinates.y -= rect.y + popover.offsetHeight - window.innerHeight;
-  }
-};
-const clickOutside = (e) => {
-  if (popover && e.target instanceof HTMLElement) {
-    if (!popover.contains(e.target)) {
-      display = false;
-    }
+  if (popoverRect.y < 0) {
+    coordinates.y += Math.abs(popoverRect.y);
+  } else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
+    coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
   }
 };
 const onKeyDown = (e) => {
@@ -113,58 +103,35 @@ const onKeyDown = (e) => {
     display = false;
   }
 };
-const openPopover = async (e) => {
-  e.stopPropagation();
-  display = true;
-};
+$:
+  if (target && popover)
+    setPosition();
 onMount(() => {
-  clientEventType = eventType;
-  correctPosition();
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
 });
 </script>
 
-<svelte:body on:keydown={onKeyDown} on:click={clickOutside} />
+<svelte:body on:keydown={onKeyDown} />
 
-<div class="db-relative {className}" {id}>
-	<button
-		bind:this={button}
-		id={idButton}
-		class={classButton}
-		on:click={openPopover}
-		on:mouseover={correctPosition}
-		on:focus={correctPosition}
-	>
-		<slot name="button">Open</slot>
-	</button>
+{#if display}
 	<div
+		role="dialog"
 		bind:this={popover}
-		id={idPopover}
-		class="db-popover {classPopover}"
-		class:db-type-click={clientEventType === "click" && display}
-		class:db-type-hover={clientEventType === "hover"}
+		class={className}
+		{id}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
-		inert={clientEventType === "hover" || display ? false : true}
+		transition:fade={transition ? transition : { duration: 0 }}
 	>
 		<slot>Popover</slot>
 	</div>
-</div>
+{/if}
 
 <style>
-	.db-relative {
-		position: relative;
-	}
-	.db-popover {
+	div {
 		position: absolute;
-		opacity: 0;
-		z-index: -10;
-	}
-	button:hover + .db-type-hover,
-	button:focus + .db-type-hover,
-	.db-type-hover:hover,
-	.db-type-hover:focus-within,
-	.db-type-click {
-		opacity: 1;
-		z-index: 10;
 	}
 </style>

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

@@ -1,21 +1,18 @@
 import { SvelteComponent } from "svelte";
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** `button` class */ classButton?: string | undefined;
-        /** popover class */ classPopover?: 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;
-        /** controls if hovering or clicking the button displays the popover */ eventType?: ("click" | "hover") | 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        button: {};
         default: {};
     };
 };
@@ -25,19 +22,16 @@ export type PopoverSlots = typeof __propDef.slots;
 /**
  * ### Popover
  *
- * Displays a popover relatively positioned to the button.
+ * Displays a popover relatively positioned to the target.
  *
  * @props
  *
- * - `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
- * - `idPopover` - popover id
  * - `id`
- * - `position` - where the popover is displayed in relation to the button
+ * - `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
  *
  * @slots
  *
@@ -49,28 +43,27 @@ export type PopoverSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Popover } from "drab";
+ *
+ * let button: HTMLButtonElement;
+ * let hoverButton: HTMLButtonElement;
+ *
+ * let display = false;
  * </script>
  *
- * <Popover classButton="btn" classPopover="p-2 transition">
- * <span slot="button">Hover</span>
- * <div class="card flex w-48 flex-col gap-2">
- * 	<div class="font-bold">Bottom</div>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * </div>
- * </Popover>
- * <Popover
- * classButton="btn"
- * classPopover="p-2 transition"
- * eventType="click"
- * position="right"
+ * <button
+ * class="btn"
+ * type="button"
+ * bind:this={button}
+ * on:click={() => (display = !display)}
  * >
- * <span slot="button">Click</span>
- * <div class="card flex w-48 flex-col gap-2">
- * 	<div class="font-bold">Right</div>
+ * {display ? "Close" : "Open"}
+ * </button>
+ *
+ * <Popover target={button} 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>
  * 	<button class="btn">Button</button>
  * 	<button class="btn">Button</button>

package/dist/components/ShareButton.svelte

@@ -3,7 +3,7 @@
 
 ### ShareButton
 
-Uses the navigator api to share or copy a url link depending on browser support.
+Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
 
 @props
 
@@ -40,6 +40,7 @@ Uses the navigator api to share or copy a url link depending on browser support.
 -->
 
 <script>import { onMount } from "svelte";
+import { delay } from "../util/delay";
 let className = "";
 export { className as class };
 export let id = "";
@@ -56,7 +57,7 @@ const onClick = async () => {
     } else {
       await navigator.clipboard.writeText(url);
       complete = true;
-      setTimeout(() => complete = false, 800);
+      setTimeout(() => complete = false, delay);
     }
   } catch (error) {
     console.log(error);
@@ -65,7 +66,14 @@ const onClick = async () => {
 onMount(() => clientJs = true);
 </script>
 
-<button disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
+<button
+	type="button"
+	disabled={!clientJs}
+	on:click={onClick}
+	class={className}
+	{id}
+	{title}
+>
 	{#if complete}
 		<slot name="complete">Copied</slot>
 	{:else}

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

@@ -22,7 +22,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
 /**
  * ### ShareButton
  *
- * Uses the navigator api to share or copy a url link depending on browser support.
+ * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
  *
  * @props
  *