@node-k/ui (0.2.2)
Installation
@node-k:registry=npm config set @node-k:registry=npm install @node-k/ui@0.2.2"@node-k/ui": "0.2.2"About this package
@node-k/ui — Bausteine als Web Components
Stufe 4 aus
korrekturen/paketierung.md§7. Angelegt 11.9.2026 mitnk-buttonals Muster (4a). Entscheidungen 11.9.: form-associated ja · Lit vendored · Workspaceui/·.jsx-Wrapper später als eigenes Paket · diese Sitzung nur Button.
Benutzen
<script type="module" src="node_modules/@node-k/ui/src/define/nk-button.js"></script>
<link rel="stylesheet" href="node_modules/@node-k/tokens/dist/css/nodek-tokens.css">
<nk-button>Node finden</nk-button>
<nk-button variant="secondary">Mitglied werden</nk-button>
<nk-button variant="ghost" size="sm">Mehr</nk-button>
<nk-button full-width type="submit">Anmelden</nk-button>
Tokens greifen als Custom Properties durch das Shadow DOM — die Komponente bringt keine Farben mit.
Ohne nodek-tokens.css ist sie unsichtbar; das ist Absicht (eine Quelle, kein Rückfall-Zweitsatz).
| Attribut | Werte | Standard |
|---|---|---|
variant |
primary · secondary · ghost |
primary |
size |
sm · md · lg |
md |
type |
button · submit · reset |
button |
disabled |
boolean | — |
full-width |
boolean | — |
label |
aria-label für Icon-Buttons ohne Text |
— |
--nk-button-surface |
Grundfläche hinter Umriss-Varianten | var(--nk-black) |
part="button" und part="label" für ::part()-Styling von außen.
Angular
Was heute trägt (D1 §1 — die angular/-Platzhalter waren tote Exporte und sind entfernt; echte Direktiven
entstehen dort, wo sie geprüft werden können, siehe PORTIERUNG.md):
CUSTOM_ELEMENTS_SCHEMAgehört in dieschemasjeder standalone Komponente, die einnk-*-Element benutzt. Ohne NgModules gibt es keine Stelle, an der man es einmal für die App hinterlegt.- Side-Effect-Importe je Bauteil:
import '@node-k/ui/button',…/logound so fort. Die Unterpfade stehen inexports, fünfzehn Stück. nk-inputundnk-switchsind form-associated. In einem nativen<form>melden sie ihren Wert überElementInternals.setFormValue()selbst — gemessen in K1 am 12.9.: fünf Felder mit Startwert im erstenFormData,form.reset()stellt sie wieder her,<fieldset disabled>greift überformDisabledCallback. Es fehlt also nur die Brücke zu Signal Forms'[field], nicht die Wertweitergabe.- Die Ereignisse:
nk-inputfeuertchangeundinput,nk-switchnurchange. - Status-Aktionen: es gibt
primary,secondary,ghost— keindanger, keinsuccess. Wer eine Löschaktion zeichnet, nimmtghostund setzt die Farbe von außen.
nk-logo beim Konsumenten (D1 §2). Die Vorgabepfade sind repo-relativ zu base; @node-k/ui liefert keine
Bilder mit (Bilder liegen in @node-k/assets). nk-logo erwartet unterhalb von base die Unterordner
assets/svg/wbm/, assets/svg/wordmark/, assets/svg/app/. Ein angular.json-Eintrag, der @node-k/assets/dist/svg dorthin kopiert:
"assets": [{ "glob": "**/*", "input": "node_modules/@node-k/assets/dist/svg", "output": "assets/svg" }]
Nuxt-Gegenstück (nuxt.config.ts):
hooks: { 'nitro:config': (cfg) => { cfg.publicAssets ??= []; cfg.publicAssets.push({ dir: 'node_modules/@node-k/assets/dist/svg', baseURL: 'assets/svg' }); } }
Den Pfad setzt man einmal je Seite am <html>: <html data-nk-asset-base="/">. Ein base-Attribut
am einzelnen Element sticht diesen Standard, ist aber nur noetig, wenn eine Seite zwei Herkuenfte mischt.
<nk-logo base="/"> (oder der Pfad, unter dem assets/svg/ kopiert liegt). Die Quelle ist bewusst
assets/svg/ und nicht svg-flat: nk-logo bettet inline ein und färbt über var(--nk-*), das braucht die
tokenisierte Fassung (A4 §4). Ohne gesetztes base und außerhalb der Baumwurzel bleibt ein Platzhalter stehen,
kein leeres Bild — die Konsolenmeldung nennt die versuchte URL.
Portierung, Bauart-Begründungen (4b/4c) und Abnahmeprotokolle: siehe PORTIERUNG.md.
Lit: vendored, nicht transitiv
vendor/lit/lit.js ist ein einzelnes ESM-Bündel (LitElement, html, css, svg, nothing, unsafeCSS,
classMap, ifDefined), erzeugt von npm run vendor -w ui aus der devDependency lit@3.3.1. Konsumenten
bekommen genau diese Fassung, ohne eigene Lit-Auflösung — eine Version in allen drei Apps. src/**
importiert ausschließlich ../../vendor/lit/lit.js; jeder andere Lit-Import fällt im check.
Stand 11.9.: die Registry ist aus dem Designsystem heraus nicht erreichbar. vendor/lit/lit.js
reicht deshalb den Shim lit.shim.js durch — eine Minimal-Oberfläche derselben API ohne Diffing,
für Browserproben ausreichend, für Produktion nicht. Der Shim exportiert dieselben Namen wie das echte Bündel
(LitElement, nicht mehr litElementBase), damit die Komponenten unverändert gegen beides laufen. Regel seit der
Zwischenkorrektur: kein „fertig" ohne echtes Lit — Abnahme nur nach:
npm ci
npm run vendor -w ui # esbuild ist devDependency; ersetzt lit.js durch das echte Bündel, löscht den Shim, kopiert die Kerne
npm run check -w ui # Exit 0, keine Shim-/Platzhalter-Warnung mehr
Nachweis im Browser: Probe öffnen, customElements.get('nk-button') liefert die Klasse. Jede Komponente exportiert
ihre Klasse als nk<Name>Element (klein), weil der Design-System-Compiler Großbuchstaben-Exporte hebt (P1.3).
Dependencies
Dependencies
| ID | Version |
|---|---|
| @node-k/assets | 0.2.2 |
| @node-k/tokens | 0.2.2 |
Development dependencies
| ID | Version |
|---|---|
| esbuild | 0.25.9 |
| lit | 3.3.1 |