drab 3.0.5 → 3.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/dist/components/Breakpoint.svelte +1 -1
  3. package/dist/components/Breakpoint.svelte.d.ts +1 -1
  4. package/dist/components/ContextMenu.svelte +2 -2
  5. package/dist/components/ContextMenu.svelte.d.ts +2 -2
  6. package/dist/components/FullscreenButton.svelte +1 -1
  7. package/dist/components/FullscreenButton.svelte.d.ts +1 -1
  8. package/dist/components/Popover.svelte +1 -1
  9. package/dist/components/Popover.svelte.d.ts +1 -1
  10. package/dist/components/Sheet.svelte +1 -1
  11. package/dist/components/Sheet.svelte.d.ts +1 -1
  12. package/package.json +12 -12
package/README.md CHANGED
@@ -42,7 +42,7 @@ These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/
42
42
 
43
43
  Components without styles can appear rather drab. You have the freedom to bring your own styles to these components. Using unstyled components allows you to selectively choose what you need and avoid being tied to any specific library.
44
44
 
45
- To style the markup provided by the components, you can make use of [global styles](https://joyofcode.xyz/global-styles-in-sveltekit). Each component exports `class` and `id` props that can be leveraged for this purpose. This process can be expedited by utilizing CSS frameworks like [TailwindCSS](https://tailwindcss.com/). Tailwind generates a global stylesheet based on the utility classes used in your project. The examples in this documentation are styled with Tailwind classes, but Tailwind does not have to be used with this library.
45
+ To style the markup provided by the components, you can make use of [global styles](https://joyofcode.xyz/global-styles-in-sveltekit). Each component exports `class` and `id` props that can be leveraged for this purpose. This process can be expedited by utilizing CSS frameworks like [TailwindCSS](https://tailwindcss.com/). Tailwind generates a global stylesheet based on the utility classes used in your project. The examples in this documentation are styled with Tailwind with the [uico](https://uico.robino.dev) and [typography](https://tailwindcss.com/docs/typography-plugin) plugins. Tailwind does not have to be used with this library.
46
46
 
47
47
  ### Stylesheet
48
48
 
package/dist/components/Breakpoint.svelte CHANGED
@@ -21,7 +21,7 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check
21
21
  </script>
22
22
 
23
23
  <Breakpoint
24
- class="inline-block rounded border px-3 py-2 font-mono text-sm tabular-nums shadow"
24
+ class="card inline-block px-3 py-2 font-mono text-sm tabular-nums"
25
25
  />
26
26
  ```
27
27
  -->
package/dist/components/Breakpoint.svelte.d.ts CHANGED
@@ -37,7 +37,7 @@ export type BreakpointSlots = typeof __propDef.slots;
37
37
  * </script>
38
38
  *
39
39
  * <Breakpoint
40
- * class="inline-block rounded border px-3 py-2 font-mono text-sm tabular-nums shadow"
40
+ * class="card inline-block px-3 py-2 font-mono text-sm tabular-nums"
41
41
  * />
42
42
  * ```
43
43
  */
package/dist/components/ContextMenu.svelte CHANGED
@@ -31,7 +31,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
31
31
  <div class="mb-8 flex justify-center rounded border bg-muted p-12">
32
32
  <div>Parent right click</div>
33
33
  <ContextMenu class="z-10">
34
- <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
34
+ <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
35
35
  <div class="font-bold">Context Menu</div>
36
36
  <button role="menuitem" class="button button-secondary">Button</button>
37
37
  <button role="menuitem" class="button button-secondary">Button</button>
@@ -44,7 +44,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
44
44
  Target Right Click
45
45
  </button>
46
46
  <ContextMenu {target} class="z-10">
47
- <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
47
+ <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
48
48
  <div class="font-bold">Target</div>
49
49
  <button role="menuitem" class="button button-secondary">Button</button>
50
50
  <button role="menuitem" class="button button-secondary">Button</button>
package/dist/components/ContextMenu.svelte.d.ts CHANGED
@@ -49,7 +49,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
49
49
  * <div class="mb-8 flex justify-center rounded border bg-muted p-12">
50
50
  * <div>Parent right click</div>
51
51
  * <ContextMenu class="z-10">
52
- * <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
52
+ * <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
53
53
  * <div class="font-bold">Context Menu</div>
54
54
  * <button role="menuitem" class="button button-secondary">Button</button>
55
55
  * <button role="menuitem" class="button button-secondary">Button</button>
@@ -62,7 +62,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
62
62
  * Target Right Click
63
63
  * </button>
64
64
  * <ContextMenu {target} class="z-10">
65
- * <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
65
+ * <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
66
66
  * <div class="font-bold">Target</div>
67
67
  * <button role="menuitem" class="button button-secondary">Button</button>
68
68
  * <button role="menuitem" class="button button-secondary">Button</button>
package/dist/components/FullscreenButton.svelte CHANGED
@@ -31,7 +31,7 @@ Make the document or a `target` element fullscreen.
31
31
 
32
32
  <FullscreenButton class="button button-primary" />
33
33
 
34
- <div bind:this={target} class="mt-8 rounded border bg-muted p-4">
34
+ <div bind:this={target} class="card mt-8 bg-muted">
35
35
  <div class="mb-2">Target element</div>
36
36
  <FullscreenButton {target} class="button button-primary">
37
37
  Enable Element Fullscreen
package/dist/components/FullscreenButton.svelte.d.ts CHANGED
@@ -49,7 +49,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
49
49
  *
50
50
  * <FullscreenButton class="button button-primary" />
51
51
  *
52
- * <div bind:this={target} class="mt-8 rounded border bg-muted p-4">
52
+ * <div bind:this={target} class="card mt-8 bg-muted">
53
53
  * <div class="mb-2">Target element</div>
54
54
  * <FullscreenButton {target} class="button button-primary">
55
55
  * Enable Element Fullscreen
package/dist/components/Popover.svelte CHANGED
@@ -47,7 +47,7 @@ Displays a popover in relation to the `target`.
47
47
  </button>
48
48
 
49
49
  <Popover {target} bind:display class="p-2">
50
- <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
50
+ <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
51
51
  <div class="font-bold">Bottom</div>
52
52
  <button class="button button-secondary" on:click={close}>Close</button>
53
53
  <button class="button button-secondary" on:click={close}>Close</button>
package/dist/components/Popover.svelte.d.ts CHANGED
@@ -66,7 +66,7 @@ export type PopoverSlots = typeof __propDef.slots;
66
66
  * </button>
67
67
  *
68
68
  * <Popover {target} bind:display class="p-2">
69
- * <div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
69
+ * <div class="card flex w-48 flex-col gap-2 p-2 shadow-md">
70
70
  * <div class="font-bold">Bottom</div>
71
71
  * <button class="button button-secondary" on:click={close}>Close</button>
72
72
  * <button class="button button-secondary" on:click={close}>Close</button>
package/dist/components/Sheet.svelte CHANGED
@@ -49,7 +49,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
49
49
  <Sheet
50
50
  bind:display
51
51
  class="z-40 backdrop-blur"
52
- classSheet="p-6 shadow bg-card"
52
+ classSheet="card rounded-none border-none"
53
53
  position="r"
54
54
  >
55
55
  <div class="mb-4 flex items-center justify-between">
package/dist/components/Sheet.svelte.d.ts CHANGED
@@ -73,7 +73,7 @@ export type SheetSlots = typeof __propDef.slots;
73
73
  * <Sheet
74
74
  * bind:display
75
75
  * class="z-40 backdrop-blur"
76
- * classSheet="p-6 shadow bg-card"
76
+ * classSheet="card rounded-none border-none"
77
77
  * position="r"
78
78
  * >
79
79
  * <div class="mb-4 flex items-center justify-between">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "3.0.5",
3
+ "version": "3.0.7",
4
4
  "description": "An Unstyled Svelte Component Library",
5
5
  "keywords": [
6
6
  "components",
@@ -27,15 +27,15 @@
27
27
  },
28
28
  "repository": "github:rossrobino/drab",
29
29
  "scripts": {
30
- "dev": "vite dev",
31
- "build": "vite build && npm run package",
30
+ "dev": "vite dev --host",
31
+ "build": "npm run doc && vite build && npm run package",
32
32
  "preview": "vite preview",
33
33
  "package": "svelte-kit sync && svelte-package && publint",
34
34
  "prepublishOnly": "npm run package",
35
35
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
36
36
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
37
37
  "lint": "prettier --check . && eslint .",
38
- "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --plugin=prettier-plugin-css-order",
38
+ "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
39
39
  "pub": "npm publish --access public",
40
40
  "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
41
41
  },
@@ -48,33 +48,33 @@
48
48
  "files": [
49
49
  "dist"
50
50
  ],
51
+ "sideEffects": false,
51
52
  "dependencies": {
52
53
  "svelte": "^4.2.0"
53
54
  },
54
55
  "devDependencies": {
55
56
  "@sveltejs/adapter-vercel": "^3.0.3",
56
- "@sveltejs/kit": "^1.24.0",
57
+ "@sveltejs/kit": "^1.24.1",
57
58
  "@sveltejs/package": "^2.2.2",
58
59
  "@tailwindcss/typography": "^0.5.9",
59
- "@types/node": "^20.5.7",
60
- "@typescript-eslint/eslint-plugin": "^6.5.0",
61
- "@typescript-eslint/parser": "^6.5.0",
60
+ "@types/node": "^20.5.9",
61
+ "@typescript-eslint/eslint-plugin": "^6.6.0",
62
+ "@typescript-eslint/parser": "^6.6.0",
62
63
  "autoprefixer": "^10.4.15",
63
64
  "eslint": "^8.48.0",
64
65
  "eslint-config-prettier": "^9.0.0",
65
66
  "eslint-plugin-svelte": "^2.33.0",
66
- "layercomp": "^0.0.6",
67
- "marked": "^7.0.5",
67
+ "marked": "^8.0.0",
68
68
  "postcss": "^8.4.29",
69
69
  "prettier": "^3.0.3",
70
- "prettier-plugin-css-order": "^2.0.0",
71
70
  "prettier-plugin-svelte": "^3.0.3",
72
- "prettier-plugin-tailwindcss": "^0.5.3",
71
+ "prettier-plugin-tailwindcss": "^0.5.4",
73
72
  "publint": "^0.2.2",
74
73
  "svelte-check": "^3.5.1",
75
74
  "tailwindcss": "^3.3.3",
76
75
  "tslib": "^2.6.2",
77
76
  "typescript": "^5.2.2",
77
+ "uico": "^0.1.0",
78
78
  "vite": "^4.4.9"
79
79
  },
80
80
  "svelte": "./dist/index.js",