drab 2.8.5 → 2.8.7

package/dist/components/DataTable.svelte

@@ -1,11 +1,11 @@
-<!--
-@component
-
-### 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. 
-
-@props
+<!--
+@component
+
+### 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. 
+
+@props
 
 - `ascending` - current sort order
 - `classTbodyTr` - `tbody tr` class
@@ -23,88 +23,88 @@ Data table to display an array of JS objects. Provides pagination and sorting fo
 - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - key (column) to sort by, defaults to first key
 
-@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`                 |
-
-@example
+@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`                 |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import { DataTable } from "drab";
-
-	let currentPage = 0;
-
-	const data: ComponentProps<DataTable>["data"] = [
-		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
-		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
-		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
-		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
-		{ make: "Ford", model: "Model A", year: 1931, awd: false },
-		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
-		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
-		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
-		{ make: "BMW", model: "X3", year: 2023, awd: true },
-	];
-</script>
-
-<DataTable {data} class="mb-12" />
-
-<DataTable
-	{data}
-	bind:currentPage
-	sortBy="year"
-	maxRows={4}
-	class="tabular-nums"
-	classTh="cursor-pointer capitalize"
-	classTbodyTr="transition hover:bg-neutral-50"
->
-	<svelte:fragment slot="th" let:key let:sortBy>
-		<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
-			{key}
-		</span>
-	</svelte:fragment>
-	<svelte:fragment slot="td" let:value>
-		{#if typeof value === "boolean"}
-			{value ? "Yes" : "No"}
-		{:else}
-			{value}
-		{/if}
-	</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>
-					<button
-						type="button"
-						class="btn"
-						disabled={currentPage < 1}
-						on:click={() => currentPage--}
-					>
-						Previous
-					</button>
-					<button
-						type="button"
-						class="btn"
-						disabled={currentPage >= numberOfPages - 1}
-						on:click={() => currentPage++}
-					>
-						Next
-					</button>
-				</div>
-			</div>
-		{/if}
-	</svelte:fragment>
-</DataTable>
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { DataTable } from "drab";
+
+	let currentPage = 0;
+
+	const data: ComponentProps<DataTable>["data"] = [
+		{ make: "Honda", model: "CR-V", year: 2011, awd: true },
+		{ make: "Volvo", model: "XC-40", year: 2024, awd: true },
+		{ make: "Ferrari", model: "458 Italia", year: 2015, awd: false },
+		{ make: "Chevrolet", model: "Silverado", year: 2022, awd: true },
+		{ make: "Ford", model: "Model A", year: 1931, awd: false },
+		{ make: "Subaru", model: "Outback", year: 2021, awd: true },
+		{ make: "Ford", model: "Bronco", year: 1970, awd: true },
+		{ make: "GMC", model: "Acadia", year: 2008, awd: true },
+		{ make: "BMW", model: "X3", year: 2023, awd: true },
+	];
+</script>
+
+<DataTable {data} class="mb-12" />
+
+<DataTable
+	{data}
+	bind:currentPage
+	sortBy="year"
+	maxRows={4}
+	class="tabular-nums"
+	classTh="cursor-pointer capitalize"
+	classTbodyTr="transition hover:bg-neutral-50"
+>
+	<svelte:fragment slot="th" let:key let:sortBy>
+		<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
+			{key}
+		</span>
+	</svelte:fragment>
+	<svelte:fragment slot="td" let:value>
+		{#if typeof value === "boolean"}
+			{value ? "Yes" : "No"}
+		{:else}
+			{value}
+		{/if}
+	</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>
+					<button
+						type="button"
+						class="btn"
+						disabled={currentPage < 1}
+						on:click={() => currentPage--}
+					>
+						Previous
+					</button>
+					<button
+						type="button"
+						class="btn"
+						disabled={currentPage >= numberOfPages - 1}
+						on:click={() => currentPage++}
+					>
+						Next
+					</button>
+				</div>
+			</div>
+		{/if}
+	</svelte:fragment>
+</DataTable>
 ```
--->
-
+-->
+
 <script>let className = "";
 export { className as class };
 export let id = "";
@@ -170,33 +170,33 @@ const showRow = (i, currentPage2) => {
   return overMin && underMax;
 };
 sort(sortBy, false);
-</script>
-
-<table class={className} {id}>
-	<thead class={classThead}>
-		<tr class="{classTr} {classTheadTr}">
-			{#each keys as key}
-				<th class={classTh} on:click={() => sort(key)}>
-					<slot name="th" {key} {sortBy}>{key}</slot>
-				</th>
-			{/each}
-		</tr>
-	</thead>
-	<tbody class={classTbody}>
-		{#each data as item, i}
-			{#if showRow(i, currentPage)}
-				<tr class="{classTr} {classTbodyTr}">
-					{#each keys as key}
-						<td class={classTd}>
-							<slot name="td" {item} {key} {sortBy} value={item[key]}>
-								{item[key]}
-							</slot>
-						</td>
-					{/each}
-				</tr>
-			{/if}
-		{/each}
-	</tbody>
-</table>
-
-<slot name="controls" {maxRows} {numberOfPages} />
+</script>
+
+<table class={className} {id}>
+	<thead class={classThead}>
+		<tr class="{classTr} {classTheadTr}">
+			{#each keys as key}
+				<th class={classTh} on:click={() => sort(key)}>
+					<slot name="th" {key} {sortBy}>{key}</slot>
+				</th>
+			{/each}
+		</tr>
+	</thead>
+	<tbody class={classTbody}>
+		{#each data as item, i}
+			{#if showRow(i, currentPage)}
+				<tr class="{classTr} {classTbodyTr}">
+					{#each keys as key}
+						<td class={classTd}>
+							<slot name="td" {item} {key} {sortBy} value={item[key]}>
+								{item[key]}
+							</slot>
+						</td>
+					{/each}
+				</tr>
+			{/if}
+		{/each}
+	</tbody>
+</table>
+
+<slot name="controls" {maxRows} {numberOfPages} />

package/dist/components/Details.svelte

@@ -1,50 +1,50 @@
-<!--
-@component
-
-### Details
-
-Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
-
-@props
+<!--
+@component
+
+### Details
+
+Displays a `details` element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.
+
+@props
 
 - `class` 
 - `id` 
 - `open` 
 - `transition` - slides the content, set to `false` to remove
 
-@slots
-
-| name      | purpose                         | default value  | slot props |
-| --------- | ------------------------------- | -------------- | ---------- |
-| `summary` | `summary` element contents      | none           | `open`     |
-| `content` | contents when details is `open` | none           | none       |
-
-@example
+@slots
+
+| name      | purpose                         | default value  | slot props |
+| --------- | ------------------------------- | -------------- | ---------- |
+| `summary` | `summary` element contents      | none           | `open`     |
+| `content` | contents when details is `open` | none           | none       |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { Details } from "drab";
-	import Chevron from "../../site/svg/Chevron.svelte";
-</script>
-
-<Details class="border-b">
-	<svelte:fragment slot="summary" let:open>
-		<div
-			class="flex cursor-pointer items-center justify-between gap-8 p-4 font-bold underline hover:decoration-dotted"
-		>
-			<div>Does it work without JavaScript?</div>
-			<div class="transition" class:rotate-180={open}>
-				<Chevron />
-			</div>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="px-4 pb-4">Yes.</div>
-	</svelte:fragment>
-</Details>
+<script lang="ts">
+	import { Details } from "drab";
+	import Chevron from "../../site/svg/Chevron.svelte";
+</script>
+
+<Details class="border-b">
+	<svelte:fragment slot="summary" let:open>
+		<div
+			class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
+		>
+			<div>Does it work without JavaScript?</div>
+			<div class="transition" class:rotate-180={open}>
+				<Chevron />
+			</div>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="px-4 pb-4">Yes.</div>
+	</svelte:fragment>
+</Details>
 ```
--->
-
+-->
+
 <script>import { onMount } from "svelte";
 import { slide } from "svelte/transition";
 import { prefersReducedMotion } from "../util/accessibility";
@@ -63,41 +63,41 @@ onMount(() => {
   if (prefersReducedMotion())
     transition = false;
 });
-</script>
-
-<div class={className} {id}>
-	<details bind:open>
-		<!-- svelte-ignore a11y-no-redundant-roles -->
-		<summary
-			role="button"
-			tabindex="0"
-			on:click|preventDefault={toggleOpen}
-			on:keydown={(e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					toggleOpen();
-				}
-			}}
-		>
-			<slot name="summary" {open} />
-		</summary>
-		{#if !clientJs || !transition}
-			<slot name="content" />
-		{/if}
-	</details>
-	{#if clientJs && open && transition}
-		<!-- outside the details for the transition -->
-		<div transition:slide={transition}>
-			<slot name="content" />
-		</div>
-	{/if}
-</div>
-
-<style>
-	summary {
-		list-style: none;
-	}
-	summary::-webkit-details-marker {
-		display: none;
-	}
-</style>
+</script>
+
+<div class={className} {id}>
+	<details bind:open>
+		<!-- svelte-ignore a11y-no-redundant-roles -->
+		<summary
+			role="button"
+			tabindex="0"
+			on:click|preventDefault={toggleOpen}
+			on:keydown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					toggleOpen();
+				}
+			}}
+		>
+			<slot name="summary" {open} />
+		</summary>
+		{#if !clientJs || !transition}
+			<slot name="content" />
+		{/if}
+	</details>
+	{#if clientJs && open && transition}
+		<!-- outside the details for the transition -->
+		<div transition:slide={transition}>
+			<slot name="content" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	summary {
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+</style>

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

@@ -50,7 +50,7 @@ export type DetailsSlots = typeof __propDef.slots;
  * <Details class="border-b">
  * <svelte:fragment slot="summary" let:open>
  * 	<div
- * 		class="flex cursor-pointer items-center justify-between gap-8 p-4 font-bold underline hover:decoration-dotted"
+ * 		class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
  * 	>
  * 		<div>Does it work without JavaScript?</div>
  * 		<div class="transition" class:rotate-180={open}>

package/dist/components/Editor.svelte

@@ -24,39 +24,39 @@
 @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={[
-		{
-			name: "Bullet",
-			text: "- ",
-			display: "block",
-			icon: "Bullet",
-		},
-		{
-			name: "Asterisk",
-			text: "*",
-			display: "wrap",
-			icon: "Asterisk",
-			key: "i",
-			class: "italic",
-		},
-		{
-			name: "Anchor",
-			text: "[text](href)",
-			display: "inline",
-			icon: "Anchor",
-			key: "[",
-		},
-	]}
-/>
+<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={[
+		{
+			name: "Bullet",
+			text: "- ",
+			display: "block",
+			icon: "Bullet",
+		},
+		{
+			name: "Italic",
+			text: "*",
+			display: "wrap",
+			icon: "Italic",
+			key: "i",
+			class: "italic",
+		},
+		{
+			name: "Anchor",
+			text: "[text](href)",
+			display: "inline",
+			icon: "Anchor",
+			key: "[",
+		},
+	]}
+/>
 ```
 -->
 

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

@@ -80,10 +80,10 @@ export type EditorSlots = typeof __propDef.slots;
  * 		icon: "Bullet",
  * 	},
  * 	{
- * 		name: "Asterisk",
+ * 		name: "Italic",
  * 		text: "*",
  * 		display: "wrap",
- * 		icon: "Asterisk",
+ * 		icon: "Italic",
  * 		key: "i",
  * 		class: "italic",
  * 	},

package/dist/components/FullscreenButton.svelte

@@ -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>
 ```
 -->