@public-ui/components 2.2.11 → 3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.0

package/doc/combobox.md

@@ -1,81 +1,30 @@
-# Combobox `preview`
-
-Synonyme: Autocomplete, Select, Dropdown
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
-```
-
-### Beispiel
-
-<kol-combobox  _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
-
-## Verwendung
-
-Die Auswahlmöglichkeiten werden über das Attribut **`_suggestions`** als JSON-Array an die Komponente übergeben.
-
-Beispiel für die Konstruktion des JSON-Array:
-
-```json
-["Herr", "Frau", "Firma"]
-```
-
-<!--### Best practices-->
-
-<!-- ## Barrierefreiheit -->
-
-### Tastatursteuerung
-
-| Taste                          | Funktion                                                                                                                                                                                            |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`                          | Fokussiert das Auswahlfeld.                                                                                                                                                                         |
-| `Enter`                        | Wenn die Listbox geöffnet ist und eine Option fokussiert ist, wählt diese Funktion die fokussierte Option aus und schließt die Listbox. Wenn keine Optionfokussiert ist, öffnet es nur die Listbox. |
-| `Pfeil nach unten (ArrowDown)` | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach unten, wenn die Listbox geöffnet ist.                                                              |
-| `Pfeil nach oben (ArrowUp)`    | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach oben, wenn die Listbox geöffnet ist.                                                               |
-| `Escape (Esc)`                 | Schlißt die Listbox und entfernt den visuellen Fokus von der Combobox, ohne eine Auswahl zu treffen.                                                                                                |
-| `Home`                         | Bewegt den visuellen Fokus auf die erste Option in der Listbox.                                                                                                                                     |
-| `End`                          | Bewegt den visuellen Fokus auf die letzte Option in der Listbox.                                                                                                                                    |
-| `Seite mach oben(PageUp)`      | Springt zehn Optionen nach oben in der Listbox und fokussiert die entsprechende Option.                                                                                                             |
-| `Seite mach unten(PageDown)`   | Springt zehn Optionen nach unten in der Listbox und fokussiert die entsprechende Option.                                                                                                            |
-| `Druckbare Zeichen`            | Fokussiert die erste Option, die mit dem gedrückten Zeichen beginnt.                                                                                                                                |
+# kol-combobox
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                    | Attribute        | Description                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
-| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`                | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_alert`                    | `_alert`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use automatic behaviour instead.<br/><br/>Defines whether the screen-readers should read out the notification. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideError`                | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideLabel`                | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hint`                     | `_hint`          | Defines the hint text.                                                                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
-| `_icons`                    | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                       | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_id`                       | `_id`            | Defines the internal ID of the primary component element.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_label` _(required)_       | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
-| `_msg`                      | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                     | `string` \| `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "error"` \| `"default"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined` |
-| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                                         | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                       | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                             | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                                           | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_required`                 | `_required`      | Makes the input element required.                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                                                 | `W3CInputValue[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_tabIndex`                 | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                      | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_tooltipAlign`             | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                             | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                       | `'top'`     |
-| `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_value`                    | `_value`         | Defines the value of the input.                                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| Property                    | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
+| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`                | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_hideLabel`                | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_hideMsg`                  | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_hint`                     | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
+| `_icons`                    | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                     | `undefined` |
+| `_id`                       | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_label` _(required)_       | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
+| `_msg`                      | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string` \| `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined` |
+| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                       | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
+| `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_required`                 | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
+| `_tooltipAlign`             | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                       | `'top'`     |
+| `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_value`                    | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
 
 
 ## Methods

package/doc/components.md

@@ -17,7 +17,7 @@ First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tr
 ```ts
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { register } from '@public-ui/components';
-import { DEFAULT } from '@public-ui/themes';
+import { DEFAULT } from '@public-ui/theme-default';
 
 register(DEFAULT, defineCustomElements)
 	.then(() => {

package/doc/details.md

@@ -1,92 +1,4 @@
-# Details
-
-Synonyme: Disclosure, Collapse, Summary Detail
-
-Mit Hilfe der **Detail**-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick
-durch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.
-
-Die **Detail**-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden,
-kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei
-seine Ausrichtung von **_rechts_** nach **_unten_**.
-Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-details _label="Nach Laden der Seite geschlossen">
-	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-	vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-</kol-details>
-```
-
-### Beispiel
-
-<kol-details _label="Nach Laden der Seite geschlossen">
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
-  sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-</kol-details>
-
-## Verwendung
-
-### Geöffnet anzeigen
-
-Verwenden Sie das Attribut **`_open`**, um die Komponente geöffnet darzustellen.
-
-### Einleitungstext
-
-Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Überschrift angezeigt werden soll.
-
-### Best practices
-
-- Verwenden Sie die **Detail**-Komponente, um ergänzende Inhalte zu einem Hauptthema platzsparend anzuordnen.
-- Die **Detail**-Komponente eignet sich gut für die Realisierung einer FAQ-Seite, wobei die Frage über das Attribut **`_label`** und die Antwort im Inhaltsbereich ausgegeben werden kann.
-- Vermeiden Sie es, wichtige Informationen, die z.B. rechtliche Aspekte betreffen, in einem verborgenen Bereich auszugeben. Es kann nicht sichergestellt werden, dass der Benutzer diese Informationen auch sicher liest.
-- Vermeiden Sie es, zu viele **Detail**-Komponenten zu verwenden, da die Übersichtlichkeit der Seite hierunter leiden kann.
-
-### Anwendungsfälle
-
-#### Details-Komponente innerhalb eines Fließtextes
-
-<div>
-    <p>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
-      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-    </p>
-    <kol-details _label="Erst nach Klick offen">
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
-      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-    </kol-details>
-    <p>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
-      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-    </p>
-  </div>
-
-## Barrierefreiheit
-
-- Die **Details**-Komponente bietet sich an, um eine Kontext-sensitive Hilfe für die Barrierefreiheit umzusetzen.
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                        |
-| ------- | ----------------------------------------------- |
-| `Tab`   | Fokussiert die Details-Komponente.              |
-| `Enter` | Öffnet bzw. schließt den Inhalt der Komponente. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
+# kol-details
 
 <!-- Auto Generated Below -->
 
@@ -104,16 +16,6 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `kolFocus() => Promise<void>`
 
 

package/doc/drawer.md

@@ -1,129 +1,4 @@
-Synonyme: Modal, Modal Dialog, Corner Dialog, Prompt
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Mithilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann als Modal (`_modal`) via ESC geschlossen werden.
-
-Die **Drawer**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt bzw. controlled mit dem Attribut `_open` gesteuert.
-
-```html
-<kol-drawer _label="Drawer" _open _modal _align="top"></kol-drawer>
-```
-
-### Beispiel
-
-#### Uncontrolled
-
-Im _Uncontrolled_-Modus wird der Drawer über die Methoden `open()` und `close()` gesteuert.
-
-```html
-<kol-drawer id="example-drawer" _align="left" _label="Drawer">
-	<div>
-		<p>Dies ist der Inhalt des Drawers. Hier können Sie beliebige HTML-Elemente einfügen.</p>
-		<kol-button class="close-drawer" _label="Schließen"></kol-button>
-	</div>
-</kol-drawer>
-<kol-button id="drawer-open-button" _label="Drawer öffnen"></kol-button>
-
-<script>
-	const drawer = document.querySelector('#example-drawer');
-	const drawerOpenButton = document.querySelector('#drawer-open-button');
-
-	function openDrawer() {
-		drawer.open();
-	}
-
-	function closeDrawer() {
-		drawer.close();
-	}
-
-	document.querySelectorAll('.close-drawer').forEach((b) => (b.onclick = closeDrawer));
-	drawerOpenButton.onclick = openDrawer;
-</script>
-```
-
-#### Uncontrolled Modal
-
-```html
-<kol-drawer _modal _align="left" _label="Drawer">
-	<p>Drawer Inhalt</p>
-</kol-drawer>
-```
-
-#### Controlled
-
-Im _Controlled_-Modus wird der Drawer über das `_open` Attribut gesteuert.
-
-```html
-<kol-drawer _open="true" _align="left" _label="Drawer">
-	<p>Drawer Inhalt</p>
-</kol-drawer>
-```
-
-## Verwendung
-
-Um den **Drawer** programmgesteuert zu öffnen und zu schließen, verwenden Sie die Methoden **`open()`** und **`close()`**. Stellen Sie sicher, dass das **`_label`** Attribut gesetzt ist, um die Zugänglichkeit zu gewährleisten. Die Ausrichtung des Drawers können Sie mit dem **`_align`** Attribut und den Werten **left**, **top**, **right** oder **bottom** anpassen, um ihn auf der gewünschten Seite des Bildschirms anzuzeigen. Wenn Sie den **Drawer** als **Modal** verwenden möchten, aktivieren Sie das **`_modal`** Attribut, um den Hintergrund abzudunkeln und den Fokus auf den Drawer-Inhalt zu lenken. Zudem nutzen Sie das **`_on`** Attribut, um benutzerdefinierte Aktionen beim Schließen des Drawers auszuführen. Ein offenes **Modal** kann via **ESC** geschlossen werden.
-
-## Barrierefreiheit
-
-Das `_label` Attribut stellt eine klare und verständliche Beschriftung für den Drawer bereit. Dies verbessert die Nutzung für Personen, die Screenreader verwenden, da das Label als **`aria-label`** fungiert und somit die Bedeutung und Funktion des Drawers erklärt.
-
-### Drawer als Modal
-
-Beim Öffnen des **Drawers** wird der Fokus automatisch auf den Inhalt des Drawers gesetzt. Dies stellt sicher, dass Benutzer von Screenreadern sofort wissen, dass ein neuer Bereich geöffnet wurde, und dass sie direkt interagieren können. Beim Schließen des Drawers wird der Fokus zum vorherigen aktiven Element zurückgeführt, was eine nahtlose Benutzererfahrung bietet.
-
-Die **Drawer**-Komponente unterstützt die vollständige Navigation über die Tastatur. Benutzer können mit der Tab-Taste durch die interaktiven Elemente innerhalb des Drawers navigieren. Zudem kann der **Drawer** mit der ESC-Taste schnell und einfach geschlossen werden, was die Bedienung erleichtert.
-
-Während der **Drawer** (als Modal) geöffnet ist, werden alle selektierbaren Elemente außerhalb des Drawers deaktiviert. Dies verhindert ungewollte Interaktionen mit dem Hintergrundinhalt und lenkt die Aufmerksamkeit der Benutzer auf den **Drawer**-Inhalt.
-
-### Tastatursteuerung
-
-| Taste       | Funktion                                                                                     |
-| ----------- | -------------------------------------------------------------------------------------------- |
-| `Tab`       | Bei geöffnetem Drawer werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
-| `ESC-Taste` | Schließt den Drawer.                                                                         |
-
-## Animationen
-
-Optional können Animationen mit Keyframes hinzugefügt werden. Dabei ist es wichtig, dass die Keyframes die Namen `slideIn` bzw. `slideOut` enthalten und auf der Klasse `drawer__wrapper` definiert werden.
-
-**Beispiel:**
-
-```scss
-.drawer__wrapper {
-	&--left {
-		animation: slideInLeft $duration forwards;
-		&.is-closing {
-			animation: slideOutLeft $duration forwards !important;
-		}
-	}
-	&--right {
-		animation: slideInRight $duration forwards;
-		&.is-closing {
-			animation: slideOutRight $duration forwards;
-		}
-	}
-	&--top {
-		animation: slideInTop $duration forwards;
-		&.is-closing {
-			animation: slideOutTop $duration forwards;
-		}
-	}
-	&--bottom {
-		animation: slideInBottom $duration forwards;
-		&.is-closing {
-			animation: slideOutBottom $duration forwards;
-		}
-	}
-}
-```
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" _target="_blank"></kol-link>
+# kol-drawer
 
 <!-- Auto Generated Below -->
 
@@ -134,7 +9,6 @@ Optional können Animationen mit Keyframes hinzugefügt werden. Dabei ist es wic
 | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
 | `_align`              | `_align`  | Defines the visual orientation of the component.                                                                   | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`     | `undefined` |
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
-| `_modal`              | `_modal`  | <span class="text-red-500">**[DEPRECATED]**</span> Indicates whether the drawer is a modal.<br/><br/>                 | `boolean` \| `undefined`                                    | `undefined` |
 | `_on`                 | --        | Specifies the EventCallback function to be called when the drawer is closing.                                      | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
 | `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined`                                    | `undefined` |
 

package/doc/form.md

@@ -1,24 +1,4 @@
-# Form
-
-Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinweistext für Pflichtfelder korrekt zu positionieren und die Events `submit` und `reset` weiterzuleiten.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-form _requiredText="Sternchen heißt Pflichtfeld.">
-	<kol-input-text _label="Vorname"></kol-input-text>
-	<kol-input-text _label="Nachname"></kol-input-text>
-</kol-form>
-```
-
-### Beispiel
-
-<kol-form _requiredText="Sternchen heißt Pflichtfeld.">
-	<kol-input-text _label="Vorname"></kol-input-text>
-	<kol-input-text _label="Nachname"></kol-input-text>
-</kol-form>
+# kol-form
 
 <!-- Auto Generated Below -->
 

package/doc/heading.md

@@ -1,37 +1,4 @@
-# Heading
-
-Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
-<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
-<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
-<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
-<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
-<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
-```
-
-### Beispiel
-
-<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
-<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
-<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
-<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
-<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
-<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
-
-## Verwendung
-
-Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
-
-### Best practices
-
-- Achten Sie bei der Verwendung von Headings auf die empfohlene Semantik für die Suchmaschinenoptimierung.
-- Setzen Sie Headings in verschiedenen Größen ein, um eine sinnvolle Struktur Ihrer Inhalte zu erzeugen.
+# kol-heading
 
 <!-- Auto Generated Below -->
 
@@ -41,16 +8,16 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 | Property              | Attribute             | Description                                                                                                                                                  | Type                                                                    | Default     |
 | --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
 | `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                | `undefined` |
-| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `undefined` |
+| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `0`         |
 | `_secondaryHeadline`  | `_secondary-headline` | Defines the text of the secondary headline.                                                                                                                  | `string` \| `undefined`                                                   | `undefined` |
 | `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"strong"` \| `undefined` | `undefined` |
 
 
 ## Slots
 
-| Slot         | Description              |
-| ------------ | ------------------------ |
-| `"headline"` | Content of the headline. |
+| Slot | Description             |
+| ---- | ----------------------- |
+|      | Inhalt der Überschrift. |
 
 
 ----------------------------------------------

package/doc/icon.md

@@ -1,46 +1,4 @@
-# Icon
-
-Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
-
-Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> unterstützt.
-
-<kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>
-
-## Konstruktion
-
-Die Komponente **Icon** wird über das HTML-Tag `kol-icon` erzeugt.
-
-### Code
-
-```html
-<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
-```
-
-### Beispiel
-
-<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
-
-### Icons
-
-Die Property `_icons` erwartet einen String mit den Klassennamen der zu zeigenden Icons (z.B.: `_icons="codicon codicon-home`).
-
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
-
-## Barrierefreiheit
-
-Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
-
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"></kol-link>
-
-### Label
-
-Mittels der Property `_label` muss ein Kontext-relevantes Icon beschriftet werden.
-
-## Links und Referenzen
-
-- <kol-link _href="https://github.com/microsoft/vscode-codicons" _target="_blank" _label="Codicons"></kol-link>
-- <kol-link _href="https://fontawesome.com" _target="_blank" _label="Font-Awesome"></kol-link>
-- <kol-link _href="https://icofont.com"  _target="_blank" _label="Icofont"></kol-link>
+# kol-icon
 
 <!-- Auto Generated Below -->
 

package/doc/image.md

@@ -1,54 +1,4 @@
-# Image
-
-Synonyme: Img, Thumbnail
-
-> <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
-
-Die **Image**-Komponente dient dazu, Bilder darzustellen.
-
-## Konstruktion
-
-Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
-
-### Code
-
-```html
-<kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
-<kol-image _src="nur-dekoratives-bild.jpg" _alt=""></kol-image>
-<kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
-```
-
-### Beispiele
-
-<kol-image _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100"></kol-image>
-
-## Verwendung
-
-### Bilder in unterschiedlicher Auflösung und/oder Seitenverhältnis
-
-Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
-Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
-Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _target="_blank" _label="MDN Artikel zu srcset"></kol-link>
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _target="_blank" _label="MDN Artikel zu sizes"></kol-link>
-Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
-
-### Ladeverhalten
-
-Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
-`eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _target="_blank" _label="MDN Artikel zu loading"></kol-link>
-
-## Barrierefreiheit
-
-### Alternativtext
-
-Das Attribut **`_alt`** ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
-Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt, wenn das Bild nicht geladen werden kann/soll.
-
-## Links und Referenzen
-
-Ausführliche Erklärung zu `_srcset` und `_sizes`: <kol-link _href="https://www.mediaevent.de/html/srcset.html" _target="_blank"></kol-link>
+# kol-image
 
 <!-- Auto Generated Below -->