Kern
Dark-first web components for self-hosted tools around device management, monitoring, networks and smart homes. Built with Stencil and Shadow DOM, without runtime dependencies. Light is a complete second theme.
What you get
- 59 elements: layout, navigation, forms (form-associated, with validation), date and time, feedback, data display.
- One set of tokens for colours, type and spacing. Dark and light come from the same tokens.
- Accessible by default: keyboard patterns after WAI-ARIA, labels, focus rings, reduced motion.
- Framework-free, with generated Angular wrappers and value accessors.
Components
Layout
kern-app-shellBase layout of an app: topbar, optional side navigation, main content with a maximum width and page padding, and an optional footer.kern-topbarApp header: brand on the left, main navigation, tools on the right (site switch, server status, kern-theme-toggle).kern-page-headerPage title (h1) with an optional description and the page actions on the right.kern-gridLays out cards, tiles and form groups in columns.kern-cardSurface for one block of related content.kern-toolbarRow above a table: search, filters, then (right-aligned) result count and actions.kern-accordionCollapsible sections (advanced settings, FAQ, log groups): kern-accordion-item children in a bordered box.Navigation
kern-tabsSwitches between views of the same object (Config / Status / Snapshots).kern-linkText link for running text, table cells and cards.kern-breadcrumbPath back through a hierarchy (Standort › Raum › Gerät › Einstellungen): child links (kern-link or <a>), the last child is the current page (aria-current="page").kern-paginationPaging for long tables and lists: range („1–25 von 380“), optional page size, first/previous, page numbers with „…“, next/last.kern-command-paletteSearch field over pages, devices and actions in a modal (kern-dialog), to reach them by keyboard: «Boiler», «Updates», «Start scan».kern-language-selectLanguage switcher: a dropdown with the language names («Deutsch», «English») or short codes («DE», «EN»), optionally with flags, or the languages side by side as links or buttons (variant="inline", good for two or three).kern-theme-toggleIcon button switching between dark (default) and light; remembers the choice (localStorage kern-theme).Actions
Forms
kern-inputLabelled text field (text, password, search, number …), form-associated.kern-textareaLabelled multi-line text field, form-associated.kern-selectLabelled choice with its own dropdown list, form-associated.kern-switchOn/off switch for settings (Cloud, Bluetooth, MQTT), form-associated.kern-checkboxCheckbox for selection and filters ("nur mit Firmware-Update", device selection), form-associated.kern-radio-groupSingle choice from kern-radio children, form-associated.kern-segmentedCompact single choice for 2–5 short options (filters, Stable/Beta, DHCP/Statisch), form-associated.kern-ip-inputIPv4 field for a single address (192.168.1.10), a range (192.168.1.10-192.168.1.50, also 192.168.1.10-50), a CIDR block (192.168.1.0/24) or a subnet mask (255.255.255.0, also /24), form-associated.kern-mac-inputMAC address field, form-associated.kern-file-inputFile picker with drop zone (firmware, configuration import), form-associated.kern-step-inputNumber field with − and + buttons, form-associated.kern-rangeSlider for brightness, volume or thresholds, form-associated.kern-ratingStar rating 1–max, form-associated (value 0 = not rated).kern-color-pickerColour field for smart-home lights, form-associated.Date & time
kern-dateFormatted date or point in time („19.10.2026, 10:15“) or relative („vor 3 Min.“, „gestern“) as <time>.kern-timeTime of day („06:30“) or duration („1 Std., 23 Min.“) as <time>.kern-calendarMonth view for picking a date or a range, inline or inside a picker.kern-date-pickerDate field with a calendar popover, form-associated.kern-date-range-pickerDate range field: two dates („Von“ – „Bis“) with a calendar popover (two months, one on narrow screens), form-associated.kern-time-pickerTime field with segments (hours, minutes, optional seconds and AM/PM), form-associated.Status
kern-badgeShort label for properties (Gen, firmware, function) and results in tables.kern-chipCompact pill for an active filter, a selected value or a tag.kern-statusState of a device, job or server: a dot whose shape and colour differ per tone, plus the word.kern-iconOne of Kern's glyphs (Lucide style), a brand icon (brand-github, brand-home-assistant …, from Simple Icons) or a country flag (flag-ch, flag-gb …, from flag-icons).Feedback
kern-alertMessage in the page flow: information, success, warning or error.kern-empty-statePlaceholder where content would be: nothing created yet (empty), no matches for the current filters (no-results) or the data could not be loaded (error).kern-toastShort, non-blocking feedback after an action („Snapshot gespeichert“).kern-tooltipShort hint for a control or an abbreviated value, shown on hover (after delay) and immediately on keyboard focus; Escape hides it.kern-dialogModal dialog for confirmations and short forms, on the native <dialog>.kern-drawerSide panel over the page for details, filters and longer forms, on the native modal <dialog> (focus stays inside and returns to the opener).kern-progressProgress of a long operation.kern-spinnerSmall busy indicator in the current text colour, for waits under a few seconds.kern-skeletonPlaceholder in the shape of content that is still loading, so the layout does not jump.Data
kern-tableDense data table: wraps a native <table> (light DOM, so cells can hold any markup and Angular bindings).kern-table-columnsColumn chooser for a kern-table in data mode: a checkbox per column to show or hide it and buttons to move it up or down (also Alt+↑/↓ in its row).kern-listList of rows (devices, settings, events): kern-list-item children, separated by lines, in a bordered box.kern-timelineHistory of events, e.g.kern-kvKey/value list for device information: kern-kv-item children, labels in a narrow column on the left.kern-statKey figure tile: label, large value with unit, optional change and a slot for a sparkline or meta text.kern-sparklineMini trend line without axes for tiles and table cells.kern-meterFill level with thresholds (RAM, flash, temperature, load).kern-signalWLAN signal strength: four bars plus dBm.kern-copyTechnical value in monospace with a copy button (MAC, IP, device ID, commands).kern-jsonCollapsible JSON tree for configs, status and device info (native <details>, keyboard accessible).kern-json-diffDifferences between two states of the same JSON (config before/after, target/actual, two firmware versions): one table row per changed, added or removed path, with a summary line above.kern-codeCode and commands: a block with copy button, optional heading (file name), line numbers, wrapping and a maximum height, highlighted for shell, PowerShell, yaml, json, js/ts, ini, html, Ruby and Go; or inline in running text.kern-logStructured log viewer: time, level, source and message per entry, a search and level/source filters that combine, a live mode that follows new entries, pause, copy and download.