@public-ui/components 1.5.2-rc.2 → 1.5.2

package/doc/indented-text.md

@@ -40,9 +40,9 @@ Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informatione
 
 ## Slots
 
-| Slot                  | Description |
-| --------------------- | ----------- |
-| `"default Der Text."` |             |
+| Slot        | Description |
+| ----------- | ----------- |
+| `"default"` | Der Text.   |
 
 
 ## Dependencies

package/doc/input-checkbox.md

@@ -83,9 +83,9 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Slots
 
-| Slot                                       | Description |
-| ------------------------------------------ | ----------- |
-| `"default Die Beschriftung der Checkbox."` |             |
+| Slot        | Description                    |
+| ----------- | ------------------------------ |
+| `"default"` | Die Beschriftung der Checkbox. |
 
 
 ## Dependencies

package/doc/input-color.md

@@ -69,9 +69,9 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-date.md

@@ -84,9 +84,9 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-email.md

@@ -74,9 +74,9 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-file.md

@@ -65,9 +65,9 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-number.md

@@ -65,9 +65,9 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-password.md

@@ -68,9 +68,9 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/input-radio.md

@@ -104,9 +104,9 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 
 ## Slots
 
-| Slot                                                  | Description |
-| ----------------------------------------------------- | ----------- |
-| `"default Die Legende/Überschrift der Radiobuttons."` |             |
+| Slot        | Description                               |
+| ----------- | ----------------------------------------- |
+| `"default"` | Die Legende/Überschrift der Radiobuttons. |
 
 
 ## Dependencies

package/doc/input-range.md

@@ -62,9 +62,9 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 
 ## Slots
 
-| Slot                                              | Description |
-| ------------------------------------------------- | ----------- |
-| `"default	Die Beschriftung des Eingabeelements."` |             |
+| Slot        | Description                           |
+| ----------- | ------------------------------------- |
+| `"default"` | Die Beschriftung des Eingabeelements. |
 
 
 ## Dependencies

package/doc/input-text.md

@@ -16,6 +16,13 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 >
 <kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
 <kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
+<kol-input-text
+	_type="text"
+	_id="loeschbar"
+	_name="loeschbar"
+	_smartButton="{ _icon: 'codicon codicon-chrome-close', _iconOnly: true, _label: 'Löschen', _on: { onClick: clearInput } }"
+	>Löschbar</kol-input-text
+>
 ```
 
 ### Beispiel
@@ -23,6 +30,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 <kol-input-text _type="text" _id="mein_text" _name="mein_text" _icon="{ left: 'codicon codicon-arrow-left', right: { icon: 'codicon codicon-arrow-right', style: { 'font-size': '200%', }, }, }">Texteingabe</kol-input-text>
 <kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
 <kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
+<kol-input-text _type="text" _id="loeschbar" _name="loeschbar">Löschbar</kol-input-text>
 
 ## Verwendung
 
@@ -78,9 +86,9 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/modal.md

@@ -102,9 +102,9 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ## Slots
 
-| Slot                               | Description |
-| ---------------------------------- | ----------- |
-| `"default Der Inhalt des Modals."` |             |
+| Slot        | Description            |
+| ----------- | ---------------------- |
+| `"default"` | Der Inhalt des Modals. |
 
 
 ----------------------------------------------

package/doc/popover.md

@@ -18,9 +18,9 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 
 ## Slots
 
-| Slot                                | Description |
-| ----------------------------------- | ----------- |
-| `"default Der Inhalt des Popover."` |             |
+| Slot        | Description             |
+| ----------- | ----------------------- |
+| `"default"` | Der Inhalt des Popover. |
 
 
 ----------------------------------------------

package/doc/progress.md

@@ -8,15 +8,15 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ```html
 <div>
-	<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
-	<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
 </div>
 ```
 
 ### Beispiel
 
-<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
-<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
 
 ## Verwendung
 
@@ -45,13 +45,14 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Properties
 
-| Property              | Attribute | Description                                                          | Type                            | Default     |
-| --------------------- | --------- | -------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `_label`              | `_label`  | Setzt die Bezeichnung der Fortschrittsanzeige.                       | `string` \| `undefined`           | `undefined` |
-| `_max` _(required)_   | `_max`    | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number`                        | `undefined` |
-| `_type`               | `_type`   | Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.      | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
-| `_unit`               | `_unit`   | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)      | `string` \| `undefined`           | `'%'`       |
-| `_value` _(required)_ | `_value`  | Gibt an, wie weit die Anzeige fortgeschritten ist.                   | `number`                        | `undefined` |
+| Property              | Attribute  | Description                                                                                                                                                  | Type                            | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ----------- |
+| `_label`              | `_label`   | Setzt die Bezeichnung der Fortschrittsanzeige.                                                                                                               | `string` \| `undefined`           | `undefined` |
+| `_max` _(required)_   | `_max`     | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.                                                                                         | `number`                        | `undefined` |
+| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
+| `_unit`               | `_unit`    | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)                                                                                              | `string` \| `undefined`           | `'%'`       |
+| `_value` _(required)_ | `_value`   | Gibt an, wie weit die Anzeige fortgeschritten ist.                                                                                                           | `number`                        | `undefined` |
+| `_variant`            | `_variant` | Gibt an, ob die Fortschrittsanzeige als Balken oder Kreis dargestellt wird.                                                                                  | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
 
 
 ----------------------------------------------

package/doc/select.md

@@ -114,9 +114,9 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/spin.md

@@ -58,10 +58,10 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
 	@media (prefers-reduced-motion) {
 		.loader {
-      animation-duration: 6s;
+			animation-duration: 6s;
 		}
 		.loader::after {
-      animation-duration: 3s;
+			animation-duration: 3s;
 		}
 	}
 </style>
@@ -114,10 +114,10 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                  | Type                               | Default     |
-| ---------- | ---------- | ---------------------------------------------------------------------------- | ---------------------------------- | ----------- |
-| `_show`    | `_show`    | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.                    | `boolean` \| `undefined`             | `false`     |
-| `_variant` | `_variant` | Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll. | `"default"` \| `"none"` \| `undefined` | `'default'` |
+| Property   | Attribute  | Description                                                                  | Type                                      | Default |
+| ---------- | ---------- | ---------------------------------------------------------------------------- | ----------------------------------------- | ------- |
+| `_show`    | `_show`    | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.                    | `boolean` \| `undefined`                    | `false` |
+| `_variant` | `_variant` | Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll. | `"cycle"` \| `"dot"` \| `"none"` \| `undefined` | `'dot'` |
 
 
 ----------------------------------------------

package/doc/split-button.md

@@ -60,7 +60,7 @@
 
 | Slot        | Description                                                |
 | ----------- | ---------------------------------------------------------- |
-| `"popover"` | Ermöglicht das Einfügen beliebigen HTML's in das dropdown. |
+| `"default"` | Ermöglicht das Einfügen beliebigen HTML's in das dropdown. |
 
 
 ## Dependencies

package/doc/textarea.md

@@ -79,9 +79,9 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 
 ## Slots
 
-| Slot                                            | Description |
-| ----------------------------------------------- | ----------- |
-| `"default Die Beschriftung des Eingabefeldes."` |             |
+| Slot        | Description                         |
+| ----------- | ----------------------------------- |
+| `"default"` | Die Beschriftung des Eingabefeldes. |
 
 
 ## Dependencies

package/doc/toast.md

@@ -75,9 +75,9 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 
 ## Slots
 
-| Slot                                | Description |
-| ----------------------------------- | ----------- |
-| `"default Der Inhalt der Meldung."` |             |
+| Slot        | Description             |
+| ----------- | ----------------------- |
+| `"default"` | Der Inhalt der Meldung. |
 
 
 ## Dependencies