drab 2.7.0 → 2.8.0

package/dist/components/Accordion.svelte

@@ -52,7 +52,7 @@ Displays a list of `details` elements with helpful defaults and transitions.
 			summary: "Is it animated?",
 			content: "Yes, with the transition prop.",
 		},
-		{ summary: "Does it work without Javascript?", content: "Yes." },
+		{ summary: "Does it work without JavaScript?", content: "Yes." },
 	]}
 />
 
@@ -112,9 +112,8 @@ const toggleOpen = (i) => {
   items[i].open = !items[i].open;
   if (autoClose) {
     for (let j = 0; j < items.length; j++) {
-      const item = items[j];
       if (j !== i)
-        item.open = false;
+        items[j].open = false;
     }
   }
 };
@@ -169,6 +168,7 @@ onMount(() => {
 				{/if}
 			</details>
 			{#if clientJs && item.open && transition}
+				<!-- outside the details for the transition -->
 				<div class={classContent} transition:slide={transition}>
 					<slot name="content" {item} {index}>{item.content}</slot>
 				</div>

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

@@ -98,7 +98,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * 		summary: "Is it animated?",
  * 		content: "Yes, with the transition prop.",
  * 	},
- * 	{ summary: "Does it work without Javascript?", content: "Yes." },
+ * 	{ summary: "Does it work without JavaScript?", content: "Yes." },
  * ]}
  * />
  *

package/dist/components/DataTable.svelte

@@ -30,6 +30,7 @@ Data table to display an array of JS objects. Click a column header to sort.
 - `id` 
 - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
 - `sortBy` - column to sort by, defaults to first column
+- `transition` - fades the rows in, set to `false` to disable
 
 @slots
 
@@ -109,8 +110,11 @@ Data table to display an array of JS objects. Click a column header to sort.
 
 <script context="module"></script>
 
-<script>import { messageNoScript } from "../util/messages";
-import { onMount } from "svelte";
+<script>import { onMount } from "svelte";
+import { fade } from "svelte/transition";
+import { duration } from "../util/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
@@ -137,6 +141,7 @@ export let classPageNumber = "";
 export let classPageControls = "";
 export let maxRows = 0;
 export let currentPage = 1;
+export let transition = { duration };
 export let classNoscript = "";
 let clientJs = false;
 $:
@@ -175,8 +180,21 @@ const sort = (column, toggleAscending = true) => {
   data = data;
   sortBy = column;
 };
+const showRow = (i, currentPage2) => {
+  if (!maxRows)
+    return true;
+  const overMin = i >= maxRows * (currentPage2 - 1);
+  const underMax = i < maxRows * currentPage2;
+  return overMin && underMax;
+};
 sort(sortBy, false);
-onMount(() => clientJs = true);
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
+  clientJs = true;
+});
 </script>
 
 <div class={className} {id}>
@@ -195,10 +213,11 @@ onMount(() => clientJs = true);
 		</thead>
 		<tbody class={classTbody}>
 			{#each data as row, i}
-				{@const showRow =
-					i < maxRows * currentPage && i >= maxRows * (currentPage - 1)}
-				{#if maxRows ? showRow : true}
-					<tr class={classTbodyTr}>
+				{#if showRow(i, currentPage)}
+					<tr
+						in:fade={transition ? transition : { duration: 0 }}
+						class={classTbodyTr}
+					>
 						{#each columns as column}
 							<td class="{classTd} {sortBy === column ? classTdSorted : ''}">
 								<slot name="td" {row} {column}>{row[column]}</slot>
@@ -237,10 +256,6 @@ onMount(() => clientJs = true);
 			</div>
 		</div>
 
-		<noscript>
-			<div class={classNoscript}>
-				{messageNoScript}
-			</div>
-		</noscript>
+		<noscript><div class={classNoscript}>{messageNoScript}</div></noscript>
 	{/if}
 </div>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 export type DataTableRow<T> = {
     [K in keyof T]: T[K];
 };
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -26,6 +27,7 @@ declare const __propDef: {
         /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
         /** maximum number of rows to show on each page, defaults to `0` - no pagination */ maxRows?: number | undefined;
         /** current page, defaults to `1` */ currentPage?: number | undefined;
+        /** fades the rows in, set to `false` to disable */ transition?: false | FadeParams | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -84,6 +86,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * - `id`
  * - `maxRows` - maximum number of rows to show on each page, defaults to `0` - no pagination
  * - `sortBy` - column to sort by, defaults to first column
+ * - `transition` - fades the rows in, set to `false` to disable
  *
  * @slots
  *

package/dist/components/Popover.svelte

@@ -83,8 +83,8 @@ const setPosition = async () => {
     }
   }
   const targetRect = target.getBoundingClientRect();
-  coordinates.x += targetRect.x;
-  coordinates.y += targetRect.y;
+  coordinates.x += targetRect.x + window.scrollX;
+  coordinates.y += targetRect.y + window.scrollY;
   await tick();
   const popoverRect = popover.getBoundingClientRect();
   if (popoverRect.x < 0) {

package/dist/components/ShareButton.svelte

@@ -3,16 +3,22 @@
 
 ### ShareButton
 
-Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
+Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
+
+- If the browser cannot share the provided data:
+	- `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
+	- `files` - uses a hidden `anchor` element to download the first file in the `files` array
+- If no JavaScript:
+	- `button` is disabled
+	- `url` - displayed after the button
 
 @props
 
 - `classNoscript` - `noscript` class
 - `class` 
 - `id` 
-- `text` - prefixed text in share message
-- `title` - title of share message and `button` attribute, defaults to end of url
-- `url` - url to be shared
+- `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
+- `title` 
 
 @slots
 
@@ -24,43 +30,81 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 @example
 
 ```svelte
-<script>
+<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>
-	<ShareButton
-		class="btn"
-		text="Check out this page: "
-		title="drab"
-		url="https://drab.robino.dev"
+	<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>import { onMount } from "svelte";
 import { delay } from "../util/delay";
+import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
-export let text = "";
-export let url;
-export let title = url.split("/").splice(-1)[0];
+export let title = "";
+export let shareData = {};
+let downloadAnchor;
 export let classNoscript = "";
 let clientJs = false;
 let complete = false;
 const onClick = async () => {
-  try {
-    if (navigator.canShare) {
-      await navigator.share({ text, url, title });
-    } else {
-      await navigator.clipboard.writeText(url);
+  if (navigator.canShare && navigator.canShare(shareData)) {
+    try {
+      await navigator.share(shareData);
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        console.error(error);
+      }
+    }
+  } else if (shareData.url) {
+    try {
+      await navigator.clipboard.writeText(shareData.url);
       complete = true;
       setTimeout(() => complete = false, delay);
+    } catch (error) {
+      console.error(error);
     }
-  } catch (error) {
-    console.log(error);
+  } else if (shareData.files) {
+    const file = shareData.files[0];
+    downloadAnchor.download = file.name;
+    downloadAnchor.href = URL.createObjectURL(file);
+    downloadAnchor.click();
   }
 };
 onMount(() => clientJs = true);
@@ -68,7 +112,7 @@ onMount(() => clientJs = true);
 
 <button
 	type="button"
-	disabled={!clientJs}
+	disabled={!clientJs || (!shareData.url && !shareData.files)}
 	on:click={onClick}
 	class={className}
 	{id}
@@ -81,4 +125,10 @@ onMount(() => clientJs = true);
 	{/if}
 </button>
 
-<noscript><span class={classNoscript}>{url}</span></noscript>
+<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
+
+<noscript>
+	<span class={classNoscript}>
+		{shareData.url ? shareData.url : messageNoScript}
+	</span>
+</noscript>

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

@@ -3,9 +3,8 @@ declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** prefixed text in share message */ text?: string | undefined;
-        /** url to be shared */ url: string;
-        /** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
+        title?: string | undefined;
+        /** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) */ shareData?: ShareData | undefined;
         /** `noscript` class */ classNoscript?: string | undefined;
     };
     events: {
@@ -22,16 +21,22 @@ export type ShareButtonSlots = typeof __propDef.slots;
 /**
  * ### ShareButton
  *
- * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) or the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to share or copy a url link depending on browser support.
+ * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share data. Progressively enhances according to browser support.
+ *
+ * - If the browser cannot share the provided data:
+ * - `url` - uses the the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy
+ * - `files` - uses a hidden `anchor` element to download the first file in the `files` array
+ * - If no JavaScript:
+ * - `button` is disabled
+ * - `url` - displayed after the button
  *
  * @props
  *
  * - `classNoscript` - `noscript` class
  * - `class`
  * - `id`
- * - `text` - prefixed text in share message
- * - `title` - title of share message and `button` attribute, defaults to end of url
- * - `url` - url to be shared
+ * - `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
+ * - `title`
  *
  * @slots
  *
@@ -43,17 +48,43 @@ export type ShareButtonSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { ShareButton } from "drab";
+ *
+ * let fileInput: HTMLInputElement;
+ *
+ * let fileShareData: ShareData;
+ *
+ * const onInput = () => {
+ * 	if (fileInput.files) {
+ * 		fileShareData.files = [fileInput.files[0]];
+ * 	}
+ * };
  * </script>
  *
- * <div>
  * <ShareButton
- * 	class="btn"
- * 	text="Check out this page: "
- * 	title="drab"
- * 	url="https://drab.robino.dev"
+ * 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>
  * ```
  */

package/dist/components/Sheet.svelte

@@ -14,7 +14,7 @@ Creates a sheet element based on the `position` provided.
 - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
 - `position` - determines the position of sheet
 - `transitionSheet` - slides the sheet, set to `false` to remove
-- `transition` - fades the entire component, set to `false` to remove
+- `transition` - blurs the entire component, set to `false` to remove
 
 @slots
 
@@ -61,7 +61,7 @@ Creates a sheet element based on the `position` provided.
 
 <script>import { onMount } from "svelte";
 import {
-  fade,
+  blur,
   fly
 } from "svelte/transition";
 import { prefersReducedMotion } from "../util/accessibility";
@@ -72,7 +72,7 @@ export let id = "";
 export let classSheet = "";
 export let display = false;
 export let transition = { duration };
-export let position = "right";
+export let position = "left";
 export let maxSize = 488;
 export let transitionSheet = { duration };
 let sheet;
@@ -106,7 +106,7 @@ onMount(() => {
 
 {#if display}
 	<div
-		transition:fade={transition ? transition : { duration: 0 }}
+		transition:blur={transition ? transition : { duration: 0 }}
 		class="d-backdrop {className}"
 		class:d-backdrop-bottom={position === "bottom"}
 		class:d-backdrop-top={position === "top"}
@@ -120,11 +120,7 @@ onMount(() => {
 			style={position === "top" || position === "bottom"
 				? `max-height: ${maxSize}px;`
 				: `max-width: ${maxSize}px`}
-			class="d-sheet {classSheet}"
-			class:d-sheet-bottom={position === "bottom"}
-			class:d-sheet-top={position === "top"}
-			class:d-sheet-left={position === "left"}
-			class:d-sheet-right={position === "right"}
+			class={classSheet}
 		>
 			<slot>Content</slot>
 		</div>
@@ -155,23 +151,4 @@ onMount(() => {
 	.d-backdrop-right {
 		flex-direction: row-reverse;
 	}
-	.d-sheet {
-		margin: auto;
-	}
-	.d-sheet-bottom {
-		margin-bottom: 0;
-		width: 100%;
-	}
-	.d-sheet-top {
-		margin-top: 0;
-		width: 100%;
-	}
-	.d-sheet-right {
-		margin-right: 0;
-		height: 100%;
-	}
-	.d-sheet-left {
-		margin-left: 0;
-		height: 100%;
-	}
 </style>

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

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
-import { type FadeParams, type FlyParams } from "svelte/transition";
+import { type BlurParams, type FlyParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
         /** sheet class - not the backdrop */ classSheet?: string | undefined;
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
-        /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | 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;
         /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
@@ -35,7 +35,7 @@ export type SheetSlots = typeof __propDef.slots;
  * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
  * - `position` - determines the position of sheet
  * - `transitionSheet` - slides the sheet, set to `false` to remove
- * - `transition` - fades the entire component, set to `false` to remove
+ * - `transition` - blurs the entire component, set to `false` to remove
  *
  * @slots
  *

package/dist/components/Tabs.svelte

@@ -36,10 +36,10 @@ Displays tabs and the selected tab's content.
 
 <Tabs
 	class="mb-4"
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Content" },
@@ -48,10 +48,10 @@ Displays tabs and the selected tab's content.
 />
 
 <Tabs
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Generated indexes" },
@@ -103,6 +103,7 @@ onMount(() => {
   }
   clientJs = true;
 });
+const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
 </script>
 
 <div class={className} {id}>
@@ -112,7 +113,7 @@ onMount(() => {
 				role="tab"
 				tabindex={index === selectedIndex ? 0 : -1}
 				aria-selected={index === selectedIndex}
-				aria-controls="tabpanel"
+				aria-controls={panelId}
 				disabled={!clientJs}
 				class="{classTab} {selectedIndex === index
 					? classTabActive
@@ -125,13 +126,10 @@ onMount(() => {
 	</div>
 	{#each tabs as tab, index}
 		{#if index === selectedIndex}
-			<div
-				class={classTabPanel}
-				role="tabpanel"
-				id="tabpanel"
-				in:fade={transition ? transition : { duration: 0 }}
-			>
-				<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+			<div class={classTabPanel} role="tabpanel" id={panelId}>
+				<div in:fade={transition ? transition : { duration: 0 }}>
+					<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+				</div>
 			</div>
 		{/if}
 	{/each}

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

@@ -75,10 +75,10 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * <Tabs
  * class="mb-4"
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
- * classTab="btn btn-s rounded-sm p-1"
- * classTabActive="bg-white text-neutral-950"
- * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Content" },
@@ -87,10 +87,10 @@ export type TabsSlots = typeof __propDef.slots;
  * />
  *
  * <Tabs
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
- * classTab="btn btn-s rounded-sm p-1"
- * classTabActive="bg-white text-neutral-950"
- * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Generated indexes" },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",