drab 2.6.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

@@ -13,7 +13,7 @@ Creates a sheet element based on the `position` provided.
 - `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
 
@@ -28,22 +28,32 @@ Creates a sheet element based on the `position` provided.
 ```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
@@ -118,6 +128,7 @@ onMount(() => {
 		{id}
 	>
 		<div
+			role="dialog"
 			bind:this={sheet}
 			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
 			style={position === "top" || position === "bottom"
@@ -138,7 +149,7 @@ onMount(() => {
 	.d-backdrop {
 		position: fixed;
 		display: grid;
-		z-index: 10;
+		z-index: 40;
 		top: 0;
 		bottom: 0;
 		left: 0;

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

@@ -8,7 +8,7 @@ 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;
     };
@@ -35,7 +35,7 @@ export type SheetSlots = typeof __propDef.slots;
  * - `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
  *
@@ -50,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

package/dist/components/Tabs.svelte

@@ -7,23 +7,23 @@ Displays tabs and the active tab's content.
 
 @props
 
-- `activeIndex` - index of active tab, defaults to 0
-- `classContent` - class of `div` that wraps the slotted content
-- `classHeader` - class of the `div` that wraps the `button`s
 - `classNoscript` - `noscript` class
-- `classTitleActive` - class of the active tab's `button`
-- `classTitleInactive` - class of all the inactive tabs' `button`s
-- `classTitle` - class of all title `button`s
+- `classTabActive` - class of the active tab's `button`
+- `classTabInactive` - class of all the inactive tabs' `button`s
+- `classTabList` - class of the `div` that wraps the `button`s
+- `classTabPanel` - class of `div` that wraps the slotted content
+- `classTab` - class of all title `button`s
 - `class` 
 - `id` 
+- `selectedIndex` - index of selected tab, defaults to 0
 - `tabs` - array of tabs
 
 @slots
 
-| name      | purpose               | default value        | slot props      |
-| --------- | --------------------- | -------------------- | --------------- |
-| `default` | active item's content | `activeItem.content` | `activeItem`    |
-| `title`   | title of each tab     | `item.title`         | `item`, `index` |
+| name      | purpose               | default value      | slot props      |
+| --------- | --------------------- | ------------------ | --------------- |
+| `default` | active item's content | `activeItem.panel` | `activeItem`    |
+| `tab`     | title of each tab     | `item.tab`         | `item`, `index` |
 
 @example
 
@@ -34,40 +34,41 @@ Displays tabs and the active tab's content.
 </script>
 
 <Tabs
-	classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
-	classTitle="btn rounded-sm p-0.5"
-	classTitleActive="bg-white text-gray-950"
-	classTitleInactive="bg-gray-200 text-gray-500"
-	classContent="py-2"
+	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"
+	classTabPanel="py-2"
 	tabs={[
-		{ title: "Tab 1", content: "Content 1" },
-		{ title: "Tab 2", content: "Content 2" },
+		{ tab: "Tab", panel: "Content" },
+		{ tab: "Another Tab", panel: "Some more content" },
 	]}
 />
 
 <Tabs
-	classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
-	classTitle="btn rounded-sm p-0.5"
-	classTitleActive="bg-white text-gray-950"
-	classTitleInactive="bg-gray-200 text-gray-500"
-	classContent="py-2"
+	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"
+	classTabPanel="py-2"
 	tabs={[
-		{ title: "Tab", content: "Generated indexes" },
+		{ tab: "Tab", panel: "Generated indexes" },
 		{
-			title: "Tab",
-			content: "A tab with a component",
+			tab: "Tab",
+			panel: "A tab with a component",
 			data: { component: FullscreenButton },
 		},
 	]}
-	let:activeTab
+	let:selectedTab
 >
-	<svelte:fragment slot="title" let:item let:index>
-		{item.title}
+	<svelte:fragment slot="tab" let:item let:index>
+		{item.tab}
 		{index + 1}
 	</svelte:fragment>
-	<div>{activeTab.content}</div>
-	{#if activeTab.data?.component}
-		<svelte:component this={activeTab.data.component} class="btn" />
+	<div class="mb-2">{selectedTab.panel}</div>
+	{#if selectedTab.data?.component}
+		<svelte:component this={selectedTab.data.component} class="btn" />
 	{/if}
 </Tabs>
 ```
@@ -80,36 +81,40 @@ import { messageNoScript } from "../util/messages";
 let className = "";
 export { className as class };
 export let id = "";
-export let classHeader = "";
-export let classTitle = "";
-export let classTitleActive = "";
-export let classTitleInactive = "";
+export let classTabList = "";
+export let classTab = "";
+export let classTabActive = "";
+export let classTabInactive = "";
 export let classNoscript = "";
-export let classContent = "";
+export let classTabPanel = "";
 export let tabs;
-export let activeIndex = 0;
+export let selectedIndex = 0;
 let clientJs = false;
 $:
-  activeTab = tabs[activeIndex];
+  selectedTab = tabs[selectedIndex];
 onMount(() => clientJs = true);
 </script>
 
 <div class={className} {id}>
-	<div class={classHeader}>
+	<div class={classTabList} role="tablist">
 		{#each tabs as item, index}
 			<button
+				role="tab"
+				tabindex={index === selectedIndex ? 0 : -1}
+				aria-selected={index === selectedIndex}
+				aria-controls="tabpanel"
 				disabled={!clientJs}
-				class="{classTitle} {activeIndex === index
-					? classTitleActive
-					: ''} {activeIndex !== index ? classTitleInactive : ''}"
-				on:click={() => (activeIndex = index)}
+				class="{classTab} {selectedIndex === index
+					? classTabActive
+					: ''} {selectedIndex !== index ? classTabInactive : ''}"
+				on:click={() => (selectedIndex = index)}
 			>
-				<slot name="title" {item} {index}>{item.title}</slot>
+				<slot name="tab" {item} {index}>{item.tab}</slot>
 			</button>
 		{/each}
 	</div>
-	<div class={classContent}>
-		<slot {activeTab}>{activeTab.content}</slot>
+	<div class={classTabPanel} role="tabpanel" id="tabpanel">
+		<slot {selectedTab}>{selectedTab.panel}</slot>
 	</div>
 	<noscript>
 		<div class={classNoscript}>{messageNoScript}</div>