diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts
index 393a1ed15d..272b5d10dc 100644
--- a/packages/components/src/components/@deprecated/input/controller.ts
+++ b/packages/components/src/components/@deprecated/input/controller.ts
@@ -1,12 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
 
 import type {
+	AccessKeyPropType,
 	AdjustHeightPropType,
 	ButtonProps,
 	HideErrorPropType,
 	InputTypeOnDefault,
 	LabelWithExpertSlotPropType,
 	MsgPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	TooltipAlignPropType,
@@ -18,6 +20,7 @@ import {
 	objectObjectHandler,
 	parseJson,
 	setState,
+	validateAccessKey,
 	validateAdjustHeight,
 	validateHideError,
 	validateHideLabel,
@@ -27,6 +30,7 @@ import {
 	validateTooltipAlign,
 	watchBoolean,
 	watchString,
+	validateShortKey,
 } from '../../../schema';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';
@@ -34,6 +38,7 @@ import { ControlledInputController } from '../../input-adapter-leanup/controller
 
 import type { Props as AdapterProps } from '../../input-adapter-leanup/types';
 import type { Props, Watches } from './types';
+import { validateAccessAndShortKey } from '../../../schema/validators/access-and-short-key';
 
 type ValueChangeListener = (value: StencilUnknown) => void;
 
@@ -47,8 +52,9 @@ export class InputController extends ControlledInputController implements Watche
 		this.component = component;
 	}
 
-	public validateAccessKey(value?: string): void {
-		watchString(this.component, '_accessKey', value);
+	public validateAccessKey(value?: AccessKeyPropType): void {
+		validateAccessKey(this.component, value);
+		validateAccessAndShortKey(value, this.component._shortKey);
 	}
 
 	public validateAdjustHeight(value?: AdjustHeightPropType): void {
@@ -127,6 +133,11 @@ export class InputController extends ControlledInputController implements Watche
 		}
 	}
 
+	public validateShortKey(value?: ShortKeyPropType): void {
+		validateShortKey(this.component, value);
+		validateAccessAndShortKey(this.component._accessKey, value);
+	}
+
 	public validateSmartButton(value?: ButtonProps | string): void {
 		objectObjectHandler(value, () => {
 			try {
@@ -155,9 +166,11 @@ export class InputController extends ControlledInputController implements Watche
 		this.validateHint(this.component._hint);
 		this.validateId(this.component._id);
 		this.validateLabel(this.component._label);
+		this.validateShortKey(this.component._shortKey);
 		this.validateSmartButton(this.component._smartButton);
 		this.validateOn(this.component._on);
 		this.validateTabIndex(this.component._tabIndex);
+		validateAccessAndShortKey(this.component._accessKey, this.component._shortKey);
 	}
 
 	protected onBlur(event: Event): void {
diff --git a/packages/components/src/components/@deprecated/input/types.ts b/packages/components/src/components/@deprecated/input/types.ts
index a0d69b2cef..a877e7ab11 100644
--- a/packages/components/src/components/@deprecated/input/types.ts
+++ b/packages/components/src/components/@deprecated/input/types.ts
@@ -1,9 +1,9 @@
-import type { ButtonProps, InputTypeOnDefault, MsgPropType, PropLabelWithExpertSlot, Stringified } from '../../../schema';
+import type { AccessKeyPropType, ButtonProps, InputTypeOnDefault, MsgPropType, PropLabelWithExpertSlot, ShortKeyPropType, Stringified } from '../../../schema';
 import type { Generic } from 'adopted-style-sheets';
 
 type RequiredProps = NonNullable<unknown>;
 type OptionalProps = PropLabelWithExpertSlot & {
-	accessKey: string;
+	accessKey: AccessKeyPropType;
 	adjustHeight: boolean;
 	disabled: boolean;
 	error: string;
@@ -13,6 +13,7 @@ type OptionalProps = PropLabelWithExpertSlot & {
 	id: string;
 	msg: MsgPropType;
 	on: InputTypeOnDefault;
+	shortKey: ShortKeyPropType;
 	smartButton: Stringified<ButtonProps>;
 	syncValueBySelector: string;
 	tabIndex: number;
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
index 821babaec7..ab7e35d598 100644
--- a/packages/components/src/components/button-link/shadow.tsx
+++ b/packages/components/src/components/button-link/shadow.tsx
@@ -10,6 +10,7 @@ import type {
 	IdPropType,
 	LabelWithExpertSlotPropType,
 	NamePropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -72,6 +73,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 					_name={this._name}
 					_on={this._on}
 					_role="link"
+					_shortKey={this._shortKey}
 					_syncValueBySelector={this._syncValueBySelector}
 					_tabIndex={this._tabIndex}
 					_tooltipAlign={this._tooltipAlign}
@@ -154,6 +156,11 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index 1bc2d5d9cf..2a0b68393c 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -12,6 +12,7 @@ import type {
 	FocusableElement,
 	IconsPropType,
 	LabelWithExpertSlotPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -37,6 +38,7 @@ import {
 	validateHideLabel,
 	validateIcons,
 	validateLabelWithExpertSlot,
+	validateShortKey,
 	validateTabIndex,
 	validateTooltipAlign,
 	watchString,
@@ -49,6 +51,7 @@ import { nonce } from '../../utils/dev.utils';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
 import { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';
+import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';
 
 /**
  * @internal
@@ -134,7 +137,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 				>
 					<KolSpanWcTag
 						class="button-inner"
-						_accessKey={this.state._accessKey}
+						_badgeText={this.state._accessKey || this.state._shortKey}
 						_icons={this.state._icons}
 						_hideLabel={this.state._hideLabel}
 						_label={hasExpertSlot ? '' : this.state._label}
@@ -149,7 +152,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 					 */
 					aria-hidden="true"
 					hidden={hasExpertSlot || !this.state._hideLabel}
-					_accessKey={this._accessKey}
+					_badgeText={this.state._accessKey || this.state._shortKey}
 					_align={this.state._tooltipAlign}
 					_label={typeof this.state._label === 'string' ? this.state._label : ''}
 				></KolTooltipWcTag>
@@ -236,6 +239,11 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -282,6 +290,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 	@Watch('_accessKey')
 	public validateAccessKey(value?: AccessKeyPropType): void {
 		validateAccessKey(this, value);
+		validateAccessAndShortKey(value, this._shortKey);
 	}
 
 	@Watch('_ariaControls')
@@ -351,6 +360,12 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 		validateAlternativeButtonLinkRole(this, value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		validateShortKey(this, value);
+		validateAccessAndShortKey(this._accessKey, value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
@@ -397,11 +412,13 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 		this.validateName(this._name);
 		this.validateOn(this._on);
 		this.validateRole(this._role);
+		this.validateShortKey(this._shortKey);
 		this.validateSyncValueBySelector(this._syncValueBySelector);
 		this.validateTabIndex(this._tabIndex);
 		this.validateTooltipAlign(this._tooltipAlign);
 		this.validateType(this._type);
 		this.validateValue(this._value);
 		this.validateVariant(this._variant);
+		validateAccessAndShortKey(this._accessKey, this._shortKey);
 	}
 }
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index a44188659b..9de66e130f 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -10,6 +10,7 @@ import type {
 	FocusableElement,
 	IconsPropType,
 	LabelWithExpertSlotPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -78,6 +79,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 					_name={this._name}
 					_on={this._on}
 					_role={this._role}
+					_shortKey={this._shortKey}
 					_syncValueBySelector={this._syncValueBySelector}
 					_tabIndex={this._tabIndex}
 					_tooltipAlign={this._tooltipAlign}
@@ -163,6 +165,11 @@ export class KolButton implements ButtonProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Defines the elements short key.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
index 21f54ca389..80ba269bf2 100644
--- a/packages/components/src/components/combobox/shadow.tsx
+++ b/packages/components/src/components/combobox/shadow.tsx
@@ -8,13 +8,14 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 	W3CInputValue,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
@@ -22,7 +23,7 @@ import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { ComboboxController } from './controller';
 import { KolIconTag, KolInputTag } from '../../core/component-names';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { getRenderStates } from '../input/controller';
 import { translate } from '../../i18n';
 import clsx from 'clsx';
@@ -166,6 +167,7 @@ export class KolCombobox implements ComboboxAPI {
 						_label={this.state._label}
 						_msg={this.state._msg}
 						_required={this.state._required}
+						_shortKey={this.state._shortKey}
 						_tooltipAlign={this._tooltipAlign}
 						_touched={this.state._touched}
 						onClick={() => this.refInput?.focus()}
@@ -174,11 +176,11 @@ export class KolCombobox implements ComboboxAPI {
 						<span slot="label">
 							{hasExpertSlot ? (
 								<slot name="expert"></slot>
-							) : typeof this.state._accessKey === 'string' ? (
+							) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 								<>
-									<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+									<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 									<span class="access-key-hint" aria-hidden="true">
-										{this.state._accessKey}
+										{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 									</span>
 								</>
 							) : (
@@ -445,6 +447,11 @@ export class KolCombobox implements ComboboxAPI {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -560,6 +567,11 @@ export class KolCombobox implements ComboboxAPI {
 		this.controller.validateOn(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_suggestions')
 	public validateSuggestions(value?: SuggestionsPropType): void {
 		this.controller.validateSuggestions(value);
diff --git a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
index ba866a3583..9ec22bd70e 100644
--- a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -241,6 +241,31 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
 </kol-combobox>
 `;
 
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _shortKey="S" 1`] = `
+<kol-combobox class="kol-combobox">
+  <template shadowrootmode="open">
+    <div class="combobox">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          Label
+          <span aria-hidden="true" class="access-key-hint">
+            S
+          </span>
+        </span>
+        <div slot="input">
+          <div class="combobox__group">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
+            <button class="combobox__icon" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-combobox>
+`;
+
 exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _touched=true 1`] = `
 <kol-combobox _touched="" class="kol-combobox">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
index 874d66e0b6..325e765317 100644
--- a/packages/components/src/components/input-checkbox/shadow.tsx
+++ b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -12,19 +12,20 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { tryToDispatchKoliBriEvent } from '../../utils/events';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputCheckboxController } from './controller';
 import { KolIconTag, KolInputTag } from '../../core/component-names';
 import type { FocusableElement } from '../../schema/interfaces/FocusableElement';
@@ -99,17 +100,18 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 					_id={this.state._id}
 					_label={this.state._label}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -254,6 +256,11 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -400,6 +407,11 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
diff --git a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
index 63451326b9..93523fc1af 100644
--- a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -181,6 +181,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _shortKey="S" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -398,6 +417,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _shortKey="S" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -615,6 +653,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _shortKey="S" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -832,6 +889,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _shortKey="S" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -1049,6 +1125,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _shortKey="S" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -1266,6 +1361,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _shortKey="S" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -1483,6 +1597,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _shortKey="S" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
@@ -1700,6 +1833,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 </kol-input-checkbox>
 `;
 
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _shortKey="S" 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _touched=true 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
index 93dddaa741..d4463c63a6 100644
--- a/packages/components/src/components/input-color/shadow.tsx
+++ b/packages/components/src/components/input-color/shadow.tsx
@@ -11,18 +11,19 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputColorController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -88,6 +89,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 					_hideError={this.state._hideError}
 					_id={this.state._id}
 					_label={this.state._label}
+					_shortKey={this.state._shortKey}
 					_suggestions={this.state._suggestions}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
@@ -98,11 +100,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -221,6 +223,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	 */
 	@Prop() public _on?: InputTypeOnDefault;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -349,6 +356,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 		this.controller.validateOn(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_smartButton')
 	public validateSmartButton(value?: ButtonProps | string): void {
 		this.controller.validateSmartButton(value);
diff --git a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
index 2dfd05d540..c049415028 100644
--- a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 </kol-input-color>
 `;
 
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _shortKey="S" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
   <template shadowrootmode="open">
@@ -359,6 +377,24 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 </kol-input-color>
 `;
 
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _shortKey="S" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
index 8eb59351bb..d6706f53fc 100644
--- a/packages/components/src/components/input-date/shadow.tsx
+++ b/packages/components/src/components/input-date/shadow.tsx
@@ -2,6 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import type {
 	ButtonProps,
+	FocusableElement,
 	HideErrorPropType,
 	IdPropType,
 	InputDateAPI,
@@ -12,19 +13,21 @@ import type {
 	Iso8601,
 	KoliBriHorizontalIcons,
 	LabelWithExpertSlotPropType,
+	MsgPropType,
 	NamePropType,
 	ReadOnlyPropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { deprecatedHint, type FocusableElement, type MsgPropType, showExpertSlot } from '../../schema';
+import { buildBadgeTextString, deprecatedHint, showExpertSlot } from '../../schema';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputDateController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -145,6 +148,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 					_suggestions={this.state._suggestions}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
@@ -152,11 +156,11 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -304,6 +308,11 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -464,6 +473,11 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_smartButton')
 	public validateSmartButton(value?: ButtonProps | string): void {
 		this.controller.validateSmartButton(value);
diff --git a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
index 2761650b1d..40a7d24e4a 100644
--- a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 </kol-input-date>
 `;
 
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _shortKey="S" 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="date">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _touched=true 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-input-date">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
index c04f350393..f4505f06bd 100644
--- a/packages/components/src/components/input-email/shadow.tsx
+++ b/packages/components/src/components/input-email/shadow.tsx
@@ -12,19 +12,20 @@ import type {
 	MsgPropType,
 	MultiplePropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { setState, showExpertSlot } from '../../schema';
+import { buildBadgeTextString, setState, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputEmailController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -112,6 +113,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 					_maxLength={this.state._maxLength}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
@@ -121,11 +123,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -289,6 +291,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -454,6 +461,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_suggestions')
 	public validateSuggestions(value?: SuggestionsPropType): void {
 		this.controller.validateSuggestions(value);
diff --git a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
index c0f2d2c228..e12b52318c 100644
--- a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 </kol-input-email>
 `;
 
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _shortKey="S" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-email class="has-value kol-input-email">
   <template shadowrootmode="open">
@@ -359,6 +377,24 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 </kol-input-email>
 `;
 
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _shortKey="S" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-email class="has-value kol-input-email">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
index cf8e6b21ce..706d0668ec 100644
--- a/packages/components/src/components/input-file/shadow.tsx
+++ b/packages/components/src/components/input-file/shadow.tsx
@@ -10,17 +10,18 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputFileController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -86,6 +87,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 					_id={this.state._id}
 					_label={this.state._label}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
@@ -95,11 +97,11 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -232,6 +234,11 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -363,6 +370,11 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_smartButton')
 	public validateSmartButton(value?: ButtonProps | string): void {
 		this.controller.validateSmartButton(value);
diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
index 76af609cfe..b906d92fb4 100644
--- a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 </kol-input-file>
 `;
 
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _shortKey="S" 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
index 639b716e83..ce869fa93e 100644
--- a/packages/components/src/components/input-number/shadow.tsx
+++ b/packages/components/src/components/input-number/shadow.tsx
@@ -12,19 +12,20 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputNumberController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -107,6 +108,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 					_suggestions={this.state._suggestions}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
@@ -114,11 +116,11 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -270,6 +272,11 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -429,6 +436,11 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_smartButton')
 	public validateSmartButton(value?: ButtonProps | string): void {
 		this.controller.validateSmartButton(value);
diff --git a/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
index 9ffbe747f9..cbe708f5d7 100644
--- a/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 </kol-input-number>
 `;
 
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _shortKey="S" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="number">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-number class="kol-input-number">
   <template shadowrootmode="open">
@@ -359,6 +377,24 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 </kol-input-number>
 `;
 
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _shortKey="S" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="number">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-number class="kol-input-number">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
index 86ae6f16f9..4772134968 100644
--- a/packages/components/src/components/input-password/shadow.tsx
+++ b/packages/components/src/components/input-password/shadow.tsx
@@ -11,18 +11,19 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { devHint, setState, showExpertSlot } from '../../schema';
+import { buildBadgeTextString, devHint, setState, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputPasswordController } from './controller';
 import { KolButtonWcTag, KolInputTag } from '../../core/component-names';
 import { translate } from '../../i18n';
@@ -113,6 +114,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 					_maxLength={this.state._maxLength}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
@@ -122,11 +124,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -299,6 +301,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Allows to add a button with an arbitrary action within the element (_hide-label only).
 	 */
@@ -466,6 +473,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_smartButton')
 	public validateSmartButton(value?: ButtonProps | string): void {
 		this.controller.validateSmartButton(value);
diff --git a/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
index 38acf0f8d6..01001b4d69 100644
--- a/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 </kol-input-password>
 `;
 
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _shortKey="S" 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-password class="has-value kol-input-password">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
index 62263e73b5..253d36711a 100644
--- a/packages/components/src/components/input-radio/shadow.tsx
+++ b/packages/components/src/components/input-radio/shadow.tsx
@@ -14,15 +14,16 @@ import type {
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
+	ShortKeyPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputRadioController } from './controller';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { KolInputTag } from '../../core/component-names';
@@ -93,8 +94,8 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 							<span slot="label">
 								{hasExpertSlot ? (
 									<slot name="expert"></slot>
-								) : typeof this._accessKey === 'string' ? (
-									<InternalUnderlinedAccessKey accessKey={this._accessKey} label={this._label} />
+								) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
+									<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this._label} />
 								) : (
 									this._label
 								)}
@@ -126,6 +127,7 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 								_label={option.label as string}
 								_renderNoLabel={true}
 								_required={this.state._required}
+								_shortKey={this.state._shortKey}
 								_slotName={slotName}
 								_tooltipAlign={this._tooltipAlign}
 								_touched={this.state._touched}
@@ -268,6 +270,11 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -395,6 +402,11 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
diff --git a/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
index 1771f2fd5f..14d1dc0722 100644
--- a/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
@@ -994,6 +994,58 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 </kol-input-radio>
 `;
 
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _shortKey="S" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _shortkey="S" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _shortkey="S" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _shortkey="S" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _touched=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-radio">
   <template shadowrootmode="open">
@@ -1150,6 +1202,58 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 </kol-input-radio>
 `;
 
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _shortkey="S" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _shortkey="S" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _shortkey="S" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-radio">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
index 2dcd59d5d0..19b80884c6 100644
--- a/packages/components/src/components/input-range/shadow.tsx
+++ b/packages/components/src/components/input-range/shadow.tsx
@@ -10,20 +10,21 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 	W3CInputValue,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputRangeController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -139,17 +140,18 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 					_id={this.state._id}
 					_label={this.state._label}
 					_msg={this.state._msg}
+					_shortKey={this.state._shortKey}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
 				>
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -331,6 +333,11 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 	 */
 	@Prop() public _on?: InputTypeOnDefault;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Defines the step size for value changes.
 	 */
@@ -469,6 +476,11 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 		this.controller.validateOn(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_step')
 	public validateStep(value?: number): void {
 		this.controller.validateStep(value);
diff --git a/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
index 39c8e3b36d..2faeacc35b 100644
--- a/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
@@ -201,6 +201,27 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 </kol-input-range>
 `;
 
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _shortKey="S" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="range">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _accessKey="V" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
   <template shadowrootmode="open">
@@ -522,6 +543,39 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 </kol-input-range>
 `;
 
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _shortKey="S" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="range">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _touched=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-range">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
index 1530b87de0..978daf1f0b 100644
--- a/packages/components/src/components/input-text/shadow.tsx
+++ b/packages/components/src/components/input-text/shadow.tsx
@@ -1,4 +1,5 @@
 import type {
+	AccessKeyPropType,
 	AlertPropType,
 	ButtonProps,
 	FocusableElement,
@@ -13,19 +14,20 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { setState, showExpertSlot, validateAlert } from '../../schema';
+import { buildBadgeTextString, setState, showExpertSlot, validateAlert } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { propagateSubmitEventToForm } from '../form/controller';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { InputTextController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -123,6 +125,7 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 					_msg={this.state._msg}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_smartButton={this.state._smartButton}
 					_suggestions={this.state._suggestions}
 					_tooltipAlign={this._tooltipAlign}
@@ -133,11 +136,11 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -190,7 +193,7 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 	/**
 	 * Defines which key combination can be used to trigger or focus the interactive element of the component.
 	 */
-	@Prop() public _accessKey?: string;
+	@Prop() public _accessKey?: AccessKeyPropType;
 
 	/**
 	 * Defines whether the screen-readers should read out the notification.
@@ -296,6 +299,11 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Suggestions to provide for the input.
 	 */
@@ -363,7 +371,7 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 	}
 
 	@Watch('_accessKey')
-	public validateAccessKey(value?: string): void {
+	public validateAccessKey(value?: AccessKeyPropType): void {
 		this.controller.validateAccessKey(value);
 	}
 
@@ -462,6 +470,11 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_suggestions')
 	public validateSuggestions(value?: SuggestionsPropType): void {
 		this.controller.validateSuggestions(value);
diff --git a/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
index 31a56eafb9..4e31677309 100644
--- a/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
@@ -171,6 +171,24 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 </kol-input-text>
 `;
 
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _shortKey="S" 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-text class="has-value kol-input-text">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx
index 6894a4d4f2..6487f766e0 100644
--- a/packages/components/src/components/input/component.tsx
+++ b/packages/components/src/components/input/component.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { handleSlotContent, type MsgPropType, showExpertSlot } from '../../schema';
+import { handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';
 import clsx from 'clsx';
@@ -114,7 +114,7 @@ export class KolInputWc implements Props {
 						 */
 						aria-hidden="true"
 						class="input-tooltip"
-						_accessKey={this._accessKey}
+						_badgeText={this._accessKey || this._shortKey}
 						_align={this._tooltipAlign}
 						_id={this._hideLabel ? `${this._id}-label` : undefined}
 						_label={this._label}
@@ -234,6 +234,11 @@ export class KolInputWc implements Props {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.
 	 * @internal
diff --git a/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap
index 0816c1ab89..44eca98cca 100644
--- a/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap
@@ -127,6 +127,18 @@ exports[`kol-input should render with _label="Label" _name="field" _placeholder=
 </kol-input>
 `;
 
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _shortKey="S" 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
 exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
   <!---->
diff --git a/packages/components/src/components/input/types.ts b/packages/components/src/components/input/types.ts
index c8e2c33a9e..a5c714e789 100644
--- a/packages/components/src/components/input/types.ts
+++ b/packages/components/src/components/input/types.ts
@@ -14,6 +14,7 @@ import type {
 	PropLabelWithExpertSlot,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTooltipAlign,
@@ -38,6 +39,7 @@ type OptionalProps = {
 	PropHideLabel &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropSuggestions &
 	PropSyncValueBySelector &
 	PropTooltipAlign &
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
index 4880fd85e8..3b13b0729b 100644
--- a/packages/components/src/components/link-button/shadow.tsx
+++ b/packages/components/src/components/link-button/shadow.tsx
@@ -13,6 +13,7 @@ import type {
 	LinkButtonProps,
 	LinkOnCallbacksPropType,
 	LinkTargetPropType,
+	ShortKeyPropType,
 	TooltipAlignPropType,
 } from '../../schema';
 import type { JSX } from '@stencil/core';
@@ -69,6 +70,7 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 					_label={this._label}
 					_on={this._on}
 					_role="button"
+					_shortKey={this._shortKey}
 					_tabIndex={this._tabIndex}
 					_target={this._target}
 					_tooltipAlign={this._tooltipAlign}
@@ -141,6 +143,11 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
 	 */
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
index d491f5a8de..58e95ee804 100644
--- a/packages/components/src/components/link/component.tsx
+++ b/packages/components/src/components/link/component.tsx
@@ -15,6 +15,7 @@ import type {
 	LinkOnCallbacksPropType,
 	LinkStates,
 	LinkTargetPropType,
+	ShortKeyPropType,
 	Stringified,
 	TooltipAlignPropType,
 } from '../../schema';
@@ -36,6 +37,7 @@ import {
 	validateLabelWithExpertSlot,
 	validateLinkCallbacks,
 	validateLinkTarget,
+	validateShortKey,
 	validateTabIndex,
 	validateTooltipAlign,
 } from '../../schema';
@@ -48,6 +50,7 @@ import { nonce } from '../../utils/dev.utils';
 import { KolIconTag, KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';
 
 import { translate } from '../../i18n';
+import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';
 
 /**
  * @internal
@@ -152,7 +155,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 					tabIndex={this.state._disabled ? -1 : this.state._tabIndex}
 				>
 					<KolSpanWcTag
-						_accessKey={this.state._accessKey}
+						_badgeText={this.state._accessKey || this.state._shortKey}
 						_icons={this.state._icons}
 						_hideLabel={this.state._hideLabel}
 						_label={hasExpertSlot ? '' : this.state._label || this.state._href}
@@ -175,7 +178,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 					 */
 					aria-hidden="true"
 					hidden={hasExpertSlot || !this.state._hideLabel}
-					_accessKey={this.state._accessKey}
+					_badgeText={this.state._accessKey || this.state._shortKey}
 					_align={this.state._tooltipAlign}
 					_label={this.state._label || this.state._href}
 				></KolTooltipWcTag>
@@ -256,6 +259,11 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
 	 */
@@ -280,6 +288,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 	@Watch('_accessKey')
 	public validateAccessKey(value?: AccessKeyPropType): void {
 		validateAccessKey(this, value);
+		validateAccessAndShortKey(value, this._shortKey);
 	}
 
 	@Watch('_ariaCurrentValue')
@@ -344,6 +353,12 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 		validateAlternativeButtonLinkRole(this, value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		validateShortKey(this, value);
+		validateAccessAndShortKey(this._accessKey, value);
+	}
+
 	@Watch('_tabIndex')
 	public validateTabIndex(value?: number): void {
 		validateTabIndex(this, value);
@@ -373,12 +388,14 @@ export class KolLinkWc implements LinkAPI, FocusableElement {
 		this.validateLabel(this._label);
 		this.validateOn(this._on);
 		this.validateRole(this._role);
+		this.validateShortKey(this._shortKey);
 		this.validateTabIndex(this._tabIndex);
 		this.validateTarget(this._target);
 		this.validateTooltipAlign(this._tooltipAlign);
 		this.unsubscribeOnLocationChange = onLocationChange((location) => {
 			this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
 		});
+		validateAccessAndShortKey(this._accessKey, this._shortKey);
 	}
 
 	public disconnectedCallback(): void {
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
index 490e1a98e5..adf31ae04e 100644
--- a/packages/components/src/components/link/shadow.tsx
+++ b/packages/components/src/components/link/shadow.tsx
@@ -11,6 +11,7 @@ import type {
 	LinkOnCallbacksPropType,
 	LinkProps,
 	LinkTargetPropType,
+	ShortKeyPropType,
 	Stringified,
 	TooltipAlignPropType,
 } from '../../schema';
@@ -63,6 +64,7 @@ export class KolLink implements LinkProps, FocusableElement {
 					_label={this._label}
 					_on={this._on}
 					_role={this._role}
+					_shortKey={this._shortKey}
 					_tabIndex={this._tabIndex}
 					_target={this._target}
 					_tooltipAlign={this._tooltipAlign}
@@ -134,6 +136,11 @@ export class KolLink implements LinkProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Defines the elements access key.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
 	 */
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
index 2ebdd87d4a..ba2026bc8e 100644
--- a/packages/components/src/components/select/shadow.tsx
+++ b/packages/components/src/components/select/shadow.tsx
@@ -14,19 +14,20 @@ import type {
 	SelectAPI,
 	SelectOption,
 	SelectStates,
+	ShortKeyPropType,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 	W3CInputValue,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { SelectController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 import { propagateSubmitEventToForm } from '../form/controller';
@@ -120,6 +121,7 @@ export class KolSelect implements SelectAPI, FocusableElement {
 					_label={this.state._label}
 					_msg={this.state._msg}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
 					onClick={() => this.selectRef?.focus()}
@@ -128,11 +130,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -298,6 +300,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Defines how many rows of options should be visible at the same time.
 	 */
@@ -438,6 +445,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
 		this.controller.validateRows(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
diff --git a/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
index 0f377f0a14..cd787f4018 100644
--- a/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
@@ -572,6 +572,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 </kol-select>
 `;
 
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _shortKey="S" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _touched=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-select">
   <template shadowrootmode="open">
@@ -662,6 +693,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 </kol-select>
 `;
 
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-select">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
index 54c8ff7f28..635a40fb33 100644
--- a/packages/components/src/components/single-select/shadow.tsx
+++ b/packages/components/src/components/single-select/shadow.tsx
@@ -8,13 +8,14 @@ import type {
 	NamePropType,
 	Option,
 	OptionsPropType,
+	ShortKeyPropType,
 	SingleSelectAPI,
 	SingleSelectStates,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
@@ -22,7 +23,7 @@ import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { SingleSelectController } from './controller';
 import { KolIconTag, KolInputTag } from '../../core/component-names';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { getRenderStates } from '../input/controller';
 import { translate } from '../../i18n';
 import clsx from 'clsx';
@@ -192,6 +193,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 						_label={this.state._label}
 						_msg={this.state._msg}
 						_required={this.state._required}
+						_shortKey={this.state._shortKey}
 						_tooltipAlign={this._tooltipAlign}
 						_touched={this.state._touched}
 						role={`presentation` /* Avoid element being read as 'clickable' in NVDA */}
@@ -199,11 +201,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 						<span slot="label">
 							{hasExpertSlot ? (
 								<slot name="expert"></slot>
-							) : typeof this.state._accessKey === 'string' ? (
+							) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 								<>
-									<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+									<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}
 									<span class="access-key-hint" aria-hidden="true">
-										{this.state._accessKey}
+										{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}
 									</span>
 								</>
 							) : (
@@ -518,6 +520,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -643,6 +650,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 		this.controller.validateRequired(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
diff --git a/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap
index 70d27aac15..cb8661b65a 100644
--- a/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap
@@ -241,6 +241,31 @@ exports[`kol-single-select should render with _label="Label" _name="field" _plac
 </kol-single-select>
 `;
 
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          Label
+          <span aria-hidden="true" class="access-key-hint">
+            S
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
 exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
 <kol-single-select _touched="" class="kol-single-select">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx b/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx
deleted file mode 100644
index 7dae4bf774..0000000000
--- a/packages/components/src/components/span/InternalUnderlinedAccessKey.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Fragment, h } from '@stencil/core';
-
-type Props = {
-	accessKey: string;
-	label: string;
-};
-export const InternalUnderlinedAccessKey = ({ accessKey, label }: Props) => {
-	/* Prefer capitalization as defined in the access key, try uppercase/lowercase when there's no match. */
-	let [first, ...rest] = label.split(accessKey);
-	if (rest.length === 0) {
-		accessKey = accessKey.toUpperCase();
-		[first, ...rest] = label.split(accessKey);
-	}
-	if (rest.length === 0) {
-		accessKey = accessKey.toLowerCase();
-		[first, ...rest] = label.split(accessKey);
-	}
-	return (
-		<>
-			{first}
-			{rest.length ? (
-				<>
-					<u>{accessKey}</u>
-					{rest.join(accessKey)}
-				</>
-			) : null}
-		</>
-	);
-};
diff --git a/packages/components/src/components/span/InternalUnderlinedBadgeText.tsx b/packages/components/src/components/span/InternalUnderlinedBadgeText.tsx
new file mode 100644
index 0000000000..f8b09f416a
--- /dev/null
+++ b/packages/components/src/components/span/InternalUnderlinedBadgeText.tsx
@@ -0,0 +1,31 @@
+import { Fragment, h } from '@stencil/core';
+import type { BadgeTextPropType } from '../../schema';
+
+type Props = {
+	badgeText: BadgeTextPropType;
+	label: string;
+};
+export const InternalUnderlinedBadgeText = ({ badgeText, label }: Props) => {
+	/* Prefer capitalization as defined in the badge Text, try uppercase/lowercase when there's no match. */
+	const badgeTextAsString: string = badgeText;
+	let [first, ...rest] = label.split(badgeTextAsString);
+	if (rest.length === 0) {
+		badgeText = badgeTextAsString.toUpperCase();
+		[first, ...rest] = label.split(badgeTextAsString);
+	}
+	if (rest.length === 0) {
+		badgeText = badgeTextAsString.toLowerCase();
+		[first, ...rest] = label.split(badgeTextAsString);
+	}
+	return (
+		<>
+			{first}
+			{rest.length ? (
+				<>
+					<u>{badgeText}</u>
+					{rest.join(badgeTextAsString)}
+				</>
+			) : null}
+		</>
+	);
+};
diff --git a/packages/components/src/components/span/component.tsx b/packages/components/src/components/span/component.tsx
index 272c44a4b0..326e028ded 100644
--- a/packages/components/src/components/span/component.tsx
+++ b/packages/components/src/components/span/component.tsx
@@ -1,9 +1,9 @@
-import type { AccessKeyPropType, HideLabelPropType, KoliBriIconsProp, LabelWithExpertSlotPropType, SpanAPI, SpanStates, Stringified } from '../../schema';
-import { showExpertSlot, validateAccessKey, validateHideLabel, validateIcons, validateLabelWithExpertSlot, watchBoolean } from '../../schema';
+import type { BadgeTextPropType, HideLabelPropType, KoliBriIconsProp, LabelWithExpertSlotPropType, SpanAPI, SpanStates, Stringified } from '../../schema';
+import { showExpertSlot, validateBadgeText, validateHideLabel, validateIcons, validateLabelWithExpertSlot, watchBoolean } from '../../schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { md } from '../../utils/markdown';
-import { InternalUnderlinedAccessKey } from './InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from './InternalUnderlinedBadgeText';
 
 import type { JSX } from '@stencil/core';
 import { KolIconTag } from '../../core/component-names';
@@ -42,8 +42,8 @@ export class KolSpanWc implements SpanAPI {
 							<span class="span-label md" innerHTML={md(this.state._label)} />
 						) : (
 							<span class="span-label">
-								{this.state._accessKey && this.state._label.length ? (
-									<InternalUnderlinedAccessKey label={this.state._label} accessKey={this.state._accessKey} />
+								{this.state._badgeText && this.state._label.length ? (
+									<InternalUnderlinedBadgeText label={this.state._label} badgeText={this.state._badgeText} />
 								) : (
 									(this.state._label ?? '')
 								)}
@@ -55,9 +55,9 @@ export class KolSpanWc implements SpanAPI {
 					<span aria-hidden={hideExpertSlot ? 'true' : undefined} class="span-label" hidden={hideExpertSlot}>
 						<slot name="expert" />
 					</span>
-					{this.state._accessKey && (
-						<span class="access-key-hint" aria-hidden="true">
-							{this.state._accessKey}
+					{this.state._badgeText && (
+						<span class="badge-text-hint" aria-hidden="true">
+							{this.state._badgeText}
 						</span>
 					)}
 					{this.state._icons.right && (
@@ -82,9 +82,9 @@ export class KolSpanWc implements SpanAPI {
 	}
 
 	/**
-	 * Defines the elements access key.
+	 * Defines the elements badge text.
 	 */
-	@Prop() public _accessKey?: AccessKeyPropType;
+	@Prop() public _badgeText?: BadgeTextPropType;
 
 	/**
 	 * Allows to use markdown in the label. Defaults to `false`.
@@ -115,9 +115,9 @@ export class KolSpanWc implements SpanAPI {
 		_label: '', // ⚠ required
 	};
 
-	@Watch('_accessKey')
-	public validateAccessKey(value?: AccessKeyPropType): void {
-		validateAccessKey(this, value);
+	@Watch('_badgeText')
+	public validateBadgeText(value?: BadgeTextPropType): void {
+		validateBadgeText(this, value);
 	}
 
 	@Watch('_allowMarkdown')
@@ -147,7 +147,7 @@ export class KolSpanWc implements SpanAPI {
 	}
 
 	public componentWillLoad(): void {
-		this.validateAccessKey(this._accessKey);
+		this.validateBadgeText(this._badgeText);
 		this.validateAllowMarkdown(this._allowMarkdown);
 		this.validateHideLabel(this._hideLabel);
 		this.validateIcons(this._icons);
diff --git a/packages/components/src/components/span/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/span/test/__snapshots__/snapshot.spec.tsx.snap
index d6b57d565a..ba3916e5cc 100644
--- a/packages/components/src/components/span/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/span/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`kol-span-wc should render with _label="Text" _accessKey="v" 1`] = `
+exports[`kol-span-wc should render with _label="Text" _badgeText="v" 1`] = `
 <kol-span-wc class="kol-span-wc">
   <!---->
   <span>
@@ -8,7 +8,7 @@ exports[`kol-span-wc should render with _label="Text" _accessKey="v" 1`] = `
       Text
     </span>
     <span aria-hidden="true" class="span-label" hidden=""></span>
-    <span aria-hidden="true" class="access-key-hint">
+    <span aria-hidden="true" class="badge-text-hint">
       v
     </span>
   </span>
diff --git a/packages/components/src/components/span/test/snapshot.spec.tsx b/packages/components/src/components/span/test/snapshot.spec.tsx
index c2a3e0f811..7d5eab0d62 100644
--- a/packages/components/src/components/span/test/snapshot.spec.tsx
+++ b/packages/components/src/components/span/test/snapshot.spec.tsx
@@ -7,5 +7,5 @@ import { KolSpanWc } from '../component';
 executeSnapshotTests<SpanProps>(
 	KolSpanWcTag,
 	[KolSpanWc],
-	[{ _label: 'Text' }, { _label: 'Text', _accessKey: 'v' }, { _label: 'Text', _hideLabel: true }, { _label: 'Text', _icons: 'codicon codicon-home' }],
+	[{ _label: 'Text' }, { _label: 'Text', _badgeText: 'v' }, { _label: 'Text', _hideLabel: true }, { _label: 'Text', _icons: 'codicon codicon-home' }],
 );
diff --git a/packages/components/src/components/table-stateful/readme.md b/packages/components/src/components/table-stateful/readme.md
index 8f934487c6..777efc4abf 100644
--- a/packages/components/src/components/table-stateful/readme.md
+++ b/packages/components/src/components/table-stateful/readme.md
@@ -79,16 +79,12 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 ### Code
 
 ```html
-<kol-table-stateful
-	_label="Tabellenbeschreibung"
-	_headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}'
-	_pagination='[{"page":2}]'
-></kol-table-stateful>
+<kol-table-stateful _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
 ```
 
 ### Beispiel
 
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table-stateful>
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
 
 ### Footer
 
@@ -96,7 +92,7 @@ Durch die Verwendung des **`_dataFoot_`**-Attribut können zusammenfassende Info
 
 ### Beispiel
 
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table-stateful>
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table>
 
 ## Verwendung
 
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
index 96d689d6a9..545ac6da7f 100644
--- a/packages/components/src/components/textarea/shadow.tsx
+++ b/packages/components/src/components/textarea/shadow.tsx
@@ -11,19 +11,20 @@ import type {
 	MsgPropType,
 	NamePropType,
 	RowsPropType,
+	ShortKeyPropType,
 	Stringified,
 	SyncValueBySelectorPropType,
 	TextareaAPI,
 	TextareaStates,
 	TooltipAlignPropType,
 } from '../../schema';
-import { devWarning, setState, showExpertSlot } from '../../schema';
+import { buildBadgeTextString, devWarning, setState, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { getRenderStates } from '../input/controller';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { TextareaController } from './controller';
 import { KolInputTag } from '../../core/component-names';
 
@@ -103,6 +104,7 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 					_msg={this.state._msg}
 					_readOnly={this.state._readOnly}
 					_required={this.state._required}
+					_shortKey={this.state._shortKey}
 					_tooltipAlign={this._tooltipAlign}
 					_touched={this.state._touched}
 					onClick={() => this.textareaRef?.focus()}
@@ -111,11 +113,11 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (
@@ -279,6 +281,11 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 	 */
 	@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -439,6 +446,11 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 		this.controller.validateRows(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
diff --git a/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
index 600803c202..5678359dfd 100644
--- a/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
@@ -161,6 +161,23 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 </kol-textarea>
 `;
 
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _shortKey="S" 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          S
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _touched=true 1`] = `
 <kol-textarea _touched="" class="has-value kol-textarea">
   <template shadowrootmode="open">
diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
index c2a656e085..b930ee45cc 100644
--- a/packages/components/src/components/tooltip/component.tsx
+++ b/packages/components/src/components/tooltip/component.tsx
@@ -1,6 +1,6 @@
 import { autoUpdate } from '@floating-ui/dom';
-import type { AccessKeyPropType, AlignPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';
-import { getDocument, validateAccessKey, validateAlign, validateId, validateLabel } from '../../schema';
+import type { AlignPropType, BadgeTextPropType, IdPropType, LabelPropType, TooltipAPI, TooltipStates } from '../../schema';
+import { getDocument, validateBadgeText, validateAlign, validateId, validateLabel } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
@@ -130,7 +130,7 @@ export class KolTooltipWc implements TooltipAPI {
 				{this.state._label !== '' && (
 					<div class="tooltip-floating" ref={this.catchTooltipElement}>
 						<div class="tooltip-area tooltip-arrow" ref={this.catchArrowElement} />
-						<KolSpanWcTag class="tooltip-area tooltip-content" id={this.state._id} _accessKey={this._accessKey} _label={this.state._label}></KolSpanWcTag>
+						<KolSpanWcTag class="tooltip-area tooltip-content" id={this.state._id} _badgeText={this._badgeText} _label={this.state._label}></KolSpanWcTag>
 					</div>
 				)}
 			</Host>
@@ -138,9 +138,9 @@ export class KolTooltipWc implements TooltipAPI {
 	}
 
 	/**
-	 * Defines the elements access key.
+	 * Defines the elements badge text.
 	 */
-	@Prop() public _accessKey?: AccessKeyPropType;
+	@Prop() public _badgeText?: BadgeTextPropType;
 
 	/**
 	 * Defines the alignment of the tooltip, popover or tabs in relation to the element.
@@ -162,9 +162,9 @@ export class KolTooltipWc implements TooltipAPI {
 		_label: '', // ⚠ required
 	};
 
-	@Watch('_accessKey')
-	public validateAccessKey(value?: AccessKeyPropType): void {
-		validateAccessKey(this, value);
+	@Watch('_badgeText')
+	public validateBadgeText(value?: BadgeTextPropType): void {
+		validateBadgeText(this, value);
 	}
 
 	@Watch('_align')
@@ -199,7 +199,7 @@ export class KolTooltipWc implements TooltipAPI {
 	};
 
 	public componentWillLoad(): void {
-		this.validateAccessKey(this._accessKey);
+		this.validateBadgeText(this._badgeText);
 		this.validateAlign(this._align);
 		this.validateId(this._id);
 		this.validateLabel(this._label);
diff --git a/packages/components/src/schema/components/button.ts b/packages/components/src/schema/components/button.ts
index c269e52012..ec7384ef1a 100644
--- a/packages/components/src/schema/components/button.ts
+++ b/packages/components/src/schema/components/button.ts
@@ -17,6 +17,7 @@ import type {
 	PropId,
 	PropLabelWithExpertSlot,
 	PropName,
+	PropShortKey,
 	PropSyncValueBySelector,
 	PropTooltipAlign,
 } from '../props';
@@ -30,7 +31,8 @@ export type OptionalButtonProps = {
 	 * @deprecated
 	 */
 	ariaExpanded: AriaExpandedPropType;
-} & PropAlternativeButtonLinkRole &
+} & PropAccessKey &
+	PropAlternativeButtonLinkRole &
 	PropAriaControls &
 	PropAriaDescription &
 	PropAriaSelected &
@@ -43,9 +45,9 @@ export type OptionalButtonProps = {
 	PropIcons &
 	PropId &
 	PropName &
+	PropShortKey &
 	PropSyncValueBySelector &
-	PropTooltipAlign &
-	PropAccessKey;
+	PropTooltipAlign;
 
 export type RequiredButtonStates = RequiredButtonProps &
 	PropButtonType &
diff --git a/packages/components/src/schema/components/combobox.ts b/packages/components/src/schema/components/combobox.ts
index 76376f99d9..5c56b693a9 100644
--- a/packages/components/src/schema/components/combobox.ts
+++ b/packages/components/src/schema/components/combobox.ts
@@ -13,12 +13,13 @@ import type {
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
+	PropAccessKey,
+	PropShortKey,
 } from '../props';
 import type { InputTypeOnDefault, KoliBriHorizontalIcons, Stringified, W3CInputValue } from '../types';
 
 type RequiredProps = PropLabelWithExpertSlot & PropSuggestions;
 type OptionalProps = {
-	accessKey: string;
 	hint: string;
 	icons: Stringified<KoliBriHorizontalIcons>;
 	msg: Stringified<MsgPropType>;
@@ -26,11 +27,13 @@ type OptionalProps = {
 	placeholder: string;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched;
 
@@ -42,19 +45,20 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
 	on: InputTypeOnDefault;
 	tabIndex: number;
 	placeholder: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropId &
 	PropName &
 	PropRequired &
 	PropMsg &
+	PropShortKey &
 	PropTouched;
 
 export type ComboboxProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-checkbox.ts b/packages/components/src/schema/components/input-checkbox.ts
index d63f4fe6b6..9e6d3ce344 100644
--- a/packages/components/src/schema/components/input-checkbox.ts
+++ b/packages/components/src/schema/components/input-checkbox.ts
@@ -14,6 +14,8 @@ import type {
 	PropRequired,
 	PropSyncValueBySelector,
 	PropTouched,
+	PropShortKey,
+	PropAccessKey,
 } from '../props';
 import type { AnyIconFontClass, InputTypeOnDefault, StencilUnknown, Stringified } from '../types';
 
@@ -45,7 +47,6 @@ export type InputCheckboxIconsState = {
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	/**
 	 * @deprecated Will be removed in v3. Use `msg` instead.
@@ -58,13 +59,15 @@ type OptionalProps = {
 	tabIndex: number;
 	value: Stringified<StencilUnknown>;
 	variant: InputCheckboxVariant;
-} & PropChecked &
+} & PropAccessKey &
+	PropChecked &
 	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropIndeterminate &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched &
 	PropLabelAlign;
@@ -79,16 +82,17 @@ type RequiredStates = {
 	PropIndeterminate &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	on: InputTypeOnDefault;
 	tabIndex: number;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropTouched &
 	PropLabelAlign;
 
diff --git a/packages/components/src/schema/components/input-color.ts b/packages/components/src/schema/components/input-color.ts
index 37a32cea3e..851647dd5c 100644
--- a/packages/components/src/schema/components/input-color.ts
+++ b/packages/components/src/schema/components/input-color.ts
@@ -1,6 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 
 import type {
+	PropAccessKey,
 	MsgPropType,
 	PropDisabled,
 	PropHideError,
@@ -8,6 +9,7 @@ import type {
 	PropLabelWithExpertSlot,
 	PropMsg,
 	PropName,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -17,7 +19,6 @@ import type { ButtonProps } from './button';
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	autoComplete: InputTypeOnOff;
 	/**
@@ -31,10 +32,12 @@ type OptionalProps = {
 	smartButton: Stringified<ButtonProps>;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropName &
+	PropShortKey &
 	PropSuggestions &
 	PropSyncValueBySelector &
 	PropTouched;
@@ -46,7 +49,6 @@ type RequiredStates = {
 } & PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
@@ -54,10 +56,12 @@ type OptionalStates = {
 	smartButton: ButtonProps;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
+	PropShortKey &
 	PropTouched;
 
 export type InputColorProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-date.ts b/packages/components/src/schema/components/input-date.ts
index ab7d8d17be..a7b25464ca 100644
--- a/packages/components/src/schema/components/input-date.ts
+++ b/packages/components/src/schema/components/input-date.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -11,6 +12,7 @@ import type {
 	PropName,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -49,7 +51,6 @@ type RequiredStates = {
 	PropId;
 
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
@@ -61,13 +62,15 @@ type OptionalStates = {
 	step: number;
 	tabIndex: number;
 	value: Iso8601 | null;
-} & PropSyncValueBySelector &
+} & PropAccessKey &
+	PropSyncValueBySelector &
 	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputDateProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-email.ts b/packages/components/src/schema/components/input-email.ts
index 3ea07eb830..67e995cdf7 100644
--- a/packages/components/src/schema/components/input-email.ts
+++ b/packages/components/src/schema/components/input-email.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHasCounter,
 	PropHideError,
@@ -13,6 +14,7 @@ import type {
 	PropName,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -22,7 +24,6 @@ import type { ButtonProps } from './button';
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	autoComplete: InputTypeOnOff;
 	/**
@@ -39,7 +40,8 @@ type OptionalProps = {
 	smartButton: Stringified<ButtonProps>;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHasCounter &
 	PropHideError &
 	PropHideLabel &
@@ -47,6 +49,7 @@ type OptionalProps = {
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropSuggestions &
 	PropSyncValueBySelector &
 	PropTouched;
@@ -60,7 +63,6 @@ type RequiredStates = {
 	PropLabelWithExpertSlot;
 
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	currentLength: number;
 	hint: string;
@@ -72,7 +74,8 @@ type OptionalStates = {
 	smartButton: ButtonProps;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHasCounter &
 	PropHideLabel &
 	PropMsg &
@@ -80,6 +83,7 @@ type OptionalStates = {
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputEmailProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-file.ts b/packages/components/src/schema/components/input-file.ts
index e64f12894c..3300bcccea 100644
--- a/packages/components/src/schema/components/input-file.ts
+++ b/packages/components/src/schema/components/input-file.ts
@@ -13,6 +13,8 @@ import type {
 	PropRequired,
 	PropSyncValueBySelector,
 	PropTouched,
+	PropAccessKey,
+	PropShortKey,
 } from '../props';
 import type { InputTypeOnDefault, KoliBriHorizontalIcons, Stringified } from '../types';
 import type { ButtonProps } from './button';
@@ -21,7 +23,6 @@ type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
 	accept: string;
 	alert: boolean;
-	accessKey: string;
 	/**
 	 * @deprecated Will be removed in v3. Use `msg` instead.
 	 */
@@ -33,12 +34,14 @@ type OptionalProps = {
 	smartButton: Stringified<ButtonProps>;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropMultiple &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched;
 
@@ -46,19 +49,20 @@ type RequiredStates = PropId & PropLabelWithExpertSlot & PropHideError;
 type OptionalStates = {
 	accept: string;
 	alert: boolean;
-	accessKey: string;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
 	on: InputTypeOnDefault;
 	smartButton: ButtonProps;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropMultiple &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputFileProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-number.ts b/packages/components/src/schema/components/input-number.ts
index a5e258af30..de27b1ef32 100644
--- a/packages/components/src/schema/components/input-number.ts
+++ b/packages/components/src/schema/components/input-number.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -11,6 +12,7 @@ import type {
 	PropName,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -39,7 +41,6 @@ type RequiredStates = {
 	PropLabelWithExpertSlot;
 
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
@@ -51,13 +52,15 @@ type OptionalStates = {
 	step: number;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
 	PropReadOnly &
 	PropRequired &
 	PropSyncValueBySelector &
+	PropShortKey &
 	PropTouched;
 
 export type InputNumberProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-password.ts b/packages/components/src/schema/components/input-password.ts
index 8a3f212d7c..8d98e9ef32 100644
--- a/packages/components/src/schema/components/input-password.ts
+++ b/packages/components/src/schema/components/input-password.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHasCounter,
 	PropHideError,
@@ -12,6 +13,7 @@ import type {
 	PropName,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSyncValueBySelector,
 	PropTouched,
 } from '../props';
@@ -21,7 +23,6 @@ import type { PropPasswordVariant } from '../props/variant/password-variant';
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	autoComplete: InputTypeOnOff;
 	/**
@@ -38,7 +39,8 @@ type OptionalProps = {
 	tabIndex: number;
 	value: string;
 	msg: Stringified<MsgPropType>;
-} & PropPasswordVariant &
+} & PropAccessKey &
+	PropPasswordVariant &
 	PropDisabled &
 	PropHasCounter &
 	PropHideError &
@@ -46,6 +48,7 @@ type OptionalProps = {
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched;
 
@@ -56,7 +59,6 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	currentLength: number;
 	hint: string;
@@ -68,7 +70,8 @@ type OptionalStates = {
 	smartButton: ButtonProps;
 	tabIndex: number;
 	value: string | null;
-} & PropPasswordVariant &
+} & PropAccessKey &
+	PropPasswordVariant &
 	PropDisabled &
 	PropHasCounter &
 	PropHideLabel &
@@ -76,6 +79,7 @@ type OptionalStates = {
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputPasswordProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-radio.ts b/packages/components/src/schema/components/input-radio.ts
index be6d7c271e..527ed295c4 100644
--- a/packages/components/src/schema/components/input-radio.ts
+++ b/packages/components/src/schema/components/input-radio.ts
@@ -1,6 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -10,6 +11,7 @@ import type {
 	PropName,
 	PropRadioOptions,
 	PropRequired,
+	PropShortKey,
 	PropSyncValueBySelector,
 	PropTooltipAlign,
 	PropTouched,
@@ -18,7 +20,6 @@ import type { InputTypeOnDefault, RadioOption, Orientation, StencilUnknown, Stri
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	/**
 	 * @deprecated Will be removed in v3. Use `msg` instead.
@@ -30,12 +31,14 @@ type OptionalProps = {
 	orientation: Orientation;
 	tabIndex: number;
 	value: StencilUnknown;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropName &
 	PropRadioOptions & // PropRadioOptions becomes required with 2.0
 	PropRequired &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched &
 	PropTooltipAlign;
@@ -47,17 +50,18 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	on: InputTypeOnDefault;
 	tabIndex: number;
 	value: StencilUnknown;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputRadioProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-range.ts b/packages/components/src/schema/components/input-range.ts
index f19353c708..3ff4778cc1 100644
--- a/packages/components/src/schema/components/input-range.ts
+++ b/packages/components/src/schema/components/input-range.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -9,6 +10,7 @@ import type {
 	PropLabelWithExpertSlot,
 	PropMsg,
 	PropName,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -17,7 +19,6 @@ import type { InputTypeOnDefault, InputTypeOnOff, KoliBriHorizontalIcons, String
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	autoComplete: InputTypeOnOff;
 	/**
@@ -33,12 +34,14 @@ type OptionalProps = {
 	step: number;
 	tabIndex: number;
 	value: number;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropName &
 	PropSuggestions &
 	PropSyncValueBySelector &
+	PropShortKey &
 	PropTouched;
 
 type RequiredStates = {
@@ -48,7 +51,6 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
@@ -58,10 +60,12 @@ type OptionalStates = {
 	step: number;
 	tabIndex: number;
 	value: number;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropMsg &
 	PropName &
+	PropShortKey &
 	PropTouched;
 
 export type InputRangeProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/input-text.ts b/packages/components/src/schema/components/input-text.ts
index d7652dd0a8..621245523c 100644
--- a/packages/components/src/schema/components/input-text.ts
+++ b/packages/components/src/schema/components/input-text.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHasCounter,
 	PropHideError,
@@ -12,6 +13,7 @@ import type {
 	PropName,
 	PropReadOnly,
 	PropRequired,
+	PropShortKey,
 	PropSuggestions,
 	PropSyncValueBySelector,
 	PropTouched,
@@ -21,7 +23,6 @@ import type { ButtonProps } from './button';
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	autoComplete: InputTypeOnOff;
 	/**
@@ -39,7 +40,8 @@ type OptionalProps = {
 	type: InputTextType;
 	value: string;
 	msg: Stringified<MsgPropType>;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHasCounter &
 	PropHideError &
 	PropHideLabel &
@@ -47,6 +49,7 @@ type OptionalProps = {
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropSuggestions &
 	PropSyncValueBySelector &
 	PropTouched;
@@ -60,7 +63,6 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	currentLength: number;
 	hint: string;
@@ -72,13 +74,15 @@ type OptionalStates = {
 	smartButton: ButtonProps;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHasCounter &
 	PropHideLabel &
 	PropMsg &
 	PropName &
 	PropReadOnly &
 	PropRequired &
+	PropShortKey &
 	PropTouched;
 
 export type InputTextProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/link.ts b/packages/components/src/schema/components/link.ts
index 068a4e1da0..2756e68a59 100644
--- a/packages/components/src/schema/components/link.ts
+++ b/packages/components/src/schema/components/link.ts
@@ -14,6 +14,7 @@ import type {
 	PropLabelWithExpertSlot,
 	PropLinkOnCallbacks,
 	PropLinkTarget,
+	PropShortKey,
 	PropTooltipAlign,
 } from '../props';
 
@@ -36,6 +37,7 @@ export type OptionalProps = {
 	PropLabelWithExpertSlot &
 	PropLinkOnCallbacks &
 	PropLinkTarget &
+	PropShortKey &
 	PropTooltipAlign;
 
 type RequiredStates = PropAriaCurrentValue & PropIcons & PropHref;
diff --git a/packages/components/src/schema/components/select.ts b/packages/components/src/schema/components/select.ts
index 9c586f17ab..09a3c25c32 100644
--- a/packages/components/src/schema/components/select.ts
+++ b/packages/components/src/schema/components/select.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -13,6 +14,7 @@ import type {
 	PropOptionsWithOptgroup,
 	PropRequired,
 	PropRows,
+	PropShortKey,
 	PropSyncValueBySelector,
 	PropTouched,
 } from '../props';
@@ -20,7 +22,6 @@ import type { InputTypeOnDefault, KoliBriHorizontalIcons, SelectOption, Stringif
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	/**
 	 * @deprecated Will be removed in v3. Use `msg` instead.
@@ -32,7 +33,8 @@ type OptionalProps = {
 	on: InputTypeOnDefault;
 	tabIndex: number;
 	value: Stringified<W3CInputValue[]>;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropMultiple &
@@ -40,6 +42,7 @@ type OptionalProps = {
 	PropOptionsWithOptgroup & // PropOptionsWithOptgroup becomes required with 2.0
 	PropRequired &
 	PropRows &
+	PropShortKey &
 	PropSyncValueBySelector &
 	PropTouched;
 
@@ -52,20 +55,21 @@ type RequiredStates = {
 	PropMultiple &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	error: string;
 	hint: string;
 	icons: KoliBriHorizontalIcons;
 	on: InputTypeOnDefault;
 	tabIndex: number;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropId &
 	PropName &
 	PropRequired &
 	PropRows &
 	PropMsg &
+	PropShortKey &
 	PropTouched;
 
 export type SelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/single-select.ts b/packages/components/src/schema/components/single-select.ts
index 094f932fb6..552fb407cb 100644
--- a/packages/components/src/schema/components/single-select.ts
+++ b/packages/components/src/schema/components/single-select.ts
@@ -1,6 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 
 import type {
+	MsgPropType,
 	PropDisabled,
 	PropHideError,
 	PropHideLabel,
@@ -12,13 +13,13 @@ import type {
 	PropSyncValueBySelector,
 	PropTouched,
 	PropOptions,
-	MsgPropType,
+	PropShortKey,
+	PropAccessKey,
 } from '../props';
 import type { InputTypeOnDefault, KoliBriHorizontalIcons, Option, StencilUnknown, Stringified } from '../types';
 
 type RequiredProps = PropLabelWithExpertSlot & PropOptions;
 type OptionalProps = {
-	accessKey: string;
 	hint: string;
 	icons: Stringified<KoliBriHorizontalIcons>;
 	msg: Stringified<MsgPropType>;
@@ -26,12 +27,14 @@ type OptionalProps = {
 	placeholder: string;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideError &
 	PropHideLabel &
 	PropName &
 	PropRequired &
 	PropSyncValueBySelector &
+	PropShortKey &
 	PropTouched;
 
 type RequiredStates = {
@@ -40,7 +43,6 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	hint: string;
 	value: string;
@@ -48,12 +50,14 @@ type OptionalStates = {
 	on: InputTypeOnDefault;
 	tabIndex: number;
 	placeholder: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHideLabel &
 	PropId &
 	PropName &
 	PropRequired &
 	PropMsg &
+	PropShortKey &
 	PropTouched;
 
 export type SingleSelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/span.ts b/packages/components/src/schema/components/span.ts
index 06f66863b9..530072bf40 100644
--- a/packages/components/src/schema/components/span.ts
+++ b/packages/components/src/schema/components/span.ts
@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import type { PropAccessKey, PropHideLabel, PropLabelWithExpertSlot } from '../props';
+import type { PropHideLabel, PropLabelWithExpertSlot, PropBadgeText } from '../props';
 import type { KoliBriCustomIcon, KoliBriIconsProp, Stringified } from '../types';
 
 type RequiredProps = PropLabelWithExpertSlot;
@@ -8,7 +8,7 @@ type OptionalProps = {
 	allowMarkdown: boolean;
 	icons: Stringified<KoliBriIconsProp>;
 } & PropHideLabel &
-	PropAccessKey;
+	PropBadgeText;
 
 type RequiredStates = {
 	allowMarkdown: boolean;
@@ -19,7 +19,7 @@ type RequiredStates = {
 		left?: KoliBriCustomIcon;
 	};
 } & PropLabelWithExpertSlot;
-type OptionalStates = PropHideLabel & PropAccessKey;
+type OptionalStates = PropHideLabel & PropBadgeText;
 
 export type SpanProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type SpanStates = Generic.Element.Members<RequiredStates, OptionalStates>;
diff --git a/packages/components/src/schema/components/textarea.ts b/packages/components/src/schema/components/textarea.ts
index d54bda5c3d..f9bc3941e3 100644
--- a/packages/components/src/schema/components/textarea.ts
+++ b/packages/components/src/schema/components/textarea.ts
@@ -2,6 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 
 import type {
 	MsgPropType,
+	PropAccessKey,
 	PropAdjustHeight,
 	PropDisabled,
 	PropHasCounter,
@@ -14,6 +15,7 @@ import type {
 	PropReadOnly,
 	PropRequired,
 	PropRows,
+	PropShortKey,
 	PropSyncValueBySelector,
 	PropTouched,
 } from '../props';
@@ -27,7 +29,6 @@ export type CSSResize = (typeof cssResizeOptions)[number];
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	accessKey: string;
 	alert: boolean;
 	/**
 	 * @deprecated Will be removed in v3. Use `msg` instead.
@@ -42,7 +43,8 @@ type OptionalProps = {
 	resize: CSSResize;
 	tabIndex: number;
 	value: string;
-} & PropAdjustHeight &
+} & PropAccessKey &
+	PropAdjustHeight &
 	PropDisabled &
 	PropHasCounter &
 	PropHideError &
@@ -52,6 +54,7 @@ type OptionalProps = {
 	PropRequired &
 	PropRows &
 	PropSyncValueBySelector &
+	PropShortKey &
 	PropTouched;
 
 type RequiredStates = {
@@ -64,7 +67,6 @@ type RequiredStates = {
 	PropHideError &
 	PropLabelWithExpertSlot;
 type OptionalStates = {
-	accessKey: string;
 	alert: boolean;
 	error: string;
 	hint: string;
@@ -74,7 +76,8 @@ type OptionalStates = {
 	placeholder: string;
 	tabIndex: number;
 	value: string;
-} & PropDisabled &
+} & PropAccessKey &
+	PropDisabled &
 	PropHasCounter &
 	PropHideLabel &
 	PropMsg &
@@ -82,6 +85,7 @@ type OptionalStates = {
 	PropReadOnly &
 	PropRequired &
 	PropRows &
+	PropShortKey &
 	PropTouched;
 
 export type TextareaProps = Generic.Element.Members<RequiredProps, OptionalProps>;
diff --git a/packages/components/src/schema/components/tooltip.ts b/packages/components/src/schema/components/tooltip.ts
index dac6dc5a40..5632eb7bd6 100644
--- a/packages/components/src/schema/components/tooltip.ts
+++ b/packages/components/src/schema/components/tooltip.ts
@@ -1,12 +1,12 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import type { PropAccessKey, PropAlign, PropId, PropLabel } from '../props';
+import type { PropAlign, PropBadgeText, PropId, PropLabel } from '../props';
 
 type RequiredProps = PropLabel;
-type OptionalProps = PropAccessKey & PropAlign & PropId;
+type OptionalProps = PropBadgeText & PropAlign & PropId;
 
 type RequiredStates = PropLabel & PropAlign;
-type OptionalStates = PropAccessKey & PropId;
+type OptionalStates = PropBadgeText & PropId;
 
 export type TooltipProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TooltipStates = Generic.Element.Members<RequiredStates, OptionalStates>;
diff --git a/packages/components/src/schema/props/badge-text.ts b/packages/components/src/schema/props/badge-text.ts
new file mode 100644
index 0000000000..af11a472fa
--- /dev/null
+++ b/packages/components/src/schema/props/badge-text.ts
@@ -0,0 +1,19 @@
+import type { Generic } from 'adopted-style-sheets';
+import { watchString } from '../utils';
+import type { AccessKeyPropType } from './access-key';
+import type { ShortKeyPropType } from './short-key';
+
+/* types */
+export type BadgeTextPropType = AccessKeyPropType | ShortKeyPropType;
+
+/**
+ * Defines the elements badge text.
+ */
+export type PropBadgeText = {
+	badgeText: BadgeTextPropType;
+};
+
+/* validator */
+export const validateBadgeText = (component: Generic.Element.Component, value?: BadgeTextPropType): void => {
+	watchString(component, '_badgeText', value);
+};
diff --git a/packages/components/src/schema/props/index.ts b/packages/components/src/schema/props/index.ts
index 1278af3f8f..79a39f63c5 100644
--- a/packages/components/src/schema/props/index.ts
+++ b/packages/components/src/schema/props/index.ts
@@ -11,6 +11,7 @@ export * from './aria-description';
 export * from './aria-expanded';
 export * from './aria-owns';
 export * from './aria-selected';
+export * from './badge-text';
 export * from './button-callbacks';
 export * from './button-type';
 export * from './button-variant';
@@ -51,6 +52,7 @@ export * from './popover-callbacks';
 export * from './read-only';
 export * from './required';
 export * from './rows';
+export * from './short-key';
 export * from './show';
 export * from './suggestions';
 export * from './sync-value-by-selector';
diff --git a/packages/components/src/schema/props/short-key.ts b/packages/components/src/schema/props/short-key.ts
new file mode 100644
index 0000000000..28f6344899
--- /dev/null
+++ b/packages/components/src/schema/props/short-key.ts
@@ -0,0 +1,17 @@
+import type { Generic } from 'adopted-style-sheets';
+import { watchString } from '../utils';
+
+/* types */
+export type ShortKeyPropType = string;
+
+/**
+ * Defines the elements short key.
+ */
+export type PropShortKey = {
+	shortKey: ShortKeyPropType;
+};
+
+/* validator */
+export const validateShortKey = (component: Generic.Element.Component, value?: ShortKeyPropType): void => {
+	watchString(component, '_shortKey', value);
+};
diff --git a/packages/components/src/schema/utils/reuse.ts b/packages/components/src/schema/utils/reuse.ts
index 985f294023..b554821172 100644
--- a/packages/components/src/schema/utils/reuse.ts
+++ b/packages/components/src/schema/utils/reuse.ts
@@ -26,3 +26,13 @@ export const handleSlotContent = (hostRef: HTMLElement, slotRef: HTMLElement, sl
  * @returns  True if the label is an empty string
  */
 export const showExpertSlot = (label: unknown) => label === '';
+
+/**
+ * This function builds the BadgeText. It chooses access key over shortkey or empty string, if both are empty
+ * @param accessKey
+ * @param shortKey
+ * @returns returns badgeText as string
+ */
+export const buildBadgeTextString = (accessKey?: string, shortKey?: string) => {
+	return accessKey || shortKey || '';
+};
diff --git a/packages/components/src/schema/validators/access-and-short-key.ts b/packages/components/src/schema/validators/access-and-short-key.ts
new file mode 100644
index 0000000000..2787284a45
--- /dev/null
+++ b/packages/components/src/schema/validators/access-and-short-key.ts
@@ -0,0 +1,7 @@
+import type { AccessKeyPropType, ShortKeyPropType } from '../props';
+
+export const validateAccessAndShortKey = (accessKey?: AccessKeyPropType, shortKey?: ShortKeyPropType) => {
+	if (accessKey && shortKey) {
+		throw new Error('AccessKey and ShortKey are used. Only one is allowed.');
+	}
+};
diff --git a/packages/components/src/utils/testing/snapshot-input-testing.tsx b/packages/components/src/utils/testing/snapshot-input-testing.tsx
index c7c5c37228..ff381e4d28 100644
--- a/packages/components/src/utils/testing/snapshot-input-testing.tsx
+++ b/packages/components/src/utils/testing/snapshot-input-testing.tsx
@@ -17,6 +17,7 @@ export function executeInputSnapshotTests<Props extends Record<string, unknown>>
 	const propVariants: Props[] = [
 		{ ...(baseObj as Props) },
 		{ ...(baseObj as Props), _accessKey: 'V' },
+		{ ...(baseObj as Props), _shortKey: 'S' },
 		{ ...(baseObj as Props), _alert: true },
 		{ ...(baseObj as Props), _readOnly: true },
 		{ ...(baseObj as Props), _disabled: true },
diff --git a/packages/samples/react/src/components/button-link/basic.tsx b/packages/samples/react/src/components/button-link/basic.tsx
index f4f82fc12d..b634443e94 100644
--- a/packages/samples/react/src/components/button-link/basic.tsx
+++ b/packages/samples/react/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>
+		</>
+	);
+};
diff --git a/packages/samples/react/src/components/button/routes.ts b/packages/samples/react/src/components/button/routes.ts
index 0307149a21..649753bf39 100644
--- a/packages/samples/react/src/components/button/routes.ts
+++ b/packages/samples/react/src/components/button/routes.ts
@@ -5,6 +5,7 @@ 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 = {
@@ -15,6 +16,7 @@ export const BUTTON_ROUTES: Routes = {
 		'access-key': ButtonAccessKey,
 		'aria-description': ButtonAriaDescription,
 		baselined: ButtonBaselined,
+		'short-key': ButtonShortKey,
 		'expert-slot': ButtonExpertSlot,
 	},
 };
diff --git a/packages/samples/react/src/components/button/short-key.tsx b/packages/samples/react/src/components/button/short-key.tsx
new file mode 100644
index 0000000000..55d614a8e8
--- /dev/null
+++ b/packages/samples/react/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>
+		</>
+	);
+};
diff --git a/packages/samples/react/src/components/combobox/partials/cases.tsx b/packages/samples/react/src/components/combobox/partials/cases.tsx
index 46d05f4589..27bd084d01 100644
--- a/packages/samples/react/src/components/combobox/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 };
diff --git a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
index f0d57b9565..7a3f9a97cf 100644
--- a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-color/partials/cases.tsx b/packages/samples/react/src/components/input-color/partials/cases.tsx
index d84c425b94..45a8dff75e 100644
--- a/packages/samples/react/src/components/input-color/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-date/partials/cases.tsx b/packages/samples/react/src/components/input-date/partials/cases.tsx
index 45d47cdd8d..4071070e63 100644
--- a/packages/samples/react/src/components/input-date/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-email/partials/cases.tsx b/packages/samples/react/src/components/input-email/partials/cases.tsx
index c22a9f9fd4..a2f0a7925c 100644
--- a/packages/samples/react/src/components/input-email/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-file/partials/cases.tsx b/packages/samples/react/src/components/input-file/partials/cases.tsx
index 2eeae03eef..958eaced16 100644
--- a/packages/samples/react/src/components/input-file/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx
index e87f0e4d98..f25c9c3255 100644
--- a/packages/samples/react/src/components/input-number/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-password/partials/cases.tsx b/packages/samples/react/src/components/input-password/partials/cases.tsx
index 6d5fe59e28..01561a62ca 100644
--- a/packages/samples/react/src/components/input-password/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-radio/partials/cases.tsx b/packages/samples/react/src/components/input-radio/partials/cases.tsx
index b99021c91f..af1e61739b 100644
--- a/packages/samples/react/src/components/input-radio/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-range/partials/cases.tsx b/packages/samples/react/src/components/input-range/partials/cases.tsx
index 8f0371bf56..cd3a3843fd 100644
--- a/packages/samples/react/src/components/input-range/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/input-text/partials/cases.tsx b/packages/samples/react/src/components/input-text/partials/cases.tsx
index 0ec6e79119..7e87adec56 100644
--- a/packages/samples/react/src/components/input-text/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/link-button/basic.tsx b/packages/samples/react/src/components/link-button/basic.tsx
index f4cd52e73f..87f80248ce 100644
--- a/packages/samples/react/src/components/link-button/basic.tsx
+++ b/packages/samples/react/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>
 	</>
diff --git a/packages/samples/react/src/components/link/access-key.tsx b/packages/samples/react/src/components/link/access-key.tsx
new file mode 100644
index 0000000000..44a1799911
--- /dev/null
+++ b/packages/samples/react/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>
+	</>
+);
diff --git a/packages/samples/react/src/components/link/routes.ts b/packages/samples/react/src/components/link/routes.ts
index 6f30683e35..5154b0eec2 100644
--- a/packages/samples/react/src/components/link/routes.ts
+++ b/packages/samples/react/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,
 	},
 };
diff --git a/packages/samples/react/src/components/link/short-key.tsx b/packages/samples/react/src/components/link/short-key.tsx
new file mode 100644
index 0000000000..bc5beb4c7b
--- /dev/null
+++ b/packages/samples/react/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>
+	</>
+);
diff --git a/packages/samples/react/src/components/select/partials/cases.tsx b/packages/samples/react/src/components/select/partials/cases.tsx
index b410935f81..c3a998e873 100644
--- a/packages/samples/react/src/components/select/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/single-select/partials/cases.tsx b/packages/samples/react/src/components/single-select/partials/cases.tsx
index db5b537f6f..ad3526f59a 100644
--- a/packages/samples/react/src/components/single-select/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/samples/react/src/components/textarea/partials/cases.tsx b/packages/samples/react/src/components/textarea/partials/cases.tsx
index de65d48e7c..a445ddb5e5 100644
--- a/packages/samples/react/src/components/textarea/partials/cases.tsx
+++ b/packages/samples/react/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>
 	);
 });
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png
index 36faa34fa2..8dac111a83 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png
index 5920c3366c..3ccfc24296 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-alert-card-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png
index 83c0d8c0e4..fe23110720 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png
index 4bde7355c0..39bc24d115 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index c40d299f9e..3ef542b914 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png
index 289b087c97..8842d55bcb 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-details-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
index a34229d92b..d79ab23a09 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-firefox-linux.png
index c92d08db32..b1eab41d4e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-icon-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index 6921d91581..72402e97de 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index 3f7384bb86..c7ead85044 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index cb70a2e5a1..8780d70a39 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 695cbcefbe..dea87c6395 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index 906bf42572..4e94aa19e7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index 4c661a883b..fcc8bd5be7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 11525bed56..c06e8f5a3c 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index 27cc107d8e..6987299757 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index 360acb77d7..fa1613820a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index 496a6eb5ed..8f359170ac 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index 0484dd199e..e7d42faa73 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index e419768b70..e4155ed2d2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png
index 4c18176a01..d91091e649 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png
index 7123c8cf69..6e0ea184ba 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-accordion-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png
index e6afa2b8b6..ffb7dea5f4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png
index b2661c7db7..b699adb22f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index b86f38f016..252447f5c7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 868e7beb7d..89b1dd2b39 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png
index dcda89caf2..dde2ef6efb 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-default-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png
index bded355143..b170ba61e9 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png
index 25e01b0125..0340036e29 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-error-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png
index 53348fdf17..6e9b8fee3d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png
index eea4ff268a..317bcb9f0a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-info-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png
index 85f8292620..498b0ffabe 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png
index 35bff3386e..d52d863cd8 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-success-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png
index 89e1591a39..04766acca2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png
index c0caa96e83..5af07fa5b5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-type-warning-variant-msg-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png
index 22341fa910..000c261f90 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-card-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png
index c7fa80c80e..0f2f57552c 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-toast-basic-variant-msg-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-button-link-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-button-link-basic-firefox-linux.png
index 638a417275..ea643e0f2d 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-button-link-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-button-link-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-combobox-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-combobox-basic-firefox-linux.png
index ea29889d1d..9593ddd614 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-combobox-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-basic-firefox-linux.png
index 66acd04b7c..9d721deb31 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-button-firefox-linux.png
index 62f09773e0..ff1cec4b1a 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-switch-firefox-linux.png
index 0460d4d927..29c5a99674 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-color-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-color-basic-firefox-linux.png
index beb884b703..a3d400a52e 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-color-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-date-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-date-basic-firefox-linux.png
index c8a313c8a4..640db4c6ef 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-date-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-email-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-email-basic-firefox-linux.png
index e08b13075c..f9ad526077 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-email-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-file-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-file-basic-firefox-linux.png
index 9740d147f3..f04452cea1 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-file-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-number-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-number-basic-firefox-linux.png
index c9136a330a..ccfb9dc45f 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-number-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-password-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-password-basic-firefox-linux.png
index 607617e5b9..d3db1572c4 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-password-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-radio-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-radio-basic-firefox-linux.png
index abf94c6ca2..9fd6a3e558 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-range-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-range-basic-firefox-linux.png
index 99b834d772..8d17bcfd98 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-range-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-text-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-text-basic-firefox-linux.png
index 815a6c8125..3ba19b3020 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-text-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-link-button-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-link-button-basic-firefox-linux.png
index 72b9e63d62..c70ebcf441 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-link-button-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-link-button-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-select-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-select-basic-firefox-linux.png
index 360155e4e9..674fdb4a4c 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-select-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-select-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-single-select-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-single-select-basic-firefox-linux.png
index 99db9a6641..71037c8bde 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-single-select-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-textarea-basic-firefox-linux.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-textarea-basic-firefox-linux.png
index 382388ba49..85580f32af 100644
Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-textarea-basic-firefox-linux.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png
index 83c0d8c0e4..fe23110720 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-access-key-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png
index 4bde7355c0..39bc24d115 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-button-link-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index c40d299f9e..77552d3287 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index 378e822aa5..8d8d8c3501 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index 3f7384bb86..c7ead85044 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index cb70a2e5a1..8780d70a39 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 695cbcefbe..d1d6d434e1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index 906bf42572..907ce28b44 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index 4c661a883b..7aab13845c 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 11525bed56..b78ee47643 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index 27cc107d8e..3f9025a81c 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index 360acb77d7..f317e6e901 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index 496a6eb5ed..888da95691 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index 0484dd199e..7277f4476e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index e419768b70..e4155ed2d2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png
index 4c18176a01..d91091e649 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-link-button-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png
index b2661c7db7..a9f0c07a8f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index b86f38f016..b8d0864418 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 868e7beb7d..24ef25f842 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ