App-Shell .nk-app

nk-app ist eine flex-Zeile über die volle Höhe: Sidebar links, Hauptspalte rechts. Es ist das äußerste Element einer Workspace-App und der einzige Ort, an den eine feste Höhe gehört. In der Sidebar ist nk-sidebar-scroll der scrollende Baumbereich und nk-sidebar-footer der fixierte Fuß (Einstellungen, Papierkorb). Auf dem Desktop klappt die Sidebar wie in Notion ein: .nk-sidebar-head hält die Workspace-Zeile und das « .nk-sidebar-collapse, das erscheint, solange der Zeiger über der Sidebar ist; .collapsed an der Sidebar schiebt sie nach links hinaus – die Hauptspalte nimmt die Breite, die verborgene Sidebar nimmt keinen Fokus –, und .collapsed am .nk-sidebar-toggle der Topbar zeigt das ☰, das sie zurückholt. Notions Kürzel ist ⌘\.

html<div class="nk-sidebar-backdrop open"></div>   <!-- phones: the drawer's scrim -->
<aside class="nk-sidebar open">…</aside>         <!-- slides in over the page -->
<button class="nk-topbar-btn nk-sidebar-toggle" aria-label="Menu">☰</button>

jscollapseBtn.addEventListener('click', () => {            // the « in .nk-sidebar-head
  sidebar.classList.add('collapsed');                      // slides out on the desktop
  sidebarToggle.classList.add('collapsed');                // das ☰ in der Topbar holt sie zurück
});

Workspace-Umschalter .nk-workspace

Sitzt ganz oben in der Sidebar. Der Avatar-Verlauf wird aus --nk-decor-purple und --nk-decor-blue gemischt und übersteht ein Rebranding unverändert.

Topbar .nk-topbar

Eine 44px hohe Zeile: links der Breadcrumb, rechts die Aktionen. nk-topbar-actions schiebt sich per margin-left:auto nach rechts – ein Platzhalter ist nie nötig. Reiner Text zwischen den Aktionen – „Bearbeitet vor 2 Min.“ – ist nk-topbar-meta. nk-theme-glyph umschließt die Glyphe eines Theme-Knopfs: ein Emoji für ein festes Theme, mit auto Sonne und Mond diagonal für den Modus, der dem System folgt.

Tab-Bar (mobil) .nk-tab-bar

Der daumenfreundliche Zwilling der Sidebar für Telefone und installierte PWAs: bis zu fünf Ziele in einer Reihe, jedes ein Icon über einer kurzen Beschriftung, das aktuelle in --nk-accent. Als letztes Kind von nk-main sitzt sie unter der scrollenden Seite und bewegt sich nie. In einem Dokument, das selbst scrollt, klebt sie am unteren Viewport-Rand. floating macht sie zur Kapsel; fixed heftet sie für Standalone-PWAs an den unteren Viewport-Rand, ein .nk-tab-bar-spacer direkt dahinter hält ihre Höhe (--nk-tab-bar-height plus Safe-Area) im Fluss frei. Der fünfte Eintrag öffnet meist die Sidebar als Schublade.

html<nav class="nk-tab-bar fixed">…</nav><div class="nk-tab-bar-spacer"></div>

Breadcrumb .nk-breadcrumb

Jede Stufe ist ein .crumb; die letzte trägt .current und wechselt von sekundärer zu primärer Textfarbe. Trenner sind .sep.

Abschnitts-Label .nk-section-label

Die kleine Versal-Beschriftung zwischen Sidebar-Gruppen. Das .plus erscheint erst beim Hovern – so bleibt die Hinzufügen-Aktion erreichbar, ohne die Leiste zu schmücken.

Baum-Eintrag .nk-tree-item

Das Arbeitstier der Sidebar. Mindesthöhe 28px, das Label kürzt mit Ellipse, und der .actions-Block bleibt bis zum Hovern verborgen. .active markiert die aktuelle Seite.

Unterbaum & Toggle-Pfeil .nk-tree-children

Kinder rücken unter einer Führungslinie ein. .collapsed klappt sie weg, .open am Pfeil dreht ihn um 90°. Beides sind reine Zustandsklassen – das Umschalten übernimmst du.

Tastatur-Hinweis .nk-kbd

nk-kbd-hint schiebt ein Kürzel an den rechten Rand einer Zeile; nk-kbd ist die Taste selbst. Bewusst präfixiert – eine nackte kbd-Regel würde in die Host-Seite lecken.

Seitenspalte & Seitenoptionen .nk-page

Die Dokumentspalte: max-width: 760px mit Auto-Rändern, nie eine feste Breite. Nach einem Cover (.nk-cover + .nk-page oder .nk-page.covered) zieht sich das Icon per negativem Rand darüber und die Seite hat kein oberes Padding; ohne Cover behält die Seite 24px oberes Padding und das Icon sitzt darin, ganz sichtbar. Der Titel ist contenteditable-fähig. Notions zwei Seitenoptionen sind Klassen an der Seite: full hebt die 760px-Grenze auf, die Spalte füllt das Fenster, small setzt den Dokumenttext von 16px auf 14px, und Überschriften, Lead, Prosa und Editor ziehen mit, weil sie in em bemessen sind. Titel, Eigenschaften, Tabellen und Bedienelemente behalten ihre Größe. In Notion sind das Optionen der einzelnen Seite, in ihrem ⋯-Menü, keine App-Einstellungen. Das Token --nk-page-full-max begrenzt full – standardmäßig none; 1080px auf :root gibt einem Dashboard aus Tabellen Platz ohne 1600px lange Zeilen.

Seiteneigenschaften .nk-props

Die Eigenschaften unter dem Titel einer Datenbankseite – das Muster, für das Notion bekannt ist. Ein .nk-prop pro Zeile: der Name mit seinem Typ-Icon in einer 160px-Spalte, daneben der Wert, beide 34px hoch mit Hover-Hauch, weil in Notion jede Hälfte ihren eigenen Editor öffnet. Werte sind gewöhnliches Markup: Tags, ein Avatar mit Namen, ein Datum, ein .nk-progress.wide. Es ersetzt .nk-page-meta auf einer Seite, die eine Zeile ist. Als <dl>, <dt> und <dd> geschrieben ist es auch für assistive Technik eine Beschreibungsliste; schlichte <div>s funktionieren genauso. Ein Wert, der Text ist – ein Satz, eine Adresse, ein Modellname mit Etikett –, bekommt .text und fließt als Text, statt seine Teile untereinander zu setzen. Der Wert behält mindestens 220px: In einer Spalte unter 380px, etwa einer Seitenleiste, rutscht er unter seinen Namen. .flush nimmt den Außenabstand weg, für eine Liste in einem Panel oder einer Flex-Spalte mit eigenem Abstand.

Cover .nk-cover

Ein Zierband über der Seite, 200px hoch – das Token --nk-cover-height, auf :root oder an einem Cover; Notions eigenes nimmt etwa 30vh, clamp(200px, 30vh, 300px) kommt nahe heran. Drei radiale Verläufe, gemischt aus den --nk-decor-*-Tokens über --nk-bg-callout. Für ein Bild ein <img> hineinsetzen: Es füllt das Band und wird beschnitten, nie verzerrt, und object-position verschiebt den Ausschnitt wie Notions „Neu positionieren“. Der Verlauf bleibt darunter, solange es lädt.

Überschriften & Lead .nk-heading

nk-heading ist die Abschnitts-Überschrift im Dokument – eine flex-Zeile, damit ein Emoji ohne Zusatz-Markup auf der Grundlinie sitzt. p.lead ist der größere Einstiegsabsatz in nk-page.

Callout .nk-callout

Ein getönter Block für den einen Gedanken, der nicht übersehen werden darf. Das Icon ist ein .c-icon-Kind und hat einen ::slotted()-Zwilling – <nk-callout> kann es später per Slot annehmen.

Bookmark .nk-bookmark

Notions Link-Block: .bm-title, zwei Zeilen .bm-desc und die .bm-url mit ihrem .bm-favicon links, das Vorschaubild in .bm-cover rechts – ein Drittel der Box, höchstens 240px, sodass ein og:image in 1200×630 fast ganz hineinpasst. Die ganze Box ist der Link, ein <a>; gefüllt aus og:title, og:description und og:image der Seite. Ohne Bild nimmt der Text die Breite, ohne Beschreibung wird die Box niedriger. Auch der Weg, zu zeigen, wie ein geteilter Link aussehen wird.

NotionKit – der ruhige Workspace-Look als CSS NotionKit ist eine reine CSS-Komponentenbibliothek im Notion-Look: Sidebar, Seitenbaum, Dokument-Shell, Datenbank-Views, Einstellungen und KI-Flächen. https://notionkit.jungherz.com

To-do .nk-todo

Eine Checkbox mit eigenem Haken. Der Geschwister-Selektor input:checked + span streicht das Label durch – beide Hälften liegen in einer Komponente und überstehen den Umzug in einen Shadow Root.

Toggle .nk-toggle

Auf nativem <details>/<summary> gebaut – öffnet und schließt ohne eine Zeile JavaScript. Der Marker ist ein ::before, das sich bei [open] dreht.

Zitat & Trenner .nk-quote

Ein Blockzitat mit durchgezogener linker Linie, dazu der waagerechte Trenner. nk-divider ist für ein <hr> gedacht und setzt dessen eigenen Rahmen zurück.

Inline-Erwähnungen .nk-mention

Drei Varianten im Fließtext: .person mit Mini-Avatar, .page haarfein unterstrichen, .date in der orangen Tag-Farbe. Alle sind inline-flex und brechen nie mitten in der Erwähnung.

Code .nk-code

Ein Block mit Sprach-Badge in der Ecke und zwei Farb-Haken – .tag nimmt den Akzent, .attr die orange Tag-Farbe. nk-inline-code ist die Variante im Satz.

Prosa .nk-prose

Text, den die App nicht Tag für Tag geschrieben hat – gerendertes Markdown, Hilfeseiten, das HTML, das ein Editor gespeichert hat – bekommt die Dokument-Optik von einer Klasse an seinem Container: Überschriften, Absätze, Listen, Aufgabenlisten, Links, Inline-Code, Code-Blöcke, Zitate, Trenner, Bilder und Tabellen. Es liest genau dieselben Regeln wie der Editor-Adapter, eine Seite zum Lesen und dieselbe Seite in TipTap decken sich also auf den Pixel. Die Größen sind in em und folgen dem, worin der Text steht: 16px auf einer Seite, 14px mit small oder in der App-Oberfläche. Kein äußerer Rand am ersten und letzten Block, es sitzt also bündig in einem Panel. Ein leerer Absatz behält seine Zeile, wie er sie im Editor hatte.

Bewusst nur als Klasse: ::slotted() erreicht den geslotteten Knoten, nie einen Absatz darin, ein <nk-prose>-Element könnte seinen Inhalt also nicht stylen. Die Klasse gehört an einen Container im Light DOM, auch in NotionKit Elements.

View-Reiter .nk-db-tabs

Die Leiste über einer Datenbank. Die aktive View sitzt als Pille auf dem Aktiv-Hauch, die anderen sind schlichte Wörter – keine Unterlinie, keine Linie, wie in Notion seit 2025. Das .badge-Kind trägt die Zeilenzahl.

Werkzeugleiste & Filter-Pills .nk-db-toolbar

Der Datenbank-Kopf, wie Notion ihn anordnet: links die View-Reiter, rechts die Werkzeuge der Ansicht – .nk-db-tool-Knöpfe für Filter, Sortieren und Suche, dann „Neu“. Ein Werkzeug, das wirkt, bekommt .active, den Akzent. Darunter hält .nk-filter-row die wirkenden Filter als .nk-filter-pills – .active mit Akzent-Tönung – und am Ende eine ruhige .add-Pill. Eine Pill ist ein Knopf, oder ein Kasten mit dem Label-Knopf und einem .fp-remove-×, wenn sich ein Filter direkt entfernen lässt.

Tabellen-Ansicht .nk-table

36px-Zeilen bei 14px, Haarlinien zwischen Zeilen und Spalten, Kopfzellen ruhig und klickbar – an einer echten Notion-Tabelle gemessen. Eine Auswahlspalte hat th.select-all als Kopf: eine Checkbox statt eines Namens – leer, ein Strich für einige Zeilen, ein Haken für alle –, die nichts sortiert; der Strich ist indeterminate, per Skript gesetzt. Jede Zelle ist white-space: nowrap, damit Spalten ihre Form behalten; .wrap auf der Tabelle oder einer Zelle lässt Text umbrechen, wie Notions „Spalte umbrechen“. .num an einer Zelle setzt eine Zahl rechtsbündig in gleich breiten Ziffern, wie Notion eine Zahl-Eigenschaft setzt; der Kopf bleibt links. .row-actions in einer Zelle setzt Knöpfe für die Zeile an ihren rechten Rand – „Erneut“, „Verwerfen“ –, und th.actions ist ein Kopf, der nichts sortiert. .td-text gibt einem Wert eine von Notions neun Textfarben – .orange für einen Fehler – und .td-desc eine leise zweite Zeile darunter; die Zeile wächst mit. .nk-new-row ist die Hinzufügen-Zeile unten (innerhalb von .nk-table funktioniert die Kurzform .new-row weiter).

Tags .nk-tag

Die Select-Option, wie Notion sie zeichnet: 20px hoch, 3px Ecken, die 14px der Zelle, fast schwarzer Text auf gesättigter Fläche (≥ 10:1 im Hellmodus). Neun Farben, je ein Hintergrund/Text-Paar pro Theme; ohne Farbklasse ist es der graue Tag. Für farbigen Text die --nk-color-*-Mitteltöne nehmen, für eine weiche Fläche die --nk-tint-*-Hintergründe.

Fortschrittsbalken .nk-progress

Eine 6px-Schiene, deren Füllung ein <i> mit Prozentbreite ist. Schiene und Füllung nutzen Notions blaue Tönung und den blauen Mittelton und ziehen bei einem Theme-Wechsel mit. 110px breit in einer Zelle; wide füllt seine Zeile – ein Eigenschaftswert, ein Panel, eine Kursübersicht – und in einer flex-Zeile behält das Label seinen Platz daneben; in einer flex-Spalte bleibt er ein 6px-Balken. .nk-progress-row hält Balken und Label als eine Zeile – in einer flex-Spalte, einem Panel, stünden die beiden sonst untereinander: Das Label steht neben dem Balken, auf seiner Mitte, und ein breiter Balken füllt den Rest.

Board-Ansicht .nk-board

Feste 220px-Spalten in einer horizontal scrollenden Zeile. nk-board ist standardmäßig display:none, damit es neben einer Tabellen-Ansicht liegen kann; .active zeigt es.

Listen-Ansicht .nk-list

Die dritte Datenbank-Ansicht: eine Zeile pro Eintrag – Icon, Titel und rechts ein paar Eigenschaften –, wie Notion eine Datenbank unter „Liste“ zeigt. Haarlinien zwischen den Zeilen und der Hover-Hauch über die ganze Zeile, wie eine Tabelle ohne Spalten; die letzte Zeile verliert ihre Linie. Als <a> ist jede Zeile ein echter Link. In .nk-database unter die View-Reiter setzen oder allein für jede Liste von Seiten nutzen. Eine Zeile, die selbst kein Ziel ist – eine Datei mit eigenem Entfernen-Knopf –, bekommt .static: keine Hand, kein Hover-Hauch.

Kalender-Ansicht .nk-calendar-view

Die Datenbank als Notions Monat, ein View-Reiter wie Tabelle, Board und Liste: ein Kopf mit dem Monat und den .cal-nav-Knöpfen der Datumsauswahl, die Wochentage und ein .cv-day je Tag mit seiner .cv-num oben rechts – die von heute auf einer roten Pille – und den an diesem Tag fälligen Zeilen als .cv-item-Karten. Tage des Monats davor und danach (.out) und Tage, an denen nicht gearbeitet wird (.off), sind hinterlegt. weeks ergänzt eine Spalte mit ISO-Kalenderwochen. Die Spalten teilen sich die Breite, sieben passen also immer; der Titel eines Eintrags endet mit Auslassungspunkten.

Galerie-Ansicht .nk-gallery

Die fünfte Datenbank-Ansicht: die Einträge als Karten mit einem Bild oben, in einem Raster, das die Zeile füllt – Notions Galerie, für einen Kurskatalog oder eine Leseliste. Eine Karte ist die .nk-card des Boards mit .card-title und .card-meta; ein .nk-cover als erstes Kind läuft in 2:1 bis an die Ränder der Karte, ein Bild darin wird beschnitten – ohne Bild zeigt sich der Cover-Verlauf. .small und .large setzen die Kartengröße, Spalten ab 180px und 340px statt 260px; .fit zeigt ein Bild ganz, für Logos. Ein .nk-new-row am Ende wird zur Hinzufügen-Karte. Der Klick auf eine Karte ist dein Skript, wie bei einer Tabellenzeile. Eine Karte, die sich in einem neuen Tab öffnen und deren Adresse sich kopieren lassen soll, ist ein Link, <a class="nk-card" href>, in einem .card-item mit role="listitem" – der Link behält seine eigene Rolle –, und die Karte füllt es.

🚀 Roadmap

Fertig📅 12.05.2026

🎨 Design-System

In Arbeit📅 20.05.2026

📣 Launch

Geplant📅 02.06.2026

＋ Neue Seite

Inputs, Textarea, Select .nk-input

Eine gemeinsame Form für alle drei: gefüllt mit --nk-bg-input in einer Haarlinie, 32px hoch bei 14px – Notions Input, keine umrandete weiße Box. Der Fokusring wird aus dem Akzent gemischt und färbt sich mit ihm um. .wide füllt die Zeile. Jedes behält mindestens 210px, außer in einem Panel, wo es nie über den Rand einer schmalen Kachel hinausragt; eine Feldzeile behält die 210px auch dort.

Kopierfeld .nk-copy-field

Ein Wert zum Mitnehmen – ein Link zum Teilen, eine Adresse, ein Schlüssel – in einem eigenen Feld, so hoch wie ein Eingabefeld, mit seinen Aktionen rechts darin. .cf-value hält den Text in einer Zeile mit Auslassungspunkten, ein Klick markiert ihn ganz; .cf-btns sind die leisen Aktionen – Kopieren und, bei einem Geheimnis, Zeigen. .copied an einem Button ist der Moment danach, in Grün; das Kopieren übernimmt dein Skript. mono für Adressen, Schlüssel und Code, wrap lässt einen langen Wert umbrechen, die Aktionen bleiben in der ersten Zeile, wide füllt die Zeile. Wie ein Input behält es mindestens 210px, außer in einem Panel. Ein Button kann neben seinem Wort in einem <span> ein <svg> tragen – zwei überlappende Quadrate für Kopieren, ein Auge für Zeigen, ein Haken für den Moment danach – und das Wort als aria-label: Auf dem Telefon und überall mit icons steht das Symbol für das Wort, wie in Notion, und ein verdeckter Schlüssel behält ein Dutzend Zeichen mehr.

jsbtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(field.querySelector('.cf-value').textContent);
  btn.classList.add('copied');   // kurz grün
  setTimeout(() => btn.classList.remove('copied'), 1500);
});

Datumsauswahl .nk-calendar

Notions Monatsblatt für ein Datum: ein Titel mit Heute und ‹ ›, die Wochentage, sechs Reihen .cal-day-Knöpfe. Der gewählte Tag ist .selected im Akzent, heute ist rot; ein Zeitraum läuft von .start bis .end über .in-range-Tage in der Tönung des Akzents. .off graut einen Tag, an dem nicht gearbeitet wird – ein Wochenende, ein Feiertag, mit seinem Namen als title –, .out einen Tag des Monats davor oder danach; aria-disabled="true" markiert einen außerhalb der Grenzen. .cal-marks hält bis zu drei Punkte in den neun Farben (i.blue, i.red …), für Fristen oder Meilensteine. weeks stellt jeder Reihe die ISO-Kalenderwoche voran, .cal-foot ein Zeitfeld oder Aktionen unter das Blatt. Die Zellen sind 36px, sieben und die Wochenspalte füllen also ein .nk-pop; in .nk-pop.floating.sheet ist es auf dem Desktop ein Popover und auf dem Telefon ein Sheet mit 44px-Zellen. Monat, Tasten und Wert sind dein Skript – oder <nk-calendar>.

Buttons .nk-btn

Fünf Varianten, 28px hoch bei 14px. .secondary und .danger sind Notions weißer Button: die Kontur ist --nk-shadow-btn, ein 1px-Innenring plus 1px Schatten, kein Rahmen. Hover ist bei gefüllten Buttons eine Deckkraft-Änderung, bei weißen ein Hauch – nie ein Farbwechsel. .small (24px) lässt sich mit jeder Variante kombinieren. Über eine Spalte gestreckt – ein Button über die volle Breite auf einer Anmeldeseite – bleibt seine Beschriftung mittig.

Switch .nk-switch

Funktioniert auf zwei Wegen: als <input type="checkbox"> über :checked oder als <button role="switch"> über aria-checked="true". Die Button-Form ist der barrierefreie Standard. In einer Einstellungszeile benennt das nk-field-Label den Schalter; für mehrere Schalter nebeneinander bekommt jeder ein label.nk-switch-label mit sichtbarem Text – der Text gehört zur Trefferfläche.

Checkbox & Radio .nk-check

Dieselbe 16px-Box für beides; die Radio-Variante wird über [type="radio"] erkannt und wird zum Kreis mit Punkt. Die Marken sind ::after-Inhalte, keine Bilder; eine Checkbox, die indeterminate ist – nur eine Eigenschaft, per Skript gesetzt –, zeigt einen Strich, für eine teilweise gewählte Gruppe. Bricht ein Label um, bleibt die Box neben seiner ersten Zeile, wie in Notion.

Slider .nk-slider

Ein natives Range-Input, eingefärbt per accent-color: var(--nk-accent) – kein eigenes Schienen-Markup, also bleiben Tastatur und Screenreader nativ. nk-slider-value ist die Anzeige.

Feld-Zeile .nk-field

Das Grundelement einer Einstellungszeile: Label und Beschreibung links, Bedienelement rechts, auseinandergeschoben per justify-content: space-between. Gestapelt ergeben sie ein ganzes Einstellungs-Pane. stacked setzt das Label über ein vollbreites Control – für Textareas und lange Beschreibungen; compact verkleinert das Label auf 12px tertiären Text und nimmt das Zeilen-Padding weg. Für mehrere kurze Felder nebeneinander gibt es .nk-fields.

Feldraster .nk-fields

Mehrere kurze Felder in einer Zeile: ein Raster aus minmax(150px, 1fr)-Spalten, das umbricht, wie es die Breite erlaubt. Jedes direkte .nk-field-Kind wird von selbst gestapelt und kompakt – ein 12px-Label über einem vollbreiten Control –, damit nichts kollidiert. .fit lässt die Felder die Zeile stattdessen teilen – zwei Felder in einem 560px-Dialog sind zwei Hälften, nicht zwei Drittel und eine Lücke.

Profil-Zeile & Bild .nk-profile-row

Ein 56px-Avatar mit seinen Aktionen daneben, in .pr-actions – hochladen, ändern und das leise .pr-remove. Der Verlauf passt zu jedem anderen Avatar im System, weil alle dieselben zwei Decor-Tokens lesen; ein <img> in .big-avatar ist ein gewähltes Bild, auf den Kreis zugeschnitten. square macht daraus das abgerundete Quadrat eines Workspace-Icons. Die Datei zu wählen – ein verstecktes <input type="file">, vom Button geöffnet, EXIF-Drehung, Skalierung – übernimmt dein Skript oder <nk-image-picker>.

AL

Bild hochladen

Bild ändern Entfernen

Modell-Karte .nk-model-card

Eine Radio-Gruppe als Karten. Die ausgewählte Karte mischt 6 % des Akzents in ihren Hintergrund und bekommt einen Akzent-Rahmen – beides abgeleitet und damit rebranding-fest.

Gefahrenbereich .nk-danger-zone

Rahmen und Titel lesen --nk-danger; der Rahmen ist 40 % davon per color-mix() – es gibt kein zweites Rot, das synchron gehalten werden müsste.

Mitglieder-Zeilen .nk-member-row

Zeilen, getrennt durch eine Haarlinie. Die Regel „letzte Zeile ohne Rahmen“ hängt am Container nk-member-list und hat einen ::slotted()-Zwilling – sie funktioniert also weiter, wenn ein künftiges Element die Zeilen projiziert.

Einstellungs-Modal .nk-modal

Ein zweispaltiges Overlay: Navigation links, Panes rechts. Der Backdrop startet mit opacity: 0; pointer-events: none; .open blendet ihn ein und skaliert das Modal von 0.98 auf 1. Panes wechseln über .active. Das Modal bemisst sich selbst – min(960px, 92vw) mal min(640px, 86vh) – und braucht keine Inline-Maße.

Popover-Basis .nk-pop

Die gemeinsame Fläche unter jedem schwebenden Panel: Seitenhintergrund, 10px Radius, der dreilagige Menü-Schatten. Die Positionierung übernimmt der Consumer – die Klasse liefert nur die Fläche.

Emoji-Picker .nk-emoji-grid

Ein achtspaltiges Raster in nk-pop, darüber ein Filterfeld, darunter eine ausgegraute Kategorieleiste. Kategorien leuchten beim Hovern oder mit .active auf.

Kontextmenü .nk-menu

nk-pop mit nk-menu kombinieren. Einträge nehmen links ein .m-icon und rechts ein .m-shortcut; .danger färbt einen Eintrag rot. Ein .nk-switch als letztes Kind eines Eintrags sitzt rechts, wie „Kleiner Text“ und „Volle Breite“ in Notions Seitenmenü. Ein Menü, das über der Seite schwebt, bekommt floating und öffnet und schließt über .open wie die Palette: Es blendet ein und setzt sich aus 4px Höhe und 98 % ab; geschlossen nimmt es weder Klicks noch Fokus an, und wo es sitzt, bestimmst du. sheet macht es auf dem Telefon zum Bottom Sheet, so wie Notions Mobil-App jedes Menü öffnet – dasselbe Markup, zwei Darstellungen. Ein schwebendes Menü wächst nie über das Fenster hinaus: Ein längeres scrollt in sich, und --_nk-float-max begrenzt es auf den Platz, den ein Skript unter oder über seinem Anker gefunden hat. Es liegt über Modal, Sheet und Dialog, ein Menü oder eine Datumsauswahl aus einem davon erscheint also darüber.

html<div class="nk-pop nk-menu floating sheet open" style="position:fixed; top:48px; right:12px">…</div>

Befehlspalette .nk-cmdk

Eine ⌘K-Palette: Eingabezeile, gruppierte Liste, Fußzeile mit Tastenhinweisen. Die per Tastatur hervorgehobene Zeile trägt .selected – diese Klasse verschiebt dein Pfeiltasten-Handler.

Palette: keine Treffer .nk-cmdk-empty

Was die Liste zeigt, wenn der Filter nichts trifft. Die Eingabe zurückzitieren, damit sichtbar ist, wonach gesucht wurde.

Sheet .nk-sheet

Notions Mobil-Fläche für Menüs, Eigenschaften und mehr: der Telefon-Zwilling des Modals. Der Backdrop blendet ein, das Panel steigt von der Unterkante auf, mit gerundeten oberen Ecken und einem .sh-grabber oben, und der Home-Indikator behält seinen Abstand. Es liegt über der Tab-Leiste. Wie das Modal startet es unsichtbar, .open zeigt es; geschlossen verlässt der Backdrop nach dem Ausblenden das Layout. Bis 640px breit, auf größeren Schirmen zentriert. Zeilen darin bekommen 40px, eine Daumenhöhe. Für ein Menü, das auf dem Desktop Popover und auf dem Telefon Sheet ist, stattdessen .nk-pop.sheet nehmen.