@public-ui/components 1.5.2-rc.1 → 1.5.2-rc.3

package/doc/heading.md

@@ -51,9 +51,9 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 
 ## Slots
 
-| Slot                                | Description |
-| ----------------------------------- | ----------- |
-| `"default Inhalt der Überschrift."` |             |
+| Slot        | Description             |
+| ----------- | ----------------------- |
+| `"default"` | Inhalt der Überschrift. |
 
 
 ## Dependencies

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

@@ -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

@@ -7,71 +7,87 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 ### Code
 
 ```html
+<style>
+	/* https://github.com/vineethtrv/css-loader */
+	.loader {
+		width: 48px;
+		height: 48px;
+		border: 3px dotted #444;
+		border-style: solid solid dotted dotted;
+		border-radius: 50%;
+		display: inline-block;
+		position: relative;
+		box-sizing: border-box;
+		animation: rotation 2s linear infinite;
+	}
+	.loader::after {
+		content: '';
+		box-sizing: border-box;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		border: 3px dotted #ff3d00;
+		border-style: solid solid dotted;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		animation: rotationBack 1s linear infinite;
+		transform-origin: center center;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes rotationBack {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(-360deg);
+		}
+	}
+
+	/* 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;
+		}
+		.loader::after {
+			animation-duration: 3s;
+		}
+	}
+</style>
 <div>
 	<kol-spin _show></kol-spin>
 	<!-- for a11y experts - own animation -->
 	<kol-spin _show="true" _variant="none">
 		<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
-		<span class="loader" slot="expert"></span>
+		<span className="loader" slot="expert"></span>
 	</kol-spin>
 </div>
 ```
 
-### Beispiel
+<kol-alert _heading="Reduce Motion" _level="4" _type="warning">Wenn möglich sollte stets auf Animationen verzichtet werden. Wenn Animationen genutzt werden, sollte immer darauf geachtet werden, eine Variante mit reduzierter Animationsgeschwindigkeit anzubieten. Mehr Informationen dazu findet sich hier:
+<kol-link _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
 
-<style>
-  /* https://github.com/vineethtrv/css-loader */
-  .loader {
-    width: 48px;
-    height: 48px;
-    border: 3px dotted #3d3d3d;
-    border-style: solid solid dotted dotted;
-    border-radius: 50%;
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    animation: rotation 4s linear infinite;
-  }
-  .loader::after {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    border: 3px dotted #ff3d00;
-    border-style: solid solid dotted;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    animation: rotationBack 2s linear infinite;
-    transform-origin: center center;
-  }
-
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes rotationBack {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(-360deg);
-    }
-  }
-</style>
+### Beispiel
 
 <kol-spin _show></kol-spin>
-<kol-spin _show="true" _variant="none">
-<span class="loader" slot="expert"></span>
-</kol-spin>
+
+<kol-spin _show="true" _variant="none"><span className="loader" slot="expert"></span></kol-spin>
+
+<kol-details _summary="CSS Loaders & Spinners" _open>
+Es gibt im Internet viele verschiedene CSS Loaders und Spinners. Beispielsweise bietet _Vineeth_ eine ganze Reihe interessanter CSS Loaders an. Diese können auch in der KoliBri Bibliothek genutzt werden. Dazu muss lediglich der Link zu der entsprechenden CSS Datei in den Head der HTML Datei eingebunden werden. Anschließend kann die gewünschte Animation über den Expert-Slot in die KoliBri-Komponente eingebunden werden. Hier sind einige Beispiele (ohne reduzierte Animationsgeschwindigkeit):
+<kol-link _label="https://github.com/vineethtrv/css-loader" _href="https://github.com/vineethtrv/css-loader" _target="_blank"></kol-link>
+</kol-details>
 
 ## Verwendung
 
@@ -98,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