PublicKernBlazor.Components 1.0.0

PublicKernBlazor.Components

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

Inhalt

• Was ist PublicKernBlazor.Components?
• Voraussetzungen
• Installation
• Schnellstart
• CSS-Assets einbinden
• Theming (Light / Dark)
• Komponenten-Übersicht
• Barrierefreiheit
• Erweiterungen gegenüber KERN-UX
• Projektstruktur
• Entwicklung & Tests
• Beitragen
• Changelog
• Lizenz

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

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

Typografie

Shared

Navigation

Formular-Elemente

Feedback & Status

Content & Darstellung

Barrierefreiheit

PublicKernBlazor.Components implementiert WCAG 2.1 AA:

Erweiterungen gegenüber KERN-UX

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

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.

• 🐛 Bug melden: Bug-Report-Vorlage
• ✨ Feature vorschlagen: Feature-Request-Vorlage
• 🛡️ Sicherheitslücke melden: Bitte vertraulich über SECURITY.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