Skip to content

mur-dock/PublicKernBlazor

BranchesTags

Repository files navigation

PublicKernBlazor.Components

KERN-UX Design System als Blazor Component Library – typsichere, barrierefreie Komponenten für die deutsche Verwaltung (WCAG 2.1 AA).

CI NuGet KERN-UX Lizenz: EUPL-1.2

Inhalt

Was ist PublicKernBlazor.Components?

PublicKernBlazor.Components übersetzt das offizielle KERN-UX Design System in eine Razor Class Library. Entwicklerinnen und Entwickler können alle KERN-Komponenten direkt als Blazor-Komponenten verwenden – ohne KERN-CSS-Klassen manuell kennen zu müssen.

Kern-Vorteile:

  • ✅ Alle 48 KERN-UX-Komponenten als typsichere Blazor-Komponenten
  • ✅ KERN-CSS als statische Assets (_content/PublicKernBlazor.Components/css/) inklusive
  • ✅ WCAG 2.1 AA – ARIA-Attribute, semantisches HTML, Fokus-Management
  • ✅ Light- und Dark-Theme out-of-the-box
  • ✅ Kein JavaScript außer dem technisch unvermeidbaren Minimum
  • ✅ Vollständige XML-Dokumentation für IntelliSense

Voraussetzungen

Anforderung Version
.NET 10.0
Blazor Server oder WebAssembly 10.0

Installation

dotnet add package PublicKernBlazor.Components

DI-Registrierung (Program.cs)

using PublicKernBlazor.Components.Extensions;

builder.Services.AddKernUx();

AddKernUx() registriert:

  • ThemeService (Scoped) – Theme-Verwaltung (Light/Dark)
  • IdGeneratorService (Scoped) – eindeutige IDs für aria-describedby

Imports (_Imports.razor)

@using PublicKernBlazor.Components.Components.Content
@using PublicKernBlazor.Components.Components.Feedback
@using PublicKernBlazor.Components.Components.Forms
@using PublicKernBlazor.Components.Components.Layout
@using PublicKernBlazor.Components.Components.Navigation
@using PublicKernBlazor.Components.Components.Shared
@using PublicKernBlazor.Components.Components.Typography
@using PublicKernBlazor.Components.Enums
@using PublicKernBlazor.Components.Services

CSS-Assets einbinden

Option A – KernStyles-Komponente (empfohlen)

@* App.razor oder MainLayout.razor *@
<KernStyles />

Die Komponente rendert automatisch alle notwendigen <link>-Elemente.

Option B – manuell in App.razor

<link rel="stylesheet" href="_content/PublicKernBlazor.Components/css/themes/kern/index.css"/>

JS-Asset für Dialog

<script src="_content/PublicKernBlazor.Components/js/kern-dialog.js"></script>

Theming (Light / Dark)

Root-Layout mit KernThemeProvider

<KernThemeProvider Theme="KernTheme.Light">
    <Router AppAssembly="typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" />
        </Found>
    </Router>
</KernThemeProvider>

Theme programmatisch wechseln

@inject ThemeService ThemeService

<KernButton OnClick="ThemeService.Toggle">Theme wechseln</KernButton>

Das Theme wird über das Attribut data-kern-theme="light|dark" am Wrapper-Element gesteuert und im Cookie kern-theme persistiert.

Komponenten-Übersicht

Layout

Komponente Beschreibung Wichtigste Parameter
KernContainer Inhalts-Container mit optionalem Fluid-Modus Fluid
KernRow Grid-Zeile AlignItems, JustifyContent
KernCol Grid-Spalte Span, SpanSm–SpanXxl, Offset
KernThemeProvider Theme-Root-Wrapper Theme

Typografie

Komponente Beschreibung Wichtigste Parameter
KernHeading Überschrift (Display–Small) Level, Element
KernTitle Seiten-/Abschnittstitel Size
KernBody Fließtext Bold, Muted, Size
KernLabel Formular-Label For, Optional
KernSubline Unterzeile Size
KernPreline Vortext Size

Shared

Komponente Beschreibung Wichtigste Parameter
KernIcon Symbolschrift-Icon Glyph, Size, AriaHidden, AriaLabel
KernDivider Horizontale Trennlinie AriaHidden
KernStyles CSS-Link-Einbindung –
KernLink Anker-Link Href, Stretched, Target
KernList Listen (Bullet/Nummeriert) Variant, Size

Navigation

Komponente Beschreibung Wichtigste Parameter
KernKopfzeile Bundesbehörden-Kopfzeile Label, Fluid

Formular-Elemente

Komponente Beschreibung Wichtigste Parameter
KernButton Aktions-Schaltfläche Variant, Icon, IconOnly, Block, Disabled
KernInputText Text-Eingabe Label, Value, Hint, Error, Optional
KernInputEmail E-Mail-Eingabe Label, Value, Autocomplete
KernInputPassword Passwort-Eingabe Label, Value
KernInputTel Telefon-Eingabe Label, Value, Autocomplete
KernInputUrl URL-Eingabe Label, Value
KernInputNumber Numerische Eingabe Label, Value
KernInputDate Datum (TT/MM/JJJJ) Label, Day, Month, Year
KernInputFile Datei-Upload Label, Accept, OnFileSelected
KernInputCurrency Währungsbetrag (DACH) Label, Value, CurrencySymbol, CultureName
KernTextarea Mehrzeiliger Text Label, Value, Rows
KernSelect Auswahlmenü Label, Value, Options
KernCheckbox Einzelne Checkbox Label, Checked
KernCheckboxList Checkbox-Gruppe Legend, Items, SelectedValues
KernRadioGroup Radio-Button-Gruppe Legend, Items, Value
KernFieldset Formular-Gruppe Legend, Hint, Error, Horizontal

Feedback & Status

Komponente Beschreibung Wichtigste Parameter
KernAlert Hinweis-/Fehlermeldung Type, Title
KernBadge Status-Kennzeichnung Variant
KernLoader Ladeindikator Visible, ScreenReaderText
KernProgress Fortschrittsanzeige Value, Max, Label

Content & Darstellung

Komponente Beschreibung Wichtigste Parameter
KernAccordion Auf-/Zuklappbarer Bereich Title, Open, OnToggle
KernAccordionGroup Accordion-Container –
KernCard Inhalts-Karte Size, Active
KernCardMedia Karten-Bild –
KernCardContainer Karten-Inhalt-Wrapper –
KernDialog Modaler Dialog Title, Open, OnClose
KernTable Datentabelle Caption, Small, Striped, Responsive
KernDescriptionList Beschreibungsliste Column, Items
KernSummary Zusammenfassungs-Block Title, EditHref, Number
KernSummaryGroup Summary-Gruppen-Container –
KernTaskList Aufgaben-/Schritt-Liste –
KernTaskListItem Einzelner Aufgaben-Schritt Title, Number, Href, StatusContent
KernTaskListGroup Aufgaben-Gruppen-Container Title

Barrierefreiheit

PublicKernBlazor.Components implementiert WCAG 2.1 AA:

Anforderung Umsetzung
Semantisches HTML <button>, <fieldset>, <legend>, <dialog>, <caption>
ARIA-Attribute aria-describedby, aria-expanded, aria-hidden, aria-label, role="alert"
Eindeutige IDs IdGeneratorService generiert kollisionsfreie IDs pro Instanz
Fokus-Management KERN-Fokus-Styles werden nie unterdrückt
Tastatur-Navigation Alle interaktiven Elemente sind per Tastatur bedienbar
Kontrast KERN-Theme erfüllt WCAG 2.1 AA Kontrastanforderungen

Erweiterungen gegenüber KERN-UX

Folgende Komponenten sind Blazor-Library-Erweiterungen und nicht Teil des offiziellen KERN-UX-Standards:

Komponente Beschreibung
KernInputCurrency Währungseingabe optimiert für DACH (de-DE/de-CH), mit decimal?-Binding

Die zugehörigen SCSS-Erweiterungen liegen in Styles/extensions/ und werden bei KERN-UX-Updates nicht überschrieben. Siehe Styles/extensions/README.md.

Projektstruktur

PublicKernBlazor.Components/                              ← Repository-Root
├── src/
│   ├── PublicKernBlazor.Components/                      ← Razor Class Library (NuGet-Paket)
│   │   ├── Components/
│   │   │   ├── Content/                    # Accordion, Card, Dialog, Table, Summary, TaskList
│   │   │   ├── Feedback/                   # Alert, Badge, Loader, Progress
│   │   │   ├── Forms/                      # Button, alle Input-Typen, Select, Checkbox, Radio, Fieldset
│   │   │   ├── Layout/                     # Container, Row, Col, ThemeProvider
│   │   │   ├── Navigation/                 # Kopfzeile, Link, List
│   │   │   ├── Shared/                     # Icon, Divider, KernStyles
│   │   │   └── Typography/                 # Heading, Title, Body, Label, Subline, Preline
│   │   ├── Enums/                          # Typsichere Enums für alle Parameter
│   │   ├── Extensions/                     # AddKernUx() DI-Erweiterung
│   │   ├── Services/                       # ThemeService, IdGeneratorService
│   │   ├── Styles/
│   │   │   ├── core/                       # KERN-UX SCSS (nicht bearbeiten – wird bei Updates überschrieben)
│   │   │   ├── extensions/                 # Projekt-spezifische SCSS-Ergänzungen (update-sicher)
│   │   │   └── themes/kern/                # KERN-Theme Entry Point
│   │   ├── Utilities/                      # CssBuilder, EnumCssExtensions
│   │   └── wwwroot/
│   │       ├── css/                        # Kompilierte CSS-Dateien
│   │       └── js/                         # kern-dialog.js
│   └── PublicKernBlazor.Demo/                 ← Interaktive Showcase-App
├── tests/
│   ├── PublicKernBlazor.Components.Tests/                ← bUnit-Unit-Tests (Rendering, Interaktion, Accessibility)
│   └── PublicKernBlazor.Demo.SmokeTests/      ← Playwright-Smoke-Tests
├── docs/
│   ├── contributing/                       # Entwickler-Dokumentation
│   └── internal/                           # Interne Planungsdokumente
├── scripts/                                # PowerShell-Hilfsskripte
└── .github/
    ├── workflows/                          # CI- und Release-Workflows
    ├── ISSUE_TEMPLATE/                     # Strukturierte Issue-Formulare
    └── PULL_REQUEST_TEMPLATE.md

Entwicklung & Tests

Tests ausführen

dotnet test tests/PublicKernBlazor.Components.Tests/PublicKernBlazor.Components.Tests.csproj

Das Testprojekt enthält:

  • Rendering-Tests – alle Komponenten werden auf korrekte HTML-Ausgabe geprüft
  • Interaktions-Tests – EventCallbacks, State-Änderungen
  • Accessibility-Audit-Tests – ARIA-Attribute, semantisches HTML

NuGet-Paket erstellen

dotnet pack src/PublicKernBlazor.Components/PublicKernBlazor.Components.csproj --configuration Release

SCSS-Kompilierung

SCSS wird beim Build automatisch via AspNetCore.SassCompiler nach wwwroot/css/ kompiliert.

Eigene SCSS-Erweiterungen

Neue Stile gehören nach Styles/extensions/components/ und müssen in Styles/extensions/index.scss per @use registriert werden. Niemals Styles/core/ direkt bearbeiten.

Ausführliche Anleitung: docs/contributing/development-setup.md

Beitragen

Contributions sind willkommen! Bitte lies zuerst CONTRIBUTING.md.

Changelog

Alle Änderungen sind in CHANGELOG.md dokumentiert.

Lizenz

MIT – siehe LICENSE.

KERN-UX ist ein offener UX-Standard für die deutsche Verwaltung. Mehr Infos: kern-ux.de | GitLab

About

No description, website, or topics provided.

Resources

Readme

License

EUPL-1.2 license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

v1.0.0 Latest
Mar 15, 2026

Packages

 
 
 

Contributors

Languages