drab 2.5.0 → 2.6.1

package/dist/components/Accordion.svelte

@@ -39,7 +39,6 @@ Displays a list of `details` elements.
 	icon={Chevron}
 	classDetails="border-b"
 	classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
-	classContent="pb-4"
 	items={[
 		{ summary: "Is it accessible?", content: "Yes." },
 		{
@@ -54,7 +53,7 @@ Displays a list of `details` elements.
 	]}
 >
 	<svelte:fragment slot="content" let:item let:index>
-		<div class="mb-4">
+		<div class="pb-4">
 			<span>{index + 1}.</span>
 			<span>{item.content}</span>
 		</div>

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

@@ -85,7 +85,6 @@ export type AccordionSlots = typeof __propDef.slots;
  * icon={Chevron}
  * classDetails="border-b"
  * classHeader="flex gap-8 cursor-pointer items-center justify-between py-4 font-bold hover:underline"
- * classContent="pb-4"
  * items={[
  * 	{ summary: "Is it accessible?", content: "Yes." },
  * 	{
@@ -100,7 +99,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * ]}
  * >
  * <svelte:fragment slot="content" let:item let:index>
- * 	<div class="mb-4">
+ * 	<div class="pb-4">
  * 		<span>{index + 1}.</span>
  * 		<span>{item.content}</span>
  * 	</div>

package/dist/components/Breakpoint.svelte

@@ -0,0 +1,71 @@
+<!--
+@component
+
+### Breakpoints
+
+Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
+
+```svelte
+<script lang="ts">
+	import { dev } from "$app/environment"; // SvelteKit Example
+</script>
+
+{#if dev}
+	<Breakpoint
+		class="fixed bottom-4 right-4 rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
+	/>
+{/if}
+```
+
+@props
+
+- `breakpoints` - array of objects representing the breakpoints of the application
+- `class` 
+- `id` 
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Breakpoint } from "drab";
+</script>
+
+<div>
+	<Breakpoint
+		class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+	/>
+</div>
+```
+-->
+
+<script>import { messageNoScript } from "../util/messages";
+let className = "";
+export { className as class };
+export let id = "";
+export let breakpoints = [
+  { name: "sm", width: 640 },
+  { name: "md", width: 768 },
+  { name: "lg", width: 1024 },
+  { name: "xl", width: 1280 },
+  { name: "2xl", width: 1536 }
+];
+breakpoints.sort((a, b) => b.width - a.width);
+let innerWidth = 0;
+$:
+  breakpoint = getBreakpoint(innerWidth);
+const getBreakpoint = (innerWidth2) => {
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (innerWidth2 > breakpoints[i].width) {
+      return breakpoints[i].name;
+    }
+  }
+  return "none";
+};
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class={className} {id}>
+	{breakpoint}:{innerWidth}
+	<noscript>{messageNoScript}</noscript>
+</div>

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

@@ -0,0 +1,58 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** array of objects representing the breakpoints of the application */ breakpoints?: {
+            name: string;
+            width: number;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreakpointProps = typeof __propDef.props;
+export type BreakpointEvents = typeof __propDef.events;
+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).
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { dev } from "$app/environment"; // SvelteKit Example
+ * </script>
+ *
+ * {#if dev}
+ * <Breakpoint
+ * 	class="fixed bottom-4 right-4 rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
+ * />
+ * {/if}
+ * ```
+ *
+ * @props
+ *
+ * - `breakpoints` - array of objects representing the breakpoints of the application
+ * - `class`
+ * - `id`
+ *
+ * @example
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { Breakpoint } from "drab";
+ * </script>
+ *
+ * <div>
+ * <Breakpoint
+ * 	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+ * />
+ * </div>
+ * ```
+ */
+export default class Breakpoint extends SvelteComponent<BreakpointProps, BreakpointEvents, BreakpointSlots> {
+}
+export {};

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,7 +3,7 @@
 
 ### ContextMenu
 
-Displays when the parent element is right clicked.
+Displays when the parent element is right clicked, or long pressed on mobile.
 
 @props
 
@@ -11,6 +11,7 @@ Displays when the parent element is right clicked.
 - `class` 
 - `display` - controls `display` css property
 - `id` 
+- `transition` - fades the content, set to `false` to remove
 
 @slots
 
@@ -27,12 +28,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 +41,19 @@ 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 +61,79 @@ 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}
+
+<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
 
 <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,12 @@
 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,7 +21,7 @@ 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
  *
@@ -27,6 +29,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - controls `display` css property
  * - `id`
+ * - `transition` - fades the content, set to `false` to remove
  *
  * @slots
  *
@@ -43,12 +46,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

@@ -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/DataTable.svelte

@@ -62,7 +62,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 	class="tabular-nums"
 	classTh="cursor-pointer uppercase"
 	classThSorted="underline"
-	classTbodyTr="transition hover:bg-gray-50"
+	classTbodyTr="transition hover:bg-neutral-50"
 	classFooter="flex justify-between items-center"
 	classButton="btn"
 />

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

@@ -101,7 +101,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * class="tabular-nums"
  * classTh="cursor-pointer uppercase"
  * classThSorted="underline"
- * classTbodyTr="transition hover:bg-gray-50"
+ * classTbodyTr="transition hover:bg-neutral-50"
  * classFooter="flex justify-between items-center"
  * classButton="btn"
  * />

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,10 +36,10 @@ 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">
+	<FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
 		<span>Enable Element Fullscreen</span>
 		<span slot="enabled">Exit Element Fullscreen</span>
 	</FullscreenButton>
@@ -52,8 +52,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 +62,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 +76,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,10 +55,10 @@ 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">
+ * <FullscreenButton target={fullscreenDiv} class="btn btn-s bg-neutral-50">
  * 	<span>Enable Element Fullscreen</span>
  * 	<span slot="enabled">Exit Element Fullscreen</span>
  * </FullscreenButton>