npm - @public-ui/components - Versions diffs - 2.2.11-rc.1 → 3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0 - Mend

@public-ui/components 2.2.11-rc.1 → 3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1222) hide show

package/doc/input-text.md CHANGED Viewed

@@ -1,134 +1,42 @@
-# InputText
-Synonyme: Text Field
-Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.
-Die Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden.
-## Konstruktion
-### Code
-```html
-<kol-input-text
-	_type="text"
-	_label="Texteingabe"
-	_icons='{"left": "codicon codicon-arrow-left", "right": {"icon": "codicon codicon-arrow-right", "style": {"font-size": "200%"}}}'
-></kol-input-text>
-<kol-input-text _type="text" _label="Deaktiviert" _disabled></kol-input-text>
-<kol-input-text _type="text" _label="Schreibgeschützt" _read-only></kol-input-text>
-<kol-input-text
-	_type="text"
-	_label="Mit Button"
-	_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'
-></kol-input-text>
-```
-### Beispiel
-<kol-input-text _type="text" _label="Texteingabe" _icons='{"left": "codicon codicon-arrow-left", "right": {"icon": "codicon codicon-arrow-right", "style": {"font-size": "200%"}}}'></kol-input-text>
-<kol-input-text _type="text" _label="Deaktiviert" _disabled></kol-input-text>
-<kol-input-text _type="text" _label="Schreibgeschützt" _read-only></kol-input-text>
-<kol-input-text
-	_type="text"
-	_label="Mit Button"
-	_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'></kol-input-text>
-### Events
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-## Verwendung
-### Best practices
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-## Barrierefreiheit
-### Tastatursteuerung
-| Taste | Funktion                              |
-| ----- | ------------------------------------- |
-| `Tab` | Fokussiert das Eingabefeld.           |
-| `ESC` | Löscht den Inhalt (nur Typ = Search). |
-## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
-- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
+# kol-input-text
 <!-- Auto Generated Below -->
 ## Properties
-| Property              | Attribute        | Description                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_alert`              | `_alert`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use automatic behaviour instead.<br/><br/>Defines whether the screen-readers should read out the notification. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                                                      | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_error`              | `_error`         | <span style="color:red">**[DEPRECATED]**</span> Will be removed in v3. Use `msg` instead.<br/><br/>Defines the error message text.                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_hasCounter`         | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_hideError`          | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `''`        |
-| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                       | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_maxLength`          | `_max-length`    | Defines the maximum number of input characters.                                                                                                                                       | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                     | `string` \| `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "error"` \| `"default"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                         | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                             | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_pattern`            | `_pattern`       | Defines a validation pattern for the input field.                                                                                                                                     | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                                           | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                                                | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _role?: "button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined; _ariaControls?: string` \| `undefined; _ariaDescription?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: "button"` \| `"reset"` \| `"submit"` \| `undefined; _variant?: "primary"` \| `"secondary"` \| `"normal"` \| `"tertiary"` \| `"danger"` \| `"ghost"` \| `"custom"` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _shortKey?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
-| `_spellCheck`         | `_spell-check`   | Defines whether the browser should check the spelling and grammar.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                                                 | `W3CInputValue[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                      | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                             | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'top'`     |
-| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
-| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                                    | `"search"` \| `"tel"` \| `"text"` \| `"url"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'text'`    |
-| `_value`              | `_value`         | Defines the value of the input.                                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                             | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_hasCounter`         | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                  | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `''`        |
+| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_maxLength`          | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string` \| `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_pattern`            | `_pattern`       | Defines a validation pattern for the input field.                                                                                                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string` \| `undefined` \| `{ _label: string; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _ariaExpanded?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _role?: "button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined; _ariaControls?: string` \| `undefined; _ariaDescription?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: "button"` \| `"reset"` \| `"submit"` \| `undefined; _variant?: "primary"` \| `"secondary"` \| `"normal"` \| `"tertiary"` \| `"danger"` \| `"ghost"` \| `"custom"` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icons?: IconsPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _shortKey?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| `_spellCheck`         | `_spell-check`   | Defines whether the browser should check the spelling and grammar.                                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
+| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'top'`     |
+| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`     |
+| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                           | `"search"` \| `"tel"` \| `"text"` \| `"url"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'text'`    |
+| `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
 ## Methods
-### `focus() => Promise<void>`
-<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-#### Returns
-Type: `Promise<void>`
 ### `getValue() => Promise<string | undefined>`

package/doc/kolibri.md CHANGED Viewed

@@ -1,21 +1,4 @@
-# Logo
-Diese Komponente implementiert das Logo von KoliBri.
-## Konstruktion
-### Code
-```html
-<kol-kolibri></kol-kolibri> <kol-kolibri _labeled="false"></kol-kolibri>
-```
-## Beispiele
-<kol-kolibri></kol-kolibri>
-<kol-kolibri _labeled="false"></kol-kolibri>
-## Barrierefreiheit
+# kol-kolibri
 <!-- Auto Generated Below -->

package/doc/link-button.md CHANGED Viewed

@@ -1,29 +1,4 @@
-# LinkButton
-Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
-Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
-## Konstruktion
-### Code
-```html
-<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="danger"></kol-link-button>
-<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
-```
-### Beispiel
-<div class="flex gap-2">
-  <kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-  <kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-  <kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-  <kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
-  <kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
-</div>
+# kol-link-button
 <!-- Auto Generated Below -->
@@ -45,7 +20,6 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 | `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined` |
 | `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                                             | `undefined` |
 | `_shortKey`          | `_short-key`          | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                                | `undefined` |
-| `_tabIndex`          | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                | `undefined` |
 | `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
 | `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`   |
 | `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
@@ -53,16 +27,6 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 ## Methods
-### `focus() => Promise<void>`
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-#### Returns
-Type: `Promise<void>`
 ### `kolFocus() => Promise<void>`

package/doc/link.md CHANGED Viewed

@@ -1,74 +1,4 @@
-# Link
-Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.
-## Konstruktion
-### Code
-```html
-<p>
-	In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-	<kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
-	<i>
-		<b>inline-Element</b>
-	</i>
-	ausgegeben.
-</p>
-```
-### Beispiel
-<p>
-   In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-  <kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
-    <b>inline-Element</b>
-    </i> ausgegeben.
-</p>
-## Verwendung
-### Link innerhalb eines Fließtextes mit Icon und Text
-<p>
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link><br/>
-  <kol-link _icons="codicon codicon-home">
-    Ich bin ein Link mit Icon rechts
-  </kol-link>
-  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
-  nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link>. Lorem, ipsum dolor sit amet consectetur adipisicing
-  elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon rechts</kol-link>
-  facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-</p>
-## `aria-current` Service
-Damit die Link-Komponente automatisch ein [`aria-current`-Tag](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-setzen kann, muss ihr über den ariaCurrent-Service mitgeteilt werden, welche Seite gerade aktiv ist:
-```typescript
-import { setCurrentLocation } from '@public-ui/components';
-/* Bei jedem Seitenwechsel aufrufen: */
-setCurrentLocation('/path/to/page');
-```
-Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links entsprechen.
-<!--### Best practices
-### Anwendungsfälle-->
-## Barrierefreiheit
-### Tastatursteuerung
-| Taste   | Funktion                        |
-| ------- | ------------------------------- |
-| `Tab`   | Fokussiert das Link-Element.    |
-| `Enter` | Ruft den hinterlegten Link auf. |
+# kol-link
 <!-- Auto Generated Below -->
@@ -89,23 +19,12 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 | `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined` |
 | `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                               | `undefined` |
 | `_shortKey`          | `_short-key`          | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                  | `undefined` |
-| `_tabIndex`          | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                  | `undefined` |
 | `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                  | `undefined` |
 | `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`   |
 ## Methods
-### `focus() => Promise<void>`
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-#### Returns
-Type: `Promise<void>`
 ### `kolFocus() => Promise<void>`

package/doc/modal.md CHANGED Viewed

@@ -1,94 +1,4 @@
-# Modal
-Synonyme: Dialog, Prompt
-Mithilfe der **Modal**-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem Dialogfenster angezeigt werden. Ein offenes **Modal** kann via **ESC** geschlossen werden.
-Die **Modal**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt. Dabei wird der Hintergrund des Fensters deaktiviert und allein der Inhalt des Modal-Fensters ist aktiv.
-### Funktionsweise
-Das **Modal** realisiert die Basis für barrierefreie Overlays und ermöglicht es beliebige HTML-Inhalte anzuzeigen. Beispielsweise wäre eine Dialog-Komponente eine Komposition aus einer Card-Komponente, die in einer **Modal**-Komponente eingefügt wird.
-Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
-### Konstruktion
-#### Code
-```html
-<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
-	<kol-card _label="Vorgang löschen">
-		<div>
-			<p>Wollen Sie den Vorgang wirklich löschen?</p>
-			<kol-button class="close-modal" _label="Ok" _variant="primary"></kol-button>
-			<kol-button class="close-modal" _label="Abbrechen"></kol-button>
-		</div>
-	</kol-card>
-</kol-modal>
-<kol-button id="modal-open-button" _label="Modal öffnen"></kol-button>
-<script>
-	const modal = document.querySelector('#test-modal');
-	const modalOpenButton = document.querySelector('#modal-open-button');
-	document.querySelectorAll('.close-modal').forEach((buttonElement) => {
-		buttonElement._on = {
-			onClick: () => modal.closeModal(),
-		};
-	});
-	modalOpenButton._on = { onClick: () => modal.openModal() };
-</script>
-```
-### Verwendung
-Über das Attribut **`_width`** geben Sie die gewünschte Breite der Modalbox an. Sie wird in der gewählten Größe immer mittig auf dem Bildschirm angezeigt.
-Da das Modal vom eigentlichen Seiteninhalt entkoppelt ist, aber für eine teilweise Sperrung der Inhalte sorgt, muss es auch eine Möglichkeit bieten, das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen.
-<kol-alert _type="info">Es wird empfohlen einen Close-Button oben rechts einzubauen.</kol-alert>
-Zum Öffnen des Modals können Sie mithilfe einer DOM-Referenz die Methode `openModal` verwenden, zum Schließen `closeModal`.
-### Legacy Verwendung
-Aus Kompatibilitätsgründen ist es weiterhin möglich, des Modal über die Eigenschaft `_activeElement` zu steuern. Ist die Eigenschaft (auf eine beliebige DOM-Node) gesetzt, wird das Modal gezeigt. Beim Entfernen wird das Modal entsprechend wieder ausgeblendet. Die Eigenschaft wird mit KoliBri Version 3 entfernt werden.
-#### Best practices
-- Verwenden Sie die Modalbox, um weiterführende Informationen zu einem Thema anzuzeigen.
-- Verwenden Sie die Modalbox, um umfangreiche Inhalte optisch kompakter zu gestalten.
-- Vermeiden Sie es, wichtige Informationen wie z.B. rechtliche Themen, auf die Nutzer:innen reagieren müssen, in Modalboxen zu platzieren.
-#### Anwendungsfälle
-- Nutzen Sie die Modalbox, als Erklärungshilfe zu einzelnen Eingabefeldern in Formularen.
-- Nutzen Sie die Modalbox, um ergänzende Informationen erst nach Anforderung durch die Nutzer:innen anzuzeigen.
-- Nutzen Sie die Modalbox, um ein Feedback zu Speichervorgängen oder ähnliches anzuzeigen, z.B. **_Vielen Dank für Ihre Rückmeldung_** nach Absenden eines Formulars.
-### Barrierefreiheit
-> Die optische Standardausgabe der Komponente ist auf die Umsetzung der Barrierefreiheit hin optimiert. Wenn Sie eigene Custom Styles verwenden, kann das zu einer Einschränkung der Barrierefreiheit führen.
-Das **Modal** ist so realisiert, dass der Fokus darauf liegt, wenn es geöffnet wird. Elemente außerhalb des Modals sind dann nicht mehr fokussierbar.
-Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern darauf, das Attribut **`aria-label`** korrekt zu setzen.
-Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektierbaren Elemente deaktiviert außer die innerhalb des eigenen Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert, die sich im Browser-Seitenbereich befinden. Das Fokussieren des Browser-Menüs ist weiterhin möglich.
-#### Tastatursteuerung
-| Taste | Funktion                                                                                    |
-| ----- | ------------------------------------------------------------------------------------------- |
-| `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
-| `ESC` | Schließt das Modal.                                                                         |
-### Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
+# kol-modal
 <!-- Auto Generated Below -->
@@ -99,12 +9,12 @@ https://en.wikipedia.org/wiki/Modal_window
 ## Properties
-| Property              | Attribute | Description                                                                                                                                                                  | Type                                                      | Default     |
-| --------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- |
-| `_activeElement`      | --        | <span class="text-red-500">**[DEPRECATED]**</span> Use methode `openModal` and `closeModal` instead.<br/><br/>Legacy property - while set to an HTMLElement, the modal is open. | `HTMLElement` \| `null` \| `undefined`                        | `undefined` |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                           | `string`                                                  | `undefined` |
-| `_on`                 | --        | Defines the modal callback functions.                                                                                                                                        | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
-| `_width`              | `_width`  | Defines the width of the modal. (max-width: 100%)                                                                                                                            | `string` \| `undefined`                                     | `'100%'`    |
+| Property              | Attribute  | Description                                                                                                        | Type                                                      | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
+| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined` \| `({ onClose?: (() => void)` \| `undefined; })` | `undefined` |
+| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `"blank"` \| `"card"` \| `undefined`                          | `'blank'`   |
+| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string` \| `undefined`                                     | `'100%'`    |
 ## Methods