drab 2.0.0 → 2.1.0

package/dist/components/Chord.svelte

@@ -47,6 +47,8 @@ Generates a guitar chord `svg`.
 ```
 -->
 
+<script context="module"></script>
+
 <script>let className = "";
 export { className as class };
 export let id = "";

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

@@ -1,4 +1,12 @@
 import { SvelteComponent } from "svelte";
+export interface ChordNote {
+    /** recommended finger to use */
+    finger: number | string;
+    /** string number */
+    string: number;
+    /** fret number */
+    fret: number;
+}
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -6,14 +14,7 @@ declare const __propDef: {
         /** total number of strings for the instrument */ strings?: number | undefined;
         /** name of chord */ name?: string | undefined;
         /** total size of chord square */ size?: number | undefined;
-        /** list of the positioning of the notes required for the chord */ notes?: {
-            /** recommended finger to use */
-            finger: number | string;
-            /** string number */
-            string: number;
-            /** fret number */
-            fret: number;
-        }[] | undefined;
+        /** list of the positioning of the notes required for the chord */ notes?: ChordNote[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/ContextMenu.svelte

@@ -7,6 +7,7 @@ Displays when the parent element is right clicked.
 
 @props
 
+- `classNoscript` - noscript class
 - `class` 
 - `display` - controls `display` css property
 - `id` 
@@ -43,29 +44,36 @@ let className = "";
 export { className as class };
 export let id = "";
 export let display = false;
+export let classNoscript = "";
 let contextMenu;
-let position = { x: 0, y: 0 };
+let coordinates = { x: 0, y: 0 };
 const hide = () => display = false;
+const onKeyDown = (e) => {
+  if (e.key === "Escape") {
+    display = false;
+  }
+};
 onMount(() => {
-  const parent = contextMenu.parentElement;
-  if (parent) {
-    parent.addEventListener("contextmenu", async (e) => {
+  const parentElement = contextMenu.parentElement;
+  if (parentElement) {
+    parentElement.addEventListener("contextmenu", async (e) => {
       if (contextMenu) {
         e.preventDefault();
         const scrollY = window.scrollY;
-        position.x = e.clientX;
-        position.y = e.clientY + 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 (position.x + offsetWidth > innerWidth) {
-          position.x = innerWidth - offsetWidth;
+        if (coordinates.x + offsetWidth > scrollX + innerWidth) {
+          coordinates.x = scrollX + innerWidth - offsetWidth;
         }
-        if (position.y + offsetHeight > scrollY + innerHeight) {
-          position.y = scrollY + innerHeight - offsetHeight;
+        if (coordinates.y + offsetHeight > scrollY + innerHeight) {
+          coordinates.y = scrollY + innerHeight - offsetHeight;
         }
       }
     });
@@ -73,21 +81,29 @@ onMount(() => {
 });
 </script>
 
-<svelte:document on:click={hide} />
+<svelte:document on:click={hide} on:keydown={onKeyDown} />
 
 <div
 	class={className}
 	{id}
 	bind:this={contextMenu}
-	style="display: {display
-		? 'block'
-		: 'none'}; top: {position.y}px; left: {position.x}px;"
+	style:z-index={display ? "10" : "-10"}
+	style:opacity={display ? "100%" : "0%"}
+	style:top="{coordinates.y}px"
+	style:left="{coordinates.x}px"
 >
 	<slot>Context Menu</slot>
 </div>
 
+<noscript>
+	<div class={classNoscript}>
+		<slot />
+	</div>
+</noscript>
+
 <style>
 	div {
 		position: absolute;
+		z-index: 1;
 	}
 </style>

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** controls `display` css property */ display?: boolean | undefined;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,6 +23,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * @props
  *
+ * - `classNoscript` - noscript class
  * - `class`
  * - `display` - controls `display` css property
  * - `id`

package/dist/components/CopyButton.svelte

@@ -7,6 +7,7 @@ Uses the navigator api to copy text to the clipboard.
 
 @props
 
+- `classNoscript` - noscript class
 - `class` 
 - `id` 
 - `text` - text to copy
@@ -30,11 +31,14 @@ Uses the navigator api to copy text to the clipboard.
 ```
 -->
 
-<script>let className = "";
+<script>import { onMount } from "svelte";
+let className = "";
 export { className as class };
 export let id = "";
 export let title = "Copy";
 export let text;
+export let classNoscript = "";
+let clientJs = false;
 let complete = false;
 const copyText = async () => {
   try {
@@ -45,12 +49,15 @@ const copyText = async () => {
     console.error(error);
   }
 };
+onMount(() => clientJs = true);
 </script>
 
-<button on:click={copyText} class={className} {id} {title}>
+<button disabled={!clientJs} on:click={copyText} class={className} {id} {title}>
 	{#if complete}
 		<slot name="complete">Copied</slot>
 	{:else}
 		<slot>Copy</slot>
 	{/if}
 </button>
+
+<noscript><span class={classNoscript}>{text}</span></noscript>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         title?: string | undefined;
         /** text to copy */ text: string;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,6 +25,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
+ * - `classNoscript` - noscript class
  * - `class`
  * - `id`
  * - `text` - text to copy

package/dist/components/DataTable.svelte

@@ -10,6 +10,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `ascending` - default sort order
 - `classButton` - button 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
 - `classTable` - table class
@@ -57,7 +58,9 @@ Data table to display an array of JS objects. Click a column header to sort.
 
 <script context="module"></script>
 
-<script>export let data;
+<script>import { messageNoScript } from "../util/messages";
+import { onMount } from "svelte";
+export let data;
 export let columns = [];
 if (!columns.length && data[0]) {
   columns = Object.keys(data[0]);
@@ -80,6 +83,8 @@ export let classPageNumber = "";
 export let classPageControls = "";
 export let paginate = 0;
 export let currentPage = 1;
+export let classNoscript = "";
+let clientJs = false;
 $:
   numberOfPages = Math.floor(data.length / paginate) + 1;
 const sort = (column, toggleAscending = true) => {
@@ -117,6 +122,7 @@ const sort = (column, toggleAscending = true) => {
   sortBy = column;
 };
 sort(sortBy, false);
+onMount(() => clientJs = true);
 </script>
 
 <table class={classTable} id={idTable}>
@@ -155,18 +161,24 @@ sort(sortBy, false);
 		<div class={classPageControls}>
 			<button
 				class={classButton}
-				disabled={currentPage < 2}
+				disabled={!clientJs || currentPage < 2}
 				on:click={() => currentPage--}
 			>
 				<slot name="previous">Previous</slot>
 			</button>
 			<button
 				class={classButton}
-				disabled={currentPage >= numberOfPages}
+				disabled={!clientJs || currentPage >= numberOfPages}
 				on:click={() => currentPage++}
 			>
 				<slot name="next">Next</slot>
 			</button>
 		</div>
 	</div>
+
+	<noscript>
+		<div class={classNoscript}>
+			{messageNoScript}
+		</div>
+	</noscript>
 {/if}

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

@@ -24,6 +24,7 @@ declare const __propDef: {
         /** 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;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -46,6 +47,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `ascending` - default sort order
  * - `classButton` - button 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
  * - `classTable` - table class

package/dist/components/Editor.svelte

@@ -9,6 +9,7 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 - `classButton` - `class` of all the `button` elements
 - `classControls` - `class` of the `div` that wraps the controls
+- `classNoscript` - noscript class
 - `classTextarea` - `class` of the `textarea` element
 - `contentElements` - an array of content elements for the controls
 - `idControls` - `id` of the `div` that wraps the controls
@@ -55,7 +56,9 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 <script context="module"></script>
 
-<script>export let contentElements = [];
+<script>import { onMount } from "svelte";
+import { messageNoScript } from "../util/messages";
+export let contentElements = [];
 export let valueTextarea = "";
 export let placeholderTextarea = "";
 export let classTextarea = "";
@@ -73,6 +76,8 @@ export let keyPairs = {
   '"': '"',
   "`": "`"
 };
+export let classNoscript = "";
+let clientJs = false;
 let textArea;
 contentElements.forEach((el) => {
   if (el.display === "wrap")
@@ -330,6 +335,7 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
   }
   valueTextarea = lines.join("\n");
 };
+onMount(() => clientJs = true);
 </script>
 
 <textarea
@@ -348,13 +354,14 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
 	}}
 	on:input
 />
+
 <div id={idControls} class={classControls}>
 	{#each contentElements as el}
 		<button
 			class={el.class ? `${classButton} ${el.class}` : classButton}
 			on:click={() => addContent(el)}
 			title={el.name}
-			aria-label={el.name}
+			disabled={!clientJs}
 		>
 			{#if typeof el.icon !== "string"}
 				<svelte:component this={el.icon} />
@@ -364,3 +371,9 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
 		</button>
 	{/each}
 </div>
+
+<noscript>
+	<div class={classNoscript}>
+		{messageNoScript}
+	</div>
+</noscript>

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

@@ -18,7 +18,7 @@ export interface EditorContentElement {
     /** class to apply to the specific button */
     class?: string;
 }
-import type { ComponentType } from "svelte";
+import { type ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
@@ -34,6 +34,7 @@ declare const __propDef: {
         /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
             [key: string]: string;
         } | undefined;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         input: Event;
@@ -54,6 +55,7 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * - `classButton` - `class` of all the `button` elements
  * - `classControls` - `class` of the `div` that wraps the controls
+ * - `classNoscript` - noscript class
  * - `classTextarea` - `class` of the `textarea` element
  * - `contentElements` - an array of content elements for the controls
  * - `idControls` - `id` of the `div` that wraps the controls

package/dist/components/FullscreenButton.svelte

@@ -7,6 +7,7 @@ Make the document or a specific element fullscreen.
 
 @props
 
+- `classNoscript` - noscript class
 - `class` 
 - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
 - `id` 
@@ -17,8 +18,8 @@ Make the document or a specific element fullscreen.
 
 | name       | purpose                                        | default value        |
 | ---------- | ---------------------------------------------- | -------------------- |
+| `default`  | content to display when fullscreen is disabled | `Enabled Fullscreen` |
 | `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
-| `disabled` | content to display when fullscreen is disabled | `Enabled Fullscreen` |
 
 @example
 
@@ -42,17 +43,16 @@ Make the document or a specific element fullscreen.
 -->
 
 <script>import { onMount } from "svelte";
+import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
 export let title = "Fullscreen";
 export let targetElement = null;
 export let confirmMessage = "";
+export let classNoscript = "";
+let clientJs = false;
 let fullscreen = false;
-onMount(() => {
-  if (!targetElement)
-    targetElement = document.documentElement;
-});
 const onClick = () => {
   if (fullscreen) {
     document.exitFullscreen();
@@ -68,14 +68,25 @@ const onClick = () => {
     }
   }
 };
+onMount(() => {
+  clientJs = true;
+  if (!targetElement)
+    targetElement = document.documentElement;
+});
 </script>
 
 <svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
 
-<button on:click={onClick} class={className} {id} {title}>
+<button disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
 	{#if fullscreen}
 		<slot name="enabled">Exit Fullscreen</slot>
 	{:else}
-		<slot name="disabled">Enable Fullscreen</slot>
+		<slot>Enable Fullscreen</slot>
 	{/if}
 </button>
+
+<noscript>
+	<div class={classNoscript}>
+		{messageNoScript}
+	</div>
+</noscript>

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

@@ -6,13 +6,14 @@ declare const __propDef: {
         title?: string | undefined;
         /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         enabled: {};
-        disabled: {};
+        default: {};
     };
 };
 export type FullscreenButtonProps = typeof __propDef.props;
@@ -25,6 +26,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
+ * - `classNoscript` - noscript class
  * - `class`
  * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
  * - `id`
@@ -35,8 +37,8 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * | name       | purpose                                        | default value        |
  * | ---------- | ---------------------------------------------- | -------------------- |
+ * | `default`  | content to display when fullscreen is disabled | `Enabled Fullscreen` |
  * | `enabled`  | content to display when fullscreen is enabled  | `Exit Fullscreen`    |
- * | `disabled` | content to display when fullscreen is disabled | `Enabled Fullscreen` |
  *
  * @example
  *

package/dist/components/Popover.svelte

@@ -0,0 +1,155 @@
+<!--
+@component
+
+### Popover
+
+Displays a popover relatively positioned to the button.
+
+@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
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | Popover       |
+| `button`   | button contents                 | Open          |
+
+@example
+
+```svelte
+<script>
+    import { Popover } from "drab";
+</script>
+
+<Popover>
+	<span slot="button">Hover</span>
+	<div>
+		<div>Popover</div>
+		<button>Button</button>
+		<button>Button</button>
+		<button>Button</button>
+	</div>
+</Popover>
+```
+-->
+
+<script>import { onMount, tick } from "svelte";
+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 position = "bottom";
+export let eventType = "hover";
+let clientEventType = "hover";
+let popover;
+let button;
+let coordinates = { x: 0, y: 0 };
+const correctPosition = async () => {
+  if (position === "top" || position === "bottom") {
+    coordinates.x = button.offsetWidth / 2 - popover.offsetWidth / 2;
+    if (position === "top") {
+      coordinates.y = -popover.offsetHeight;
+    } else {
+      coordinates.y = button.offsetHeight;
+    }
+  } else {
+    coordinates.y = button.offsetHeight / 2 - popover.offsetHeight / 2;
+    if (position === "left") {
+      coordinates.x = -popover.offsetWidth;
+    } else {
+      coordinates.x = button.offsetWidth;
+    }
+  }
+  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;
+  }
+  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;
+    }
+  }
+};
+const onKeyDown = (e) => {
+  if (e.key === "Escape") {
+    display = false;
+  }
+};
+const openPopover = async (e) => {
+  e.stopPropagation();
+  display = true;
+};
+onMount(() => {
+  clientEventType = eventType;
+  correctPosition();
+});
+</script>
+
+<svelte:document on:keydown={onKeyDown} on:click={clickOutside} />
+
+<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>
+	<div
+		bind:this={popover}
+		id={idPopover}
+		class="db-popover {classPopover}"
+		class:db-type-click={clientEventType === "click" && display}
+		class:db-type-hover={clientEventType === "hover"}
+		style:top="{coordinates.y}px"
+		style:left="{coordinates.x}px"
+	>
+		<slot>Popover</slot>
+	</div>
+</div>
+
+<style>
+	.db-relative {
+		position: relative;
+	}
+	.db-popover {
+		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

@@ -0,0 +1,69 @@
+import { SvelteComponent } from "svelte";
+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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        button: {};
+        default: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+/**
+ * ### Popover
+ *
+ * Displays a popover relatively positioned to the button.
+ *
+ * @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
+ *
+ * @slots
+ *
+ * | name       | purpose                         | default value |
+ * | ---------- | ------------------------------- | ------------- |
+ * | `default`  | default                         | Popover       |
+ * | `button`   | button contents                 | Open          |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { Popover } from "drab";
+ * </script>
+ *
+ * <Popover>
+ * <span slot="button">Hover</span>
+ * <div>
+ * 	<div>Popover</div>
+ * 	<button>Button</button>
+ * 	<button>Button</button>
+ * 	<button>Button</button>
+ * </div>
+ * </Popover>
+ * ```
+ */
+export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/dist/components/ShareButton.svelte

@@ -7,10 +7,11 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 @props
 
+- `classNoscript` - noscript class
 - `class` 
 - `id` 
 - `text` - prefixed text in share message
-- `title` - title of share message and button attribute
+- `title` - title of share message and button attribute, defaults to end of url
 - `url` - url to be shared
 
 @slots
@@ -35,12 +36,15 @@ Uses the navigator api to share or copy a url link depending on browser support.
 ```
 -->
 
-<script>let className = "";
+<script>import { onMount } from "svelte";
+let className = "";
 export { className as class };
 export let id = "";
 export let text = "";
 export let url;
 export let title = url.split("/").splice(-1)[0];
+export let classNoscript = "";
+let clientJs = false;
 let complete = false;
 const onClick = async () => {
   try {
@@ -55,12 +59,15 @@ const onClick = async () => {
     console.log(error);
   }
 };
+onMount(() => clientJs = true);
 </script>
 
-<button on:click={onClick} class={className} {id} {title}>
+<button disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
 	{#if complete}
 		<slot name="complete">Copied</slot>
 	{:else}
 		<slot>Share</slot>
 	{/if}
 </button>
+
+<noscript><span class={classNoscript}>{url}</span></noscript>

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

@@ -5,7 +5,8 @@ declare const __propDef: {
         id?: string | undefined;
         /** prefixed text in share message */ text?: string | undefined;
         /** url to be shared */ url: string;
-        /** title of share message and button attribute */ title?: string | undefined;
+        /** title of share message and button attribute, defaults to end of url */ title?: string | undefined;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,10 +26,11 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * @props
  *
+ * - `classNoscript` - noscript class
  * - `class`
  * - `id`
  * - `text` - prefixed text in share message
- * - `title` - title of share message and button attribute
+ * - `title` - title of share message and button attribute, defaults to end of url
  * - `url` - url to be shared
  *
  * @slots

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import Chord from "./components/Chord.svelte";
+import type { ChordNote } from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
@@ -6,6 +7,7 @@ import type { DataTableRow } from "./components/DataTable.svelte";
 import Editor from "./components/Editor.svelte";
 import type { EditorContentElement } from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
+import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, ShareButton, YouTube, };
+export { Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, YouTube, };

package/dist/index.js

@@ -4,6 +4,7 @@ import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
 import Editor from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
+import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, ShareButton, YouTube, };
+export { Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, YouTube, };

package/dist/util/messages.d.ts

@@ -0,0 +1 @@
+export declare const messageNoScript = "JavaScript is disabled on your device. This feature requires JavaScript for full functionality.";

package/dist/util/messages.js

@@ -0,0 +1 @@
+export const messageNoScript = "JavaScript is disabled on your device. This feature requires JavaScript for full functionality.";

package/package.json

@@ -1,16 +1,18 @@
 {
 	"name": "drab",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
 		"Svelte",
 		"SvelteKit",
 		"Chord",
+		"ContextMenu",
 		"Copy",
 		"DataTable",
 		"Editor",
 		"Fullscreen",
+		"Popover",
 		"Share",
 		"YouTube"
 	],
@@ -48,8 +50,8 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.22.4",
-		"@sveltejs/package": "^2.2.0",
+		"@sveltejs/kit": "^1.22.5",
+		"@sveltejs/package": "^2.2.1",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "^20.4.9",
 		"@typescript-eslint/eslint-plugin": "^6.3.0",
@@ -61,7 +63,7 @@
 		"postcss": "^8.4.27",
 		"prettier": "^3.0.1",
 		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.4.1",
+		"prettier-plugin-tailwindcss": "^0.5.1",
 		"publint": "^0.2.0",
 		"svelte-check": "^3.4.6",
 		"tailwindcss": "^3.3.3",