drab 2.5.0 → 2.6.1

package/dist/components/Popover.svelte

@@ -7,15 +7,12 @@ Displays a popover relatively positioned to the button.
 
 @props
 
-- `classButton` - `button` class
-- `classPopover` - popover class
 - `class` 
 - `display` - if `eventType="click"`, controls the display
-- `eventType` - controls if hovering or clicking the button displays the popover
-- `idButton` - `button` id
-- `idPopover` - popover id
 - `id` 
-- `position` - where the popover is displayed in relation to the button
+- `position` - where the popover is displayed in relation to the target
+- `target` - target element to position the popover in relation to
+- `transition` - fades in and out, set to false to disable
 
 @slots
 
@@ -27,28 +24,27 @@ Displays a popover relatively positioned to the button.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Popover } from "drab";
+
+	let button: HTMLButtonElement;
+	let hoverButton: HTMLButtonElement;
+
+	let display = false;
 </script>
 
-<Popover classButton="btn" classPopover="p-2 transition">
-	<span slot="button">Hover</span>
-	<div class="card flex w-48 flex-col gap-2">
-		<div class="font-bold">Bottom</div>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-		<button class="btn">Button</button>
-	</div>
-</Popover>
-<Popover
-	classButton="btn"
-	classPopover="p-2 transition"
-	eventType="click"
-	position="right"
+<button
+	class="btn"
+	type="button"
+	bind:this={button}
+	on:click={() => (display = !display)}
 >
-	<span slot="button">Click</span>
-	<div class="card flex w-48 flex-col gap-2">
-		<div class="font-bold">Right</div>
+	{display ? "Close" : "Open"}
+</button>
+
+<Popover target={button} 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">Button</button>
 		<button class="btn">Button</button>
 		<button class="btn">Button</button>
@@ -57,55 +53,49 @@ Displays a popover relatively positioned to the button.
 ```
 -->
 
-<script>import { onMount, tick } from "svelte";
+<script>import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
+import { onMount, tick } from "svelte";
+import { fade } from "svelte/transition";
 let className = "";
 export { className as class };
 export let id = "";
-export let classButton = "";
-export let classPopover = "";
-export let idButton = "";
-export let idPopover = "";
-export let display = false;
+export let display = true;
 export let position = "bottom";
-export let eventType = "hover";
-let clientEventType = "hover";
+export let target;
+export let transition = { duration };
 let popover;
-let button;
 let coordinates = { x: 0, y: 0 };
-const correctPosition = async () => {
+const setPosition = async () => {
   if (position === "top" || position === "bottom") {
-    coordinates.x = button.offsetWidth / 2 - popover.offsetWidth / 2;
+    coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
     if (position === "top") {
       coordinates.y = -popover.offsetHeight;
     } else {
-      coordinates.y = button.offsetHeight;
+      coordinates.y = target.offsetHeight;
     }
   } else {
-    coordinates.y = button.offsetHeight / 2 - popover.offsetHeight / 2;
+    coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
     if (position === "left") {
       coordinates.x = -popover.offsetWidth;
     } else {
-      coordinates.x = button.offsetWidth;
+      coordinates.x = target.offsetWidth;
     }
   }
+  const targetRect = target.getBoundingClientRect();
+  coordinates.x += targetRect.x;
+  coordinates.y += targetRect.y;
   await tick();
-  const rect = popover.getBoundingClientRect();
-  if (rect.x < 0) {
-    coordinates.x += Math.abs(rect.x);
-  } else if (rect.x + popover.offsetWidth > window.innerWidth) {
-    coordinates.x -= rect.x + popover.offsetWidth - window.innerWidth + 16;
+  const popoverRect = popover.getBoundingClientRect();
+  if (popoverRect.x < 0) {
+    coordinates.x += Math.abs(popoverRect.x);
+  } else if (popoverRect.x + popover.offsetWidth > window.innerWidth) {
+    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + 16;
   }
-  if (rect.y < 0) {
-    coordinates.y += Math.abs(rect.y);
-  } else if (rect.y + popover.offsetHeight > window.innerHeight) {
-    coordinates.y -= rect.y + popover.offsetHeight - window.innerHeight;
-  }
-};
-const clickOutside = (e) => {
-  if (popover && e.target instanceof HTMLElement) {
-    if (!popover.contains(e.target)) {
-      display = false;
-    }
+  if (popoverRect.y < 0) {
+    coordinates.y += Math.abs(popoverRect.y);
+  } else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
+    coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
   }
 };
 const onKeyDown = (e) => {
@@ -113,58 +103,35 @@ const onKeyDown = (e) => {
     display = false;
   }
 };
-const openPopover = async (e) => {
-  e.stopPropagation();
-  display = true;
-};
+$:
+  if (target && popover)
+    setPosition();
 onMount(() => {
-  clientEventType = eventType;
-  correctPosition();
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+  }
 });
 </script>
 
-<svelte:body on:keydown={onKeyDown} on:click={clickOutside} />
+<svelte:body on:keydown={onKeyDown} />
 
-<div class="db-relative {className}" {id}>
-	<button
-		bind:this={button}
-		id={idButton}
-		class={classButton}
-		on:click={openPopover}
-		on:mouseover={correctPosition}
-		on:focus={correctPosition}
-	>
-		<slot name="button">Open</slot>
-	</button>
+{#if display}
 	<div
+		role="dialog"
 		bind:this={popover}
-		id={idPopover}
-		class="db-popover {classPopover}"
-		class:db-type-click={clientEventType === "click" && display}
-		class:db-type-hover={clientEventType === "hover"}
+		class={className}
+		{id}
 		style:top="{coordinates.y}px"
 		style:left="{coordinates.x}px"
-		inert={clientEventType === "hover" || display ? false : true}
+		transition:fade={transition ? transition : { duration: 0 }}
 	>
 		<slot>Popover</slot>
 	</div>
-</div>
+{/if}
 
 <style>
-	.db-relative {
-		position: relative;
-	}
-	.db-popover {
+	div {
 		position: absolute;
-		opacity: 0;
-		z-index: -10;
-	}
-	button:hover + .db-type-hover,
-	button:focus + .db-type-hover,
-	.db-type-hover:hover,
-	.db-type-hover:focus-within,
-	.db-type-click {
-		opacity: 1;
-		z-index: 10;
 	}
 </style>

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

@@ -1,21 +1,18 @@
 import { SvelteComponent } from "svelte";
+import { type FadeParams } from "svelte/transition";
 declare const __propDef: {
     props: {
         class?: string | undefined;
         id?: string | undefined;
-        /** `button` class */ classButton?: string | undefined;
-        /** popover class */ classPopover?: string | undefined;
-        /** `button` id */ idButton?: string | undefined;
-        /** popover id */ idPopover?: string | undefined;
         /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the button */ position?: "top" | "bottom" | "left" | "right" | undefined;
-        /** controls if hovering or clicking the button displays the popover */ eventType?: ("click" | "hover") | undefined;
+        /** where the popover is displayed in relation to the target */ position?: "top" | "bottom" | "left" | "right" | undefined;
+        /** target element to position the popover in relation to */ target: HTMLElement;
+        /** fades in and out, set to false to disable */ transition?: false | FadeParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        button: {};
         default: {};
     };
 };
@@ -29,15 +26,12 @@ export type PopoverSlots = typeof __propDef.slots;
  *
  * @props
  *
- * - `classButton` - `button` class
- * - `classPopover` - popover class
  * - `class`
  * - `display` - if `eventType="click"`, controls the display
- * - `eventType` - controls if hovering or clicking the button displays the popover
- * - `idButton` - `button` id
- * - `idPopover` - popover id
  * - `id`
- * - `position` - where the popover is displayed in relation to the button
+ * - `position` - where the popover is displayed in relation to the target
+ * - `target` - target element to position the popover in relation to
+ * - `transition` - fades in and out, set to false to disable
  *
  * @slots
  *
@@ -49,28 +43,27 @@ export type PopoverSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Popover } from "drab";
+ *
+ * let button: HTMLButtonElement;
+ * let hoverButton: HTMLButtonElement;
+ *
+ * let display = false;
  * </script>
  *
- * <Popover classButton="btn" classPopover="p-2 transition">
- * <span slot="button">Hover</span>
- * <div class="card flex w-48 flex-col gap-2">
- * 	<div class="font-bold">Bottom</div>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * 	<button class="btn">Button</button>
- * </div>
- * </Popover>
- * <Popover
- * classButton="btn"
- * classPopover="p-2 transition"
- * eventType="click"
- * position="right"
+ * <button
+ * class="btn"
+ * type="button"
+ * bind:this={button}
+ * on:click={() => (display = !display)}
  * >
- * <span slot="button">Click</span>
- * <div class="card flex w-48 flex-col gap-2">
- * 	<div class="font-bold">Right</div>
+ * {display ? "Close" : "Open"}
+ * </button>
+ *
+ * <Popover target={button} 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">Button</button>
  * 	<button class="btn">Button</button>
  * 	<button class="btn">Button</button>

package/dist/components/ShareButton.svelte

@@ -40,6 +40,7 @@ Uses the navigator api to share or copy a url link depending on browser support.
 -->
 
 <script>import { onMount } from "svelte";
+import { delay } from "../util/delay";
 let className = "";
 export { className as class };
 export let id = "";
@@ -56,7 +57,7 @@ const onClick = async () => {
     } else {
       await navigator.clipboard.writeText(url);
       complete = true;
-      setTimeout(() => complete = false, 800);
+      setTimeout(() => complete = false, delay);
     }
   } catch (error) {
     console.log(error);
@@ -65,7 +66,14 @@ const onClick = async () => {
 onMount(() => clientJs = true);
 </script>
 
-<button disabled={!clientJs} on:click={onClick} class={className} {id} {title}>
+<button
+	type="button"
+	disabled={!clientJs}
+	on:click={onClick}
+	class={className}
+	{id}
+	{title}
+>
 	{#if complete}
 		<slot name="complete">Copied</slot>
 	{:else}

package/dist/components/Sheet.svelte

@@ -1,60 +1,71 @@
-<!--
-@component
-
-### Sheet
-
-Creates a sheet element based on the `position` provided.
-
-@props
+<!--
+@component
+
+### Sheet
+
+Creates a sheet element based on the `position` provided.
+
+@props
 
 - `classSheet` - sheet class - not the backdrop
 - `class` 
 - `display` - controls whether the sheet is displayed
 - `id` 
+- `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
 - `position` - determines the position of sheet
-- `size` - size of sheet based on position - can also use css instead
+- `size` - width/height of sheet based on the `side` - can also use css instead
 - `transitionSheet` - slides the sheet, set to `false` to remove
 - `transition` - fades the entire component, set to `false` to remove
 
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | content                         | `Content`     |
-
-@example
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | content                         | `Content`     |
+
+@example
 
 ```svelte
-<script lang="ts">
-	import { Sheet } from "drab";
-
-	let display = false;
-</script>
-
-<div>
-	<button class="btn" on:click={() => (display = true)}>Open</button>
-</div>
-
-<Sheet
-	bind:display
-	class="bg-gray-50/80 backdrop-blur"
-	classSheet="p-4 shadow bg-white"
->
-	<div class="mb-4 flex items-center justify-between">
-		<div class="text-lg font-bold">Sheet</div>
-		<button class="btn" on:click={() => (display = false)}>Close</button>
-	</div>
-	<div>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-		cillum dolore eu fugiat nulla pariatur.
-	</div>
-</Sheet>
+<script lang="ts">
+	import { Sheet } from "drab";
+	import { X } from "../../site/svg/X.svelte";
+
+	let display = false;
+</script>
+
+<div>
+	<button type="button" class="btn" on:click={() => (display = true)}>
+		Open
+	</button>
+</div>
+
+<Sheet
+	bind:display
+	class="bg-neutral-50/80 backdrop-blur"
+	classSheet="p-4 shadow bg-white"
+>
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="my-0">Sheet</h2>
+		<button
+			type="button"
+			title="Close"
+			class="btn btn-s"
+			on:click={() => (display = false)}
+		>
+			<X />
+		</button>
+	</div>
+	<div>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur.
+	</div>
+</Sheet>
 ```
--->
-
+-->
+
 <script>import { onMount } from "svelte";
 import {
   fade,
@@ -66,14 +77,15 @@ let className = "";
 export { className as class };
 export let id = "";
 export let classSheet = "";
-export let display = true;
+export let display = false;
 export let transition = { duration };
 export let position = "right";
 export let size = 488;
 export let transitionSheet = { duration };
+export let onClickClose = false;
 let sheet;
 const clickOutside = (e) => {
-  if (e.target instanceof Node && !sheet.contains(e.target)) {
+  if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
     display = false;
   }
 };
@@ -101,66 +113,67 @@ onMount(() => {
       transitionSheet.duration = 0;
   }
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if display}
-	<div
-		role="button"
-		tabindex="0"
-		on:click={clickOutside}
-		on:keydown={onKeyDown}
-		transition:fade={transition ? transition : { duration: 0 }}
-		class="d-backdrop {className}"
-		{id}
-	>
-		<div
-			bind:this={sheet}
-			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
-			style={position === "top" || position === "bottom"
-				? `max-height: ${size}px;`
-				: `max-width: ${size}px`}
-			class="d-sheet {classSheet}"
-			class:d-bottom={position === "bottom"}
-			class:d-top={position === "top"}
-			class:d-left={position === "left"}
-			class:d-right={position === "right"}
-		>
-			<slot>Content</slot>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.d-backdrop {
-		position: fixed;
-		display: grid;
-		z-index: 10;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		overflow: hidden;
-		cursor: default;
-	}
-	.d-sheet {
-		margin: auto;
-	}
-	.d-bottom {
-		margin-bottom: 0;
-		width: 100%;
-	}
-	.d-top {
-		margin-top: 0;
-		width: 100%;
-	}
-	.d-right {
-		margin-right: 0;
-		height: 100%;
-	}
-	.d-left {
-		margin-left: 0;
-		height: 100%;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		role="button"
+		tabindex="0"
+		on:click={clickOutside}
+		on:keydown={onKeyDown}
+		transition:fade={transition ? transition : { duration: 0 }}
+		class="d-backdrop {className}"
+		{id}
+	>
+		<div
+			role="dialog"
+			bind:this={sheet}
+			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
+			style={position === "top" || position === "bottom"
+				? `max-height: ${size}px;`
+				: `max-width: ${size}px`}
+			class="d-sheet {classSheet}"
+			class:d-bottom={position === "bottom"}
+			class:d-top={position === "top"}
+			class:d-left={position === "left"}
+			class:d-right={position === "right"}
+		>
+			<slot>Content</slot>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.d-backdrop {
+		position: fixed;
+		display: grid;
+		z-index: 40;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+		cursor: default;
+	}
+	.d-sheet {
+		margin: auto;
+	}
+	.d-bottom {
+		margin-bottom: 0;
+		width: 100%;
+	}
+	.d-top {
+		margin-top: 0;
+		width: 100%;
+	}
+	.d-right {
+		margin-right: 0;
+		height: 100%;
+	}
+	.d-left {
+		margin-left: 0;
+		height: 100%;
+	}
+</style>

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

@@ -8,8 +8,9 @@ declare const __propDef: {
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
         /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
-        /** size of sheet based on position - can also use css instead */ size?: number | undefined;
+        /** width/height of sheet based on the `side` - can also use css instead */ size?: number | undefined;
         /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
+        /** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,8 +33,9 @@ export type SheetSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - controls whether the sheet is displayed
  * - `id`
+ * - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
  * - `position` - determines the position of sheet
- * - `size` - size of sheet based on position - can also use css instead
+ * - `size` - width/height of sheet based on the `side` - can also use css instead
  * - `transitionSheet` - slides the sheet, set to `false` to remove
  * - `transition` - fades the entire component, set to `false` to remove
  *
@@ -48,22 +50,32 @@ export type SheetSlots = typeof __propDef.slots;
  * ```svelte
  * <script lang="ts">
  * import { Sheet } from "drab";
+ * import { X } from "../../site/svg/X.svelte";
  *
  * let display = false;
  * </script>
  *
  * <div>
- * <button class="btn" on:click={() => (display = true)}>Open</button>
+ * <button type="button" class="btn" on:click={() => (display = true)}>
+ * 	Open
+ * </button>
  * </div>
  *
  * <Sheet
  * bind:display
- * class="bg-gray-50/80 backdrop-blur"
+ * class="bg-neutral-50/80 backdrop-blur"
  * classSheet="p-4 shadow bg-white"
  * >
  * <div class="mb-4 flex items-center justify-between">
- * 	<div class="text-lg font-bold">Sheet</div>
- * 	<button class="btn" on:click={() => (display = false)}>Close</button>
+ * 	<h2 class="my-0">Sheet</h2>
+ * 	<button
+ * 		type="button"
+ * 		title="Close"
+ * 		class="btn btn-s"
+ * 		on:click={() => (display = false)}
+ * 	>
+ * 		<X />
+ * 	</button>
  * </div>
  * <div>
  * 	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod