npm - @public-ui/components - Versions diffs - 1.1.13 → 1.1.14 - Mend

@public-ui/components 1.1.13 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/cheat-sheet.html CHANGED Viewed

@@ -16,7 +16,7 @@
 						.then(() => {})
 						.catch(console.warn);
 		</script>
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css">
 		<style>
 			:root {
 				font-size: 10px;
@@ -55,43 +55,44 @@
 			}
 		</style>
 	</head>
-	<body class="mapz" data-theme="mapz">
-		<kol-link _href="https://public-ui.github.io" _target="github">
-			<kol-kolibri _labelled="false"></kol-kolibri>
-		</kol-link>
-		<kol-heading>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>
-		<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 MAPZ-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>
-			<code class="language-html">&#60;head&#62;
-	&#60;link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" /&#62;
-	&#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>
-		<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/core';
-		import { defineCustomElements } from 'https://esm.sh/@public-ui/components/dist/loader';
-		import { MAPZ } from 'https://esm.sh/@public-ui/themes';
-		register([MAPZ], [defineCustomElements])
-			.then(() =&#62; {})
-			.catch(console.warn);
-	&#60;/script&#62;
-&#60;/head&#62;</code>
-		</pre>
-		<kol-heading _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="mapz" data-theme="mapz"&#62;
-	...
-&#60;/body&#62;</code>
+	<body>
+		<main class="mapz" data-theme="mapz">
+			<kol-link _href="https://public-ui.github.io" _target="github">
+				<kol-kolibri _labelled="false"></kol-kolibri>
+			</kol-link>
+			<kol-heading>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>
+			<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 MAPZ-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>
+				<code class="language-html">&#60;head&#62;
+		&#60;link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" /&#62;
+		&#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>
+			<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/core';
+			import { defineCustomElements } from 'https://esm.sh/@public-ui/components/dist/loader';
+			import { MAPZ } from 'https://esm.sh/@public-ui/themes';
+			register([MAPZ], [defineCustomElements])
+				.then(() =&#62; {})
+				.catch(console.warn);
+		&#60;/script&#62;
+	&#60;/head&#62;</code>
+			</pre>
+			<kol-heading _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="mapz" data-theme="mapz"&#62;
+		...
+	&#60;/body&#62;</code>
 		</pre>
 		<kol-heading _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>
@@ -113,31 +114,31 @@
 			<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>
-		<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>
-			const componentTable = document.querySelector('kol-table#components');
-			componentTable._headers = {
-				horizontal: [[
-					{
-						label: 'Component',
-						key: 'name',
-						width: '10%'
-					},
-					{
-						label: 'Description',
-						key: 'desc',
-						width: '60%'
-					},
-					{
-						label: 'Related properties',
-						key: 'props',
-						width: '30%'
-					}
-				]]
-			};
-			componentTable._data = [{
+			<kol-heading _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>
+				const componentTable = document.querySelector('kol-table#components');
+				componentTable._headers = {
+					horizontal: [[
+						{
+							label: 'Component',
+							key: 'name',
+							width: '10%'
+						},
+						{
+							label: 'Description',
+							key: 'desc',
+							width: '60%'
+						},
+						{
+							label: 'Related properties',
+							key: 'props',
+							width: '30%'
+						}
+					]]
+				};
+				componentTable._data = [{
 	name: `abbr`,
 	desc: `Die **Abbr**-Komponente implementiert den HTML-Tag 'abbr', wobei hier jedoch der Tooltip barrierefrei ist.
 Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.`,
@@ -370,38 +371,38 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 **Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, muss für das vorrangehende Referenz-Element 'inline-block' gesetzt werden.`,
 	props: `_align, _id, _label`
 },
-			];
-		</script>
-		<kol-heading _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>
-			const propertyTable = document.querySelector('kol-table#properties');
-			propertyTable._headers = {
-				horizontal: [[
-					{
-						label: 'Property',
-						key: 'name',
-						width: '10%'
-					},
-					{
-						label: 'Description',
-						key: 'desc',
-						width: '30%'
-					},
-					{
-						label: 'Type(s)',
-						key: 'types',
-						width: '30%'
-					},
-					{
-						label: 'Related component(s)',
-						key: 'comps',
-						width: '30%'
-					}
-				]]
-			};
-			propertyTable._data = [{
+				];
+			</script>
+			<kol-heading _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>
+				const propertyTable = document.querySelector('kol-table#properties');
+				propertyTable._headers = {
+					horizontal: [[
+						{
+							label: 'Property',
+							key: 'name',
+							width: '10%'
+						},
+						{
+							label: 'Description',
+							key: 'desc',
+							width: '30%'
+						},
+						{
+							label: 'Type(s)',
+							key: 'types',
+							width: '30%'
+						},
+						{
+							label: 'Related component(s)',
+							key: 'comps',
+							width: '30%'
+						}
+					]]
+				};
+				propertyTable._data = [{
 	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`,
@@ -852,14 +853,15 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
 	types: `string`,
 	comps: `input-file`
 },
-			];
-		</script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-		<script>
-			document.querySelectorAll('pre > code').forEach(el => {
-				hljs.highlightElement(el);
-			});
-		</script>
-		<p style="text-align: center; margin:1rem 2rem 0 2rem;><strong><kol-abbr _title="Komponenten-Bibliothek für die Barrierefreiheit" _tooltip-align="right">KoliBri</kol-abbr></strong> ist unter der Lizenz <kol-link _href="https://github.com/public-ui/kolibri/blob/main/LICENSE" _target="eu"><strong>EUPL v1.2</strong></kol-link> lizenziert.</p>
+				];
+			</script>
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+			<script>
+				document.querySelectorAll('pre > code').forEach(el => {
+					hljs.highlightElement(el);
+				});
+			</script>
+			<p style="text-align: center; margin:1rem 2rem 0 2rem;><strong><kol-abbr _title="Komponenten-Bibliothek für die Barrierefreiheit" _tooltip-align="right">KoliBri</kol-abbr></strong> ist unter der Lizenz <kol-link _href="https://github.com/public-ui/kolibri/blob/main/LICENSE" _target="eu"><strong>EUPL v1.2</strong></kol-link> lizenziert.</p>
+		</main>
 	</body>
 </html>