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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.7",
+  "version": "3.0.0-rc.8",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -49,6 +49,10 @@
     "rimraf": "6.0.1",
     "sass-loader": "16.0.5",
     "string-replace-loader": "3.1.0",
+    "stylelint": "16.17.0",
+    "stylelint-config-recommended-scss": "14.1.0",
+    "stylelint-config-standard": "37.0.0",
+    "stylelint-scss": "6.11.1",
     "tslib": "2.8.1",
     "typescript": "5.8.2",
     "webpack": "5.98.0",
@@ -56,12 +60,9 @@
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
     "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"
+    "@public-ui/components": "3.0.0-rc.8",
+    "@public-ui/themes": "3.0.0-rc.8",
+    "@public-ui/react": "3.0.0-rc.8"
   },
   "files": [
     ".eslintignore",
@@ -78,11 +79,14 @@
     "webpack.config.js"
   ],
   "scripts": {
-    "prebuild": "pnpm -r --filter=@public-ui/theme-* --filter @public-ui-/theme-* build",
+    "prebuild": "pnpm -r --filter=@public-ui/themes build",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
-    "lint": "tsc --noemit && eslint \"{src,tests,e2e}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+    "lint:eslint": "eslint src",
+    "lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "lint:tsc": "tsc --noemit",
     "postinstall": "pnpm exec playwright install",
     "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
     "prepare:themes-assets": "cpy \"node_modules/@public-ui/theme-default/assets/**/*\" public/assets --dot",

package/src/components/SampleDescription.tsx

@@ -6,36 +6,48 @@ import { PUBLIC_CODE_COMPONENT_URL, PUBLIC_DOC_COMPONENT_URL } from '../shares/c
 import { KolLink } from '@public-ui/react';
 
 import { HideMenusContext } from '../shares/HideMenusContext';
-
-const getLocationPaths = () => {
-	return location.hash.split('/').slice(1);
-};
+import { useLocation } from 'react-router';
 
 export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
+	const location = useLocation();
+	const paths = location.pathname.split('/').slice(1);
 
 	const docLink = useMemo(() => {
-		const paths = getLocationPaths();
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_DOC_COMPONENT_URL}/${paths[0]}`;
 	}, [location.hash]);
 
 	const codeLink = useMemo(() => {
-		const paths = getLocationPaths();
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_CODE_COMPONENT_URL}/${paths[0]}/${paths[1]}.tsx`;
 	}, [location.hash]);
 
-	return hideMenus ? null : (
-		<div className="flex justify-between mb-sm">
-			<div className="indented-text">{props.children}</div>
-			<div className="flex flex-wrap gap-2 shrink-0 ml">
-				{codeLink && <KolLink _href={codeLink} _label="Code" _target="_blank" />}
-				{docLink && <KolLink _href={docLink} _label="Documentation" _target="_blank" />}
-				<KolLink _href={`${location.href}?hideMenus`} _label="Standalone example" _target="_blank" />
-			</div>
-		</div>
+	return (
+		<>
+			<h1 className="visually-hidden">{location.pathname.replace(/\//g, ' ')}</h1>
+			{hideMenus ? null : (
+				<div className="grid sm:flex gap-4 justify-between pb-sm border-b-1 border-b-solid border-gray mb-2">
+					<div className="indented-text">{props.children}</div>
+					<ul className="flex flex-wrap gap-2 list-none m-0 p-0">
+						{codeLink && (
+							<li>
+								<KolLink _href={codeLink} _label="Code" _target="_blank" />
+							</li>
+						)}
+						{docLink && (
+							<li>
+								<KolLink _href={docLink} _label="Documentation" _target="_blank" />
+							</li>
+						)}
+						<li>
+							<KolLink _href={`#${location.pathname}?hideMenus`} _label="Standalone example" _target="_blank" />
+						</li>
+					</ul>
+				</div>
+			)}
+		</>
 	);
 };

package/src/components/Sidebar.tsx

@@ -7,6 +7,34 @@ import { THEME_OPTIONS } from '../shares/theme';
 
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
+
+type BuildInformationProps = {
+	buildDate?: string | null;
+	commitHash?: string | null;
+};
+const BuildInformation: FC<BuildInformationProps> = ({ buildDate, commitHash }) => {
+	if (!buildDate && !commitHash) {
+		return '';
+	}
+
+	return (
+		<div className="text-sm font-mono color-gray-5 m-t-2">
+			{buildDate && commitHash ? ( // date and hash provided
+				<>
+					Build: {commitHash}
+					<br />
+					at {buildDate}
+				</>
+			) : commitHash ? ( // hash only
+				`Build: ${commitHash}`
+			) : (
+				// date only
+				`Build date: ${buildDate}`
+			)}
+		</div>
+	);
+};
+
 type Props = {
 	version: string;
 	theme: string;
@@ -47,16 +75,8 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					<KolHeading _label="KoliBri React"></KolHeading>
 					<KolVersion _label={version}></KolVersion>
 				</div>
-				{(buildDate || commitHash) && (
-					<div className="text-sm font-mono color-gray-5 m-t-2">
-						{commitHash ? `Build: ${commitHash}` : ''}
-						<br />
-						{buildDate ? `at ${buildDate}` : ''}
-					</div>
-				)}
-
+				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
 				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
-
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
@@ -65,7 +85,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					</span>
 					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-
 				<Navigation routes={routes} />
 			</div>
 		</aside>

package/src/components/badge/basic.tsx

@@ -11,7 +11,7 @@ export const BadgeBasic: FC = () => (
 			<p>KolBadge shows badges with a label, background color and optional icon.</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>

package/src/components/badge/button.tsx

@@ -23,7 +23,7 @@ export const BadgeButton: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>

package/src/components/button/baselined.tsx

@@ -19,7 +19,7 @@ export const ButtonBaselined: FC = () => {
 				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
 			</SampleDescription>
 
-			<div className="flex">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>

package/src/components/drawer/basic.tsx

@@ -30,11 +30,13 @@ export const DrawerBasic: FC = () => {
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
 				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					<div className={align === 'left' || align == 'right' ? 'drawer-content-vertical' : ''}>
+						<p>
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+							voluptua.
+						</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 			</div>

package/src/components/handout/basic.tsx

@@ -190,7 +190,7 @@ export const HandoutBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
+			<div className="grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center">
 				<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 				<KolHeading _label="" _level={1}>
 					<span slot="expert">
@@ -441,7 +441,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 					<KolForm slot="">
-						<div className="grid gap-4 grid-cols-3 p-2">
+						<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2">
 							<KolInputColor _label={`Color`} />
 							<KolInputFile _label={`Upload file`} />
 							<KolInputNumber _label={`Number input`} />
@@ -460,7 +460,9 @@ export const HandoutBasic: FC = () => {
 							<div className="grid gap-4">
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
-									I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									<span slot="expert">
+										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									</span>
 								</KolInputCheckbox>
 							</div>
 							<KolTextarea _rows={4} _label={`Textarea`} />

package/src/components/link-button/aria-description.tsx

@@ -9,7 +9,7 @@ export const LinkButtonAriaDescription: FC = () => (
 			<p>This sample shows KolLinkButton with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<div className="flex flex-wrap gap-2">
 			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
 			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
 		</div>

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

@@ -15,16 +15,14 @@ export const LinkButtonBasic: FC = () => (
 			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
 
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-14">
-				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-			</div>
+		<div className="flex flex-wrap gap-2">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
 		</div>
 	</>
 );

package/src/components/table/predefined-settings.tsx

@@ -0,0 +1,41 @@
+import { SampleDescription } from '../SampleDescription';
+import { KolTableStateful } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+const DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];
+
+export const PredefinedSettings: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows the table with predefined settings.</p>
+			</SampleDescription>
+
+			<KolTableStateful
+				_label="Table for demonstration purposes with predefined settings"
+				_minWidth="auto"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'column A', key: 'columnA' },
+							{ label: 'column B', key: 'columnB' },
+							{ label: 'column C', key: 'columnC' },
+						],
+					],
+				}}
+				_tableSettings={{
+					columns: [
+						{ key: 'columnA', visible: false, label: 'Column A', position: 2 },
+						{ key: 'columnB', visible: true, label: 'Column B', position: 1, width: 20 },
+						{ key: 'columnC', visible: true, label: 'Column C', position: 0, width: 45 },
+					],
+				}}
+				_data={DATA}
+				_min-width="500px"
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</>
+	);
+};

package/src/components/table/render-cell.tsx

@@ -84,7 +84,7 @@ const HEADERS: KoliBriTableHeaders = {
 			},
 			{
 				label: 'Action (react)',
-				key: 'order',
+				key: 'action',
 				width: '20em',
 
 				/* Example 4: Render function using React */

package/src/components/table/routes.ts

@@ -14,23 +14,25 @@ import { TableStatelessWithSingleSelection } from './stateless-with-single-selec
 import { TableWithPagination } from './with-pagination';
 import { InteractiveChildElements } from './interactive-child-elements';
 import { MultiSortTable } from './multi-sort';
+import { PredefinedSettings } from './predefined-settings';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'column-alignment': TableColumnAlignment,
 		'complex-headers': TableComplexHeaders,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
+		'interactive-child-elements': InteractiveChildElements,
+		'multi-sort': MultiSortTable,
 		'pagination-position': PaginationPosition,
+		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
-		'with-footer': TableWithFooter,
 		'stateful-with-selection': TableStatefulWithSelection,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
+		stateless: TableStateless,
 		'stateless-with-selection': TableStatelessWithSelection,
 		'stateless-with-single-selection': TableStatelessWithSingleSelection,
+		'with-footer': TableWithFooter,
 		'with-pagination': TableWithPagination,
-		'interactive-child-elements': InteractiveChildElements,
-		stateless: TableStateless,
-		'multi-sort': MultiSortTable,
 	},
 };

package/src/components/tree/basic.tsx

@@ -66,7 +66,7 @@ export const TreeBasic: FC = () => {
 
 			<p>Current tree item: {subPage ?? 'none'}</p>
 
-			<div className="flex flex-row gap-2">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
 				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
 				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>

package/src/react.main.tsx

@@ -5,7 +5,7 @@ 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 { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -34,17 +34,8 @@ 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, ...optionalThemes] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
 };
 
 void (async () => {

package/src/scenarios/change-tabindex.tsx

@@ -37,7 +37,7 @@ export const ChangeTabindex: FC = () => {
 
 			<div className="w-full grid gap-4">
 				<KolCard _label="Button" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
 						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
 						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
@@ -46,7 +46,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="ButtonLink" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
 						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
 						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
@@ -55,7 +55,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Combobox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
 						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
 						<KolCombobox
@@ -72,7 +72,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputCheckbox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
 						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
 						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
@@ -81,7 +81,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputColor" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -90,7 +90,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputDate" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputDate
@@ -105,7 +105,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputEmail" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
 						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
 						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -114,7 +114,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputFile" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
 						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
 						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -123,7 +123,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputNumber" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
 						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
 						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -132,7 +132,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputPassword" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
 						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
 						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -141,7 +141,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRadio" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRadio
 							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
 							_label="InputRadio 1, Tabindex 4"
@@ -169,7 +169,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRange" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
 						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
 						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -178,7 +178,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputText" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
 						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
 						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -187,7 +187,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="LinkButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
 						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
 						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
@@ -196,14 +196,16 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Link" _level={0}>
-					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
-					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
-					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
-					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
+						<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+						<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
 				</KolCard>
 
 				<KolCard _label="SingleSelect" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
 						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
 						<KolSingleSelect
@@ -219,7 +221,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="SplitButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -236,7 +238,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Textarea" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
 						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
 						<KolTextarea

package/src/style.scss

@@ -23,13 +23,20 @@ hr {
 
 .indented-text {
 	p {
-		font-family: var(--font-family);
-		border-left: -2px solid var(--color-primary-variant);
-		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: rem(-2);
+		margin: 0;
 	}
 }
 
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
 .black-background {
 	background-color: black;
 	display: flex;
@@ -41,6 +48,10 @@ hr {
 	width: 500px;
 }
 
+.drawer-content-vertical {
+	width: rem(400);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;