diff --git a/package-lock.json b/package-lock.json
index 3d0f5d3..4f8af68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "drab",
-	"version": "3.0.7",
+	"version": "4.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "drab",
-			"version": "3.0.7",
+			"version": "4.0.0",
 			"license": "MIT",
 			"dependencies": {
 				"svelte": "^4.2.0"
@@ -16,17 +16,17 @@
 				"@sveltejs/kit": "^1.24.1",
 				"@sveltejs/package": "^2.2.2",
 				"@tailwindcss/typography": "^0.5.10",
-				"@types/node": "^20.5.9",
+				"@types/node": "^20.6.0",
 				"@typescript-eslint/eslint-plugin": "^6.6.0",
 				"@typescript-eslint/parser": "^6.6.0",
 				"autoprefixer": "^10.4.15",
-				"eslint": "^8.48.0",
+				"eslint": "^8.49.0",
 				"eslint-config-prettier": "^9.0.0",
-				"eslint-plugin-svelte": "^2.33.0",
+				"eslint-plugin-svelte": "^2.33.1",
 				"highlight.js": "^11.8.0",
-				"marked": "^8.0.1",
-				"marked-highlight": "^2.0.5",
-				"marked-smartypants": "^1.1.2",
+				"marked": "^9.0.0",
+				"marked-highlight": "^2.0.6",
+				"marked-smartypants": "^1.1.3",
 				"postcss": "^8.4.29",
 				"prettier": "^3.0.3",
 				"prettier-plugin-svelte": "^3.0.3",
@@ -36,7 +36,7 @@
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.6.2",
 				"typescript": "^5.2.2",
-				"uico": "^0.1.1",
+				"uico": "^0.1.3",
 				"vite": "^4.4.9"
 			}
 		},
@@ -473,18 +473,18 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "8.48.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
-			"integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
+			"version": "8.49.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.49.0.tgz",
+			"integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==",
 			"dev": true,
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
 		"node_modules/@humanwhocodes/config-array": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-			"integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+			"version": "0.11.11",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
+			"integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
 			"dev": true,
 			"dependencies": {
 				"@humanwhocodes/object-schema": "^1.2.1",
@@ -775,9 +775,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "20.5.9",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-			"integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
+			"version": "20.6.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
+			"integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
 			"dev": true
 		},
 		"node_modules/@types/pug": {
@@ -1709,16 +1709,16 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.48.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
-			"integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
+			"version": "8.49.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.49.0.tgz",
+			"integrity": "sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
 				"@eslint/eslintrc": "^2.1.2",
-				"@eslint/js": "8.48.0",
-				"@humanwhocodes/config-array": "^0.11.10",
+				"@eslint/js": "8.49.0",
+				"@humanwhocodes/config-array": "^0.11.11",
 				"@humanwhocodes/module-importer": "^1.0.1",
 				"@nodelib/fs.walk": "^1.2.8",
 				"ajv": "^6.12.4",
@@ -1775,9 +1775,9 @@
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
-			"version": "2.33.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.33.0.tgz",
-			"integrity": "sha512-kk7Z4BfxVjFYJseFcOpS8kiKNio7KnAnhFagmM89h1wNSKlM7tIn+uguNQppKM9leYW+S+Us0Rjg2Qg3zsEcvg==",
+			"version": "2.33.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.33.1.tgz",
+			"integrity": "sha512-veYmyjsbt8ikXdaa6pLsgytdlzJpZZKw9vRaQlRBNKaLNmrbsdJulwiWfcDZ7tYJdaVpRB4iDFn/fuPeebxUVg==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
@@ -2612,9 +2612,9 @@
 			}
 		},
 		"node_modules/marked": {
-			"version": "8.0.1",
-			"resolved": "https://registry.npmjs.org/marked/-/marked-8.0.1.tgz",
-			"integrity": "sha512-eEbeEb/mJwh+sNLEhHOWtxMgjN/NEwZUBs1nkiIH2sTQTq07KmPMQ48ihyvo5+Ya56spVOPhunfGr6406crCVA==",
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-9.0.0.tgz",
+			"integrity": "sha512-37yoTpjU+TSXb9OBYY5n78z/CqXh76KiQj9xsKxEdztzU9fRLmbWO5YqKxgCVGKlNdexppnbKTkwB3RipVri8w==",
 			"dev": true,
 			"bin": {
 				"marked": "bin/marked.js"
@@ -2624,24 +2624,24 @@
 			}
 		},
 		"node_modules/marked-highlight": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.0.5.tgz",
-			"integrity": "sha512-SnMOy3LBe3ZMVyew7sO/wqAzBBSrLrOejeayP2bmnB00rrETtNyEvJkR5f3kDRYv5nT+ueEMba6XcGlmcyaN+A==",
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.0.6.tgz",
+			"integrity": "sha512-xjA/C6xgXAfkkYg+YHnxdjmgFyTDtqqu8KbZiqh+COJ7PuzR15kqa+rPrs6pf/2jExXtG1jyCFUHmv9s0Bi/dQ==",
 			"dev": true,
 			"peerDependencies": {
-				"marked": ">=4 <9"
+				"marked": ">=4 <10"
 			}
 		},
 		"node_modules/marked-smartypants": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/marked-smartypants/-/marked-smartypants-1.1.2.tgz",
-			"integrity": "sha512-DkQS/d8tlHb7fekmD1LYBp0heHsA/m/kKVoL9zY5xykY6tz7KSi5RHjoRtmZIJ24L+B5Ojlbzd6tDbu5Vqs8Qg==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/marked-smartypants/-/marked-smartypants-1.1.3.tgz",
+			"integrity": "sha512-GfRM03EmgmOw/QhJHJX9gWfA6M1AtO2y5Neo/V5dlLDK0L0gvgWUGcAcnWGLifQwt+OO2rhAQiYcjVe46fSN5A==",
 			"dev": true,
 			"dependencies": {
 				"smartypants": "^0.2.2"
 			},
 			"peerDependencies": {
-				"marked": ">=4 <9"
+				"marked": ">=4 <10"
 			}
 		},
 		"node_modules/mdn-data": {
@@ -4415,9 +4415,9 @@
 			}
 		},
 		"node_modules/uico": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/uico/-/uico-0.1.1.tgz",
-			"integrity": "sha512-5sCmAznGUOc3hWt2aJs8y+5/xSNw6zmT6WIzZSCftLHl65fmm6Vf0F0gYKcyMDDpKCqbaJWSq2XVtq/5PNIYqw==",
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/uico/-/uico-0.1.3.tgz",
+			"integrity": "sha512-8cl+F4ASD8s1wK63oFUMpCxZCWMAQBQgGtt14cDWeDySo5chfkLh3eIOMzpCDhyxawm5DQkxztWg3XbA0gV9DQ==",
 			"dev": true,
 			"dependencies": {
 				"tailwindcss": "^3.3.3"
diff --git a/package.json b/package.json
index f6e3c42..9e35139 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "3.0.7",
+	"version": "4.0.0",
 	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",
@@ -27,7 +27,8 @@
 	},
 	"repository": "github:rossrobino/drab",
 	"scripts": {
-		"dev": "vite dev --host",
+		"dev": "vite dev",
+		"host": "vite dev --host",
 		"build": "npm run doc && vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
@@ -36,8 +37,8 @@
 		"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"
+		"pub": "npm i && npm run doc && npm publish --access public",
+		"doc": "npm run format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
 	},
 	"exports": {
 		".": {
@@ -57,17 +58,17 @@
 		"@sveltejs/kit": "^1.24.1",
 		"@sveltejs/package": "^2.2.2",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "^20.5.9",
+		"@types/node": "^20.6.0",
 		"@typescript-eslint/eslint-plugin": "^6.6.0",
 		"@typescript-eslint/parser": "^6.6.0",
 		"autoprefixer": "^10.4.15",
-		"eslint": "^8.48.0",
+		"eslint": "^8.49.0",
 		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.33.0",
+		"eslint-plugin-svelte": "^2.33.1",
 		"highlight.js": "^11.8.0",
-		"marked": "^8.0.1",
-		"marked-highlight": "^2.0.5",
-		"marked-smartypants": "^1.1.2",
+		"marked": "^9.0.0",
+		"marked-highlight": "^2.0.6",
+		"marked-smartypants": "^1.1.3",
 		"postcss": "^8.4.29",
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
@@ -77,7 +78,7 @@
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
-		"uico": "^0.1.1",
+		"uico": "^0.1.3",
 		"vite": "^4.4.9"
 	},
 	"svelte": "./dist/index.js",
diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
index 0e388c9..d3aba63 100644
--- a/src/lib/components/CopyButton.svelte
+++ b/src/lib/components/CopyButton.svelte
@@ -30,12 +30,8 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
 	let value = "";
 </script>
 
-<input
-	class="input mb-4"
-	type="text"
-	placeholder="Enter text to copy"
-	bind:value
-/>
+<label for="copyInput" class="label">Text to Copy</label>
+<input id="copyInput" class="input mb-4" type="text" bind:value />
 
 <CopyButton class="button button-primary" blobParts={[value]} />
 ```
diff --git a/src/lib/components/Sheet.svelte b/src/lib/components/Sheet.svelte
index f3774d0..a8b358c 100644
--- a/src/lib/components/Sheet.svelte
+++ b/src/lib/components/Sheet.svelte
@@ -13,8 +13,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 - `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
+- `transition` - flies the sheet, set to `false` to remove
 
 @slots
 
@@ -74,13 +73,8 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 -->
 
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
-	import {
-		blur,
-		fly,
-		type BlurParams,
-		type FlyParams,
-	} from "svelte/transition";
+	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { fly, type FlyParams } from "svelte/transition";
 	import type { Action } from "svelte/action";
 	import { prefersReducedMotion } from "$lib/util/accessibility";
 	import { duration } from "$lib/util/transition";
@@ -96,9 +90,6 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 	/** controls whether the sheet is displayed*/
 	export let display = false;
 
-	/** blurs the entire component, set to `false` to remove */
-	export let transition: BlurParams | false = { duration };
-
 	/** determines the position of sheet */
 	export let position: "t" | "b" | "l" | "r" = "l";
 
@@ -106,10 +97,16 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 	export let maxSize: number = 488;
 
 	/** flies the sheet, set to `false` to remove */
-	export let transitionSheet: FlyParams | false = { duration };
+	export let transition: FlyParams | false = { duration, opacity: 1 };
 
 	let sheet: HTMLDivElement;
 
+	/** removes styles from backdrop if `true` */
+	let backdropNone = false;
+
+	/** see `displayController` */
+	let displaySheet = false;
+
 	const dispatch = createEventDispatcher();
 
 	const close = () => (display = false);
@@ -124,47 +121,64 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 		return { destroy: () => dispatch("destroy") };
 	};
 
-	if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
+	/**
+	 * - removes the backdrop styles before the transition occurs
+	 * - keeps `display` and `displaySheet` in sync
+	 * @param display user controlled `display` prop
+	 */
+	const displayController = async (display: boolean) => {
+		if (display) {
+			backdropNone = false;
+			displaySheet = true;
+		} else {
+			backdropNone = true;
+			await tick();
+			displaySheet = false;
+		}
+	};
+
+	// calculates the transition based on the `maxSize` and `position`
+	// if the user does not define their own transition
+	if (transition && !transition.x && !transition.y) {
 		// if there isn't a user assigned value for `x` or `y`
 		if (position === "b") {
-			transitionSheet.y = maxSize;
+			transition.y = maxSize;
 		} else if (position === "t") {
-			transitionSheet.y = -maxSize;
+			transition.y = -maxSize;
 		} else if (position === "r") {
-			transitionSheet.x = maxSize;
+			transition.x = maxSize;
 		} else {
-			transitionSheet.x = -maxSize;
+			transition.x = -maxSize;
 		}
 	}
 
 	onMount(() => {
-		if (prefersReducedMotion()) {
-			transition = false;
-			transitionSheet = false;
-		}
+		if (prefersReducedMotion()) transition = false;
 	});
+
+	$: displayController(display);
 </script>
 
 <svelte:body on:keydown={onKeyDown} />
 
-{#if display}
+{#if displaySheet}
 	<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"}
+		class="backdrop {className}"
+		class:backdrop-bottom={position === "b"}
+		class:backdrop-top={position === "t"}
+		class:backdrop-right={position === "r"}
+		class:backdrop-none={backdropNone}
 		{id}
 	>
 		<div
 			bind:this={sheet}
-			transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
+			transition:fly={transition ? transition : { duration: 0 }}
 			use:lifecycle
 			role="dialog"
 			tabindex="-1"
-			style={position === "t" || position === "b"
+			style="outline: none; {position === 't' || position === 'b'
 				? `max-height: ${maxSize}px;`
-				: `max-width: ${maxSize}px`}
+				: `max-width: ${maxSize}px`}"
 			class={classSheet}
 		>
 			<slot>Content</slot>
@@ -177,7 +191,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 	button {
 		flex-grow: 1;
 	}
-	.d-backdrop {
+	.backdrop {
 		display: flex;
 		position: fixed;
 		top: 0;
@@ -186,13 +200,17 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 		left: 0;
 		overflow: hidden;
 	}
-	.d-backdrop-bottom {
+	.backdrop-bottom {
 		flex-direction: column-reverse;
 	}
-	.d-backdrop-top {
+	.backdrop-top {
 		flex-direction: column;
 	}
-	.d-backdrop-right {
+	.backdrop-right {
 		flex-direction: row-reverse;
 	}
+	.backdrop-none {
+		backdrop-filter: none;
+		background: none;
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e0e05af..83e248b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -62,6 +62,7 @@
 				bind:display={displaySheet}
 				class="z-40 backdrop-blur"
 				classSheet="card rounded-none border-none overflow-y-auto"
+				maxSize={280}
 			>
 				<div class="flex items-center justify-between gap-4">
 					<h2 class="my-0">
diff --git a/src/routes/docs/CopyButton/+page.svelte b/src/routes/docs/CopyButton/+page.svelte
index ab8b919..932f819 100644
--- a/src/routes/docs/CopyButton/+page.svelte
+++ b/src/routes/docs/CopyButton/+page.svelte
@@ -4,11 +4,7 @@
 	let value = "";
 </script>
 
-<input
-	class="input mb-4"
-	type="text"
-	placeholder="Enter text to copy"
-	bind:value
-/>
+<label for="copyInput" class="label">Text to Copy</label>
+<input id="copyInput" class="input mb-4" type="text" bind:value />
 
 <CopyButton class="button button-primary" blobParts={[value]} />