@jungherz-de/notionkit-elements 1.0.0 โ†’ 1.0.1

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 (2) hide show
  1. package/README.md +70 -17
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,69 @@
1
+ <h1 align="center">๐Ÿงฉ NotionKit Elements</h1>
2
+
1
3
  <p align="center">
2
- <img src="https://img.shields.io/badge/version-1.0.0-2383e2?style=flat-square" alt="Version">
3
- <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/notionkit-elements?style=flat-square&color=529cca" alt="npm"></a>
4
- <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.0.0-9065b0?style=flat-square" alt="Changelog"></a>
5
- <img src="https://img.shields.io/badge/license-MIT-448361?style=flat-square" alt="MIT">
4
+ <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.0.1-2383e2?style=flat-square" alt="Version"></a>
5
+ <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-448361?style=flat-square" alt="Vanilla JS"></a>
6
+ <a href="#"><img src="https://img.shields.io/badge/elements-68-529cca?style=flat-square" alt="68 Elements"></a>
7
+ <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-9065b0?style=flat-square" alt="MIT License"></a>
8
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.0.1-lightgrey?style=flat-square" alt="Changelog"></a>
9
+ <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fnotionkit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
6
10
  </p>
7
11
 
8
- # NotionKit Elements
12
+ <p align="center">
13
+ <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/NotionKit">NotionKit CSS</a></strong><br>
14
+ 68 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
15
+ Shadow DOM &middot; Native form participation &middot; Pixel parity with the class markup &middot; Zero dependencies.
16
+ </p>
17
+
18
+ <p align="center">
19
+ <a href="https://notionkit-elements.jungherz.com/">๐ŸŒ Live Demo</a> &nbsp;&middot;&nbsp;
20
+ <a href="https://notionkit-elements.jungherz.com/docs.html">๐Ÿ“– Documentation</a> &nbsp;&middot;&nbsp;
21
+ <a href="https://notionkit-elements.jungherz.com/showcase.html">๐ŸŽจ Showcase</a> &nbsp;&middot;&nbsp;
22
+ <a href="https://notionkit.jungherz.com/">๐Ÿ““ NotionKit CSS</a> &nbsp;&middot;&nbsp;
23
+ <a href="https://notionkit-web.jungherz.com/">๐Ÿš€ NotionKit Web</a> &nbsp;&middot;&nbsp;
24
+ <a href="SKILL.md">๐Ÿค– SKILL.md</a>
25
+ </p>
26
+
27
+ ---
28
+
29
+ ## โœจ What is NotionKit Elements?
30
+
31
+ NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **68 Web Components** โ€“ from buttons and form controls over the sidebar, page tree and page shell to the settings modal, โŒ˜K palette, database views and AI thread โ€“ that encapsulate the class markup of the foundation into simple, declarative custom elements.
9
32
 
10
- Vanilla-JS Web Components for the [NotionKit](https://notionkit.jungherz.com) CSS foundation โ€“ 68 `<nk-*>` custom elements with Shadow DOM, automatic light/dark sync, native form participation and pixel parity with the class markup. Same word stem as the CSS classes: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
33
+ It is the **app layer** of the NotionKit family โ€“ three layers, one design language: [NotionKit](https://notionkit.jungherz.com) is the pure-CSS foundation, NotionKit Elements wraps it into web components for application UIs, and [NotionKit Web](https://notionkit-web.jungherz.com) is the Astro template for complete websites on top of the same foundation. The word stem stays the same across the layers: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
11
34
 
12
- - **Docs:** https://notionkit-elements.jungherz.com/docs.html โ€“ attributes, slots, events, before/after against the class markup
13
- - **Showcase:** https://notionkit-elements.jungherz.com/showcase.html โ€“ every element live, both themes, brand switch
14
- - **Demo app:** https://notionkit-elements.jungherz.com/app.html โ€“ the NotionKit reference app, elements only
15
- - **AI reference:** [SKILL.md](SKILL.md) โ€“ copy-paste markup, six app skeletons, rules and common mistakes
35
+ ```html
36
+ <!-- Before: 6 elements, 6 classes -->
37
+ <div class="nk-field">
38
+ <div>
39
+ <div class="f-label">Email notifications</div>
40
+ <div class="f-desc">Shown next to your comments.</div>
41
+ </div>
42
+ <div class="f-control"><button class="nk-switch" role="switch" aria-checked="true"></button></div>
43
+ </div>
44
+
45
+ <!-- After: 2 elements, 0 classes -->
46
+ <nk-field label="Email notifications" desc="Shown next to your comments.">
47
+ <nk-switch checked></nk-switch>
48
+ </nk-field>
49
+ ```
50
+
51
+ ---
52
+
53
+ ## ๐ŸŽฏ Why NotionKit Elements?
54
+
55
+ | Feature | Details |
56
+ |---|---|
57
+ | ๐ŸŽฏ **Pixel parity** | Every element renders identically to its class markup โ€“ verified by a Playwright pixel test in light and dark; the reference app differs by 0.00 % from the class version |
58
+ | ๐Ÿ”Œ **Shadow DOM** | Each root adopts the NotionKit *components* sheet via `adoptedStyleSheets`; tokens are inherited from the document, so one `:root { --nk-accent: โ€ฆ }` re-brands everything |
59
+ | ๐Ÿงฉ **68 Elements** | Forms, content blocks, app shell & tree, page shell, overlays (modal, โŒ˜K palette, menus, popover, emoji picker, toast), database table & board, comments, AI thread |
60
+ | ๐ŸŽ›๏ธ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
61
+ | ๐ŸŒ— **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
62
+ | ๐Ÿชถ **Lightweight** | 167 KB minified / 33 KB gzipped (IIFE, foundation sheet included), no external dependencies |
63
+ | ๐Ÿ“ฆ **Four bundle shapes** | IIFE, minified IIFE, ESM, and per-component ESM entries with a shared chunk |
64
+ | ๐Ÿค– **AI-ready** | `SKILL.md` with copy-paste markup, six app skeletons and the rules โ€“ an agent given only that file built a working app in the release test |
65
+
66
+ ---
16
67
 
17
68
  ## Quick start
18
69
 
@@ -21,7 +72,7 @@ Vanilla-JS Web Components for the [NotionKit](https://notionkit.jungherz.com) CS
21
72
  <html lang="en" data-theme="light">
22
73
  <head>
23
74
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.1.1/notionkit.min.css">
24
- <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.0/dist/notionkit-elements.min.js"></script>
75
+ <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.1/dist/notionkit-elements.min.js"></script>
25
76
  </head>
26
77
  <body class="nk-body">
27
78
  <nk-field label="Display name" desc="Shown next to your comments">
@@ -81,10 +132,12 @@ npm run check:coverage && npm run check:versions
81
132
 
82
133
  ## The NotionKit family
83
134
 
84
- | Layer | Package |
85
- |---|---|
86
- | **NotionKit** โ€“ CSS foundation | [`@jungherz-de/notionkit`](https://github.com/JUNGHERZ/NotionKit) |
87
- | **NotionKit Elements** โ€“ this package | `@jungherz-de/notionkit-elements` |
88
- | NotionKit Web โ€“ Astro template | planned |
135
+ | Layer | Repository | Website |
136
+ |---|---|---|
137
+ | **NotionKit** โ€“ CSS foundation | [`JUNGHERZ/NotionKit`](https://github.com/JUNGHERZ/NotionKit) | [notionkit.jungherz.com](https://notionkit.jungherz.com) |
138
+ | **NotionKit Elements** โ€“ Web Components (this package) | [`JUNGHERZ/NotionKit-Elements`](https://github.com/JUNGHERZ/NotionKit-Elements) | [notionkit-elements.jungherz.com](https://notionkit-elements.jungherz.com) |
139
+ | **NotionKit Web** โ€“ Astro template for complete websites | [`JUNGHERZ/NotionKit-Web`](https://github.com/JUNGHERZ/NotionKit-Web) | [notionkit-web.jungherz.com](https://notionkit-web.jungherz.com) |
140
+
141
+ npm: [`@jungherz-de/notionkit`](https://www.npmjs.com/package/@jungherz-de/notionkit) ยท [`@jungherz-de/notionkit-elements`](https://www.npmjs.com/package/@jungherz-de/notionkit-elements)
89
142
 
90
- MIT ยท Jungherz GmbH
143
+ MIT ยท [Jungherz GmbH](https://www.jungherz.com)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jungherz-de/notionkit-elements",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation โ€“ <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
5
5
  "license": "MIT",
6
6
  "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",