drab 1.10.1 → 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

@@ -8,25 +8,26 @@ Data table to display an array of JS objects. Click a column header to sort.
 @props
 
 - `ascending` - default sort order
-- `buttonClass` - button class
+- `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
+- `classTbodyTr` - tbody tr class
+- `classTbody` - tbody class
+- `classTdSorted` - currently sorted td
+- `classTd` - td class
+- `classThSorted` - currently sorted th
+- `classTh` - th class
+- `classTheadTr` - thead tr class
+- `classThead` - thead class
 - `columns` - table columns, in order
 - `currentPage` - current page, defaults to `1`
 - `data` - a list of objects to render in the table
-- `footerClass` - footer class
-- `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
-- `pageNumberClass` - class of `div` wrapping page numbers
+- `idTable` - table id
 - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by--defaults to first column
-- `sortedTdClass` - currently sorted td
-- `sortedThClass` - currently sorted th
-- `tBodyClass` - tbody class
-- `tBodyTrClass` - tbody tr class
-- `tHeadClass` - thead class
-- `tHeadTrClass` - thead tr class
-- `tableClass` - table class
-- `tableId` - table id
-- `tdClass` - td class
-- `thClass` - th class
 
 @slots
 
@@ -57,29 +58,33 @@ 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]);
 }
 export let sortBy = columns[0];
 export let ascending = true;
-export let tableClass = "";
-export let tableId = "";
-export let tHeadClass = "";
-export let tBodyClass = "";
-export let tHeadTrClass = "";
-export let tBodyTrClass = "";
-export let thClass = "";
-export let tdClass = "";
-export let sortedThClass = "";
-export let sortedTdClass = "";
-export let buttonClass = "";
-export let footerClass = "";
-export let pageNumberClass = "";
-export let pageControlsClass = "";
+export let classTable = "";
+export let idTable = "";
+export let classThead = "";
+export let classTbody = "";
+export let classTheadTr = "";
+export let classTbodyTr = "";
+export let classTh = "";
+export let classTd = "";
+export let classThSorted = "";
+export let classTdSorted = "";
+export let classButton = "";
+export let classFooter = "";
+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,14 +122,15 @@ const sort = (column, toggleAscending = true) => {
   sortBy = column;
 };
 sort(sortBy, false);
+onMount(() => clientJs = true);
 </script>
 
-<table class={tableClass} id={tableId}>
-	<thead class={tHeadClass}>
-		<tr class={tHeadTrClass}>
+<table class={classTable} id={idTable}>
+	<thead class={classThead}>
+		<tr class={classTheadTr}>
 			{#each columns as column}
 				<th
-					class="{thClass} {sortBy === column ? sortedThClass : ''}"
+					class="{classTh} {sortBy === column ? classThSorted : ''}"
 					on:click={() => sort(column)}
 				>
 					{column}
@@ -132,14 +138,14 @@ sort(sortBy, false);
 			{/each}
 		</tr>
 	</thead>
-	<tbody class={tBodyClass}>
+	<tbody class={classTbody}>
 		{#each data as row, i}
 			{@const showRow =
 				i < paginate * currentPage && i >= paginate * (currentPage - 1)}
 			{#if paginate ? showRow : true}
-				<tr class={tBodyTrClass}>
+				<tr class={classTbodyTr}>
 					{#each columns as column}
-						<td class="{tdClass} {sortBy === column ? sortedTdClass : ''}">
+						<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
 							{row[column]}
 						</td>
 					{/each}
@@ -150,23 +156,29 @@ sort(sortBy, false);
 </table>
 
 {#if paginate}
-	<div class={footerClass}>
-		<div class={pageNumberClass}>{currentPage} / {numberOfPages}</div>
-		<div class={pageControlsClass}>
+	<div class={classFooter}>
+		<div class={classPageNumber}>{currentPage} / {numberOfPages}</div>
+		<div class={classPageControls}>
 			<button
-				class={buttonClass}
-				disabled={currentPage < 2}
+				class={classButton}
+				disabled={!clientJs || currentPage < 2}
 				on:click={() => currentPage--}
 			>
 				<slot name="previous">Previous</slot>
 			</button>
 			<button
-				class={buttonClass}
-				disabled={currentPage >= numberOfPages}
+				class={classButton}
+				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

@@ -8,22 +8,23 @@ declare const __propDef: {
         /** table columns, in order */ columns?: string[] | undefined;
         /** column to sort by--defaults to first column */ sortBy?: string | undefined;
         /** default sort order */ ascending?: boolean | undefined;
-        /** table class */ tableClass?: string | undefined;
-        /** table id */ tableId?: string | undefined;
-        /** thead class */ tHeadClass?: string | undefined;
-        /** tbody class */ tBodyClass?: string | undefined;
-        /** thead tr class */ tHeadTrClass?: string | undefined;
-        /** tbody tr class */ tBodyTrClass?: string | undefined;
-        /** th class */ thClass?: string | undefined;
-        /** td class */ tdClass?: string | undefined;
-        /** currently sorted th */ sortedThClass?: string | undefined;
-        /** currently sorted td */ sortedTdClass?: string | undefined;
-        /** button class */ buttonClass?: string | undefined;
-        /** footer class */ footerClass?: string | undefined;
-        /** class of `div` wrapping page numbers */ pageNumberClass?: string | undefined;
-        /** class of `div` that wraps the "Previous" and "Next" buttons */ pageControlsClass?: string | undefined;
+        /** table class */ classTable?: string | undefined;
+        /** table id */ idTable?: string | undefined;
+        /** thead class */ classThead?: string | undefined;
+        /** tbody class */ classTbody?: string | undefined;
+        /** thead tr class */ classTheadTr?: string | undefined;
+        /** tbody tr class */ classTbodyTr?: string | undefined;
+        /** th class */ classTh?: string | undefined;
+        /** td class */ classTd?: string | undefined;
+        /** currently sorted th */ classThSorted?: string | undefined;
+        /** currently sorted td */ classTdSorted?: string | undefined;
+        /** button class */ classButton?: string | undefined;
+        /** 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;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
+        /** noscript class */ classNoscript?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -44,25 +45,26 @@ export type DataTableSlots = typeof __propDef.slots;
  * @props
  *
  * - `ascending` - default sort order
- * - `buttonClass` - button class
+ * - `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
+ * - `classTbodyTr` - tbody tr class
+ * - `classTbody` - tbody class
+ * - `classTdSorted` - currently sorted td
+ * - `classTd` - td class
+ * - `classThSorted` - currently sorted th
+ * - `classTh` - th class
+ * - `classTheadTr` - thead tr class
+ * - `classThead` - thead class
  * - `columns` - table columns, in order
  * - `currentPage` - current page, defaults to `1`
  * - `data` - a list of objects to render in the table
- * - `footerClass` - footer class
- * - `pageControlsClass` - class of `div` that wraps the "Previous" and "Next" buttons
- * - `pageNumberClass` - class of `div` wrapping page numbers
+ * - `idTable` - table id
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by--defaults to first column
- * - `sortedTdClass` - currently sorted td
- * - `sortedThClass` - currently sorted th
- * - `tBodyClass` - tbody class
- * - `tBodyTrClass` - tbody tr class
- * - `tHeadClass` - thead class
- * - `tHeadTrClass` - thead tr class
- * - `tableClass` - table class
- * - `tableId` - table id
- * - `tdClass` - td class
- * - `thClass` - th class
  *
  * @slots
  *

package/dist/components/Editor.svelte

@@ -7,17 +7,18 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 @props
 
-- `buttonClass` - `class` of all the `button` elements
+- `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
-- `controlsClass` - `class` of the `div` that wraps the controls
-- `controlsId` - `id` of the `div` that wraps the controls
+- `idControls` - `id` of the `div` that wraps the controls
+- `idTextarea` - `id` of the `textarea` element
 - `keyPairs` - keys that will auto-close if typed, value is their closing character
+- `nameTextarea` - `name` of the `textarea` element
+- `placeholderTextarea` - `placeholder` of the `textarea` element
 - `selectionStart` - `selectionStart` value of the text area
-- `textAreaClass` - `class` of the `textarea` element
-- `textAreaId` - `id` of the `textarea` element
-- `textAreaName` - `name` of the `textarea` element
-- `textAreaPlaceholder` - `placeholder` of the `textarea` element
-- `textAreaValue` - `value` of the `textarea` element
+- `valueTextarea` - `value` of the `textarea` element
 
 @example
 
@@ -55,15 +56,17 @@ Text editor with controls to add elements and keyboard shortcuts.
 
 <script context="module"></script>
 
-<script>export let contentElements = [];
-export let textAreaValue = "";
-export let textAreaPlaceholder = "";
-export let textAreaClass = "";
-export let textAreaId = "";
-export let textAreaName = "";
-export let buttonClass = "";
-export let controlsClass = "";
-export let controlsId = "";
+<script>import { onMount } from "svelte";
+import { messageNoScript } from "../util/messages";
+export let contentElements = [];
+export let valueTextarea = "";
+export let placeholderTextarea = "";
+export let classTextarea = "";
+export let idTextarea = "";
+export let nameTextarea = "";
+export let classButton = "";
+export let classControls = "";
+export let idControls = "";
 export let selectionStart = 0;
 export let keyPairs = {
   "(": ")",
@@ -73,6 +76,8 @@ export let keyPairs = {
   '"': '"',
   "`": "`"
 };
+export let classNoscript = "";
+let clientJs = false;
 let textArea;
 contentElements.forEach((el) => {
   if (el.display === "wrap")
@@ -87,11 +92,11 @@ const removeChar = (str, index) => {
 };
 const insertText = async (el, selectionStart2, selectionEnd) => {
   if (el.display === "inline") {
-    textAreaValue = `${textAreaValue.slice(0, selectionEnd)}${el.text}${textAreaValue.slice(selectionEnd)}`;
+    valueTextarea = `${valueTextarea.slice(0, selectionEnd)}${el.text}${valueTextarea.slice(selectionEnd)}`;
   } else if (el.display === "wrap") {
-    textAreaValue = insertChar(textAreaValue, el.text, selectionStart2);
-    textAreaValue = insertChar(
-      textAreaValue,
+    valueTextarea = insertChar(valueTextarea, el.text, selectionStart2);
+    valueTextarea = insertChar(
+      valueTextarea,
       keyPairs[el.text],
       selectionEnd + el.text.length
     );
@@ -104,15 +109,15 @@ const insertText = async (el, selectionStart2, selectionEnd) => {
     } else {
       lines[lineNumber] = el.text + lines[lineNumber];
     }
-    textAreaValue = lines.join("\n");
+    valueTextarea = lines.join("\n");
   }
 };
 const setCaretPosition = async (text, selectionStart2, selectionEnd) => {
   let startPos = 0;
   let endPos = 0;
   if (/[a-z]/i.test(text)) {
-    for (let i = selectionEnd; i < textAreaValue.length; i++) {
-      if (textAreaValue[i].match(/[a-z]/i)) {
+    for (let i = selectionEnd; i < valueTextarea.length; i++) {
+      if (valueTextarea[i].match(/[a-z]/i)) {
         if (!startPos) {
           startPos = i;
         } else {
@@ -137,17 +142,17 @@ const addContent = async (el) => {
 };
 const onKeyDown = async (e) => {
   const resetKeys = ["ArrowUp", "ArrowDown", "Delete"];
-  const nextChar = textAreaValue[textArea.selectionEnd];
+  const nextChar = valueTextarea[textArea.selectionEnd];
   if (resetKeys.includes(e.key)) {
     openChars = [];
   } else if (e.key === "Backspace") {
-    const prevChar = textAreaValue[textArea.selectionStart - 1];
+    const prevChar = valueTextarea[textArea.selectionStart - 1];
     if (prevChar in keyPairs && nextChar === keyPairs[prevChar]) {
       e.preventDefault();
       const start = textArea.selectionStart - 1;
       const end = textArea.selectionEnd - 1;
-      textAreaValue = removeChar(textAreaValue, start);
-      textAreaValue = removeChar(textAreaValue, end);
+      valueTextarea = removeChar(valueTextarea, start);
+      valueTextarea = removeChar(valueTextarea, end);
       setTimeout(() => {
         textArea.setSelectionRange(start, end);
       }, 0);
@@ -158,7 +163,7 @@ const onKeyDown = async (e) => {
       const newPos = textArea.selectionStart - 1;
       const { lineNumber } = getLineInfo();
       correctFollowing(lineNumber, true);
-      textAreaValue = removeChar(textAreaValue, newPos);
+      valueTextarea = removeChar(valueTextarea, newPos);
       setTimeout(async () => {
         textArea.setSelectionRange(newPos, newPos);
       }, 0);
@@ -197,8 +202,8 @@ ${repeat}`,
       const selectionEnd = textArea.selectionEnd;
       const newPos = selectionEnd - original.length;
       for (let i = 0; i < original.length; i++) {
-        textAreaValue = removeChar(
-          textAreaValue,
+        valueTextarea = removeChar(
+          valueTextarea,
           textArea.selectionEnd - (i + 1)
         );
       }
@@ -242,13 +247,13 @@ ${repeat}`,
 };
 const trimSelection = () => {
   if (textArea.selectionStart !== textArea.selectionEnd) {
-    if (textAreaValue[textArea.selectionStart] === " ") {
+    if (valueTextarea[textArea.selectionStart] === " ") {
       textArea.setSelectionRange(
         textArea.selectionStart + 1,
         textArea.selectionEnd
       );
     }
-    if (textAreaValue[textArea.selectionEnd - 1] === " ") {
+    if (valueTextarea[textArea.selectionEnd - 1] === " ") {
       textArea.setSelectionRange(
         textArea.selectionStart,
         textArea.selectionEnd - 1
@@ -260,7 +265,7 @@ const updateSelectionStart = () => {
   selectionStart = textArea.selectionStart;
 };
 const getLineInfo = () => {
-  const lines = textAreaValue.split("\n");
+  const lines = valueTextarea.split("\n");
   let characterCount = 0;
   for (let i = 0; i < lines.length; i++) {
     characterCount++;
@@ -276,7 +281,7 @@ const getLineInfo = () => {
   return { lines, lineNumber: 0, columnNumber: 0 };
 };
 const getCurrentBlock = () => {
-  const blocks = textAreaValue.split("```");
+  const blocks = valueTextarea.split("```");
   let totalChars = 0;
   for (const [i, block] of blocks.entries()) {
     totalChars += block.length + 3;
@@ -328,19 +333,20 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
       lines[i] = String(newNum) + lines[i];
     }
   }
-  textAreaValue = lines.join("\n");
+  valueTextarea = lines.join("\n");
 };
+onMount(() => clientJs = true);
 </script>
 
 <textarea
-	id={textAreaId}
-	class={textAreaClass}
-	name={textAreaName}
-	placeholder={textAreaPlaceholder}
+	id={idTextarea}
+	class={classTextarea}
+	name={nameTextarea}
+	placeholder={placeholderTextarea}
 	on:keydown={onKeyDown}
 	on:keyup={updateSelectionStart}
 	on:dblclick={trimSelection}
-	bind:value={textAreaValue}
+	bind:value={valueTextarea}
 	bind:this={textArea}
 	on:click={() => {
 		openChars = [];
@@ -348,13 +354,14 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
 	}}
 	on:input
 />
-<div id={controlsId} class={controlsClass}>
+
+<div id={idControls} class={classControls}>
 	{#each contentElements as el}
 		<button
-			class={el.class ? `${buttonClass} ${el.class}` : buttonClass}
+			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,22 +18,23 @@ 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;
-        /** `value` of the `textarea` element */ textAreaValue?: string | undefined;
-        /** `placeholder` of the `textarea` element */ textAreaPlaceholder?: string | undefined;
-        /** `class` of the `textarea` element */ textAreaClass?: string | undefined;
-        /** `id` of the `textarea` element */ textAreaId?: string | undefined;
-        /** `name` of the `textarea` element */ textAreaName?: string | undefined;
-        /** `class` of all the `button` elements */ buttonClass?: string | undefined;
-        /** `class` of the `div` that wraps the controls */ controlsClass?: string | undefined;
-        /** `id` of the `div` that wraps the controls */ controlsId?: string | undefined;
+        /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
+        /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
+        /** `class` of the `textarea` element */ classTextarea?: string | undefined;
+        /** `id` of the `textarea` element */ idTextarea?: string | undefined;
+        /** `name` of the `textarea` element */ nameTextarea?: string | undefined;
+        /** `class` of all the `button` elements */ classButton?: string | undefined;
+        /** `class` of the `div` that wraps the controls */ classControls?: string | undefined;
+        /** `id` of the `div` that wraps the controls */ idControls?: string | undefined;
         /** `selectionStart` value of the text area */ selectionStart?: number | undefined;
         /** 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;
@@ -52,17 +53,18 @@ export type EditorSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `buttonClass` - `class` of all the `button` elements
+ * - `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
- * - `controlsClass` - `class` of the `div` that wraps the controls
- * - `controlsId` - `id` of the `div` that wraps the controls
+ * - `idControls` - `id` of the `div` that wraps the controls
+ * - `idTextarea` - `id` of the `textarea` element
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character
+ * - `nameTextarea` - `name` of the `textarea` element
+ * - `placeholderTextarea` - `placeholder` of the `textarea` element
  * - `selectionStart` - `selectionStart` value of the text area
- * - `textAreaClass` - `class` of the `textarea` element
- * - `textAreaId` - `id` of the `textarea` element
- * - `textAreaName` - `name` of the `textarea` element
- * - `textAreaPlaceholder` - `placeholder` of the `textarea` element
- * - `textAreaValue` - `value` of the `textarea` element
+ * - `valueTextarea` - `value` of the `textarea` element
  *
  * @example
  *

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": "1.10.1",
+	"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",