@public-ui/components 1.5.0-rc.17 → 1.5.0-rc.19

package/dist/types/components.d.ts

@@ -130,6 +130,36 @@ export namespace Components {
          */
         "_variant"?: AlertVariant;
     }
+    interface KolAlertWc {
+        /**
+          * Gibt an, ob der Screenreader die Meldung vorlesen soll.
+         */
+        "_alert"?: boolean;
+        /**
+          * Gibt an, ob der Alert ein Schließen-Icon hat.
+         */
+        "_hasCloser"?: boolean;
+        /**
+          * Gibt den Titel der Meldung an.
+         */
+        "_heading"?: string;
+        /**
+          * Setzt den H-Level, von 1 bis 6, der Überschrift.
+         */
+        "_level"?: HeadingLevel;
+        /**
+          * Gibt die EventCallback-Function für das Schließen des Alerts an.
+         */
+        "_on"?: KoliBriAlertEventCallbacks;
+        /**
+          * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.
+         */
+        "_type"?: AlertType;
+        /**
+          * Gibt an, welche Benachrichtigungsvariante dargestellt wird.
+         */
+        "_variant"?: AlertVariant;
+    }
     interface KolBadge {
         /**
           * Setzt die Hintergrundfarbe.
@@ -1517,6 +1547,10 @@ export namespace Components {
           * Gibt an, ob der Link deaktiviert ist.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -1608,6 +1642,10 @@ export namespace Components {
           * Gibt an, ob der Link deaktiviert ist.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -1711,6 +1749,10 @@ export namespace Components {
           * @deprecated Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -1892,9 +1934,13 @@ export namespace Components {
         /**
           * Öffnet/schließt das Popover.
          */
-        "_open"?: boolean;
+        "_show"?: boolean;
     }
     interface KolProgress {
+        /**
+          * Setzt die Bezeichnung der Fortschrittsanzeige.
+         */
+        "_label"?: string;
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
          */
@@ -2259,6 +2305,12 @@ declare global {
         prototype: HTMLKolAlertElement;
         new (): HTMLKolAlertElement;
     };
+    interface HTMLKolAlertWcElement extends Components.KolAlertWc, HTMLStencilElement {
+    }
+    var HTMLKolAlertWcElement: {
+        prototype: HTMLKolAlertWcElement;
+        new (): HTMLKolAlertWcElement;
+    };
     interface HTMLKolBadgeElement extends Components.KolBadge, HTMLStencilElement {
     }
     var HTMLKolBadgeElement: {
@@ -2599,6 +2651,7 @@ declare global {
         "kol-abbr": HTMLKolAbbrElement;
         "kol-accordion": HTMLKolAccordionElement;
         "kol-alert": HTMLKolAlertElement;
+        "kol-alert-wc": HTMLKolAlertWcElement;
         "kol-badge": HTMLKolBadgeElement;
         "kol-breadcrumb": HTMLKolBreadcrumbElement;
         "kol-button": HTMLKolButtonElement;
@@ -2714,6 +2767,36 @@ declare namespace LocalJSX {
          */
         "_variant"?: AlertVariant;
     }
+    interface KolAlertWc {
+        /**
+          * Gibt an, ob der Screenreader die Meldung vorlesen soll.
+         */
+        "_alert"?: boolean;
+        /**
+          * Gibt an, ob der Alert ein Schließen-Icon hat.
+         */
+        "_hasCloser"?: boolean;
+        /**
+          * Gibt den Titel der Meldung an.
+         */
+        "_heading"?: string;
+        /**
+          * Setzt den H-Level, von 1 bis 6, der Überschrift.
+         */
+        "_level"?: HeadingLevel;
+        /**
+          * Gibt die EventCallback-Function für das Schließen des Alerts an.
+         */
+        "_on"?: KoliBriAlertEventCallbacks;
+        /**
+          * Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.
+         */
+        "_type"?: AlertType;
+        /**
+          * Gibt an, welche Benachrichtigungsvariante dargestellt wird.
+         */
+        "_variant"?: AlertVariant;
+    }
     interface KolBadge {
         /**
           * Setzt die Hintergrundfarbe.
@@ -4101,6 +4184,10 @@ declare namespace LocalJSX {
           * Gibt an, ob der Link deaktiviert ist.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -4192,6 +4279,10 @@ declare namespace LocalJSX {
           * Gibt an, ob der Link deaktiviert ist.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -4295,6 +4386,10 @@ declare namespace LocalJSX {
           * @deprecated Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.
          */
         "_disabled"?: boolean;
+        /**
+          * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.
+         */
+        "_download"?: boolean | string;
         /**
           * Gibt die Ziel-Url des Links an.
          */
@@ -4476,9 +4571,13 @@ declare namespace LocalJSX {
         /**
           * Öffnet/schließt das Popover.
          */
-        "_open"?: boolean;
+        "_show"?: boolean;
     }
     interface KolProgress {
+        /**
+          * Setzt die Bezeichnung der Fortschrittsanzeige.
+         */
+        "_label"?: string;
         /**
           * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.
          */
@@ -4827,6 +4926,7 @@ declare namespace LocalJSX {
         "kol-abbr": KolAbbr;
         "kol-accordion": KolAccordion;
         "kol-alert": KolAlert;
+        "kol-alert-wc": KolAlertWc;
         "kol-badge": KolBadge;
         "kol-breadcrumb": KolBreadcrumb;
         "kol-button": KolButton;
@@ -4890,6 +4990,7 @@ declare module "@stencil/core" {
             "kol-abbr": LocalJSX.KolAbbr & JSXBase.HTMLAttributes<HTMLKolAbbrElement>;
             "kol-accordion": LocalJSX.KolAccordion & JSXBase.HTMLAttributes<HTMLKolAccordionElement>;
             "kol-alert": LocalJSX.KolAlert & JSXBase.HTMLAttributes<HTMLKolAlertElement>;
+            "kol-alert-wc": LocalJSX.KolAlertWc & JSXBase.HTMLAttributes<HTMLKolAlertWcElement>;
             "kol-badge": LocalJSX.KolBadge & JSXBase.HTMLAttributes<HTMLKolBadgeElement>;
             "kol-breadcrumb": LocalJSX.KolBreadcrumb & JSXBase.HTMLAttributes<HTMLKolBreadcrumbElement>;
             "kol-button": LocalJSX.KolButton & JSXBase.HTMLAttributes<HTMLKolButtonElement>;

package/dist/types/types/button-link-text.d.ts

@@ -2,14 +2,14 @@ import { Generic } from '@a11y-ui/core';
 import { KoliBriButtonCallbacks, LinkTarget } from './button-link';
 import { PropIcon } from './props/icon';
 import { PropLabel } from './props/label';
-type RequiredButtonProps = PropIcon & PropLabel & {
+type RequiredButtonProps = PropLabel & {
   on: KoliBriButtonCallbacks<unknown>;
 };
-type RequiredLinkProps = PropIcon & PropLabel & {
+type RequiredLinkProps = PropLabel & {
   href: string;
 };
-type RequiredTextProps = PropIcon & PropLabel;
-type OptionalButtonOrLinkOrTextProps = {
+type RequiredTextProps = PropLabel;
+type OptionalButtonOrLinkOrTextProps = PropIcon & {
   active: boolean;
   target: LinkTarget;
   targetDescription: string;

package/dist/types/types/button-link.d.ts

@@ -3,8 +3,7 @@ import { Events } from '../enums/events';
 import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriAllIcon, KoliBriIconProp } from './icon';
-import { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropStealth } from './props';
-import { PropLabel } from './props/label';
+import { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropDownload, PropLabel, PropStealth } from './props';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type RequiredButtonAndLinkProps = PropLabel;
 type OptionalButtonAndLinkProps = {
@@ -82,7 +81,7 @@ export type OptionalLinkProps = OptionalButtonAndLinkProps & {
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-} & PropStealth;
+} & PropDownload & PropStealth;
 export type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;
 export type RequiredLinkStates = RequiredButtonAndLinkStates & {
   href: string;
@@ -94,7 +93,7 @@ export type OptionalLinkStates = OptionalButtonAndLinkStates & {
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-} & PropAriaSelected & PropStealth;
+} & PropAriaSelected & PropDownload & PropStealth;
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
 export type RequiredLinkButtonProps = RequiredLinkProps;
 export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;

package/dist/types/types/props/download.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropDownload = {
+  download?: boolean | string;
+};
+export declare const validateDownload: (component: Generic.Element.Component, value?: boolean | string) => void;

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

@@ -1 +1 @@
-export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{Alignment,PropAlignment,validateAlignment}from"./alignment";export{PropChecked,validateChecked}from"./checked";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";
+export{PropAdjustHeight,validateAdjustHeight}from"./adjust-height";export{PropAlert,validateAlert}from"./alert";export{Alignment,PropAlignment,validateAlignment}from"./alignment";export{AriaCurrent,PropAriaCurrent,validateAriaCurrent}from"./aria-current";export{PropAriaExpanded,validateAriaExpanded}from"./aria-expanded";export{PropAriaSelected,validateAriaSelected}from"./aria-selected";export{PropChecked,validateChecked}from"./checked";export{PropCollapsible,validateCollapsible}from"./collapsible";export{PropCompact,validateCompact}from"./compact";export{PropDisabled,validateDisabled}from"./disabled";export{PropDownload,validateDownload}from"./download";export{PropHasCloser,validateHasCloser}from"./has-closer";export{PropHasCompactButton,validateHasCompactButton}from"./has-compact-button";export{PropHasCounter,validateHasCounter}from"./has-counter";export{PropHasFooter,validateHasFooter}from"./has-footer";export{PropHideLabel,validateHideLabel}from"./hide-label";export{PropIndeterminate,validateIndeterminate}from"./indeterminate";export{PropLabel,validateLabel}from"./label";export{PropMultiple,validateMultiple}from"./multiple";export{PropOpen,validateOpen}from"./open";export{PropReadOnly,validateReadOnly}from"./read-only";export{PropRequired,validateRequired}from"./required";export{PropShow,validateShow}from"./show";export{PropStealth,validateStealth}from"./stealth";export{PropTouched,validateTouched}from"./touched";

package/doc/alert.md

@@ -95,10 +95,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ### Used by
 
- - kol-input
- - [kol-input-adapter-leanup](../input-adapter-leanup)
- - [kol-input-radio](../input-radio)
- - [kol-toast](../toast)
+ - [kol-alert](.)
 
 ### Depends on
 
@@ -109,18 +106,15 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 ### Graph
 ```mermaid
 graph TD;
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-input --> kol-alert
-  kol-input-adapter-leanup --> kol-alert
-  kol-input-radio --> kol-alert
-  kol-toast --> kol-alert
-  style kol-alert fill:#f9f,stroke:#333,stroke-width:4px
+  kol-alert --> kol-alert-wc
+  style kol-alert-wc fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/badge.md

@@ -62,15 +62,15 @@ Der Schriftschnitt wird vom Host übernommen, kann also via CSS von außen geset
 <ul class="m-0 p-0">
   <li class="flex gap-2">
     <kol-badge _label="1" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _headline="Auswahl Anliegen"></kol-heading>
+    <kol-heading _level="2" _label="Auswahl Anliegen"></kol-heading>
   </li>
   <li class="flex gap-2">
     <kol-badge _label="2" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _headline="Auswahl Amtsstelle"></kol-heading>
+    <kol-heading _level="2" _label="Auswahl Amtsstelle"></kol-heading>
   </li>
   <li class="flex gap-2">
     <kol-badge _label="3" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _headline="Terminauswahl"></kol-heading>
+    <kol-heading _level="2" _label="Terminauswahl"></kol-heading>
   </li>
 </ul>
 

package/doc/heading.md

@@ -54,7 +54,7 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 ### Used by
 
  - [kol-accordion](../accordion)
- - [kol-alert](../alert)
+ - [kol-alert-wc](../alert)
  - [kol-card](../card)
  - [kol-heading](.)
  - [kol-link-group](../link-group)
@@ -63,7 +63,7 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 ```mermaid
 graph TD;
   kol-accordion --> kol-heading-wc
-  kol-alert --> kol-heading-wc
+  kol-alert-wc --> kol-heading-wc
   kol-card --> kol-heading-wc
   kol-heading --> kol-heading-wc
   kol-link-group --> kol-heading-wc

package/doc/icon.md

@@ -67,7 +67,7 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 
 ### Used by
 
- - [kol-alert](../alert)
+ - [kol-alert-wc](../alert)
  - [kol-breadcrumb](../breadcrumb)
  - [kol-details](../details)
  - [kol-icon-font-awesome](../icon-font-awesome)
@@ -80,7 +80,7 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 ### Graph
 ```mermaid
 graph TD;
-  kol-alert --> kol-icon
+  kol-alert-wc --> kol-icon
   kol-breadcrumb --> kol-icon
   kol-details --> kol-icon
   kol-icon-font-awesome --> kol-icon

package/doc/input-adapter-leanup.md

@@ -17,9 +17,10 @@
 graph TD;
   kol-input-adapter-leanup --> kol-alert
   kol-input-adapter-leanup --> kol-link
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon

package/doc/input-checkbox.md

@@ -76,9 +76,9 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 | `_required`      | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
 | `_tabIndex`      | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
 | `_touched`       | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_type`          | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button"` \| `"checkbox"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                             | `undefined` |
+| `_type`          | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
 | `_value`         | `_value`         | Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_variant`       | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button"` \| `"checkbox"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                             | `undefined` |
+| `_variant`       | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
 
 
 ## Dependencies
@@ -100,9 +100,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-color.md

@@ -84,9 +84,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-color fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-date.md

@@ -100,9 +100,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-date fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-email.md

@@ -89,9 +89,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-email fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-file.md

@@ -80,9 +80,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-file fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-number.md

@@ -84,9 +84,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-input-date --> kol-input-number
   style kol-input-number fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/input-password.md

@@ -81,9 +81,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-radio-group.md

@@ -45,9 +45,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-radio-group fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-radio.md

@@ -125,9 +125,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-input-radio-group --> kol-input-radio
   style kol-input-radio fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/input-range.md

@@ -77,9 +77,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-range fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/input-text.md

@@ -87,9 +87,10 @@ graph TD;
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
   kol-tooltip --> kol-span-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-text fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/link-button.md

@@ -39,6 +39,7 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 | `_ariaSelected`       | `_aria-selected`      | Gibt an, ob Element ausgewählt ist (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`           | Gibt an, ob der Link deaktiviert ist.                                                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                 | `false`                             |
+| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                                                                                                                  | `boolean` \| `string` \| `undefined`                                                       | `false`                             |
 | `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                                                                                                       | `string`                                                                               | `undefined`                         |
 | `_icon`               | `_icon`               | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                   | `undefined`                         |
 | `_iconOnly`           | `_icon-only`          | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean` \| `undefined`                                                                 | `false`                             |

package/doc/link.md

@@ -78,6 +78,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 | `_ariaLabel`          | `_aria-label`         | Gibt einen beschreibenden Text des Links an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)                                                 | `string` \| `undefined`                                                               | `undefined`                                    |
 | `_ariaSelected`       | `_aria-selected`      | Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                | `boolean` \| `undefined`                                                              | `undefined`                                    |
 | `_disabled`           | `_disabled`           | Gibt an, ob der Link deaktiviert ist.                                                                                                                                                 | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                  | `boolean` \| `string` \| `undefined`                                                    | `false`                                        |
 | `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                       | `string`                                                                            | `undefined`                                    |
 | `_icon`               | `_icon`               | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                | `undefined`                                    |
 | `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<br/><br/>Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `undefined`                                    |

package/doc/pagination.md

@@ -92,9 +92,10 @@ graph TD;
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-table --> kol-pagination
   style kol-pagination fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/popover.md

@@ -11,7 +11,7 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 | Property     | Attribute    | Description                                                        | Type                                                  | Default |
 | ------------ | ------------ | ------------------------------------------------------------------ | ----------------------------------------------------- | ------- |
 | `_alignment` | `_alignment` | Setzt die Ausrichtung des Popovers in Relation zum Triggerelement. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'` |
-| `_open`      | `_open`      | Öffnet/schließt das Popover.                                       | `boolean` \| `undefined`                                | `false` |
+| `_show`      | `_show`      | Öffnet/schließt das Popover.                                       | `boolean` \| `undefined`                                | `false` |
 
 
 ----------------------------------------------

package/doc/progress.md

@@ -8,13 +8,15 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ```html
 <div>
-	<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
 </div>
 ```
 
 ### Beispiel
 
-<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
 
 ## Verwendung
 
@@ -45,6 +47,7 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 | Property              | Attribute | Description                                                          | Type                            | Default     |
 | --------------------- | --------- | -------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `_label`              | `_label`  | Setzt die Bezeichnung der Fortschrittsanzeige.                       | `string` \| `undefined`           | `undefined` |
 | `_max` _(required)_   | `_max`    | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number`                        | `undefined` |
 | `_type`               | `_type`   | Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.      | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
 | `_unit`               | `_unit`   | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)      | `string` \| `undefined`           | `'%'`       |