drab 2.8.7 → 3.0.1

package/README.md

@@ -1,23 +1,19 @@
 # An Unstyled Svelte Component Library
 
+- [Docs](https://drab.robino.dev)
 - [GitHub](https://github.com/rossrobino/drab)
 - [npm](https://www.npmjs.com/package/drab)
 - [MIT License](https://github.com/rossrobino/drab/blob/main/LICENSE.md)
-- One dependency - [Svelte](https://svelte.dev)
 
 ## About
 
-**drab** focuses on providing JavaScript functionality where it's most useful. Whenever possible, components are [progressively enhanced](/docs/ShareButton) or provide a fallback [noscript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) message. Additionally, transitions are disabled for users who prefer reduced motion.
+**drab** focuses on providing JavaScript functionality where it's most useful. Many of the components are helpful wrappers around browser APIs. Whenever possible, components are [progressively enhanced](https://drab.robino.dev/docs/ShareButton) or provide a fallback [noscript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) message. Additionally, transitions are disabled for users who prefer reduced motion.
 
-This library takes a more opinionated approach compared to some headless UI libraries by providing the basic HTML structure for every component, as well as default positioning for elements like the [sheet](/docs/Sheet) or [popover](/docs/Popover). However, these components can still be further customized using styles, [slots](https://svelte.dev/tutorial/slots), and [slot props](https://svelte.dev/tutorial/slot-props).
-
-Components without styles can appear rather drab. You have the freedom to bring your own styles to these components! Using unstyled components allows you to selectively choose what you need, seamlessly integrate with existing designs, and avoid being tied to any specific library.
-
-To style the components, you can make use of [global styles](https://joyofcode.xyz/global-styles-in-sveltekit). This process can be expedited by utilizing CSS frameworks like [TailwindCSS](https://tailwindcss.com/). TailwindCSS generates a global stylesheet based on the utility classes used in your project. Each component exports `class` and `id` props that can be leveraged for this purpose.
+This library takes a more opinionated approach compared to some headless UI libraries by providing the basic HTML structure for every component, as well as default positioning for elements like the [sheet](https://drab.robino.dev/docs/Sheet). However, these components can still be further customized using styles, [slots](https://svelte.dev/tutorial/slots), and [slot props](https://svelte.dev/tutorial/slot-props).
 
 ## Install
 
-If you haven't used Svelte before, start with the [tutorial](https://svelte.dev/tutorial/basics).
+If you haven't used Svelte before, start with the [tutorial](https://svelte.dev/tutorial/basics). **drab** works anywhere Svelte does.
 
 - [SvelteKit](https://kit.svelte.dev)
 - [Astro](https://docs.astro.build/en/tutorial/1-setup/2/)
@@ -33,18 +29,80 @@ The library provides inline documentation for each component, allowing you to co
 
 These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin) for base styles along with a few custom utility classes you can find [here](https://github.com/rossrobino/drab/blob/main/src/app.postcss). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/).
 
-## Alternatives
+## Other UI Libraries
 
-If **drab** isn't what you are looking for, here are some other Svelte UI libraries to check out.
+**drab** is a collection of useful components, not a complete UI kit. If **drab** isn't what you are looking for, here are some other libraries to check out.
 
 - [Skeleton](https://skeleton.dev)
 - [Melt UI](https://www.melt-ui.com/)
 - [shadcn-svelte](https://www.shadcn-svelte.com/)
 - [Svelte-HeadlessUI](https://captaincodeman.github.io/svelte-headlessui/)
 
+## Styling
+
+Components without styles can appear rather drab. You have the freedom to bring your own styles to these components. Using unstyled components allows you to selectively choose what you need and avoid being tied to any specific library.
+
+To style the markup provided by the components, you can make use of [global styles](https://joyofcode.xyz/global-styles-in-sveltekit). Each component exports `class` and `id` props that can be leveraged for this purpose. This process can be expedited by utilizing CSS frameworks like [TailwindCSS](https://tailwindcss.com/). Tailwind generates a global stylesheet based on the utility classes used in your project. The examples in this documentation are styled with Tailwind classes, but Tailwind does not have to be used with this library.
+
+### Stylesheet
+
+Here's a SvelteKit example using CSS imported in a layout. By using a layout, these styles can be accessed anywhere.
+
+```css
+/* src/app.css */
+.btn {
+	color: white;
+	background-color: black;
+	border-radius: 5px;
+	padding: 5px;
+}
+```
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+	import "../app.css";
+</script>
+
+<slot />
+```
+
+```svelte
+<!-- src/routes/+page.svelte -->
+<script>
+	import { FullscreenButton } from "drab";
+</script>
+
+<FullscreenButton class="btn" />
+```
+
+### Global modifier
+
+Alternatively, the [`:global()` modifier](https://svelte.dev/docs/svelte-components#style) can be used instead of a separate stylesheet.
+
+```svelte
+<!-- src/routes/+page.svelte -->
+<script>
+	import { FullscreenButton } from "drab";
+</script>
+
+<FullscreenButton class="btn" />
+
+<style>
+	:global(.btn) {
+		color: white;
+		background-color: black;
+		border-radius: 5px;
+		padding: 5px;
+	}
+</style>
+```
+
 ## Contributing
 
-Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
+Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab). **drab** is meant to house all kinds of components including ones outside of the standard UI elements.
+
+Currently, **drab** has only one dependency - Svelte. Not to say it will never have another, but please consider this when proposing additional functionality. **drab** is meant to make the most of what Svelte and the web platform provide.
 
 Since this is an unstyled library, simple components like a badge that can be easily created with HTML and CSS are not included.
 
@@ -60,8 +118,8 @@ Contribute to the project, or use **drab** as a template for another component l
 
 #### Add or edit a component
 
-1. Add/edit the component in `src/lib/components/Component.svelte`, if you're adding a new one, copy and paste an existing one to get started with the conventions
-2. Add/edit the example in `src/routes/docs/Component/+page.svelte`
-3. Document the component with an `@component` comment, include a description, and the `@slots` available. Add a placeholder `@props` and `@example` to the comment. These sections will be generated based on the JSDoc comment above each prop and the example route created upon running `npm run doc`
+1. Add or edit the component in `src/lib/components/Component.svelte` - if you're adding a new one, copy and paste an existing one to get started with the conventions
+2. Add or edit the example in `src/routes/docs/Component/+page.svelte`
+3. Document the component with an `@component` comment, include a description, and the `@slots` available. Add a placeholder `@props` and `@example` to the comment. These sections will be generated based on the JSDoc comment above each prop and the example route upon running `npm run doc`
 4. If new, add the link to `src/site/components/NavItems.svelte`
 5. Run `npm run build` to verify your build

package/dist/components/Breakpoint.svelte

@@ -21,7 +21,7 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check
 </script>
 
 <Breakpoint
-	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+	class="inline-block rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
 />
 ```
 -->

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

@@ -37,7 +37,7 @@ export type BreakpointSlots = typeof __propDef.slots;
  * </script>
  *
  * <Breakpoint
- * class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+ * class="inline-block rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
  * />
  * ```
  */

package/dist/components/ContextMenu.svelte

@@ -43,7 +43,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 <button type="button" class="btn" bind:this={target}>Target Right Click</button>
 <ContextMenu {target}>
 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
-		<div class="font-bold">Context Menu</div>
+		<div class="font-bold">Target</div>
 		<button role="menuitem" class="btn">Button</button>
 		<button role="menuitem" class="btn">Button</button>
 		<button role="menuitem" class="btn">Button</button>
@@ -144,6 +144,5 @@ onMount(async () => {
 	}
 	div {
 		position: absolute;
-		z-index: 10;
 	}
 </style>

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

@@ -61,7 +61,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * <button type="button" class="btn" bind:this={target}>Target Right Click</button>
  * <ContextMenu {target}>
  * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
- * 	<div class="font-bold">Context Menu</div>
+ * 	<div class="font-bold">Target</div>
  * 	<button role="menuitem" class="btn">Button</button>
  * 	<button role="menuitem" class="btn">Button</button>
  * 	<button role="menuitem" class="btn">Button</button>

package/dist/components/DataTable.svelte

@@ -3,7 +3,13 @@
 
 ### DataTable
 
-Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props. 
+Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
+
+- Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
+- Provides sorting for `number`, `string`, `boolean`, and `Date`
+- Strings are sorted using `Intl.Collator`
+- Style or modify the rendering of data with slot props
+- `numberOfPages` is calculated and sent back through the `controls` slot
 
 @props
 
@@ -25,11 +31,11 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
 
 @slots
 
-| name       | purpose                                               | default value | slot props                      |
-| ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
-| `controls` | helper that passes back `maxRows` and `numberOfPages` | none          | `maxRows`, `numberOfPages`      |
-| `td`       | td contents                                           | `value`       | `item`, `key`, `sortBy` `value` |
-| `th`       | th contents                                           | `key`         | `key`, `sortBy`                 |
+| name       | purpose                                                          | default value | slot props                      |
+| ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
+| `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
+| `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
+| `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
 
 @example
 
@@ -78,9 +84,9 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
 	</svelte:fragment>
 	<svelte:fragment slot="controls" let:maxRows let:numberOfPages>
 		{#if maxRows}
-			<div class="flex items-center justify-between">
-				<div>{currentPage + 1} / {numberOfPages}</div>
-				<div>
+			<div class="flex items-center justify-between gap-4">
+				<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
+				<div class="flex gap-2">
 					<button
 						type="button"
 						class="btn"
@@ -129,6 +135,7 @@ const sort = (key, toggleAscending = true) => {
   } else {
     ascending = true;
   }
+  const collator = new Intl.Collator();
   data.sort((a, b) => {
     const aVal = a[key];
     const bVal = b[key];
@@ -139,7 +146,6 @@ const sort = (key, toggleAscending = true) => {
         return bVal - aVal;
       }
     } else if (typeof aVal === "string" && typeof bVal === "string") {
-      const collator = new Intl.Collator();
       if (ascending) {
         return collator.compare(aVal, bVal);
       } else {

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

@@ -43,7 +43,13 @@ export type DataTableSlots = typeof __propDef.slots;
 /**
  * ### DataTable
  *
- * Data table to display an array of JS objects. Provides pagination and sorting for `number`, `string`, `boolean`, and `Date`. Set the `maxRows` prop to enable pagination. Data can be styled conditionally with slot props.
+ * Data table to display an array of objects. Works with zero configuration, just pass an array of objects into the `data` prop.
+ *
+ * - Set the `maxRows` prop to enable pagination, bind to `currentPage` to navigate (see second example below)
+ * - Provides sorting for `number`, `string`, `boolean`, and `Date`
+ * - Strings are sorted using `Intl.Collator`
+ * - Style or modify the rendering of data with slot props
+ * - `numberOfPages` is calculated and sent back through the `controls` slot
  *
  * @props
  *
@@ -65,11 +71,11 @@ export type DataTableSlots = typeof __propDef.slots;
  *
  * @slots
  *
- * | name       | purpose                                               | default value | slot props                      |
- * | ---------- | ----------------------------------------------------- | ------------- | ------------------------------- |
- * | `controls` | helper that passes back `maxRows` and `numberOfPages` | none          | `maxRows`, `numberOfPages`      |
- * | `td`       | td contents                                           | `value`       | `item`, `key`, `sortBy` `value` |
- * | `th`       | th contents                                           | `key`         | `key`, `sortBy`                 |
+ * | name       | purpose                                                          | default value | slot props                      |
+ * | ---------- | ---------------------------------------------------------------- | ------------- | ------------------------------- |
+ * | `controls` | helper that passes back `maxRows` and calculated `numberOfPages` | empty         | `maxRows`, `numberOfPages`      |
+ * | `td`       | td contents                                                      | `value`       | `item`, `key`, `sortBy` `value` |
+ * | `th`       | th contents                                                      | `key`         | `key`, `sortBy`                 |
  *
  * @example
  *
@@ -118,9 +124,9 @@ export type DataTableSlots = typeof __propDef.slots;
  * </svelte:fragment>
  * <svelte:fragment slot="controls" let:maxRows let:numberOfPages>
  * 	{#if maxRows}
- * 		<div class="flex items-center justify-between">
- * 			<div>{currentPage + 1} / {numberOfPages}</div>
- * 			<div>
+ * 		<div class="flex items-center justify-between gap-4">
+ * 			<div class="min-w-fit">{currentPage + 1} / {numberOfPages}</div>
+ * 			<div class="flex gap-2">
  * 				<button
  * 					type="button"
  * 					class="btn"

package/dist/components/Details.svelte

@@ -16,8 +16,8 @@ Displays a `details` element with helpful defaults and transitions. Can be used
 
 | name      | purpose                         | default value  | slot props |
 | --------- | ------------------------------- | -------------- | ---------- |
-| `summary` | `summary` element contents      | none           | `open`     |
-| `content` | contents when details is `open` | none           | none       |
+| `summary` | `summary` element contents      | empty          | `open`     |
+| `content` | contents when details is `open` | empty          | none       |
 
 @example
 

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

@@ -36,8 +36,8 @@ export type DetailsSlots = typeof __propDef.slots;
  *
  * | name      | purpose                         | default value  | slot props |
  * | --------- | ------------------------------- | -------------- | ---------- |
- * | `summary` | `summary` element contents      | none           | `open`     |
- * | `content` | contents when details is `open` | none           | none       |
+ * | `summary` | `summary` element contents      | empty          | `open`     |
+ * | `content` | contents when details is `open` | empty          | none       |
  *
  * @example
  *

package/dist/components/Editor.svelte

@@ -3,7 +3,7 @@
 
 ### Editor
 
-`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API. 
+`textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API. 
 
 - This component is used to create [Typo](https://typo.robino.dev)
 
@@ -35,13 +35,13 @@
 	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
 	contentElements={[
 		{
-			name: "Bullet",
+			title: "Bullet",
 			text: "- ",
 			display: "block",
 			icon: "Bullet",
 		},
 		{
-			name: "Italic",
+			title: "Italic",
 			text: "*",
 			display: "wrap",
 			icon: "Italic",
@@ -49,7 +49,7 @@
 			class: "italic",
 		},
 		{
-			name: "Anchor",
+			title: "Anchor",
 			text: "[text](href)",
 			display: "inline",
 			icon: "Anchor",
@@ -177,7 +177,7 @@ const onKeyDown = async (e) => {
         display: "inline",
         text: "	",
         icon: "tab",
-        name: "tab"
+        title: "tab"
       });
     }
   } else if (e.key === "Enter") {
@@ -197,7 +197,7 @@ const onKeyDown = async (e) => {
         text: `
 ${repeat}`,
         icon: "",
-        name: ""
+        title: ""
       });
     } else if (repeat && original.length === columnNumber) {
       e.preventDefault();
@@ -217,7 +217,7 @@ ${repeat}`,
           text: `
 `,
           icon: "",
-          name: ""
+          title: ""
         });
       }, 0);
     }
@@ -241,7 +241,7 @@ ${repeat}`,
         display: "wrap",
         text: e.key,
         icon: "",
-        name: ""
+        title: ""
       });
       openChars.push(e.key);
     }
@@ -363,7 +363,7 @@ onMount(() => clientJs = true);
 			type="button"
 			class={el.class ? `${classButton} ${el.class}` : classButton}
 			on:click={() => addContent(el)}
-			title={el.name}
+			title={el.title}
 			disabled={!clientJs}
 		>
 			{#if typeof el.icon !== "string"}

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

@@ -3,8 +3,8 @@ import { type ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         /** an array of `EditorContentElement`s for the controls */ contentElements?: {
-            /** name of element */
-            name: string;
+            /** title of element and it's corresponding button */
+            title: string;
             /** text to add */
             text: string;
             /** controls how the text is added */
@@ -42,7 +42,7 @@ export type EditorSlots = typeof __propDef.slots;
 /**
  * ### Editor
  *
- * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, this component's value is just a `string` so you can easily store it in a database or manipulate it without learning a separate API.
+ * `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `valueTextarea` is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
  *
  * - This component is used to create [Typo](https://typo.robino.dev)
  *
@@ -74,13 +74,13 @@ export type EditorSlots = typeof __propDef.slots;
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{
- * 		name: "Bullet",
+ * 		title: "Bullet",
  * 		text: "- ",
  * 		display: "block",
  * 		icon: "Bullet",
  * 	},
  * 	{
- * 		name: "Italic",
+ * 		title: "Italic",
  * 		text: "*",
  * 		display: "wrap",
  * 		icon: "Italic",
@@ -88,7 +88,7 @@ export type EditorSlots = typeof __propDef.slots;
  * 		class: "italic",
  * 	},
  * 	{
- * 		name: "Anchor",
+ * 		title: "Anchor",
  * 		text: "[text](href)",
  * 		display: "inline",
  * 		icon: "Anchor",

package/dist/components/{Chord.svelte → FrettedChord.svelte}

@@ -1,9 +1,11 @@
 <!--
 @component
 
-### Chord
+### FrettedChord
 
-Generates a guitar chord `svg`.
+Generates a fretted chord `svg` for instruments like guitar and ukulele.
+
+Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/5771d5c3f3c34137a174c8c402ca0b2d?version=4.2.0)
 
 @props
 
@@ -11,18 +13,18 @@ Generates a guitar chord `svg`.
 - `id` 
 - `name` - name of chord
 - `notes` - list of the positioning of the notes required for the chord
-- `size` - total size of chord square
+- `size` - total size of chord square in pixels, defaults to `150`
 - `strings` - total number of strings for the instrument
 
 @example
 
 ```svelte
 <script lang="ts">
-	import { Chord } from "drab";
+	import { FrettedChord } from "drab";
 </script>
 
-<Chord
-	class="text-neutral-950"
+<FrettedChord
+	class="font-mono text-neutral-950"
 	name="D"
 	notes={[
 		{
@@ -55,7 +57,7 @@ export { className as class };
 export let id = "";
 export let strings = 6;
 export let name = "";
-export let size = 200;
+export let size = 150;
 const boxSize = size * 0.61;
 const offset = (size - boxSize) / 2;
 const strokeWidth = size / 60;

package/dist/components/{Chord.svelte.d.ts → FrettedChord.svelte.d.ts}

@@ -5,7 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         /** total number of strings for the instrument */ strings?: number | undefined;
         /** name of chord */ name?: string | undefined;
-        /** total size of chord square */ size?: number | undefined;
+        /** total size of chord square in pixels, defaults to `150` */ size?: number | undefined;
         /** list of the positioning of the notes required for the chord */ notes?: {
             /** recommended finger to use */
             finger: number | string;
@@ -20,13 +20,15 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type ChordProps = typeof __propDef.props;
-export type ChordEvents = typeof __propDef.events;
-export type ChordSlots = typeof __propDef.slots;
+export type FrettedChordProps = typeof __propDef.props;
+export type FrettedChordEvents = typeof __propDef.events;
+export type FrettedChordSlots = typeof __propDef.slots;
 /**
- * ### Chord
+ * ### FrettedChord
  *
- * Generates a guitar chord `svg`.
+ * Generates a fretted chord `svg` for instruments like guitar and ukulele.
+ *
+ * Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/5771d5c3f3c34137a174c8c402ca0b2d?version=4.2.0)
  *
  * @props
  *
@@ -34,18 +36,18 @@ export type ChordSlots = typeof __propDef.slots;
  * - `id`
  * - `name` - name of chord
  * - `notes` - list of the positioning of the notes required for the chord
- * - `size` - total size of chord square
+ * - `size` - total size of chord square in pixels, defaults to `150`
  * - `strings` - total number of strings for the instrument
  *
  * @example
  *
  * ```svelte
  * <script lang="ts">
- * import { Chord } from "drab";
+ * import { FrettedChord } from "drab";
  * </script>
  *
- * <Chord
- * class="text-neutral-950"
+ * <FrettedChord
+ * class="font-mono text-neutral-950"
  * name="D"
  * notes={[
  * 	{
@@ -72,6 +74,6 @@ export type ChordSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class Chord extends SvelteComponent<ChordProps, ChordEvents, ChordSlots> {
+export default class FrettedChord extends SvelteComponent<FrettedChordProps, FrettedChordEvents, FrettedChordSlots> {
 }
 export {};

package/dist/components/FullscreenButton.svelte

@@ -3,7 +3,7 @@
 
 ### FullscreenButton
 
-Make the document or a specific element fullscreen.
+Make the document or a `target` element fullscreen.
 
 @props
 
@@ -64,15 +64,20 @@ const onClick = () => {
     }
   }
 };
+const syncFullscreen = () => {
+  fullscreen = document.fullscreenElement !== null;
+};
 onMount(() => {
-  if (document.documentElement.requestFullscreen)
+  if (document.documentElement.requestFullscreen) {
+    syncFullscreen();
     disabled = false;
+  }
   if (!target)
     target = document.documentElement;
 });
 </script>
 
-<svelte:window on:fullscreenchange={() => (fullscreen = !fullscreen)} />
+<svelte:window on:fullscreenchange={syncFullscreen} />
 
 <button
 	type="button"

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

@@ -21,7 +21,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
 /**
  * ### FullscreenButton
  *
- * Make the document or a specific element fullscreen.
+ * Make the document or a `target` element fullscreen.
  *
  * @props
  *

package/dist/components/Popover.svelte

@@ -3,7 +3,10 @@
 
 ### Popover
 
-Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
+Displays a popover in relation to the `target`. 
+
+- Does not require the target to be `position: relative;`
+- Adjusts position in case the popover renders outside of the viewport
 
 @props
 
@@ -57,22 +60,22 @@ let className = "";
 export { className as class };
 export let id = "";
 export let display = true;
-export let position = "bottom";
+export let position = "b";
 export let target;
 export let transition = { duration, start };
 let popover;
 let coordinates = { x: 0, y: 0 };
 const setPosition = async () => {
-  if (position === "top" || position === "bottom") {
+  if (position === "t" || position === "b") {
     coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
-    if (position === "top") {
+    if (position === "t") {
       coordinates.y = -popover.offsetHeight;
     } else {
       coordinates.y = target.offsetHeight;
     }
   } else {
     coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
-    if (position === "left") {
+    if (position === "l") {
       coordinates.x = -popover.offsetWidth;
     } else {
       coordinates.x = target.offsetWidth;

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** shows / hides the popover */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the `target` */ position?: "top" | "bottom" | "left" | "right" | undefined;
+        /** where the popover is displayed in relation to the `target` */ position?: "t" | "b" | "l" | "r" | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
         /** scales the popover, set to `false` to disable */ transition?: false | ScaleParams | undefined;
     };
@@ -22,7 +22,10 @@ export type PopoverSlots = typeof __propDef.slots;
 /**
  * ### Popover
  *
- * Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
+ * Displays a popover in relation to the `target`.
+ *
+ * - Does not require the target to be `position: relative;`
+ * - Adjusts position in case the popover renders outside of the viewport
  *
  * @props
  *

package/dist/components/Sheet.svelte

@@ -22,6 +22,13 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 | ---------- | ------------------------------- | ------------- |
 | `default`  | content                         | `Content`     |
 
+@events
+
+| name      | event              |
+| --------- | ------------------ |
+| `mount`   | sheet is mounted   | 
+| `destroy` | sheet is destroyed | 
+
 @example
 
 ```svelte
@@ -39,7 +46,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 	bind:display
 	class="backdrop-blur"
 	classSheet="p-4 shadow bg-white"
-	position="right"
+	position="r"
 >
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="my-0">Sheet</h2>
@@ -58,7 +65,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 ```
 -->
 
-<script>import { onMount } from "svelte";
+<script>import { createEventDispatcher, onMount } from "svelte";
 import {
   blur,
   fly
@@ -71,25 +78,28 @@ export let id = "";
 export let classSheet = "";
 export let display = false;
 export let transition = { duration };
-export let position = "left";
+export let position = "l";
 export let maxSize = 488;
 export let transitionSheet = { duration };
 let sheet;
+const dispatch = createEventDispatcher();
+const close = () => display = false;
 const onKeyDown = (e) => {
-  if (e.key === "Escape") {
-    display = false;
-  }
+  if (e.key === "Escape")
+    close();
 };
-const focusElement = (node) => {
+const lifecycle = (node) => {
+  dispatch("mount");
   if (node instanceof HTMLElement)
     node.focus();
+  return { destroy: () => dispatch("destroy") };
 };
 if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
-  if (position === "bottom") {
+  if (position === "b") {
     transitionSheet.y = maxSize;
-  } else if (position === "top") {
+  } else if (position === "t") {
     transitionSheet.y = -maxSize;
-  } else if (position === "right") {
+  } else if (position === "r") {
     transitionSheet.x = maxSize;
   } else {
     transitionSheet.x = -maxSize;
@@ -108,26 +118,26 @@ onMount(() => {
 {#if display}
 	<div
 		transition:blur={transition ? transition : { duration: 0 }}
-		use:focusElement
 		class="d-backdrop {className}"
-		class:d-backdrop-bottom={position === "bottom"}
-		class:d-backdrop-top={position === "top"}
-		class:d-backdrop-right={position === "right"}
+		class:d-backdrop-bottom={position === "b"}
+		class:d-backdrop-top={position === "t"}
+		class:d-backdrop-right={position === "r"}
 		{id}
-		tabindex="-1"
 	>
 		<div
-			role="dialog"
 			bind:this={sheet}
 			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
-			style={position === "top" || position === "bottom"
+			use:lifecycle
+			role="dialog"
+			tabindex="-1"
+			style={position === "t" || position === "b"
 				? `max-height: ${maxSize}px;`
 				: `max-width: ${maxSize}px`}
 			class={classSheet}
 		>
 			<slot>Content</slot>
 		</div>
-		<button title="Close" on:click={() => (display = false)}></button>
+		<button title="Close" on:click={close}></button>
 	</div>
 {/if}
 

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

@@ -7,11 +7,14 @@ declare const __propDef: {
         /** sheet class - not the backdrop */ classSheet?: string | undefined;
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
-        /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
+        /** determines the position of sheet */ position?: "t" | "b" | "l" | "r" | undefined;
         /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };
     events: {
+        mount: CustomEvent<any>;
+        destroy: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -43,6 +46,13 @@ export type SheetSlots = typeof __propDef.slots;
  * | ---------- | ------------------------------- | ------------- |
  * | `default`  | content                         | `Content`     |
  *
+ * @events
+ *
+ * | name      | event              |
+ * | --------- | ------------------ |
+ * | `mount`   | sheet is mounted   |
+ * | `destroy` | sheet is destroyed |
+ *
  * @example
  *
  * ```svelte
@@ -60,7 +70,7 @@ export type SheetSlots = typeof __propDef.slots;
  * bind:display
  * class="backdrop-blur"
  * classSheet="p-4 shadow bg-white"
- * position="right"
+ * position="r"
  * >
  * <div class="mb-4 flex items-center justify-between">
  * 	<h2 class="my-0">Sheet</h2>

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import Breakpoint from "./components/Breakpoint.svelte";
-import Chord from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
 import Details from "./components/Details.svelte";
 import Editor from "./components/Editor.svelte";
+import FrettedChord from "./components/FrettedChord.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import Sheet from "./components/Sheet.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Details, Editor, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
+export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };

package/dist/index.js

@@ -1,13 +1,13 @@
 import Breakpoint from "./components/Breakpoint.svelte";
-import Chord from "./components/Chord.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
 import CopyButton from "./components/CopyButton.svelte";
 import DataTable from "./components/DataTable.svelte";
 import Details from "./components/Details.svelte";
 import Editor from "./components/Editor.svelte";
+import FrettedChord from "./components/FrettedChord.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
 import Sheet from "./components/Sheet.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Details, Editor, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };
+export { Breakpoint, ContextMenu, CopyButton, DataTable, Details, Editor, FrettedChord, FullscreenButton, Popover, ShareButton, Sheet, YouTube, };

package/package.json

@@ -1,18 +1,18 @@
 {
 	"name": "drab",
-	"version": "2.8.7",
-	"description": "An unstyled Svelte component library",
+	"version": "3.0.1",
+	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",
 		"Svelte",
 		"SvelteKit",
 		"Breakpoint",
-		"Chord",
 		"ContextMenu",
 		"Copy",
 		"DataTable",
 		"Details",
 		"Editor",
+		"FrettedChord",
 		"Fullscreen",
 		"Popover",
 		"Share",