Refactor translations to use cached values

AGENTS.md

@@ -232,6 +232,7 @@ The samples are located in `packages/samples/react` and demonstrate how to use t
 - See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.
 - Spell "KoliBri" with this casing in all documentation and code. The only exception is the component named KolKolibri.
 - Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.
+- Do not place constant declarations before import statements; imports must always be at the very top of the file.
 
 ## Linting and Formatting
 

packages/components/src/components/card/component.tsx

@@ -19,6 +19,7 @@ import { dispatchDomEvent, KolEvent } from '../../utils/events';
 })
 export class KolCard implements CardAPI {
 	@Element() private readonly host?: HTMLKolCardElement;
+	private readonly translateClose = translate('kol-close');
 
 	private readonly close = () => {
 		if (this._on?.onClose !== undefined) {
@@ -54,7 +55,7 @@ export class KolCard implements CardAPI {
 								icon: 'codicon codicon-close',
 							},
 						}}
-						_label={translate('kol-close')}
+						_label={this.translateClose}
 						_on={this.on}
 						_tooltipAlign="left"
 					></KolButtonWcTag>

packages/components/src/components/form/shadow.tsx

@@ -23,6 +23,9 @@ export class KolForm implements FormAPI {
 	@Element() private readonly host?: HTMLKolTextareaElement;
 	errorListBlock?: HTMLElement;
 	errorListFirstLink?: HTMLElement;
+	private readonly translateErrorListMessage = translate('kol-error-list-message');
+	private readonly translateErrorList = translate('kol-error-list');
+	private readonly translateFormDescription = translate('kol-form-description');
 
 	/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */
 	private readonly onSubmit = (event: Event) => {
@@ -60,8 +63,8 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc class="kol-form__alert" ref={this.setBlockElement} type="error" variant="card" label={translate('kol-error-list-message')}>
-				<nav aria-label={translate('kol-error-list')}>
+			<KolAlertFc class="kol-form__alert" ref={this.setBlockElement} type="error" variant="card" label={this.translateErrorListMessage}>
+				<nav aria-label={this.translateErrorList}>
 					<ul>
 						{errorList?.map((error, index) => (
 							<li key={index}>
@@ -85,7 +88,7 @@ export class KolForm implements FormAPI {
 			<form class="kol-form" method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
 				{this.state._requiredText === true ? (
 					<p>
-						<div class="kol-form__mandatory-fields-hint">{translate('kol-form-description')}</div>
+						<div class="kol-form__mandatory-fields-hint">{this.translateFormDescription}</div>
 					</p>
 				) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
 					<p>

packages/components/src/components/input-file/shadow.tsx

@@ -44,6 +44,9 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputFileElement;
 	private inputRef?: HTMLInputElement;
 
+	private readonly translateDataBrowseText = translate('kol-data-browse-text');
+	private readonly translateFilenameText = translate('kol-filename-text');
+
 	private readonly catchRef = (ref?: HTMLInputElement) => {
 		this.inputRef = ref;
 	};
@@ -97,7 +100,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 				<KolInputContainerFc state={this.state}>
 					<span class={clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected })}>{this.filename}</span>
 					<KolInputStateWrapperFc {...this.getInputProps()} />
-					<KolButtonWcTag class="kol-input-container__button" _label={translate('kol-data-browse-text')} _buttonVariant="primary" _disabled={this._disabled} />
+					<KolButtonWcTag class="kol-input-container__button" _label={this.translateDataBrowseText} _buttonVariant="primary" _disabled={this._disabled} />
 				</KolInputContainerFc>
 			</KolFormFieldStateWrapperFc>
 		);
@@ -208,7 +211,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 	 */
 	@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;
 
-	@State() private filename: string = translate('kol-filename-text');
+	@State() private filename: string = this.translateFilenameText;
 	@State() private hasFileSelected: boolean = false;
 
 	@State() public state: InputFileStates = {
@@ -357,7 +360,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 				? Array.from(value)
 						.map((file) => file.name)
 						.join(', ')
-				: translate('kol-filename-text');
+				: this.translateFilenameText;
 
 			this.controller.onFacade.onChange(event, value);
 			this.controller.setFormAssociatedValue(value);

packages/components/src/components/input-password/shadow.tsx

@@ -48,6 +48,9 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputPasswordElement;
 	private inputRef?: HTMLInputElement;
 
+	private readonly translateHidePassword = translate('kol-hide-password');
+	private readonly translateShowPassword = translate('kol-show-password');
+
 	private readonly catchRef = (ref?: HTMLInputElement) => {
 		this.inputRef = ref;
 	};
@@ -121,7 +124,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 				componentName="button"
 				class="kol-input-password__password-toggle-button"
 				data-testid="kol-input-password-toggle-button"
-				label={this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password')}
+				label={this._passwordVisible ? this.translateHidePassword : this.translateShowPassword}
 				buttonVariant="ghost"
 				onClick={(): void => {
 					this._passwordVisible = !this._passwordVisible;

packages/components/src/components/kolibri/shadow.tsx

@@ -17,10 +17,11 @@ import type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../sc
 	shadow: true,
 })
 export class KolKolibri implements KolibriAPI {
+	private readonly translateKolibriLogo = translate('kol-kolibri-logo');
 	public render(): JSX.Element {
 		const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
 		return (
-			<svg class="kol-kolibri" role="img" aria-label={translate('kol-kolibri-logo')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
+			<svg class="kol-kolibri" role="img" aria-label={this.translateKolibriLogo} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
 				<path d="M353 322L213 304V434L353 322Z" />
 				<path d="M209 564V304L149 434L209 564Z" />
 				<path d="M357 316L417 250L361 210L275 244L357 316Z" />

packages/components/src/components/link/component.tsx

@@ -74,6 +74,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
 	private unsubscribeOnLocationChange?: UnsubscribeFunction;
 
 	private readonly internalDescriptionById = nonce();
+	private readonly translateOpenLinkInTab = translate('kol-open-link-in-tab');
 
 	private readonly catchRef = (ref?: HTMLAnchorElement) => {
 		this.anchorRef = ref;
@@ -153,7 +154,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
 					aria-owns={this.state._ariaOwns}
 					aria-label={
 						this.state._hideLabel && typeof this.state._label === 'string'
-							? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
+							? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
 							: undefined
 					}
 					class={clsx('kol-link', {
@@ -184,7 +185,7 @@ export class KolLinkWc implements InternalLinkAPI, FocusableElement {
 					{isExternal && (
 						<KolIconTag
 							class="kol-link__icon"
-							_label={this.state._hideLabel ? '' : translate('kol-open-link-in-tab')}
+							_label={this.state._hideLabel ? '' : this.translateOpenLinkInTab}
 							_icons={'codicon codicon-link-external'}
 							aria-hidden={this.state._hideLabel}
 						/>

packages/components/src/components/modal/shadow.tsx

@@ -24,6 +24,7 @@ import clsx from 'clsx';
 export class KolModal implements ModalAPI {
 	@Element() private readonly host?: HTMLKolModalElement;
 	private refDialog?: HTMLDialogElement;
+	private readonly translateClose = translate('kol-close');
 
 	public disconnectedCallback(): void {
 		void this.closeModal();
@@ -82,7 +83,7 @@ export class KolModal implements ModalAPI {
 								icon: 'codicon codicon-close',
 							},
 						}}
-						_label={translate('kol-close')}
+						_label={this.translateClose}
 						_on={this.on}
 						_tooltipAlign="left"
 					></KolButtonWcTag>

packages/components/src/components/pagination/component.tsx

@@ -63,6 +63,13 @@ export class KolPaginationWc implements PaginationAPI {
 	@Element() private readonly host?: HTMLKolTextareaElement;
 
 	private readonly nonce = nonce();
+	private readonly translatePageFirst = translate('kol-page-first');
+	private readonly translatePageBack = translate('kol-page-back');
+	private readonly translatePageNext = translate('kol-page-next');
+	private readonly translatePageLast = translate('kol-page-last');
+	private readonly translateEntriesPerSite = translate('kol-entries-per-site');
+	private readonly translatePage = translate('kol-page');
+	private readonly translatePagination = translate('kol-pagination');
 
 	private readonly calcCount = (total: number, pageSize = 1): number => Math.ceil(total / pageSize);
 
@@ -110,7 +117,7 @@ export class KolPaginationWc implements PaginationAPI {
 									_disabled={this.state._page <= 1}
 									_icons={leftDoubleArrowIcon}
 									_hideLabel
-									_label={translate('kol-page-first')}
+									_label={this.translatePageFirst}
 									_on={this.onGoToFirst}
 									_tooltipAlign={this.state._tooltipAlign}
 								></KolButtonWcTag>
@@ -125,7 +132,7 @@ export class KolPaginationWc implements PaginationAPI {
 									_disabled={this.state._page <= 1}
 									_icons={leftSingleArrow}
 									_hideLabel
-									_label={translate('kol-page-back')}
+									_label={this.translatePageBack}
 									_on={this.onGoBackward}
 									_tooltipAlign={this.state._tooltipAlign}
 								></KolButtonWcTag>
@@ -141,7 +148,7 @@ export class KolPaginationWc implements PaginationAPI {
 									_disabled={count <= this.state._page}
 									_icons={rightSingleArrowIcon}
 									_hideLabel
-									_label={translate('kol-page-next')}
+									_label={this.translatePageNext}
 									_on={this.onGoForward}
 									_tooltipAlign={this.state._tooltipAlign}
 								></KolButtonWcTag>
@@ -156,7 +163,7 @@ export class KolPaginationWc implements PaginationAPI {
 									_disabled={count <= this.state._page}
 									_icons={rightDoubleArrowIcon}
 									_hideLabel
-									_label={translate('kol-page-last')}
+									_label={this.translatePageLast}
 									_on={this.onGoToEnd}
 									_tooltipAlign={this.state._tooltipAlign}
 								></KolButtonWcTag>
@@ -169,7 +176,7 @@ export class KolPaginationWc implements PaginationAPI {
 						class="kol-pagination__page-size-select"
 						_hideLabel
 						_id={`pagination-size-${this.nonce}`}
-						_label={translate('kol-entries-per-site')}
+						_label={this.translateEntriesPerSite}
 						_options={this.state._pageSizeOptions}
 						_on={{
 							onChange: this.onChangePageSize,
@@ -238,7 +245,7 @@ export class KolPaginationWc implements PaginationAPI {
 
 	@State() public state: PaginationStates = {
 		_boundaryCount: 1,
-		_label: translate('kol-pagination'),
+		_label: this.translatePagination,
 		_hasButtons: {
 			first: true,
 			last: true,
@@ -328,7 +335,7 @@ export class KolPaginationWc implements PaginationAPI {
 					}}
 				>
 					<span slot="expert">
-						<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
+						<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
 					</span>
 				</KolButtonWcTag>
 			</li>
@@ -340,7 +347,7 @@ export class KolPaginationWc implements PaginationAPI {
 			<li key={nonce()}>
 				<KolButtonWcTag class="kol-pagination__button kol-pagination__button--selected" _customClass={this.state._customClass} _disabled={true} _label="">
 					<span slot="expert">
-						<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
+						<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
 					</span>
 				</KolButtonWcTag>
 			</li>

packages/components/src/components/single-select/shadow.tsx

@@ -51,6 +51,8 @@ export class KolSingleSelect implements SingleSelectAPI {
 	@Element() private readonly host?: HTMLKolSingleSelectElement;
 	private refInput?: HTMLInputElement;
 	private refOptions: HTMLLIElement[] = [];
+	private readonly translateDeleteSelection = translate('kol-delete-selection');
+	private readonly translateNoResultsMessage = translate('kol-no-results-message');
 	private oldValue?: StencilUnknown;
 
 	@Method()
@@ -265,7 +267,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 							<KolIconTag
 								_icons="codicon codicon-close"
 								data-testid="single-select-delete"
-								_label={translate('kol-delete-selection')}
+								_label={this.translateDeleteSelection}
 								onClick={() => {
 									this.clearSelection();
 									this.refInput?.focus();
@@ -322,7 +324,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 									/>
 								))
 							) : (
-								<li class="kol-single-select__no-results-message">{translate('kol-no-results-message')} </li>
+								<li class="kol-single-select__no-results-message">{this.translateNoResultsMessage} </li>
 							)}
 						</CustomSuggestionsOptionsGroupFc>
 					)}

packages/components/src/components/spin/shadow.tsx

@@ -33,22 +33,24 @@ function renderSpin(variant: SpinVariantPropType): JSX.Element {
 })
 export class KolSpin implements SpinAPI {
 	private showToggled = false;
+	private readonly translateActionRunning = translate('kol-action-running');
+	private readonly translateActionDone = translate('kol-action-done');
 
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-spin">
 				{this.state._show ? (
 					<span
 						aria-busy="true"
-						aria-label={translate('kol-action-running')}
+						aria-label={this.translateActionRunning}
 						aria-live="polite"
 						class={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}
 						role="alert"
 					>
 						{renderSpin(this.state._variant)}
 					</span>
 				) : (
-					this.showToggled && <span aria-label={translate('kol-action-done')} aria-busy="false" aria-live="polite" role="alert"></span>
+					this.showToggled && <span aria-label={this.translateActionDone} aria-busy="false" aria-live="polite" role="alert"></span>
 				)}
 			</Host>
 		);

packages/components/src/components/table-stateless/component.tsx

@@ -53,6 +53,8 @@ import { validateTableSettings } from '../../schema/props/table-settings';
 export class KolTableStateless implements TableStatelessAPI {
 	@Element() private readonly host?: HTMLKolTableStatelessWcElement;
 
+	private readonly translateNoEntries = translate('kol-no-entries');
+
 	@State() public state: TableStatelessStates = {
 		_data: [],
 		_headerCells: {
@@ -447,7 +449,7 @@ export class KolTableStateless implements TableStatelessAPI {
 			}
 			const emptyCell = {
 				colSpan: colspan,
-				label: translate('kol-no-entries'),
+				label: this.translateNoEntries,
 				render: undefined,
 				rowSpan: Math.max(rowspan, 1),
 			};

packages/components/src/components/table-stateless/table-settings.tsx

@@ -17,6 +17,10 @@ export class KolTableSettings {
 	@Element() private readonly host?: HTMLKolTableSettingsWcElement;
 	@State() tableSettings: TableSettingsPropType = { columns: [] };
 	@State() errorMessage: string | null = null;
+	private readonly translateTableSettings = translate('kol-table-settings');
+	private readonly translateTableSettingsCancel = translate('kol-table-settings-cancel');
+	private readonly translateTableSettingsApply = translate('kol-table-settings-apply');
+	private readonly translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');
 	@Prop() _tableSettings: TableSettingsPropType = { columns: [] };
 
 	@Watch('_tableSettings')
@@ -83,7 +87,7 @@ export class KolTableSettings {
 		const hasVisibleColumn = this.tableSettings.columns.some((column) => column.visible);
 
 		if (!hasVisibleColumn) {
-			this.errorMessage = translate('kol-table-settings-error-all-invisible');
+			this.errorMessage = this.translateErrorAllInvisible;
 			return;
 		} else if (this.host) {
 			this.errorMessage = null;
@@ -100,12 +104,12 @@ export class KolTableSettings {
 				ref={(el) => (this.popoverRef = el)}
 				class="kol-table-settings"
 				_icons="codicon codicon-settings-gear"
-				_label={translate('kol-table-settings')}
+				_label={this.translateTableSettings}
 				_popoverAlign="top"
 				_hideLabel
 			>
 				<div class="kol-table-settings__content">
-					<KolHeadingTag _label={translate('kol-table-settings')} _level={0} />
+					<KolHeadingTag _label={this.translateTableSettings} _level={0} />
 
 					{this.errorMessage && <KolAlertWcTag _type="error" _label={this.errorMessage} _variant="msg" class="kol-table-settings__error-message" />}
 
@@ -154,12 +158,12 @@ export class KolTableSettings {
 
 						<div class="kol-table-settings__actions">
 							<KolButtonWcTag
-								_label={translate('kol-table-settings-cancel')}
+								_label={this.translateTableSettingsCancel}
 								_buttonVariant="secondary"
 								_on={{ onClick: () => this.handleCancel() }}
 								data-testid="table-settings-cancel"
 							/>
-							<KolButtonWcTag _label={translate('kol-table-settings-apply')} _buttonVariant="primary" _type="submit" data-testid="table-settings-apply" />
+							<KolButtonWcTag _label={this.translateTableSettingsApply} _buttonVariant="primary" _type="submit" data-testid="table-settings-apply" />
 						</div>
 					</form>
 				</div>

packages/components/src/components/toaster/shadow.tsx

@@ -22,6 +22,8 @@ export class KolToastContainer implements ToasterAPI {
 		_toastStates: [],
 	};
 
+	private readonly translateToastCloseAll = translate('kol-toast-close-all');
+
 	/* Keep track of render functions, so we call each only once. */
 	private knownRenderFunctions = new Set<ToastRenderFunction>();
 
@@ -121,7 +123,7 @@ export class KolToastContainer implements ToasterAPI {
 			<Host class="kol-toast-container">
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
-						_label={translate('kol-toast-close-all')}
+						_label={this.translateToastCloseAll}
 						class="kol-toast-container__button-close-all"
 						_on={{
 							onClick: () => {