@public-ui/components 2.2.0 → 3.0.0-alpha.0

package/doc/toaster.md

@@ -1,74 +1,4 @@
-# Toaster
-
-Synonyme: Notification, Snackbar
-
-Mit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster
-angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.
-
-## Konstruktion
-
-Die Toast-Komponenten werden nicht direkt verwendet, sondern immer über den ToasterService konstruiert.
-
-### Code
-
-```js
-import { ToasterService } from '@public-ui/components';
-
-// Get the toaster instance for the current HTML document.
-const toaster = ToasterService.getInstance(document, {
-	defaultAlertType: 'msg', // Standard: 'card'
-});
-
-// Enqueue a new toast to the toaster to display:
-toaster.enqueue({
-	label: 'This is the title',
-	description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
-	type: 'info',
-	variant: 'msg', // Standard: 'card'
-});
-```
-
-### Weitere Service-Methoden
-
-- `closeAll`: Schließt alle Toasts
-- `dispose`: Entfernt den Toast Container. Die Toaster-Instanz kann nicht weiter genutzt werden.
-
-## Verwendung
-
-### Überschrift
-
-Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen.
-
-### Inhalt
-
-Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen.
-
-Alternativ zur statischen Description können Sie über das Attribut **`_render`** eine eigene Render-Funktion definieren. Diese wird mit einer Referenz zum
-HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeben, das eine `close`-Funktion zum Schließen des Toasts bereitstellt.
-
-```ts
-const closeToast = toaster.enqueue({
-	render: (element: HTMLElement, { close }) => {
-		element.textContent = 'Mein Inhalt';
-		const customCloseButton = document.createElement('button');
-		customCloseButton.textContent = 'Toast schließen';
-		element.appendChild(customCloseButton);
-		customCloseButton.addEventListener('click', close, { once: true });
-	},
-});
-
-/* Optional: Toast wieder schließen mit `closeToast()` */
-```
-
-### Anzeigetyp des Toast
-
-Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind:
-
-- `default`
-- `error`
-- `info`
-- `success`
-- `warning`
+# kol-toast-container
 
 <!-- Auto Generated Below -->
 

package/doc/toolbar.md

@@ -1,49 +1,4 @@
-# Toolbar `preview`
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.
-
-```html
-<kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar>
-```
-
-### Beispiel
-
-<kol-toolbar
-	_label="Label"
-	_items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]">
-</kol-toolbar>
-
-## Verwendung
-
-Verwenden Sie die **Toolbar**-Komponente wenn die Navigation von verschiedenen Buttons und Links ermöglicht werden soll, z.B. um den Inhalt einer Textarea zu formatieren.
-Mit Hilfe des Attributs **`_label`** kann das **`aria-label`** gesetzt werden.
-Über das Attribut **`_items`** werden die einzelnen Funktionen in der Toolbar gesetzt.
-Der **`tabIndex`** wird von der **Toolbar**-Komponente gesteuert. Default ist hierbei immer das erste aktive Elemente in der **Toolbar**.
-
-### Unterstützte **Toolbar**-Komponenten
-
-- Link
-- Button
-
-Die **Toolbar**-Komponente erkennt hierbei selbständig durch das **`_href`**-Attribut, ob es sich um eine **Link**- oder **Button**-Komponente handelt.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                       |
-| -------------- | -------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Erster Tab fokussiert die Toolbar. Zweiter das erste aktive Element und dritter setzt den Standard wieder her. |
-| `Pfeil-Tasten` | Können für die Navigation der Element in der fokussierten Toolbar verwendet werden.                            |
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" _target="_blank"></kol-link>
+# kol-toolbar
 
 <!-- Auto Generated Below -->
 

package/doc/tree-item.md

@@ -1,6 +1,4 @@
-# Tree-Item
-
-Weitere Informationen zum Tree finden Sie auf der <kol-link _href="/docs/components/tree" _label="Seite der Tree-Komponente"></kol-link>.
+# kol-tree-item-wc
 
 <!-- Auto Generated Below -->
 

package/doc/tree.md

@@ -1,73 +1,4 @@
-# Tree
-
-Synonyme: List, Navigation
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.
-
-### Code
-
-```html
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-	<kol-tree-item _label="Page 1" _href="#" _open>
-		<kol-tree-item _label="Subpage 1" _href="#" _open>
-			<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-		</kol-tree-item>
-		<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-	</kol-tree-item>
-	<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-```
-
-### Beispiel
-
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-  <kol-tree-item _label="Page 1" _href="#" _open>
-    <kol-tree-item _label="Subpage 1" _href="#" _open>
-      <kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-    </kol-tree-item>
-    <kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-  </kol-tree-item>
-  <kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-
-## Verwendung
-
-Eine **Tree**-Komponente wird verwendet, um komplexe, hierarchische Datenstrukturen visuell darzustellen und zu navigieren. Sie ermöglicht es Benutzern, sich effizient durch verschachtelte Informationen zu bewegen und bietet eine klare Übersicht über die Beziehungen zwischen den verschiedenen Elementen. Solche Komponenten sind nützlich in Anwendungen wie Navigatoren, Organisationsdiagrammen, Produktkatalogen und überall dort, wo eine strukturierte Darstellung von Daten erforderlich ist.
-Das **`_label`**-Attribut wird für den Text und das **`_href`**-Attribut für den Link des Navigationspunkts genutzt. Zusätzlich lässt sich das aktive Element über das Attribut **`_active`** steuern, sowie im Standardzustand über das **`_open`** Attribut öffnen.
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                                                                                                                                                                                                                                                                         |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Der Tree lässt sich zudem mittels Tabulator-Taste fokussieren.                                                                                                                                                                                                                                                                                                   |
-| `Pfeil-Tasten` | Die Pfeiltasten können für die Navigation der Elemente im Tree verwendet werden, um das Untermenü zu öffnen oder zu schließen sowie zwischen den Navigationspunkten zu springen. Dabei wird die linke/rechte Pfeiltaste für das Öffnen oder Schließen des Untermenüs und die oben/unten Pfeiltaste für das Wechseln zwischen den Navigationselementen verwendet. |
-| `Enter`        | Selektiert das derzeitig fokussierte Element und navigiert, falls das **`_href`**-Attribut gesetzt wurde.                                                                                                                                                                                                                                                        |
-| `Home`         | Fokussiert das erste Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                             |
-| `End`          | Fokussiert das letzte Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                            |
-| `*`            | Öffnet, alle Geschwister-Elemente der derzeitig fokussierten Ebene                                                                                                                                                                                                                                                                                               |
-
-Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tasten gesucht und fokussiert werden. In dem oben gennanten Beispiel, würde durch die Taste `S` das Element mit dem **`_label`** `Subpage 1` fokussiert werden und bei wiederholten Drücken der selben Taste die `Subpage 2`, etc.
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" _target="_blank"></kol-link>
+# kol-tree
 
 <!-- Auto Generated Below -->
 

package/doc/version.md

@@ -1,26 +1,4 @@
-# Version
-
-Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-version _label="1.44.0"></kol-version>
-</div>
-```
-
-### Beispiel
-
-<kol-version _label="1.44.0"></kol-version>
-
-## Verwendung
-
-Für die Konfiguration steht das Attribut **`_label`** zur Verfügung und nimmt einen beliebigen Text auf, dem in der Komponente ein `v` vorgestellt wird.
-
-Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
+# kol-version
 
 <!-- Auto Generated Below -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.2.0",
+  "version": "3.0.0-alpha.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -51,7 +51,7 @@
     "wcag"
   ],
   "peerDependencies": {
-    "adopted-style-sheets": "1.1.6-rc.6"
+    "adopted-style-sheets": "1.1.6"
   },
   "files": [
     "assets",