drab 3.0.0 → 3.0.2

package/dist/components/FrettedChord.svelte

@@ -1,57 +1,57 @@
-<!--
-@component
-
-### FrettedChord
-
-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
-
-- `class` 
-- `id` 
-- `name` - name of chord
-- `notes` - list of the positioning of the notes required for the chord
-- `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 { 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,
-		},
-	]}
-/>
-```
--->
-
+<!--
+@component
+
+### FrettedChord
+
+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
+
+- `class` 
+- `id` 
+- `name` - name of chord
+- `notes` - list of the positioning of the notes required for the chord
+- `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 { 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,
+		},
+	]}
+/>
+```
+-->
+
 <script>let className = "";
 export { className as class };
 export let id = "";
@@ -111,103 +111,103 @@ const noteX = (string) => {
 const noteY = (fret) => {
   return boxSize / fretRange * fret + offset / 2 - boxSize / fretRange / 2;
 };
-</script>
-
-{#if notes.length}
-	<svg
-		width={size}
-		height={size}
-		stroke="currentColor"
-		fill="currentColor"
-		class={className}
-		{id}
-	>
-		<title>{name}</title>
-
-		<!-- BACKGROUND -->
-		<rect
-			width={boxSize}
-			height={boxSize}
-			fill="transparent"
-			x={offset}
-			y={offset / 2}
-			stroke-width={strokeWidth}
-		/>
-		<line
-			x1={offset - strokeWidth / 2}
-			y1={offset / 2 - strokeWidth / 2}
-			x2={boxSize + offset + strokeWidth / 2}
-			y2={offset / 2 - strokeWidth / 2}
-			stroke-width={strokeWidth * 2}
-		/>
-
-		<!-- FRETS -->
-		{#each Array.from(Array(fretRange).keys()) as fret}
-			<line
-				x1={offset}
-				y1={fretY(fret) - offset / 2}
-				x2={boxSize + offset}
-				y2={fretY(fret) - offset / 2}
-				stroke-width={strokeWidth}
-				opacity="0.2"
-			/>
-		{/each}
-
-		<!-- STRINGS -->
-		{#each stringList as string}
-			<line
-				x1={stringX(string)}
-				y1={offset / 2}
-				x2={stringX(string)}
-				y2={boxSize + offset / 2}
-				stroke-width={strokeWidth}
-			/>
-		{/each}
-
-		<!-- NOTES -->
-		{#each notesList as note}
-			{#if note.fret !== 0}
-				<circle
-					cx={noteX(note.string)}
-					cy={noteY(note.fret)}
-					r={circleRadius}
-				/>
-			{/if}
-			{#if note.finger !== 0}
-				<!-- RECOMMENDED FINGER -->
-				<text
-					x={noteX(note.string) - size / 50}
-					y={note.fret === 0
-						? offset / 2 - strokeWidth * 2.4
-						: size - offset * 1.1}
-					color="currentColor"
-					fill="currentColor"
-					font-size={size / 13}
-				>
-					{note.finger}
-				</text>
-			{/if}
-		{/each}
-
-		<!-- CHORD NAME -->
-		<text
-			x={offset}
-			y={size - offset / 2.5}
-			font-size={boxSize / 6}
-			font-weight="600"
-		>
-			{name}
-		</text>
-
-		<!-- STARTING FRET -->
-		{#if firstFret > 1}
-			<text
-				x={size - offset / 1.8}
-				y={offset / 2 + boxSize / 7}
-				font-size={size / 13}
-			>
-				{firstFret}f
-			</text>
-		{/if}
-	</svg>
-{/if}
+</script>
+
+{#if notes.length}
+	<svg
+		width={size}
+		height={size}
+		stroke="currentColor"
+		fill="currentColor"
+		class={className}
+		{id}
+	>
+		<title>{name}</title>
+
+		<!-- BACKGROUND -->
+		<rect
+			width={boxSize}
+			height={boxSize}
+			fill="transparent"
+			x={offset}
+			y={offset / 2}
+			stroke-width={strokeWidth}
+		/>
+		<line
+			x1={offset - strokeWidth / 2}
+			y1={offset / 2 - strokeWidth / 2}
+			x2={boxSize + offset + strokeWidth / 2}
+			y2={offset / 2 - strokeWidth / 2}
+			stroke-width={strokeWidth * 2}
+		/>
+
+		<!-- FRETS -->
+		{#each Array.from(Array(fretRange).keys()) as fret}
+			<line
+				x1={offset}
+				y1={fretY(fret) - offset / 2}
+				x2={boxSize + offset}
+				y2={fretY(fret) - offset / 2}
+				stroke-width={strokeWidth}
+				opacity="0.2"
+			/>
+		{/each}
+
+		<!-- STRINGS -->
+		{#each stringList as string}
+			<line
+				x1={stringX(string)}
+				y1={offset / 2}
+				x2={stringX(string)}
+				y2={boxSize + offset / 2}
+				stroke-width={strokeWidth}
+			/>
+		{/each}
+
+		<!-- NOTES -->
+		{#each notesList as note}
+			{#if note.fret !== 0}
+				<circle
+					cx={noteX(note.string)}
+					cy={noteY(note.fret)}
+					r={circleRadius}
+				/>
+			{/if}
+			{#if note.finger !== 0}
+				<!-- RECOMMENDED FINGER -->
+				<text
+					x={noteX(note.string) - size / 50}
+					y={note.fret === 0
+						? offset / 2 - strokeWidth * 2.4
+						: size - offset * 1.1}
+					color="currentColor"
+					fill="currentColor"
+					font-size={size / 13}
+				>
+					{note.finger}
+				</text>
+			{/if}
+		{/each}
+
+		<!-- CHORD NAME -->
+		<text
+			x={offset}
+			y={size - offset / 2.5}
+			font-size={boxSize / 6}
+			font-weight="600"
+		>
+			{name}
+		</text>
+
+		<!-- STARTING FRET -->
+		{#if firstFret > 1}
+			<text
+				x={size - offset / 1.8}
+				y={offset / 2 + boxSize / 7}
+				font-size={size / 13}
+			>
+				{firstFret}f
+			</text>
+		{/if}
+	</svg>
+{/if}

package/dist/components/FullscreenButton.svelte

@@ -1,45 +1,45 @@
-<!--
-@component
-
-### FullscreenButton
-
-Make the document or a `target` element fullscreen.
-
-@props
-
-- `class` 
-- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
-- `id` 
-- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
-- `title` 
-
-@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`    |
-
-@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>
-```
--->
-
+<!--
+@component
+
+### FullscreenButton
+
+Make the document or a `target` element fullscreen.
+
+@props
+
+- `class` 
+- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
+- `id` 
+- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
+- `title` 
+
+@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`    |
+
+@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>import { onMount } from "svelte";
 let className = "";
 export { className as class };
@@ -75,21 +75,21 @@ onMount(() => {
   if (!target)
     target = document.documentElement;
 });
-</script>
-
-<svelte:window on:fullscreenchange={syncFullscreen} />
-
-<button
-	type="button"
-	{disabled}
-	on:click={onClick}
-	class={className}
-	{id}
-	{title}
->
-	{#if fullscreen}
-		<slot name="enabled">Exit Fullscreen</slot>
-	{:else}
-		<slot>Enable Fullscreen</slot>
-	{/if}
-</button>
+</script>
+
+<svelte:window on:fullscreenchange={syncFullscreen} />
+
+<button
+	type="button"
+	{disabled}
+	on:click={onClick}
+	class={className}
+	{id}
+	{title}
+>
+	{#if fullscreen}
+		<slot name="enabled">Exit Fullscreen</slot>
+	{:else}
+		<slot>Enable Fullscreen</slot>
+	{/if}
+</button>

package/dist/components/Popover.svelte

@@ -1,57 +1,57 @@
-<!--
-@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
-- `id` 
-- `position` - where the popover is displayed in relation to the `target`
-- `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
-
-```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>
-```
--->
-
+<!--
+@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
+- `id` 
+- `position` - where the popover is displayed in relation to the `target`
+- `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
+
+```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>import { prefersReducedMotion } from "../util/accessibility";
 import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
@@ -109,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>