@public-ui/sample-react 3.0.0-rc.5 → 3.0.0-rc.7

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.21.1
+ * @remix-run/router v1.23.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.28.2
+ * React Router v6.30.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.5",
+  "version": "3.0.0-rc.7",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -13,20 +13,20 @@
     "@leanup/stack-webpack": "1.3.54",
     "@playwright/test": "1.49.1",
     "@stencil/core": "4.22.3",
-    "@types/node": "ts5.7",
+    "@types/node": "22.14.1",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.5",
-    "@typescript-eslint/eslint-plugin": "8.18.2",
-    "@typescript-eslint/parser": "8.18.2",
+    "@typescript-eslint/eslint-plugin": "8.27.0",
+    "@typescript-eslint/parser": "8.27.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.7",
+    "adopted-style-sheets": "1.1.8",
     "ajv": "8.17.1",
     "chromedriver": "130.0.4",
     "cpy-cli": "5.0.0",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "esbuild-loader": "4.2.2",
+    "esbuild-loader": "4.3.0",
     "eslint": "^8",
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-json": "^3",
@@ -34,32 +34,34 @@
     "eslint-plugin-react": "7.37.4",
     "file-loader": "6.2.0",
     "formik": "2.4.6",
-    "knip": "5.40.0",
+    "knip": "5.46.0",
     "less-loader": "12.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "nightwatch-axe-verbose": "2.3.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "7.0.2",
     "postcss-loader": "8.1.1",
-    "prettier": "3.4.2",
+    "prettier": "3.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-number-format": "5.4.3",
-    "react-router": "6.28.2",
-    "react-router-dom": "6.28.2",
+    "react-router": "6.30.0",
+    "react-router-dom": "6.30.0",
     "rimraf": "6.0.1",
-    "sass-loader": "16.0.4",
+    "sass-loader": "16.0.5",
     "string-replace-loader": "3.1.0",
     "tslib": "2.8.1",
-    "typescript": "5.7.3",
-    "webpack": "5.97.1",
+    "typescript": "5.8.2",
+    "webpack": "5.98.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
-    "yup": "1.5.0",
-    "@public-ui-/theme-ecl": "2.1.3",
-    "@public-ui/components": "3.0.0-rc.5",
-    "@public-ui/react": "3.0.0-rc.5",
-    "@public-ui/theme-default": "3.0.0-rc.5"
+    "yup": "1.6.1",
+    "@public-ui/components": "3.0.0-rc.7",
+    "@public-ui/react": "3.0.0-rc.7",
+    "@public-ui/theme-default": "3.0.0-rc.7"
+  },
+  "optionalDependencies": {
+    "@public-ui-/theme-ecl": "2.1.3"
   },
   "files": [
     ".eslintignore",

package/src/components/button/short-key.tsx

@@ -1,8 +1,61 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react';
 import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
 
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -11,11 +64,50 @@ export const ButtonShortKey: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+					The first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed
+					separately.
+				</p>
+				<p>
+					The second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to
+					any of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast
+					notification for demonstration purposes.
 				</p>
 			</SampleDescription>
 
@@ -34,6 +126,15 @@ export const ButtonShortKey: FC = () => {
 					_on={dummyEventHandler}
 				/>
 			</div>
+
+			<KolHeading _level={2} _label="Interactive sample" className="mt" />
+
+			<KolTableStateful
+				_label={`Move focus within one of the "Actions" cells and press "e" or "d" to trigger an action.`}
+				_data={DATA}
+				_headers={HEADERS}
+				_minWidth="400px"
+			/>
 		</>
 	);
 };

package/src/components/handout/basic.tsx

@@ -248,10 +248,8 @@ export const HandoutBasic: FC = () => {
 						<p>
 							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
-						<div className="grid grid-cols-2 items-center">
-							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
-							<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
-						</div>
+						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
+						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
 					</div>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>

package/src/components/icon/basic.tsx

@@ -12,8 +12,9 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
 			<KolIcon
+				className="block w-[1em] h-[1em]"
 				style={{
 					color: 'red',
 				}}

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

@@ -8,7 +8,7 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
 			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate

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

@@ -4,17 +4,19 @@ import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { KolHeading } from '@public-ui/react';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Radio</legend>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			</div>
 		</SampleColumns>
 	);
 });

package/src/components/link/short-key.tsx

@@ -8,7 +8,7 @@ export const LinkShortKey: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.
 			</p>
 		</SampleDescription>
 

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

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+import { useContext } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolButton, KolPopoverButton, KolBadge } from '@public-ui/react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const PopoverButtonBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+
+			<div className="flex flex-wrap gap-4">
+				<KolPopoverButton _label={'Open popover'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolButton _label="Button within popover" _variant="primary" _on={dummyEventHandler} />
+					<br />
+					<br />
+					<KolButton _label="Second Button within popover" _on={dummyEventHandler} />
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="Open popover" _popoverAlign="right" _icons={{ right: 'codicon codicon-chevron-right' }}>
+					<p className="w-sm">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+						Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					</p>
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="">
+					<span slot="expert">
+						<u>Expert slot content</u>
+					</span>
+					This sample illustrates a button with expert slot.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="Percentages" className="flex flex-col gap-4">
+				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
+				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
+			</fieldset>
+			<fieldset title="Custom units" className="flex flex-col gap-4">
+				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
+				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
+			</fieldset>
 		</div>
 	</>
 );

package/src/components/select/partials/cases.tsx

@@ -9,9 +9,8 @@ import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: 'No choice',
+		label: 'No salutation',
 		value: '',
-		disabled: true,
 	},
 	{
 		label: 'Mrs.',
@@ -27,6 +26,10 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
+	index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
+);
+
 type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
 
 const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
@@ -59,7 +62,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
 			<KolSelect
 				{...props}

package/src/components/single-select/partials/cases.tsx

@@ -7,6 +7,7 @@ import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 import type { Components } from '@public-ui/components';
+import { LONG_OPTIONS } from '../../../shares/longOptions';
 
 export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
@@ -37,6 +38,8 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 };

package/src/components/table/sort-data.tsx

@@ -59,11 +59,11 @@ export const TableSortData: FC = () => (
 
 		<section className="w-full grid gap-4">
 			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical" />
+				<KolHeading _level={2} _label="Vertical headers" />
 				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
 			</section>
 			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Horizontal" />
+				<KolHeading _level={2} _label="Horizontal headers" />
 				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>

package/src/components/table/stateful-with-selection.tsx

@@ -10,6 +10,8 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -28,7 +30,8 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],
+		disabledKeys: ['AAA1003', 'AAA1004'],
 		keyPropertyName: 'internalIdentifier',
 	};
 

package/src/components/table/stateless-with-selection.tsx

@@ -10,6 +10,8 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -24,12 +26,13 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
+	const [selectedKeys, setSelectedKeys] = useState(['AAA1002', 'AAA1004']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys,
 		keyPropertyName: 'internalIdentifier',
+		disabledKeys: ['AAA1003', 'AAA1004'],
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);

package/src/components/table/stateless-with-single-selection.tsx

@@ -10,6 +10,7 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -30,6 +31,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
+		disabledKeys: ['AAA1003'],
 		keyPropertyName: 'internalIdentifier',
 	};
 

package/src/components/tree/basic.tsx

@@ -34,6 +34,7 @@ export const TreeBasic: FC = () => {
 			<KolTree _label="Sitemap" class="block w-fit">
 				<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>
 				<KolTreeItem _label="2 About (open initially)" {...getItemProps('about')} _open>
+					<KolTreeItem _label="2.0 Legal" {...getItemProps('legal')}></KolTreeItem>
 					<KolTreeItem _label="2.1 Team" {...getItemProps('team')}>
 						<KolTreeItem _label="2.1.1. Values" {...getItemProps('values')}></KolTreeItem>
 						<KolTreeItem _label="2.1.2. Members" {...getItemProps('members')}>

package/src/react.main.tsx

@@ -6,7 +6,6 @@ import { setTagNameTransformer } from '@public-ui/react';
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { DEFAULT } from '@public-ui/theme-default';
-import { ECL_EC, ECL_EU } from '@public-ui-/theme-ecl';
 
 import { App } from './App';
 
@@ -35,8 +34,17 @@ const getThemes = async () => {
 		return [theme];
 	}
 
+	const optionalThemes: Theme[] = [];
+	const { ECL_EC, ECL_EU } = await import('@public-ui-/theme-ecl');
+
+	if (ECL_EC && ECL_EU) {
+		optionalThemes.push(ECL_EC, ECL_EU);
+	} else {
+		console.warn('Theme package @public-ui-/theme-ecl not available. Continuing without it.');
+	}
+
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
+	return [DEFAULT, ...optionalThemes] as Theme[];
 };
 
 void (async () => {

package/src/scenarios/change-tabindex.tsx

@@ -228,7 +228,7 @@ export const ChangeTabindex: FC = () => {
 						</KolSplitButton>
 						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
 							Dropdown-Inhalt
-						</KolSplitButton>{' '}
+						</KolSplitButton>
 						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
 							Dropdown-Inhalt
 						</KolSplitButton>

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,4 +1,4 @@
-@import '../../@shared/mixins';
+@use '../../@shared/mixins' as *;
 
 .mainlayout {
 	min-height: calc(100vh - rem(32));
@@ -9,11 +9,11 @@
 	grid-template-rows: 1fr;
 	grid-template-areas: 'nav content';
 
-	& > .nav-area {
+	&>.nav-area {
 		grid-area: nav;
 	}
 
-	& > .content {
+	&>.content {
 		grid-area: content;
 	}
-}
+}

package/src/shares/longOptions.ts

@@ -0,0 +1,15 @@
+export const LONG_OPTIONS = [
+	{ value: '1', label: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+	{
+		value: '3',
+		label:
+			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+	},
+	{ value: '4', label: 'Lorem ipsum dolor' },
+	{ value: '5', label: 'Lorem ipsum dolor' },
+	{ value: '6', label: 'Lorem ipsum dolor' },
+	{ value: '7', label: 'Lorem ipsum dolor' },
+	{ value: '8', label: 'Lorem ipsum dolor' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+];

package/src/shares/routes.ts

@@ -30,8 +30,10 @@ import { LINK_ROUTES } from '../components/link/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_BUTTON_ROUTES } from '../components/popover-button/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
+import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
 import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
 import { SPIN_ROUTES } from '../components/spin/routes';
@@ -42,7 +44,6 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
-import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
 import { COMBOBOX_ROUTES } from '../components/combobox/routes';
@@ -82,6 +83,7 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
+	...POPOVER_BUTTON_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,