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

package/doc/quote.md

@@ -4,30 +4,78 @@
 
 Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`inline`) und eine eingerückte(`block`) Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates.
 
+## Konstruktion
+
+### Code
+
+```html
+<kol-quote
+	_label="RFC 1149"
+	_href="https://datatracker.ietf.org/doc/html/rfc1149"
+	_quote="Avian carriers can provide high delay, low throughput, and low altitude
+								service. The connection topology is limited to a single point-to-point path
+								for each carrier, used with standard carriers, but many carriers can be used
+								without significant interference with each other, outside early spring.
+								This is because of the 3D ether space available to the carriers, in contrast
+								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+								avoidance system, which increases availability."
+	_variant="block"
+>
+</kol-quote>
+<kol-quote
+	_label="RFC 1149"
+	_href="https://datatracker.ietf.org/doc/html/rfc1149"
+	_quote="Avian carriers can provide high delay."
+	_variant="inline"
+></kol-quote>
+```
+
+### Beispiele
+
+<kol-quote
+    _label="RFC 1149"
+    _href="https://datatracker.ietf.org/doc/html/rfc1149"
+    _quote="Avian carriers can provide high delay, low throughput, and low altitude
+            service. The connection topology is limited to a single point-to-point path
+            for each carrier, used with standard carriers, but many carriers can be used
+            without significant interference with each other, outside early spring.
+            This is because of the 3D ether space available to the carriers, in contrast
+            to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+            avoidance system, which increases availability."
+				_variant="block">
+</kol-quote>
+<kol-quote
+  _label="RFC 1149"
+  _href="https://datatracker.ietf.org/doc/html/rfc1149"
+  _quote="Avian carriers can provide high delay."
+  _variant="inline"
+			></kol-quote>
+
 ## Verwendung
 
-Mittels **`_caption`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
+Mittels **`_label`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
 Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann **`_variant`** auf `block` gesetzt werden.
 
 ## References
 
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
-- https://www.mediaevent.de/html/quote.html
-- https://www.mediaevent.de/html/cite.html
-- https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/
+- <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>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                                                 | Type                               | Default     |
-| --------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
-| `_caption`            | `_caption` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`              | `undefined` |
-| `_href` _(required)_  | `_href`    | Gibt den Link zur Quelle des Zitates an.                                                                                    | `string`                           | `undefined` |
-| `_quote` _(required)_ | `_quote`   | Setzt den Text, also das Zitat selbst.                                                                                      | `string`                           | `undefined` |
-| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                               | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
+| 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`    | Defines the link to the source of the quote.                                                                                   | `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
@@ -43,9 +91,9 @@ graph TD;
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-quote fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/select.md

@@ -7,30 +7,30 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 
 ```html
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 	Auswahlfeld (Mehrfachauswahl)
 </kol-select>
 <kol-select
-	_list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
-	_size="4"
+	_options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
+	_rows="4"
 	_value="['1']"
 >
-	Auswahlfeld mit _size
+	Auswahlfeld mit _rows
 </kol-select>
 ```
 
 ### Beispiel
 
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 Auswahlfeld (Mehrfachauswahl)
 </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _size="4" _value="['1']">Auswahlfeld mit size</kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _rows="4" _value="['1']">Auswahlfeld mit rows</kol-select>
 
 ## Verwendung
 
-Die Auswahlmöglichkeiten werden über das Attribut **`_list`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
+Die Auswahlmöglichkeiten werden über das Attribut **`_options`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
@@ -44,7 +44,7 @@ Beispiel für die Konstruktion des JSON-Objektes:
 
 ### Individuelle Höhe angeben
 
-Über das Attribut **`_size`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
+Über das Attribut **`_rows`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
 
 <!--### Best practices-->
 
@@ -90,27 +90,30 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 
 ## 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` |
-| `_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` |
-| `_height`             | `_height`     | <span class="text-red-500">**[DEPRECATED]**</span> Use _size instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll.                | `string` \| `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`                                                                                   | `''`        |
-| `_icon`               | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `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` |
-| `_list` _(required)_  | `_list`       | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `SelectOption<W3CInputValue>[]` \| `string`                                                               | `undefined` |
-| `_multiple`           | `_multiple`   | Gibt an, ob mehrere Werte eingegeben werden können.                                                                                                  | `boolean` \| `undefined`                                                                                  | `false`     |
-| `_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` |
-| `_required`           | `_required`   | Macht das Eingabeelementzu einem Pflichtfeld.                                                                                                        | `boolean` \| `undefined`                                                                                  | `undefined` |
-| `_size`               | `_size`       | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                  | `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.                                                                                                                  | `W3CInputValue[]` \| `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` |
+| `_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` |
+| `_height`       | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Deprecated: Defines an individual height.                                        | `string` \| `undefined`                                                                                   | `undefined` |
+| `_hideLabel`    | `_hide-label`    | Hides the label.                                                                                                                                             | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_hint`         | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                   | `''`        |
+| `_icon`         | `_icon`          | Defines the icon classnames (e.g. `_icon="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. | `boolean` \| `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`                                                                                  | `undefined` |
+| `_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`     |
+| `_value`        | `_value`         | Defines the value of the input.                                                                                                                              | `W3CInputValue[]` \| `string` \| `undefined`                                                                | `undefined` |
 
 
 ## Slots
@@ -129,18 +132,20 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 ### Depends on
 
 - kol-input
+- [kol-tooltip-wc](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-select --> kol-input
+  kol-select --> 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/skip-nav.md

@@ -47,18 +47,18 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 
 ## Links und Referenzen
 
-- https://webaim.org/techniques/skipnav/
+- <kol-link _href="https://webaim.org/techniques/skipnav/" _label="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/>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` |
-| `_links` _(required)_ | `_links`      | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string` | `undefined` |
+| 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` |
 
 
 ## Dependencies
@@ -73,9 +73,9 @@ graph TD;
   kol-skip-nav --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-skip-nav fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/span.md

@@ -21,12 +21,12 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 
 ## Properties
 
-| Property              | Attribute     | Description                                                                                                                                                        | Type                                                                 | Default     |
-| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ----------- |
-| `_hideLabel`          | `_hide-label` | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                          | `boolean` \| `undefined`                                               | `false`     |
-| `_icon`               | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined` | `undefined` |
-| `_iconOnly`           | `_icon-only`  | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an. | `boolean` \| `undefined`                                               | `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     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ----------- |
+| `_hideLabel`          | `_hide-label` | Hides the label and shows the description in a Tooltip instead.                                                                                              | `boolean` \| `undefined`                                               | `false`     |
+| `_icon`               | `_icon`       | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                               | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined` | `undefined` |
+| `_iconOnly`           | `_icon-only`  | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.         | `boolean` \| `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. | `boolean` \| `string`                                                  | `undefined` |
 
 
 ## Dependencies

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 _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _href="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" _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
 
 ### Beispiel
 
@@ -89,7 +89,7 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 
 <kol-details _summary="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 _label="https://github.com/vineethtrv/css-loader" _href="https://github.com/vineethtrv/css-loader" _target="_blank"></kol-link>
+<kol-link _href="https://github.com/vineethtrv/css-loader" _label="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
 </kol-details>
 
 ## Verwendung
@@ -108,19 +108,15 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 - Download von Inhalten.
 - Laden von umfangreichen Inhalten, z.B. Videos.
 
-<!-- ## Barrierefreiheit -->
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property   | Attribute  | Description                                                     | Type                                      | Default |
-| ---------- | ---------- | --------------------------------------------------------------- | ----------------------------------------- | ------- |
-| `_show`    | `_show`    | Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist. | `boolean` \| `undefined`                    | `false` |
-| `_variant` | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.   | `"cycle"` \| `"dot"` \| `"none"` \| `undefined` | `'dot'` |
+| Property   | Attribute  | Description                                            | Type                                      | Default |
+| ---------- | ---------- | ------------------------------------------------------ | ----------------------------------------- | ------- |
+| `_show`    | `_show`    | Makes the element show up.                             | `boolean` \| `undefined`                    | `false` |
+| `_variant` | `_variant` | Defines which variant should be used for presentation. | `"cycle"` \| `"dot"` \| `"none"` \| `undefined` | `'dot'` |
 
 
 ----------------------------------------------

package/doc/split-button.md

@@ -7,11 +7,28 @@
 ### Code
 
 ```html
+<kol-split-button _label="Split-Button">
+	<div slot="popover">Split-Button Popover</div>
+</kol-split-button>
+```
+
+Geöffnet:
 
+```html
+<kol-split-button _label="Split-Button" _show-dropdown>
+	<div slot="popover">Split-Button Popover</div>
+</kol-split-button>
 ```
 
 ### Beispiel
 
+<kol-split-button _label="Split-Button">
+  <div slot="popover">Split-Button Popover</div>
+</kol-split-button>
+<kol-split-button _label="Split-Button" _show-dropdown>
+  <div slot="popover">Split-Button Popover</div>
+</kol-split-button>
+
 ## Verwendung
 
 ### Best practices
@@ -25,35 +42,35 @@
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#accordion
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _label="https://www.w3.org/TR/wai-aria-practices/#accordion" _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` |
-| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                        | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaCurrent`        | `_aria-current`  | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                  | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                         | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (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<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                    | `boolean` \| `undefined`                                                                               | `undefined` |
-| `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                         | `string` \| `undefined`                                                                                | `undefined` |
-| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                 | `boolean` \| `undefined`                                                                               | `false`     |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                       | `boolean` \| `undefined`                                                                               | `false`     |
-| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                     | `string` \| `undefined`                                                                                | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                              | `boolean` \| `undefined`                                                                               | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                     | `string`                                                                                             | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                     | `undefined` \| `{ onClick: KoliBriSplitButtonCallback; }`                                              | `undefined` |
-| `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                      | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined` |
-| `_showDropdown`       | `_show-dropdown` | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                      | `boolean` \| `undefined`                                                                               | `false`     |
-| `_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` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'top'`     |
-| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                       | `'button'`  |
-| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                | `unknown`                                                                                            | `undefined` |
-| `_variant`            | `_variant`       | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                   | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
+| 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 label and shows the description in a Tooltip instead.                                                                                                                  | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icon`               | `_icon`          | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                                   | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `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` |
+| `_showDropdown`       | `_show-dropdown` | 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'`  |
+| `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
 
 
 ## Slots
@@ -74,9 +91,9 @@
 graph TD;
   kol-split-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
   style kol-split-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/symbol.md

@@ -0,0 +1,45 @@
+# Symbol
+
+Die **Symbol**-Komponente ermöglicht das Rendern beliebiger Symbole mit steuerbarer Ausgabe durch den Screenreader.
+
+## Konstruktion
+
+### Code
+
+```html
+<kol-symbol _label="Slash" _symbol="/"></kol-symbol>
+```
+
+### Beispiel
+
+<kol-symbol _label="Slash" _symbol="/"></kol-symbol>
+
+## Verwendung
+
+Das eigentliche Symbol, welches am Bildschirm ausgegeben wird, wird über die Property **`_symbol`** übergeben. Der zugehörige Text, den der Screenreader vorliest, wird über das Attribut **`_label`** übergeben.
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+## 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>
+
+<!-- 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` |
+
+
+----------------------------------------------
+
+