drab 3.0.2 → 3.0.4

package/dist/components/Sheet.svelte

@@ -1,70 +1,78 @@
-<!--
-@component
-
-### Sheet
-
-Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
-
-@props
-
-- `classSheet` - sheet class - not the backdrop
-- `class` 
-- `display` - controls whether the sheet is displayed
-- `id` 
-- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
-- `position` - determines the position of sheet
-- `transitionSheet` - flies the sheet, set to `false` to remove
-- `transition` - blurs the entire component, set to `false` to remove
-
-@slots
-
-| name       | purpose                         | default value |
-| ---------- | ------------------------------- | ------------- |
-| `default`  | content                         | `Content`     |
-
-@events
-
-| name      | event              |
-| --------- | ------------------ |
-| `mount`   | sheet is mounted   | 
-| `destroy` | sheet is destroyed | 
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Sheet } from "drab";
-
-	let display = false;
-</script>
-
-<button type="button" class="btn" on:click={() => (display = true)}>
-	Open
-</button>
-
-<Sheet
-	bind:display
-	class="backdrop-blur"
-	classSheet="p-4 shadow bg-white"
-	position="r"
->
-	<div class="mb-4 flex items-center justify-between">
-		<h2 class="my-0">Sheet</h2>
-		<button type="button" class="btn btn-s" 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>
-```
--->
-
+<!--
+@component
+
+### Sheet
+
+Creates a sheet element based on the `position` provided. `maxSize` is set to width or height of the sheet depending on the `position` provided. The `transition` is calculated based on the `position` and `maxSize` of the sheet.
+
+@props
+
+- `classSheet` - sheet class - not the backdrop
+- `class` 
+- `display` - controls whether the sheet is displayed
+- `id` 
+- `maxSize` - max width/height of sheet based on the `side` - can also use css instead
+- `position` - determines the position of sheet
+- `transitionSheet` - flies the sheet, set to `false` to remove
+- `transition` - blurs the entire component, set to `false` to remove
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | content                         | `Content`     |
+
+@events
+
+| name      | event              |
+| --------- | ------------------ |
+| `mount`   | sheet is mounted   | 
+| `destroy` | sheet is destroyed | 
+
+@example
+
+```svelte
+<script lang="ts">
+	import { Sheet } from "drab";
+
+	let display = false;
+</script>
+
+<button
+	type="button"
+	class="button button-primary"
+	on:click={() => (display = true)}
+>
+	Open
+</button>
+
+<Sheet
+	bind:display
+	class="z-40 backdrop-blur"
+	classSheet="p-4 shadow bg-background"
+	position="r"
+>
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="my-0">Sheet</h2>
+		<button
+			type="button"
+			class="button button-ghost"
+			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 { createEventDispatcher, onMount } from "svelte";
 import {
   blur,
@@ -111,56 +119,56 @@ onMount(() => {
     transitionSheet = false;
   }
 });
-</script>
-
-<svelte:body on:keydown={onKeyDown} />
-
-{#if display}
-	<div
-		transition:blur={transition ? transition : { duration: 0 }}
-		class="d-backdrop {className}"
-		class:d-backdrop-bottom={position === "b"}
-		class:d-backdrop-top={position === "t"}
-		class:d-backdrop-right={position === "r"}
-		{id}
-	>
-		<div
-			bind:this={sheet}
-			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
-			use:lifecycle
-			role="dialog"
-			tabindex="-1"
-			style={position === "t" || position === "b"
-				? `max-height: ${maxSize}px;`
-				: `max-width: ${maxSize}px`}
-			class={classSheet}
-		>
-			<slot>Content</slot>
-		</div>
-		<button title="Close" on:click={close}></button>
-	</div>
-{/if}
-
-<style>
-	button {
-		flex-grow: 1;
-	}
-	.d-backdrop {
-		position: fixed;
-		display: flex;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		overflow: hidden;
-	}
-	.d-backdrop-bottom {
-		flex-direction: column-reverse;
-	}
-	.d-backdrop-top {
-		flex-direction: column;
-	}
-	.d-backdrop-right {
-		flex-direction: row-reverse;
-	}
-</style>
+</script>
+
+<svelte:body on:keydown={onKeyDown} />
+
+{#if display}
+	<div
+		transition:blur={transition ? transition : { duration: 0 }}
+		class="d-backdrop {className}"
+		class:d-backdrop-bottom={position === "b"}
+		class:d-backdrop-top={position === "t"}
+		class:d-backdrop-right={position === "r"}
+		{id}
+	>
+		<div
+			bind:this={sheet}
+			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
+			use:lifecycle
+			role="dialog"
+			tabindex="-1"
+			style={position === "t" || position === "b"
+				? `max-height: ${maxSize}px;`
+				: `max-width: ${maxSize}px`}
+			class={classSheet}
+		>
+			<slot>Content</slot>
+		</div>
+		<button title="Close" on:click={close}></button>
+	</div>
+{/if}
+
+<style>
+	button {
+		flex-grow: 1;
+	}
+	.d-backdrop {
+		display: flex;
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+	}
+	.d-backdrop-bottom {
+		flex-direction: column-reverse;
+	}
+	.d-backdrop-top {
+		flex-direction: column;
+	}
+	.d-backdrop-right {
+		flex-direction: row-reverse;
+	}
+</style>

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         /** sheet class - not the backdrop */ classSheet?: string | undefined;
         /** controls whether the sheet is displayed*/ display?: boolean | undefined;
         /** blurs the entire component, set to `false` to remove */ transition?: false | BlurParams | undefined;
-        /** determines the position of sheet */ position?: "t" | "b" | "l" | "r" | undefined;
+        /** determines the position of sheet */ position?: "t" | "r" | "b" | "l" | undefined;
         /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
         /** flies the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
     };
@@ -62,19 +62,27 @@ export type SheetSlots = typeof __propDef.slots;
  * let display = false;
  * </script>
  *
- * <button type="button" class="btn" on:click={() => (display = true)}>
+ * <button
+ * type="button"
+ * class="button button-primary"
+ * on:click={() => (display = true)}
+ * >
  * Open
  * </button>
  *
  * <Sheet
  * bind:display
- * class="backdrop-blur"
- * classSheet="p-4 shadow bg-white"
+ * class="z-40 backdrop-blur"
+ * classSheet="p-4 shadow bg-background"
  * position="r"
  * >
  * <div class="mb-4 flex items-center justify-between">
  * 	<h2 class="my-0">Sheet</h2>
- * 	<button type="button" class="btn btn-s" on:click={() => (display = false)}>
+ * 	<button
+ * 		type="button"
+ * 		class="button button-ghost"
+ * 		on:click={() => (display = false)}
+ * 	>
  * 		Close
  * 	</button>
  * </div>

package/dist/components/YouTube.svelte

@@ -1,11 +1,11 @@
-<!--
-@component
-
-### YouTube
-
-Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
-
-@props
+<!--
+@component
+
+### YouTube
+
+Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+
+@props
 
 - `autoplay` - auto-plays the video
 - `class` 
@@ -14,21 +14,21 @@ Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.
 - `title` 
 - `uid` - unique YouTube id
 
-@example
+@example
 
 ```svelte
-<script lang="ts">
-	import { YouTube } from "drab";
-</script>
-
-<YouTube
-	class="aspect-video w-full rounded"
-	title="Renegade - Kevin Olusola"
-	uid="gouiY85kD2o"
-/>
+<script lang="ts">
+	import { YouTube } from "drab";
+</script>
+
+<YouTube
+	class="aspect-video w-full rounded"
+	title="Renegade - Kevin Olusola"
+	uid="gouiY85kD2o"
+/>
 ```
--->
-
+-->
+
 <script>let className = "";
 export { className as class };
 export let id = "";
@@ -36,16 +36,16 @@ export let uid;
 export let title = "";
 export let autoplay = false;
 export let start = 0;
-</script>
-
-<iframe
-	class={className}
-	{id}
-	src="https://www.youtube-nocookie.com/embed/{uid}?start={start}{autoplay
-		? '&autoplay=1'
-		: ''}"
-	{title}
-	frameborder="0"
-	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-	allowfullscreen
-/>
+</script>
+
+<iframe
+	class={className}
+	{id}
+	src="https://www.youtube-nocookie.com/embed/{uid}?start={start}{autoplay
+		? '&autoplay=1'
+		: ''}"
+	{title}
+	frameborder="0"
+	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+	allowfullscreen
+/>

package/package.json

@@ -1,81 +1,83 @@
-{
-	"name": "drab",
-	"version": "3.0.2",
-	"description": "An Unstyled Svelte Component Library",
-	"keywords": [
-		"components",
-		"Svelte",
-		"SvelteKit",
-		"Breakpoint",
-		"ContextMenu",
-		"Copy",
-		"DataTable",
-		"Details",
-		"Editor",
-		"FrettedChord",
-		"Fullscreen",
-		"Popover",
-		"Share",
-		"Sheet",
-		"YouTube"
-	],
-	"homepage": "https://drab.robino.dev",
-	"license": "MIT",
-	"author": {
-		"name": "Ross Robino",
-		"url": "https://robino.dev"
-	},
-	"repository": "github:rossrobino/drab",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
-		"pub": "npm publish --access public",
-		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"dependencies": {
-		"svelte": "^4.2.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.22.6",
-		"@sveltejs/package": "^2.2.1",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/node": "^20.5.3",
-		"@typescript-eslint/eslint-plugin": "^6.4.1",
-		"@typescript-eslint/parser": "^6.4.1",
-		"autoprefixer": "^10.4.15",
-		"eslint": "^8.47.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.33.0",
-		"marked": "^7.0.4",
-		"postcss": "^8.4.28",
-		"prettier": "^3.0.2",
-		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.5.3",
-		"publint": "^0.2.2",
-		"svelte-check": "^3.5.0",
-		"tailwindcss": "^3.3.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.1.6",
-		"vite": "^4.4.9"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
-}
+{
+	"name": "drab",
+	"version": "3.0.4",
+	"description": "An Unstyled Svelte Component Library",
+	"keywords": [
+		"components",
+		"Svelte",
+		"SvelteKit",
+		"Breakpoint",
+		"ContextMenu",
+		"Copy",
+		"DataTable",
+		"Details",
+		"Editor",
+		"FrettedChord",
+		"Fullscreen",
+		"Popover",
+		"Share",
+		"Sheet",
+		"YouTube"
+	],
+	"homepage": "https://drab.robino.dev",
+	"license": "MIT",
+	"author": {
+		"name": "Ross Robino",
+		"url": "https://robino.dev"
+	},
+	"repository": "github:rossrobino/drab",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --plugin=prettier-plugin-css-order",
+		"pub": "npm publish --access public",
+		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"svelte": "^4.2.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-vercel": "^3.0.3",
+		"@sveltejs/kit": "^1.24.0",
+		"@sveltejs/package": "^2.2.2",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.5.7",
+		"@typescript-eslint/eslint-plugin": "^6.5.0",
+		"@typescript-eslint/parser": "^6.5.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.48.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.33.0",
+		"layercomp": "^0.0.2",
+		"marked": "^7.0.5",
+		"postcss": "^8.4.29",
+		"prettier": "^3.0.3",
+		"prettier-plugin-css-order": "^2.0.0",
+		"prettier-plugin-svelte": "^3.0.3",
+		"prettier-plugin-tailwindcss": "^0.5.3",
+		"publint": "^0.2.2",
+		"svelte-check": "^3.5.1",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.9"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}