drab 3.0.2 → 3.0.4

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

@@ -47,11 +47,11 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  * let target: HTMLDivElement;
  * </script>
  *
- * <FullscreenButton class="btn" />
+ * <FullscreenButton class="button button-primary" />
  *
- * <div bind:this={target} class="mt-8 rounded bg-neutral-800 p-4 text-neutral-50">
+ * <div bind:this={target} class="mt-8 rounded border bg-muted p-4">
  * <div class="mb-2">Target element</div>
- * <FullscreenButton {target} class="btn btn-s bg-neutral-50">
+ * <FullscreenButton {target} class="button button-primary">
  * 	Enable Element Fullscreen
  * </FullscreenButton>
  * </div>

package/dist/components/Popover.svelte

@@ -1,57 +1,62 @@
-<!--
-@component
-
-### Popover
-
-Displays a popover in relation to the `target`. 
-
-- Does not require the target to be `position: relative;`
-- Adjusts position in case the popover renders outside of the viewport
-
-@props
-
-- `class` 
-- `display` - shows / hides the popover
-- `id` 
-- `position` - where the popover is displayed in relation to the `target`
-- `target` - target element to position the popover in relation to
-- `transition` - scales the popover, set to `false` to disable
-
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | default                         | Popover       |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Popover } from "drab";
-
-	let target: HTMLButtonElement;
-
-	let display = false;
-
-	const open = () => (display = true);
-	const close = () => (display = false);
-</script>
-
-<button class="btn" type="button" bind:this={target} on:click={open}>
-	Open
-</button>
-
-<Popover {target} 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" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-		<button class="btn" on:click={close}>Close</button>
-	</div>
-</Popover>
-```
--->
-
+<!--
+@component
+
+### Popover
+
+Displays a popover in relation to the `target`. 
+
+- Does not require the target to be `position: relative;`
+- Adjusts position in case the popover renders outside of the viewport
+
+@props
+
+- `class` 
+- `display` - shows / hides the popover
+- `id` 
+- `position` - where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned
+- `target` - target element to position the popover in relation to
+- `transition` - scales the popover, set to `false` to disable
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | Popover       |
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Popover } from "drab";
+
+	let target: HTMLButtonElement;
+
+	let display = false;
+
+	const open = () => (display = true);
+	const close = () => (display = false);
+</script>
+
+<button
+	class="button button-primary"
+	type="button"
+	bind:this={target}
+	on:click={open}
+>
+	Open
+</button>
+
+<Popover {target} bind:display class="p-2">
+	<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
+		<div class="font-bold">Bottom</div>
+		<button class="button button-secondary" on:click={close}>Close</button>
+		<button class="button button-secondary" on:click={close}>Close</button>
+		<button class="button button-secondary" on:click={close}>Close</button>
+	</div>
+</Popover>
+```
+-->
+
 <script>import { prefersReducedMotion } from "../util/accessibility";
 import { duration, start } from "../util/transition";
 import { onMount, tick } from "svelte";
@@ -66,33 +71,46 @@ export let transition = { duration, start };
 let popover;
 let coordinates = { x: 0, y: 0 };
 const setPosition = async () => {
-  if (position === "t" || position === "b") {
-    coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
-    if (position === "t") {
+  if (position.startsWith("t") || position.startsWith("b")) {
+    if (position.startsWith("t")) {
       coordinates.y = -popover.offsetHeight;
     } else {
       coordinates.y = target.offsetHeight;
     }
+    if (position.endsWith("l")) {
+      coordinates.x = 0;
+    } else if (position.endsWith("r")) {
+      coordinates.x = target.offsetWidth - popover.offsetWidth;
+    } else {
+      coordinates.x = target.offsetWidth / 2 - popover.offsetWidth / 2;
+    }
   } else {
-    coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
-    if (position === "l") {
+    if (position.startsWith("l")) {
       coordinates.x = -popover.offsetWidth;
     } else {
       coordinates.x = target.offsetWidth;
     }
+    if (position.endsWith("t")) {
+      coordinates.y = 0;
+    } else if (position.endsWith("b")) {
+      coordinates.y = target.offsetHeight - popover.offsetHeight;
+    } else {
+      coordinates.y = target.offsetHeight / 2 - popover.offsetHeight / 2;
+    }
   }
   const targetRect = target.getBoundingClientRect();
   coordinates.x += targetRect.x + window.scrollX;
   coordinates.y += targetRect.y + window.scrollY;
   await tick();
   const popoverRect = popover.getBoundingClientRect();
-  if (popoverRect.x < 0) {
-    coordinates.x += Math.abs(popoverRect.x);
+  const extraMargin = 10;
+  if (popoverRect.x < extraMargin) {
+    coordinates.x += Math.abs(popoverRect.x) + extraMargin;
   } else if (popoverRect.x + popover.offsetWidth > window.innerWidth) {
-    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + 16;
+    coordinates.x -= popoverRect.x + popover.offsetWidth - window.innerWidth + extraMargin;
   }
   if (popoverRect.y < 0) {
-    coordinates.y += Math.abs(popoverRect.y);
+    coordinates.y += Math.abs(popoverRect.y) + extraMargin;
   } else if (popoverRect.y + popover.offsetHeight > window.innerHeight) {
     coordinates.y -= popoverRect.y + popover.offsetHeight - window.innerHeight;
   }
@@ -109,26 +127,27 @@ onMount(() => {
   if (prefersReducedMotion())
     transition = false;
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if display}
-	<div
-		role="dialog"
-		bind:this={popover}
-		class={className}
-		{id}
-		style:top="{coordinates.y}px"
-		style:left="{coordinates.x}px"
-		transition:scale={transition ? transition : { duration: 0 }}
-	>
-		<slot>Popover</slot>
-	</div>
-{/if}
-
-<style>
-	div {
-		position: absolute;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		role="dialog"
+		bind:this={popover}
+		class={className}
+		{id}
+		style:top="{coordinates.y}px"
+		style:left="{coordinates.x}px"
+		transition:scale={transition ? transition : { duration: 0 }}
+	>
+		<slot>Popover</slot>
+	</div>
+{/if}
+
+<style>
+	div {
+		position: absolute;
+		margin: 0;
+	}
+</style>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         id?: string | undefined;
         /** shows / hides the popover */ display?: boolean | undefined;
-        /** where the popover is displayed in relation to the `target` */ position?: "t" | "b" | "l" | "r" | undefined;
+        /** where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned */ position?: ("tr" | "tl" | "t" | "rt" | "r" | "rb" | "br" | "b" | "bl" | "lb" | "l" | "lt") | undefined;
         /** target element to position the popover in relation to */ target: HTMLElement;
         /** scales the popover, set to `false` to disable */ transition?: false | ScaleParams | undefined;
     };
@@ -32,7 +32,7 @@ export type PopoverSlots = typeof __propDef.slots;
  * - `class`
  * - `display` - shows / hides the popover
  * - `id`
- * - `position` - where the popover is displayed in relation to the `target`
+ * - `position` - where the popover is displayed in relation to the `target`, ex: `br` is bottom, right aligned
  * - `target` - target element to position the popover in relation to
  * - `transition` - scales the popover, set to `false` to disable
  *
@@ -56,16 +56,21 @@ export type PopoverSlots = typeof __propDef.slots;
  * const close = () => (display = false);
  * </script>
  *
- * <button class="btn" type="button" bind:this={target} on:click={open}>
+ * <button
+ * class="button button-primary"
+ * type="button"
+ * bind:this={target}
+ * on:click={open}
+ * >
  * Open
  * </button>
  *
  * <Popover {target} bind:display class="p-2">
- * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+ * <div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
  * 	<div class="font-bold">Bottom</div>
- * 	<button class="btn" on:click={close}>Close</button>
- * 	<button class="btn" on:click={close}>Close</button>
- * 	<button class="btn" on:click={close}>Close</button>
+ * 	<button class="button button-secondary" on:click={close}>Close</button>
+ * 	<button class="button button-secondary" on:click={close}>Close</button>
+ * 	<button class="button button-secondary" on:click={close}>Close</button>
  * </div>
  * </Popover>
  * ```

package/dist/components/ShareButton.svelte

@@ -1,18 +1,18 @@
-<!--
-@component
-
-### ShareButton
-
-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
+<!--
+@component
+
+### ShareButton
+
+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` 
@@ -20,57 +20,57 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 - `shareData` - [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
 - `title` 
 
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | default                         | `Share`       |
-| `complete` | displays after copy is complete | `Copied`      |
-
-@example
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | `Share`       |
+| `complete` | displays after copy is complete | `Copied`      |
+
+@example
 
 ```svelte
-<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>
-	<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 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="button button-primary 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="button button-primary" bind:shareData={fileShareData}>
+		Share File
+	</ShareButton>
+</div>
 ```
--->
-
+-->
+
 <script>import { onMount } from "svelte";
 import { delay } from "../util/delay";
 let className = "";
@@ -107,25 +107,25 @@ const onClick = async () => {
   }
 };
 onMount(() => clientJs = true);
-</script>
-
-<button
-	type="button"
-	disabled={!clientJs || (!shareData.url && !shareData.files)}
-	on:click={onClick}
-	class={className}
-	{id}
-	{title}
->
-	{#if complete}
-		<slot name="complete">Copied</slot>
-	{:else}
-		<slot>Share</slot>
-	{/if}
-</button>
-
-<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
-
-{#if shareData.url}
-	<noscript><span class={classNoscript}>{shareData.url}</span></noscript>
-{/if}
+</script>
+
+<button
+	type="button"
+	disabled={!clientJs || (!shareData.url && !shareData.files)}
+	on:click={onClick}
+	class={className}
+	{id}
+	{title}
+>
+	{#if complete}
+		<slot name="complete">Copied</slot>
+	{:else}
+		<slot>Share</slot>
+	{/if}
+</button>
+
+<a href="/" bind:this={downloadAnchor} style:display="none">Download</a>
+
+{#if shareData.url}
+	<noscript><span class={classNoscript}>{shareData.url}</span></noscript>
+{/if}

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

@@ -63,7 +63,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
  * </script>
  *
  * <ShareButton
- * class="btn mb-8"
+ * class="button button-primary mb-8"
  * shareData={{
  * 	text: "Check out this page: ",
  * 	title: "drab",
@@ -82,7 +82,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
  * 	bind:this={fileInput}
  * 	on:input={onInput}
  * />
- * <ShareButton class="btn" bind:shareData={fileShareData}>
+ * <ShareButton class="button button-primary" bind:shareData={fileShareData}>
  * 	Share File
  * </ShareButton>
  * </div>