@kern-ux/native - npm Package Compare versions

Comparing version 2.6.1 to 2.6.2

CHANGELOG.md

@@ -0,1 +1,8 @@
+## [2.6.2](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.6.1...v2.6.2) (2026-05-26)
+
+
+### Bug Fixes
+
+* **Tokens:** resolve invalid css var syntax for layout-background-overlay [#250](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/250) ([55af05f](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/55af05f7a429affbc5ecd620135ec9fd991dfdf3))
+
 ## [2.6.1](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.6.0...v2.6.1) (2026-05-20)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@kern-ux/native",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Native Styles und Komponenten-Bibliothek für das KERN-UX Design System. Beinhaltet CSS, Fonts und KERN-Komponenten.",
@@ -14,4 +14,7 @@ "author": "Kern-UX",
     "type": "git",
-    "url": "https://gitlab.opencode.de/kern-ux/kern-ux-plain"
+    "url": "git+https://gitlab.opencode.de/kern-ux/kern-ux-plain.git"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "contributors": [
@@ -37,3 +40,11 @@ "Tom Marienfeld <[e-mail]>",
     "dachmarke",
-    "ux"
+    "ux",
+    "accessibility",
+    "barrierefreiheit",
+    "government",
+    "public-administration",
+    "open-source",
+    "opencode",
+    "html-css",
+    "components"
   ],
@@ -46,2 +57,3 @@ "scripts": {
     "build": "vite build --config vite.config.prod.js && vite build --config vite.config.dev.js && storybook build",
+    "test": "npm run test:a11y",
     "test:visual": "npx backstop reference && npx backstop test",
@@ -48,0 +60,0 @@ "test:a11y": "node scripts/a11y.js",

README.md

@@ -1,68 +0,186 @@
-# KERN – Plain-CSS-HTML-Kit
+# KERN Design System – Plain-CSS-HTML-Kit
 
-Dieses Repository enthält die CSS/HTML-Implementation des KERN Design-Systems.
+[![npm version](https://img.shields.io/npm/v/@kern-ux/native.svg)](https://www.npmjs.com/package/@kern-ux/native)
+[![License: EUPL 1.2](https://img.shields.io/badge/License-EUPL%201.2-blue.svg)](LICENSE.md)
 
-Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln.
-KERN ist ein Open-Source-Projekt, das von der Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle mit Interesse an der Digitalisierung der öffentlichen Verwaltung sind herzlich eingeladen, Teil der bundesweiten interdisziplinären Community zu werden. Alle Informationen auf: www.kern-ux.de.
+---
 
-## Beitragen
+### [Deutsch](#deutsch-1) | [English](#english-1)
 
-Die Entwicklung des KERN Design-Systems ist im [Hauptrepository](https://gitlab.opencode.de/kern-ux/pattern-library) organisiert.
+---
 
-Für Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, schaue dir bitte unsere [Contributing Guidelines](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/blob/main/CONTRIBUTING.md?ref_type=heads) an. Wir freuen uns auf deinen Beitrag!
+## Deutsch
 
-## Installation und Nutzung
+### Was ist KERN?
+Mit **KERN** schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln. KERN ist ein Open-Source-Projekt, das von den Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle Informationen findest du auf [www.kern-ux.de](https://www.kern-ux.de).
 
+Dieses Repository enthält die Plain CSS/HTML-Referenzimplementation des KERN-Designsystems und ist auf npm unter dem Namen **`@kern-ux/native`** verfügbar.
+
+---
+
+## English
+
+### What is KERN?
+**KERN** is an open UX standard for the German public administration. It enables development teams to build accessible digital government services efficiently and with a user-centered focus. KERN is an open-source project initiated by the federal states of Hamburg and Schleswig-Holstein. Learn more at [www.kern-ux.de](https://www.kern-ux.de).
+
+This repository contains the plain CSS/HTML reference implementation of the KERN Design System, published on npm as **`@kern-ux/native`**.
+
+---
+
+## 🚀 Einbindung & Installation
+
+Du kannst KERN auf drei verschiedene Arten in dein Projekt integrieren:
+
+### Methode 1: Einbindung über NPM (Empfohlen)
+Füge `@kern-ux/native` zu deinen Projektabhängigkeiten hinzu:
 ```bash
+npm install @kern-ux/native --save
+```
+
+Binde anschließend die CSS-Stylesheets und Schriftarten ein:
+```javascript
+// JavaScript / TypeScript Bundler
+import '@kern-ux/native/dist/kern.min.css';
+import '@kern-ux/native/dist/fonts/fira-sans.css'; // Hauptschriftart (Fira Sans)
+import '@kern-ux/native/dist/fonts/noto-sans.css'; // Optional (Noto Sans)
+```
+Oder in deiner Haupt-CSS/SCSS-Datei:
+```css
+@import "@kern-ux/native/dist/kern.min.css";
+@import "@kern-ux/native/dist/fonts/fira-sans.css";
+```
+
+### Methode 2: Einbindung per CDN
+Wenn du KERN ohne ein Buildtool/NPM verwenden möchtest, binde die CSS-Dateien direkt über ein CDN in deinen `<head>` ein:
+
+* **Alternative A: jsdelivr**
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/kern.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kern-ux/native/dist/fonts/fira-sans.css" />
+  ```
+
+* **Alternative B: unpkg**
+  ```html
+  <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/kern.min.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@kern-ux/native/dist/fonts/fira-sans.css" />
+  ```
+
+### Methode 3: Kopieren der Bibliothek
+Lade die neueste Version direkt als ZIP-Archiv von der [Release-Seite des KERN-UX Repositories](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/releases) herunter. Entpacke die ZIP-Datei und binde die kompilierten CSS-Dateien oder die SCSS-Quelldateien direkt in dein Projekt ein.
+
+---
+
+## 🛠 Einbindung & Imports
+
+### JavaScript-Komponenten
+Interaktive Komponenten (wie das Kopfzeilen-Menü) benötigen das mitgelieferte JavaScript zur Initialisierung:
+```javascript
+import '@kern-ux/native/dist/js/kern-kopfzeile.js';
+```
+
+---
+
+## 🧩 Komponenten-Beispiele
+
+Hier sind einige grundlegende Komponenten-Markups mit BEM-Klassen (`kern-*`) und integrierten Barrierefreiheits-Attributen:
+
+### 1. Buttons
+```html
+<button type="button" class="kern-btn kern-btn--primary">
+  <span class="kern-label">Primary Button</span>
+</button>
+<button type="button" class="kern-btn kern-btn--secondary">
+  <span class="kern-label">Secondary Button</span>
+</button>
+<button type="button" class="kern-btn kern-btn--tertiary">
+  <span class="kern-label">Tertiary Button</span>
+</button>
+```
+
+### 2. Badges
+```html
+<span class="kern-badge kern-badge--info">
+  <span class="kern-label">Information</span>
+</span>
+<span class="kern-badge kern-badge--success">
+  <span class="kern-label">Erfolg</span>
+</span>
+<span class="kern-badge kern-badge--warning">
+  <span class="kern-label">Warnung</span>
+</span>
+<span class="kern-badge kern-badge--danger">
+  <span class="kern-label">Fehler</span>
+</span>
+```
+
+### 3. Description List (Beschreibungsliste)
+```html
+<dl class="kern-description-list">
+  <div class="kern-description-list-item">
+    <dt class="kern-description-list-item__key">Name</dt>
+    <dd class="kern-description-list-item__value">Musterperson</dd>
+  </div>
+  <div class="kern-description-list-item">
+    <dt class="kern-description-list-item__key">Vorname</dt>
+    <dd class="kern-description-list-item__value">Kim</dd>
+  </div>
+  <div class="kern-description-list-item">
+    <dt class="kern-description-list-item__key">E-Mail</dt>
+    <dd class="kern-description-list-item__value">[e-mail]</dd>
+  </div>
+  <div class="kern-description-list-item">
+    <dt class="kern-description-list-item__key">Adresse</dt>
+    <dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
+  </div>
+</dl>
+```
+
+---
+
+## ♿️ Barrierefreiheit
+
+Barrierefreiheit ist der Kern unseres Design-Systems:
+- Farbkontraste erfüllen die WCAG 2.1 AA/AAA Richtlinien.
+- Semantisches HTML5 und korrekte WAI-ARIA-Rollen werden aktiv unterstützt.
+- Der Tastatur-Fokus ist in allen interaktiven Zuständen deutlich erkennbar.
+
+> 💡 **Wichtiger Hinweis für Entwickler:innen:**
+> Auf jeder einzelnen Komponentenseite auf [kern-ux.de](https://www.kern-ux.de) (wie z. B. auf der [Button-Komponentenseite](https://www.kern-ux.de/komponenten/button#barrierefreiheit)) findest du am Ende einen dedizierten Abschnitt zur **Barrierefreiheit**. Hier siehst du übersichtlich, was bereits geprüft wurde und worauf du bei der Einbindung in deiner Anwendung noch achten musst. Nutze dort die bereitgestellten Checklisten zur Absicherung.
+
+---
+
+## 💻 Lokale Entwicklung (für Mitwirkende)
+Wenn du am Plain-Kit selbst mitwirken möchtest:
+```bash
 git clone https://gitlab.opencode.de/kern-ux/kern-ux-plain.git
 cd kern-ux-plain
 npm install
-npm start
+npm start # Startet die Storybook-Entwicklungsumgebung auf Port 6006
 ```
 
-## Changelog
+Verfügbare Befehle:
+- `npm run build` - Kompiliert SCSS/CSS und baut Storybook
+- `npm run test:a11y` - Führt automatisierte Barrierefreiheits-Tests aus
+- `npm run test:visual` - Führt visuelle Regressionstests via BackstopJS aus
 
-[Die Changelog-Datei ist hier zu finden.](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/blob/main/CHANGELOG.md)
+---
 
-## Komponenten
+## 🤝 Beitragen
 
-Auf der Produktwebseite findet sich die [Dokumentation zu den Komponenten](https://www.kern-ux.de/komponenten).
+Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den CSS/HTML-Code beziehen, können im [Issue-Tracker auf OpenCode](https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/issues) gemeldet werden.
 
-- Kern-Accordion
-- Kern-Alert
-- Kern-Badge
-- Kern-Button
-- Kern-Card
-- Kern-Dialog
-- Kern-Divider
-- Kern-Fieldset
-- Kern-Icon
-- Kern-InputDate
-- Kern-InputEmail
-- Kern-InputFile
-- Kern-InputNumber
-- Kern-InputPassword
-- Kern-InputTel
-- Kern-InputText
-- Kern-InputUrl
-- Kern-Checkbox
-- Kern-Checkbox-List
-- Kern-Description-List
-- Kern-Kopfzeile
-- Kern-Loader
-- Kern-Progress
-- Kern-Radios
-- Kern-Select
-- Kern-Summary
-- Kern-Table
-- Kern-TaskList
-- Kern-Textarea
-- Kern-Grid
-- Kern-Heading
-- Kern-Title
-- Kern-Preline
-- Kern-Subline
-- Kern-Label
-- Kern-Body
-- Kern-Link
-- Kern-Lists
+Bitte lies unsere [Contributing Guidelines](CONTRIBUTING.md) vor der Erstellung eines Merge Requests.
+
+---
+
+## 📄 Lizenz
+
+Lizenziert unter der **EUPL-1.2** (European Union Public Licence v. 1.2). Weitere Details findest du in der [LICENSE.md](LICENSE.md) Datei.
+
+---
+
+## 🔗 Nützliche Links
+- [KERN Offizielle Webseite](https://www.kern-ux.de)
+- [Komponenten-Dokumentation](https://www.kern-ux.de/komponenten)
+- [KERN Plain-CSS-HTML-Kit Repository](https://gitlab.opencode.de/kern-ux/kern-ux-plain)
+- [Projekt-Roadmap](https://www.kern-ux.de/ueber-kern/roadmap)

src/scss/core/tokens/_theme.scss

@@ -82,3 +82,3 @@ /**
     --kern-color-layout-background-inverted: var(--kern-color-black);
-    --kern-color-layout-background-overlay: var(--kern-color-white / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming
+    --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-white) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
     /* form-inputs */
@@ -165,3 +165,3 @@ --kern-color-form-input-background: var(--kern-color-neutral-025);
     --kern-color-layout-background-inverted: var(--kern-color-white);
-    --kern-color-layout-background-overlay: var(--kern-color-black / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming
+    --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
 
@@ -250,3 +250,3 @@ /* form-inputs */
 //     --kern-color-layout-background-inverted: var(--kern-color-white);
-//     --kern-color-layout-background-overlay: var(--kern-color-black / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming
+//     --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
 // 
@@ -334,3 +334,3 @@ //     /* form-inputs */
 //     --kern-color-layout-background-inverted: var(--kern-color-white);
-//     --kern-color-layout-background-overlay: var(--kern-color-black / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming
+//     --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
 // 
@@ -337,0 +337,0 @@ //     /* form-inputs */

No alert changes

Improved metrics

Total package byte prevSize

6472775

0.1%

Number of lines in readme file

187

171.01%

No dependency changes