@public-ui/components 1.6.2 → 1.7.0-rc.2

package/dist/types/components.d.ts

@@ -30,6 +30,7 @@ import { IdPropType } from "./types/props/id";
 import { NamePropType } from "./types/props/name";
 import { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 import { KoliBriCardEventCallbacks } from "./components/card/types";
+import { EventCallbacks } from "./components/details/types";
 import { KoliBriFormCallbacks } from "./components/form/types";
 import { FontAwesome, FontAwesomeOssPrefix } from "./enums/font-awesome";
 import { Icofont } from "./types/icofont";
@@ -62,6 +63,7 @@ import { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 import { CSSResize } from "./components/textarea/types";
 import { KoliBriToastEventCallbacks } from "./types/toast";
+import { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
 export { LabelPropType, LabelWithExpertSlotPropType } from "./types/props/label";
 export { TooltipAlignPropType } from "./types/props/tooltip-align";
 export { HeadingLevel } from "./types/heading-level";
@@ -87,6 +89,7 @@ export { IdPropType } from "./types/props/id";
 export { NamePropType } from "./types/props/name";
 export { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 export { KoliBriCardEventCallbacks } from "./components/card/types";
+export { EventCallbacks } from "./components/details/types";
 export { KoliBriFormCallbacks } from "./components/form/types";
 export { FontAwesome, FontAwesomeOssPrefix } from "./enums/font-awesome";
 export { Icofont } from "./types/icofont";
@@ -119,6 +122,7 @@ export { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps
 export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 export { CSSResize } from "./components/textarea/types";
 export { KoliBriToastEventCallbacks } from "./types/toast";
+export { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
 export namespace Components {
     interface KolAbbr {
         /**
@@ -628,6 +632,10 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
+        /**
+          * Defines the callback functions for details.
+         */
+        "_on"?: EventCallbacks;
         /**
           * If set (to true) opens/expands the element, closes if not set (or set to false).
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
@@ -2154,7 +2162,8 @@ export namespace Components {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt die optionale Überschrift zur Link-Gruppe an.
+          * Deprecated: Gibt die optionale Überschrift zur Link-Gruppe an.
+          * @deprecated remove in the next major version
          */
         "_heading"?: string;
         /**
@@ -2618,6 +2627,10 @@ export namespace Components {
         "_label": LabelWithExpertSlotPropType;
     }
     interface KolSpanWc {
+        /**
+          * Allows to use markdown in the label. Defaults to `false`.
+         */
+        "_allowMarkdown"?: boolean;
         /**
           * Hides the label and shows the description in a Tooltip instead.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
@@ -2915,46 +2928,26 @@ export namespace Components {
         "_value"?: string;
     }
     interface KolToast {
-        /**
-          * Defines whether the screen-readers should read out the notification.
-         */
-        "_alert"?: boolean;
-        /**
-          * Defines whether the element can be closed.
-          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
-         */
-        "_hasCloser"?: boolean;
-        /**
-          * Deprecated: Gibt die Beschriftung der Komponente an.
-          * @deprecated Use _label.
-         */
-        "_heading"?: string;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label"?: LabelPropType;
-        /**
-          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
-         */
-        "_level"?: HeadingLevel;
+        "_label": LabelPropType;
         /**
-          * Gibt die EventCallback-Function für das Schließen des Toasts an.
+          * Defines the event callback functions for the component.
          */
         "_on"?: KoliBriToastEventCallbacks;
         /**
-          * Makes the element show up.
-          * @TODO : Change type back to `ShowPropType` after Stencil#4663 has been resolved.
-         */
-        "_show"?: boolean;
-        /**
-          * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.
+          * Defines the current toast status.
          */
-        "_showDuration"?: number;
+        "_status": ToastStatus;
         /**
           * Defines either the type of the component or of the components interactive element.
          */
         "_type"?: AlertType;
     }
+    interface KolToastContainer {
+        "enqueue": (toast: Toast) => Promise<void>;
+    }
     interface KolTooltipWc {
         /**
           * Defines the alignment of the tooltip in relation to the parent element.
@@ -3357,6 +3350,12 @@ declare global {
         prototype: HTMLKolToastElement;
         new (): HTMLKolToastElement;
     };
+    interface HTMLKolToastContainerElement extends Components.KolToastContainer, HTMLStencilElement {
+    }
+    var HTMLKolToastContainerElement: {
+        prototype: HTMLKolToastContainerElement;
+        new (): HTMLKolToastContainerElement;
+    };
     interface HTMLKolTooltipWcElement extends Components.KolTooltipWc, HTMLStencilElement {
     }
     var HTMLKolTooltipWcElement: {
@@ -3430,6 +3429,7 @@ declare global {
         "kol-tabs": HTMLKolTabsElement;
         "kol-textarea": HTMLKolTextareaElement;
         "kol-toast": HTMLKolToastElement;
+        "kol-toast-container": HTMLKolToastContainerElement;
         "kol-tooltip-wc": HTMLKolTooltipWcElement;
         "kol-version": HTMLKolVersionElement;
     }
@@ -3931,6 +3931,10 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
+        /**
+          * Defines the callback functions for details.
+         */
+        "_on"?: EventCallbacks;
         /**
           * If set (to true) opens/expands the element, closes if not set (or set to false).
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
@@ -5412,7 +5416,8 @@ declare namespace LocalJSX {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt die optionale Überschrift zur Link-Gruppe an.
+          * Deprecated: Gibt die optionale Überschrift zur Link-Gruppe an.
+          * @deprecated remove in the next major version
          */
         "_heading"?: string;
         /**
@@ -5872,6 +5877,10 @@ declare namespace LocalJSX {
         "_label": LabelWithExpertSlotPropType;
     }
     interface KolSpanWc {
+        /**
+          * Allows to use markdown in the label. Defaults to `false`.
+         */
+        "_allowMarkdown"?: boolean;
         /**
           * Hides the label and shows the description in a Tooltip instead.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
@@ -6161,46 +6170,25 @@ declare namespace LocalJSX {
         "_value"?: string;
     }
     interface KolToast {
-        /**
-          * Defines whether the screen-readers should read out the notification.
-         */
-        "_alert"?: boolean;
-        /**
-          * Defines whether the element can be closed.
-          * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
-         */
-        "_hasCloser"?: boolean;
-        /**
-          * Deprecated: Gibt die Beschriftung der Komponente an.
-          * @deprecated Use _label.
-         */
-        "_heading"?: string;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
-        "_label"?: LabelPropType;
-        /**
-          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
-         */
-        "_level"?: HeadingLevel;
+        "_label": LabelPropType;
         /**
-          * Gibt die EventCallback-Function für das Schließen des Toasts an.
+          * Defines the event callback functions for the component.
          */
         "_on"?: KoliBriToastEventCallbacks;
         /**
-          * Makes the element show up.
-          * @TODO : Change type back to `ShowPropType` after Stencil#4663 has been resolved.
-         */
-        "_show"?: boolean;
-        /**
-          * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.
+          * Defines the current toast status.
          */
-        "_showDuration"?: number;
+        "_status": ToastStatus;
         /**
           * Defines either the type of the component or of the components interactive element.
          */
         "_type"?: AlertType;
     }
+    interface KolToastContainer {
+    }
     interface KolTooltipWc {
         /**
           * Defines the alignment of the tooltip in relation to the parent element.
@@ -6287,6 +6275,7 @@ declare namespace LocalJSX {
         "kol-tabs": KolTabs;
         "kol-textarea": KolTextarea;
         "kol-toast": KolToast;
+        "kol-toast-container": KolToastContainer;
         "kol-tooltip-wc": KolTooltipWc;
         "kol-version": KolVersion;
     }
@@ -6370,6 +6359,7 @@ declare module "@stencil/core" {
             "kol-tabs": LocalJSX.KolTabs & JSXBase.HTMLAttributes<HTMLKolTabsElement>;
             "kol-textarea": LocalJSX.KolTextarea & JSXBase.HTMLAttributes<HTMLKolTextareaElement>;
             "kol-toast": LocalJSX.KolToast & JSXBase.HTMLAttributes<HTMLKolToastElement>;
+            "kol-toast-container": LocalJSX.KolToastContainer & JSXBase.HTMLAttributes<HTMLKolToastContainerElement>;
             "kol-tooltip-wc": LocalJSX.KolTooltipWc & JSXBase.HTMLAttributes<HTMLKolTooltipWcElement>;
             "kol-version": LocalJSX.KolVersion & JSXBase.HTMLAttributes<HTMLKolVersionElement>;
         }

package/dist/types/dev/details-synced-open-state.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1 @@
+import"./theme-registration";

package/dist/types/dev/reprod-accordion-does-not-toggle-with-open.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/types/dev/theme-registration.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/dev/toaster.d.ts

@@ -0,0 +1 @@
+export{};

package/dist/types/i18n.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 import locale_de from './locales/de';
 type ResourcePrefix = 'Kol';
 type ComponentKeys = keyof typeof locale_de;
-export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "pagination" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "sort-descending" | "sort-ascending" | "sort-none" | "table-pagination-label" | "avatar-alt">>;
+export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "pagination" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "sort-descending" | "sort-ascending" | "sort-none" | "table-pagination-label" | "avatar-alt" | "toast-close-all">>;
 type Options = {
   count?: number;
   placeholders?: {

package/dist/types/locales/de.d.ts

@@ -32,5 +32,6 @@ declare const _default: {
   'sort-none': string;
   'table-pagination-label': string;
   'avatar-alt': string;
+  'toast-close-all': string;
 };
 export default _default;

package/dist/types/locales/en.d.ts

@@ -32,5 +32,6 @@ declare const _default: {
   'sort-none': string;
   'table-pagination-label': string;
   'avatar-alt': string;
+  'toast-close-all': string;
 };
 export default _default;

package/dist/types/utils/events.d.ts

@@ -1,4 +1,4 @@
-type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus';
+type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'toggle';
 export declare function stopPropagation(event: Event): void;
 export declare function tryToDispatchKoliBriEvent<T>(type: KoliBriEventType, target?: EventTarget, detail?: T): void;
 export {};

package/dist/types/utils/markdown.d.ts

@@ -0,0 +1 @@
+export declare const markdown: (text: string) => string;

package/dist/types/utils/reuse.d.ts

@@ -1,5 +1,5 @@
 export declare const propagateFocus: <H extends HTMLElement, R extends HTMLElement>(host?: H | undefined, ref?: R | undefined) => void;
-export declare const smartSetTimeout: (cb: () => void, delay?: number) => void;
 type ProzessEnv = 'development' | 'production' | 'test';
 export declare let processEnv: ProzessEnv;
+export declare const handleSlotContent: (hostRef: HTMLElement, slotRef: HTMLElement, slotName: string) => void;
 export {};

package/doc/button.md

@@ -131,6 +131,7 @@ Probleme mit Disabled-Status
  - [kol-nav](../nav)
  - [kol-pagination](../pagination)
  - [kol-table](../table)
+ - [kol-toast-container](../toast-container)
 
 ### Depends on
 
@@ -147,6 +148,7 @@ graph TD;
   kol-nav --> kol-button
   kol-pagination --> kol-button
   kol-table --> kol-button
+  kol-toast-container --> kol-button
   style kol-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/details.md

@@ -91,11 +91,12 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 
 ## 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` |
-| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                                     | `boolean` \| `undefined` | `false`     |
-| `_summary` | `_summary` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an. | `string` \| `undefined`  | `undefined` |
+| Property   | Attribute  | Description                                                                                                                          | Type                                                                                  | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- |
+| `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                   | `string` \| `undefined`                                                                 | `undefined` |
+| `_on`      | --         | Defines the callback functions for details.                                                                                          | `undefined` \| `{ onToggle?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
+| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                                     | `boolean` \| `undefined`                                                                | `false`     |
+| `_summary` | `_summary` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an. | `string` \| `undefined`                                                                 | `undefined` |
 
 
 ## Slots

package/doc/input-date.md

@@ -14,6 +14,27 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
 
 <kol-input-date _type="date" _label="Erstellungsdatum" _icon='{"right": "codicon codicon-calendar"}'></kol-input-date>
 
+#### Datum entfernen
+
+Folgendes Beispiel zeigt eine Component in React, die die Möglichkeit bietet über einen Button den Wert im Datumsfeld zu entfernen.
+
+```jsx
+const ClearableDateInput = () => {
+  const [value, setValue] = useState<Date>();
+  return (
+    <>
+        <KolInputDate
+          _label="Lorem ipsum dolor sit"
+          _value={value}
+          _on={{ onChange: (_, v: Date) => setValue(v) }}
+        />
+        {/* Set null as value to clear the inputs value. */}
+        <KolButton _on={{ onClick: () => setValue(null) }} _label="Clear" />
+    </>
+  );
+};
+```
+
 ## Verwendung
 
 Die **InputDate**-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.

package/doc/input-range.md

@@ -25,8 +25,7 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 	_max="200"
 	_value="100"
 	_step="20"
-	_icon='{"left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'
-	></kol-input-range
+	_icon='{"left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'></kol-input-range>
 
 ## Verwendung
 

package/doc/input-text.md

@@ -29,10 +29,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 <kol-input-text
 	_type="text"
 	_label="Mit Button"
-	_smart-button='{"_icon": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'
-	></kol-input-text
-
->
+	_smart-button='{"_icon": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'></kol-input-text>
 
 ## Verwendung
 

package/doc/link-group.md

@@ -84,7 +84,7 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 | 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`  |
-| `_heading`            | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                               | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
+| `_heading`            | `_heading`         | <span style="color:red">**[DEPRECATED]**</span> remove in the next major version<br/><br/>Deprecated: Gibt die optionale Überschrift zur Link-Gruppe an.                                                         | `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`  |
 | `_level`              | `_level`           | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                                                                                | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                                                                                                                                                        | `undefined`  |
 | `_links` _(required)_ | `_links`           | Defines the list of links to render.                                                                                                                                                                             | `LinkProps[]` \| `string`                                                                                                                                                                                               | `undefined`  |

package/doc/quote.md

@@ -33,23 +33,21 @@ Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`
 ### 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>
+	_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>
+	_label="RFC 1149"
+	_href="https://datatracker.ietf.org/doc/html/rfc1149"
+	_quote="Avian carriers can provide high delay."
+	_variant="inline"></kol-quote>
 
 ## Verwendung
 

package/doc/select.md

@@ -7,14 +7,14 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 
 ```html
-<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']">
+<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
-	_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'}]"
+	_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']"
+	_value="[1]"
 >
 	Auswahlfeld mit _rows
 </kol-select>
@@ -22,11 +22,11 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 
 ### Beispiel
 
-<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']">
+<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 _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>
+<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
 
@@ -34,12 +34,12 @@ Die Auswahlmöglichkeiten werden über das Attribut **`_options`** als Objekt od
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
-```js
+```json
 [
-	{ label: 'Herr', value: '0' },
-	{ label: 'Frau', value: '1' },
-	{ label: 'Firma', value: '2' },
-];
+	{ "label": "Herr", "value": 0 },
+	{ "label": "Frau", "value": 1 },
+	{ "label": "Firma", "value": 2 }
+]
 ```
 
 ### Individuelle Höhe angeben

package/doc/toast-container.md

@@ -0,0 +1,46 @@
+# kol-toast-container
+
+<!-- Auto Generated Below -->
+
+
+## Methods
+
+### `enqueue(toast: Toast) => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-button](../button)
+- [kol-toast](../toast)
+
+### Graph
+```mermaid
+graph TD;
+  kol-toast-container --> kol-button
+  kol-toast-container --> kol-toast
+  kol-button --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
+  kol-toast --> kol-alert
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
+  style kol-toast-container fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/toast.md

@@ -8,9 +8,18 @@ Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster
 
 ### Code
 
-```html
-<kol-alert _label="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
-<kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
+```js
+import { ToasterService } from '@public-ui/components';
+
+// Get the toaster instance for the current HTML document.
+const toaster = ToasterService.getInstance(document);
+
+// Enqueue a new toast to the toaster to display:
+toaster.enqueue({
+	label: 'This is the title',
+	description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
+	type: 'info',
+});
 ```
 
 ### Beispiel
@@ -59,17 +68,12 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                               | Type                                                                    | Default     |
-| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
-| `_alert`        | `_alert`         | Defines whether the screen-readers should read out the notification.                                                      | `boolean` \| `undefined`                                                  | `true`      |
-| `_hasCloser`    | `_has-closer`    | Defines whether the element can be closed.                                                                                | `boolean` \| `undefined`                                                  | `false`     |
-| `_heading`      | `_heading`       | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an. | `string` \| `undefined`                                                   | `''`        |
-| `_label`        | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).        | `string` \| `undefined`                                                   | `undefined` |
-| `_level`        | `_level`         | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                         | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
-| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                                                          | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
-| `_show`         | `_show`          | Makes the element show up.                                                                                                | `boolean` \| `undefined`                                                  | `true`      |
-| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.                                                      | `number` \| `undefined`                                                   | `10000`     |
-| `_type`         | `_type`          | Defines either the type of the component or of the components interactive element.                                        | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
+| 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` |
+| `_on`                  | --        | Defines the event callback functions for the component.                                                            | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
+| `_status` _(required)_ | `_status` | Defines the current toast status.                                                                                  | `"adding"` \| `"removing"` \| `"settled"`                                   | `undefined` |
+| `_type`                | `_type`   | Defines either the type of the component or of the components interactive element.                                 | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
 
 
 ## Slots
@@ -81,6 +85,10 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 
 ## Dependencies
 
+### Used by
+
+ - [kol-toast-container](../toast-container)
+
 ### Depends on
 
 - [kol-alert](../alert)
@@ -97,6 +105,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
+  kol-toast-container --> kol-toast
   style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
 ```