@public-ui/components 1.1.15 → 1.1.16-rc.0

package/doc/input-email.md

@@ -0,0 +1,103 @@
+# InputEmail
+
+Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-email _id="meine_email" _name="meine_email">
+	E-Mail-Adresse
+</kol-input-email>
+```
+
+### Beispiel
+
+<kol-input-email _id="meine_email" _name="meine_email">E-Mail-Adresse</kol-input-email>
+
+## Verwendung
+
+Setzen Sie die **InputEmail**-Komponente auf Formularen ein, wenn dort die Eingabe einer oder mehrerer E-Mail-Adressen erforderlich ist.
+
+Standardmäßig ist die Komponente für die Erfassung einer einzelnen E-Mail-Adresse vorgesehen. Setzen Sie das Attribut `_multiple=true`, um mehrere E-Mail-Adressen zu erfassen. Trennen Sie die einzelnen E-Mail-Adressen mit einem Komma (,) voneinander.
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+
+## Barrierefreiheit
+
+Die Validierung der erfassten E-Mail-Adressen erfolgt programmseitig. Bei Eingabe einer nicht validen E-Mail-Adresse wird unterhalb der Komponente eine **Alert**-Komponente angezeigt, die über das Attribut `_error` textseitig angepasst werden kann.
+
+### Tastatursteuerung
+
+| Taste | Funktion                    |
+| ----- | --------------------------- |
+| `Tab` | Fokussiert das Eingabefeld. |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                                              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `true`      |
+| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                             | `"off" \| "on" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_list`            | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                  | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_maxLength`       | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                    | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_multiple`        | `_multiple`      | Gibt an, ob mehrere Werte eingegeben werden können.                                                      | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_pattern`         | `_pattern`       | Gibt ein Prüfpattern für das Eingabefeld an.                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_readOnly`        | `_read-only`     | Gibt an, ob das Eingabefeld nur lesend ist.                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_required`        | `_required`      | Gibt an, ob das Radio ein Pflichtfeld ist.                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_size`            | `_size`          | Gibt an, wie viele Zeichen man eingeben kann.                                                            | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_smartButton`     | --               | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| 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`     |
+| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-email --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-email fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-file.md

@@ -0,0 +1,93 @@
+# InputFile
+
+Der Input-Typ **File** erzeugt ein Eingabefeld für Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png, image/jpeg, application/pdf">
+	Bild hochladen
+</kol-input-file>
+```
+
+### Beispiel
+
+<kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png">Bild hochladen</kol-input-file>
+
+## Verwendung
+
+Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erlaubt sind. Wird das Attribut nicht oder leer übergeben, sind alle Dateitypen erlaubt.
+
+### Best practices
+
+- Lassen Sie nur die Dateitypen zum Upload zu, die für die Programmausführung benötigt werden. Eine fehlende Einschränkung der hochladbaren Dateitypen kann ein erhebliches Sicherheitsrisiko sein.
+- Begrenzen Sie die Größe der Dateien, die Sie zum Upload zulassen möchten.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste | Funktion                                                        |
+| ----- | --------------------------------------------------------------- |
+| `Tab` | Fokussiert das Eingabefeld und ruft den Dateiauswahldialog auf. |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute     | Description                                                                                              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| ------------------ | ------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accept`          | `_accept`     | Gibt an, welche Dateiformate erlaubt sind.                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_accessKey`       | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_alert`           | `_alert`      | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `true`      |
+| `_disabled`        | `_disabled`   | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_error`           | `_error`      | Gibt den Text für eine Fehlermeldung an.                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_hideLabel`       | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hint`            | `_hint`       | Gibt den Text für eine Hinweistext an.                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `''`        |
+| `_icon`            | `_icon`       | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_id` _(required)_ | `_id`         | Gibt die technische ID des Eingabefeldes an.                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_multiple`        | `_multiple`   | Gibt an, ob mehrere Werte eingegeben werden können.                                                      | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_name`            | `_name`       | Gibt den technischen Namen des Eingabefeldes an.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`              | --            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_required`        | `_required`   | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                         | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_smartButton`     | --            | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| 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`     |
+| `_value`           | `_value`      | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-file --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-file fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-number.md

@@ -0,0 +1,125 @@
+# InputNumber
+
+Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen, Datumswerte, Datums- und Zeitwerte, Wochen, Monate und Zeiten.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-number _type="date" _id="mein_datum" _name="mein_datum">
+	Erstellungsdatum
+</kol-input-number>
+```
+
+### Beispiel
+
+<kol-input-number _type="date" _id="mein_datum" _name="mein_datum">
+  Erstellungsdatum
+</kol-input-number>
+
+## Verwendung
+
+Die **InputNumber**-Komponente kann für die Erfassung diverser Werte verwendet werden. Stellen Sie den gewünschten Typ über das Attribut `_type` ein.
+
+<kol-alert _type="info">Beachten Sie, dass im <b>Firefox</b> nicht alle <b>Typen</b> der **InputNumber**-Komponente funktional sind. Es werden bei den Typen <b>Month</b>, <b>Week</b> und <b>Datum & Zeit</b> keine Auswahldialoge angezeigt.</kol-alert>
+
+Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+
+## Barrierefreiheit
+
+Die Icons in der Komponente sind per Tab-Taste nicht erreichbar. Die Auswahlhilfen der Komponente werden über die **Leertaste** geöffnet. So erhalten Sie beispielsweise beim Typ **date** ein Kalendermodul, über das per Maus oder über die Tastatur das gewünschte Datum ausgewählt werden kann. Die manuelle Eingabe der Werte ist alternativ möglich.
+
+### Tastatursteuerung
+
+#### InputNumber -> Type = **_date_**, **_month_**, **_week_** und **_time_**
+
+| Taste                | Funktion                                                                                                                                                                                                                                     |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `Tab`                | Fokussiert das Eingabefeld. Nach erhalt des Fokus wechselt die Tab-Taste durch die Eingabebereiche. Danach erst wechselt die Tab-Taste zum nächsten Eingabefeld.                                                                             |
+| `Pfeil-Tasten (links | rechts)`                                                                                                                                                                                                                                     | Wenn das Eingabefeld fokussiert ist, kann mit den Pfeil-Tasten zwischen den Eingabebereichen gewechselt werden. |
+| `Pfeil-Tasten (oben  | unten)`                                                                                                                                                                                                                                      | Wenn ein Eingabebereich aktiviert ist können mit den Pfeil-Tasten oben und unten die Werte verändert werden.    |
+| `Leer`               | Wenn das Eingabefeld fokussiert ist, kann in manchen Browsern mit der Leertaste ein Auswahldialog aufgerufen bzw. geschlossen werden. Die Navigation und Auswahl erfolgt hier mit Hilfe der Tab-Taste, der Pfeil-Tasten und der Enter-Taste. |
+| `Esc`                | Ist ein Auswahldialog verfügbar, kann dieser alternativ zur Leertaste auch mit der Esc-Taste geschlossen werden.                                                                                                                             |
+
+#### InputNumber -> Type = **_number_**
+
+| Taste               | Funktion                    |
+| ------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`               | Fokussiert das Eingabefeld. |
+| `Pfeil-Tasten (oben | unten)`                     | Erhöht oder verringert den Wert innerhalb der Attribute **`_min`** und **`_max`** entsprechend der im Attribut **`_step`** angegebenen Schrittgröße. |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                                                                                                                                                                                                               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                                                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                                                                                                                                                  | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `true`      |
+| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                                                                                                                                                                                              | `"off" \| "on" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                                                                                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                                                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                                                                                                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                                                                                                                                                                                        | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_list`            | `_list`          | Gibt die Liste der Vorschlagszahlen an.                                                                                                                                                                                                                                   | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_max`             | `_max`           | Gibt den größtmöglichen Zahlenwert an.                                                                                                                                                                                                                                    | ``${number}-${number}-${number}T${number}:${number}:${number}.${number}` \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}.${number}` \| `${number}:${number}:${number}` \| number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_min`             | `_min`           | Gibt den kleinstmöglichen Zahlenwert an.                                                                                                                                                                                                                                  | ``${number}-${number}-${number}T${number}:${number}:${number}.${number}` \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}.${number}` \| `${number}:${number}:${number}` \| number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                                                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                 | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                                                                                                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_readOnly`        | `_read-only`     | Gibt an, ob das Eingabefeld nur lesend ist.                                                                                                                                                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_required`        | `_required`      | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                                                                                                                                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_smartButton`     | --               | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                                                                                                                                                                  | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }` | `undefined` |
+| `_step`            | `_step`          | Gibt die Schrittweite der Wertveränderung an                                                                                                                                                                                                                              | `number \| 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> Das W3C hat die Date-Typen in eine eigene Gruppe zusammengefasst. Verwende hierfür die InputDate-Komponente.<br/><br/>Gibt an, ob es ein DateTime-, Date-, Month-, Week-, Time-, DateTime-Local-, Number-Eingabefeld ist. | `"date" \| "datetime-local" \| "month" \| "number" \| "time" \| "week" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'number'`  |
+| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                                                                                                                                       | ``${number}-${number}-${number}T${number}:${number}:${number}.${number}` \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}.${number}` \| `${number}:${number}:${number}` \| number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-input-date](../input-date)
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-number --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  kol-input-date --> kol-input-number
+  style kol-input-number fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-password.md

@@ -0,0 +1,96 @@
+# InputPassword
+
+Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-password _id="main_passwort" _name="main_passwort">
+	Passwort
+</kol-input-password>
+```
+
+### Beispiel
+
+<kol-input-password _id="main_passwort" _name="main_passwort">
+  Passwort
+</kol-input-password>
+
+## Verwendung
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste | Funktion                    |
+| ----- | --------------------------- |
+| `Tab` | Fokussiert das Eingabefeld. |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                                              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `true`      |
+| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                             | `"off" \| "on" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_maxLength`       | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                    | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_pattern`         | `_pattern`       | Gibt ein Prüfpattern für das Eingabefeld an.                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_readOnly`        | `_read-only`     | Gibt an, ob die Eingabefeld nur lesend ist.                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_required`        | `_required`      | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                         | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_size`            | `_size`          | Gibt an, wie viele Zeichen man eingeben kann.                                                            | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_smartButton`     | --               | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| 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`     |
+| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-password --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-password fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+