@public-ui/sample-react 2.1.9 → 2.2.0

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.19.2
+ * @remix-run/router v1.20.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.26.2
+ * React Router v6.27.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -11,34 +11,34 @@
     "@leanup/stack": "1.3.54",
     "@leanup/stack-react": "1.3.54",
     "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.47.2",
+    "@playwright/test": "1.48.2",
     "@types/node": "ts5.6",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.5-rc.4",
+    "adopted-style-sheets": "1.1.6-rc.6",
     "ajv": "8.17.1",
-    "chromedriver": "129.0.0",
+    "chromedriver": "130.0.1",
     "cpy-cli": "5.0.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
     "formik": "2.4.6",
     "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-number-format": "5.4.2",
-    "react-router": "6.26.2",
-    "react-router-dom": "6.26.2",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
     "rimraf": "6.0.1",
     "ts-prune": "0.10.3",
-    "typescript": "5.6.2",
+    "typescript": "5.6.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.9",
-    "@public-ui/themes": "2.1.9",
-    "@public-ui/react": "2.1.9"
+    "@public-ui/components": "2.2.0",
+    "@public-ui/themes": "2.2.0",
+    "@public-ui/react": "2.2.0"
   },
   "files": [
     ".eslintignore",
@@ -64,7 +64,8 @@
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
     "start": "npm run serve -- --open",
     "unused": "ts-prune -e src",
-    "e2e": "playwright test",
+    "test:e2e": "playwright test",
+    "test": "pnpm test:e2e",
     "postinstall": "pnpm exec playwright install"
   }
 }

package/src/components/button/expert-slot.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import React from 'react';
+import { ButtonVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonExpertSlot: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolButton show a button-element with expert slot.</p>
+		</SampleDescription>
+
+		<ButtonVariants _label="">
+			<span slot="expert">I am more than just a button</span>
+		</ButtonVariants>
+	</>
+);

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

@@ -1,10 +1,11 @@
-import React from 'react';
+import * as React from 'react';
 
 import { KolButton } from '@public-ui/react';
-import type { Components } from '@public-ui/components';
 import { useToasterService } from '../../../hooks/useToasterService';
+import type { ButtonSampleProps } from './type';
 
-export const ButtonCases = function ButtonCases(props: Partial<Components.KolButton>) {
+export const ButtonCases: React.FC<ButtonSampleProps> = (props) => {
+	const { children, ...other } = props;
 	const { dummyClickEventHandler } = useToasterService();
 
 	const dummyEventHandler = {
@@ -13,12 +14,24 @@ export const ButtonCases = function ButtonCases(props: Partial<Components.KolBut
 
 	return (
 		<div className="flex flex-wrap gap-4">
-			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-			<KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
-			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler}></KolButton>
-			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-			<KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
+			<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
+			<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
+			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
+			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
+			<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
+			<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} {...other}>
+				{children}
+			</KolButton>
 		</div>
 	);
 };

package/src/components/button/partials/type.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import type { Components } from '@public-ui/components';
+
+export type ButtonSampleProps = PropsWithChildren<Partial<Components.KolButton>>;

package/src/components/button/partials/variants.tsx

@@ -2,21 +2,22 @@ import React from 'react';
 
 import { ButtonCases } from './cases';
 import { KolHeading } from '@public-ui/react';
-import type { Components } from '@public-ui/components';
+import type { ButtonSampleProps } from './type';
 
-export const ButtonVariants = function ButtonVariant() {
-	const examples: { label: string; buttonProps: Partial<Components.KolButton> }[] = [
-		{ label: 'Button', buttonProps: {} },
-		{ label: 'Button (disabled)', buttonProps: { _disabled: true } },
-		{ label: 'Button (hideLabel)', buttonProps: { _hideLabel: true } },
-		{ label: 'Button (disabled, hideLabel)', buttonProps: { _disabled: true, _hideLabel: true } },
+export const ButtonVariants: React.FC<ButtonSampleProps> = (props = {}) => {
+	const examples: { label: string; buttonProps: ButtonSampleProps }[] = [
+		{ label: 'Button', buttonProps: props },
+		{ label: 'Button (disabled)', buttonProps: { ...props, _disabled: true } },
+		{ label: 'Button (hideLabel)', buttonProps: { ...props, _hideLabel: true } },
+		{ label: 'Button (disabled, hideLabel)', buttonProps: { ...props, _disabled: true, _hideLabel: true } },
 	];
+
 	return (
 		<div className="grid gap-8">
 			{examples.map(({ label, buttonProps }, index) => (
 				<section key={index} className="grid gap-4">
 					<KolHeading _level={2} _label={label} />
-					<ButtonCases {...buttonProps} />
+					<ButtonCases {...buttonProps}></ButtonCases>
 				</section>
 			))}
 		</div>

package/src/components/button/routes.ts

@@ -5,6 +5,8 @@ import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
 import { ButtonIcons } from './icons';
 import { ButtonWidth } from './width';
+import { ButtonShortKey } from './short-key';
+import { ButtonExpertSlot } from './expert-slot';
 
 export const BUTTON_ROUTES: Routes = {
 	button: {
@@ -14,5 +16,7 @@ export const BUTTON_ROUTES: Routes = {
 		'access-key': ButtonAccessKey,
 		'aria-description': ButtonAriaDescription,
 		baselined: ButtonBaselined,
+		'short-key': ButtonShortKey,
+		'expert-slot': ButtonExpertSlot,
 	},
 };

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

@@ -0,0 +1,38 @@
+import { KolButton } from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
+
+export const ButtonShortKey: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	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.{' '}
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-wrap gap-4">
+				<KolButton _label="With S short key" _shortKey="S" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Very small s" _shortKey="s" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Short key does not appear in label" _shortKey="x" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="short key without label" _hideLabel _shortKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
+				<KolButton
+					_label="with inline icons"
+					_icons={{
+						left: 'codicon codicon-dashboard',
+						right: 'codicon codicon-dashboard',
+					}}
+					_shortKey="s"
+				/>
+			</div>
+		</>
+	);
+};

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

@@ -4,33 +4,47 @@ import { KolButtonLink } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonLinkBasic: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				KolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different display-properties
-				such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
-			</p>
-		</SampleDescription>
-		<section className="text-base">
-			<p>
-				In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
-				<strong>inline element</strong>.
-			</p>
-			<p>
-				In this paragraph, a link is inserted that is rendered as an inline-block element.
-				<KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
-				height, and other properties to it using CSS styles.
-				<br />
-				<br />
-				After that, there is a link that is rendered as a block element.
-				<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
-				Therefore, I go over the entire width of the parent element to create a line break.
-			</p>
-			<p>
-				<KolButtonLink _label="Disabled ButtonLink" _disabled />
-			</p>
-		</section>
-	</>
-);
+export const ButtonLinkBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					KolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different
+					display-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
+				</p>
+			</SampleDescription>
+			<section className="text-base">
+				<p>
+					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
+					<strong>inline element</strong>.
+				</p>
+				<p>
+					In this paragraph, a link is inserted that is rendered as an inline-block element.
+					<KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
+					height, and other properties to it using CSS styles.
+					<br />
+					<br />
+					After that, there is a link that is rendered as a block element.
+					<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
+					Therefore, I go over the entire width of the parent element to create a line break.
+				</p>
+				<p>
+					<KolButtonLink _label="Disabled ButtonLink" _disabled />
+				</p>
+				<p>
+					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} />
+				</p>
+				<p>
+					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" />
+				</p>
+			</section>
+		</>
+	);
+};

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

@@ -20,6 +20,8 @@ export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 				_placeholder="Placeholder"
 				_required
 			/>
+			<KolCombobox {...props} _label="With access key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _accessKey="c" />
+			<KolCombobox {...props} _label="With short key" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _shortKey="s" />
 		</div>
 	);
 };

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

@@ -22,6 +22,8 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
 			<KolInputCheckbox {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="With error" _touched _value={true} _hint="Hint text" />
+			<KolInputCheckbox {...props} _label="With access key" _accessKey="c" _value={null}></KolInputCheckbox>
+			<KolInputCheckbox {...props} _label="With short key" _shortKey="s" _value={null}></KolInputCheckbox>
 		</div>
 	);
 });

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

@@ -28,6 +28,8 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 			/>
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
+			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>
+			<KolInputColor {...props} _label="With short key" _shortKey="s"></KolInputColor>
 		</div>
 	);
 });

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

@@ -27,6 +27,8 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 			<KolInputDate {...props} _step={1} _type="time" _label="Time (with seconds)" _required />
 			<KolInputDate {...props} _readOnly _label="Date input (read-only)" _required />
 			<KolInputDate {...props} _disabled _label="Date input (Disabled)" _required />
+			<KolInputDate {...props} _label="With access key" _accessKey="s" />
+			<KolInputDate {...props} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

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

@@ -31,6 +31,8 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 			/>
 			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
 			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
+			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />
+			<KolInputEmail {...props} _value="test@mail.de" _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

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

@@ -34,6 +34,8 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			/>
 			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
+			<KolInputFile {...props} _label="With access key" _accessKey="c" />
+			<KolInputFile {...props} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

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

@@ -34,6 +34,8 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Number input (-10 to 10 in steps of 2)" />
 			<KolInputNumber {...props} _readOnly _label="Number input (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Number input (Disabled)" />
+			<KolInputNumber {...props} _label="With access key" _accessKey="c" />
+			<KolInputNumber {...props} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

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

@@ -31,6 +31,8 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				}}
 				_touched
 			/>
+			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />
+			<KolInputPassword {...props} ref={ref} _shortKey="s" _label="With short key" />
 		</div>
 	);
 });

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

@@ -68,6 +68,18 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_label="Salutation (horizontal with error hint and description)"
 				_hint={HINT_MSG}
 			/>
+			<KolInputRadio
+				{...props}
+				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
+				_label="With access key"
+				_accessKey="c"
+			/>
+			<KolInputRadio
+				{...props}
+				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
+				_label="With short key"
+				_shortKey="s"
+			/>
 		</div>
 	);
 });

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

@@ -38,6 +38,8 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_touched
 			/>
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
+			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
+			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

package/src/components/input-text/expert-slot.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolInputText } from '@public-ui/react';
+
+export const InputTextExpertSlot = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample show KolInputText with expert slot.</p>
+			</SampleDescription>
+
+			<KolInputText _label="" _type="text">
+				<span slot="expert">I am more than just a input field</span>
+			</KolInputText>
+		</>
+	);
+};

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

@@ -46,6 +46,9 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />
 			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
+			<KolInputText {...props} _value="Value" _label="With access key" _accessKey="c" />
+			<KolInputText {...props} _value="Value" _label="With short key" _shortKey="s" />
+			<KolInputText {...props} _value="Value" _label="With both key" _shortKey="d" _accessKey="e" />
 		</div>
 	);
 });

package/src/components/input-text/routes.ts

@@ -3,6 +3,7 @@ import { InputTextBasic } from './basic';
 import { InputTextHideErrors } from './hide-errors';
 import { InputTextFormatterDemo } from './text-formatter';
 import { InputTextSmartButton } from './smart-button';
+import { InputTextExpertSlot } from './expert-slot';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
@@ -10,5 +11,6 @@ export const INPUT_TEXT_ROUTES: Routes = {
 		'hide-errors': InputTextHideErrors,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
+		'expert-slot': InputTextExpertSlot,
 	},
 };

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

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolLink } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkAccessKey: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="With S access key" _accessKey="S" />
+			<KolLink _href="#/back-page" _label="Very small s" _accessKey="s" />
+			<KolLink _href="#/back-page" _label="Access key does not appear in label" _accessKey="s" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="access key without label" _accessKey="s" />
+		</div>
+	</>
+);

package/src/components/link/icons.tsx

@@ -44,6 +44,43 @@ export const LinkIcons: FC = () => (
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
+
+			<KolLink _icons="codicon codicon-home" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink
+				_icons={{
+					right: 'codicon codicon-home',
+				}}
+				_href="https://public-ui.github.io/"
+				_label="I am a external linkwith an icon on the right"
+				_target="_blank"
+			/>
+			<KolLink
+				_icons={{
+					top: 'codicon codicon-home',
+				}}
+				_href="https://public-ui.github.io/"
+				_label="I am a external link with an icon at the top"
+				_target="_blank"
+			/>
+			<KolLink
+				_icons={{
+					bottom: 'codicon codicon-home',
+				}}
+				_href="https://public-ui.github.io/"
+				_label="I am a external link with icon below"
+				_target="_blank"
+			/>
+			<KolLink
+				_href="https://public-ui.github.io/"
+				_label="I am a external link with all icons"
+				_target="_blank"
+				_icons={{
+					top: 'codicon codicon-home',
+					right: 'codicon codicon-home',
+					bottom: 'codicon codicon-home',
+					left: 'codicon codicon-home',
+				}}
+			/>
 		</div>
 	</>
 );

package/src/components/link/routes.ts

@@ -4,6 +4,8 @@ import { LinkIcons } from './icons';
 import { LinkImage } from './image';
 import { LinkTarget } from './target';
 import { LinkAriaDescription } from './aria-description';
+import { LinkAccessKey } from './access-key';
+import { LinkShortKey } from './short-key';
 
 export const LINK_ROUTES: Routes = {
 	link: {
@@ -12,5 +14,7 @@ export const LINK_ROUTES: Routes = {
 		image: LinkImage,
 		target: LinkTarget,
 		'aria-description': LinkAriaDescription,
+		'access-key': LinkAccessKey,
+		'short-key': LinkShortKey,
 	},
 };

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

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolLink } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+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.{' '}
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
+			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
+			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="short key without label" _shortKey="s" />
+		</div>
+	</>
+);

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

@@ -22,6 +22,8 @@ export const LinkButtonBasic: FC = () => (
 				<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>
 	</>

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

@@ -57,6 +57,8 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 			/>
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });

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

@@ -34,6 +34,8 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 				_placeholder="Placeholder"
 				_required
 			/>
+			<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" />
 		</div>
 	);
 });

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

@@ -14,6 +14,8 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
 			<KolTextarea {...props} ref={ref} _label="Text (readonly)" _rows={3} _placeholder="Placeholder" _readOnly />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
+			<KolTextarea {...props} ref={ref} _label="With access key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _accessKey="c" />
+			<KolTextarea {...props} ref={ref} _label="With short key" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _shortKey="s" />
 		</div>
 	);
 });