Localization Toggle UI

Build a small UI module that mounts a date selection control and a paginated list into a provided DOM element. All visible text and accessibility labels for these controls must come from the UI dependency's global localization and accessibility configuration, with runtime switching between English and Spanish.

Capabilities

Default locale applied

• On initialization, the mounted date input and pagination controls render using the default locale bundle's month names, day abbreviations, and previous/next labels. @test

Runtime locale switch

• Invoking the locale-switch helper swaps the UI to the alternate locale so both controls immediately display the new language text and aria labels without a reload. @test

Accessibility overrides

• Passing custom accessibility text for close and pagination controls overrides the dependency defaults so the rendered aria-labels/tooltips reflect the override values. @test

Locale-aware formatting helpers

• The module exposes formatting helpers that return the active locale's date string and pagination label, matching what the UI renders after any locale switch. @test

Implementation

@generates

API

export type SupportedLocale = 'en' | 'es';

export interface LocaleBundle {
  name: SupportedLocale;
  calendarLabels: {
    monthNames: string[];
    dayNamesShort: string[];
    today: string;
  };
  paginationLabels: {
    previous: string;
    next: string;
    pageLabel: (page: number) => string;
  };
  accessibility?: {
    close?: string;
    nextPage?: string;
    previousPage?: string;
  };
}

export interface SetupOptions {
  target: HTMLElement;
  defaultLocale?: SupportedLocale;
  overrides?: {
    accessibility?: {
      close?: string;
      nextPage?: string;
      previousPage?: string;
    };
  };
  items: string[];
  pageSize: number;
}

export interface LocalizationRuntime {
  currentLocale: SupportedLocale;
  switchLocale(next: SupportedLocale): void;
  formatDate(date: Date): string;
  formatPagination(page: number): string;
}

export function createLocalizedUi(locales: LocaleBundle[], options: SetupOptions): LocalizationRuntime;

Dependencies { .dependencies }

primevue { .dependency }

Provides UI components with built-in localization and accessibility configuration.