@public-ui/components 1.7.0-rc.0 → 1.7.0-rc.11

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/split-button.md

@@ -2,6 +2,13 @@
 
 > <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
 
+Die SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button
+üblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü ("Popover") öffnet, hinter
+dem sich weitere Aktionen verbergen.
+
+- Der Sekundär-Button togglet grundsätzlich das Kontextmenü.
+- Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü.
+
 ## Konstruktion
 
 ### Code
@@ -10,7 +17,7 @@
 <kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>
 ```
 
-Geöffnet:
+Initial geöffnet:
 
 ```html
 <kol-split-button _label="Split-Button" _show-dropdown>Split-Button Popover</kol-split-button>
@@ -25,21 +32,6 @@ Geöffnet:
   Split-Button Popover
 </kol-split-button>
 
-## Verwendung
-
-### Best practices
-
-### Tastatursteuerung
-
-| Taste   | Funktion |
-| ------- | -------- |
-| `Tab`   | ??       |
-| `Enter` | ??       |
-
-## Links und Referenzen
-
-- <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 -->
 
 
@@ -61,6 +53,7 @@ Geöffnet:
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
 | `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_show`               | `_show`          | Makes the element show up.                                                                                                                                                       | `boolean` \| `undefined`                                                                                                                                 | `false`     |
 | `_showDropdown`       | `_show-dropdown` | 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'`     |

package/doc/toast-container.md

@@ -0,0 +1,46 @@
+Siehe [Toast](/docs/components/toast).
+
+<!-- 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

@@ -1,24 +1,27 @@
 # Toast
 
-Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.
-
-Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für zehn Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
+Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster
+angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.
 
 ## Konstruktion
 
+Die Toast-Komponente wird nicht direkt verwendet, sondern immer über den ToasterService konstruiert.
+
 ### 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';
 
-### Beispiel
+// Get the toaster instance for the current HTML document.
+const toaster = ToasterService.getInstance(document);
 
-<div class="d-grid gap-2">
-  <kol-alert _label="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
-  <kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
-</div>
+// 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',
+});
+```
 
 ## Verwendung
 
@@ -26,17 +29,9 @@ Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster
 
 Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen.
 
-### Größe der Überschrift
-
-Verwenden Sie das Attribut **`_level`**, um die Überschriftenebene zu setzen.
-
-### Anzeigen des Toasts
-
-Verwenden Sie das Attribut **`_show`**, um den Toast manuell anzuzeigen.
+### Inhalt
 
-### Anzeigedauer des Toast
-
-Verwenden Sie das Attribut **`_showDuration`**, um die Anzeigedauer des Toasts festzulegen.
+Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen.
 
 ### Anzeigetyp des Toast
 
@@ -48,28 +43,17 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 - `success`
 - `warning`
 
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
 <!-- Auto Generated Below -->
 
 
 ## 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 +65,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 +85,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
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "1.7.0-rc.0",
+  "version": "1.7.0-rc.11",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "bugs": { "url": "https://github.com/public-ui/kolibri/issues", "email": "kolibri@itzbund.de" },
@@ -40,6 +40,6 @@
     "webstandard",
     "wcag"
   ],
-  "files": ["assets", "dist", "doc", "custom-elements.json", "jest-test-results.json", "vscode-custom-data.json"],
+  "files": ["assets", "dist", "doc", "custom-elements.json", "vscode-custom-data.json"],
   "scripts": { "postpack": "mv package.bak.json package.json" }
 }

package/vscode-custom-data.json

@@ -772,6 +772,9 @@
             {
               "name": "link"
             },
+            {
+              "name": "search"
+            },
             {
               "name": "table"
             },
@@ -808,9 +811,6 @@
             {
               "name": "heading"
             },
-            {
-              "name": "search"
-            },
             {
               "name": "anchor"
             },
@@ -5193,6 +5193,9 @@
             {
               "name": "picture"
             },
+            {
+              "name": "search"
+            },
             {
               "name": "table"
             },
@@ -5238,9 +5241,6 @@
             {
               "name": "contrast"
             },
-            {
-              "name": "search"
-            },
             {
               "name": "anchor"
             },
@@ -13206,7 +13206,7 @@
         },
         {
           "name": "_heading",
-          "description": "Gibt die optionale Überschrift zur Link-Gruppe an."
+          "description": "Deprecated: Gibt die optionale Überschrift zur Link-Gruppe an."
         },
         {
           "name": "_label",
@@ -13807,7 +13807,7 @@
       "name": "kol-split-button",
       "description": {
         "kind": "markdown",
-        "value": "> <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen."
+        "value": "> <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button\nüblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü (\"Popover\") öffnet, hinter\ndem sich weitere Aktionen verbergen.\n\n- Der Sekundär-Button togglet grundsätzlich das Kontextmenü.\n- Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü."
       },
       "attributes": [
         {
@@ -13873,6 +13873,10 @@
             }
           ]
         },
+        {
+          "name": "_show",
+          "description": "Makes the element show up."
+        },
         {
           "name": "_show-dropdown",
           "description": "Defines whether to show the dropdown menu."
@@ -14191,36 +14195,27 @@
       "name": "kol-toast",
       "description": {
         "kind": "markdown",
-        "value": "Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.\n\nEin **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für zehn Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden."
+        "value": "Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster\nangezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt."
       },
       "attributes": [
-        {
-          "name": "_alert",
-          "description": "Defines whether the screen-readers should read out the notification."
-        },
-        {
-          "name": "_has-closer",
-          "description": "Defines whether the element can be closed."
-        },
-        {
-          "name": "_heading",
-          "description": "Deprecated: Gibt die Beschriftung der Komponente an."
-        },
         {
           "name": "_label",
           "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
         },
         {
-          "name": "_level",
-          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
-        },
-        {
-          "name": "_show",
-          "description": "Makes the element show up."
-        },
-        {
-          "name": "_show-duration",
-          "description": "Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll."
+          "name": "_status",
+          "description": "Defines the current toast status.",
+          "values": [
+            {
+              "name": "adding"
+            },
+            {
+              "name": "removing"
+            },
+            {
+              "name": "settled"
+            }
+          ]
         },
         {
           "name": "_type",
@@ -14245,6 +14240,14 @@
         }
       ]
     },
+    {
+      "name": "kol-toast-container",
+      "description": {
+        "kind": "markdown",
+        "value": "Siehe [Toast](/docs/components/toast)."
+      },
+      "attributes": []
+    },
     {
       "name": "kol-tooltip-wc",
       "description": {

package/dist/cjs/align-cd2b9ee6.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const alignment=require("./alignment-6ed74ea9.js"),validateAlign=(e,i)=>{alignment.validateAlignment(e,"_align",i)};exports.validateAlign=validateAlign;

package/dist/cjs/associated.controller-046a3bc7.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-9c5ce3b2.js"),a11y_tipps=require("./a11y.tipps-96ce9b37.js"),dev_utils=require("./dev.utils-044a40b7.js");function stopPropagation(t){t.stopImmediatePropagation(),t.stopPropagation()}function createKoliBriEvent(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}function dispatchKoliBriEvent(t,e,i){return t.dispatchEvent(createKoliBriEvent(e,i))}function tryToDispatchKoliBriEvent(t,e,i){e&&dispatchKoliBriEvent(e,t,i)}const validateName=(t,e,i)=>{prop_validators.watchString(t,"_name",e,i)},EXPERIMENTAL_MODE=dev_utils.getExperimentalMode();class AssociatedInputController{constructor(t,e,i){var o,s;if(this.setFormAssociatedValue=t=>{var e;const i=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==i&&""!==i||a11y_tipps.devHint(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const o=this.tryToStringifyValue(t);this.syncValue(t,o,this.formAssociated),this.syncValue(t,o,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(i),this.name=e,EXPERIMENTAL_MODE){switch(null===(o=this.host)||void 0===o||o.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(s=this.host)||void 0===s||s.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,i){if(EXPERIMENTAL_MODE)try{if("boolean"!=typeof(i="object"==typeof i&&null!==i?JSON.stringify(i):i)&&"number"!=typeof i&&"string"!=typeof i)throw new Error("Invalid value type: "+typeof i);null==e||e.setAttribute(t,`${i}`)}catch(i){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return a11y_tipps.devWarning(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,i){if(i)if("select"===this.name)i.querySelectorAll("option").forEach((t=>{i.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),i.appendChild(t)}}));else"string"==typeof e?(i.setAttribute("value",e),i.value=e):(i.removeAttribute("value"),i.value="")}validateName(t){validateName(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&a11y_tipps.devHint("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(EXPERIMENTAL_MODE&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}exports.AssociatedInputController=AssociatedInputController,exports.stopPropagation=stopPropagation,exports.tryToDispatchKoliBriEvent=tryToDispatchKoliBriEvent;

package/dist/cjs/controller-4da78e89.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-9c5ce3b2.js"),label=require("./label-59b52b43.js"),a11y_tipps=require("./a11y.tipps-96ce9b37.js"),associated_controller=require("./associated.controller-046a3bc7.js"),tabIndex=require("./tab-index-0c7777be.js"),hideLabel=require("./hide-label-fe2e600f.js"),getRenderStates=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,i=[];return!0===e&&i.push(`${t._id}-error`),!0===o&&i.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:i}},validateAdjustHeight=(t,e)=>{prop_validators.watchBoolean(t,"_adjustHeight",e)},validateTouched=(t,e)=>{prop_validators.watchBoolean(t,"_touched",e)};class ControlledInputController extends associated_controller.AssociatedInputController{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){validateTouched(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){validateAdjustHeight(this.component,t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t)}validateHideLabel(t){hideLabel.validateHideLabel(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&a11y_tipps.a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateId(t){prop_validators.watchString(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){label.validateLabelWithExpertSlot(this.component,t)}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){tabIndex.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,associated_controller.stopPropagation(t),associated_controller.tryToDispatchKoliBriEvent("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;associated_controller.stopPropagation(t),associated_controller.tryToDispatchKoliBriEvent("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;associated_controller.stopPropagation(t),associated_controller.tryToDispatchKoliBriEvent("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,associated_controller.stopPropagation(t),associated_controller.tryToDispatchKoliBriEvent("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;

package/dist/cjs/controller-4da78e89.js.map

@@ -1 +0,0 @@
-{"file":"controller-4da78e89.js","mappings":"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","names":["watchBoolean","AssociatedInputController","watchString","a11yHintDisabled","validateHideLabel","a11yHint","devHint","validateLabelWithExpertSlot","setState","objectObjectHandler","parseJson","validateTabIndex","stopPropagation","tryToDispatchKoliBriEvent"],"sources":["src/components/input/controller.ts","src/types/props/adjust-height.ts","src/types/props/touched.ts","src/components/input-adapter-leanup/controller.ts","src/components/@deprecated/input/controller.ts"],"sourcesContent":["import { TouchedPropType } from '../../types/props/touched';\n\n/**\n * Berechnet in Abhängigkeit des Component-State, wie die\n * aria-describedby-Attributs gesetzt werden sollen.\n *\n * @param state State der Component\n * @returns Render-States\n */\nexport const getRenderStates = (state: {\n\t_error?: string;\n\t_hint?: string;\n\t_id: string;\n\t_touched?: TouchedPropType;\n}): {\n\thasError: boolean;\n\thasHint: boolean;\n\tariaDescribedBy: string[];\n} => {\n\tconst hasError = typeof state._error === 'string' && state._error.length > 0 && state._touched === true;\n\tconst hasHint = typeof state._hint === 'string' && state._hint.length > 0;\n\n\tconst ariaDescribedBy: string[] = [];\n\tif (hasError === true) {\n\t\tariaDescribedBy.push(`${state._id}-error`);\n\t}\n\tif (hasHint === true) {\n\t\tariaDescribedBy.push(`${state._id}-hint`);\n\t}\n\treturn { hasError, hasHint, ariaDescribedBy };\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AdjustHeightPropType = boolean;\n\n/**\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: AdjustHeightPropType;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: AdjustHeightPropType): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type TouchedPropType = boolean;\n\n/**\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: TouchedPropType;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: TouchedPropType): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { validateTouched } from '../../types/props/touched';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { AssociatedInputController } from './associated.controller';\nimport { Props, Watches } from './types';\n\nexport class ControlledInputController extends AssociatedInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this.component, '_alert', value);\n\t}\n\n\tpublic validateTouched(value?: boolean): void {\n\t\tvalidateTouched(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAlert(this.component._alert);\n\t\tthis.validateTouched(this.component._touched);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnDefault } from '../../../types/input/types';\nimport { AdjustHeightPropType, validateAdjustHeight } from '../../../types/props/adjust-height';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../../types/props/label';\nimport { a11yHint, a11yHintDisabled, devHint } from '../../../utils/a11y.tipps';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';\nimport { objectObjectHandler, parseJson, setState, watchBoolean, watchString } from '../../../utils/prop.validators';\nimport { validateTabIndex } from '../../../utils/validators/tab-index';\nimport { ControlledInputController } from '../../input-adapter-leanup/controller';\nimport { Props as ButtonProps } from '../../button/types';\nimport { Props as AdapterProps } from '../../input-adapter-leanup/types';\nimport { Props, Watches } from './types';\nimport { validateHideLabel } from '../../../types/props/hide-label';\n\ntype ValueChangeListener = (value: string) => void;\n\nexport class InputController extends ControlledInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props & AdapterProps;\n\n\tprivate readonly valueChangeListeners: ValueChangeListener[] = [];\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this.component, '_accessKey', value);\n\t}\n\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tvalidateAdjustHeight(this.component, value);\n\t}\n\n\tpublic validateDisabled(value?: boolean): void {\n\t\twatchBoolean(this.component, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\tpublic validateError(value?: string): void {\n\t\twatchString(this.component, '_error', value);\n\t}\n\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideLabel) {\n\t\t\t\t\t\ta11yHint('Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateHint(value?: string): void {\n\t\twatchString(this.component, '_hint', value);\n\t}\n\n\tpublic validateId(value?: string): void {\n\t\twatchString(this.component, '_id', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('id', this.formAssociated, this.component.state._id as string);\n\t\t\t\t},\n\t\t\t},\n\t\t\tminLength: 1,\n\t\t});\n\t\tif (value === '' || typeof value === 'undefined') {\n\t\t\tdevHint(`Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.`);\n\t\t}\n\t}\n\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this.component, value);\n\t}\n\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tif (typeof value === 'object') {\n\t\t\tsetState(this.component, '_on', value);\n\t\t}\n\t}\n\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this.component, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccessKey(this.component._accessKey);\n\t\tthis.validateAdjustHeight(this.component._adjustHeight);\n\t\tthis.validateError(this.component._error);\n\t\tthis.validateDisabled(this.component._disabled);\n\t\tthis.validateHideLabel(this.component._hideLabel);\n\t\tthis.validateHint(this.component._hint);\n\t\tthis.validateId(this.component._id);\n\t\tthis.validateLabel(this.component._label);\n\t\tthis.validateSmartButton(this.component._smartButton);\n\t\tthis.validateOn(this.component._on);\n\t\tthis.validateTabIndex(this.component._tabIndex);\n\t}\n\n\tprotected onBlur(event: Event): void {\n\t\tthis.component._alert = true;\n\t\tthis.component._touched = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('blur', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onBlur === 'function') {\n\t\t\tthis.component._on.onBlur(event);\n\t\t}\n\t}\n\n\tprotected onChange(event: Event): void {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.setFormAssociatedValue(value);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\t/**\n\t\t\t * TODO\n\t\t\t * Value-Handling muss für InputDate und InputNumber optimiert werden\n\t\t\t * - value\n\t\t\t * - valueAsNumber\n\t\t\t * - valueAsDate\n\t\t\t */\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\n\t\t/**\n\t\t * TODO: Was ist das?\n\t\t */\n\t\tthis.valueChangeListeners.forEach((listener) => listener(value));\n\t}\n\n\tprotected onClick(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('click', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onClick === 'function') {\n\t\t\tthis.component._on.onClick(event);\n\t\t}\n\t}\n\n\tprotected onFocus(event: Event): void {\n\t\tthis.component._alert = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('focus', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onFocus === 'function') {\n\t\t\tthis.component._on.onFocus(event);\n\t\t}\n\t}\n\n\tpublic setValue(event: Event, value: string | number | boolean): void {\n\t\tthis.setFormAssociatedValue(value as string);\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\t}\n\n\tpublic addValueChangeListener(listener: ValueChangeListener) {\n\t\tthis.valueChangeListeners.push(listener);\n\t}\n\n\t/**\n\t * Hinweis: In der Subklasse 'InputPasswordController'\n\t *          werden die Methoden onBlur und onFocus\n\t *          überschrieben.\n\t *          Es werden somit zunächst die Methoden der\n\t *          Subklasse ausgeführt und danach die der\n\t *          Oberklassen.\n\t */\n\tpublic readonly onFacade = {\n\t\tonBlur: this.onBlur.bind(this),\n\t\tonChange: this.onChange.bind(this),\n\t\tonClick: this.onClick.bind(this),\n\t\tonFocus: this.onFocus.bind(this),\n\t};\n}\n"],"version":3}