Dokumentation

Attribute, Slots, Events und das Klassen-Markup, das jedes Element ersetzt.

Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.1.1/notionkit.min.css">
<script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.1/dist/notionkit-elements.min.js"></script>

npm

npm install @jungherz-de/notionkit-elements @jungherz-de/notionkit

import '@jungherz-de/notionkit/notionkit.css';
import '@jungherz-de/notionkit-elements';

Einzelne Komponente

import '@jungherz-de/notionkit-elements/components/nk-btn.js';

Voraussetzungen

notionkit.css auf dem Dokument laden und class="nk-body" auf <body> setzen. Die Shadow Roots erben Schrift, Farbe und den Scoped Reset von dort; die Elemente bringen kein eigenes visuelles CSS mit. Das Bundle injiziert zusätzlich die Design-Tokens als Cascade Layer (@layer notionkit-defaults): Eine Seite ohne Stylesheet rendert trotzdem, und jedes eigene, unlayered :root { --nk-* } gewinnt.

<html lang="en" data-theme="light">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.1.1/notionkit.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.1/dist/notionkit-elements.min.js"></script>
  </head>
  <body class="nk-body">
    <nk-btn variant="primary">Speichern</nk-btn>
  </body>
</html>

Hosts sind display: contents

Jeder <nk-*>-Host ist display: contents: Er erzeugt keine eigene Box, das innere .nk-*-Element nimmt also genau dort am Eltern-Layout teil, wo es das Klassen-Markup täte – ein Button bleibt inline, eine Sidebar ist direktes Flex-Kind der App, Baumzeile und Kinder-Box sind Geschwister. Das ist der Grund, warum die Pixel-Parität hält. Konsequenz: das Elternelement (oder die Tokens) stylen, nicht den Host; hidden am Host funktioniert weiter; getBoundingClientRect() eines Hosts ist leer.

<!-- ✓ spacing on a wrapper you own -->
<div style="margin-top:16px"><nk-btn variant="primary">Speichern</nk-btn></div>

<!-- ✗ the host has no box; this margin does nothing -->
<nk-btn style="margin-top:16px" variant="primary">Speichern</nk-btn>

Theming & Branding

data-theme="light|dark" auf <html> setzen – nirgends sonst. Ein Observer spiegelt es in jedes Element. Zum Rebranding Tokens auf :root in einem normalen Stylesheet deklarieren: Jedes Element folgt, in beiden Themes.

<style>
  :root { --nk-accent: #16a34a; }
  [data-theme="dark"] { --nk-accent: #4ade80; }
</style>
<script>document.documentElement.dataset.theme = 'dark';</script>

Formulare

Formular-Controls sind form-associated Custom Elements: In einem <form> erscheinen sie in FormData, folgen reset, respektieren required und <fieldset disabled>. Außerhalb eines Formulars funktionieren value und Events weiter, aber nichts wird abgeschickt.

<form id="f">
  <nk-field label="Anzeigename"><nk-input name="name" required></nk-input></nk-field>
  <nk-field label="E-Mail-Benachrichtigungen"><nk-switch name="notify" checked></nk-switch></nk-field>
  <nk-btn type="submit" variant="primary">Speichern</nk-btn>
</form>
<script>
  f.addEventListener('submit', e => { e.preventDefault(); console.log([...new FormData(f)]); });
</script>

Light-DOM-Kinder

Elemente, die ihre Kinder kopieren (nk-select-Optionen, Breadcrumb-Einträge), beobachten sie per MutationObserver – ein Framework, das Kinder austauscht, hält das Element synchron. element.refresh() ist der Notausgang. Der leere String ist ein gültiger Wert.

const sel = document.querySelector('nk-select');
sel.innerHTML = roles.map(r => `<option value="${r.id}">${r.name}</option>`).join('');
// the shadow <select> follows; sel.value is preserved when the option still exists

Icons übergeben

::slotted() trifft nur den zugewiesenen Knoten selbst. Ein Icon als direktes Kind mit Slot-Namen übergeben – nie in einen Container verpackt.

<!-- ✓ the icon is the slotted node -->
<nk-callout><span slot="icon">📌</span>…</nk-callout>

<!-- ✗ wrapped: ::slotted() cannot reach the inner node -->
<nk-callout><span slot="icon"><em>📌</em></span>…</nk-callout>

Overlays

nk-modal, nk-cmdk und nk-toast direkt unter <body> platzieren. In einem transformierten oder clippenden Container ist ein fixed Overlay gefangen.

Editor

NotionKit liefert keinen Editor. nk-block-host ist die optische Hülle; TipTap wird mit dem Rezept unten in ein Light-DOM-.nk-block-host gemountet (die Demo-App nutzt genau diese Datei). <nk-editor>, ein dünner TipTap-Wrapper, folgt in v1.1 als optionaler Import – nie Teil des Core-Bundles.

<!-- the shell: hover wash, focus ring, drag handle -->
<div class="nk-block-host" id="editor">
  <p>Server-rendered content becomes the initial document.</p>
</div>

<!-- the recipe: TipTap + slash menu + bubble menu + block handle (docs-editor.js) -->
<script type="module" src="../docs-editor.js"></script>

docs-editor.js · live in the demo app

Formulare & Controls

Welle 1

<nk-btn> Button

Rendert button.nk-btn, mit href ein a.nk-btn. Modifikator-Klassen werden Attribute. Ein geslottetes <svg> bekommt seine Größe aus dem Stylesheet – direkt übergeben, nie verpackt.

Welle 1
Speichern Abbrechen Löschen
<nk-btn variant="primary">Speichern</nk-btn>
<nk-btn variant="secondary">Abbrechen</nk-btn>
<nk-btn variant="danger" small>Löschen</nk-btn>

Attribute

AttributTypStandardBeschreibung
variantprimary | secondary | danger | danger-solid | topbar | share–Optische Variante. topbar und share rendern .nk-topbar-btn für die Topbar.
smallboolean–Kompaktes Padding und 12,5px Text.
disabledboolean–Deaktiviert; Klicks werden verschluckt.
typebutton | submit | resetbuttonBei submit/reset wird das umgebende <form> abgeschickt bzw. zurückgesetzt.
hrefURL–Rendert einen Link statt eines Buttons.

Slots

SlotBeschreibung
(default)Beschriftung und optionales <svg>-Icon.

Events

EventdetailBeschreibung
click(native, composed)Der native Klick bubbelt aus dem Shadow Root.
Auf kleinem Schirm:Unverändert. Der Button wächst mit seiner Beschriftung; in dichten Leisten small setzen.
Ersetzt.nk-btn.primary.secondary.danger.danger-solid.small.nk-topbar-btn.nk-share-btn

<nk-input> Eingabefeld

Ein natives <input> im Shadow Root, per ElementInternals ins umgebende Formular eingebunden: FormData, Reset und required-Validierung funktionieren wie beim nackten Input.

Welle 1
<nk-input name="name" value="Ada Lovelace" placeholder="Anzeigename"></nk-input>

Attribute

AttributTypStandardBeschreibung
valuestring–Aktueller Wert; zugleich der Reset-Wert.
typetext | email | password | number | date | …textWird an das native Input durchgereicht.
placeholderstring–Platzhaltertext.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
requiredboolean–Pflichtfeld; die Validität wird auf den Host gespiegelt.
readonlyboolean–Nur lesen.
wideboolean–Volle Breite (.wide).

Slots

keine

Events

EventdetailBeschreibung
nk-change{ value, name }Beim Übernehmen (Blur/Enter), wie das native change-Event.
nk-input{ value, name }Bei jedem Tastendruck.

Properties: value name disabled required form validity

Methoden: focus() blur() select() checkValidity() reportValidity()

Auf kleinem Schirm:Mindestbreite 210px; wide füllt die Zeile.
Ersetzt.nk-input.wide

<nk-textarea> Textbereich

Mehrzeiliges Geschwister von nk-input. Startwert ist das value-Attribut oder der Textinhalt des Elements.

Welle 1
<nk-textarea name="bio" rows="3" placeholder="Ein Satz über dich"></nk-textarea>

Attribute

AttributTypStandardBeschreibung
valuestring–Aktueller Wert.
placeholderstring–Platzhaltertext.
rowsnumber–Sichtbare Zeilen.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
requiredboolean–Pflichtfeld.
wideboolean–Volle Breite.

Slots

SlotBeschreibung
(default)Starttext (wenn kein value gesetzt ist).

Events

EventdetailBeschreibung
nk-change{ value, name }Beim Übernehmen.
nk-input{ value, name }Bei jedem Tastendruck.
Auf kleinem Schirm:Nur vertikal veränderbar; wide füllt die Zeile.
Ersetzt.nk-textarea.wide

<nk-select> Auswahlfeld

Light-DOM-<option>- und <optgroup>-Kinder werden in das Shadow-<select> kopiert und bleiben synchron, wenn ein Framework sie austauscht. Der leere String ist ein gültiger Wert; ein value ohne passende Option lässt die Auswahl unangetastet.

Welle 1
<nk-select name="role" value="editor">
  <option value="viewer">Betrachter</option>
  <option value="editor">Bearbeiter</option>
  <option value="admin">Admin</option>
</nk-select>

Attribute

AttributTypStandardBeschreibung
valuestring–Ausgewählter Wert.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
requiredboolean–Pflichtfeld.
compactboolean–120px Mindestbreite (.compact), z. B. in einer Mitgliederzeile.

Slots

SlotBeschreibung
(default)<option>-/<optgroup>-Kinder – nur direkte Kinder.

Events

EventdetailBeschreibung
nk-change{ value, name }Bei Auswahl.

Properties: value selectedIndex options

Methoden: refresh()

Auf kleinem Schirm:Nutzt den nativen Picker der Plattform (color-scheme folgt dem Theme).
Ersetzt.nk-select.compact

<nk-switch> Schalter

Rendert button.nk-switch[role=switch]; das Stylesheet steuert den Knopf über aria-checked, das Element übernimmt das Umschalten. Sendet value (Standard on) wenn eingeschaltet, sonst nichts – wie eine Checkbox.

Welle 1
<nk-switch name="notify" checked label="E-Mail-Benachrichtigungen"></nk-switch>

Attribute

AttributTypStandardBeschreibung
checkedboolean–Ein/Aus-Zustand.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
valuestringonGesendeter Wert, wenn eingeschaltet.
labelstring–Barrierefreier Name (aria-label).

Slots

keine

Events

EventdetailBeschreibung
nk-change{ checked, value, name }Beim Umschalten.

Methoden: toggle()

Auf kleinem Schirm:34×20px – unter dem 44px-Touch-Ziel. In einer Label-Zeile (nk-field) wächst die Trefferfläche.
Ersetzt.nk-switch

<nk-check> Checkbox

Ein label.nk-check mit selbst gezeichneter Checkbox; der Text wird geslottet, ein Klick darauf schaltet um.

Welle 1
Wöchentliche Zusammenfassung Nur Erwähnungen
<nk-check name="digest" value="weekly" checked>Wöchentliche Zusammenfassung</nk-check>
<nk-check name="digest" value="mentions">Nur Erwähnungen</nk-check>

Attribute

AttributTypStandardBeschreibung
checkedboolean–Angehakt.
indeterminateboolean–Teilzustand (beim nächsten Klick aufgehoben).
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
valuestringonGesendeter Wert.
requiredboolean–Muss zum Absenden angehakt sein.

Slots

SlotBeschreibung
(default)Beschriftung.

Events

EventdetailBeschreibung
nk-change{ checked, value, name }Beim Umschalten.
Auf kleinem Schirm:Zeilenhöhe ~24px; die ganze Beschriftung ist Trefferfläche.
Ersetzt.nk-check

<nk-radio> Radio

Gleiche Optik wie nk-check mit rundem Mark. Radios mit gleichem name im selben Tree und Formular bilden eine Gruppe – auch über Shadow-Grenzen, was native Radios nicht können. Ein Tab-Stop pro Gruppe; Pfeiltasten wandern, springen um und überspringen deaktivierte. Ein nk-radio-group gibt es bewusst nicht.

Welle 1
Knapp Ausgewogen Ausführlich
<nk-radio name="style" value="concise">Knapp</nk-radio>
<nk-radio name="style" value="balanced" checked>Ausgewogen</nk-radio>
<nk-radio name="style" value="detailed">Ausführlich</nk-radio>

Attribute

AttributTypStandardBeschreibung
checkedboolean–Ausgewählt; das letzte checked im Markup gewinnt.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
valuestring–Gesendeter Wert.
requiredboolean–Eines der Gruppe muss gewählt sein.

Slots

SlotBeschreibung
(default)Beschriftung.

Events

EventdetailBeschreibung
nk-change{ checked, value, name }Bei Auswahl, auch per Pfeiltaste.
Auf kleinem Schirm:Wie nk-check.
Ersetzt.nk-check

<nk-slider> Schieberegler

Ein Range-Input mit accent-color aus den Tokens, optional mit Wertanzeige darunter.

Welle 1
<nk-slider name="size" min="12" max="18" value="14" unit="px" show-value></nk-slider>

Attribute

AttributTypStandardBeschreibung
valuenumber–Aktueller Wert.
minnumber–Minimum.
maxnumber–Maximum.
stepnumber–Schrittweite.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
show-valueboolean–Zeigt den Wert unter dem Regler.
unitstring–Suffix für die Anzeige (z. B. px).

Slots

keine

Events

EventdetailBeschreibung
nk-change{ value, name }Beim Loslassen.
nk-input{ value, name }Während des Ziehens.
Auf kleinem Schirm:210px breit; der native Griff ist plattformseitig touch-tauglich.
Ersetzt.nk-slider.nk-slider-value

<nk-field> Feldzeile

Die Einstellungszeile: Label und Beschreibung links, Control rechts. Ins Default-Slot gehört ein beliebiges Control – nk-input, nk-switch, nk-select.

Welle 1
<nk-field label="Anzeigename" desc="Erscheint neben deinen Kommentaren.">
  <nk-input value="Ada Lovelace"></nk-input>
</nk-field>
<nk-field label="E-Mail-Benachrichtigungen">
  <nk-switch checked></nk-switch>
</nk-field>

Attribute

AttributTypStandardBeschreibung
labelstring–Beschriftung.
descstring–Erläuterung.

Slots

SlotBeschreibung
(default)Das Control.
labelFormatierte Beschriftung (statt Attribut).
descFormatierte Erläuterung.

Events

keine

Auf kleinem Schirm:Bleibt eine Zeile; lange Beschreibungen brechen unter dem Label um.
Ersetzt.nk-field.f-label.f-desc.f-control

Inhalts-Elemente

Welle 1

<nk-tag> Tag

Semantischer Status-Tag. Die Farb-Modifikator-Klasse wird zum color-Attribut; jedes Paar ist pro Theme abgestimmt.

Welle 1
In Arbeit Erledigt Geplant Design
<nk-tag color="blue">In Arbeit</nk-tag> <nk-tag color="green">Erledigt</nk-tag> <nk-tag color="orange">Geplant</nk-tag> <nk-tag color="purple">Design</nk-tag>

Attribute

AttributTypStandardBeschreibung
colorblue | green | orange | purple–Farbpaar.

Slots

SlotBeschreibung
(default)Tag-Text.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-tag.blue.green.orange.purple

<nk-progress> Fortschritt

Ein 60px-Balken mit optionalem Label. value/max setzen die Füllung; der Balken trägt role="progressbar".

Welle 1
<nk-progress value="72" label="72%"></nk-progress>

Attribute

AttributTypStandardBeschreibung
valuenumber0Aktueller Wert.
maxnumber100Maximum.
labelstring–Text hinter dem Balken.

Slots

keine

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-progress.nk-progress-label

<nk-callout> Callout

Ein Gedanke, der nicht untergehen darf. Das Icon kommt aus dem icon-Attribut oder einem slot="icon"-Knoten – der Knoten selbst, nie verpackt.

Welle 1
Core idea: Ein Callout trägt einen Gedanken, der nicht untergehen darf.
<nk-callout icon="💡"><b>Core idea:</b> Ein Callout trägt einen Gedanken, der nicht untergehen darf.</nk-callout>

Attribute

AttributTypStandardBeschreibung
iconstring💡Emoji- oder Text-Icon.

Slots

SlotBeschreibung
(default)Inhalt.
iconIcon-Knoten (z. B. <span slot="icon">📌</span>).

Events

keine

Auf kleinem Schirm:Unverändert; bricht mit dem Text um.
Ersetzt.nk-callout.c-icon

<nk-divider> Trennlinie

Eine Haarlinie als <hr> mit Blockabstand.

Welle 1
<nk-divider></nk-divider>

Attribute

keine

Slots

keine

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-divider

<nk-heading> Überschrift

Eine Abschnittsüberschrift. level wählt das echte Heading-Element (h1–h4), damit die Dokumentstruktur stimmt.

Welle 1
Abschnittsüberschrift
<nk-heading>Abschnittsüberschrift</nk-heading>

Attribute

AttributTypStandardBeschreibung
level1 | 2 | 3 | 42Überschriften-Ebene.

Slots

SlotBeschreibung
(default)Text.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-heading

<nk-toggle> Toggle-Block

Ein <details>-Block. Die Summary wird im Element gerendert (ihr Marker ist ein Pseudo-Element und auf geslottetem Inhalt nicht stylbar); der Inhalt wird geslottet.

Welle 1
Hier steht der eingeklappte Inhalt.
<nk-toggle label="Details" open>Hier steht der eingeklappte Inhalt.</nk-toggle>

Attribute

AttributTypStandardBeschreibung
labelstring–Summary-Text.
openboolean–Aufgeklappt, in beide Richtungen gespiegelt.

Slots

SlotBeschreibung
(default)Eingeklappter Inhalt.
labelFormatierte Summary.

Events

EventdetailBeschreibung
nk-toggle{ open }Beim Auf-/Zuklappen.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-toggle.toggle-body

<nk-todo> To-do

Checkbox-Zeile, durchgestrichen wenn erledigt. Formular-fähig wie nk-check.

Welle 1
Doku schreiben Ausliefern
<nk-todo checked>Doku schreiben</nk-todo>
<nk-todo>Ausliefern</nk-todo>

Attribute

AttributTypStandardBeschreibung
checkedboolean–Erledigt.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
valuestringonGesendeter Wert.

Slots

SlotBeschreibung
(default)Aufgabentext.

Events

EventdetailBeschreibung
nk-change{ checked, value, name }Beim Umschalten.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-todo

<nk-kbd> Tastenkappe

Eine Tastaturtaste, z. B. in Shortcut-Hinweisen.

Welle 1
⌘ K
<nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>

Attribute

keine

Slots

SlotBeschreibung
(default)Tastenbeschriftung.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-kbd

<nk-code> Code-Block

Vorformatierter Block mit Sprach-Badge. Whitespace bleibt wie geschrieben; < als &lt; maskieren. Mit highlight werden HTML-Tags und -Attribute eingefärbt.

Welle 1
<nk-btn variant="primary">Speichern</nk-btn>
<nk-code lang="html" highlight>&lt;nk-btn variant="primary"&gt;Speichern&lt;/nk-btn&gt;</nk-code>

Attribute

AttributTypStandardBeschreibung
langstring–Sprach-Badge oben rechts.
highlightboolean–HTML-Tags/-Attribute einfärben.

Slots

SlotBeschreibung
(default)Der Code, als Text.

Events

keine

Auf kleinem Schirm:Scrollt horizontal statt umzubrechen.
Ersetzt.nk-code.lang.tag.attr

<nk-quote> Zitat

Ein Blockzitat mit optionaler Quellenzeile.

Welle 1
Die beste Oberfläche ist die, die aus dem Weg geht.
<nk-quote cite="Unbekannt">Die beste Oberfläche ist die, die aus dem Weg geht.</nk-quote>

Attribute

AttributTypStandardBeschreibung
citestring–Quellenangabe.

Slots

SlotBeschreibung
(default)Zitattext.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-quote.q-cite

App-Gerüst & Navigation

Welle 2

<nk-app> App-Shell

Das äußerste Element einer Workspace-App: eine flex-Zeile über die volle Höhe mit dem Sidebar-Slot links und main.nk-main rechts. Alles im Default-Slot – nk-topbar, nk-page – wird Flex-Kind der Hauptspalte.

Welle 2
<nk-app>
  <nk-sidebar slot="sidebar">
    <nk-workspace-switcher slot="workspace" name="MonaHilft"></nk-workspace-switcher>
    <nk-tree>
      <nk-tree-item icon="🔍">Suche<span slot="end" class="nk-kbd-hint"><nk-kbd>⌘</nk-kbd><nk-kbd>K</nk-kbd></span></nk-tree-item>
      <nk-tree-item icon="🏠" active>Start</nk-tree-item>
      <nk-tree-item icon="📥">Eingang</nk-tree-item>
    </nk-tree>
    <nk-tree-item slot="footer" icon="⚙️">Einstellungen</nk-tree-item>
  </nk-sidebar>
  <nk-topbar>
    <nk-breadcrumb><span>📊 Projektübersicht</span></nk-breadcrumb>
    <nk-btn slot="actions" variant="share">Teilen</nk-btn>
    <nk-theme-toggle slot="actions"></nk-theme-toggle>
  </nk-topbar>
  <div class="nk-page-scroll"><div class="nk-page" style="padding-top:16px">
    <h1 class="nk-page-title" style="font-size:28px">NotionKit MVP</h1>
    <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
  </div></div>
</nk-app>

Attribute

keine

Slots

SlotBeschreibung
sidebarEine nk-sidebar.
(default)Topbar, Seite – die Hauptspalte.

Events

keine

Auf kleinem Schirm:Unter 860px ist die Sidebar verborgen; als Schublade öffnen mit sidebar.open = true.
Ersetzt.nk-app.nk-main

<nk-sidebar> Sidebar

Die linke Leiste: Workspace-Slot oben, ein scrollender Default-Slot für den Baum, ein fixierter Footer-Slot. Footer-Einträge bekommen automatisch compact (26px-Zeilen). Der Host ist display: contents, das aside also direktes Flex-Kind der App – wie im Klassen-Markup.

Welle 2
<div style="display:flex;height:100%"><nk-sidebar>
  <nk-workspace-switcher slot="workspace" name="MonaHilft"></nk-workspace-switcher>
  <nk-tree>
    <nk-tree-item icon="🏠" active>Start</nk-tree-item>
    <nk-tree-item icon="📥">Eingang</nk-tree-item>
  </nk-tree>
  <nk-tree-item slot="footer" icon="⚙️">Einstellungen</nk-tree-item>
  <nk-tree-item slot="footer" icon="🗑️">Papierkorb</nk-tree-item>
</nk-sidebar></div>

Attribute

AttributTypStandardBeschreibung
openboolean–Schubladen-Zustand auf kleinen Schirmen (ohne Wirkung am Desktop).

Slots

SlotBeschreibung
workspacenk-workspace-switcher.
(default)Der Baum (scrollt).
footerFixierte Zeilen unten (Einstellungen, Papierkorb).

Events

EventdetailBeschreibung
nk-toggle{ open }Schublade geöffnet/geschlossen.

Methoden: show() close() toggle()

Auf kleinem Schirm:Unter 860px verborgen. open zeigt sie als Off-Canvas-Schublade mit Scrim; Escape und der Scrim schließen sie.
Ersetzt.nk-sidebar.nk-sidebar-scroll.nk-sidebar-footer

<nk-workspace-switcher> Workspace-Umschalter

Die Zeile ganz oben in der Sidebar. Ein Klick schaltet open und zeigt den Inhalt des menu-Slots darunter (ein nk-menu ab Welle 4); Klick außerhalb und Escape schließen.

Welle 2
<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:260px"><nk-workspace-switcher name="MonaHilft"></nk-workspace-switcher></div>

Attribute

AttributTypStandardBeschreibung
namestring–Workspace-Name.
avatarstring–Avatar-Text (Standard: erster Buchstabe des Namens).
openboolean–Menü sichtbar.

Slots

SlotBeschreibung
avatarEigener Avatar-Knoten.
menuDer Popover-Inhalt.

Events

EventdetailBeschreibung
nk-toggle{ open }Menü geöffnet/geschlossen.
nk-select(from the menu)Bubbelt aus einem Menüeintrag hoch; das Menü schließt.

Methoden: show() close() toggle()

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-workspace.avatar.chev

<nk-section-label> Abschnittsbeschriftung

Kleine Überschrift zwischen Baum-Abschnitten. Mit addable erscheint beim Hovern ein ＋, das nk-action feuert.

Welle 2
FavoritenProjektübersicht
<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:0 8px 6px"><nk-section-label addable>Favoriten</nk-section-label><nk-tree-item icon="📊">Projektübersicht</nk-tree-item></div>

Attribute

AttributTypStandardBeschreibung
addableboolean–Zeigt das ＋ beim Hovern.
labelstring–Text (alternativ zum Slot).

Slots

SlotBeschreibung
(default)Beschriftung.

Events

EventdetailBeschreibung
nk-action{ action: 'add' }＋ geklickt.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-section-label.plus

<nk-tree> Baum

Container für nk-tree-items: hält genau einen Eintrag active (hört nk-select in jeder Tiefe), gibt dem Baum einen Tab-Stop mit Pfeiltasten-Navigation (↑↓ bewegen, → klappt auf oder steigt ein, ← klappt zu oder steigt aus, Home/End) und rendert Einträge aus tree.data. tree.value ist nur lesbar – programmatisch wählen mit item.select() oder dem active-Attribut. Abschnittsbeschriftungen dürfen zwischen den Einträgen stehen; ihr ＋ feuert nk-action { action: 'add' } ohne Wert.

Welle 2
Favoriten Projektübersicht NotionKit MVP Voice-Office-Hub Wissensbasis Onboarding Designsystem 
<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px"><nk-tree>
  <nk-section-label addable>Favoriten</nk-section-label>
  <nk-tree-item icon="📊" open>Projektübersicht
    <nk-tree-item icon="🚀" active>NotionKit MVP</nk-tree-item>
    <nk-tree-item icon="🎙️">Voice-Office-Hub</nk-tree-item>
  </nk-tree-item>
  <nk-tree-item icon="🧠">Wissensbasis
    <nk-tree-item icon="📄">Onboarding</nk-tree-item>
  </nk-tree-item>
  <nk-tree-item icon="🎨">Designsystem</nk-tree-item>
</nk-tree></div>

Attribute

AttributTypStandardBeschreibung
manualboolean–active nicht automatisch setzen.

Slots

SlotBeschreibung
(default)nk-tree-item- und nk-section-label-Kinder.

Events

EventdetailBeschreibung
nk-select{ value, label, href, item }Bubbelt vom gewählten Eintrag.
nk-toggle{ open, value }Ein Ast auf-/zugeklappt.
nk-action{ action, value }Hover-Aktion eines Eintrags.

Properties: data activeItem value

Auf kleinem Schirm:Zeilen sind 28px; in einer Touch-Schublade die Trefferfläche selbst vergrößern.
Ersetzt

<nk-tree-item> Baum-Eintrag

Eine Zeile des Seitenbaums – samt Kinder-Box. Textinhalt ist das Label, verschachtelte nk-tree-items sind die Kinder (nur dann erscheint der Pfeil), slot="icon" und slot="end" landen dort. Hover-Aktionen ＋/⋯ melden sich über nk-action; ein Klick feuert nk-select (abbrechbar). Außerhalb eines nk-tree (Sidebar-Footer) setzt sich ein Eintrag beim Klick selbst active, sofern das Event nicht abgebrochen wird.

Welle 2
Suche⌘K Projektübersicht Designsystem 
<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:244px;padding:6px 8px">
  <nk-tree-item icon="🔍" value="search">Suche<span slot="end" class="nk-kbd-hint"><nk-kbd>⌘</nk-kbd><nk-kbd>K</nk-kbd></span></nk-tree-item>
  <nk-tree-item icon="📊" active>Projektübersicht</nk-tree-item>
  <nk-tree-item icon="🎨">Designsystem</nk-tree-item>
</div>

Attribute

AttributTypStandardBeschreibung
iconstring–Emoji-/Text-Icon (oder slot="icon").
labelstring–Label (alternativ zum Textinhalt).
valuestring–Wert in Events (Standard: Label).
hrefURL–Navigiert bei Auswahl.
activeboolean–Aktueller Eintrag.
openboolean–Kinder aufgeklappt.
compactboolean–26px-Zeile (Footer, Settings-Nav).
no-actionsboolean–Hover-Aktionen ＋/⋯ ausblenden.

Slots

SlotBeschreibung
(default)Label-Text und verschachtelte nk-tree-items.
iconIcon-Knoten.
endInhalt am Zeilenende, z. B. <span slot="end" class="nk-kbd-hint"> mit nk-kbds (blendet die Aktionen aus).

Events

EventdetailBeschreibung
nk-select{ value, label, href, item }Zeile geklickt / Enter. preventDefault() verhindert das Aktivieren.
nk-toggle{ open, value }Pfeil geklickt.
nk-action{ action: 'add' | 'more', value }Hover-Aktion geklickt.

Properties: label value active open hasChildren

Methoden: select() toggle() focus()

Auf kleinem Schirm:28px-Zeilen (26px mit compact) – unter dem 44px-Touch-Ziel; der Baum erzwingt keine Höhe.
Ersetzt.nk-tree-item.icon.label.actions.active.compact.nk-tree-children.collapsed.nk-toggle-arrow.open.nk-kbd-hint

<nk-topbar> Topbar

Die 45px-Leiste über der Seite: Breadcrumb im Default-Slot, Buttons im actions-Slot (rechtsbündig). Dort nk-btn variant="topbar" / "share" und nk-theme-toggle verwenden.

Welle 2
📊 Projektübersicht🚀 NotionKit MVP Zuletzt bearbeitet vor 2 Min. Teilen ⭐ 
<div style="border:1px solid var(--nk-border);border-radius:8px;display:flex;flex-direction:column"><nk-topbar>
  <nk-breadcrumb><span>📊 Projektübersicht</span><span>🚀 NotionKit MVP</span></nk-breadcrumb>
  <span slot="actions" class="nk-topbar-btn" style="color:var(--nk-text-tertiary);font-size:12.5px">Zuletzt bearbeitet vor 2 Min.</span>
  <nk-btn slot="actions" variant="share">Teilen</nk-btn>
  <nk-btn slot="actions" variant="topbar">⭐</nk-btn>
  <nk-theme-toggle slot="actions"></nk-theme-toggle>
</nk-topbar></div>

Attribute

keine

Slots

SlotBeschreibung
(default)Breadcrumb / Titel.
actionsButtons rechts.

Events

keine

Auf kleinem Schirm:Unverändert; lange Breadcrumbs werden gekürzt.
Ersetzt.nk-topbar.nk-topbar-actions.nk-topbar-btn.nk-share-btn

<nk-breadcrumb> Breadcrumb

Als Kinder einfache <span> oder <a>; sie werden mit Trennern in die Leiste geklont, das letzte (oder das Kind mit current-Attribut) ist das aktuelle. Textänderungen sowie neue oder entfernte Kinder werden automatisch übernommen (refresh() nur für das, was der Observer nicht sieht). Ein Klick feuert nk-select und reicht den Klick an das Original weiter – Links navigieren genau einmal.

Welle 2
📊 Projektübersicht🚀 NotionKit MVP
<nk-breadcrumb><a href="#">📊 Projektübersicht</a><span>🚀 NotionKit MVP</span></nk-breadcrumb>

Attribute

AttributTypStandardBeschreibung
separatorstring/Trennzeichen.

Slots

SlotBeschreibung
(default)Crumb-Kinder (nur direkte Kinder, ohne slot-Attribut).

Events

EventdetailBeschreibung
nk-select{ index, value, label, href, current }Crumb geklickt; preventDefault() unterbindet den weitergereichten Klick.

Methoden: refresh()

Auf kleinem Schirm:Bleibt einzeilig; Einträge kurz halten.
Ersetzt.nk-breadcrumb.crumb.sep.current

<nk-theme-toggle> Theme-Umschalter

Der ☀️/🌙-Button. Schaltet data-theme auf <html>, merkt sich die Wahl in localStorage, wendet beim ersten Connect eine gespeicherte oder die System-Präferenz an, wenn <html> noch kein Theme trägt, und akzeptiert postMessage({ nkTheme }) einer Elternseite. apply(theme) tut alles, was ein Klick tut: setzen, merken, nk-change feuern.

Welle 2
<nk-theme-toggle></nk-theme-toggle>

Attribute

AttributTypStandardBeschreibung
storage-keystringnk-themelocalStorage-Schlüssel.
titlestring–Tooltip.

Slots

keine

Events

EventdetailBeschreibung
nk-change{ value: 'light' | 'dark' }Theme gesetzt.

Properties: value

Methoden: apply(theme)

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-theme-toggle

Seiten-Shell & Bausteine

Welle 3

<nk-page> Seite

Die Dokumentspalte: scrollender Wrapper, optionales Cover, die 760px-Seite mit 64px Seitenabstand und das Seiten-Icon (hier gerendert, weil sein Slot-Zwilling am Elternelement hängt). narrow lässt den Scroll-Wrapper weg, wenn die Seite selbst das Dokument ist.

Welle 3
<div style="display:flex;flex-direction:column;height:100%"><nk-page icon="🚀" cover>
  <nk-page-title>NotionKit MVP</nk-page-title>
  <nk-page-actions><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <nk-tag color="purple">Designsystem</nk-tag></span></nk-page-actions>
  <p class="lead">Eine ruhige, dokumentzentrierte Workspace-App – nur aus Elementen gebaut.</p>
</nk-page></div>

Attribute

AttributTypStandardBeschreibung
iconstring–Seiten-Emoji; Klick feuert nk-action.
coverboolean–Token-Gradient-Cover zeigen.
narrowboolean–Ohne Scroll-Wrapper (Landing-/Doku-Seite).

Slots

SlotBeschreibung
(default)Titel, Meta, Blöcke – ein <p class="lead"> wird zum Vorspann.
coverEin nk-page-cover (statt des cover-Attributs).
iconEigener Icon-Knoten.

Events

EventdetailBeschreibung
nk-action{ action: 'icon', value }Icon geklickt (Emoji-Picker öffnen).
Auf kleinem Schirm:Seitenabstand sinkt unter 860px auf 24px.
Ersetzt.nk-page-scroll.nk-page.nk-page-icon.nk-cover.lead

<nk-page-cover> Seiten-Cover

Das 200px-Cover-Band. Ohne src der Token-Gradient, mit src ein Bild, ausgefüllt und zentriert.

Welle 3
<nk-page-cover></nk-page-cover>

Attribute

AttributTypStandardBeschreibung
srcURL–Cover-Bild.

Slots

keine

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-cover

<nk-page-title> Seitentitel

Die 40px-Überschrift. Mit editable ein Klartext-Feld: Enter übernimmt, Blur feuert nk-change.

Welle 3
NotionKit MVP
<nk-page-title editable>NotionKit MVP</nk-page-title>

Attribute

AttributTypStandardBeschreibung
editableboolean–Direkt bearbeitbar.
placeholderstring–Wird angezeigt, wenn leer (editable).
valuestring–Titeltext (alternativ zum Inhalt).

Slots

SlotBeschreibung
(default)Titeltext.

Events

EventdetailBeschreibung
nk-change{ value }Bearbeiteter Titel übernommen.

Properties: value

Auf kleinem Schirm:Unverändert; lange Titel brechen um.
Ersetzt.nk-page-title

<nk-page-actions> Seiten-Metazeile

Die ruhige Zeile unter dem Titel: Besitzer, Datum, Tags – beliebiger Inline-Inhalt mit 16px Abstand.

Welle 3
👤 Marcel Karas📅 Erstellt am 12. Mai 2026🏷️ Designsystem
<nk-page-actions><span>👤 Marcel Karas</span><span>📅 Erstellt am 12. Mai 2026</span><span>🏷️ <nk-tag color="purple">Designsystem</nk-tag></span></nk-page-actions>

Attribute

keine

Slots

SlotBeschreibung
(default)Meta-Einträge.

Events

keine

Auf kleinem Schirm:Bricht natürlich um.
Ersetzt.nk-page-meta

<nk-block-host> Block-Hülle

Die optische Hülle für Editor-Inhalt: Hover-Fläche, Fokusring, Drop-Target-Linie, optionaler Drag-Griff. Verhaltensneutral – den Editor ins Light DOM mounten; nk-editor (v1.1) übernimmt das für TipTap.

Welle 3

Hier steht Block-Inhalt – klicken zum Fokussieren.

<nk-block-host handle><p style="margin:0" contenteditable="true">Hier steht Block-Inhalt – klicken zum Fokussieren.</p></nk-block-host>

Attribute

AttributTypStandardBeschreibung
handleboolean–Drag-Griff ⠿ rendern (bei Hover sichtbar).
drop-targetboolean–Drop-Indikator-Linie über dem Block.

Slots

SlotBeschreibung
(default)Block-Inhalt / Editor-Wurzel.

Events

keine

Auf kleinem Schirm:Der Griff sitzt 26px links der Spalte und ist ohne Platz verborgen.
Ersetzt.nk-block-host.nk-block-handle.nk-drop-target

<nk-banner> Banner

Eine getönte Hinweiszeile. Der Farb-Modifikator wird variant; ein Aktions-Link kommt in slot="action" und sitzt am rechten Rand.

Welle 3
ℹ️ Diese Seite ist eine Komponenten-Vorschau – jedes Element folgt denselben Design-Tokens.Palette öffnen ⚠️ Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.Ansehen ✓ Alle Änderungen wurden synchronisiert.
<nk-banner variant="info">ℹ️ <span>Diese Seite ist eine <b>Komponenten-Vorschau</b> – jedes Element folgt denselben Design-Tokens.</span><span slot="action">Palette öffnen</span></nk-banner>
<nk-banner variant="warning">⚠️ <span>Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.</span><span slot="action">Ansehen</span></nk-banner>
<nk-banner variant="success">✓ <span>Alle Änderungen wurden synchronisiert.</span></nk-banner>

Attribute

AttributTypStandardBeschreibung
variantinfo | success | warning–Farbpaar.

Slots

SlotBeschreibung
(default)Icon und Text.
actionAktions-Link (unterstrichen, rechts).

Events

keine

Auf kleinem Schirm:Bricht um; die Aktion rutscht bei Bedarf unter den Text.
Ersetzt.nk-banner.info.success.warning.b-action

<nk-empty> Leerzustand

Gestrichelte Box mit Icon, Titel, Beschreibung und der Aktion, die du hineinslottest.

Welle 3
＋ Neuer Eintrag
<nk-empty icon="🗂️" title="Noch keine Einträge" desc="Lege den ersten Eintrag an oder importiere Daten."><nk-btn variant="primary" small>＋ Neuer Eintrag</nk-btn></nk-empty>

Attribute

AttributTypStandardBeschreibung
iconstring–Emoji.
titlestring–Titel.
descstring–Beschreibung.

Slots

SlotBeschreibung
(default)Handlungsaufforderung.
iconFormatiertes Icon.
titleFormatierter Titel.
descFormatierte Beschreibung.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-empty.e-icon.e-title.e-desc

<nk-skeleton> Skelett

Schimmernde Platzhalterzeilen. lines rendert mehrere; widths gibt jeder ihre Breite.

Welle 3
<nk-skeleton height="18" width="60%"></nk-skeleton>
<nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>

Attribute

AttributTypStandardBeschreibung
linesnumber1Anzahl Zeilen.
heightpx | CSS length13Zeilenhöhe.
widthCSS length–Breite für jede Zeile.
widthslist–Kommagetrennte Breite je Zeile.

Slots

keine

Events

keine

Auf kleinem Schirm:Unverändert; respektiert Reduced Motion.
Ersetzt.nk-skeleton

<nk-synced> Synchronisierter Block

Inhalt, der an mehreren Orten erscheint, gerahmt mit Badge.

Welle 3
Unsere Mission: Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam.
<nk-synced badge="⟳ 3 Orte"><div style="font-size:14px;line-height:1.55"><b>Unsere Mission:</b> Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam.</div></nk-synced>

Attribute

AttributTypStandardBeschreibung
badgestring⟳ syncedBadge-Text.

Slots

SlotBeschreibung
(default)Inhalt.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-synced.synced-badge

<nk-tabs> Tabs

Eine Tab-Leiste mit Panels. nk-tab-Kinder sind die Tabs; Elemente mit slot="panel" und passendem data-tab die Panels – die Tabs verbergen per hidden alle bis auf das aktive. Pfeiltasten wechseln.

Welle 3
📝 Notizen ✅ Aufgaben 📎 Dateien
Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.
Aufgaben zu diesem Projekt, verknüpft mit der Datenbank.
Angehängte Dateien und Exporte.
<nk-tabs value="notes">
  <nk-tab value="notes">📝 Notizen</nk-tab>
  <nk-tab value="tasks">✅ Aufgaben</nk-tab>
  <nk-tab value="files">📎 Dateien</nk-tab>
  <div slot="panel" data-tab="notes" class="nk-tab-panel">Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.</div>
  <div slot="panel" data-tab="tasks" class="nk-tab-panel">Aufgaben zu diesem Projekt, verknüpft mit der Datenbank.</div>
  <div slot="panel" data-tab="files" class="nk-tab-panel">Angehängte Dateien und Exporte.</div>
</nk-tabs>

Attribute

AttributTypStandardBeschreibung
valuestring–Aktiver Tab-Wert (Standard: Tab mit active, sonst der erste).

Slots

SlotBeschreibung
(default)nk-tab-Kinder.
panelPanels mit data-tab.

Events

EventdetailBeschreibung
nk-change{ value }Aktiver Tab gewechselt.
nk-select{ value, label }Vom geklickten Tab.

Properties: value

Auf kleinem Schirm:Leiste bleibt einzeilig; Labels kurz halten.
Ersetzt.nk-tabs.nk-tab.active.nk-tab-panel

<nk-tab> Tab

Ein Tab von nk-tabs. Alleinstehend schaltet er sein eigenes active.

Welle 3
📝 Notizen✅ Aufgaben
<nk-tabs><nk-tab value="a" active>📝 Notizen</nk-tab><nk-tab value="b">✅ Aufgaben</nk-tab></nk-tabs>

Attribute

AttributTypStandardBeschreibung
valuestring–Wert (Standard: Text).
activeboolean–Aktiv.
disabledboolean–Nicht wählbar.

Slots

SlotBeschreibung
(default)Beschriftung.

Events

EventdetailBeschreibung
nk-select{ value, label }Geklickt / Enter.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-tab.active

<nk-segmented> Segment-Schalter

Einfache <button value>-Kinder bleiben im Light DOM (die Slot-Zwillinge des Stylesheets formen sie); das Element bewegt .active, behandelt Pfeiltasten und sendet value mit dem Formular.

Welle 3
<nk-segmented name="range" value="week"><button value="week">Woche</button><button value="month">Monat</button><button value="quarter">Quartal</button></nk-segmented>

Attribute

AttributTypStandardBeschreibung
valuestring–Gewählter Wert (Standard: Button mit .active, sonst der erste).
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.

Slots

SlotBeschreibung
(default)<button value="…">-Kinder.

Events

EventdetailBeschreibung
nk-change{ value, name }Auswahl geändert.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-segmented.active

<nk-stats> Kennzahl-Karten

nk-stats ist die Zeile; jede nk-stat zeigt Label, Wert und eine Trendzeile, gefärbt über trend.

Welle 3
<nk-stats>
  <nk-stat label="Aktive Seiten" value="128" delta="▲ 12 diese Woche" trend="up"></nk-stat>
  <nk-stat label="KI-Anfragen" value="847" delta="▲ 23 %" trend="up"></nk-stat>
  <nk-stat label="Offene Aufgaben" value="14" delta="▼ 5 seit gestern" trend="down"></nk-stat>
</nk-stats>

Attribute

AttributTypStandardBeschreibung
labelstring–(nk-stat) Label.
valuestring–(nk-stat) Große Zahl.
deltastring–(nk-stat) Trendtext.
trendup | down–(nk-stat) Färbt das Delta.

Slots

SlotBeschreibung
(default)(nk-stats) nk-stat-Kinder; (nk-stat) Slots label, value, delta für formatierten Inhalt.

Events

keine

Auf kleinem Schirm:Die Zeile bricht unter 860px um.
Ersetzt.nk-stats.nk-stat.s-label.s-value.s-delta.up.down

<nk-stat> Kennzahl-Karte

Eine Karte; siehe nk-stats für die Zeile.

Welle 3
<nk-stats><nk-stat label="Aktive Seiten" value="128" delta="▲ 12 diese Woche" trend="up"></nk-stat></nk-stats>

Attribute

AttributTypStandardBeschreibung
labelstring–Label.
valuestring–Wert.
deltastring–Trendtext.
trendup | down–Delta-Farbe.

Slots

SlotBeschreibung
labelFormatiertes Label.
valueFormatierter Wert.
deltaFormatiertes Delta (mit class="up" / "down").

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-stat

<nk-avatar-group> Avatar-Gruppe

Überlappende .mini-avatar-Kinder (Light DOM, gestylt durch die Slot-Zwillinge) plus eine „Mehr“-Blase aus dem Attribut.

Welle 3
MKSLTW5 Personen haben Zugriff
<div style="display:flex;align-items:center;gap:12px"><nk-avatar-group more="+2"><span class="mini-avatar" style="background:linear-gradient(135deg,#9065b0,#529cca)">MK</span><span class="mini-avatar" style="background:#448361">SL</span><span class="mini-avatar" style="background:#d9730d">TW</span></nk-avatar-group><span style="font-size:12.5px;color:var(--nk-text-tertiary)">5 Personen haben Zugriff</span></div>

Attribute

AttributTypStandardBeschreibung
morestring–Text der letzten Blase, z. B. +2.

Slots

SlotBeschreibung
(default)<span class="mini-avatar" style="background:…">-Kinder.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-avatar-group.mini-avatar.more

<nk-mention> Erwähnung

Inline-Chip für eine Person (mit Avatar-Slot), eine Seite oder ein Datum.

Welle 3

SLSara Lindt · 📄 Onboarding · 📅 20. Mai

<p style="margin:0;line-height:1.7"><nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention> · <nk-mention type="page">📄 Onboarding</nk-mention> · <nk-mention type="date">📅 20. Mai</nk-mention></p>

Attribute

AttributTypStandardBeschreibung
typeperson | page | date–Art der Erwähnung.

Slots

SlotBeschreibung
avatar.mini-avatar für Personen.
(default)Text.

Events

keine

Auf kleinem Schirm:Unverändert; bricht nie um.
Ersetzt.nk-mention.person.page.date.mini-avatar

<nk-template-btn> Vorlagen-Button

Button in voller Breite, linksbündig, auf Callout-Hintergrund – „Vorlage einfügen“. Feuert nk-select mit value.

Welle 3
Wochenplan einfügen Meeting-Protokoll einfügen Retro-Board einfügen
<nk-template-btn icon="📅" value="week-plan">Wochenplan einfügen</nk-template-btn>
<nk-template-btn icon="🤝" value="minutes">Meeting-Protokoll einfügen</nk-template-btn>
<nk-template-btn icon="🔁" value="retro">Retro-Board einfügen</nk-template-btn>

Attribute

AttributTypStandardBeschreibung
iconstring–Emoji vorn.
valuestring–Gemeldeter Wert (Standard: Text).
disabledboolean–Deaktiviert.

Slots

SlotBeschreibung
(default)Beschriftung.

Events

EventdetailBeschreibung
nk-select{ value, label }Geklickt.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-template-btn

<nk-model-card> Modell-Karte

Eine Radio-artige Karte. Karten mit gleichem name bilden eine Gruppe; die gewählte sendet value mit dem Formular.

Welle 3
<nk-model-card name="model" value="pro" title="Mona Pro" desc="Am besten für lange Dokumente und Recherche." selected></nk-model-card>
<nk-model-card name="model" value="fast" title="Mona Fast" desc="Schnelle Antworten, geringere Kosten."></nk-model-card>

Attribute

AttributTypStandardBeschreibung
titlestring–Namenszeile.
descstring–Beschreibung.
namestring–Name des Formularfelds (FormData-Schlüssel).
disabledboolean–Deaktiviert das Control.
valuestring–Gesendeter Wert.
selectedboolean–Ausgewählt.

Slots

SlotBeschreibung
titleFormatierte Namenszeile (z. B. mit nk-tag).
descFormatierte Beschreibung.

Events

EventdetailBeschreibung
nk-change{ value, name, checked }Ausgewählt.
nk-select{ value, label }Ausgewählt.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-model-card.selected.m-radio.m-name.m-desc

<nk-profile-row> Profilzeile

Ein 56px-Gradient-Avatar mit dem, was du daneben slottest – meist zwei Buttons.

Welle 3
Foto ändern Entfernen
<nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Foto ändern</nk-btn> <nk-btn variant="danger" small>Entfernen</nk-btn></nk-profile-row>

Attribute

AttributTypStandardBeschreibung
avatarstring–Initialen.

Slots

SlotBeschreibung
avatarEigener Avatar (z. B. ein Bild).
(default)Inhalt neben dem Avatar.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-profile-row.big-avatar

<nk-danger-zone> Gefahrenzone

Rot gerahmte Box für destruktive Einstellungen.

Welle 3
Löschen
<nk-danger-zone title="Gefahrenzone"><nk-field label="Workspace löschen" desc="Das Löschen des Workspace entfernt alle Seiten."><nk-btn variant="danger-solid" small>Löschen</nk-btn></nk-field></nk-danger-zone>

Attribute

AttributTypStandardBeschreibung
titlestring–Rote Überschrift.

Slots

SlotBeschreibung
(default)Felder und Buttons.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-danger-zone.dz-title

<nk-member-list> Mitgliederliste

Zeilen aus nk-member-row; die Liste markiert die letzte Zeile, damit ihr unterer Rand entfällt. Jede Zeile zeigt Avatar (Initialen + color), Name, Mail und ein slot="role"-Control rechts.

Welle 3
<nk-member-list>
  <nk-member-row name="Sara Lindt" mail="sara@example.com" color="#448361"><nk-select slot="role" compact value="editor"><option value="viewer">Betrachter</option><option value="editor">Bearbeiter</option><option value="admin">Admin</option></nk-select></nk-member-row>
  <nk-member-row name="Tom Weber" mail="tom@example.com" color="#d9730d"><nk-select slot="role" compact value="viewer"><option value="viewer">Betrachter</option><option value="editor">Bearbeiter</option><option value="admin">Admin</option></nk-select></nk-member-row>
</nk-member-list>

Attribute

AttributTypStandardBeschreibung
namestring–(row) Name.
mailstring–(row) Mail-Zeile.
avatarstring–(row) Initialen (Standard: aus dem Namen).
colorCSS color–(row) Avatar-Hintergrund.
lastboolean–(row) Kein unterer Rand – setzt die Liste.

Slots

SlotBeschreibung
(default)(list) Zeilen; (row) Zusatzinhalt.
role(row) Ein Control rechts, z. B. nk-select compact.
avatar(row) Eigener Avatar.

Events

keine

Auf kleinem Schirm:Unverändert; das Rollen-Select schrumpft auf 120px.
Ersetzt.nk-member-list.nk-member-row.last.m-mail.mini-avatar

<nk-member-row> Mitgliederzeile

Eine Zeile; siehe nk-member-list.

Welle 3
<nk-member-row name="Sara Lindt" mail="sara@example.com" color="#448361" last></nk-member-row>

Attribute

AttributTypStandardBeschreibung
namestring–Name.
mailstring–Mail.
avatarstring–Initialen.
colorCSS color–Avatar-Hintergrund.
lastboolean–Kein unterer Rand.

Slots

SlotBeschreibung
roleControl rechts.
avatarEigener Avatar.
(default)Zusatzinhalt.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-member-row

Overlays

Welle 4

<nk-modal> Einstellungs-Modal

Das Einstellungs-Overlay: Backdrop, ein 960×640-Dialog mit Nav- und Inhaltsspalte. Die Nav-Zeilen rendert das Modal aus label/icon/group der Panes, sodass 27px-Zeilen und die 860px-Icon-Leiste direkt aus dem Stylesheet kommen. Escape und Backdrop schließen; der Fokus wandert hinein und zurück; die Seite dahinter ist scroll-gesperrt und inert. Direkt unter <body> platzieren.

Welle 4
<nk-modal open>
  <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@monahilft.de"></nk-settings-user>
  <nk-settings-pane name="profile" group="Konto" icon="👤" label="Mein Profil" title="Mein Profil" active>
    <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Foto ändern</nk-btn></nk-profile-row>
    <nk-field label="Anzeigename" desc="Erscheint neben deinen Kommentaren."><nk-input value="Marcel Karas"></nk-input></nk-field>
    <nk-field label="E-Mail"><nk-input type="email" value="marcel@monahilft.de"></nk-input></nk-field>
  </nk-settings-pane>
  <nk-settings-pane name="appearance" group="Konto" icon="🎨" label="Darstellung" title="Darstellung">
    <nk-field label="Theme"><nk-select><option>Hell</option><option>Dunkel</option><option>System</option></nk-select></nk-field>
  </nk-settings-pane>
  <nk-settings-pane name="members" group="Workspace" icon="👥" label="Mitglieder" title="Mitglieder">
    <nk-member-list><nk-member-row name="Sara Lindt" mail="sara@example.com" color="#448361"></nk-member-row></nk-member-list>
  </nk-settings-pane>
</nk-modal>

Attribute

AttributTypStandardBeschreibung
openboolean–Sichtbar.
panestring–Name des aktiven Panes (Standard: Pane mit active, sonst das erste).

Slots

SlotBeschreibung
(default)nk-settings-pane-Kinder.
usernk-settings-user oben in der Nav.
navZusätzlicher Nav-Inhalt unter den generierten Zeilen (860px-Regeln erreichen geslottete Elemente nicht).

Events

EventdetailBeschreibung
nk-toggle{ open }Geöffnet / geschlossen.
nk-select{ value, label }Pane gewechselt.

Properties: open pane panes

Methoden: show(pane?) close() toggle()

Auf kleinem Schirm:Unter 860px wird die Nav zur 60px-Icon-Leiste; der Dialog nimmt 92vw × 86vh.
Ersetzt.nk-modal-backdrop.open.nk-modal.nk-settings-nav.nk-settings-content

<nk-settings-pane> Einstellungs-Pane

Ein Pane des Einstellungs-Modals. label, icon und group speisen die Nav des Modals; title rendert die Pane-Überschrift. Geslottete <h2>/<h3> werden ebenfalls gestylt.

Welle 4

E-Mail

<nk-settings-pane title="Benachrichtigungen" active><h3>E-Mail</h3><nk-field label="E-Mail-Benachrichtigungen"><nk-switch checked></nk-switch></nk-field></nk-settings-pane>

Attribute

AttributTypStandardBeschreibung
namestring–Kennung für pane.
labelstring–Nav-Beschriftung (ohne Label keine Nav-Zeile).
iconstring–Nav-Icon.
groupstring–Abschnittsbeschriftung über den Nav-Zeilen.
titlestring–Pane-Überschrift.
activeboolean–Sichtbar (vom Modal verwaltet).

Slots

SlotBeschreibung
(default)Felder, Überschriften, alles.

Events

keine

Auf kleinem Schirm:Inhalts-Padding sinkt unter 860px auf 24px.
Ersetzt.nk-settings-pane.active

<nk-settings-user> Einstellungs-Benutzer

Die Benutzerkarte oben in der Einstellungs-Nav.

Welle 4
<div style="background:var(--nk-bg-sidebar);border-radius:8px;max-width:230px;padding:10px 8px"><nk-settings-user name="Marcel Karas" mail="marcel@monahilft.de"></nk-settings-user></div>

Attribute

AttributTypStandardBeschreibung
namestring–Name.
mailstring–Mail.
avatarstring–Initialen (Standard: aus dem Namen).

Slots

SlotBeschreibung
avatarEigener Avatar.

Events

keine

Auf kleinem Schirm:Unter 860px bleibt nur der Avatar.
Ersetzt.nk-settings-user.avatar.u-text.name.mail

<nk-cmdk> Befehlspalette

⌘K. Befüllen mit palette.commands = [{ group, items: [{ id, icon, label, shortcut, keywords, action }] }]; es sucht unscharf über Label und Keywords, behält die Gruppenreihenfolge, bewegt die Auswahl mit ↑↓, wählt mit Enter oder Klick (nk-command plus action des Eintrags) und schließt mit Escape oder Backdrop. Der Hotkey ist mod+k, sofern nicht geändert. Direkt unter <body> platzieren.

Welle 4
<nk-cmdk open placeholder="Suchen oder Befehl eingeben …"></nk-cmdk>
<script>
  document.querySelector('nk-cmdk').commands = [
    { group: 'Seiten', items: [
      { id: 'mvp', icon: '🚀', label: 'NotionKit MVP' },
      { id: 'voh', icon: '🎙️', label: 'Voice-Office-Hub' },
      { id: 'kb', icon: '🧠', label: 'Wissensbasis' },
    ]},
    { group: 'Aktionen', items: [
      { id: 'new', icon: '＋', label: 'Neue Seite anlegen', shortcut: '⌘N' },
      { id: 'theme', icon: '🌙', label: 'Theme wechseln', shortcut: '⌘⇧L' },
      { id: 'settings', icon: '⚙️', label: 'Einstellungen öffnen', shortcut: '⌘,' },
    ]},
  ];
</script>

Attribute

AttributTypStandardBeschreibung
openboolean–Sichtbar.
hotkeystringmod+kGlobaler Shortcut, z. B. mod+k, mod+shift+p.
placeholderstring–Platzhalter des Eingabefelds.

Slots

SlotBeschreibung
footerErsetzt die Standard-Tastenhinweise.

Events

EventdetailBeschreibung
nk-command{ id, item, query }Ein Eintrag wurde gewählt; preventDefault() überspringt item.action.
nk-toggle{ open }Geöffnet / geschlossen.

Properties: commands open query

Methoden: show() close() toggle() results() pick(index?)

Auf kleinem Schirm:Unter 860px volle Breite (96vw) und näher am oberen Rand.
Ersetzt.nk-cmdk-backdrop.open.nk-cmdk.nk-cmdk-input-row.nk-cmdk-list.nk-cmdk-group.nk-cmdk-item.selected.m-icon.m-shortcut.nk-cmdk-empty.nk-cmdk-footer

<nk-menu> Menü

Ein 230px-Kontextmenü. Einträge sind nk-menu-items (type="separator" / "label" für den Rest); ↑↓ bewegen, Enter wählt, nk-select bubbelt hoch. Lebt meist in nk-pop oder im Workspace-Umschalter.

Welle 4
Seite Umbenennen Duplizieren Verschieben nach … Löschen 
<nk-menu>
  <nk-menu-item type="label">Seite</nk-menu-item>
  <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Umbenennen</nk-menu-item>
  <nk-menu-item icon="📄" shortcut="⌘D" value="duplicate">Duplizieren</nk-menu-item>
  <nk-menu-item icon="📁" value="move">Verschieben nach …</nk-menu-item>
  <nk-menu-item type="separator"></nk-menu-item>
  <nk-menu-item icon="🗑️" danger value="delete">Löschen</nk-menu-item>
</nk-menu>

Attribute

keine

Slots

SlotBeschreibung
(default)nk-menu-item-Kinder.

Events

EventdetailBeschreibung
nk-select{ value, label, item }Vom gewählten Eintrag.

Methoden: focusFirst()

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-pop.nk-menu.nk-menu-item.m-icon.m-shortcut.danger.nk-menu-sep.nk-menu-label

<nk-menu-item> Menüeintrag

Eine Zeile von nk-menu: Icon, Label, Shortcut; danger für Destruktives. type macht daraus Trenner oder Gruppenlabel.

Welle 4
Umbenennen
<nk-menu><nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Umbenennen</nk-menu-item></nk-menu>

Attribute

AttributTypStandardBeschreibung
iconstring–Icon vorn.
shortcutstring–Shortcut-Text hinten.
valuestring–Gemeldeter Wert (Standard: Text).
dangerboolean–Roter Text.
typeitem | separator | labelitemZeilenart.
disabledboolean–Nicht wählbar.

Slots

SlotBeschreibung
(default)Beschriftung.
iconIcon-Knoten.

Events

EventdetailBeschreibung
nk-select{ value, label, item }Geklickt / Enter.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-menu-item.danger.nk-menu-sep.nk-menu-label

<nk-pop> Popover

Verankert eine schwebende Fläche an einem Auslöser. Der Auslöser kommt in slot="trigger" und schaltet open; Klick außerhalb, Escape und ein nk-select von innen schließen. Inhalt wird in .nk-pop gehüllt, außer er bringt seine eigene Fläche mit (nk-menu, nk-emoji-picker) oder bare ist gesetzt.

Welle 4
Optionen ▾ UmbenennenDuplizierenLöschen 
<div style="min-height:220px"><nk-pop open>
  <nk-btn slot="trigger" variant="secondary">Optionen ▾</nk-btn>
  <nk-menu><nk-menu-item icon="✏️" value="rename">Umbenennen</nk-menu-item><nk-menu-item icon="📄" value="duplicate">Duplizieren</nk-menu-item><nk-menu-item type="separator"></nk-menu-item><nk-menu-item icon="🗑️" danger value="delete">Löschen</nk-menu-item></nk-menu>
</nk-pop></div>

Attribute

AttributTypStandardBeschreibung
openboolean–Sichtbar.
placementbottom-start | bottom-end | top-start | top-endbottom-startWo die Fläche aufgeht.
bareboolean–Kein .nk-pop-Wrapper.

Slots

SlotBeschreibung
triggerDer Button.
(default)Der schwebende Inhalt.

Events

EventdetailBeschreibung
nk-toggle{ open }Geöffnet / geschlossen.

Methoden: show() close() toggle()

Auf kleinem Schirm:Relativ zum Auslöser positioniert; Viewport-Rand im Blick behalten.
Ersetzt.nk-pop

<nk-emoji-picker> Emoji-Auswahl

Suchfeld, 8-spaltiges Raster, Kategorieleiste. Bringt einen eingebauten Satz mit (Namen für die Suche); picker.emojis = [{ char, name, cat }] ersetzt ihn. Ein Klick feuert nk-select { emoji }.

Welle 4
<nk-emoji-picker placeholder="Suche…"></nk-emoji-picker>

Attribute

AttributTypStandardBeschreibung
placeholderstring–Such-Platzhalter.
valuestring–Zuletzt gewähltes Emoji.

Slots

keine

Events

EventdetailBeschreibung
nk-select{ emoji, value }Emoji gewählt.

Properties: emojis value

Auf kleinem Schirm:296px breit; passt auf jedes Telefon.
Ersetzt.nk-pop.nk-emoji-search.nk-emoji-grid.nk-emoji-cats.active

<nk-toast> Toast

Eine invertierte Pille unten mittig. toast.show("Gespeichert") zeigt sie und blendet nach duration ms aus; open ist der Zustand.

Welle 4
<nk-toast open duration="0">Einstellungen gespeichert</nk-toast>

Attribute

AttributTypStandardBeschreibung
openboolean–Sichtbar.
durationms2200Ausblend-Verzögerung (0 = bleibt).
iconstring✓Zeichen vorn.

Slots

SlotBeschreibung
(default)Statischer Inhalt (wenn show() keine Nachricht bekommt).

Events

EventdetailBeschreibung
nk-toggle{ open }Gezeigt / verborgen.

Properties: open message

Methoden: show(message?, { duration }) close()

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-toast.show

Daten & Kollaboration

Welle 5

<nk-database> Datenbank

Der Ansichts-Umschalter. Kind-Views (nk-table-view, nk-board-view) werden Tabs; columns und rows werden in jede View gepusht. view wählt die aktive; count an einer View zeigt die Zeilenzahl als Badge. Kein Fetching: Daten reingeben, Events hören.

Welle 5
<nk-database view="table" add-view>
  <nk-table-view name="table" label="▦ Tabelle" count new-row sortable></nk-table-view>
  <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
</nk-database>
<script>{
  const db = document.currentScript.previousElementSibling;
  db.columns = [
    { key: 'name', label: 'Name', type: 'text', icon: '📄', title: true },
    { key: 'status', label: 'Status', type: 'select', icon: '◉', options: [
      { value: 'planned', label: 'Geplant', color: 'orange' }, { value: 'progress', label: 'In Arbeit', color: 'blue' }, { value: 'done', label: 'Erledigt', color: 'green' } ] },
    { key: 'owner', label: 'Verantwortlich', type: 'person', icon: '👤' },
    { key: 'due', label: 'Fällig', type: 'date', icon: '📅' },
    { key: 'progress', label: 'Fortschritt', type: 'progress', icon: '▰' },
  ];
  db.rows = [
    { id: 1, icon: '🧭', name: 'App-Shell & Sidebar', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '08.05.2026', progress: 100 },
    { id: 2, icon: '📄', name: 'Seiten-Shell & Typografie', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '10.05.2026', progress: 100 },
    { id: 3, icon: '🗃️', name: 'Datenbank-Tabellenansicht', status: 'progress', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '20.05.2026', progress: 65 },
    { id: 4, icon: '▤', name: 'Board-Ansicht & Drag-and-Drop', status: 'planned', due: '02.06.2026', progress: 0 },
  ];
}</script>

Attribute

AttributTypStandardBeschreibung
viewstring–Name der aktiven View.
add-viewboolean–Ein ＋-Tab zeigen (feuert nk-action).

Slots

SlotBeschreibung
(default)View-Elemente.

Events

EventdetailBeschreibung
nk-view-change{ view }Tab gewechselt.
nk-action{ action: 'add-view' }＋ geklickt.
nk-select / nk-change / nk-action(from the views)Bubbeln aus der aktiven View hoch.

Properties: columns rows view views

Methoden: refresh()

Auf kleinem Schirm:Tabellen und Boards scrollen horizontal; nichts bricht.
Ersetzt.nk-database.nk-db-tabs.nk-db-tab.active.badge

<nk-table-view> Tabellenansicht

Rendert columns × rows als NotionKit-Tabelle. Zellen sind polymorph (text, select, multi-select, date, person, checkbox, url, number, progress) und werden vom exportierten renderPropertyCell() als Klassen-Markup gerendert – jede Zellregel beginnt mit .nk-table, ein eigenes Zellen-Element würde nie gestylt. Kopfklicks sortieren mit sortable.

Welle 5
<nk-table-view new-row sortable></nk-table-view>
<script>{
  const db = document.currentScript.previousElementSibling;
  db.columns = [
    { key: 'name', label: 'Name', type: 'text', icon: '📄', title: true },
    { key: 'status', label: 'Status', type: 'select', icon: '◉', options: [
      { value: 'planned', label: 'Geplant', color: 'orange' }, { value: 'progress', label: 'In Arbeit', color: 'blue' }, { value: 'done', label: 'Erledigt', color: 'green' } ] },
    { key: 'owner', label: 'Verantwortlich', type: 'person', icon: '👤' },
    { key: 'due', label: 'Fällig', type: 'date', icon: '📅' },
    { key: 'progress', label: 'Fortschritt', type: 'progress', icon: '▰' },
  ];
  db.rows = [
    { id: 1, icon: '🧭', name: 'App-Shell & Sidebar', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '08.05.2026', progress: 100 },
    { id: 2, icon: '📄', name: 'Seiten-Shell & Typografie', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '10.05.2026', progress: 100 },
    { id: 3, icon: '🗃️', name: 'Datenbank-Tabellenansicht', status: 'progress', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '20.05.2026', progress: 65 },
    { id: 4, icon: '▤', name: 'Board-Ansicht & Drag-and-Drop', status: 'planned', due: '02.06.2026', progress: 0 },
  ];
}</script>

Attribute

AttributTypStandardBeschreibung
namestring–View-Name (Tab-Kennung).
labelstring–Tab-Beschriftung.
badgestring–Tab-Badge.
countboolean–Zeilenzahl als Badge.
new-rowboolean–Hinzufügen-Zeile zeigen.
new-row-labelstring＋ New pageDeren Text.
sortableboolean–Kopfklick sortiert lokal.
sort-keystring–Sortierte Spalte.
sort-dirasc | desc–Richtung.

Slots

keine

Events

EventdetailBeschreibung
nk-select{ row, id }Zeile geklickt.
nk-change{ row, key, value }Checkbox-Zelle umgeschaltet (Zeile direkt aktualisiert).
nk-action{ action: 'sort' | 'new-row', key?, value? }Kopf oder Hinzufügen-Zeile geklickt.

Properties: columns rows data

Methoden: refresh()

Auf kleinem Schirm:Scrollt horizontal in .nk-table-wrap.
Ersetzt.nk-table-wrap.nk-table.th-icon.row-title.date-cell.person-cell.mini-avatar.nk-new-row

<nk-board-view> Board-Ansicht

Gruppiert Zeilen über eine Select-Spalte (group-by, Standard: die erste Select-Spalte) in eine Spalte je Option. Karten zeigen die Titelspalte und die meta-keys (Standard: Datum und Fortschritt). Karte auf eine andere Spalte ziehen: Der Wert der Zeile ändert sich, nk-change feuert.

Welle 5
<nk-board-view group-by="status" new-row></nk-board-view>
<script>{
  const db = document.currentScript.previousElementSibling;
  db.columns = [
    { key: 'name', label: 'Name', type: 'text', icon: '📄', title: true },
    { key: 'status', label: 'Status', type: 'select', icon: '◉', options: [
      { value: 'planned', label: 'Geplant', color: 'orange' }, { value: 'progress', label: 'In Arbeit', color: 'blue' }, { value: 'done', label: 'Erledigt', color: 'green' } ] },
    { key: 'owner', label: 'Verantwortlich', type: 'person', icon: '👤' },
    { key: 'due', label: 'Fällig', type: 'date', icon: '📅' },
    { key: 'progress', label: 'Fortschritt', type: 'progress', icon: '▰' },
  ];
  db.rows = [
    { id: 1, icon: '🧭', name: 'App-Shell & Sidebar', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '08.05.2026', progress: 100 },
    { id: 2, icon: '📄', name: 'Seiten-Shell & Typografie', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '10.05.2026', progress: 100 },
    { id: 3, icon: '🗃️', name: 'Datenbank-Tabellenansicht', status: 'progress', owner: { name: 'Marcel', initials: 'MK', color: '#9065b0' }, due: '20.05.2026', progress: 65 },
    { id: 4, icon: '▤', name: 'Board-Ansicht & Drag-and-Drop', status: 'planned', due: '02.06.2026', progress: 0 },
  ];
}</script>

Attribute

AttributTypStandardBeschreibung
namestring–View-Name.
labelstring–Tab-Beschriftung.
group-bystring–Schlüssel der Select-Spalte.
title-keystring–Titelspalte der Karte.
meta-keyslist–Kommagetrennte Meta-Spalten.
new-rowboolean–＋ je Spalte zeigen.

Slots

keine

Events

EventdetailBeschreibung
nk-select{ row, id }Karte geklickt.
nk-change{ row, key, value }Karte in andere Spalte gezogen.
nk-action{ action: 'new-row', value }＋ geklickt (value = Spalte).

Properties: columns rows data

Methoden: move(id, value) refresh()

Auf kleinem Schirm:Spalten scrollen horizontal.
Ersetzt.nk-board.active.nk-board-col.nk-board-col-header.count.nk-card.card-title.card-meta

<nk-filter-bar> Filterleiste

Eine Werkzeugleiste aus vorhandenen Klassen: Filter- und Sortier-Button (nk-action), aktive Filter als entfernbare Chips, optionales Suchfeld. bar.apply(rows) behält Zeilen, bei denen jeder Chip strikt gleich ist (row[key] === value, also den Options-Wert nutzen) und der Suchtext in einem String-Feld vorkommt (bei Personen der name); die Datenlogik bleibt deine.

Welle 5
<nk-filter-bar search placeholder="Zeilen durchsuchen …"></nk-filter-bar>
<script>{ document.currentScript.previousElementSibling.filters = [{ key: 'status', value: 'done', label: 'Status: Erledigt', color: 'green' }]; }</script>

Attribute

AttributTypStandardBeschreibung
searchboolean–Suchfeld zeigen.
placeholderstring–Such-Platzhalter.
no-filterboolean–Filter-Button ausblenden.
no-sortboolean–Sortier-Button ausblenden.

Slots

SlotBeschreibung
(default)Zusätzliche Controls zwischen Chips und Suche.

Events

EventdetailBeschreibung
nk-change{ filters, search }Chip entfernt oder gesucht.
nk-action{ action: 'filter' | 'sort' }Button geklickt.

Properties: filters value

Methoden: apply(rows)

Auf kleinem Schirm:Bricht auf zwei Zeilen um.
Ersetzt.nk-btn.secondary.small.nk-tag.nk-input

<nk-comments> Kommentar-Faden

Ein links gerahmter Faden aus nk-comments mit Eingabezeile. Enter oder der Button feuert nk-submit { text }; das Anhängen übernimmst du.

Welle 5
Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍 AIIch habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet. 
<nk-comments placeholder="Kommentieren …" send-label="Senden">
  <nk-comment author="Sara Lindt" time="1 hr ago" color="#448361">Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍</nk-comment>
  <nk-comment author="Mona" time="20 min ago" avatar="✨" color="var(--nk-text-tertiary)"><span slot="head" class="nk-tag blue" style="font-size:10.5px">AI</span>Ich habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet.</nk-comment>
</nk-comments>

Attribute

AttributTypStandardBeschreibung
placeholderstring–Platzhalter.
send-labelstringSendButton-Text.
no-inputboolean–Nur lesen.
disabledboolean–Eingabe deaktiviert.

Slots

SlotBeschreibung
(default)nk-comment-Kinder.

Events

EventdetailBeschreibung
nk-submit{ text }Neuer Kommentar; preventDefault() behält den Text.

Properties: value

Methoden: submit() focus()

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-comments.nk-comment.mini-avatar.c-head.c-body.nk-comment-input

<nk-comment> Kommentar

Ein Kommentar: Avatar (Initialen + color), fetter Autor, Zeit, Text. slot="head" ergänzt Inhalt hinter dem Namen.

Welle 5
Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍
<nk-comments no-input><nk-comment author="Sara Lindt" time="1 hr ago" color="#448361">Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍</nk-comment></nk-comments>

Attribute

AttributTypStandardBeschreibung
authorstring–Name.
timestring–Relative Zeit.
avatarstring–Initialen/Emoji (Standard: aus dem Autor).
colorCSS color–Avatar-Hintergrund.

Slots

SlotBeschreibung
(default)Text.
headHinter dem Namen (Tag, Badge).
avatarEigener Avatar.

Events

keine

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-comment.c-head.c-body

<nk-ai-thread> KI-Thread

Die Konversationsspalte: nk-ai-msg-Kinder (role="user" bekommt den Gradient-Avatar), gefolgt von einer nk-ai-input-row. Action-Buttons in slot="actions" feuern nk-action { action, value } – beide tragen das value des Buttons (oder seinen Text).

Welle 5
Fasse die offenen Aufgaben dieses Projekts zusammen. Zwei Aufgaben sind offen: die Tabellenansicht steht bei 65 % (fällig 20. Mai), das Board mit Drag-and-Drop ist geplant. 
<nk-ai-thread>
  <nk-ai-msg role="user" name="Du" avatar="MK">Fasse die offenen Aufgaben dieses Projekts zusammen.</nk-ai-msg>
  <nk-ai-msg role="assistant" name="Mona" badge="· KI">Zwei Aufgaben sind offen: die <b>Tabellenansicht</b> steht bei 65 % (fällig 20. Mai), das <b>Board mit Drag-and-Drop</b> ist geplant.
    <button slot="actions" value="copy">📋 Kopieren</button><button slot="actions" value="rephrase">↻ Umformulieren</button><button slot="actions" value="like">👍</button>
  </nk-ai-msg>
</nk-ai-thread>
<nk-ai-input-row placeholder="Frag Mona etwas …"></nk-ai-input-row>

Attribute

keine

Slots

SlotBeschreibung
(default)nk-ai-msg-Kinder.

Events

EventdetailBeschreibung
nk-action{ action }Action-Button einer Nachricht.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-ai-thread.nk-ai-msg.user.a-body.a-name.nk-ai-actions.nk-ai-input-row.nk-ai-send

<nk-ai-msg> KI-Nachricht

Eine Nachricht. role="user" schaltet den Avatar auf den Gradient; badge ist das graue Suffix hinter dem Namen („· KI“); einfache <button slot="actions">s bilden die Aktionszeile.

Welle 5
Zwei Aufgaben sind offen: die Tabellenansicht steht bei 65 % (fällig 20. Mai), das Board mit Drag-and-Drop ist geplant.
<nk-ai-thread><nk-ai-msg role="assistant" name="Mona" badge="· KI">Zwei Aufgaben sind offen: die <b>Tabellenansicht</b> steht bei 65 % (fällig 20. Mai), das <b>Board mit Drag-and-Drop</b> ist geplant.<button slot="actions" value="copy">📋 Kopieren</button></nk-ai-msg></nk-ai-thread>

Attribute

AttributTypStandardBeschreibung
roleuser | assistantassistantWer spricht.
namestring–Namenszeile.
badgestring–Graues Suffix.
avatarstring–Initialen/Emoji.
colorCSS color–Avatar-Hintergrund.

Slots

SlotBeschreibung
(default)Nachrichtentext (HTML erlaubt).
actions<button value>-Kinder.
avatarEigener Avatar.

Events

EventdetailBeschreibung
nk-action{ action, value }Action-Button geklickt.
Auf kleinem Schirm:Unverändert.
Ersetzt.nk-ai-msg.user.a-body.a-name.nk-ai-actions

<nk-ai-input-row> KI-Eingabezeile

Das Prompt-Feld mit ✨ und Sende-Button. Enter oder der Button feuert nk-submit { text } und leert das Feld.

Welle 5
<nk-ai-input-row placeholder="Frag Mona etwas …"></nk-ai-input-row>

Attribute

AttributTypStandardBeschreibung
placeholderstring–Platzhalter.
valuestring–Vorbelegter Text.
disabledboolean–Deaktiviert, während der Assistent antwortet.
iconstring✨Zeichen vorn.

Slots

keine

Events

EventdetailBeschreibung
nk-submit{ text }Prompt gesendet.

Properties: value

Methoden: submit() focus()

Auf kleinem Schirm:Unverändert.
Ersetzt.nk-ai-input-row.nk-ai-send
NotionKit Elements v1.0.1 · wrapping NotionKit CSS v1.1.1 · MIT · Jungherz GmbH