@public-ui/components 1.5.0-rc.17 → 1.5.0-rc.19

package/cheat-sheet.html

@@ -9,9 +9,9 @@
 		<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
 		<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet" />
 		<script type="module">
-			import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.17';
-			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.17/dist/loader';
-			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.17';
+			import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.19';
+			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.19/dist/loader';
+			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.19';
 				register(ITZBund, defineCustomElements)
 						.then(() => {})
 						.catch(console.warn);
@@ -60,12 +60,12 @@
 			<kol-link _href="https://public-ui.github.io" _target="github">
 				<kol-kolibri _labeled="false"></kol-kolibri>
 			</kol-link>
-			<kol-heading>Cheat Sheet</kol-heading>
+			<kol-heading _label="">Cheat Sheet</kol-heading>
 			<p><strong><kol-abbr _title="Komponenten-Bibliothek für die Barrierefreiheit" _tooltip-align="right">KoliBri</kol-abbr></strong> ist eine <strong>barrierefreie Komponenten-Bibliothek</strong> die sich durch separate Themes an unterschiedliche <strong>Styleguides</strong> und <strong>Design Systeme</strong> anpassen lässt.</p>
 			<p><kol-icon _aria-label="" _icon="fa-solid fa-arrow-right"></kol-icon> Link zur ausführliche <kol-link _href="https://public-ui.github.io" _target="github">Dokumentation</kol-link></p>
-			<kol-heading _level="2">Integration</kol-heading>
+			<kol-heading _label="" _level="2">Integration</kol-heading>
 			<p>Für eine hohe Flexibilität werden alle Teile (HTML, CSS, Fonts usw.) per Komposition-Prinzip beliebig mit einander kombiniert. Damit alles korrekt funktioniert, müssen alle Teile einer spezifischen Komposition eingebunden bzw. konfiguriert werden. In den folgenden Unterabschnitten wird die Integration am Beispiel des ITZBund-Themes gezeigt.</p>
-			<kol-heading _level="3">Assets</kol-heading>
+			<kol-heading _label="" _level="3">Assets</kol-heading>
 			<p><strong>Fonts</strong> und <strong>Icon-Fonts</strong> müssen im <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;">&#60;head&#62;</code> der HTML-Seite eingebunden werden.</p>
 			<pre>
 				<code class="language-html">&#60;head&#62;
@@ -73,35 +73,35 @@
 	&#60;link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet"&#62;
 &#60;/head&#62;</code>
 			</pre>
-			<kol-heading _level="3">Loader</kol-heading>
+			<kol-heading _label="" _level="3">Loader</kol-heading>
 			<p>Mit <strong>KoliBri</strong> ist es möglich unterschiedliche Themes mit den Komponenten zu kombinieren. Die Verknüpfung erfolgt über die <strong>Register</strong>-Methode. Ihr können eine oder mehrere Loader für die Custom-Elements und Themes übergeben werden.</p>
 			<pre>
 				<code class="language-html">&#60;head&#62;
 	&#60;script type="module"&#62;
-		import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.17';
-		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.17/dist/loader';
-		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.17';
+		import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.19';
+		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.19/dist/loader';
+		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.19';
 		register([ITZBund], [defineCustomElements])
 			.then(() =&#62; {})
 			.catch(console.warn);
 	&#60;/script&#62;
 &#60;/head&#62;</code>
 			</pre>
-			<kol-heading _level="3">Config</kol-heading>
+			<kol-heading _label="" _level="3">Config</kol-heading>
 			<p>Wenn ein Theme registriert wird, werden alle darin enthaltenen <strong>CSS-Properties</strong> unter dem Theme-Namen als CSS-Klasse im <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;">&#60;head&#62;</code> der HTML-Seite hinzugefügt. So wird es ermöglicht, dass diese CSS-Properties in eigenem CSS für das "umrahmende" HTML wiederverwendet werden können. Damit das funktioniert, muss die CSS-Klasse mit dem Theme-Namen z.B. am <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;">&#60;body&#62;</code> gesetzt werden.</p>
 			<pre>
 				<code class="language-html">&#60;body class="itzbund" data-theme="itzbund"&#62;
 	...
 &#60;/body&#62;</code>
 		</pre>
-		<kol-heading _level="3">VSCode</kol-heading>
+		<kol-heading _label="" _level="3">VSCode</kol-heading>
 		<p>Im VSCode können die Meta-Informationen der Komponenten und deren Eigenschaften für die Autovervollständigung von HTML aktiviert werden.</p>
 		<pre>
 			<code class="language-json">{
 	"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"]
 }</code>
 		</pre>
-		<kol-heading _level="3">Dev-Tools</kol-heading>
+		<kol-heading _label="" _level="3">Dev-Tools</kol-heading>
 		<p>KoliBri hat zahlreiche Hinweise für die Barrierefreiheit und Verwendung der Komponenten für die Entwicklung eingebaut. Damit die Hinweise in der Konsole des Browsers angezeigt werden, muss folgende Definition im <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;">&#60;head&#62;</code> der HTML-Seite hinzugefügt werden.</p>
 		<pre>
 			<code class="language-html">&#60;head&#62;
@@ -125,13 +125,13 @@
 			</pre>
 		</kol-details>
 		<br>
-		<kol-heading _level="2">Usage</kol-heading>
+		<kol-heading _label="" _level="2">Usage</kol-heading>
 		<p>KoliBri-Komponenten sind wie eigenen HTML-Tags und werden einfach als solche im "umrahmenden" HTML (Responsiveness, Grid usw.) wiederverwendet und deren Ausprägung mittels der Komponenten-Eigenschaften bestimmt.</p>
 		<pre>
 			<code class="language-html">&#60;kol-input-text _id="surname" _required _value="Mustermann"&#62;Surname&#60;/kol-input-text&#62;
 &#60;kol-spin _show&#62;&#60;/kol-spin&#62;</code>
 	</pre>
-			<kol-heading _level="2">Components</kol-heading>
+			<kol-heading _label="" _level="2">Components</kol-heading>
 			<p>In der folgenden Tabelle werden alle Komponenten erläutert und deren jeweiligen Eigenschaften aufgelistet.</p>
 			<kol-table id="components" _caption="Available components"></kol-table>
 			<script>
@@ -170,6 +170,10 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 	name: `alert`,
 	desc: `Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ '_type' des Alert.`,
 	props: `_alert, _has-closer, _heading, _level, _type, _variant`
+},{
+	name: `alert-wc`,
+	desc: `Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ '_type' des Alert.`,
+	props: `_alert, _has-closer, _heading, _level, _type, _variant`
 },{
 	name: `badge`,
 	desc: `Mit **Badges** können Sie bestimmte Informationen auf Ihrer Webseite optisch hervorheben.
@@ -294,12 +298,12 @@ Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode
 
 Beachten Sie, dass die Komponente automatisch ein Padding links und rechts zum umgebenden Text erzeugt. Sie kann daher im Fließtext ohne
 Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern den Abstand zum umgebenden Text.`,
-	props: `_aria-controls, _aria-current, _aria-expanded, _aria-label, _aria-selected, _disabled, _href, _icon, _icon-align, _icon-only, _label, _role, _selector, _stealth, _tab-index, _target, _target-description, _tooltip-align, _use-case`
+	props: `_aria-controls, _aria-current, _aria-expanded, _aria-label, _aria-selected, _disabled, _download, _href, _icon, _icon-align, _icon-only, _label, _role, _selector, _stealth, _tab-index, _target, _target-description, _tooltip-align, _use-case`
 },{
 	name: `link-button`,
 	desc: `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>.`,
-	props: `_aria-controls, _aria-current, _aria-expanded, _aria-label, _aria-selected, _custom-class, _disabled, _href, _icon, _icon-only, _label, _role, _tab-index, _target, _target-description, _tooltip-align, _variant`
+	props: `_aria-controls, _aria-current, _aria-expanded, _aria-label, _aria-selected, _custom-class, _disabled, _download, _href, _icon, _icon-only, _label, _role, _tab-index, _target, _target-description, _tooltip-align, _variant`
 },{
 	name: `modal`,
 	desc: `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.
@@ -325,11 +329,11 @@ noch die Icons ausgegeben.`,
 	name: `popover`,
 	desc: `Die **Popover**-Komponente stellt eine Möglichkeit dar zusätzliche Inhalte in ein temporäres Element zu setzen, das, ähnlich wie <kol-link _href="" _label="Tooltip"></kol-link>, um sein Triggerelement angeordnet ist.
 Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).`,
-	props: `_alignment, _open`
+	props: `_alignment, _show`
 },{
 	name: `progress`,
 	desc: `Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.`,
-	props: `_max, _type, _unit, _value`
+	props: `_label, _max, _type, _unit, _value`
 },{
 	name: `quote`,
 	desc: `Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-('inline') und eine eingerückte('block') Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates.`,
@@ -387,7 +391,7 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 },
 				];
 			</script>
-			<kol-heading _level="2">Properties</kol-heading>
+			<kol-heading _label="" _level="2">Properties</kol-heading>
 			<p>In der folgenden Tabelle werden alle Eigenschaften der Häufigkeit nach erläutert und jeweils die Komponenten aufgelistet, wo sie verwendet werden..</p>
 			<kol-table id="properties" _caption="Available properties"></kol-table>
 			<script>
@@ -440,7 +444,7 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	name: `_alert`,
 	desc: `Gibt an, ob der Screenreader die Meldung vorlesen soll.`,
 	types: `boolean`,
-	comps: `alert, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea, toast`
+	comps: `alert, alert-wc, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea, toast`
 },{
 	name: `_access-key`,
 	desc: `Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.`,
@@ -481,31 +485,31 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, was der Screenreader ausgeben soll`,
 	types: `string`,
 	comps: `breadcrumb, button, button-link, icon, link, link-button, modal, nav, skip-nav, symbol, tabs`
+},{
+	name: `_type`,
+	desc: `Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.`,
+	types: `"bar" | "cycle", "button" | "checkbox" | "default" | "switch", "button" | "reset" | "submit", "date" | "datetime-local" | "month" | "number" | "time" | "week", "date" | "datetime-local" | "month" | "time" | "week", "default" | "error" | "info" | "success" | "warning", "search" | "tel" | "text" | "url"`,
+	comps: `alert, alert-wc, button, button-link, input-checkbox, input-date, input-number, input-text, progress, toast`
 },{
 	name: `_required`,
 	desc: `Macht das Eingabeelement zu einem Pflichtfeld.`,
 	types: `boolean`,
 	comps: `input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, textarea`
 },{
-	name: `_type`,
-	desc: `Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.`,
-	types: `"bar" | "cycle", "button" | "checkbox" | "switch", "button" | "reset" | "submit", "date" | "datetime-local" | "month" | "number" | "time" | "week", "date" | "datetime-local" | "month" | "time" | "week", "default" | "error" | "info" | "success" | "warning", "search" | "tel" | "text" | "url"`,
-	comps: `alert, button, button-link, input-checkbox, input-date, input-number, input-text, progress, toast`
+	name: `_variant`,
+	desc: `Gibt an, welche Ausprägung der Button hat.`,
+	types: `"block" | "inline", "button" | "checkbox" | "default" | "switch", "card" | "msg", "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary", "primary" | "secondary"`,
+	comps: `alert, alert-wc, button, input-checkbox, link-button, nav, pagination, quote`
 },{
 	name: `_list`,
 	desc: `Gibt den technischen Namen des Eingabefeldes an.`,
 	types: `Option<W3CInputValue>[] | string, Option<number>[] | string, SelectOption<W3CInputValue>[] | string, string | string[]`,
 	comps: `input-color, input-date, input-email, input-number, input-radio, input-range, input-text, select`
-},{
-	name: `_variant`,
-	desc: `Gibt an, welche Ausprägung der Button hat.`,
-	types: `"block" | "inline", "button" | "checkbox" | "switch", "card" | "msg", "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary", "primary" | "secondary"`,
-	comps: `alert, button, input-checkbox, link-button, nav, pagination, quote`
 },{
 	name: `_label`,
 	desc: `Gibt den Text der Überschrift an.`,
 	types: `string`,
-	comps: `badge, button, button-link, heading, link, link-button, tooltip`
+	comps: `badge, button, button-link, heading, link, link-button, progress, tooltip`
 },{
 	name: `_auto-complete`,
 	desc: `Gibt an, ob das Eingabefeld autovervollständigt werden kann.`,
@@ -521,21 +525,26 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Setzt das Eingabefeld in den schreibgeschützten Modus.`,
 	types: `boolean`,
 	comps: `input-date, input-email, input-number, input-password, input-text, textarea`
+},{
+	name: `_level`,
+	desc: `Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.`,
+	types: `0 | 1 | 2 | 3 | 4 | 5 | 6`,
+	comps: `accordion, alert, alert-wc, card, heading, toast`
 },{
 	name: `_placeholder`,
 	desc: `Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.`,
 	types: `string`,
 	comps: `input-email, input-number, input-password, input-text, textarea`
-},{
-	name: `_level`,
-	desc: `Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.`,
-	types: `0 | 1 | 2 | 3 | 4 | 5 | 6`,
-	comps: `accordion, alert, card, heading, toast`
 },{
 	name: `_icon-only`,
 	desc: `Gibt an, ob nur das Icon angezeigt wird.`,
 	types: `boolean`,
 	comps: `badge, button, button-link, link, link-button`
+},{
+	name: `_heading`,
+	desc: `Gibt den Titel der Meldung an.`,
+	types: `string`,
+	comps: `accordion, alert, alert-wc, card, toast`
 },{
 	name: `_size`,
 	desc: `Setzt die Breite des Eingabefeldes in Buchstabenbreiten.`,
@@ -576,11 +585,6 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.`,
 	types: `Date | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-W&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}&#96;, &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-W&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}&#96; | number, number`,
 	comps: `input-date, input-number, input-range, progress`
-},{
-	name: `_heading`,
-	desc: `Gibt den Titel der Meldung an.`,
-	types: `string`,
-	comps: `accordion, alert, card, toast`
 },{
 	name: `_step`,
 	desc: `Gibt die Schrittweite der Wertveränderung an`,
@@ -591,16 +595,16 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt den Minimalwert des Eingabefeldes an.`,
 	types: `Date | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-W&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}&#96;, &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}T&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-&#36;{number}&#96; | &#96;&#36;{number}-W&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}:&#36;{number}&#96; | &#96;&#36;{number}:&#36;{number}&#96; | number, number`,
 	comps: `input-date, input-number, input-range`
+},{
+	name: `_show`,
+	desc: `Gibt an, ob der Toast eingeblendet wird.`,
+	types: `boolean`,
+	comps: `popover, spin, toast`
 },{
 	name: `_pattern`,
 	desc: `Gibt ein Prüfmuster für das Eingabefeld an.`,
 	types: `string`,
 	comps: `input-email, input-password, input-text`
-},{
-	name: `_open`,
-	desc: `Gibt an, ob das Accordion geöffnet ist.`,
-	types: `boolean`,
-	comps: `accordion, details, popover`
 },{
 	name: `_multiple`,
 	desc: `Gibt an, ob mehrere Werte eingegeben werden können.`,
@@ -616,6 +620,11 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt die Ziel-Url des Links an.`,
 	types: `string`,
 	comps: `link, link-button, quote`
+},{
+	name: `_has-closer`,
+	desc: `Aktiviert das Schließen-Icon.`,
+	types: `boolean`,
+	comps: `alert, alert-wc, toast`
 },{
 	name: `_custom-class`,
 	desc: `Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.`,
@@ -632,25 +641,25 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	types: `string`,
 	comps: `link, link-button`
 },{
-	name: `_show`,
-	desc: `Gibt an, ob der Toast eingeblendet wird.`,
-	types: `boolean`,
-	comps: `spin, toast`
+	name: `_download`,
+	desc: `Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.`,
+	types: `boolean | string`,
+	comps: `link, link-button`
 },{
 	name: `_orientation`,
 	desc: `Gibt die Ausrichtung der LinkList an.`,
 	types: `"horizontal" | "vertical"`,
 	comps: `input-radio, nav`
+},{
+	name: `_open`,
+	desc: `Gibt an, ob das Accordion geöffnet ist.`,
+	types: `boolean`,
+	comps: `accordion, details`
 },{
 	name: `_icon-align`,
 	desc: `Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.`,
 	types: `"bottom" | "left" | "right" | "top"`,
 	comps: `button, link`
-},{
-	name: `_has-closer`,
-	desc: `Aktiviert das Schließen-Icon.`,
-	types: `boolean`,
-	comps: `alert, toast`
 },{
 	name: `_caption`,
 	desc: `Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.`,

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-rc.17",
+  "version": "1.5.0-rc.19",
   "tags": [
     {
       "name": "kol-abbr",
@@ -117,6 +117,58 @@
       "cssProperties": [],
       "cssParts": []
     },
+    {
+      "name": "kol-alert-wc",
+      "description": "Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.",
+      "attributes": [
+        {
+          "name": "_alert",
+          "type": "boolean | undefined",
+          "description": "Gibt an, ob der Screenreader die Meldung vorlesen soll.",
+          "defaultValue": "false",
+          "required": false
+        },
+        {
+          "name": "_has-closer",
+          "type": "boolean | undefined",
+          "description": "Gibt an, ob der Alert ein Schließen-Icon hat.",
+          "defaultValue": "false",
+          "required": false
+        },
+        {
+          "name": "_heading",
+          "type": "string | undefined",
+          "description": "Gibt den Titel der Meldung an.",
+          "required": false
+        },
+        {
+          "name": "_level",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
+          "description": "Setzt den H-Level, von 1 bis 6, der Überschrift.",
+          "defaultValue": "1",
+          "required": false
+        },
+        {
+          "name": "_type",
+          "type": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined",
+          "description": "Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.",
+          "defaultValue": "'default'",
+          "required": false
+        },
+        {
+          "name": "_variant",
+          "type": "\"card\" | \"msg\" | undefined",
+          "description": "Gibt an, welche Benachrichtigungsvariante dargestellt wird.",
+          "defaultValue": "'msg'",
+          "required": false
+        }
+      ],
+      "events": [],
+      "methods": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssParts": []
+    },
     {
       "name": "kol-badge",
       "description": "Mit **Badges** können Sie bestimmte Informationen auf Ihrer Webseite optisch hervorheben.\nKoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnung der Textfarbe auch die Möglichkeit, einem Badge ein Icon und/oder einen anderen Schriftschnitt mitzugeben.",
@@ -837,7 +889,7 @@
         },
         {
           "name": "_type",
-          "type": "\"button\" | \"checkbox\" | \"switch\" | undefined",
+          "type": "\"button\" | \"checkbox\" | \"default\" | \"switch\" | undefined",
           "description": "Gibt an, welchen Type das Input haben soll.",
           "required": false
         },
@@ -849,7 +901,7 @@
         },
         {
           "name": "_variant",
-          "type": "\"button\" | \"checkbox\" | \"switch\" | undefined",
+          "type": "\"button\" | \"checkbox\" | \"default\" | \"switch\" | undefined",
           "description": "Gibt an, welchen Type das Input haben soll.",
           "required": false
         }
@@ -2132,6 +2184,13 @@
           "defaultValue": "false",
           "required": false
         },
+        {
+          "name": "_download",
+          "type": "boolean | string | undefined",
+          "description": "Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.",
+          "defaultValue": "false",
+          "required": false
+        },
         {
           "name": "_href",
           "type": "string",
@@ -2269,6 +2328,13 @@
           "defaultValue": "false",
           "required": false
         },
+        {
+          "name": "_download",
+          "type": "boolean | string | undefined",
+          "description": "Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.",
+          "defaultValue": "false",
+          "required": false
+        },
         {
           "name": "_href",
           "type": "string",
@@ -2596,7 +2662,7 @@
           "required": false
         },
         {
-          "name": "_open",
+          "name": "_show",
           "type": "boolean | undefined",
           "description": "Öffnet/schließt das Popover.",
           "defaultValue": "false",
@@ -2613,6 +2679,12 @@
       "name": "kol-progress",
       "description": "Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.",
       "attributes": [
+        {
+          "name": "_label",
+          "type": "string | undefined",
+          "description": "Setzt die Bezeichnung der Fortschrittsanzeige.",
+          "required": false
+        },
         {
           "name": "_max",
           "type": "number",

package/dist/cjs/{app-globals-0cf91d90.js → app-globals-33f93589.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";const index$1=require("./index-29c5d3c6.js"),index=require("./index-a96d7f87.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),index$2=require("./index-eb52922f.js"),appGlobalScript=async()=>{index$1.setMode((e=>(e.shadowRoot instanceof ShadowRoot&&index$2.setThemeStyle(e,index$2.getThemeDetails(e)),"default"))),await index.register([],[]),Promise.resolve().then((function(){return require("./devtools-98551855.js")})).then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{dev_utils.Log.error(e)}))},globalScripts=appGlobalScript;exports.globalScripts=globalScripts;
+"use strict";const index$1=require("./index-29c5d3c6.js"),index=require("./index-b6484e6a.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),index$2=require("./index-eb52922f.js"),appGlobalScript=async()=>{index$1.setMode((e=>(e.shadowRoot instanceof ShadowRoot&&index$2.setThemeStyle(e,index$2.getThemeDetails(e)),"default"))),await index.register([],[]),Promise.resolve().then((function(){return require("./devtools-98551855.js")})).then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{dev_utils.Log.error(e)}))},globalScripts=appGlobalScript;exports.globalScripts=globalScripts;

package/dist/cjs/{app-globals-0cf91d90.js.map → app-globals-33f93589.js.map}

@@ -1 +1 @@
-{"file":"app-globals-0cf91d90.js","mappings":";;;;;;;;;;AAMA,wBAAe;EACdA,eAAO,CAAC,CAAC,GAAG;IACX,IAAI,GAAG,CAAC;MACPC,qBAAa,CAAC,GAAG,EAAEC,uBAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD;GACA,CAAC,CAAC;EAEH;EAEA,oDAAO,wBAAY,KAAC;KAClB,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ;MAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;;IAEDC,aAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACxBW,MAAC,aAAa,GAAG;;;;","names":["setMode","setThemeStyle","getThemeDetails","Log"],"sources":["./src/global/script.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\nimport { register } from '../core';\nimport { Log } from '../utils/dev.utils';\n\n// ts-prune-ignore-next\nexport default async (): Promise<void> => {\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\tawait register([], []);\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
+{"file":"app-globals-33f93589.js","mappings":";;;;;;;;;;AAMA,wBAAe;EACdA,eAAO,CAAC,CAAC,GAAG;IACX,IAAI,GAAG,CAAC;MACPC,qBAAa,CAAC,GAAG,EAAEC,uBAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD;GACA,CAAC,CAAC;EAEH;EAEA,oDAAO,wBAAY,KAAC;KAClB,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ;MAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;;IAEDC,aAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACxBW,MAAC,aAAa,GAAG;;;;","names":["setMode","setThemeStyle","getThemeDetails","Log"],"sources":["./src/global/script.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\nimport { register } from '../core';\nimport { Log } from '../utils/dev.utils';\n\n// ts-prune-ignore-next\nexport default async (): Promise<void> => {\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\tawait register([], []);\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/button-link-19d8a9a8.js.map

@@ -1 +1 @@
-{"file":"button-link-19d8a9a8.js","mappings":";;;;;;;MAuMa,qBAAqB,GAAG,CAAC,SAAoC,EAAE,QAAgB,EAAE,KAAiB;EAC9GA,8BAAc,CACb,SAAS,EACT,QAAQ,EACR,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM,EACzF,IAAI,GAAG,CAAC,CAAC,sCAAsC,CAAC,CAAC,EACjD,KAAK,EACL;IACC,YAAY,EAAE,KAAK;GACnB,CACD,CAAC;AACH;;;;","names":["watchValidator"],"sources":["./src/types/button-link.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Events } from '../enums/events';\nimport { watchValidator } from '../utils/prop.validators';\nimport { EventCallback, EventValueOrEventCallback } from './callbacks';\nimport { Stringified } from './common';\nimport { KoliBriAllIcon, KoliBriIconProp } from './icon';\nimport { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropStealth } from './props';\nimport { PropLabel } from './props/label';\n\nexport type AlternativButtonLinkRole = 'button' | 'link' | 'tab';\n\n/**\n * https://twitter.com/housecor/status/1541037184622403584?t=HoUiOAZEcXFeuDl-VWAEZg\n * https://mui.com/material-ui/react-link/#accessibility\n * https://mui.com/material-ui/react-button/#text-button\n */\ntype RequiredButtonAndLinkProps = PropLabel;\ntype OptionalButtonAndLinkProps = {\n\tariaControls: string;\n\tariaLabel: string;\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated\n\t */\n\ticonAlign: Alignment;\n\ticonOnly: boolean;\n\trole: AlternativButtonLinkRole;\n\ttabIndex: number;\n\ttooltipAlign: Alignment;\n} & PropAriaCurrent &\n\tPropAriaExpanded &\n\tPropAriaSelected &\n\tPropDisabled;\n\ntype RequiredButtonAndLinkStates = {\n\ticon: KoliBriAllIcon;\n\tlabel: string;\n};\ntype OptionalButtonAndLinkStates = {\n\tariaLabel: string;\n\tariaControls: string;\n\t/**\n\t * @deprecated\n\t */\n\ticonAlign: Alignment;\n\ticonOnly: boolean;\n\trole: AlternativButtonLinkRole;\n\ttabIndex: number;\n\ttooltipAlign: Alignment;\n} & PropAriaCurrent &\n\tPropAriaExpanded &\n\tPropAriaSelected &\n\tPropDisabled;\n\n/**\n * Button\n */\nexport type KoliBriButtonType = 'button' | 'reset' | 'submit';\nexport type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';\n\nexport type KoliBriButtonCallbacks<T> = {\n\t[Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Events.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\nexport type KoliBriButtonVariantPropState = {\n\tvariant: KoliBriButtonVariant;\n};\nexport type KoliBriButtonCustomClassPropState = {\n\tcustomClass: string;\n};\n\n/**\n * API ButtonLink\n */\nexport type RequiredButtonLinkProps = RequiredButtonAndLinkProps;\nexport type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {\n\t/**\n\t * @deprecated Zweck?!\n\t */\n\taccessKey: string;\n\tdisabled: boolean;\n\tid: string;\n\ton: KoliBriButtonCallbacks<unknown>;\n\ttype: KoliBriButtonType;\n\tvalue: Stringified<unknown>;\n};\n// type ButtonLinkProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;\n\ntype RequiredButtonLinkStates = RequiredButtonAndLinkStates &\n\tKoliBriButtonVariantPropState & {\n\t\ttype: KoliBriButtonType;\n\t};\ntype OptionalButtonLinkStates = OptionalButtonAndLinkStates &\n\tKoliBriButtonCustomClassPropState & {\n\t\t/**\n\t\t * @deprecated Zweck?!\n\t\t */\n\t\taccessKey: string;\n\t\tdisabled: boolean;\n\t\tid: string;\n\t\ton: KoliBriButtonCallbacks<unknown>;\n\t\tvalue: unknown;\n\t};\n// type ButtonLinkStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;\n\n/**\n * API Button\n */\nexport type RequiredButtonProps = RequiredButtonLinkProps;\nexport type OptionalButtonProps = OptionalButtonLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;\nexport type ButtonProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;\n\nexport type RequiredButtonStates = RequiredButtonLinkStates & KoliBriButtonVariantPropState;\nexport type OptionalButtonStates = OptionalButtonLinkStates & KoliBriButtonCustomClassPropState;\nexport type ButtonStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;\n\n/* LINK */\n\n/**\n * @deprecated Link should not use the on-click event. Use a button instead.\n */\nexport type LinkOnCallbacks = {\n\t[Events.onClick]?: EventValueOrEventCallback<Event, string>;\n};\n\n// https://www.w3schools.com/tags/att_a_target.asp\nexport type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | string;\n\nexport type LinkUseCase = 'text' | 'image' | 'nav';\n\n/**\n * API Link\n */\nexport type RequiredLinkProps = RequiredButtonAndLinkProps & {\n\thref: string;\n};\nexport type OptionalLinkProps = OptionalButtonAndLinkProps & {\n\t/**\n\t * @deprecated A link could never be disabled. Use a button instead.\n\t */\n\tdisabled: boolean;\n\t/**\n\t * @deprecated We use the on-click event only on buttons styled as link.\n\t */\n\ton: LinkOnCallbacks;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tselector: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\ttarget: LinkTarget;\n\ttargetDescription: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tuseCase: LinkUseCase;\n} & PropStealth;\nexport type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;\n\nexport type RequiredLinkStates = RequiredButtonAndLinkStates & {\n\thref: string;\n};\nexport type OptionalLinkStates = OptionalButtonAndLinkStates & {\n\tariaSelected: boolean;\n\t/**\n\t * @deprecated We use the on-click event only on buttons styled as link.\n\t */\n\ton: LinkOnCallbacks;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tselector: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\ttarget: LinkTarget;\n\ttargetDescription: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tuseCase: LinkUseCase;\n} & PropAriaSelected &\n\tPropStealth;\nexport type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;\n\n/**\n * API LinkButton\n */\nexport type RequiredLinkButtonProps = RequiredLinkProps;\nexport type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;\n// type LinkButtonProps = Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps>;\n\n// type RequiredLinkButtonStates = KoliBriButtonVariantPropState;\n// type OptionalLinkButtonStates = KoliBriButtonCustomClassPropState;\n// type LinkButtonStates = Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;\n\nexport const watchTooltipAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'top' || value === 'right' || value === 'bottom' || value === 'left',\n\t\tnew Set(['Alignment {top, right, buttom, left}']),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'top',\n\t\t}\n\t);\n};\n"],"version":3}
+{"file":"button-link-19d8a9a8.js","mappings":";;;;;;;MAwMa,qBAAqB,GAAG,CAAC,SAAoC,EAAE,QAAgB,EAAE,KAAiB;EAC9GA,8BAAc,CACb,SAAS,EACT,QAAQ,EACR,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM,EACzF,IAAI,GAAG,CAAC,CAAC,sCAAsC,CAAC,CAAC,EACjD,KAAK,EACL;IACC,YAAY,EAAE,KAAK;GACnB,CACD,CAAC;AACH;;;;","names":["watchValidator"],"sources":["./src/types/button-link.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Events } from '../enums/events';\nimport { watchValidator } from '../utils/prop.validators';\nimport { EventCallback, EventValueOrEventCallback } from './callbacks';\nimport { Stringified } from './common';\nimport { KoliBriAllIcon, KoliBriIconProp } from './icon';\nimport { Alignment, PropAriaCurrent, PropAriaExpanded, PropAriaSelected, PropDisabled, PropDownload, PropLabel, PropStealth } from './props';\n\nexport type AlternativButtonLinkRole = 'button' | 'link' | 'tab';\n\n/**\n * https://twitter.com/housecor/status/1541037184622403584?t=HoUiOAZEcXFeuDl-VWAEZg\n * https://mui.com/material-ui/react-link/#accessibility\n * https://mui.com/material-ui/react-button/#text-button\n */\ntype RequiredButtonAndLinkProps = PropLabel;\ntype OptionalButtonAndLinkProps = {\n\tariaControls: string;\n\tariaLabel: string;\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated\n\t */\n\ticonAlign: Alignment;\n\ticonOnly: boolean;\n\trole: AlternativButtonLinkRole;\n\ttabIndex: number;\n\ttooltipAlign: Alignment;\n} & PropAriaCurrent &\n\tPropAriaExpanded &\n\tPropAriaSelected &\n\tPropDisabled;\n\ntype RequiredButtonAndLinkStates = {\n\ticon: KoliBriAllIcon;\n\tlabel: string;\n};\ntype OptionalButtonAndLinkStates = {\n\tariaLabel: string;\n\tariaControls: string;\n\t/**\n\t * @deprecated\n\t */\n\ticonAlign: Alignment;\n\ticonOnly: boolean;\n\trole: AlternativButtonLinkRole;\n\ttabIndex: number;\n\ttooltipAlign: Alignment;\n} & PropAriaCurrent &\n\tPropAriaExpanded &\n\tPropAriaSelected &\n\tPropDisabled;\n\n/**\n * Button\n */\nexport type KoliBriButtonType = 'button' | 'reset' | 'submit';\nexport type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';\n\nexport type KoliBriButtonCallbacks<T> = {\n\t[Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Events.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\nexport type KoliBriButtonVariantPropState = {\n\tvariant: KoliBriButtonVariant;\n};\nexport type KoliBriButtonCustomClassPropState = {\n\tcustomClass: string;\n};\n\n/**\n * API ButtonLink\n */\nexport type RequiredButtonLinkProps = RequiredButtonAndLinkProps;\nexport type OptionalButtonLinkProps = OptionalButtonAndLinkProps & {\n\t/**\n\t * @deprecated Zweck?!\n\t */\n\taccessKey: string;\n\tdisabled: boolean;\n\tid: string;\n\ton: KoliBriButtonCallbacks<unknown>;\n\ttype: KoliBriButtonType;\n\tvalue: Stringified<unknown>;\n};\n// type ButtonLinkProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;\n\ntype RequiredButtonLinkStates = RequiredButtonAndLinkStates &\n\tKoliBriButtonVariantPropState & {\n\t\ttype: KoliBriButtonType;\n\t};\ntype OptionalButtonLinkStates = OptionalButtonAndLinkStates &\n\tKoliBriButtonCustomClassPropState & {\n\t\t/**\n\t\t * @deprecated Zweck?!\n\t\t */\n\t\taccessKey: string;\n\t\tdisabled: boolean;\n\t\tid: string;\n\t\ton: KoliBriButtonCallbacks<unknown>;\n\t\tvalue: unknown;\n\t};\n// type ButtonLinkStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;\n\n/**\n * API Button\n */\nexport type RequiredButtonProps = RequiredButtonLinkProps;\nexport type OptionalButtonProps = OptionalButtonLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;\nexport type ButtonProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;\n\nexport type RequiredButtonStates = RequiredButtonLinkStates & KoliBriButtonVariantPropState;\nexport type OptionalButtonStates = OptionalButtonLinkStates & KoliBriButtonCustomClassPropState;\nexport type ButtonStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;\n\n/* LINK */\n\n/**\n * @deprecated Link should not use the on-click event. Use a button instead.\n */\nexport type LinkOnCallbacks = {\n\t[Events.onClick]?: EventValueOrEventCallback<Event, string>;\n};\n\n// https://www.w3schools.com/tags/att_a_target.asp\nexport type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | string;\n\nexport type LinkUseCase = 'text' | 'image' | 'nav';\n\n/**\n * API Link\n */\nexport type RequiredLinkProps = RequiredButtonAndLinkProps & {\n\thref: string;\n};\nexport type OptionalLinkProps = OptionalButtonAndLinkProps & {\n\t/**\n\t * @deprecated A link could never be disabled. Use a button instead.\n\t */\n\tdisabled: boolean;\n\t/**\n\t * @deprecated We use the on-click event only on buttons styled as link.\n\t */\n\ton: LinkOnCallbacks;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tselector: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\ttarget: LinkTarget;\n\ttargetDescription: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tuseCase: LinkUseCase;\n} & PropDownload &\n\tPropStealth;\nexport type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;\n\nexport type RequiredLinkStates = RequiredButtonAndLinkStates & {\n\thref: string;\n};\nexport type OptionalLinkStates = OptionalButtonAndLinkStates & {\n\tariaSelected: boolean;\n\t/**\n\t * @deprecated We use the on-click event only on buttons styled as link.\n\t */\n\ton: LinkOnCallbacks;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tselector: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\ttarget: LinkTarget;\n\ttargetDescription: string;\n\t/**\n\t * @deprecated Das Styling sollte stets über CSS erfolgen.\n\t */\n\tuseCase: LinkUseCase;\n} & PropAriaSelected &\n\tPropDownload &\n\tPropStealth;\nexport type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;\n\n/**\n * API LinkButton\n */\nexport type RequiredLinkButtonProps = RequiredLinkProps;\nexport type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;\n// type LinkButtonProps = Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps>;\n\n// type RequiredLinkButtonStates = KoliBriButtonVariantPropState;\n// type OptionalLinkButtonStates = KoliBriButtonCustomClassPropState;\n// type LinkButtonStates = Generic.Element.Members<RequiredLinkButtonStates, OptionalLinkButtonStates>;\n\nexport const watchTooltipAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'top' || value === 'right' || value === 'bottom' || value === 'left',\n\t\tnew Set(['Alignment {top, right, buttom, left}']),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'top',\n\t\t}\n\t);\n};\n"],"version":3}

package/dist/cjs/{controller-073aa3b2.js → controller-43eacc77.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";const prop_validators=require("./prop.validators-dd1f7878.js"),controller=require("./controller-272d14fd.js");class InputTextEmailController extends controller.InputPasswordController{constructor(t,o,e){super(t,o,e),this.component=t}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}componentWillLoad(){super.componentWillLoad(),this.validateList(this.component._list)}}class InputTextController extends InputTextEmailController{constructor(t,o,e){super(t,o,e),this.hasError=!1,this.hasList=!1,this.component=t}validateType(t){prop_validators.watchValidator(this.component,"_type",(t=>"string"==typeof t&&("text"===t||"search"===t||"url"===t||"tel"===t)),new Set(["String {text, search, url, tel}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type)}}exports.InputTextController=InputTextController,exports.InputTextEmailController=InputTextEmailController;
+"use strict";const prop_validators=require("./prop.validators-dd1f7878.js"),controller=require("./controller-87980d4a.js");class InputTextEmailController extends controller.InputPasswordController{constructor(t,o,e){super(t,o,e),this.component=t}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}componentWillLoad(){super.componentWillLoad(),this.validateList(this.component._list)}}class InputTextController extends InputTextEmailController{constructor(t,o,e){super(t,o,e),this.hasError=!1,this.hasList=!1,this.component=t}validateType(t){prop_validators.watchValidator(this.component,"_type",(t=>"string"==typeof t&&("text"===t||"search"===t||"url"===t||"tel"===t)),new Set(["String {text, search, url, tel}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type)}}exports.InputTextController=InputTextController,exports.InputTextEmailController=InputTextEmailController;

package/dist/cjs/{controller-073aa3b2.js.map → controller-43eacc77.js.map}

@@ -1 +1 @@
-{"file":"controller-073aa3b2.js","mappings":";;;;;;;;MAgBa,wBAAyB,SAAQA,kCAAuB;EAGpE,YAAmB,SAA0D,EAAE,IAAY,EAAE,IAAkB;IAC9G,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,YAAY,CAAC,KAA6B;IAChDC,oCAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,IAAY,KAAK,OAAO,IAAI,KAAK,QAAQ,EAAE,KAAK,CAAC,CAAC;GACjG;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;GACxC;CACD;MAEY,mBAAoB,SAAQ,wBAAwB;EAMhE,YAAmB,SAAqD,EAAE,IAAY,EAAE,IAAkB;IACzG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAJvB,aAAQ,GAAG,KAAK,CAAC;IACjB,YAAO,GAAG,KAAK,CAAC;IAItB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,YAAY,CAAC,KAAqB;IACxCC,8BAAc,CACb,IAAI,CAAC,SAAS,EACd,OAAO,EACP,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,EAC/H,IAAI,GAAG,CAAC,CAAC,iCAAiC,CAAC,CAAC,EAC5C,KAAK,CACL,CAAC;GACF;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;GACxC;;;;;;","names":["InputPasswordController","watchJsonArrayString","watchValidator"],"sources":["./src/components/input-text/controller.ts"],"sourcesContent":["import { watchJsonArrayString, watchValidator } from '../../utils/prop.validators';\nimport { InputPasswordController } from '../input-password/controller';\nimport { Props as InputTextProps, Watches as InputTextWatches } from './types';\n\nimport { Generic } from '@a11y-ui/core';\nimport { InputTextType } from '../../types/input/control/text';\nimport { Stringified } from '../../types/common';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tid: string;\n\tlist: Stringified<string[]>;\n};\ntype InputTextEmailProps = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype InputTextEmailWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\nexport class InputTextEmailController extends InputPasswordController implements InputTextEmailWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextEmailProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextEmailProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateList(this.component._list);\n\t}\n}\n\nexport class InputTextController extends InputTextEmailController implements InputTextWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextProps;\n\n\tpublic hasError = false;\n\tpublic hasList = false;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateType(value?: InputTextType): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_type',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'text' || value === 'search' || value === 'url' || value === 'tel'),\n\t\t\tnew Set(['String {text, search, url, tel}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateType(this.component._type);\n\t}\n}\n"],"version":3}
+{"file":"controller-43eacc77.js","mappings":";;;;;;;;MAgBa,wBAAyB,SAAQA,kCAAuB;EAGpE,YAAmB,SAA0D,EAAE,IAAY,EAAE,IAAkB;IAC9G,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,YAAY,CAAC,KAA6B;IAChDC,oCAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,IAAY,KAAK,OAAO,IAAI,KAAK,QAAQ,EAAE,KAAK,CAAC,CAAC;GACjG;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;GACxC;CACD;MAEY,mBAAoB,SAAQ,wBAAwB;EAMhE,YAAmB,SAAqD,EAAE,IAAY,EAAE,IAAkB;IACzG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAJvB,aAAQ,GAAG,KAAK,CAAC;IACjB,YAAO,GAAG,KAAK,CAAC;IAItB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,YAAY,CAAC,KAAqB;IACxCC,8BAAc,CACb,IAAI,CAAC,SAAS,EACd,OAAO,EACP,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,EAC/H,IAAI,GAAG,CAAC,CAAC,iCAAiC,CAAC,CAAC,EAC5C,KAAK,CACL,CAAC;GACF;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;GACxC;;;;;;","names":["InputPasswordController","watchJsonArrayString","watchValidator"],"sources":["./src/components/input-text/controller.ts"],"sourcesContent":["import { watchJsonArrayString, watchValidator } from '../../utils/prop.validators';\nimport { InputPasswordController } from '../input-password/controller';\nimport { Props as InputTextProps, Watches as InputTextWatches } from './types';\n\nimport { Generic } from '@a11y-ui/core';\nimport { InputTextType } from '../../types/input/control/text';\nimport { Stringified } from '../../types/common';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tid: string;\n\tlist: Stringified<string[]>;\n};\ntype InputTextEmailProps = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype InputTextEmailWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\nexport class InputTextEmailController extends InputPasswordController implements InputTextEmailWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextEmailProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextEmailProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateList(this.component._list);\n\t}\n}\n\nexport class InputTextController extends InputTextEmailController implements InputTextWatches {\n\tprotected readonly component: Generic.Element.Component & InputTextProps;\n\n\tpublic hasError = false;\n\tpublic hasList = false;\n\n\tpublic constructor(component: Generic.Element.Component & InputTextProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateType(value?: InputTextType): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_type',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'text' || value === 'search' || value === 'url' || value === 'tel'),\n\t\t\tnew Set(['String {text, search, url, tel}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateType(this.component._type);\n\t}\n}\n"],"version":3}

package/dist/cjs/{controller-536f457e.js → controller-521c7ae9.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";const a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),prop_validators=require("./prop.validators-dd1f7878.js"),tabIndex=require("./tab-index-7bf0cb35.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),getRenderStates=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDiscribedBy:n}},EXPERIMENTAL_MODE=dev_utils.getExperimalMode();class ControlledInputController{constructor(t,e,o){var n,i,a,s,r;if(this.syncFormAssociatedName=()=>{var t;EXPERIMENTAL_MODE&&(null===(t=this.formAssociated)||void 0===t||t.setAttribute("name",this.component.state._name||this.component.state._id))},this.setFormAssociatedValue=(t=null)=>{var e;EXPERIMENTAL_MODE&&(null===(e=this.formAssociated)||void 0===e||e.setAttribute("value",t))},this.component=t,this.name=e,this.host=o,EXPERIMENTAL_MODE){this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden");const t=(null===(n=this.host)||void 0===n?void 0:n.children)||[];for(let e=0;e<t.length;e++)"INPUT"===(null===(i=this.host)||void 0===i?void 0:i.children[e].tagName)&&(null===(a=this.host)||void 0===a||a.removeChild(null===(s=this.host)||void 0===s?void 0:s.children[e]));null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){prop_validators.watchBoolean(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,o){super(t,e,o),this.hideLabel=!1,this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){prop_validators.watchBoolean(this.component,"_adjustHeight",t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t)}validateHideLabel(t){prop_validators.watchBoolean(this.component,"_hideLabel",t)}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateId(t){prop_validators.watchString(this.component,"_id",t,{hooks:{afterPatch:this.syncFormAssociatedName},minLength:1}),""!==t&&void 0!==t||a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){prop_validators.watchString(this.component,"_name",t,{hooks:{afterPatch:this.syncFormAssociatedName}}),void 0===t&&a11y_tipps.devHint("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){tabIndex.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),this.syncFormAssociatedName()}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;this.setFormAssociatedValue(o),this.valueChangeListeners.forEach((t=>t(o))),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o)}onClick(t){var e;"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;
+"use strict";const a11y_tipps=require("./a11y.tipps-6f0ad06e.js"),prop_validators=require("./prop.validators-dd1f7878.js"),tabIndex=require("./tab-index-7bf0cb35.js"),dev_utils=require("./dev.utils-d69c0a9f.js"),getRenderStates=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}},EXPERIMENTAL_MODE=dev_utils.getExperimalMode();class ControlledInputController{constructor(t,e,o){var n,i,a,s,r;if(this.syncFormAssociatedName=()=>{var t;EXPERIMENTAL_MODE&&(null===(t=this.formAssociated)||void 0===t||t.setAttribute("name",this.component.state._name||this.component.state._id))},this.setFormAssociatedValue=(t=null)=>{var e;EXPERIMENTAL_MODE&&(null===(e=this.formAssociated)||void 0===e||e.setAttribute("value",t))},this.component=t,this.name=e,this.host=o,EXPERIMENTAL_MODE){this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden");const t=(null===(n=this.host)||void 0===n?void 0:n.children)||[];for(let e=0;e<t.length;e++)"INPUT"===(null===(i=this.host)||void 0===i?void 0:i.children[e].tagName)&&(null===(a=this.host)||void 0===a||a.removeChild(null===(s=this.host)||void 0===s?void 0:s.children[e]));null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){prop_validators.watchBoolean(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,o){super(t,e,o),this.hideLabel=!1,this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){prop_validators.watchBoolean(this.component,"_adjustHeight",t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t)}validateHideLabel(t){prop_validators.watchBoolean(this.component,"_hideLabel",t)}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateId(t){prop_validators.watchString(this.component,"_id",t,{hooks:{afterPatch:this.syncFormAssociatedName},minLength:1}),""!==t&&void 0!==t||a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){prop_validators.watchString(this.component,"_name",t,{hooks:{afterPatch:this.syncFormAssociatedName}}),void 0===t&&a11y_tipps.devHint("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){tabIndex.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),this.syncFormAssociatedName()}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;this.setFormAssociatedValue(o),this.valueChangeListeners.forEach((t=>t(o))),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o)}onClick(t){var e;"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;