@public-ui/components 1.7.2 → 2.0.0-rc.0

package/doc/logo.md

@@ -53,10 +53,9 @@ Das Attribut **`_org`** wird für die Definition des gewünschten Logos verwende
 
 ## Properties
 
-| Property            | Attribute | Description                                                                                                                                                                                 | Type                                                           | Default     |
-| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
-| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Deprecated: Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` \| `undefined` | `undefined` |
-| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                              | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium`              | `undefined` |
+| Property            | Attribute | Description                                                                    | Type                                              | Default     |
+| ------------------- | --------- | ------------------------------------------------------------------------------ | ------------------------------------------------- | ----------- |
+| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` | `undefined` |
 
 
 ----------------------------------------------

package/doc/modal.md

@@ -1,10 +1,10 @@
 # Hinweis
 
-Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt (<kol-link _href="https://caniuse.com/?search=dialog" _label="https://caniuse.com/?search=dialog" _target="_blank" _label="caniuse"></kol-link>), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
+Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt (<kol-link _href="https://caniuse.com/?search=dialog" _target="_blank" _label="caniuse"></kol-link>), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
 
 ## Verwendung von `dialog`-Tag
 
-Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
+Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
 Das **Dialog**-Element kann wie jedes andere HTML-Tag verwendet werden, alle Elemente innerhalb werden wie gewohnt dargestellt.
 Der Dialog ist standardmäßig nicht sichtbar, über das Setzen des Attributs `open`, oder über die Funktionen `show()` und `showModal()` wird er sichtbar.
 `open` und `show()` öffnen das Element mit `position: absolute`, während `showModal()` `position: fixed` setzt.
@@ -30,9 +30,9 @@ Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der
 
 ```html
 <kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
-	<kol-card _heading="Vorgang löschen" _has-footer style="background-color: bisque">
-		<p slot="content">Wollen Sie den Vorgang wirklich löschen?</p>
-		<div slot="footer">
+	<kol-card _label="Vorgang löschen" style="background-color: bisque">
+		<div>
+			<p>Wollen Sie den Vorgang wirklich löschen?</p>
 			<kol-button class="close-modal" _label="Ok" _variant="primary"></kol-button>
 			<kol-button class="close-modal" _label="Abbrechen"></kol-button>
 		</div>
@@ -99,21 +99,20 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ### Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _label="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _label="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property         | Attribute     | Description                                                                                                                                | Type                                                      | Default     |
-| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
-| `_activeElement` | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                                                    | `HTMLElement` \| `null` \| `undefined`                        | `undefined` |
-| `_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 EventCallback-Function für das Schließen des Modals an.                                                                           | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
-| `_width`         | `_width`      | Defines the width of the modal. (max-width: 100%)                                                                                          | `string` \| `undefined`                                     | `'100%'`    |
+| Property              | Attribute | Description                                                                                                        | Type                                                      | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `_activeElement`      | --        | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                            | `HTMLElement` \| `null` \| `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` |
+| `_on`                 | --        | Gibt die EventCallback-Function für das Schließen des Modals an.                                                   | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
+| `_width`              | `_width`  | Defines the width of the modal. (max-width: 100%)                                                                  | `string` \| `undefined`                                     | `'100%'`    |
 
 
 ## Slots

package/doc/nav.md

@@ -18,24 +18,23 @@ noch die Icons ausgegeben.
 <kol-nav
 	_label="Navigation"
 	_links="[
-	{
-		_href: 'startseite',
-		_icons: 'codicon codicon-home',
-		_label: 'Startseite',
-		_children: [
-			{ _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
-			{ _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
-		],
-	},
-	{ _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
-]"
-	_has-compact-button
+		{
+			_href: 'startseite',
+			_icons: 'codicon codicon-home',
+			_label: 'Startseite',
+			_children: [
+				{ _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
+				{ _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
+			],
+		},
+		{ _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
+	]"
 ></kol-nav>
 ```
 
 ### Beispiel
 
-<kol-nav _label="Navigation" _links="[{'_href':'startseite','_icon':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icon':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icon':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icon':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
+<kol-nav _label="Navigation" _links="[{'_href':'startseite','_icons':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icons':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icons':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icons':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
 
 ## Verwendung
 
@@ -63,11 +62,6 @@ Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzl
 
 Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_hide-label`**.
 
-### Umschalter normale/kompakte Darstellung
-
-Um eine Schaltfläche einzublenden, die die kompakte Darstellung an/aus schaltet, setzen Sie das Attribut **`_hasCompact-button`**.
-Diese Schaltfläche erscheint unterhalb der Navigation und wird nur bei vertikaler Ausrichtung angezeigt.
-
 ### Umschaltung horizontale/vertikale Ausrichtung
 
 Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** umgeschaltet werden. Mögliche Werte sind:
@@ -105,18 +99,14 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                                            | Type                                                            | Default      |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------ |
-| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value of aria-current to be used with the current context within the navigation.                                                                                                           | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
-| `_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`  |
-| `_collapsible`        | `_collapsible`        | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                                                                               | `boolean` \| `undefined`                                          | `true`       |
-| `_compact`            | `_compact`            | <span style="color:red">**[DEPRECATED]**</span> Use _hide-label<br/><br/>Deprecated: Gibt an, ob die Navigation kompakt angezeigt wird.                                                                | `boolean` \| `undefined`                                          | `false`      |
-| `_hasCompactButton`   | `_has-compact-button` | <span style="color:red">**[DEPRECATED]**</span> Version 2<br/><br/>Deprecated: Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.          | `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`      |
-| `_label`              | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                     | `string` \| `undefined`                                           | `undefined`  |
-| `_links` _(required)_ | `_links`              | Defines the list of links, buttons or texts to render.                                                                                                                                                 | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
-| `_orientation`        | `_orientation`        | Defines whether the orientation of the component is horizontal or vertical.                                                                                                                            | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
-| `_variant`            | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Deprecated: Defines which variant should be used for presentation. | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
+| Property              | Attribute             | Description                                                                                                                                | Type                                                            | Default      |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------ |
+| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value of aria-current to be used with the current context within the navigation.                                               | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
+| `_collapsible`        | `_collapsible`        | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                   | `boolean` \| `undefined`                                          | `true`       |
+| `_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`      |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string`                                                        | `undefined`  |
+| `_links` _(required)_ | `_links`              | Defines the list of links, buttons or texts to render.                                                                                     | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
+| `_orientation`        | `_orientation`        | Defines whether the orientation of the component is horizontal or vertical.                                                                | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
 
 
 ## Dependencies
@@ -125,14 +115,12 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 
 - kol-button-link-text-switch
 - kol-button-wc
-- [kol-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-nav --> kol-button-link-text-switch
   kol-nav --> kol-button-wc
-  kol-nav --> kol-button
   kol-button-link-text-switch --> kol-button-wc
   kol-button-link-text-switch --> kol-link-wc
   kol-button-link-text-switch --> kol-span-wc
@@ -143,7 +131,6 @@ graph TD;
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip-wc
-  kol-button --> kol-button-wc
   style kol-nav fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/pagination.md

@@ -8,9 +8,9 @@ Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte I
 
 ```html
 <div>
-	<kol-pagination _total="100" _page="6"></kol-pagination>
-	<kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
+	<kol-pagination _max="100" _page="6"></kol-pagination>
+	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
+	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
 </div>
 ```
 
@@ -18,18 +18,18 @@ Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte I
 
 <div class="grid gap-2">
   <kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
-  <kol-pagination _total="100" _page="6" _has-buttons="false"></kol-pagination>
+  <kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
   <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
-  <kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
+  <kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
   <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
-  <kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
+  <kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
 </div>
 
 ## Verwendung
 
 Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
 
-- Das Attribut **`_total`** bestimmt die Gesamtanzahl der Elemente.
+- Das Attribut **`_max`** bestimmt die Gesamtanzahl der Elemente.
 - Über das Attribut **`boundary-count`** wird die Anzahl von Elementen bestimmt, die in der **Paginierung**-Komponente rechts und links angezeigt werden, während die übrigen Elemente
 - Das Attribut **`_page`** legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
 - Über das Attribut **`_sibling-count`** kann festgelegt werden, wie viele Elemente jeweils links und rechts des Aktuellen angezeigt werden sollen.
@@ -52,14 +52,13 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 | `_customClass`       | `_custom-class`      | Defines the custom class attribute if _variant="custom" is set.                                                    | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
 | `_hasButtons`        | `_has-buttons`       | Defines which navigation buttons to render (first, last, next, previous buttons).                                  | `boolean` \| `string` \| `undefined` \| `{ first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |
 | `_label`             | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
-| `_max`               | `_max`               | Defines the maximum number of pages.                                                                               | `number` \| `undefined`                                                                                                                                                                                                  | `undefined` |
+| `_max` _(required)_  | `_max`               | Defines the maximum number of pages.                                                                               | `number`                                                                                                                                                                                                               | `undefined` |
 | `_on` _(required)_   | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                                               | `{ onChangePage?: EventValueOrEventCallback<Event, number>` \| `undefined; onChangePageSize?: EventValueOrEventCallback<Event, number>` \| `undefined; onClick?: EventValueOrEventCallback<Event, number>` \| `undefined; }` | `undefined` |
 | `_page` _(required)_ | `_page`              | Defines the current page.                                                                                          | `number`                                                                                                                                                                                                               | `undefined` |
 | `_pageSize`          | `_page-size`         | Defines the amount of entries to show per page.                                                                    | `number`                                                                                                                                                                                                               | `1`         |
 | `_pageSizeOptions`   | `_page-size-options` | Defines the options for the page-size-select.                                                                      | `number[]` \| `string`                                                                                                                                                                                                   | `[]`        |
 | `_siblingCount`      | `_sibling-count`     | Defines the amount of pages to show next to the current page.                                                      | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
 | `_tooltipAlign`      | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                  | `'top'`     |
-| `_total`             | `_total`             | <span class="text-red-500">**[DEPRECATED]**</span> Use _max.<br/><br/>Setzt die Gesamtanzahl der Seiten.              | `number` \| `undefined`                                                                                                                                                                                                  | `undefined` |
 | `_variant`           | `_variant`           | Defines which variant should be used for presentation.                                                             | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                                                                                   | `'normal'`  |
 
 

package/doc/progress.md

@@ -20,7 +20,7 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ## Verwendung
 
-Verwenden Sie das Attribut **`_type`**, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
+Verwenden Sie das Attribut **`_variant`**, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
 
 - `bar`: für eine Ausgabe als horizontaler Fortschrittsbalken
 - `cycle`: für eine Ausgabe als kreisförmiger Fortschrittsbalken
@@ -37,22 +37,21 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Links und Referenzen
 
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _label="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| 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` |
-| `_max` _(required)_   | `_max`     | Defines at which value the progress display is completed.                                                                                           | `number`                                                                      | `undefined` |
-| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Defines which variant should be used for presentation. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
-| `_unit`               | `_unit`    | Defines the unit of the step values (not shown).                                                                                                    | `string` \| `undefined`                                                         | `'%'`       |
-| `_value` _(required)_ | `_value`   | Defines the progress.                                                                                                                               | `number`                                                                      | `undefined` |
-| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                                                              | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `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` |
+| `_max` _(required)_   | `_max`     | Defines at which value the progress display is completed.                                                          | `number`                                                                      | `undefined` |
+| `_unit`               | `_unit`    | Defines the unit of the step values (not shown).                                                                   | `string` \| `undefined`                                                         | `'%'`       |
+| `_value` _(required)_ | `_value`   | Defines the progress.                                                                                              | `number`                                                                      | `undefined` |
+| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
 
 
 ----------------------------------------------

package/doc/quote.md

@@ -56,24 +56,23 @@ Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann
 
 ## References
 
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/quote.html" _label="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/cite.html" _label="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
-- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _label="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
+- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| 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` |
-| `_href` _(required)_  | `_href`    | Sets the target URI of the link or citation source.                                                                            | `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` |
-| `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                                 | `string`                           | `undefined` |
-| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                                         | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
+| Property              | Attribute  | Description                                                                                                        | Type                               | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- |
+| `_href` _(required)_  | `_href`    | Sets the target URI of the link or citation source.                                                                | `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` |
+| `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                     | `string`                           | `undefined` |
+| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
 
 
 ## Dependencies

package/doc/select.md

@@ -96,22 +96,18 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_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`                                                                                  | `false`     |
 | `_error`        | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                                   | `undefined` |
-| `_height`       | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Deprecated: Defines an individual height.                                        | `string` \| `undefined`                                                                                   | `undefined` |
 | `_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`                                                                                   | `''`        |
-| `_icon`         | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                        | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `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`        | `_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`                                                                                   | `undefined` |
-| `_list`         | `_list`          | <span style="color:red">**[DEPRECATED]**</span> use _options<br/><br/>Deprecated: Options the user can choose from, also supporting Optgroup.                | `SelectOption<W3CInputValue>[]` \| `string` \| `undefined`                                                  | `undefined` |
 | `_multiple`     | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean` \| `undefined`                                                                                  | `false`     |
 | `_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` |
 | `_options`      | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                  | `(Option<W3CInputValue>` \| `Optgroup<W3CInputValue>)[]` \| `string` \| `undefined`                           | `undefined` |
 | `_required`     | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                  | `false`     |
 | `_rows`         | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                         | `number` \| `undefined`                                                                                   | `undefined` |
-| `_size`         | `_size`          | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                          | `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`     |

package/doc/skip-nav.md

@@ -47,18 +47,17 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 
 ## Links und Referenzen
 
-- <kol-link _href="https://webaim.org/techniques/skipnav/" _label="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
+- <kol-link _href="https://webaim.org/techniques/skipnav/" _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/>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` |
-| `_links` _(required)_ | `_links`      | Defines the list of links combined with their labels to render.                                                                            | `LinkProps[]` \| `string` | `undefined` |
+| 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.). | `string`                | `undefined` |
+| `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `LinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies

package/doc/span.md

@@ -9,12 +9,12 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 ### Code
 
 ```html
-<kol-span _icon="codicon codicon-home" _label="Text inside the span."></kol-span>
+<kol-span _icons="codicon codicon-home" _label="Text inside the span."></kol-span>
 ```
 
 ### Beispiel
 
-<kol-span _icon="codicon codicon-home" _label="Text inside the span."></kol-span>
+<kol-span _icons="codicon codicon-home" _label="Text inside the span."></kol-span>
 
 <!-- Auto Generated Below -->
 
@@ -24,9 +24,7 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 | Property              | Attribute     | Description                                                                                                                                                  | Type                                                                   | Default     |
 | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ----------- |
 | `_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`     |
-| `_icon`               | `_icon`       | <span class="text-red-500">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                        | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined` | `undefined` |
-| `_iconOnly`           | `_icon-only`  | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.         | `boolean` \| `undefined`                                                 | `undefined` |
-| `_icons`              | `_icons`      | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined` | `undefined` |
+| `_icons`              | `_icons`      | Defines the g classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                 | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `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` |
 
 

package/doc/spin.md

@@ -79,7 +79,7 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 ```
 
 <kol-alert _heading="Reduce Motion" _level="4" _type="warning">Wenn möglich sollte stets auf Animationen verzichtet werden. Wenn Animationen genutzt werden, sollte immer darauf geachtet werden, eine Variante mit reduzierter Animationsgeschwindigkeit anzubieten. Mehr Informationen dazu findet sich hier:
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
 
 ### Beispiel
 
@@ -87,9 +87,9 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 <kol-spin _show _variant="cycle"></kol-spin>
 <kol-spin _show _variant="none"><span className="loader" slot="expert"></span></kol-spin>
 
-<kol-details _summary="CSS Loaders & Spinners" _open>
+<kol-details _label="CSS Loaders & Spinners" _open>
 Es gibt im Internet viele verschiedene CSS Loaders und Spinners. Beispielsweise bietet _Vineeth_ eine ganze Reihe interessanter CSS Loaders an. Diese können auch in der KoliBri Bibliothek genutzt werden. Dazu muss lediglich der Link zu der entsprechenden CSS Datei in den Head der HTML Datei eingebunden werden. Anschließend kann die gewünschte Animation über den Expert-Slot in die KoliBri-Komponente eingebunden werden. Hier sind einige Beispiele (ohne reduzierte Animationsgeschwindigkeit):
-<kol-link _href="https://github.com/vineethtrv/css-loader" _label="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
+<kol-link _href="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
 </kol-details>
 
 ## Verwendung

package/doc/split-button.md

@@ -17,20 +17,11 @@ dem sich weitere Aktionen verbergen.
 <kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>
 ```
 
-Initial geöffnet:
-
-```html
-<kol-split-button _label="Split-Button" _show-dropdown>Split-Button Popover</kol-split-button>
-```
-
 ### Beispiel
 
 <kol-split-button _label="Split-Button">
   Split-Button Popover
 </kol-split-button>
-<kol-split-button _label="Split-Button" _show-dropdown>
-  Split-Button Popover
-</kol-split-button>
 
 <!-- Auto Generated Below -->
 
@@ -39,23 +30,18 @@ Initial geöffnet:
 
 | 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` |
 | `_ariaControls`       | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_ariaExpanded`       | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_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` |
 | `_ariaSelected`       | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
 | `_customClass`        | `_custom-class`  | Defines the custom class attribute if _variant="custom" is set.                                                                                                                  | `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`     |
-| `_icon`               | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                            | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
 | `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `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.).                                                               | `string`                                                                                                                                               | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
 | `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
-| `_show`               | `_show`          | Makes the element show up.                                                                                                                                                       | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_showDropdown`       | `_show-dropdown` | <span style="color:red">**[DEPRECATED]**</span> use _show instead<br/><br/>Deprecated: Defines whether to show the dropdown menu.                                                | `boolean` \| `undefined`                                                                                                                                 | `false`     |
 | `_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'`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |

package/doc/symbol.md

@@ -26,18 +26,17 @@ Das eigentliche Symbol, welches am Bildschirm ausgegeben wird, wird über die Pr
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/" _label="https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/" _target="_blank"></kol-link>
+- <kol-link _href="https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/" _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<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente. | `string` \| `undefined` | `undefined` |
-| `_label`               | `_label`      | Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.).                    | `string` \| `undefined` | `undefined` |
-| `_symbol` _(required)_ | `_symbol`     | Dieses Property gibt den String an der angezeigt werden soll.                                                                      | `string`              | `undefined` |
+| Property               | Attribute | Description                                                                                                     | Type     | Default     |
+| ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `_label` _(required)_  | `_label`  | Sets the visible or semantic label of the component (e.g. Aria label, Label, Headline, Caption, Summary, etc.). | `string` | `undefined` |
+| `_symbol` _(required)_ | `_symbol` | Dieses Property gibt den String an der angezeigt werden soll.                                                   | `string` | `undefined` |
 
 
 ----------------------------------------------