@public-ui/sample-react 2.0.0-rc.9 → 2.0.1

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.11.0
+ * @remix-run/router v1.14.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.18.0
+ * React Router v6.21.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,16 +8,16 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.0-rc.9",
-    "@public-ui/react": "2.0.0-rc.9",
-    "@public-ui/themes": "2.0.0-rc.9",
-    "@types/node": "20.8.10",
-    "@types/react": "18.2.36",
-    "@types/react-dom": "18.2.14",
-    "@unocss/preset-uno": "0.57.2",
-    "@unocss/webpack": "0.57.2",
+    "@public-ui/components": "2.0.1",
+    "@public-ui/react": "2.0.1",
+    "@public-ui/themes": "2.0.1",
+    "@types/node": "20.10.5",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.18",
+    "@unocss/preset-uno": "0.58.0",
+    "@unocss/webpack": "0.58.0",
     "ajv": "8.12.0",
-    "chromedriver": "118.0.1",
+    "chromedriver": "120.0.0",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
@@ -26,13 +26,13 @@
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.18.0",
-    "react-router-dom": "6.18.0",
+    "react-router": "6.21.0",
+    "react-router-dom": "6.21.0",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
     "world_countries_lists": "2.8.2",
-    "yup": "1.3.2"
+    "yup": "1.3.3"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -11,6 +11,7 @@ import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
 import { useLocation } from 'react-router';
 import { HideMenusContext } from './shares/HideMenusContext';
+import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
 
 setStorage(localStorage);
 
@@ -46,7 +47,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter(
 									(theme) =>
-										['bmf', 'default', 'bzst', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf((theme as Option<Theme>).value) >= 0,
+										['bmf', 'default', 'bzst-v1', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf((theme as Option<Theme>).value) >= 0,
 								).map((theme) => (
 									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
 										<div className="mt-4">
@@ -107,6 +108,7 @@ export const App: FC = () => {
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	useSetCurrentLocation();
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
 	document.body.setAttribute('class', theme);

package/src/components/FocusInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import { RefComponent } from './types';
 
 type FokusElementProps = {
@@ -8,13 +8,14 @@ type FokusElementProps = {
 export const FocusElement: FC<FokusElementProps> = (props) => {
 	const ref = useRef(null);
 
-	useLayoutEffect(() => {
-		setTimeout(() => {
-			if (ref.current && window.self === window.top) {
-				(ref.current as unknown as HTMLElement).focus();
-			}
-		}, 500);
-	}, [ref]);
+	/* Focus effect for the moment to ensure test stability */
+	// useLayoutEffect(() => {
+	// 	setTimeout(() => {
+	// 		if (ref.current && window.self === window.top) {
+	// 			(ref.current as unknown as HTMLElement).focus();
+	// 		}
+	// 	}, 500);
+	// }, [ref]);
 
 	return <props.RefComponent ref={ref} {...props} />;
 };

package/src/components/avatar/basic.tsx

@@ -4,7 +4,9 @@ import React, { FC } from 'react';
 export const AvatarBasic: FC = () => (
 	<div className="flex flex-wrap gap-4">
 		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
-		<KolAvatar _label="Elke Mustermann" />
+
+		{/* intentional trailing space    👇 - it's supposed to be trimmed */}
+		<KolAvatar _label="Elke Mustermann " />
 		<KolAvatar _label="Marianne" />
 	</div>
 );

package/src/components/badge/basic.tsx

@@ -3,16 +3,12 @@ import { KolBadge } from '@public-ui/react';
 
 import { FC } from 'react';
 
-const PROPS = {
-	_label: 'Label',
-};
-
 export const BadgeBasic: FC = () => (
 	<div className="flex gap-2">
-		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
-		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
-		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
-		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
+		<KolBadge _label="schwarz"></KolBadge>
+		<KolBadge _color="#86ffc6" _label="türkis"></KolBadge>
+		<KolBadge _color="#06539e" _label="blau"></KolBadge>
+		<KolBadge _color="#ae0000" _label="rot"></KolBadge>
+		<KolBadge _color="#8b008b" _label="lila"></KolBadge>
 	</div>
 );

package/src/components/badge/button.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import { KolBadge } from '@public-ui/react';
+import { KolBadge, KolHeading } from '@public-ui/react';
 
 import { FC } from 'react';
 
-const PROPS = {
-	_label: 'Label',
+const createBadgeProps = (label: string) => ({
 	_smartButton: {
 		_icons: 'codicon codicon-close',
-		_label: 'Entfernen',
+		_label: `Entfernen von ${label}`,
 		_on: {
 			onClick: () => alert('clicked'),
 		},
 	},
-};
+});
 
 export const BadgeButton: FC = () => (
-	<div className="d-flex gap-2">
-		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
-	</div>
+	<>
+		<div className="mb-4">
+			<KolHeading _label="Badge" _level={2} />
+		</div>
+		<div className="flex gap-2">
+			<KolBadge _label="schwarz" {...createBadgeProps('schwarz')}></KolBadge>
+			<KolBadge _label="türkis" _color="#86ffc6" {...createBadgeProps('türkis')}></KolBadge>
+			<KolBadge _label="blau" _color="#06539e" {...createBadgeProps('blau')}></KolBadge>
+			<KolBadge _label="rot" _color="#ae0000" {...createBadgeProps('rot')}></KolBadge>
+			<KolBadge _label="lila" _color="#8b008b" {...createBadgeProps('lila')}></KolBadge>
+		</div>
+	</>
 );

package/src/components/button-link/basic.tsx

@@ -19,5 +19,8 @@ export const ButtonLinkBasic: FC = () => (
 			<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
 			Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
 		</p>
+		<p>
+			<KolButtonLink _label="Disabled ButtonLink" _disabled />
+		</p>
 	</div>
 );

package/src/components/button-link/image.tsx

@@ -8,7 +8,7 @@ export const ButtonLinkImage: FC = () => (
 		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolButtonLink _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>
 );

package/src/components/card/flex.tsx

@@ -8,7 +8,7 @@ export const CardFlex: FC = () => (
 		<KolCard _label="Titel">
 			<div>Inhalt</div>
 		</KolCard>
-		<KolCard _label="Titel">
+		<KolCard _label="Titel" _hasCloser>
 			<div>
 				Inhalt
 				<br />

package/src/components/card/selection.tsx

@@ -21,7 +21,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -41,7 +41,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -61,7 +61,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>

package/src/components/handout/basic.tsx

@@ -83,7 +83,9 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				},
 				sort: (data) => {
 					return data.sort((first, second) => {
 						if (first.dienstag < second.dienstag) {
@@ -100,27 +102,37 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				},
 			},
 		],
 	],
@@ -989,7 +1001,7 @@ export const HandoutBasic: FC = () => (
 			</KolCard>
 		</div>
 		<KolVersion _label="5.0.2-test.2"></KolVersion>
-		{/* <KolImage _src="/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
+		{/* <KolImage _src="abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}
 	</div>

package/src/components/heading/badged.tsx

@@ -7,27 +7,27 @@ export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
 			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+				Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
 			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>

package/src/components/image/basic.tsx

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
 
-export const ImageBasic: FC = () => <KolImage className="w-80%" _src="/abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;
+export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

package/src/components/input-checkbox/partials/cases.tsx

@@ -48,6 +48,8 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 				_value={true}
 				_hint="Hint text"
 			/>
+			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
+			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
 			<KolInputCheckbox
 				{...props}
 				_error={ERROR_MSG}

package/src/components/input-radio/partials/cases.tsx

@@ -10,8 +10,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 		<div className="grid gap-4">
 			<KolInputRadio
 				{...props}
-				_error={ERROR_MSG}
-				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_options="[{'disabled':true,'label':'Frau (disabled)','value':'Frau'},{'label':'Herr'},{'label':'Firma','value':'Firma'}]"
 				_label="Anrede"
 			/>
 			<KolInputRadio

package/src/components/kolibri/basic.tsx

@@ -1,4 +1,18 @@
 import React, { FC } from 'react';
-import { KolKolibri } from '@public-ui/react';
+import { KolKolibri, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
-export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;
+export const KolibriBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Das KoliBri-Logo in verschiedenen Varianten</p>
+		</SampleDescription>
+
+		<KolHeading class="block" _level={3} _label="Regular" />
+		<KolKolibri class="block" style={{ width: 300 }} />
+		<KolHeading class="block" _level={3} _label="Ohne Label" />
+		<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
+		<KolHeading class="block" _level={3} _label="Individuelle Farbe" />
+		<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
+	</>
+);

package/src/components/kolibri/routes.ts

@@ -1,13 +1,9 @@
 import { Routes } from '../../shares/types';
 
 import { KolibriBasic } from './basic';
-import { KolibriAnimated } from './animated';
-import { KolibriNoLabel } from './no-label';
 
 export const KOLIBRI_ROUTES: Routes = {
 	kolibri: {
 		basic: KolibriBasic,
-		animated: KolibriAnimated,
-		'no-label': KolibriNoLabel,
 	},
 };

package/src/components/link/basic.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
-
 export const LinkBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolLink _href="#" _label="Simple Link" />

package/src/components/link/image.tsx

@@ -8,12 +8,12 @@ export const LinkImage: FC = () => (
 		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>
 );

package/src/components/nav/aria-current.tsx

@@ -2,21 +2,31 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavAriaCurrent: FC = () => (
-	<KolNav
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/untermenu',
-				_active: true,
-			},
-		]}
-		_ariaCurrentValue="page"
-	/>
+	<>
+		<SampleDescription>
+			<p>
+				Dieses Beispiel zeigt eine Navigation, bei welcher der zweite Link auf die aktuelle Seite verweist. Dadurch wird ihm automatisch das Attribut{' '}
+				<code>aria-current=&quot;page&quot;</code> zugewiesen.
+			</p>
+		</SampleDescription>
+
+		<KolNav
+			class="block w-sm"
+			_label="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_href: '#/',
+				},
+				{
+					_label: 'Nav - aria-current (Aktuelle Seite)',
+					_href: '#/nav/aria-current',
+					_active: true,
+				},
+			]}
+		/>
+	</>
 );

package/src/components/nav/basic.tsx

@@ -5,6 +5,7 @@ import { FC } from 'react';
 
 export const NavBasic: FC = () => (
 	<KolNav
+		class="block w-sm"
 		_label="Main navigation"
 		_links={[
 			{
@@ -17,7 +18,6 @@ export const NavBasic: FC = () => (
 				_href: '#/untermenu',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#abc',
 				_children: [
@@ -31,13 +31,11 @@ export const NavBasic: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#abc',
 						_icons: 'fa-solid fa-cat',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

package/src/components/nav/horizontal.tsx

@@ -16,7 +16,6 @@ export const NavHorizontal: FC = () => (
 				_href: '#/nav/horizontal',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#/nav/horizontal',
 				_children: [
@@ -29,12 +28,10 @@ export const NavHorizontal: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#/nav/horizontal',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

package/src/components/nav/routes.ts

@@ -1,17 +1,11 @@
 import { Routes } from '../../shares/types';
-
-import { NavActive } from './active';
-
 import { NavAriaCurrent } from './aria-current';
-
 import { NavBasic } from './basic';
-
 import { NavHorizontal } from './horizontal';
 
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
-		active: NavActive,
 		'aria-current': NavAriaCurrent,
 		horizontal: NavHorizontal,
 	},

package/src/components/split-button/basic.tsx

@@ -1,13 +1,24 @@
+import { ToasterService } from '@public-ui/components';
 import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
 
+const toaster = ToasterService.getInstance(document);
+
 export const SplitButtonBasic: FC = () => {
+	const handleButtonClick = () => {
+		void toaster.enqueue({
+			description: 'The Button has been clicked.',
+			label: `Button Clicked`,
+			type: 'info',
+		});
+	};
+
 	return (
 		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: console.log }}>
+			<KolSplitButton _label="Nur der Pfeil öffnet" className="w-200px" _on={{ onClick: handleButtonClick }}>
 				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request">
+			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request" className="w-200px">
 				Drowndown-Inhalt
 			</KolSplitButton>
 		</div>

package/src/components/table/formatter.ts

@@ -0,0 +1,5 @@
+export const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});