drab 2.4.1 → 2.6.0

package/dist/components/Accordion.svelte

@@ -17,7 +17,7 @@ Displays a list of `details` elements.
 - `icon` 
 - `id` 
 - `items` - array of `AccordionItem` elements
-- `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+- `transition` - rotates the icon, slides the content, set to `false` to remove
 
 @slots
 
@@ -31,9 +31,8 @@ Displays a list of `details` elements.
 
 ```svelte
 <script>
-    import Accordion from "./Accordion.svelte";
-    import FullscreenButton from "./FullscreenButton.svelte";
-	import Chevron from "../../site/svg/Chevron.svelte";
+	import { Accordion } from "drab";
+	import { Chevron } from "../../site/svg/Chevron.svelte";
 </script>
 
 <Accordion
@@ -52,11 +51,6 @@ Displays a list of `details` elements.
 			content: "Yes, with the transition prop.",
 		},
 		{ summary: "Does it work without Javascript?", content: "Yes." },
-		{
-			summary: "Component",
-			content: "Rendered only on this item.",
-			data: { component: FullscreenButton },
-		},
 	]}
 >
 	<svelte:fragment slot="content" let:item let:index>
@@ -64,9 +58,6 @@ Displays a list of `details` elements.
 			<span>{index + 1}.</span>
 			<span>{item.content}</span>
 		</div>
-		{#if item.data?.component}
-			<svelte:component class="btn" this={item.data.component} />
-		{/if}
 	</svelte:fragment>
 </Accordion>
 ```
@@ -77,6 +68,7 @@ Displays a list of `details` elements.
 <script>import { onMount } from "svelte";
 import { slide } from "svelte/transition";
 import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
 let className = "";
 export { className as class };
 export let id = "";
@@ -87,7 +79,8 @@ export let classHeader = "";
 export let classSummary = "";
 export let classContent = "";
 export let classIcon = "";
-export let transition = {};
+export let transition = { duration };
+const cssDuration = transition ? transition.duration : 0;
 export let autoClose = true;
 let clientJs = false;
 const toggleOpen = (i) => {
@@ -133,6 +126,7 @@ onMount(() => {
 								class={classIcon}
 								class:d-rotate-180={item.open}
 								class:d-transition={transition}
+								style="--duration: {cssDuration}ms;"
 							>
 								{#if typeof icon !== "string"}
 									<svelte:component this={icon} />
@@ -171,6 +165,6 @@ onMount(() => {
 	.d-transition {
 		transition-property: transform;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: 150ms;
+		transition-duration: var(--duration);
 	}
 </style>

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

@@ -22,7 +22,7 @@ declare const __propDef: {
         /** class of all the `div`s that wrap the `summary` slot */ classSummary?: string | undefined;
         /** class of all the `div`s that wrap the `content` slot */ classContent?: string | undefined;
         /** class of the `div` that wrap the icon if displayed */ classIcon?: string | undefined;
-        /** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
+        /** rotates the icon, slides the content, set to `false` to remove */ transition?: false | SlideParams | undefined;
         /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
     };
     events: {
@@ -63,7 +63,7 @@ export type AccordionSlots = typeof __propDef.slots;
  * - `icon`
  * - `id`
  * - `items` - array of `AccordionItem` elements
- * - `transition` - rotates the icon, slides the content, defaults to empty object, set to false to remove
+ * - `transition` - rotates the icon, slides the content, set to `false` to remove
  *
  * @slots
  *
@@ -77,9 +77,8 @@ export type AccordionSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import Accordion from "./Accordion.svelte";
- *    import FullscreenButton from "./FullscreenButton.svelte";
- * import Chevron from "../../site/svg/Chevron.svelte";
+ * import { Accordion } from "drab";
+ * import { Chevron } from "../../site/svg/Chevron.svelte";
  * </script>
  *
  * <Accordion
@@ -98,11 +97,6 @@ export type AccordionSlots = typeof __propDef.slots;
  * 		content: "Yes, with the transition prop.",
  * 	},
  * 	{ summary: "Does it work without Javascript?", content: "Yes." },
- * 	{
- * 		summary: "Component",
- * 		content: "Rendered only on this item.",
- * 		data: { component: FullscreenButton },
- * 	},
  * ]}
  * >
  * <svelte:fragment slot="content" let:item let:index>
@@ -110,9 +104,6 @@ export type AccordionSlots = typeof __propDef.slots;
  * 		<span>{index + 1}.</span>
  * 		<span>{item.content}</span>
  * 	</div>
- * 	{#if item.data?.component}
- * 		<svelte:component class="btn" this={item.data.component} />
- * 	{/if}
  * </svelte:fragment>
  * </Accordion>
  * ```

package/dist/components/Breakpoint.svelte

@@ -0,0 +1,59 @@
+<!--
+@component
+
+### Breakpoints
+
+Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
+
+@props
+
+- `breakpoints` - array of objects representing the breakpoints of the application
+- `class` 
+- `id` 
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Breakpoint } from "drab";
+</script>
+
+<div>
+	<Breakpoint
+		class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+	/>
+</div>
+```
+-->
+
+<script>import { messageNoScript } from "../util/messages";
+let className = "";
+export { className as class };
+export let id = "";
+export let breakpoints = [
+  { name: "sm", width: 640 },
+  { name: "md", width: 768 },
+  { name: "lg", width: 1024 },
+  { name: "xl", width: 1280 },
+  { name: "2xl", width: 1536 }
+];
+breakpoints.sort((a, b) => b.width - a.width);
+let innerWidth = 0;
+$:
+  breakpoint = getBreakpoint(innerWidth);
+const getBreakpoint = (innerWidth2) => {
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (innerWidth2 > breakpoints[i].width) {
+      return breakpoints[i].name;
+    }
+  }
+  return "none";
+};
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class={className} {id}>
+	{breakpoint}:{innerWidth}
+	<noscript>{messageNoScript}</noscript>
+</div>

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

@@ -0,0 +1,46 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** array of objects representing the breakpoints of the application */ breakpoints?: {
+            name: string;
+            width: number;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreakpointProps = typeof __propDef.props;
+export type BreakpointEvents = typeof __propDef.events;
+export type BreakpointSlots = typeof __propDef.slots;
+/**
+ * ### Breakpoints
+ *
+ * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints).
+ *
+ * @props
+ *
+ * - `breakpoints` - array of objects representing the breakpoints of the application
+ * - `class`
+ * - `id`
+ *
+ * @example
+ *
+ * ```svelte
+ * <script lang="ts">
+ * import { Breakpoint } from "drab";
+ * </script>
+ *
+ * <div>
+ * <Breakpoint
+ * 	class="inline-block rounded border px-2 py-1 font-mono tabular-nums shadow"
+ * />
+ * </div>
+ * ```
+ */
+export default class Breakpoint extends SvelteComponent<BreakpointProps, BreakpointEvents, BreakpointSlots> {
+}
+export {};

package/dist/components/Chord.svelte

@@ -23,7 +23,7 @@ Generates a guitar chord `svg`.
 
 <Chord
 	class="text-gray-950"
-	name="D" 
+	name="D"
 	notes={[
 		{
 			finger: 0,

package/dist/components/ContextMenu.svelte

@@ -22,7 +22,7 @@ Displays when the parent element is right clicked.
 
 ```svelte
 <script>
-    import { ContextMenu } from "drab";
+	import { ContextMenu } from "drab";
 </script>
 
 <div class="flex justify-center rounded border border-dashed p-12">
@@ -81,7 +81,7 @@ onMount(() => {
 });
 </script>
 
-<svelte:document on:click={hide} on:keydown={onKeyDown} />
+<svelte:body on:click={hide} on:keydown={onKeyDown} />
 
 <div
 	class={className}

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

@@ -38,7 +38,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ContextMenu } from "drab";
+ * import { ContextMenu } from "drab";
  * </script>
  *
  * <div class="flex justify-center rounded border border-dashed p-12">

package/dist/components/CopyButton.svelte

@@ -24,7 +24,7 @@ Uses the navigator api to copy text to the clipboard.
 
 ```svelte
 <script>
-    import { CopyButton } from "drab";
+	import { CopyButton } from "drab";
 </script>
 
 <div>

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

@@ -42,7 +42,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { CopyButton } from "drab";
+ * import { CopyButton } from "drab";
  * </script>
  *
  * <div>

package/dist/components/Popover.svelte

@@ -28,7 +28,7 @@ Displays a popover relatively positioned to the button.
 
 ```svelte
 <script>
-    import { Popover } from "drab";
+	import { Popover } from "drab";
 </script>
 
 <Popover classButton="btn" classPopover="p-2 transition">
@@ -123,7 +123,7 @@ onMount(() => {
 });
 </script>
 
-<svelte:document on:keydown={onKeyDown} on:click={clickOutside} />
+<svelte:body on:keydown={onKeyDown} on:click={clickOutside} />
 
 <div class="db-relative {className}" {id}>
 	<button

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

@@ -50,7 +50,7 @@ export type PopoverSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { Popover } from "drab";
+ * import { Popover } from "drab";
  * </script>
  *
  * <Popover classButton="btn" classPopover="p-2 transition">

package/dist/components/ShareButton.svelte

@@ -25,7 +25,7 @@ Uses the navigator api to share or copy a url link depending on browser support.
 
 ```svelte
 <script>
-    import { ShareButton } from "drab";
+	import { ShareButton } from "drab";
 </script>
 
 <div>

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

@@ -44,7 +44,7 @@ export type ShareButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { ShareButton } from "drab";
+ * import { ShareButton } from "drab";
  * </script>
  *
  * <div>

package/dist/components/Sheet.svelte

@@ -0,0 +1,168 @@
+<!--
+@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
+- `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
+
+```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>import { onMount } from "svelte";
+import {
+  fade,
+  fly
+} from "svelte/transition";
+import { prefersReducedMotion } from "../util/accessibility";
+import { duration } from "../util/transition";
+let className = "";
+export { className as class };
+export let id = "";
+export let classSheet = "";
+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) || onClickClose) {
+    display = false;
+  }
+};
+const onKeyDown = (e) => {
+  if (e.key === "Escape") {
+    display = false;
+  }
+};
+if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
+  if (position === "bottom") {
+    transitionSheet.y = size;
+  } else if (position === "top") {
+    transitionSheet.y = -size;
+  } else if (position === "right") {
+    transitionSheet.x = size;
+  } else {
+    transitionSheet.x = -size;
+  }
+}
+onMount(() => {
+  if (prefersReducedMotion()) {
+    if (transition)
+      transition.duration = 0;
+    if (transitionSheet)
+      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>

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

@@ -0,0 +1,82 @@
+import { SvelteComponent } from "svelte";
+import { type FadeParams, 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;
+        /** 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;
+        /** 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>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SheetProps = typeof __propDef.props;
+export type SheetEvents = typeof __propDef.events;
+export type SheetSlots = typeof __propDef.slots;
+/**
+ * ### 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
+ * - `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
+ *
+ * ```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>
+ * ```
+ */
+export default class Sheet extends SvelteComponent<SheetProps, SheetEvents, SheetSlots> {
+}
+export {};

package/dist/components/Tabs.svelte

@@ -29,8 +29,8 @@ Displays tabs and the active tab's content.
 
 ```svelte
 <script>
-    import { Tabs } from "drab";
-	import FullscreenButton from "./FullscreenButton.svelte";
+	import { Tabs } from "drab";
+	import { FullscreenButton } from "drab";
 </script>
 
 <Tabs
@@ -67,7 +67,7 @@ Displays tabs and the active tab's content.
 	</svelte:fragment>
 	<div>{activeTab.content}</div>
 	{#if activeTab.data?.component}
-		<svelte:component class="btn" this={activeTab.data.component} />
+		<svelte:component this={activeTab.data.component} class="btn" />
 	{/if}
 </Tabs>
 ```

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

@@ -65,8 +65,8 @@ export type TabsSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <script>
- *    import { Tabs } from "drab";
- * import FullscreenButton from "./FullscreenButton.svelte";
+ * import { Tabs } from "drab";
+ * import { FullscreenButton } from "drab";
  * </script>
  *
  * <Tabs
@@ -103,7 +103,7 @@ export type TabsSlots = typeof __propDef.slots;
  * </svelte:fragment>
  * <div>{activeTab.content}</div>
  * {#if activeTab.data?.component}
- * 	<svelte:component class="btn" this={activeTab.data.component} />
+ * 	<svelte:component this={activeTab.data.component} class="btn" />
  * {/if}
  * </Tabs>
  * ```

package/dist/index.d.ts

@@ -11,7 +11,8 @@ import type { EditorContentElement } from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
+import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import type { TabsTab } from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Tabs, type TabsTab, YouTube, };
+export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };

package/dist/index.js

@@ -7,6 +7,7 @@ import Editor from "./components/Editor.svelte";
 import FullscreenButton from "./components/FullscreenButton.svelte";
 import Popover from "./components/Popover.svelte";
 import ShareButton from "./components/ShareButton.svelte";
+import Sheet from "./components/Sheet.svelte";
 import Tabs from "./components/Tabs.svelte";
 import YouTube from "./components/YouTube.svelte";
-export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Tabs, YouTube, };
+export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };

package/dist/util/transition.d.ts

@@ -0,0 +1 @@
+export declare const duration = 250;

package/dist/util/transition.js

@@ -0,0 +1 @@
+export const duration = 250;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.4.1",
+	"version": "2.6.0",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",
@@ -27,7 +27,7 @@
 	"repository": "github:rossrobino/drab",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "npm run doc && vite build && npm run package",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
@@ -36,7 +36,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
 		"pub": "npm publish --access public",
-		"doc": "node src/scripts/buildDocs.js"
+		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js"
 	},
 	"exports": {
 		".": {