@public-ui/components 4.1.2-rc.1 → 4.1.2-rc.3

package/dist/types/core/component-names.d.ts

@@ -39,7 +39,6 @@ export declare let KolModalTag: "kol-modal";
 export declare let KolNavTag: "kol-nav";
 export declare let KolPaginationTag: "kol-pagination";
 export declare let KolPaginationWcTag: "kol-pagination-wc";
-export declare let KolPopoverWcTag: "kol-popover-wc";
 export declare let KolPopoverButtonTag: "kol-popover-button";
 export declare let KolPopoverButtonWcTag: "kol-popover-button-wc";
 export declare let KolProgressTag: "kol-progress";

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ export { bootstrap, isInitialized, register } from './core/bootstrap';
 export * from './enums/bund';
 export * from './kolibri';
 export { KoliBri, KoliBriDevHelper } from './schema';
-export type { FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableHeaderCellWithLogic, KoliBriTableSelection, Optgroup, Option, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
+export type { EventValueOrEventCallback, FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableHeaderCellWithLogic, KoliBriTableSelection, Optgroup, Option, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
 export { BEM } from './schema/bem-registry';
 export { KolEvent } from './utils/events';
 export { isTooltipOpen } from './utils/tooltip-open-tracking';

package/dist/types/internal/functional-components/popover/api.d.ts

@@ -0,0 +1,5 @@
+import type { ApiFromConfig } from '../generic-types';
+export declare const popoverPropsConfig: {
+    readonly optional: readonly [import("../../props").PropDefinition<import("../../props").InternalPropValue<import("../../props").AlignProp>, import("../../props").AlignProp>];
+};
+export type PopoverApi = ApiFromConfig<typeof popoverPropsConfig>;

package/dist/types/internal/functional-components/popover/component.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionalComponent as FC } from '../../../stencil-public-runtime';
+import type { JSXBase } from '../../../stencil-public-runtime';
+import type { FunctionalComponentProps } from '../generic-types';
+import type { PopoverApi } from './api';
+export type PopoverFCProps = FunctionalComponentProps<PopoverApi> & JSXBase.HTMLAttributes<HTMLDivElement> & {
+    popoverRef?: (el?: HTMLDivElement) => void;
+    arrowRef?: (el?: HTMLDivElement) => void;
+};
+export declare const PopoverFC: FC<PopoverFCProps>;

package/dist/types/internal/functional-components/popover/controller.d.ts

@@ -0,0 +1,16 @@
+import type { AlignPropType } from '../../../schema';
+export declare class PopoverController {
+    private show;
+    private popoverElement?;
+    private arrowElement?;
+    private triggerElement?;
+    private align;
+    private cleanupAutoUpdate?;
+    setShow(value: boolean): void;
+    setPopoverElementRef: (element?: HTMLDivElement) => void;
+    setTriggerElement: (element?: HTMLElement) => void;
+    setAlign: (align: AlignPropType) => void;
+    private alignPopover;
+    private setupAutoUpdate;
+    destroy(): void;
+}

package/dist/types/internal/functional-components/popover/snapshot.test.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/internal/props/align.d.ts

@@ -0,0 +1,4 @@
+import type { AlignPropType } from '../../schema';
+import type { SimpleProp } from './helpers/factory';
+export type AlignProp = SimpleProp<'align', AlignPropType>;
+export declare const alignProp: import("./helpers/factory").PropDefinition<import("./helpers/factory").InternalPropValue<AlignProp>, AlignProp>;

package/dist/types/internal/props/index.d.ts

@@ -1 +1 @@
-export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./label";export*from"./loading";export*from"./max";export*from"./name";export*from"./quote";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";
+export*from"./align";export*from"./allow-markdown";export*from"./alt";export*from"./badge-text";export*from"./color";export*from"./helpers/factory";export*from"./hide-label";export*from"./href";export*from"./icons";export*from"./label";export*from"./loading";export*from"./max";export*from"./name";export*from"./quote";export*from"./show";export*from"./sizes";export*from"./span-icons";export*from"./src";export*from"./srcset";export*from"./unit";export*from"./value-number";export*from"./value-number-clamped";export*from"./variant-progress";export*from"./variant-quote";

package/dist/types/schema/components/index.d.ts

@@ -1 +1 @@
-export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-link";export*from"./card";export*from"./combobox";export*from"./details";export*from"./dialog";export*from"./drawer";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover";export*from"./popover-button";export*from"./progress";export*from"./quote";export*from"./select";export*from"./single-select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";
+export*from"./abbr";export*from"./accordion";export*from"./alert";export*from"./avatar";export*from"./badge";export*from"./breadcrumb";export*from"./button";export*from"./button-link";export*from"./card";export*from"./combobox";export*from"./details";export*from"./dialog";export*from"./drawer";export*from"./form";export*from"./heading";export*from"./icon";export*from"./image";export*from"./input-checkbox";export*from"./input-color";export*from"./input-date";export*from"./input-email";export*from"./input-file";export*from"./input-number";export*from"./input-password";export*from"./input-radio";export*from"./input-range";export*from"./input-text";export*from"./kolibri";export*from"./link";export*from"./link-button";export*from"./modal";export*from"./nav";export*from"./pagination";export*from"./popover-button";export*from"./progress";export*from"./quote";export*from"./select";export*from"./single-select";export*from"./skip-nav";export*from"./span";export*from"./spin";export*from"./split-button";export*from"./table";export*from"./tableStateless";export*from"./tabs";export*from"./textarea";export*from"./toaster";export*from"./toolbar";export*from"./tooltip";export*from"./tree";export*from"./tree-item";export*from"./version";

package/dist/types/schema/props/index.d.ts

@@ -1 +1 @@
-export*from"./accept";export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./align";export*from"./allow-multi-sort";export*from"./alt";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-sizes";export*from"./image-source";export*from"./image-srcset";export*from"./indeterminate";export*from"./inline";export*from"./label";export*from"./label-align";export*from"./level";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./max-length";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./popover-callbacks";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-fixed-cols";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-class-name";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./width";
+export*from"./accept";export*from"./access-key";export*from"./accordion-callbacks";export*from"./active";export*from"./adjust-height";export*from"./alert";export*from"./alert-type";export*from"./align";export*from"./allow-multi-sort";export*from"./alt";export*from"./alternative-button-link-role";export*from"./aria-controls";export*from"./aria-current-value";export*from"./aria-description";export*from"./aria-expanded";export*from"./aria-owns";export*from"./aria-selected";export*from"./auto-complete";export*from"./badge-text";export*from"./button-callbacks";export*from"./button-type";export*from"./button-variant";export*from"./checked";export*from"./collapsible";export*from"./color";export*from"./current-length";export*from"./custom-class";export*from"./details-callbacks";export*from"./disabled";export*from"./download";export*from"./error-list";export*from"./has-closer";export*from"./has-compact-button";export*from"./has-counter";export*from"./has-icons-when-expanded";export*from"./has-settings-menu";export*from"./has-value";export*from"./hide-label";export*from"./hide-msg";export*from"./hint";export*from"./href";export*from"./icons";export*from"./icons-input-checkbox";export*from"./id";export*from"./image-sizes";export*from"./image-source";export*from"./image-srcset";export*from"./indeterminate";export*from"./inline";export*from"./label";export*from"./label-align";export*from"./level";export*from"./link-on-callbacks";export*from"./link-target";export*from"./loading";export*from"./max";export*from"./max-length";export*from"./max-length-behavior";export*from"./modal";export*from"./msg";export*from"./multiple";export*from"./name";export*from"./open";export*from"./options";export*from"./pagination-position";export*from"./pattern";export*from"./placeholder";export*from"./popover-align";export*from"./quote";export*from"./read-only";export*from"./required";export*from"./resize-textarea";export*from"./rows";export*from"./short-key";export*from"./show";export*from"./spell-check";export*from"./suggestions";export*from"./sync-value-by-selector";export*from"./tab-behavior";export*from"./tab-index";export*from"./table-callbacks";export*from"./table-data";export*from"./table-data-foot";export*from"./table-fixed-cols";export*from"./table-header-cells";export*from"./table-selection";export*from"./toolbar-items";export*from"./tooltip-align";export*from"./touched";export*from"./type-input-date";export*from"./type-input-text";export*from"./unit";export*from"./variant-alert";export*from"./variant-class-name";export*from"./variant-input-checkbox";export*from"./variant-progress";export*from"./variant-quote";export*from"./variant/spin";export*from"./width";

package/doc/_skeleton.md

@@ -1,109 +1,79 @@
-# Refactoring-Auftrag: Komponente auf Skeleton/Internals-Architektur migrieren
+# TODO: Props-Pattern-Enforcement
 
-## Rolle
+## Problem
 
-Du bist ein **Senior Software Architect und Developer** mit über 15 Jahren Erfahrung in komponentenbasierter Frontend-Architektur. Du legst höchsten Wert auf:
+Wenn Props über `PropsConfigShape` + `ApiFromConfig` in `api.tsx` definiert werden, erzwingt TypeScript nur einen Teil des erforderlichen Boilerplates in der Web-Component-Klasse.
 
-- **Clean Architecture** — klare Schichtentrennung, Single Responsibility, Dependency Inversion.
-- **Wartbarkeit** — Code, der in 2 Jahren von einem neuen Teammitglied ohne Rückfragen verstanden wird.
-- **Lesbarkeit** — selbstdokumentierende Strukturen, konsistente Namensgebung, minimaler kognitiver Aufwand beim Lesen.
-- **Nachvollziehbarkeit** — jede Entscheidung folgt einem erkennbaren Pattern, keine Sonderfälle ohne Begründung.
-- **Reduktion** — du schreibst nicht mehr Code als nötig. Du löschst mutig, was nicht gebraucht wird.
+Das **Prop-Dreieck** besteht aus drei Teilen — nur einer davon ist type-erzwungen:
 
-Du arbeitest methodisch: erst analysieren, dann planen, dann umsetzen, dann validieren. Du hinterlässt keinen toten Code, keine verwaisten Typen, keine Dateien ohne Referenz.
+| Teil                                | Type-erzwungen?                                                           | Was passiert bei Fehlen                          |
+| ----------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------ |
+| Felddeklaration `_name!: string`    | **Ja** — via `ComponentProps<T>` in `WebComponentInterface`               | compile error                                    |
+| `@Prop()` Decorator                 | **Nein**                                                                  | kein Attribut-Binding, silent runtime bug        |
+| `@Watch('_name')` Decorator         | **Nein** (`watchName()` Methode wird erzwungen, aber nicht der Decorator) | Stencil ruft Methode nie auf, silent runtime bug |
+| Forwarding in `componentWillLoad()` | **Nein**                                                                  | Prop-Wert kommt nie im Controller an             |
 
----
+## Aktueller Stand
 
-## Auftrag
+`implements WebComponentInterface<SkeletonApi>` ist korrekt und schon vorhanden — es deckt alles ab, was TypeScript abdecken _kann_. Die Lücke ist Stencil-spezifisch: Stencil-Decorators sind reine Metadaten und für das TypeScript-Typsystem unsichtbar.
 
-Refaktoriere die angegebene Komponente so, dass sie vollständig der Referenzimplementierung im Skeleton-Blueprint und der Internals-Schicht entspricht. Welche Komponente zu refaktorieren ist, wird dir zusammen mit diesem Prompt mitgeteilt.
+## Lösungsoptionen
 
----
+### Option A: Custom ESLint-Regel (empfohlen, kurzfristig)
 
-## ⚠️ Arbeitsverzeichnis
+Eine AST-basierte Regel mit `@typescript-eslint`, die prüft:
 
-- **Skeleton** (`_skeleton/`) = **nur lesen**. Dient ausschließlich als Referenz und Vorlage.
-- **Komponentenverzeichnis** = **Arbeitsort**. Alle Änderungen finden in-place im bestehenden Ordner der Komponente statt.
+> Jedes Feld einer Klasse, die `implements WebComponentInterface<...>` trägt und dem Muster `_${name}` entspricht, muss `@Prop()` und ein `@Watch('_${name}')` besitzen.
 
----
+- Machbar ohne Änderungen am Typsystem
+- Greift in CI/CD und im Editor
+- Schließt die Lücke für bestehende und neue Komponenten
 
-## Verbindliche Spezifikation
+### Option B: Code-Generator für Prop-Dreieck-Boilerplate (empfohlen, langfristig)
 
-Die [ARC42.md](./ARC42.md) ist die **führende Architektur-Spezifikation**. Lies sie vollständig, bevor du mit dem Refactoring beginnst. Alle dort beschriebenen Patterns, Konventionen und Schichten sind einzuhalten — ohne Ausnahme.
+Ein Script/Tool, das aus `propsConfig` automatisch den WebComponent-Boilerplate erzeugt:
 
-Ergänzend gelten:
+```ts
+// aus: skeletonPropsConfig.required = [nameProp]
+// wird generiert:
 
-- `AGENTS.md` (Repository-Root)
-- `.github/copilot-instructions.md`
+@Prop() public _name!: string;
 
-Bei Widersprüchen hat die ARC42.md Vorrang.
+@Watch('_name')
+watchName(value?: string): void {
+    this.ctrl.watchName(value);
+}
 
----
-
-## Vorgehen
-
-### 1. Analyse
-
-- Lies **alle** Dateien im Komponentenverzeichnis.
-- Lies die Skeleton-Referenzimplementierung (`_skeleton/web-components/`) und die Internals-Schicht (`src/internal/`).
-- Erstelle eine **Gap-Analyse**: Was weicht von der Skeleton-Architektur ab?
-
-### 2. Props-First: Struktur aufbauen (KRITISCH — ZUERST!)
-
-**Bevor du die Komponente implementierst, musst du alle Props migrieren:**
-
-1. **Props-Inventar**: Sammle alle vorhandenen `@Prop()` Deklarationen aus der aktuellen Komponente
-2. **Pro Prop eine Datei** unter `src/internal/props/`:
-   - Dateiname: `<prop-name>.ts` (z.B. `label.ts`, `href.ts`, `disabled.ts`)
-   - Nutze `Prop<K, TExternal, TInternal>` oder `SimpleProp<K, T>`
-   - Implementiere `normalize()` und `validate()` via `createPropDefinition<P>()`
-3. **Props exportieren** in `src/internal/props/index.ts`
-4. **Props-Typen im Controller** verwenden (z.B. `InternalOf<P>`, `ExternalOf<P>`)
-
-**Warum Props-First?**
-
-- API-Verträge sind klar, bevor Implementation beginnt
-- Keine Props gehen verloren oder werden vergessen
-- Controller und Tests haben sichere Typen von Anfang an
-- Architektur muss nicht nachträglich angepasst werden
-
-### 3. Refactoring: Komponenten-Implementierung
-
-Erstelle bzw. ersetze die Dateien im Komponentenverzeichnis gemäß der ARC42-Schichten:
-
-1. **API-Definition** (`api.tsx`) — Interface für die Komponente (nutzt Props-Typen aus Schritt 2)
-2. **Controller** — erweitert `BaseController`, nutzt normalisierte Props, empfängt `setState` und `getState` als Callbacks
-3. **Functional Component** — stateless Renderer
-4. **Web Component** — Stencil `@Component` mit Lifecycle, Watchers, Rendering; erweitert `BaseWebComponent<Api>` und übergibt `this.setState` und `this.getState` an den Controller
-5. **CSS/SCSS** — bestehende Styles beibehalten, bei Bedarf anpassen
-6. **Tests** — Testdateien **neben** `component.tsx` erstellen bzw. aktualisieren (kein `test/`-Unterordner, siehe ARC42 Design Decision 11):
-   - `snapshot.spec.tsx` — Jest DOM-Snapshot-Tests (`executeSnapshotTests`)
-   - `interaction.e2e.ts` — Playwright Interaction-Tests (Klick, Tastatur, Events)
-
-### 4. Dead Code eliminieren
-
-Nach dem Refactoring darf **kein veralteter Code** zurückbleiben:
+// in componentWillLoad():
+// name: this._name,
+```
 
-- **Dateien löschen**: alte Type-/Interface-Dateien, alte Controller, verwaiste Module, leere Dateien.
-- **Code entfernen**: unused Types, Imports, auskommentierter Code, deprecated Wrapper.
-- **Prüfen**: Keine Datei ohne Referenz, keine Barrel-Files.
+- Eliminiert die Fehlerquelle bei neuen Props vollständig
+- Kein Scaffolding-Tool existiert aktuell im Projekt
 
-### 5. Validierung
+### Option C: JSDoc-Warnung auf `WebComponentInterface<T>` (minimal, sofort)
 
-```bash
-pnpm format
-pnpm lint
-pnpm --filter @public-ui/components test:unit
-pnpm --filter @public-ui/components build
+```ts
+/**
+ * @remarks
+ * TypeScript erzwingt Felddeklarationen und Watcher-Methodensignaturen.
+ * NICHT erzwungen werden: @Prop() Decorator, @Watch() Decorator, componentWillLoad() Forwarding.
+ * Alle drei Teile des Prop-Dreiecks müssen manuell korrekt implementiert werden.
+ */
+export type WebComponentInterface<T extends ComponentApi> = ...
 ```
 
-Alle vier Befehle müssen fehlerfrei durchlaufen. **Kein Befehl darf vor dem Timeout abgebrochen werden.**
+## Offene Punkte (Needs Deeper Look)
 
----
+- [ ] **Custom ESLint-Regel implementieren** für `@Prop()` + `@Watch()` Enforcement
+- [ ] **Code-Generator** für Prop-Dreieck-Boilerplate aus `propsConfig`
+- [ ] **`label` State-Disconnect im Skeleton** beheben — `@State label = 'Label'` im WebComponent und `'Click me'` im Controller sind unverbunden
+- [ ] **`@Watch('_name')` Typo-Risiko** — `@Watch('_nane')` wäre kein TypeScript-Fehler; ESLint-Regel würde das mit abdecken
+- [ ] **Alle Komponenten auditen** (`avatar`, `click-button`, `icon`, `image`, `progress`, `quote`) auf Prop-Dreieck-Vollständigkeit
+- [ ] **A11y-Tests** für Skeleton hinzufügen — kein `*.e2e.ts` / `*.spec.ts` vorhanden
+- [ ] **`event.preventDefault()` in `ClickButtonFC`** prüfen — blockiert alle Keyboard-Events (NVDA/JAWS-Test nötig)
+- [ ] **JSDoc `@remarks`** auf `WebComponentInterface<T>` in `generic-types.ts` ergänzen
 
-## Ausgabe
+## Accessibility-Risiko
 
-1. **Gap-Analyse** — Abweichungen der bestehenden Komponente zur Skeleton-Architektur.
-2. **Gelöschte Dateien** — Liste mit Begründung pro Datei.
-3. **Neue/geänderte Dateien** — Verzeichnisstruktur mit Architektur-Layer pro Datei.
-4. **Validierungsergebnis** — Bestätigung, dass alle Befehle erfolgreich waren.
+Bei fehlendem Prop-Wiring entsteht konkret eine WCAG-4.1.2-Verletzung (Name, Role, Value): Buttons erhalten keinen accessible name oder einen falschen Fallback-Text. `axe-core` würde dies in e2e-Tests fangen — aber nur wenn solche Tests existieren.

package/doc/abbr.md

@@ -3,6 +3,11 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.
+The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.
+
 ## Properties
 
 | Property | Attribute | Description                                                                                                        | Type                  | Default     |

package/doc/accordion.md

@@ -3,6 +3,12 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.
+
+Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.
+
 ## Properties
 
 | Property              | Attribute   | Description                                                                                                        | Type                                                                                      | Default     |
@@ -29,9 +35,9 @@ Type: `Promise<void | undefined>`
 
 ## Slots
 
-| Slot | Description                                                                     |
-| ---- | ------------------------------------------------------------------------------- |
-|      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |
+| Slot | Description                                                                  |
+| ---- | ---------------------------------------------------------------------------- |
+|      | Allows arbitrary HTML to be inserted into the content area of the accordion. |
 
 
 ----------------------------------------------

package/doc/alert.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert.
+
 ## Properties
 
 | Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |
@@ -18,9 +22,9 @@
 
 ## Slots
 
-| Slot | Description             |
-| ---- | ----------------------- |
-|      | Der Inhalt der Meldung. |
+| Slot | Description                      |
+| ---- | -------------------------------- |
+|      | The content of the notification. |
 
 
 ----------------------------------------------

package/doc/avatar.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Avatar** component displays either a small image of the user or their initials if no image is available.
+
 ## Properties
 
 | Property              | Attribute | Description                                                                                                        | Type                                                                           | Default     |

package/doc/badge.md

@@ -3,6 +3,11 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Badge** component allows you to visually highlight specific information.
+In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
+
 ## Properties
 
 | Property              | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |

package/doc/breadcrumb.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.
+
 ## Properties
 
 | Property              | Attribute | Description                                                                                                        | Type                              | Default     |

package/doc/button-link.md

@@ -3,6 +3,18 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.
+
+A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.
+
+Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.
+
+A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
+
+Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.
+
 ## Properties
 
 | Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
@@ -50,6 +62,13 @@ Type: `Promise<StencilUnknown>`
 
 
 
+## Slots
+
+| Slot       | Description                                        |
+| ---------- | -------------------------------------------------- |
+| `"expert"` | Custom label content, e.g. for rich text or icons. |
+
+
 ----------------------------------------------
 
 

package/doc/button.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.
+
 ## Properties
 
 | Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
@@ -51,6 +55,13 @@ Type: `Promise<StencilUnknown>`
 
 
 
+## Slots
+
+| Slot       | Description                                        |
+| ---------- | -------------------------------------------------- |
+| `"expert"` | Custom label content, e.g. for rich text or icons. |
+
+
 ----------------------------------------------
 
 

package/doc/card.md

@@ -1,8 +1,16 @@
-# kol-card-wc
+# kol-card
 
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.
+
+The **Card** component consists of a **_title area_** and a **_content area_**.
+
+The **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.
+
 ## Properties
 
 | Property              | Attribute     | Description                                                                                                        | Type                                                            | Default     |
@@ -15,9 +23,9 @@
 
 ## Slots
 
-| Slot | Description                                                               |
-| ---- | ------------------------------------------------------------------------- |
-|      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card. |
+| Slot | Description                                                             |
+| ---- | ----------------------------------------------------------------------- |
+|      | Allows arbitrary HTML to be inserted into the content area of the card. |
 
 
 ----------------------------------------------

package/doc/combobox.md

@@ -52,9 +52,9 @@ Type: `Promise<string>`
 
 ## Slots
 
-| Slot | Description                         |
-| ---- | ----------------------------------- |
-|      | Die Beschriftung des Eingabefeldes. |
+| Slot | Description                   |
+| ---- | ----------------------------- |
+|      | The label of the input field. |
 
 
 ----------------------------------------------

package/doc/details.md

@@ -3,6 +3,16 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Details** component allows additional information to be initially shown with a short introductory text,
+which is only fully expanded after the user clicks on an arrow icon.
+
+By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon
+followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon
+changes its orientation from **_right_** to **_down_**.
+The component can also be closed again to hide the content.
+
 ## Properties
 
 | Property              | Attribute   | Description                                                                                                        | Type                                                                                       | Default     |
@@ -29,9 +39,9 @@ Type: `Promise<void | undefined>`
 
 ## Slots
 
-| Slot | Description                                               |
-| ---- | --------------------------------------------------------- |
-|      | Der Inhalt, der in der Detailbeschreibung angezeigt wird. |
+| Slot | Description                                      |
+| ---- | ------------------------------------------------ |
+|      | The content displayed in the detail description. |
 
 
 ----------------------------------------------

package/doc/form.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
+
 ## Properties
 
 | Property        | Attribute        | Description                                                                                                                                                                             | Type                                                                                                          | Default     |
@@ -27,9 +31,9 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot | Description      |
-| ---- | ---------------- |
-|      | Inhalt der Form. |
+| Slot | Description              |
+| ---- | ------------------------ |
+|      | The content of the form. |
 
 
 ----------------------------------------------

package/doc/heading.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Heading** component can be used wherever a heading needs to be displayed. By using the different sizes, content can be clearly structured and pages can be presented effectively and with variety. It separates styling from semantics and enables flexibility.
+
 ## Properties
 
 | Property              | Attribute             | Description                                                                                                                                                  | Type                                           | Default     |
@@ -14,9 +18,9 @@
 
 ## Slots
 
-| Slot | Description             |
-| ---- | ----------------------- |
-|      | Inhalt der Überschrift. |
+| Slot | Description          |
+| ---- | -------------------- |
+|      | The heading content. |
 
 
 ----------------------------------------------

package/doc/icon.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Icon** component allows icons from included icon fonts to be displayed at any position.
+
 ## Properties
 
 | Property              | Attribute | Description                                                                                                        | Type     | Default     |

package/doc/image.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.
+
 ## Properties
 
 | Property            | Attribute  | Description                                                                   | Type                             | Default     |

package/doc/input-checkbox.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.
+
 ## Properties
 
 | Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                            | Default     |

package/doc/input-color.md

@@ -3,6 +3,10 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.
+
 ## Properties
 
 | Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |
@@ -51,9 +55,9 @@ Type: `Promise<string | undefined>`
 
 ## Slots
 
-| Slot | Description                         |
-| ---- | ----------------------------------- |
-|      | Die Beschriftung des Eingabefeldes. |
+| Slot | Description                   |
+| ---- | ----------------------------- |
+|      | The label of the input field. |
 
 
 ----------------------------------------------