@public-ui/components 1.6.0-rc.7 → 1.6.0-rc.8

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 (18) hide show
  1. package/custom-elements.json +3 -3
  2. package/dist/cjs/kol-progress.cjs.entry.js.map +1 -1
  3. package/dist/cjs/kolibri.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/components/kol-progress.js +1 -1
  6. package/dist/components/kol-progress.js.map +1 -1
  7. package/dist/esm/kol-progress.entry.js.map +1 -1
  8. package/dist/esm/kolibri.js +1 -1
  9. package/dist/esm/loader.js +1 -1
  10. package/dist/kolibri/kol-progress.entry.js.map +1 -1
  11. package/dist/kolibri/kolibri.esm.js +1 -1
  12. package/dist/types/components/progress/component.d.ts +5 -5
  13. package/dist/types/components.d.ts +8 -6
  14. package/doc/modal.md +11 -11
  15. package/doc/progress.md +8 -8
  16. package/jest-test-results.json +1 -1
  17. package/package.json +1 -1
  18. package/vscode-custom-data.json +30 -2
package/doc/modal.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt ([caniuse](https://caniuse.com/?search=dialog)), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
4
4
 
5
- ## Verwendung von <dialog>
5
+ ## Verwendung von `<dialog>`
6
6
 
7
7
  Die Dokumentation des `<dialog>` finden Sie [hier(MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
8
8
  Das **Dialog**-Element kann wie jedes andere HTML-Tag verwendet werden, alle Elemente innerhalb werden wie gewohnt dargestellt.
@@ -13,20 +13,20 @@ Der Dialog ist standardmäßig nicht sichtbar, über das Setzen des Attributs `o
13
13
  - Die Modalvariante hat einen Hintergrund, der eine sanfte Abdunklung verursacht (unser Tipp: die Opacity der Hintergrundfarbe erhöhen), der über `::backdrop` gestylt werden kann und Klickevents auf den Dialog weiterleitet.
14
14
  - Die Modalvariante ist in der Bildschirmmitte zentriert (via `margin: auto`, kann von CSS Resets überschrieben werden)
15
15
 
16
- # Modal
16
+ ## Modal
17
17
 
18
18
  Mit Hilfe der **Modal**-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem Dialogfenster angezeigt werden. Ein offenes **Modal** kann via **ESC** geschlossen werden.
19
19
  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.
20
20
 
21
- ## Funktionsweise
21
+ ### Funktionsweise
22
22
 
23
23
  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.
24
24
 
25
25
  Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
26
26
 
27
- ## Konstruktion
27
+ ### Konstruktion
28
28
 
29
- ### Code
29
+ #### Code
30
30
 
31
31
  ```html
32
32
  <kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
@@ -54,7 +54,7 @@ Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der
54
54
  </script>
55
55
  ```
56
56
 
57
- ## Verwendung
57
+ ### Verwendung
58
58
 
59
59
  Ü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.
60
60
 
@@ -64,19 +64,19 @@ Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sp
64
64
 
65
65
  Das **Modal** hat einen `z-index` von `100`.
66
66
 
67
- ### Best practices
67
+ #### Best practices
68
68
 
69
69
  - Verwenden Sie die Modalbox, um weiterführende Informationen zu einem Thema anzuzeigen.
70
70
  - Verwenden Sie die Modalbox, um umfangreiche Inhalte optisch kompakter zu gestalten.
71
71
  - Vermeiden Sie es, wichtige Informationen wie z.B. rechtliche Themen, auf die Nutzer:innen reagieren müssen, in Modalboxen zu platzieren.
72
72
 
73
- ### Anwendungsfälle
73
+ #### Anwendungsfälle
74
74
 
75
75
  - Nutzen Sie die Modalbox, als Erklärungshilfe zu einzelnen Eingabefeldern in Formularen.
76
76
  - Nutzen Sie die Modalbox, um ergänzende Informationen erst nach Anforderung durch die Nutzer:innen anzuzeigen.
77
77
  - 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.
78
78
 
79
- ## Barrierefreiheit
79
+ ### Barrierefreiheit
80
80
 
81
81
  > 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.
82
82
 
@@ -90,14 +90,14 @@ Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern
90
90
 
91
91
  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 den Browser-Menü's ist weiterhin möglich.
92
92
 
93
- ### Tastatursteuerung
93
+ #### Tastatursteuerung
94
94
 
95
95
  | Taste | Funktion |
96
96
  | ----- | ------------------------------------------------------------------------------------------- |
97
97
  | `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
98
98
  | `ESC` | Schließt das Modal. |
99
99
 
100
- ## Links und Referenzen
100
+ ### Links und Referenzen
101
101
 
102
102
  - https://www.w3.org/TR/wai-aria-practices/#dialog_modal
103
103
  - https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
package/doc/progress.md CHANGED
@@ -45,14 +45,14 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
45
45
 
46
46
  ## Properties
47
47
 
48
- | Property | Attribute | Description | Type | Default |
49
- | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
50
- | `_label` | `_label` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined` | `undefined` |
51
- | `_max` _(required)_ | `_max` | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number` | `undefined` |
52
- | `_type` | `_type` | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `any` | `undefined` |
53
- | `_unit` | `_unit` | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt) | `string` \| `undefined` | `'%'` |
54
- | `_value` _(required)_ | `_value` | Gibt an, wie weit die Anzeige fortgeschritten ist. | `number` | `undefined` |
55
- | `_variant` | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll. | `any` | `undefined` |
48
+ | Property | Attribute | Description | Type | Default |
49
+ | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | ----------- |
50
+ | `_label` | `_label` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined` | `undefined` |
51
+ | `_max` _(required)_ | `_max` | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number` | `undefined` |
52
+ | `_type` | `_type` | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
53
+ | `_unit` | `_unit` | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt) | `string` \| `undefined` | `'%'` |
54
+ | `_value` _(required)_ | `_value` | Gibt an, wie weit die Anzeige fortgeschritten ist. | `number` | `undefined` |
55
+ | `_variant` | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
56
56
 
57
57
 
58
58
  ----------------------------------------------