@public-ui/sample-react 2.1.8 → 2.1.9

package/src/components/tabs/routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '../../shares/types';
 import { TabsBasic } from './basic';
+import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
 
@@ -8,5 +9,6 @@ export const TABS_ROUTES: Routes = {
 		basic: TabsBasic,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
+		align: TabsAlign,
 	},
 };

package/src/components/toast/basic.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
+import type { AlertType, AlertVariant } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -9,6 +11,9 @@ import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';
 
 export const ToastBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const defaultType = searchParams.get('type') as AlertType;
+	const defaultVariant = searchParams.get('variant') as AlertVariant;
 	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
@@ -23,10 +28,34 @@ export const ToastBasic: FC = () => {
 			description: 'Toasty',
 			label: `Toast with variant 'msg'`,
 			type: 'warning',
-			alertVariant: 'msg',
+			variant: 'msg',
 		});
 	};
 
+	useEffect(() => {
+		if (defaultType && defaultVariant) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Toast with variant 'msg'`,
+				type: defaultType,
+				variant: defaultVariant,
+			});
+		} else if (defaultType) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Initial Toast`,
+				type: defaultType,
+			});
+		} else if (defaultVariant) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Initial Toast`,
+				type: 'default',
+				variant: defaultVariant,
+			});
+		}
+	}, [defaultType, defaultVariant]);
+
 	const handleButtonClickComplex = () => {
 		void toaster.enqueue({
 			render: (element: HTMLElement, { close }) => {

package/src/hooks/useToasterService.ts

@@ -3,9 +3,9 @@ import { ToasterService } from '@public-ui/components';
 export function useToasterService() {
 	const toaster = ToasterService.getInstance(document);
 
-	const message = () => {
+	const message = (message?: string) => {
 		void toaster.enqueue({
-			description: 'Hello',
+			description: message || 'Hello',
 			label: `Hello`,
 			type: 'info',
 		});
@@ -15,7 +15,13 @@ export function useToasterService() {
 		message();
 	};
 
+	const buttonWithTextClickEventHandler = (e: Event) => {
+		const text = (e.currentTarget as { textContent?: string }).textContent;
+		message(text);
+	};
+
 	return {
 		dummyClickEventHandler,
+		buttonWithTextClickEventHandler,
 	};
 }

package/src/scenarios/change-tabindex.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
+
+import { SampleDescription } from '../components/SampleDescription';
+import {
+	KolButton,
+	KolButtonLink,
+	KolCard,
+	KolCombobox,
+	KolInputCheckbox,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputColor,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolLink,
+	KolSingleSelect,
+	KolSplitButton,
+	KolTextarea,
+} from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { ERROR_MSG, HINT_MSG } from '../shares/constants';
+import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
+import type { Option, StencilUnknown } from '@public-ui/components';
+
+export const ChangeTabindex: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example show how different components works with tabIndex.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolButton _label="Button 4, Tabindex 1" _variant="primary" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolButtonLink _label="ButtonLink 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="Combobox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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
+							_touched
+							_hint={HINT_MSG}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_label="Combobox 3, Tabindex 2"
+							_suggestions={COUNTRY_SUGGESTIONS}
+							_value={'Deutschland'}
+							tabIndex={2}
+						/>
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 4, Tabindex 1" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputCheckbox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputCheckbox _label="InputCheckbox 1, Tabindex 4" _value={false} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputColor" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputColor _value="#f08080" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputDate" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputDate
+							_touched
+							_type="datetime-local"
+							_label="InputCheckbox 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputEmail" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputEmail _label="InputEmail 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputFile" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputFile _label="InputFile 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputNumber" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputNumber _label="InputNumber 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputPassword" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputPassword _label="InputPassword 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRadio" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 1, Tabindex 4"
+							tabIndex={4}
+						/>
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 2, Tabindex 3"
+							_disabled
+							tabIndex={3}
+						/>
+						<KolInputRadio
+							_touched
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>{' '}
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 4, Tabindex 1"
+							tabIndex={1}
+						/>
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRange" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputRange _label="InputRange 4, Tabindex 1" _min={0} _max={50} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputText" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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} />
+						<KolInputText _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 4, Tabindex 1" _variant="primary" tabIndex={1}></KolLinkButton>
+					</div>
+				</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} />
+				</KolCard>
+
+				<KolCard _label="SingleSelect" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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
+							_touched
+							_label="InputText 3, Tabindex 2"
+							_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_value={'de'}
+							tabIndex={2}
+						/>
+						<KolSingleSelect _label="InputText 4, Tabindex 1" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="SplitButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 2, Tabindex 3" tabIndex={3} _disabled>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
+							Dropdown-Inhalt
+						</KolSplitButton>{' '}
+						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Textarea" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<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
+							_touched
+							_label="Textarea 3, Tabindex 2"
+							_rows={3}
+							_placeholder="Placeholder"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolTextarea _label="Textarea 4, Tabindex 1" _rows={3} _placeholder="Placeholder" tabIndex={1} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/scenarios/focus-elements.tsx

@@ -94,16 +94,24 @@ const getFocusElements = () => {
 	));
 	focusElements.set('textarea', (_, ref) => <KolTextarea className="w-full" _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
 	focusElements.set('accordion', (_, ref) => <KolAccordion className="w-full" _label="Accordion here" ref={ref} />);
-	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);
-	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref}></KolButtonLink>);
-	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
+	focusElements.set('button', (_, ref) => (
+		<div>
+			<KolButton _label="Button here" ref={ref} />
+		</div>
+	));
+	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref} />);
+	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref} />);
 	focusElements.set('details', (_, ref) => (
 		<KolDetails className="w-full" _label="Details here" ref={ref}>
 			detailed details
 		</KolDetails>
 	));
-	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref}></KolLink>);
-	focusElements.set('linkButton', (_, ref) => <KolLinkButton _label="LinkButton here" _href="#" ref={ref}></KolLinkButton>);
+	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref} />);
+	focusElements.set('linkButton', (_, ref) => (
+		<div>
+			<KolLinkButton _label="LinkButton here" _href="#" ref={ref} />
+		</div>
+	));
 
 	return focusElements;
 };
@@ -134,7 +142,7 @@ const Fallback = (props: FallbackProps) => {
 			<ul>
 				{componentNames.map((componentName) => (
 					<li key={componentName}>
-						<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`}></KolLink>
+						<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />
 					</li>
 				))}
 			</ul>

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -60,17 +60,21 @@ function TableHorizontalScrollbarAdvanced() {
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />
 				</aside>
 				<div className="content">
-					<KolTabs _tabs={TABS} _label="Demo Tabs"></KolTabs>
-					<div style={{ overflow: 'hidden' }}>
-						<KolTable
-							_label="Table for demonstration purposes with horizontal scrollbar"
-							_minWidth={tableWith}
-							_headers={HEADERS}
-							_data={DATA}
-							_pagination={{ _page: 1 }}
-							className="block"
-						/>
-					</div>
+					<KolTabs _tabs={TABS} _align="top" _label="Demo Tabs">
+						<div style={{ overflow: 'hidden' }}>
+							<KolTable
+								_label="Table for demonstration purposes with horizontal scrollbar"
+								_minWidth={tableWith}
+								_headers={HEADERS}
+								_data={DATA}
+								_pagination={{ _page: 1 }}
+								className="block"
+							/>
+						</div>
+						<div></div>
+						<div></div>
+						<div></div>
+					</KolTabs>
 				</div>
 			</div>
 		</>

package/src/scenarios/input-group-with-error.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { FC } from 'react';
-import { KolAlert, KolInputCheckbox, KolInputText } from '@public-ui/react';
+import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
+import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;
@@ -10,6 +11,25 @@ export const InputGroupWithError: FC = () => {
 	const pizzaErrorMessage = 'Choose at least two and up to five toppings.';
 	const pizzaToppings = ['Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Spinach', 'Tomatoes', 'Artichokes', 'Zucchini', 'Jalapeños', 'Basil'];
 
+	const countryCodes: SelectOption<string>[] = [
+		{
+			label: 'United States +1',
+			value: '1',
+		},
+		{
+			label: 'Greece +30 ',
+			value: '30',
+		},
+		{
+			label: 'Germany +49',
+			value: '49',
+		},
+		{
+			label: 'Japan +81',
+			value: '81',
+		},
+	];
+
 	return (
 		<>
 			<SampleDescription>
@@ -22,7 +42,7 @@ export const InputGroupWithError: FC = () => {
 				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
 
 				<div className="grid grid-cols-3 gap-4 max-w-2xl">
-					<KolInputText _label="Country code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
 				</div>

package/src/scenarios/inputs-get-value.tsx

@@ -70,18 +70,20 @@ const Scenario = (props: Props) => {
 	);
 
 	return (
-		<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
-			<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
-			<KolButton
-				_label="getValue()"
-				_on={{
-					onClick: () => {
-						void handleButtonClick();
-					},
-				}}
-			></KolButton>
-			<pre className="text-base">{formatter(value)}</pre>
-		</div>
+		<>
+			<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
+				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
+				<KolButton
+					_label="getValue()"
+					_on={{
+						onClick: () => {
+							void handleButtonClick();
+						},
+					}}
+				></KolButton>
+				<pre className="text-base">{formatter(value)}</pre>
+			</div>
+		</>
 	);
 };
 

package/src/scenarios/routes.ts

@@ -7,6 +7,7 @@ import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
+import { ChangeTabindex } from './change-tabindex';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -18,5 +19,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'inputs-get-value': InputsGetValue,
 		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
+		'change-tabindex': ChangeTabindex,
 	},
 };

package/src/style.scss

@@ -21,16 +21,32 @@ hr {
 	grid-template-columns: auto auto;
 }
 
+.indented-text {
+	p {
+		font-family: var(--font-family);
+		border-left: rem(-2) solid var(--color-primary-variant);
+		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
+		margin-left: rem(-2);
+	}
+}
+
+.black-background {
+	background-color: black;
+	display: flex;
+	flex-direction: column;
+	padding: rem(8);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: 360px calc(100% - 360px);
+		grid-template-columns: rem(360) calc(100% - rem(360));
 		min-height: 100vh;
 		height: 100%;
 	}
 
 	.app-sidebar {
-		border-right: 1px solid gray;
+		border-right: rem(1) solid gray;
 		position: relative;
 
 		& .scrollable-container-wrapper {
@@ -38,7 +54,7 @@ hr {
 			top: 0;
 			bottom: 0;
 			left: 0;
-			width: 330px;
+			width: rem(330);
 			margin: rem(16);
 			flex-direction: column;
 			display: flex;
@@ -47,7 +63,7 @@ hr {
 				flex: 1 auto;
 				overflow: auto;
 			}
-		} 
+		}
 	}
 }
 
@@ -57,4 +73,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/dist/1487.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1487.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1487],{3260:(t,n,e)=>{e.d(n,{S:()=>s,a:()=>o,b:()=>i,i:()=>a});const i=t=>"object"==typeof t&&null!==t,a=(t,n=0)=>"string"==typeof t&&t.length>=n,o=t=>{if("object"!=typeof t||null===t)return a(t,1);for(const n in t)if(!1===a(n,1))return!1;return!0},s=new Event("StateChange")},6855:(t,n,e)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function a(t,n,e){n&&function(t,n,e){const i=t.dispatchEvent(function(t,n){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:n})}(n,e))}(n,t,e)}function o(t){t.preventDefault(),i(t)}e.d(n,{p:()=>o,s:()=>i,t:()=>a})},1036:(t,n,e)=>{e.d(n,{E:()=>d,a:()=>r,b:()=>h,c:()=>s,d:()=>o,v:()=>l});var i=e(7440),a=e(3260);const o=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),n)},s=(t,n)=>{(0,i.w)(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),n)},l=(t,n,e)=>{(0,i.t)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_data",n,e)}))}))},r=(t,n,e)=>{(0,i.t)(n,(()=>{(0,i.o)(n,(()=>{void 0===n&&(n=[]);try{n=(0,i.p)(n)}catch(t){}Array.isArray(n)&&n.every((t=>"object"==typeof t&&null!==t))&&(0,i.s)(t,"_dataFoot",n,e)}))}))},h=(t,n)=>{var e;(e="string"==typeof n?(()=>{try{return(0,i.p)(n)}catch(t){return}})():n)&&(0,a.b)(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys))&&(0,i.s)(t,"_selection",n)};var d,c;(c=d||(d={})).onBlur="onBlur",c.onChange="onChange",c.onClick="onClick",c.onDblClick="onDblClick",c.onFocus="onFocus",c.onInput="onInput",c.onKeyDown="onKeyDown",c.onKeyPress="onKeyPress",c.onKeyUp="onKeyUp",c.onMouseDown="onMouseDown",c.onMouseMove="onMouseMove",c.onMouseOut="onMouseOut",c.onMouseOver="onMouseOver",c.onMouseUp="onMouseUp",c.onReset="onReset",c.onSelect="onSelect",c.onSort="onSort",c.onSelectionChange="onSelectionChange",c.onSubmit="onSubmit",c.onClose="onClose"},6588:(t,n,e)=>{e.d(n,{t:()=>o});var i=e(8457),a=e(4997);let o=(t,n)=>{var e;return(null!==(e=(0,i.g)())&&void 0!==e?e:(0,i.i)("de")).translate(t,n)};"test"===a.p&&(o=t=>t)},1487:(t,n,e)=>{e.r(n),e.d(n,{kol_table_stateful:()=>p});var i=e(777),a=e(6588),o=e(8579),s=e(6855),l=e(1036),r=e(7440),h=e(5815);const d=["top","bottom","both"],c=[10,20,50,100],u=t=>!0===t||""===t||"object"==typeof t&&null!==t,p=class{constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),(0,r.s)(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),(0,r.s)(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void(0,r.s)(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}(0,r.s)(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){(0,r.w)(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){(0,l.v)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){(0,l.a)(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){((t,n)=>{(0,r.w)(t,"_paginationPosition",(t=>"string"==typeof t&&d.includes(t)),new Set([`PaginationPositionPropType {${d.join(", ")}`]),n,{defaultValue:"bottom"})})(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){(0,r.t)(t,(()=>{(0,r.o)(t,(()=>{try{t=(0,r.p)(t)}catch(t){}(0,r.w)(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(e=s.vertical)||void 0===e||e.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,(0,r.j)("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){(0,h.v)(this,t,{required:!0})}validateMinWidth(t){(0,r.i)(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){(0,l.b)(this,t)}validateOn(t){(0,l.c)(this,t)}validatePagination(t){try{t=(0,r.p)(t)}catch(t){}this.showPagination=u(t),(0,r.w)(this,"_pagination",u,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return(0,i.h)("div",{class:"pagination"},(0,i.h)("span",null,(0,a.t)("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),(0,i.h)("div",null,(0,i.h)(o.u,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:(0,a.t)("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);(0,s.t)("selection-change",this.host,a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[l.E.onSelectionChange])&&this.state._on[l.E.onSelectionChange](t,a)}getSelection(){return t=this,n=function*(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)},new Promise(((e,i)=>{var a=t=>{try{s(n.next(t))}catch(t){i(t)}},o=t=>{try{s(n.throw(t))}catch(t){i(t)}},s=t=>t.done?e(t.value):Promise.resolve(t.value).then(a,o);s((n=n.apply(t,null)).next())}));var t,n}render(){var t,n,e,a;const s=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),l="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(a=this.state._headers.vertical)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return(0,i.h)(i.H,{key:"06dd5f12e9182fe2db630dcdd0f2645d4867b8e5",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&l,(0,i.h)(o.t,{key:"565eef88ba587eb4aa76b629c01c1d9e1ccf5d98",ref:this.catchRef,_data:s,_headerCells:h,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return(0,i.g)(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :root {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  div.pagination .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination .kol-pagination {\n      display: flex;\n    }\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 24px;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background: selectedItem !important;\n    }\n  }\n}"}},5815:(t,n,e)=>{e.d(n,{a:()=>c,b:()=>l,c:()=>r,h:()=>a,v:()=>d});var i=e(7440);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,s=/^\d+$/;function l(t,n=1){return function(t){var n;return"string"==typeof t&&(null===(n=t.match(o))||void 0===n?void 0:n.length)||0}(t)>=n}function r(t){return s.test(t)}const h=new Set(["string"]),d=(t,n,e={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),h,n,function(t){var n;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(n,e,a,o)=>{var s,h;"function"==typeof(null===(s=t.hooks)||void 0===s?void 0:s.afterPatch)&&(null===(h=t.hooks)||void 0===h||h.afterPatch(n,e,a,o)),"string"==typeof n&&!1===l(n,3)&&!1===r(n)&&(0,i.a)(`The heading or label ("${n}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof n&&n.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(n=t.hooks)||void 0===n?void 0:n.beforePatch}})}(e))},c=d},4997:(t,n,e)=>{e.d(n,{h:()=>a,p:()=>i,s:()=>o});let i="development";try{i="production"}catch(t){i="production"}const a=(t,n,e)=>{if(t&&n&&"string"==typeof e){const i=t.querySelector(`[slot="${e}"]`);i&&n.appendChild(i)}},o=t=>""===t}}]);