drab 2.6.0 → 2.7.0

package/dist/components/Accordion.svelte

@@ -3,7 +3,7 @@
 
 ### Accordion
 
-Displays a list of `details` elements.
+Displays a list of `details` elements with helpful defaults and transitions.
 
 @props
 
@@ -30,16 +30,18 @@ Displays a list of `details` elements.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Accordion } from "drab";
+	import { FullscreenButton } from "drab";
 	import { Chevron } from "../../site/svg/Chevron.svelte";
 </script>
 
 <Accordion
 	icon={Chevron}
+	class="mb-12"
 	classDetails="border-b"
-	classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
-	classContent="pb-4"
+	classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+	classContent="pb-4 px-4"
 	items={[
 		{ summary: "Is it accessible?", content: "Yes." },
 		{
@@ -52,12 +54,35 @@ Displays a list of `details` elements.
 		},
 		{ summary: "Does it work without Javascript?", content: "Yes." },
 	]}
+/>
+
+<Accordion
+	icon={Chevron}
+	classDetails="border-b"
+	classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+	classContent="pb-4 px-4"
+	autoClose={false}
+	items={[
+		{ summary: "Summary", content: "Content" },
+		{ summary: "Summary", content: "Content", data: { uppercase: true } },
+		{
+			summary: "Summary",
+			content: "Content",
+			data: { component: FullscreenButton },
+		},
+	]}
 >
-	<svelte:fragment slot="content" let:item let:index>
-		<div class="mb-4">
-			<span>{index + 1}.</span>
-			<span>{item.content}</span>
-		</div>
+	<svelte:fragment slot="summary" let:item let:index>
+		<span class:uppercase={item.data?.uppercase}>
+			{item.summary}
+			{index + 1}
+		</span>
+	</svelte:fragment>
+	<svelte:fragment slot="content" let:item>
+		<span>{item.content}</span>
+		{#if item.data?.component === FullscreenButton}
+			<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
+		{/if}
 	</svelte:fragment>
 </Accordion>
 ```

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

@@ -49,7 +49,7 @@ export type AccordionSlots = typeof __propDef.slots;
 /**
  * ### Accordion
  *
- * Displays a list of `details` elements.
+ * Displays a list of `details` elements with helpful defaults and transitions.
  *
  * @props
  *
@@ -76,16 +76,18 @@ export type AccordionSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Accordion } from "drab";
+ * import { FullscreenButton } from "drab";
  * import { Chevron } from "../../site/svg/Chevron.svelte";
  * </script>
  *
  * <Accordion
  * icon={Chevron}
+ * class="mb-12"
  * classDetails="border-b"
- * classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
- * classContent="pb-4"
+ * classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+ * classContent="pb-4 px-4"
  * items={[
  * 	{ summary: "Is it accessible?", content: "Yes." },
  * 	{
@@ -98,12 +100,35 @@ export type AccordionSlots = typeof __propDef.slots;
  * 	},
  * 	{ summary: "Does it work without Javascript?", content: "Yes." },
  * ]}
+ * />
+ *
+ * <Accordion
+ * icon={Chevron}
+ * classDetails="border-b"
+ * classHeader="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
+ * classContent="pb-4 px-4"
+ * autoClose={false}
+ * items={[
+ * 	{ summary: "Summary", content: "Content" },
+ * 	{ summary: "Summary", content: "Content", data: { uppercase: true } },
+ * 	{
+ * 		summary: "Summary",
+ * 		content: "Content",
+ * 		data: { component: FullscreenButton },
+ * 	},
+ * ]}
  * >
- * <svelte:fragment slot="content" let:item let:index>
- * 	<div class="mb-4">
- * 		<span>{index + 1}.</span>
- * 		<span>{item.content}</span>
- * 	</div>
+ * <svelte:fragment slot="summary" let:item let:index>
+ * 	<span class:uppercase={item.data?.uppercase}>
+ * 		{item.summary}
+ * 		{index + 1}
+ * 	</span>
+ * </svelte:fragment>
+ * <svelte:fragment slot="content" let:item>
+ * 	<span>{item.content}</span>
+ * 	{#if item.data?.component === FullscreenButton}
+ * 		<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
+ * 	{/if}
  * </svelte:fragment>
  * </Accordion>
  * ```

package/dist/components/Breakpoint.svelte

@@ -3,7 +3,9 @@
 
 ### Breakpoints
 
-Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
+Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
+
+With SvelteKit, this component can be wrapped in an `{#if dev}` block that checks for the [dev module](https://kit.svelte.dev/docs/modules#$app-environment-dev), to show only during development.
 
 @props
 

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

@@ -19,7 +19,9 @@ export type BreakpointSlots = typeof __propDef.slots;
 /**
  * ### Breakpoints
  *
- * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
+ * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
+ *
+ * With SvelteKit, this component can be wrapped in an `{#if dev}` block that checks for the [dev module](https://kit.svelte.dev/docs/modules#$app-environment-dev), to show only during development.
  *
  * @props
  *

package/dist/components/Chord.svelte

@@ -22,7 +22,7 @@ Generates a guitar chord `svg`.
 </script>
 
 <Chord
-	class="text-gray-950"
+	class="text-neutral-950"
 	name="D"
 	notes={[
 		{

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

@@ -46,7 +46,7 @@ export type ChordSlots = typeof __propDef.slots;
  * </script>
  *
  * <Chord
- * class="text-gray-950"
+ * class="text-neutral-950"
  * name="D"
  * notes={[
  * 	{

package/dist/components/ContextMenu.svelte

@@ -3,14 +3,14 @@
 
 ### ContextMenu
 
-Displays when the parent element is right clicked.
+Displays when the parent element is right clicked, or long pressed on mobile.
 
 @props
 
-- `classNoscript` - `noscript` class
 - `class` 
 - `display` - controls `display` css property
 - `id` 
+- `transition` - fades the content, set to `false` to remove
 
 @slots
 
@@ -27,12 +27,12 @@ Displays when the parent element is right clicked.
 
 <div class="flex justify-center rounded border border-dashed p-12">
 	<div>Right click here</div>
-	<ContextMenu class="transition">
-		<div class="card flex w-48 flex-col gap-2">
+	<ContextMenu>
+		<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
 			<div class="font-bold">Context Menu</div>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
-			<button class="btn">Button</button>
+			<button role="menuitem" class="btn">Button</button>
+			<button role="menuitem" class="btn">Button</button>
+			<button role="menuitem" class="btn">Button</button>
 		</div>
 	</ContextMenu>
 </div>
@@ -40,12 +40,18 @@ Displays when the parent element is right clicked.
 -->
 
 <script>import { onMount, tick } from "svelte";
+import { fade } from "svelte/transition";
+import { duration } from "../util/transition";
+import { messageNoScript } from "../util/messages";
+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 classNoscript = "";
+export let transition = { duration };
 let contextMenu;
+let base;
 let coordinates = { x: 0, y: 0 };
 const hide = () => display = false;
 const onKeyDown = (e) => {
@@ -53,58 +59,77 @@ const onKeyDown = (e) => {
     display = false;
   }
 };
+const displayMenu = async (e) => {
+  e.preventDefault();
+  const scrollY = window.scrollY;
+  const scrollX = window.scrollX;
+  const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+  const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+  coordinates.x = clientX + scrollX;
+  coordinates.y = clientY + scrollY;
+  display = true;
+  await tick();
+  const offsetWidth = contextMenu.offsetWidth + 24;
+  const offsetHeight = contextMenu.offsetHeight + 6;
+  const innerWidth = window.innerWidth;
+  const innerHeight = window.innerHeight;
+  if (coordinates.x + offsetWidth > scrollX + innerWidth) {
+    coordinates.x = scrollX + innerWidth - offsetWidth;
+  }
+  if (coordinates.y + offsetHeight > scrollY + innerHeight) {
+    coordinates.y = scrollY + innerHeight - offsetHeight;
+  }
+};
+let timer;
+const onTouchStart = (e) => {
+  timer = setTimeout(() => {
+    displayMenu(e);
+  }, delay);
+};
+const onTouchEnd = () => {
+  clearTimeout(timer);
+};
 onMount(() => {
-  const parentElement = contextMenu.parentElement;
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  const parentElement = base.parentElement;
   if (parentElement) {
-    parentElement.addEventListener("contextmenu", async (e) => {
-      if (contextMenu) {
-        e.preventDefault();
-        const scrollY = window.scrollY;
-        const scrollX = window.scrollX;
-        coordinates.x = e.clientX + scrollX;
-        coordinates.y = e.clientY + scrollY;
-        display = true;
-        await tick();
-        const offsetWidth = contextMenu.offsetWidth + 24;
-        const offsetHeight = contextMenu.offsetHeight + 6;
-        const innerWidth = window.innerWidth;
-        const innerHeight = window.innerHeight;
-        if (coordinates.x + offsetWidth > scrollX + innerWidth) {
-          coordinates.x = scrollX + innerWidth - offsetWidth;
-        }
-        if (coordinates.y + offsetHeight > scrollY + innerHeight) {
-          coordinates.y = scrollY + innerHeight - offsetHeight;
-        }
-      }
-    });
+    parentElement.addEventListener("contextmenu", displayMenu);
+    parentElement.addEventListener("touchstart", onTouchStart);
+    parentElement.addEventListener("touchend", onTouchEnd);
+    parentElement.addEventListener("touchcancel", onTouchEnd);
   }
 });
 </script>
 
 <svelte:body on:click={hide} on:keydown={onKeyDown} />
 
-<div
-	class={className}
-	{id}
-	bind:this={contextMenu}
-	style:z-index={display ? "10" : "-10"}
-	style:opacity={display ? "100%" : "0%"}
-	style:top="{coordinates.y}px"
-	style:left="{coordinates.x}px"
-	inert={display ? false : true}
->
-	<slot>Context Menu</slot>
-</div>
+<span bind:this={base} role="presentation"></span>
 
-<noscript>
-	<div class={classNoscript}>
-		<slot />
+{#if display}
+	<div
+		role="menu"
+		class={className}
+		{id}
+		bind:this={contextMenu}
+		style:top="{coordinates.y}px"
+		style:left="{coordinates.x}px"
+		transition:fade={transition ? transition : { duration: 0 }}
+	>
+		<slot>Context Menu</slot>
 	</div>
-</noscript>
+{/if}
 
 <style>
+	span {
+		width: 0;
+		height: 0;
+		opacity: 0;
+	}
 	div {
 		position: absolute;
-		z-index: 1;
+		z-index: 10;
 	}
 </style>

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

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
         /** controls `display` css property */ display?: boolean | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
+        /** fades the content, set to `false` to remove */ transition?: false | FadeParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,14 +20,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
 /**
  * ### ContextMenu
  *
- * Displays when the parent element is right clicked.
+ * Displays when the parent element is right clicked, or long pressed on mobile.
  *
  * @props
  *
- * - `classNoscript` - `noscript` class
  * - `class`
  * - `display` - controls `display` css property
  * - `id`
+ * - `transition` - fades the content, set to `false` to remove
  *
  * @slots
  *
@@ -43,12 +44,12 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * <div class="flex justify-center rounded border border-dashed p-12">
  * <div>Right click here</div>
- * <ContextMenu class="transition">
- * 	<div class="card flex w-48 flex-col gap-2">
+ * <ContextMenu>
+ * 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
  * 		<div class="font-bold">Context Menu</div>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
- * 		<button class="btn">Button</button>
+ * 		<button role="menuitem" class="btn">Button</button>
+ * 		<button role="menuitem" class="btn">Button</button>
+ * 		<button role="menuitem" class="btn">Button</button>
  * 	</div>
  * </ContextMenu>
  * </div>

package/dist/components/CopyButton.svelte

@@ -3,7 +3,7 @@
 
 ### CopyButton
 
-Uses the navigator api 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.
 
 @props
 
@@ -34,10 +34,11 @@ Uses the navigator api to copy text to the clipboard.
 -->
 
 <script>import { onMount } from "svelte";
+import { delay } from "../util/delay";
 let className = "";
 export { className as class };
 export let id = "";
-export let title = "Copy";
+export let title = "";
 export let text;
 export let classNoscript = "";
 let clientJs = false;
@@ -46,7 +47,7 @@ const copyText = async () => {
   try {
     await navigator.clipboard.writeText(text);
     complete = true;
-    setTimeout(() => complete = false, 800);
+    setTimeout(() => complete = false, delay);
   } catch (error) {
     console.error(error);
   }
@@ -54,7 +55,14 @@ const copyText = async () => {
 onMount(() => clientJs = true);
 </script>
 
-<button disabled={!clientJs} on:click={copyText} class={className} {id} {title}>
+<button
+	type="button"
+	disabled={!clientJs}
+	on:click={copyText}
+	class={className}
+	{id}
+	{title}
+>
 	{#if complete}
 		<slot name="complete">Copied</slot>
 	{:else}

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

@@ -21,7 +21,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
 /**
  * ### CopyButton
  *
- * Uses the navigator api 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.
  *
  * @props
  *

package/dist/components/DataTable.svelte

@@ -28,15 +28,18 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `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
 
@@ -46,6 +49,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 </script>
 
 <DataTable
+	class="mb-12"
 	data={[
 		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
 		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
@@ -57,15 +61,49 @@ Data table to display an array of JS objects. Click a column header to sort.
 		{ 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>
 ```
 -->
 
@@ -97,12 +135,12 @@ export let classButton = "";
 export let classFooter = "";
 export let classPageNumber = "";
 export let classPageControls = "";
-export let paginate = 0;
+export let maxRows = 0;
 export let currentPage = 1;
 export let classNoscript = "";
 let clientJs = false;
 $:
-  numberOfPages = Math.floor(data.length / paginate) + 1;
+  numberOfPages = Math.floor(data.length / maxRows) + 1;
 const sort = (column, toggleAscending = true) => {
   if (column === sortBy && toggleAscending) {
     ascending = !ascending;
@@ -150,7 +188,7 @@ onMount(() => clientJs = true);
 						class="{classTh} {sortBy === column ? classThSorted : ''}"
 						on:click={() => sort(column)}
 					>
-						{column}
+						<slot name="th" {column}>{column}</slot>
 					</th>
 				{/each}
 			</tr>
@@ -158,12 +196,12 @@ onMount(() => clientJs = true);
 		<tbody class={classTbody}>
 			{#each data as row, i}
 				{@const showRow =
-					i < paginate * currentPage && i >= paginate * (currentPage - 1)}
-				{#if paginate ? showRow : true}
+					i < maxRows * currentPage && i >= maxRows * (currentPage - 1)}
+				{#if maxRows ? showRow : true}
 					<tr class={classTbodyTr}>
 						{#each columns as column}
 							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
-								{row[column]}
+								<slot name="td" {row} {column}>{row[column]}</slot>
 							</td>
 						{/each}
 					</tr>
@@ -172,23 +210,29 @@ onMount(() => clientJs = true);
 		</tbody>
 	</table>
 
-	{#if paginate}
+	{#if maxRows}
 		<div class={classFooter}>
-			<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+			<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">Previous</slot>
+					<slot name="previous" {currentPage}>Previous</slot>
 				</button>
 				<button
+					type="button"
 					class={classButton}
 					disabled={!clientJs || currentPage >= numberOfPages}
 					on:click={() => currentPage++}
 				>
-					<slot name="next">Next</slot>
+					<slot name="next" {currentPage}>Next</slot>
 				</button>
 			</div>
 		</div>