@public-ui/components 1.4.2 → 1.5.0-rc.1

package/README.md

@@ -5,3 +5,10 @@ Das **Components**-Modul beinhaltet **alle** zur Komponenten-Bibliothek gehören
 Mehr zur **Modularisierung** kann im [Architekturkonzept](https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md) nachgelesen werden.
 
 Mehr zum **Projekt** kann in der [README](https://github.com/public-ui/kolibri/#readme) nachgelesen werden.
+
+## Weiterentwicklung
+
+- in src/index.html main > ol > li mit anderen Elementen entfernen
+  - Suche nach Komponentenname mit Anfangsbuchstaben groß
+  - Inputs sind unter "Form" zu finden
+- nach Fertigstellung src/index.html zurücksetzen, oder die entfernten Elementen wieder einfügen (src/index.bak.html)

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/core@1.4.2';
-			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.4.2/dist/loader';
-			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.4.2';
+			import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.1';
+			import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.1/dist/loader';
+			import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.1';
 				register(ITZBund, defineCustomElements)
 						.then(() => {})
 						.catch(console.warn);
@@ -64,7 +64,7 @@
 			<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>
-			<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 DEFAULT-Themes gezeigt.</p>
+			<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>
 			<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>
@@ -78,10 +78,10 @@
 			<pre>
 				<code class="language-html">&#60;head&#62;
 	&#60;script type="module"&#62;
-		import { register } from 'https://esm.sh/@public-ui/core@1.4.2';
-		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.4.2/dist/loader';
-		import { DEFAULT } from 'https://esm.sh/@public-ui/themes@1.4.2';
-		register([DEFAULT], [defineCustomElements])
+		import { register } from 'https://esm.sh/@public-ui/components@1.5.0-rc.1';
+		import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.5.0-rc.1/dist/loader';
+		import { ITZBund } from 'https://esm.sh/@public-ui/themes@1.5.0-rc.1';
+		register([ITZBund], [defineCustomElements])
 			.then(() =&#62; {})
 			.catch(console.warn);
 	&#60;/script&#62;
@@ -226,7 +226,7 @@ seine Ausrichtung von **_rechts_** nach **_unten_**.<br/>Analog lässt sich die
 },{
 	name: `heading`,
 	desc: `Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.`,
-	props: `_label, _level, _overline`
+	props: `_headline, _level, _secondary-headline`
 },{
 	name: `icon`,
 	desc: `Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut '_icon' gesteuert werden und erfolgt durch das Attribut '_aria-label' barrierefrei. Die Ausgabe erfolgt standardmäßig als _'inline'_-Element.
@@ -239,6 +239,10 @@ Folgende Icon-Fonts werden _'out-of-the-box'_ unterstützt.
 
 <kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite ('index.html') die CSS-Dateien der Icon-Fonts eingebunden sind.</kol-alert>`,
 	props: `_aria-label, _icon, _part`
+},{
+	name: `image`,
+	desc: `Die **Image**-Komponente dient dazu, Bilder darzustellen.`,
+	props: `_alt, _loading, _sizes, _src, _srcset`
 },{
 	name: `indented-text`,
 	desc: `Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate.
@@ -507,11 +511,6 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	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: `_label`,
-	desc: `Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.`,
-	types: `string`,
-	comps: `badge, button, button-link, heading, link, link-button, tooltip`
 },{
 	name: `_auto-complete`,
 	desc: `Gibt an, ob das Eingabefeld autovervollständigt werden kann.`,
@@ -532,6 +531,11 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, ob das Eingabefeld nur lesend ist.`,
 	types: `boolean`,
 	comps: `input-date, input-email, input-number, input-password, input-text, textarea`
+},{
+	name: `_label`,
+	desc: `Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.`,
+	types: `string`,
+	comps: `badge, button, button-link, link, link-button, tooltip`
 },{
 	name: `_placeholder`,
 	desc: `Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.`,
@@ -657,6 +661,11 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.`,
 	types: `"bottom" | "left" | "right" | "top"`,
 	comps: `button, link`
+},{
+	name: `_headline`,
+	desc: `Gibt den Text der Überschrift an.`,
+	types: `string`,
+	comps: `card, heading`
 },{
 	name: `_has-closer`,
 	desc: `Gibt an, ob der Alert ein Schließen-Icon hat.`,
@@ -752,10 +761,35 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt die Zusammenfassung der Detailbeschreibung an.`,
 	types: `string`,
 	comps: `details`
+},{
+	name: `_srcset`,
+	desc: `Gibt eine Liste von Quell-URLs mit Breiten der Bilder an.`,
+	types: `string`,
+	comps: `image`
+},{
+	name: `_src`,
+	desc: `Gibt die Quell-URL an.`,
+	types: `string`,
+	comps: `image`
+},{
+	name: `_sizes`,
+	desc: `...`,
+	types: `string`,
+	comps: `image`
+},{
+	name: `_loading`,
+	desc: `Gibt den Lademodus an.`,
+	types: `"eager" | "lazy"`,
+	comps: `image`
+},{
+	name: `_alt`,
+	desc: `Gibt den alternativen Text an.`,
+	types: `string`,
+	comps: `image`
 },{
 	name: `_smart-button`,
 	desc: `Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).`,
-	types: `string | { _label: string; } & { _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrent | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _disabled?: boolean | undefined; _icon?: Stringified<KoliBriIconProp> | undefined; _iconAlign?: Alignment | undefined; _iconOnly?: boolean | undefined; _role?: AlternativButtonLinkRole | undefined; _tabIndex?: number | undefined; _tooltipAlign?: Alignment | undefined; _accessKey?: string | undefined; _id?: string | undefined; _on?: KoliBriButtonCallbacks<unknown> | undefined; _type?: KoliBriButtonType | undefined; _value?: unknown; _customClass?: string | undefined; _variant?: KoliBriButtonVariant | undefined; }`,
+	types: `string | { _label: string; } & { _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrent | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _disabled?: boolean | undefined; _icon?: Stringified<KoliBriIconProp> | undefined; _iconAlign?: Alignment | undefined; _iconOnly?: boolean | undefined; _role?: AlternativButtonLinkRole | undefined; _tabIndex?: number | undefined; _tooltipAlign?: Alignment | undefined; _accessKey?: string | undefined; _id?: string | undefined; _on?: KoliBriButtonCallbacks<unknown> | undefined; _type?: KoliBriButtonType | undefined; _value?: unknown; _variant?: KoliBriButtonVariant | undefined; _customClass?: string | undefined; }`,
 	comps: `badge`
 },{
 	name: `_color`,
@@ -767,6 +801,11 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.`,
 	types: `number`,
 	comps: `toast`
+},{
+	name: `_secondary-headline`,
+	desc: `Gibt den Text der zusätzlichen Überschrift an.`,
+	types: `string`,
+	comps: `heading`
 },{
 	name: `_rows`,
 	desc: `Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.`,
@@ -823,11 +862,6 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.`,
 	types: `string`,
 	comps: `table`
-},{
-	name: `_overline`,
-	desc: `Gibt den Text der zusätzlichen Beschriftung an.`,
-	types: `string`,
-	comps: `heading`
 },{
 	name: `_indeterminate`,
 	desc: `Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.`,
@@ -843,11 +877,6 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	desc: `Gibt an, ob eine individuelle Höhe übergeben werden soll.`,
 	types: `string`,
 	comps: `select`
-},{
-	name: `_headline`,
-	desc: `Gibt die Überschrift der Card an.`,
-	types: `string`,
-	comps: `card`
 },{
 	name: `_has-footer`,
 	desc: `Gibt an, ob die Card einen Footer-Bereich hat.`,