@public-ui/components 1.6.0-rc.9 → 1.6.1

package/doc/table.md

@@ -1,4 +1,4 @@
-k# Table
+# Table
 
 Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
 
@@ -16,7 +16,7 @@ Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch
 
 Die Table-Komponente unterstützt folgende Funktionalitäten:
 
-- Tabellenbeschreibung durch ein **`caption`**-Attribut.
+- Tabellenbeschreibung durch ein **`label`**-Attribut.
 - Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
 - Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
 - Unterschiedliche Render-Funktion für die Zellen.
@@ -31,7 +31,7 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 
 ### Pagination
 
-Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
+Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="/docs/components/pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
 
 #### KoliBriTableHeaders
 
@@ -73,12 +73,12 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 ### Code
 
 ```html
-<kol-table _caption="Tabellenbeschreibung" _headers="{'horizontal': [[{'label':'Montag','key':'montag'}]]}" _pagination="[{'page':2}]"></kol-table>
+<kol-table _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
 ```
 
 ### Beispiel
 
-<kol-table _caption="Nur Vertikal Header, Daten Vertikal, Pagination" _headers="{'horizontal':[[{'label':'Montag','key':'montag'}]]}" _data="[{'montag':'Zelle1'},{'montag':'Zelle2'}]" _pagination="{'page':2}"></kol-table>
+<kol-table _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
 
 ## Verwendung
 
@@ -100,36 +100,37 @@ Aktuell werden folgende Attribute von der Komponente verwaltet: `role`, `scope`
 
 Das heißt beispielsweise, dass bei den Spaltenüberschriften automatisch entweder die Rolle `colheader` oder `rowheader` gesetzt wird. Darüber hinaus wird der Scope entweder auf `col`/`colgroup` oder `row`/`rowgroup` gesetzt. Ähnlich dieser Automatismen werden auch die `aria-\*`-Attribute je nach Relevanz gesetzt.
 
-Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
+Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: <kol-link _href="" _label=""></kol-link>https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
 
 ## Links und Referenzen
 
-- https://www.w3.org/WAI/tutorials/tables/
-- https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html
-- https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
-- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen
-- https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html
-- https://www.digitala11y.com/aria-sort-properties/
-- https://dequeuniversity.com/library/aria/table-sortable
-- https://www.maxability.co.in/2016/06/07/aria-sort-property/
-- https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
-- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen
-- https://stackoverflow.com/questions/1312236/
-- https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
+- <kol-link _href="https://www.w3.org/WAI/tutorials/tables/" _label="https://www.w3.org/WAI/tutorials/tables/" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _label="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _label="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _label="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _label="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.digitala11y.com/aria-sort-properties/" _label="https://www.digitala11y.com/aria-sort-properties/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/library/aria/table-sortable" _label="https://dequeuniversity.com/library/aria/table-sortable" _target="_blank"></kol-link>
+- <kol-link _href="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _label="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _label="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _target="_blank"></kol-link>
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _label="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
+- <kol-link _href="https://stackoverflow.com/questions/1312236/" _label="https://stackoverflow.com/questions/1312236/" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _label="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                | Attribute     | Description                                                                                                                 | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default     |
-| ----------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_caption` _(required)_ | `_caption`    | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_data` _(required)_    | `_data`       | Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.                                                     | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_dataFoot`             | `_data-foot`  | Hier können die Daten für die Fußzeile der Tabelle übergeben werden.                                                        | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_headers` _(required)_ | `_headers`    | Gibt die horizontalen und vertikalen Header für die Tabelle an.                                                             | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_minWidth`             | `_min-width`  | Gibt an, die minimale Breite der Tabelle an.                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_pagination`           | `_pagination` | Gibt an, ob die Daten geteilt in Seiten angezeigt wird.                                                                     | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _total?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _customClass?: string` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; }` | `undefined` |
+| Property                | Attribute     | Description                                                                                                                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default     |
+| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_caption`              | `_caption`    | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Defines the visible caption of the component. | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_data` _(required)_    | `_data`       | Defines the primary table data.                                                                                                | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
+| `_dataFoot`             | `_data-foot`  | Defines the data for the table footer.                                                                                         | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
+| `_headers` _(required)_ | `_headers`    | Defines the horizontal and vertical table headers.                                                                             | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_label`                | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_minWidth`             | `_min-width`  | Defines the table min-width.                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_pagination`           | `_pagination` | Defines whether to show the data distributed over multiple pages.                                                              | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _total?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _variant?: ButtonVariantPropType` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies
@@ -146,13 +147,14 @@ graph TD;
   kol-table --> kol-pagination
   kol-button --> kol-button-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-pagination --> kol-button
   kol-pagination --> kol-select
   kol-pagination --> kol-button-wc
   kol-select --> kol-input
+  kol-select --> kol-tooltip-wc
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert

package/doc/tabs.md

@@ -81,24 +81,25 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 
 ## Links und Referenzen
 
-- https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
-- https://dequeuniversity.com/library/aria/tabpanel
-- https://design-system.service.gov.uk/components/tabs/
+- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html" _label="https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role" _label="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role" _target="_blank"></kol-link>
+- <kol-link _href="https://dequeuniversity.com/library/aria/tabpanel" _label="https://dequeuniversity.com/library/aria/tabpanel" _target="_blank"></kol-link>
+- <kol-link _href="https://design-system.service.gov.uk/components/tabs/" _label="https://design-system.service.gov.uk/components/tabs/" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property             | Attribute     | Description                                                                                                                                                                                             | Type                                                                                                                                                                                                                                                     | Default     |
-| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_ariaLabel`         | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                                                                                                                                    | `undefined` |
-| `_label`             | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                    | `undefined` |
-| `_on`                | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                                                                                                     | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
-| `_selected`          | `_selected`   | Gibt an, welches Tab selektiert sein soll.                                                                                                                                                              | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
-| `_tabs` _(required)_ | `_tabs`       | Setzt die Daten für die Registrierkarten.                                                                                                                                                               | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
-| `_tabsAlign`         | `_tabs-align` | Setzt die Position der Registrierkarten.                                                                                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
+| Property             | Attribute     | Description                                                                                                                                | Type                                                                                                                                                                                                                                                     | Default     |
+| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_align`             | `_align`      | Defines the position of the tab captions.                                                                                                  | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
+| `_ariaLabel`         | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente. | `string` \| `undefined`                                                                                                                                                                                                                                    | `undefined` |
+| `_label`             | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string` \| `undefined`                                                                                                                                                                                                                                    | `undefined` |
+| `_on`                | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                                        | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
+| `_selected`          | `_selected`   | Defines which tab is active.                                                                                                               | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
+| `_tabs` _(required)_ | `_tabs`       | Defines the tab captions.                                                                                                                  | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
+| `_tabsAlign`         | `_tabs-align` | <span style="color:red">**[DEPRECATED]**</span> Use _align.<br/><br/>Deprecated: Setzt die Position der Registrierkarten.                  | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 
 
 ## Dependencies
@@ -114,9 +115,9 @@ graph TD;
   kol-tabs --> kol-button-group-wc
   kol-tabs --> kol-button-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/textarea.md

@@ -1,6 +1,6 @@
 # Textarea
 
-Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
+Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
 
 ## Konstruktion
 
@@ -46,36 +46,37 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 
 ## Links und Referenzen
 
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                     | Default      |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                    | `undefined`  |
-| `_adjustHeight`       | `_adjust-height` | Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.                                                                                    | `boolean` \| `undefined`                                                                   | `false`      |
-| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                   | `true`       |
-| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                    | `undefined`  |
-| `_hasCounter`         | `_has-counter`   | Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.                                                                                 | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                    | `''`         |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                    | `undefined`  |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                 | `undefined`  |
-| `_maxLength`          | `_max-length`    | Gibt an, wie viele Zeichen maximal eingegeben werden können.                                                                                         | `number` \| `undefined`                                                                    | `undefined`  |
-| `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `string` \| `undefined`                                                                    | `undefined`  |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined` | `undefined`  |
-| `_placeholder`        | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                                                         | `string` \| `undefined`                                                                    | `undefined`  |
-| `_readOnly`           | `_read-only`     | Setzt das Eingabefeld in den schreibgeschützten Modus.                                                                                               | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_required`           | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                       | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_resize`             | `_resize`        | Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)                | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                            | `'vertical'` |
-| `_rows`               | `_rows`          | Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.                                                                                       | `number` \| `undefined`                                                                    | `undefined`  |
-| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                    | `undefined`  |
-| `_touched`            | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                        | `boolean` \| `undefined`                                                                   | `false`      |
-| `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `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`  |
+| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content.                                                                                                            | `boolean` \| `undefined`                                                                   | `false`      |
+| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                   | `true`       |
+| `_disabled`     | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                    | `undefined`  |
+| `_hasCounter`   | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                  | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_hideLabel`    | `_hide-label`    | Hides the label.                                                                                                                                             | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                    | `''`         |
+| `_id`           | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                    | `undefined`  |
+| `_label`        | `_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. | `boolean` \| `string` \| `undefined`                                                         | `undefined`  |
+| `_maxLength`    | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                    | `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` \| `undefined` | `undefined`  |
+| `_placeholder`  | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                    | `undefined`  |
+| `_readOnly`     | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_resize`       | `_resize`        | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)              | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                            | `'vertical'` |
+| `_rows`         | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                            | `number` \| `undefined`                                                                    | `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`  |
 
 
 ## Slots
@@ -90,18 +91,20 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 ### Depends on
 
 - kol-input
+- [kol-tooltip-wc](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-textarea --> kol-input
+  kol-textarea --> kol-tooltip-wc
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-alert --> kol-alert-wc
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc

package/doc/toast.md

@@ -9,14 +9,14 @@ Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster
 ### Code
 
 ```html
-<kol-alert _heading="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
+<kol-alert _label="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
 <kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
 ```
 
 ### Beispiel
 
 <div class="d-grid gap-2">
-  <kol-alert _heading="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
+  <kol-alert _label="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
   <kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
 </div>
 
@@ -24,7 +24,7 @@ Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster
 
 ### Überschrift
 
-Verwenden Sie das Attribut **`_heading`**, um die Überschrift des Toasts zu bestimmen.
+Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen.
 
 ### Größe der Überschrift
 
@@ -54,23 +54,22 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 
 ## Barrierefreiheit
 
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                                                           | Type                                                                    | Default     |
-| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
-| `_alert`        | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                         | `boolean` \| `undefined`                                                  | `true`      |
-| `_hasCloser`    | `_has-closer`    | Gibt an, ob die Komponente einen Schließen-Schalter hat.                                                                                              | `boolean` \| `undefined`                                                  | `false`     |
-| `_heading`      | `_heading`       | Gibt die Beschriftung der Komponente an.                                                                                                              | `string` \| `undefined`                                                   | `''`        |
-| `_level`        | `_level`         | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
-| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                                                                                      | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
-| `_show`         | `_show`          | Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.                                                                                       | `boolean` \| `undefined`                                                  | `true`      |
-| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.                                                                                  | `number` \| `undefined`                                                   | `10000`     |
-| `_type`         | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                     | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
+| Property        | Attribute        | Description                                                                                                               | Type                                                                    | Default     |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
+| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                      | `boolean` \| `undefined`                                                  | `true`      |
+| `_hasCloser`    | `_has-closer`    | Defines whether the element can be closed.                                                                                | `boolean` \| `undefined`                                                  | `false`     |
+| `_heading`      | `_heading`       | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an. | `string` \| `undefined`                                                   | `''`        |
+| `_label`        | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).        | `string` \| `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`                          | `1`         |
+| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                                                          | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
+| `_show`         | `_show`          | Makes the element show up.                                                                                                | `boolean` \| `undefined`                                                  | `true`      |
+| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.                                                      | `number` \| `undefined`                                                   | `10000`     |
+| `_type`         | `_type`          | Defines either the type of the component or of the components interactive element.                                        | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
 
 
 ## Slots
@@ -95,9 +94,9 @@ graph TD;
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/tooltip.md

@@ -18,18 +18,18 @@ Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange
 
 ## Links und Referenzen
 
-- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips
+- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips" _label="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                                 | Type                                                  | Default     |
-| --------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
-| `_align`              | `_align`  | Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.                                                           | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
-| `_id` _(required)_    | `_id`     | Gibt die interne ID des primären Elements in der Komponente an.                                                             | `string`                                              | `undefined` |
-| `_label` _(required)_ | `_label`  | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string`                                              | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                                                  | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
+| `_align`              | `_align`  | Defines the alignment of the tooltip in relation to the parent element.                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| `_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.). | `string`                                              | `undefined` |
 
 
 ## Dependencies
@@ -38,7 +38,19 @@ Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange
 
  - [kol-abbr](../abbr)
  - kol-button-wc
+ - [kol-input-checkbox](../input-checkbox)
+ - [kol-input-color](../input-color)
+ - [kol-input-date](../input-date)
+ - [kol-input-email](../input-email)
+ - [kol-input-file](../input-file)
+ - [kol-input-number](../input-number)
+ - [kol-input-password](../input-password)
+ - [kol-input-radio](../input-radio)
+ - [kol-input-range](../input-range)
+ - [kol-input-text](../input-text)
  - kol-link-wc
+ - [kol-select](../select)
+ - [kol-textarea](../textarea)
 
 ### Depends on
 
@@ -47,12 +59,24 @@ Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange
 ### Graph
 ```mermaid
 graph TD;
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-span-wc --> kol-icon
-  kol-abbr --> kol-tooltip
-  kol-button-wc --> kol-tooltip
-  kol-link-wc --> kol-tooltip
-  style kol-tooltip fill:#f9f,stroke:#333,stroke-width:4px
+  kol-abbr --> kol-tooltip-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-input-checkbox --> kol-tooltip-wc
+  kol-input-color --> kol-tooltip-wc
+  kol-input-date --> kol-tooltip-wc
+  kol-input-email --> kol-tooltip-wc
+  kol-input-file --> kol-tooltip-wc
+  kol-input-number --> kol-tooltip-wc
+  kol-input-password --> kol-tooltip-wc
+  kol-input-radio --> kol-tooltip-wc
+  kol-input-range --> kol-tooltip-wc
+  kol-input-text --> kol-tooltip-wc
+  kol-link-wc --> kol-tooltip-wc
+  kol-select --> kol-tooltip-wc
+  kol-textarea --> kol-tooltip-wc
+  style kol-tooltip-wc fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/version.md

@@ -22,23 +22,15 @@ Für die Konfiguration steht das Attribut **`_version`** zur Verfügung und nimm
 
 Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
 
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-<!-- ## Barrierefreiheit -->
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                    | Type                  | Default     |
-| ---------- | ---------- | ---------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `_label`   | `_label`   | Gibt die Versionsnummer als Text an.                                                           | `string` \| `undefined` | `undefined` |
-| `_version` | `_version` | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt die Versionsnummer als Text an. | `string` \| `undefined` | `undefined` |
+| Property   | Attribute  | Description                                                                                                                  | Type                  | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).           | `string` \| `undefined` | `undefined` |
+| `_version` | `_version` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Gibt die Versionsnummer als Text an. | `string` \| `undefined` | `undefined` |
 
 
 ## Dependencies
@@ -51,12 +43,12 @@ Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
 ```mermaid
 graph TD;
   kol-version --> kol-badge
-  kol-badge --> kol-span-wc
   kol-badge --> kol-button-wc
-  kol-span-wc --> kol-icon
+  kol-badge --> kol-span-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
-  kol-tooltip --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
   style kol-version fill:#f9f,stroke:#333,stroke-width:4px
 ```