drab 3.0.3 → 3.0.4

package/README.md

@@ -27,7 +27,7 @@ npm install -D drab
 
 The library provides inline documentation for each component, allowing you to conveniently access the documentation by hovering over the component in your text editor after importing it. Additionally, every prop is documented using JSDoc and TypeScript. By hovering over a prop, you can retrieve its type and description.
 
-These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin) for base styles along with a few custom utility classes you can find [here](https://github.com/rossrobino/drab/blob/main/src/app.postcss). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/).
+These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/).
 
 ## Other UI Libraries
 
@@ -50,11 +50,11 @@ Here's a SvelteKit example using CSS imported in a layout. By using a layout, th
 
 ```css
 /* src/app.css */
-.btn {
-	color: white;
-	background-color: black;
+.button {
 	border-radius: 5px;
+	background-color: black;
 	padding: 5px;
+	color: white;
 }
 ```
 
@@ -73,7 +73,7 @@ Here's a SvelteKit example using CSS imported in a layout. By using a layout, th
 	import { FullscreenButton } from "drab";
 </script>
 
-<FullscreenButton class="btn" />
+<FullscreenButton class="button" />
 ```
 
 ### Global modifier
@@ -86,14 +86,14 @@ Alternatively, the [`:global()` modifier](https://svelte.dev/docs/svelte-compone
 	import { FullscreenButton } from "drab";
 </script>
 
-<FullscreenButton class="btn" />
+<FullscreenButton class="button" />
 
 <style>
-	:global(.btn) {
-		color: white;
-		background-color: black;
+	:global(.button) {
 		border-radius: 5px;
+		background-color: black;
 		padding: 5px;
+		color: white;
 	}
 </style>
 ```
@@ -108,7 +108,7 @@ Since this is an unstyled library, simple components like a badge that can be ea
 
 ### Local Development
 
-Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. The site is deployed to Vercel using `@sveltejs/adapter-vercel`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy.
+Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy.
 
 #### Make changes
 

package/dist/components/Breakpoint.svelte

@@ -21,7 +21,7 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check
 </script>
 
 <Breakpoint
-	class="inline-block rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
+	class="inline-block rounded border px-3 py-2 font-mono text-sm tabular-nums shadow"
 />
 ```
 -->

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

@@ -37,7 +37,7 @@ export type BreakpointSlots = typeof __propDef.slots;
  * </script>
  *
  * <Breakpoint
- * class="inline-block rounded border bg-white px-2 py-1 font-mono tabular-nums shadow"
+ * class="inline-block rounded border px-3 py-2 font-mono text-sm tabular-nums shadow"
  * />
  * ```
  */

package/dist/components/ContextMenu.svelte

@@ -28,25 +28,29 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 	let target: HTMLButtonElement;
 </script>
 
-<div class="mb-8 flex justify-center rounded border border-dashed p-12">
+<div class="mb-8 flex justify-center rounded border p-12">
 	<div>Parent right click</div>
-	<ContextMenu>
-		<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+	<ContextMenu class="z-10">
+		<div
+			class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow"
+		>
 			<div class="font-bold">Context Menu</div>
-			<button role="menuitem" class="btn">Button</button>
-			<button role="menuitem" class="btn">Button</button>
-			<button role="menuitem" class="btn">Button</button>
+			<button role="menuitem" class="button button-secondary">Button</button>
+			<button role="menuitem" class="button button-secondary">Button</button>
+			<button role="menuitem" class="button button-secondary">Button</button>
 		</div>
 	</ContextMenu>
 </div>
 
-<button type="button" class="btn" bind:this={target}>Target Right Click</button>
-<ContextMenu {target}>
-	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+<button type="button" class="button button-primary" bind:this={target}>
+	Target Right Click
+</button>
+<ContextMenu {target} class="z-10">
+	<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
 		<div class="font-bold">Target</div>
-		<button role="menuitem" class="btn">Button</button>
-		<button role="menuitem" class="btn">Button</button>
-		<button role="menuitem" class="btn">Button</button>
+		<button role="menuitem" class="button button-secondary">Button</button>
+		<button role="menuitem" class="button button-secondary">Button</button>
+		<button role="menuitem" class="button button-secondary">Button</button>
 	</div>
 </ContextMenu>
 ```
@@ -138,9 +142,9 @@ onMount(async () => {
 
 <style>
 	span {
+		opacity: 0;
 		width: 0;
 		height: 0;
-		opacity: 0;
 	}
 	div {
 		position: absolute;

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

@@ -46,25 +46,29 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * let target: HTMLButtonElement;
  * </script>
  *
- * <div class="mb-8 flex justify-center rounded border border-dashed p-12">
+ * <div class="mb-8 flex justify-center rounded border p-12">
  * <div>Parent right click</div>
- * <ContextMenu>
- * 	<div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+ * <ContextMenu class="z-10">
+ * 	<div
+ * 		class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow"
+ * 	>
  * 		<div class="font-bold">Context Menu</div>
- * 		<button role="menuitem" class="btn">Button</button>
- * 		<button role="menuitem" class="btn">Button</button>
- * 		<button role="menuitem" class="btn">Button</button>
+ * 		<button role="menuitem" class="button button-secondary">Button</button>
+ * 		<button role="menuitem" class="button button-secondary">Button</button>
+ * 		<button role="menuitem" class="button button-secondary">Button</button>
  * 	</div>
  * </ContextMenu>
  * </div>
  *
- * <button type="button" class="btn" bind:this={target}>Target Right Click</button>
- * <ContextMenu {target}>
- * <div class="flex w-48 flex-col gap-2 rounded border bg-white p-2 shadow">
+ * <button type="button" class="button button-primary" bind:this={target}>
+ * Target Right Click
+ * </button>
+ * <ContextMenu {target} class="z-10">
+ * <div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
  * 	<div class="font-bold">Target</div>
- * 	<button role="menuitem" class="btn">Button</button>
- * 	<button role="menuitem" class="btn">Button</button>
- * 	<button role="menuitem" class="btn">Button</button>
+ * 	<button role="menuitem" class="button button-secondary">Button</button>
+ * 	<button role="menuitem" class="button button-secondary">Button</button>
+ * 	<button role="menuitem" class="button button-secondary">Button</button>
  * </div>
  * </ContextMenu>
  * ```

package/dist/components/CopyButton.svelte

@@ -27,12 +27,17 @@ Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipbo
 <script lang="ts">
 	import { CopyButton } from "drab";
 
-	let value = "Text to copy";
+	let value = "";
 </script>
 
-<input class="input mb-4" type="text" bind:value />
+<input
+	class="input mb-4"
+	type="text"
+	placeholder="Enter text to copy"
+	bind:value
+/>
 
-<CopyButton class="btn" blobParts={[value]} />
+<CopyButton class="button button-primary" blobParts={[value]} />
 ```
 -->
 

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

@@ -46,12 +46,17 @@ export type CopyButtonSlots = typeof __propDef.slots;
  * <script lang="ts">
  * import { CopyButton } from "drab";
  *
- * let value = "Text to copy";
+ * let value = "";
  * </script>
  *
- * <input class="input mb-4" type="text" bind:value />
+ * <input
+ * class="input mb-4"
+ * type="text"
+ * placeholder="Enter text to copy"
+ * bind:value
+ * />
  *
- * <CopyButton class="btn" blobParts={[value]} />
+ * <CopyButton class="button button-primary" blobParts={[value]} />
  * ```
  */
 export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {

package/dist/components/DataTable.svelte

@@ -68,7 +68,7 @@ Data table to display an array of objects. Works with zero configuration, just p
 	maxRows={4}
 	class="tabular-nums"
 	classTh="cursor-pointer capitalize"
-	classTbodyTr="transition hover:bg-neutral-50"
+	classTbodyTr="transition hover:bg-muted"
 >
 	<svelte:fragment slot="th" let:key let:sortBy>
 		<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
@@ -89,7 +89,7 @@ Data table to display an array of objects. Works with zero configuration, just p
 				<div class="flex gap-2">
 					<button
 						type="button"
-						class="btn"
+						class="button button-primary"
 						disabled={currentPage < 1}
 						on:click={() => currentPage--}
 					>
@@ -97,7 +97,7 @@ Data table to display an array of objects. Works with zero configuration, just p
 					</button>
 					<button
 						type="button"
-						class="btn"
+						class="button button-primary"
 						disabled={currentPage >= numberOfPages - 1}
 						on:click={() => currentPage++}
 					>

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

@@ -108,7 +108,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * maxRows={4}
  * class="tabular-nums"
  * classTh="cursor-pointer capitalize"
- * classTbodyTr="transition hover:bg-neutral-50"
+ * classTbodyTr="transition hover:bg-muted"
  * >
  * <svelte:fragment slot="th" let:key let:sortBy>
  * 	<span class:uppercase={key === "awd"} class:underline={key === sortBy}>
@@ -129,7 +129,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * 			<div class="flex gap-2">
  * 				<button
  * 					type="button"
- * 					class="btn"
+ * 					class="button button-primary"
  * 					disabled={currentPage < 1}
  * 					on:click={() => currentPage--}
  * 				>
@@ -137,7 +137,7 @@ export type DataTableSlots = typeof __propDef.slots;
  * 				</button>
  * 				<button
  * 					type="button"
- * 					class="btn"
+ * 					class="button button-primary"
  * 					disabled={currentPage >= numberOfPages - 1}
  * 					on:click={() => currentPage++}
  * 				>

package/dist/components/Details.svelte

@@ -29,9 +29,7 @@ Displays a `details` element with helpful defaults and transitions. Can be used
 
 <Details class="border-b">
 	<svelte:fragment slot="summary" let:open>
-		<div
-			class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
-		>
+		<div class="link flex items-center justify-between gap-8 p-4">
 			<div>Does it work without JavaScript?</div>
 			<div class="transition" class:rotate-180={open}>
 				<Chevron />

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

@@ -49,9 +49,7 @@ export type DetailsSlots = typeof __propDef.slots;
  *
  * <Details class="border-b">
  * <svelte:fragment slot="summary" let:open>
- * 	<div
- * 		class="flex cursor-pointer items-center justify-between gap-8 p-4 underline hover:decoration-dotted"
- * 	>
+ * 	<div class="link flex items-center justify-between gap-8 p-4">
  * 		<div>Does it work without JavaScript?</div>
  * 		<div class="transition" class:rotate-180={open}>
  * 			<Chevron />

package/dist/components/Editor.svelte

@@ -35,9 +35,9 @@
 </script>
 
 <Editor
-	classButton="btn"
+	classButton="button button-primary"
 	classControls="flex gap-2"
-	classTextarea="border w-full h-36 p-2 rounded mb-2"
+	classTextarea="input w-full h-36 mb-2"
 	placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
 	contentElements={[
 		{

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

@@ -74,9 +74,9 @@ export type EditorSlots = typeof __propDef.slots;
  * </script>
  *
  * <Editor
- * classButton="btn"
+ * classButton="button button-primary"
  * classControls="flex gap-2"
- * classTextarea="border w-full h-36 p-2 rounded mb-2"
+ * classTextarea="input w-full h-36 mb-2"
  * placeholderTextarea="asterisk: ctrl+i, anchor: ctrl+["
  * contentElements={[
  * 	{

package/dist/components/FrettedChord.svelte

@@ -24,7 +24,7 @@ Try it out and generate code: [FrettedChord Creator](https://svelte.dev/repl/577
 </script>
 
 <FrettedChord
-	class="font-mono text-neutral-950"
+	class="font-mono text-foreground"
 	name="D"
 	notes={[
 		{

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

@@ -47,7 +47,7 @@ export type FrettedChordSlots = typeof __propDef.slots;
  * </script>
  *
  * <FrettedChord
- * class="font-mono text-neutral-950"
+ * class="font-mono text-foreground"
  * name="D"
  * notes={[
  * 	{

package/dist/components/FullscreenButton.svelte

@@ -29,11 +29,11 @@ Make the document or a `target` element fullscreen.
 	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/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

@@ -37,16 +37,21 @@ Displays a popover in relation to the `target`.
 	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/Popover.svelte.d.ts

@@ -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

@@ -45,7 +45,7 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 </script>
 
 <ShareButton
-	class="btn mb-8"
+	class="button button-primary mb-8"
 	shareData={{
 		text: "Check out this page: ",
 		title: "drab",
@@ -64,7 +64,7 @@ Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Naviga
 		bind:this={fileInput}
 		on:input={onInput}
 	/>
-	<ShareButton class="btn" bind:shareData={fileShareData}>
+	<ShareButton class="button button-primary" bind:shareData={fileShareData}>
 		Share File
 	</ShareButton>
 </div>

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>

package/dist/components/Sheet.svelte

@@ -38,19 +38,27 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
 	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>
@@ -146,12 +154,12 @@ onMount(() => {
 		flex-grow: 1;
 	}
 	.d-backdrop {
-		position: fixed;
 		display: flex;
+		position: fixed;
 		top: 0;
+		right: 0;
 		bottom: 0;
 		left: 0;
-		right: 0;
 		overflow: hidden;
 	}
 	.d-backdrop-bottom {

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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",
@@ -35,7 +35,7 @@
 		"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",
+		"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"
 	},
@@ -53,26 +53,28 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.22.6",
-		"@sveltejs/package": "^2.2.1",
+		"@sveltejs/kit": "^1.24.0",
+		"@sveltejs/package": "^2.2.2",
 		"@tailwindcss/typography": "^0.5.9",
-		"@types/node": "^20.5.3",
-		"@typescript-eslint/eslint-plugin": "^6.4.1",
-		"@typescript-eslint/parser": "^6.4.1",
+		"@types/node": "^20.5.7",
+		"@typescript-eslint/eslint-plugin": "^6.5.0",
+		"@typescript-eslint/parser": "^6.5.0",
 		"autoprefixer": "^10.4.15",
-		"eslint": "^8.47.0",
+		"eslint": "^8.48.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",
+		"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.0",
+		"svelte-check": "^3.5.1",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
-		"typescript": "^5.1.6",
+		"typescript": "^5.2.2",
 		"vite": "^4.4.9"
 	},
 	"svelte": "./dist/index.js",