drab 2.8.6 → 3.0.0

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,42 +13,42 @@ 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";
-</script>
-
-<Chord
-	class="text-neutral-950"
-	name="D"
-	notes={[
-		{
-			finger: 0,
-			string: 4,
-			fret: 0,
-		},
-		{
-			finger: 1,
-			string: 3,
-			fret: 2,
-		},
-		{
-			finger: 2,
-			string: 1,
-			fret: 2,
-		},
-		{
-			finger: 3,
-			string: 2,
-			fret: 3,
-		},
-	]}
-/>
+<script lang="ts">
+	import { FrettedChord } from "drab";
+</script>
+
+<FrettedChord
+	class="font-mono text-neutral-950"
+	name="D"
+	notes={[
+		{
+			finger: 0,
+			string: 4,
+			fret: 0,
+		},
+		{
+			finger: 1,
+			string: 3,
+			fret: 2,
+		},
+		{
+			finger: 2,
+			string: 1,
+			fret: 2,
+		},
+		{
+			finger: 3,
+			string: 2,
+			fret: 3,
+		},
+	]}
+/>
 ```
 -->
 
@@ -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
 
@@ -23,20 +23,20 @@ Make the document or a specific element fullscreen.
 @example
 
 ```svelte
-<script lang="ts">
-	import { FullscreenButton } from "drab";
-
-	let target: HTMLDivElement;
-</script>
-
-<FullscreenButton class="btn" />
-
-<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
-	<div class="mb-2">Target element</div>
-	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
-		Enable Element Fullscreen
-	</FullscreenButton>
-</div>
+<script lang="ts">
+	import { FullscreenButton } from "drab";
+
+	let target: HTMLDivElement;
+</script>
+
+<FullscreenButton class="btn" />
+
+<div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
+	<div class="mb-2">Target element</div>
+	<FullscreenButton {target} class="btn btn-s bg-neutral-50">
+		Enable Element Fullscreen
+	</FullscreenButton>
+</div>
 ```
 -->
 
@@ -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

@@ -1,11 +1,14 @@
-<!--
-@component
-
-### Popover
-
-Displays a popover relatively positioned to the target. Does not require the target to be `position: relative;`.
-
-@props
+<!--
+@component
+
+### Popover
+
+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
 
 - `class` 
 - `display` - shows / hides the popover
@@ -14,41 +17,41 @@ Displays a popover relatively positioned to the target. Does not require the tar
 - `target` - target element to position the popover in relation to
 - `transition` - scales the popover, set to `false` to disable
 
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | default                         | Popover       |
-
-@example
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | Popover       |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { Popover } from "drab";
-
-	let target: HTMLButtonElement;
-
-	let display = false;
-
-	const open = () => (display = true);
-	const close = () => (display = false);
-</script>
-
-<button class="btn" type="button" bind:this={target} on:click={open}>
-	Open
-</button>
-
-<Popover {target} bind:display class="p-2">
-	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
-		<div class="font-bold">Bottom</div>
-		<button class="btn" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-	</div>
-</Popover>
+<script lang="ts">
+	import { Popover } from "drab";
+
+	let target: HTMLButtonElement;
+
+	let display = false;
+
+	const open = () => (display = true);
+	const close = () => (display = false);
+</script>
+
+<button class="btn" type="button" bind:this={target} on:click={open}>
+	Open
+</button>
+
+<Popover {target} bind:display class="p-2">
+	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+		<div class="font-bold">Bottom</div>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+		<button class="btn" on:click={close}>Close</button>
+	</div>
+</Popover>
 ```
--->
-
+-->
+
 <script>import { prefersReducedMotion } from "../util/accessibility";
 import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
@@ -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;
@@ -106,26 +109,26 @@ onMount(() => {
   if (prefersReducedMotion())
     transition = false;
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if display}
-	<div
-		role="dialog"
-		bind:this={popover}
-		class={className}
-		{id}
-		style:top="{coordinates.y}px"
-		style:left="{coordinates.x}px"
-		transition:scale={transition ? transition : { duration: 0 }}
-	>
-		<slot>Popover</slot>
-	</div>
-{/if}
-
-<style>
-	div {
-		position: absolute;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		role="dialog"
+		bind:this={popover}
+		class={className}
+		{id}
+		style:top="{coordinates.y}px"
+		style:left="{coordinates.x}px"
+		transition:scale={transition ? transition : { duration: 0 }}
+	>
+		<slot>Popover</slot>
+	</div>
+{/if}
+
+<style>
+	div {
+		position: absolute;
+	}
+</style>

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/ShareButton.svelte

@@ -30,44 +30,44 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 @example
 
 ```svelte
-<script lang="ts">
-	import { ShareButton } from "drab";
-
-	let fileInput: HTMLInputElement;
-
-	let fileShareData: ShareData;
-
-	const onInput = () => {
-		if (fileInput.files) {
-			fileShareData.files = [fileInput.files[0]];
-		}
-	};
-</script>
-
-<ShareButton
-	class="btn mb-8"
-	shareData={{
-		text: "Check out this page: ",
-		title: "drab",
-		url: "https://drab.robino.dev",
-	}}
->
-	Share URL
-</ShareButton>
-
-<div>
-	<label class="label" for="fileInput">Upload File</label>
-	<input
-		type="file"
-		id="fileInput"
-		class="input mb-4"
-		bind:this={fileInput}
-		on:input={onInput}
-	/>
-	<ShareButton class="btn" bind:shareData={fileShareData}>
-		Share File
-	</ShareButton>
-</div>
+<script lang="ts">
+	import { ShareButton } from "drab";
+
+	let fileInput: HTMLInputElement;
+
+	let fileShareData: ShareData;
+
+	const onInput = () => {
+		if (fileInput.files) {
+			fileShareData.files = [fileInput.files[0]];
+		}
+	};
+</script>
+
+<ShareButton
+	class="btn mb-8"
+	shareData={{
+		text: "Check out this page: ",
+		title: "drab",
+		url: "https://drab.robino.dev",
+	}}
+>
+	Share URL
+</ShareButton>
+
+<div>
+	<label class="label" for="fileInput">Upload File</label>
+	<input
+		type="file"
+		id="fileInput"
+		class="input mb-4"
+		bind:this={fileInput}
+		on:input={onInput}
+	/>
+	<ShareButton class="btn" bind:shareData={fileShareData}>
+		Share File
+	</ShareButton>
+</div>
 ```
 -->