@public-ui/components 1.5.2 → 1.6.0-rc.0

package/cheat-sheet.html

@@ -10,9 +10,9 @@
 		<link href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/a11y-light.min.css" rel="stylesheet">
 		<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/index.min.js"></script>
 		<script type="module">
-			import { register } from 'https://esm.sh/@public-ui/components@1.5.2';
-			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2/dist/loader';
-			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2';
+			import { register } from 'https://esm.sh/@public-ui/components@1.6.0-rc.0';
+			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.6.0-rc.0/dist/loader';
+			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.6.0-rc.0';
 				register(ITZBund, defineCustomElements)
 						.catch(console.warn);
 		</script>
@@ -76,9 +76,9 @@
 			<pre>
 				<code class="language-html">&#60;head&#62;
 	&#60;script type="module"&#62;
-		import { register } from 'https://esm.sh/@public-ui/components@1.5.2';
-		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.2/dist/loader';
-		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.2';
+		import { register } from 'https://esm.sh/@public-ui/components@1.6.0-rc.0';
+		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.6.0-rc.0/dist/loader';
+		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.6.0-rc.0';
 			register(ITZBund, defineCustomElements)
 					.catch(console.warn);
 	&#60;/script&#62;
@@ -95,7 +95,7 @@
 		<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": ["https://esm.sh/@public-ui/components@1.5.2/vscode-custom-data.json"]
+	"html.customData": ["https://esm.sh/@public-ui/components@1.6.0-rc.0/vscode-custom-data.json"]
 }</code>
 		</pre>
 		<kol-heading _label="" _level="3">Dev-Tools</kol-heading>
@@ -250,31 +250,31 @@ Die **Image**-Komponente dient dazu, Bilder darzustellen.`,
 },{
 	name: `input-checkbox`,
 	desc: `Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.`,
-	props: `_access-key, _alert, _checked, _disabled, _error, _hide-label, _hint, _icon, _id, _indeterminate, _name, _required, _tab-index, _touched, _type, _value, _variant`
+	props: `_access-key, _alert, _checked, _disabled, _error, _hide-label, _hint, _icon, _id, _indeterminate, _label, _name, _required, _tab-index, _touched, _type, _value, _variant`
 },{
 	name: `input-color`,
 	desc: `Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _name, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _name, _tab-index, _touched, _value`
 },{
 	name: `input-date`,
 	desc: `Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _max, _min, _name, _read-only, _required, _step, _tab-index, _touched, _type, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _max, _min, _name, _read-only, _required, _step, _tab-index, _touched, _type, _value`
 },{
 	name: `input-email`,
 	desc: `Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _max-length, _multiple, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _max-length, _multiple, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _value`
 },{
 	name: `input-file`,
 	desc: `Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.`,
-	props: `_accept, _access-key, _alert, _disabled, _error, _hide-label, _hint, _icon, _id, _multiple, _name, _required, _tab-index, _touched, _value`
+	props: `_accept, _access-key, _alert, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _multiple, _name, _required, _tab-index, _touched, _value`
 },{
 	name: `input-number`,
 	desc: `Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _max, _min, _name, _placeholder, _read-only, _required, _step, _tab-index, _touched, _type, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _max, _min, _name, _placeholder, _read-only, _required, _step, _tab-index, _touched, _type, _value`
 },{
 	name: `input-password`,
 	desc: `Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _max-length, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _max-length, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _value`
 },{
 	name: `input-radio`,
 	desc: `Die Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.
@@ -282,15 +282,15 @@ Die **Image**-Komponente dient dazu, Bilder darzustellen.`,
 <kol-alert _alert _heading="Hinweis" _level="1" _type="info">
   Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.
 </kol-alert><br/>`,
-	props: `_access-key, _alert, _disabled, _error, _hide-label, _hint, _id, _list, _name, _orientation, _required, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _disabled, _error, _hide-label, _hint, _id, _label, _list, _name, _orientation, _required, _tab-index, _touched, _value`
 },{
 	name: `input-range`,
 	desc: `Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _max, _min, _name, _step, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _max, _min, _name, _step, _tab-index, _touched, _value`
 },{
 	name: `input-text`,
 	desc: `Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.`,
-	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _list, _max-length, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _type, _value`
+	props: `_access-key, _alert, _auto-complete, _disabled, _error, _hide-label, _hint, _icon, _id, _label, _list, _max-length, _name, _pattern, _placeholder, _read-only, _required, _size, _tab-index, _touched, _type, _value`
 },{
 	name: `link`,
 	desc: `Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.
@@ -344,7 +344,7 @@ Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-('
 },{
 	name: `select`,
 	desc: `Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.`,
-	props: `_access-key, _alert, _disabled, _error, _height, _hide-label, _hint, _icon, _id, _list, _multiple, _name, _required, _size, _tab-index, _touched, _value`
+	props: `_access-key, _alert, _disabled, _error, _height, _hide-label, _hint, _icon, _id, _label, _list, _multiple, _name, _required, _size, _tab-index, _touched, _value`
 },{
 	name: `skip-nav`,
 	desc: `Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die **Tab-Taste** sichtbar.`,
@@ -378,7 +378,7 @@ Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Date
 },{
 	name: `textarea`,
 	desc: `Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.`,
-	props: `_access-key, _adjust-height, _alert, _disabled, _error, _has-counter, _hide-label, _hint, _id, _max-length, _name, _placeholder, _read-only, _required, _resize, _rows, _tab-index, _touched, _value`
+	props: `_access-key, _adjust-height, _alert, _disabled, _error, _has-counter, _hide-label, _hint, _id, _label, _max-length, _name, _placeholder, _read-only, _required, _resize, _rows, _tab-index, _touched, _value`
 },{
 	name: `toast`,
 	desc: `Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.
@@ -428,6 +428,20 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 					]]
 				};
 				propertyTable._data = [{
+	name: `_label`,
+	desc: `Das Label dient der Beschriftung unterschiedlicher Elemente.
+- Button -> label text
+- Heading -> headline text
+- Input, Select und Textarea -> label text
+- Summary -> summary text
+- Table -> caption text
+- etc.
+
+Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,
+wenn man das Label mittels dem Expert-Slot überschreiben will.`,
+	types: `string`,
+	comps: `badge, button, button-link, heading, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, progress, select, split-button, textarea, tooltip`
+},{
 	name: `_tab-index`,
 	desc: `Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)`,
 	types: `number`,
@@ -507,11 +521,6 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	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: `_label`,
-	desc: `Gibt den Text der Überschrift an.`,
-	types: `string`,
-	comps: `badge, button, button-link, heading, link, link-button, progress, split-button, tooltip`
 },{
 	name: `_list`,
 	desc: `Gibt den technischen Namen des Eingabefeldes an.`,