Merge branch 'develop' into 7510-rename-rem-function-v3

Author: anicyne

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/AGENTS.md

@@ -35,3 +35,15 @@ Use the `condition && <Element />` pattern to render JSX elements only when a co
 ```
 
 Avoid using `hidden={condition}` unless the element should always be present in the DOM but visually hidden.
+
+### Language texts
+
+All UI texts must be stored in `src/locales/en.ts` and `src/locales/de.ts`.
+New translations get the prefix `kol-` and are referenced in the code using the
+`translate()` helper, e.g. `translate('kol-example')`.
+Call `translate()` once when the component instance is created (e.g. in a field
+initializer) and reuse the result. This prevents unnecessary work while still
+updating texts when the component is rerendered. Cache the value in a class
+property whose name starts with `translate` followed by the translation
+identifier, for example `translateSort` for `kol-sort` or `translateOrderBy`
+for `kol-order-by`.

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>