drab 3.0.2 → 3.0.4

package/dist/components/Editor.svelte

@@ -1,65 +1,71 @@
-<!--
-@component
-
-### Editor
-
-`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)
-
-@props
-
-- `classButton` - `class` of all the `button` elements
-- `classControls` - `class` of the `div` that wraps the controls
-- `classTextarea` - `class` of the `textarea` element
-- `contentElements` - an array of `EditorContentElement`s for 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
-- `selectionStartTextarea` - `selectionStart` value of the `textarea`
-- `valueTextarea` - `value` of the `textarea` element
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Editor } from "drab";
-</script>
-
-<Editor
-	classButton="btn"
-	classControls="flex gap-2"
-	classTextarea="border w-full h-36 p-2 rounded mb-2"
-	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
-	contentElements={[
-		{
-			title: "Bullet",
-			text: "- ",
-			display: "block",
-			icon: "Bullet",
-		},
-		{
-			title: "Italic",
-			text: "*",
-			display: "wrap",
-			icon: "Italic",
-			key: "i",
-			class: "italic",
-		},
-		{
-			title: "Anchor",
-			text: "[text](href)",
-			display: "inline",
-			icon: "Anchor",
-			key: "[",
-		},
-	]}
-/>
-```
--->
-
+<!--
+@component
+
+### Editor
+
+`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)
+
+@props
+
+- `classButton` - `class` of all the `button` elements
+- `classControls` - `class` of the `div` that wraps the controls
+- `classTextarea` - `class` of the `textarea` element
+- `contentElements` - an array of `EditorContentElement`s for 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
+- `selectionStartTextarea` - `selectionStart` value of the `textarea`
+- `valueTextarea` - `value` of the `textarea` element
+
+@Events
+
+| name    | event                   |
+| ------- | ----------------------- |
+| `input` | forward from `textarea` |
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Editor } from "drab";
+</script>
+
+<Editor
+	classButton="button button-primary"
+	classControls="flex gap-2"
+	classTextarea="input w-full h-36 mb-2"
+	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
+	contentElements={[
+		{
+			title: "Bullet",
+			text: "- ",
+			display: "block",
+			icon: "Bullet",
+		},
+		{
+			title: "Italic",
+			text: "*",
+			display: "wrap",
+			icon: "Italic",
+			key: "i",
+			class: "italic",
+		},
+		{
+			title: "Anchor",
+			text: "[text](href)",
+			display: "inline",
+			icon: "Anchor",
+			key: "[",
+		},
+	]}
+/>
+```
+-->
+
 <script>import { onMount } from "svelte";
 export let contentElements = [];
 export let valueTextarea = "";
@@ -338,39 +344,39 @@ const correctFollowing = (currentLineNumber, decrement = false) => {
   valueTextarea = lines.join("\n");
 };
 onMount(() => clientJs = true);
-</script>
-
-<textarea
-	id={idTextarea}
-	class={classTextarea}
-	name={nameTextarea}
-	placeholder={placeholderTextarea}
-	on:keydown={onKeyDown}
-	on:keyup={updateSelectionStart}
-	on:dblclick={trimSelection}
-	bind:value={valueTextarea}
-	bind:this={textArea}
-	on:click={() => {
-		openChars = [];
-		updateSelectionStart();
-	}}
-	on:input
-/>
-
-<div id={idControls} class={classControls}>
-	{#each contentElements as el}
-		<button
-			type="button"
-			class={el.class ? `${classButton} ${el.class}` : classButton}
-			on:click={() => addContent(el)}
-			title={el.title}
-			disabled={!clientJs}
-		>
-			{#if typeof el.icon !== "string"}
-				<svelte:component this={el.icon} />
-			{:else}
-				{el.icon}
-			{/if}
-		</button>
-	{/each}
-</div>
+</script>
+
+<textarea
+	id={idTextarea}
+	class={classTextarea}
+	name={nameTextarea}
+	placeholder={placeholderTextarea}
+	on:keydown={onKeyDown}
+	on:keyup={updateSelectionStart}
+	on:dblclick={trimSelection}
+	bind:value={valueTextarea}
+	bind:this={textArea}
+	on:click={() => {
+		openChars = [];
+		updateSelectionStart();
+	}}
+	on:input
+/>
+
+<div id={idControls} class={classControls}>
+	{#each contentElements as el}
+		<button
+			type="button"
+			class={el.class ? `${classButton} ${el.class}` : classButton}
+			on:click={() => addContent(el)}
+			title={el.title}
+			disabled={!clientJs}
+		>
+			{#if typeof el.icon !== "string"}
+				<svelte:component this={el.icon} />
+			{:else}
+				{el.icon}
+			{/if}
+		</button>
+	{/each}
+</div>

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

@@ -60,6 +60,12 @@ export type EditorSlots = typeof __propDef.slots;
  * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
  * - `valueTextarea` - `value` of the `textarea` element
  *
+ * @Events
+ *
+ * | name    | event                   |
+ * | ------- | ----------------------- |
+ * | `input` | forward from `textarea` |
+ *
  * @example
  *
  * ```svelte
@@ -68,9 +74,9 @@ export type EditorSlots = typeof __propDef.slots;
  * </script>
  *
  * <Editor
- * classButton="btn"
+ * classButton="button button-primary"
  * classControls="flex gap-2"
- * classTextarea="border w-full h-36 p-2 rounded mb-2"
+ * classTextarea="input w-full h-36 mb-2"
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{

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-foreground"
+	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/FrettedChord.svelte.d.ts

@@ -47,7 +47,7 @@ export type FrettedChordSlots = typeof __propDef.slots;
  * </script>
  *
  * <FrettedChord
- * class="font-mono text-neutral-950"
+ * class="font-mono text-foreground"
  * name="D"
  * notes={[
  * 	{

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="button button-primary" />
+
+<div bind:this={target} class="mt-8 rounded border bg-muted p-4">
+	<div class="mb-2">Target element</div>
+	<FullscreenButton {target} class="button button-primary">
+		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>