@salesforce/ui-bundle-template-feature-angular-language-switcher 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/components/ui/select/select.html

@@ -0,0 +1,36 @@
+@if (label()) {
+	<label hlmLabel [for]="labelId" class="mb-1.5 block">{{ label() }}</label>
+}
+@if (!multiple()) {
+	<hlm-select
+		[value]="value()"
+		(valueChange)="onSingleChange($event)"
+		[disabled]="disabled()"
+		[itemToString]="itemToString"
+	>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select>
+} @else {
+	<hlm-select-multiple
+		[value]="$any(values())"
+		(valueChange)="onMultiChange($event)"
+		[disabled]="disabled()"
+		[itemToString]="itemToString"
+	>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select-multiple>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/components/ui/select/select.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+} from '@angular/core';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
+import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
+
+export interface AppSelectOption {
+	value: string;
+	label: string;
+}
+
+@Component({
+	selector: 'app-select',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmSelectImports, HlmLabelImports],
+	host: { class: 'block min-w-0' },
+	templateUrl: './select.html',
+})
+export class SelectComponent {
+	readonly value = model<string>('');
+	readonly values = model<readonly string[]>([]);
+	readonly multiple = input(false, { transform: booleanAttribute });
+	readonly options = input<readonly AppSelectOption[]>([]);
+	readonly placeholder = input<string>('');
+	readonly label = input<string>('');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
+	readonly size = input<AppFieldSize>('default');
+
+	private static _uid = 0;
+	protected readonly labelId = `app-select-${SelectComponent._uid++}`;
+
+	protected readonly itemToString = (value: string): string => {
+		return this.options().find((o) => o.value === value)?.label ?? value;
+	};
+
+	protected readonly triggerClasses = computed(() => {
+		if (this.appearance() === 'fill') return 'border-transparent bg-muted';
+		return '';
+	});
+
+	protected onSingleChange(event: string | null | undefined): void {
+		this.value.set(event ?? '');
+	}
+
+	protected onMultiChange(event: string[] | readonly string[] | null | undefined): void {
+		this.values.set(event ?? []);
+	}
+}
+
+export const SelectImports = [SelectComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/components/ui/separator/separator.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlmSeparatorClass } from '@spartan-ng/styles/separator';
+import { classes } from '@spartan-ng/styles/utils';
+
+export type AppSeparatorOrientation = 'horizontal' | 'vertical';
+
+@Component({
+	selector: 'app-separator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+	host: {
+		'data-slot': 'separator',
+	},
+	template: '',
+})
+export class SeparatorComponent {
+	readonly orientation = input<AppSeparatorOrientation>('horizontal');
+	readonly decorative = input(true, { transform: booleanAttribute });
+
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
+}
+
+export const SeparatorImports = [SeparatorComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/components/ui/skeleton/skeleton.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from '@spartan-ng/styles/skeleton';
+
+@Component({
+	selector: 'app-skeleton',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmSkeleton],
+	host: {
+		'aria-hidden': 'true',
+	},
+	template: '<ng-content />',
+})
+export class SkeletonComponent {}
+
+export const SkeletonImports = [SkeletonComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/components/ui/spinner/spinner.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmSpinnerImports } from '@spartan-ng/styles/spinner';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'app-spinner',
+	imports: [HlmSpinnerImports],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		role: 'status',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+	template: `<hlm-spinner />`,
+})
+export class SpinnerComponent {
+	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+
+	constructor() {
+		classes(() => 'text-[length:--spacing(4)]');
+	}
+}
+
+export const SpinnerImports = [SpinnerComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/__examples__/html-middleware-site-example.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Example: switching your app's `middleware/html.mjs` to the SITE entry of
+ * `@salesforce/angular-plugin-ui-bundle` so language switching works in local dev.
+ *
+ * This file is illustrative — it is copied into the app as an example, not used
+ * directly. Apply the change below to your real `middleware/html.mjs`.
+ *
+ * WHY: On a deployed Experience site the platform injects `SFDC_ENV.language`
+ * and folds the active language into `SFDC_ENV.basePath` (e.g. `/shop/fr`),
+ * recomputed from the URL on every load. The generic local Angular dev server
+ * does neither — `SFDC_ENV.language` is absent and `basePath` is always `/` — so
+ * the switcher can't route a non-default language locally (the reload 404s and
+ * the labels never flip). The SITE entry mirrors production for local dev only.
+ *
+ * HOW: change the import from `createHtmlMiddleware` to `createSiteHtmlMiddleware`
+ * (same package), and pass the feature's supported `LANGUAGES` (the single source
+ * of truth). The middleware needs the language CODES, so map the `{ code, label }`
+ * list to codes. Pass `defaultLanguage` explicitly so the middleware knows which
+ * language is served un-prefixed at `/`.
+ *
+ * This has NO effect on a deployed build; the middleware only runs in local dev.
+ */
+
+// In your middleware/html.mjs, replace:
+//   import { createHtmlMiddleware } from "@salesforce/angular-plugin-ui-bundle";
+//   export default await createHtmlMiddleware();
+//
+// with:
+import { createSiteHtmlMiddleware } from "@salesforce/angular-plugin-ui-bundle";
+import { DEFAULT_LANGUAGE, LANGUAGES } from "../languages";
+
+export default await createSiteHtmlMiddleware({
+	languages: LANGUAGES.map((l) => l.code),
+	defaultLanguage: DEFAULT_LANGUAGE,
+});

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/__examples__/language-switcher-example.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Example: mounting <app-language-switcher /> in an app layout/header.
+ *
+ * This file is illustrative — it is copied into the app as an example, not wired
+ * into routing. To adopt the switcher, add `LanguageSwitcherComponent` to your
+ * layout component's `imports` array and place `<app-language-switcher />` in the
+ * template wherever your app's chrome lives (typically the nav/header in
+ * `app-layout.ts`). It manages its own state from the URL + SFDC_ENV, so no
+ * inputs are required.
+ */
+
+import { Component } from "@angular/core";
+import { RouterOutlet } from "@angular/router";
+import { LanguageSwitcherComponent } from "../index";
+
+@Component({
+	selector: "app-layout-with-language-switcher",
+	standalone: true,
+	imports: [RouterOutlet, LanguageSwitcherComponent],
+	template: `
+		<nav class="bg-white border-b border-gray-200">
+			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div class="flex justify-between items-center h-16">
+					<span class="text-xl font-semibold text-gray-900">Angular App</span>
+					<div class="flex items-center gap-2">
+						<!-- Drop the switcher anywhere in your header/chrome. -->
+						<app-language-switcher />
+					</div>
+				</div>
+			</div>
+		</nav>
+		<router-outlet />
+	`,
+})
+export class AppLayoutWithLanguageSwitcherComponent {}

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/build-language-url.ts

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Strip leading and trailing slashes from a path fragment. */
+function trimSlashes(value: string): string {
+	return value.replace(/^\/+/, "").replace(/\/+$/, "");
+}
+
+/**
+ * Convert a Salesforce locale code to the form used in the URL path.
+ *
+ * Locale codes use underscores (e.g. `en_US`), but URL path segments use hyphens
+ * (e.g. `en-US`). This maps a code to its URL segment.
+ */
+function codeToUrlSegment(code: string): string {
+	return code.replace(/_/g, "-");
+}
+
+/**
+ * Convert a hyphenated language token back to a Salesforce locale code — the
+ * inverse of {@link codeToUrlSegment} (e.g. `en-US` → `en_US`). Locale codes
+ * never contain hyphens, so this remapping is unambiguous. Used both for URL
+ * path segments and for the hyphenated `SFDC_ENV.language` value the platform
+ * injects (e.g. `"en-US"`), which share the same hyphen convention.
+ */
+export function urlSegmentToCode(segment: string): string {
+	return segment.replace(/-/g, "_");
+}
+
+/**
+ * Recover the true, language-free site root from `basePath`.
+ *
+ * When a non-default language is active, the platform folds the language segment
+ * into `SFDC_ENV.basePath` itself — `/shop` becomes `/shop/fr` — rather than
+ * leaving `basePath` as the stable site root with the language living in the path
+ * after it. If we took `basePath` at face value, the language segment would be
+ * treated as part of the base and never seen as a leading language segment, so
+ * switching to the default (which should remove the segment) and switching
+ * between non-default languages (which should replace it) would both fail.
+ *
+ * Strip a single trailing segment when it is a known language (remapped from its
+ * URL form back to a locale code), yielding the language-free site root so the
+ * rest of this module can treat the leading path segment after it as the language.
+ */
+function normalizeBasePath(basePath: string, knownCodes: ReadonlySet<string>): string {
+	const segments = trimSlashes(basePath).split("/").filter(Boolean);
+	const last = segments[segments.length - 1];
+	if (last && knownCodes.has(urlSegmentToCode(last))) {
+		segments.pop();
+	}
+	return segments.join("/");
+}
+
+/**
+ * Return the path segments that live AFTER `basePath` in `pathname`.
+ * Both are compared with leading/trailing slashes normalized.
+ */
+function segmentsAfterBase(pathname: string, basePath: string): string[] {
+	const base = trimSlashes(basePath);
+	const trimmedPath = trimSlashes(pathname);
+
+	let rest = trimmedPath;
+	if (base && (trimmedPath === base || trimmedPath.startsWith(`${base}/`))) {
+		rest = trimmedPath.slice(base.length);
+	}
+	return trimSlashes(rest).split("/").filter(Boolean);
+}
+
+/**
+ * Read the language encoded in a URL: the first path segment after `basePath`,
+ * remapped from its URL form (hyphens) back to a locale code (underscores) and
+ * returned only when it is one of `knownCodes`. Returns `undefined` when the
+ * leading segment is absent or is not a known language code.
+ *
+ * @param currentUrl Absolute URL to inspect (e.g. `window.location.href`).
+ * @param basePath   Site root path (e.g. `SFDC_ENV.basePath`); may be `""`.
+ * @param knownCodes Language codes considered valid leading segments.
+ * @returns The matched locale code (e.g. `en_US`), or `undefined`.
+ */
+export function getLanguageFromUrl(
+	currentUrl: string,
+	basePath: string,
+	knownCodes: ReadonlySet<string>,
+): string | undefined {
+	const { pathname } = new URL(currentUrl);
+	const siteRoot = normalizeBasePath(basePath, knownCodes);
+	const [first] = segmentsAfterBase(pathname, siteRoot);
+	if (!first) {
+		return undefined;
+	}
+	const code = urlSegmentToCode(first);
+	return knownCodes.has(code) ? code : undefined;
+}
+
+/**
+ * Rewrite `currentUrl` so `language` is reflected in the first path segment after
+ * `basePath`. The rest of the path, the query string, and the hash are preserved.
+ *
+ * The leading segment after `basePath` is examined and remapped from its URL form
+ * (hyphens) back to a locale code before being compared against `knownCodes`:
+ *
+ * - **Default language** (`language === defaultLanguage`): the default is the
+ *   implicit, un-prefixed language, so NO segment is written. An existing
+ *   known-language leading segment is REMOVED (`/shop/fr/page` → `/shop/page`);
+ *   if there is none, the path is left unchanged.
+ * - **Non-default language**: an existing known-language leading segment is
+ *   REPLACED — so switching never stacks segments (`/en-US/fr/page`) — otherwise
+ *   the language is INSERTED as a new first segment. The written segment uses the
+ *   URL form of the code (underscores → hyphens, e.g. `en_US` → `en-US`).
+ *
+ * When a non-default language is active the platform folds that language into
+ * `basePath` itself (`/shop` → `/shop/fr`); a trailing known-language segment is
+ * stripped from `basePath` first (see {@link normalizeBasePath}) so the leading
+ * segment after the true site root is always what gets replaced/removed/inserted.
+ *
+ * `basePath` is matched with trailing slashes normalized, and the result never
+ * contains double slashes.
+ *
+ * @param currentUrl      Absolute URL to rewrite (e.g. `window.location.href`).
+ * @param basePath        Site root path (e.g. `SFDC_ENV.basePath`); may be `""`.
+ * @param language        Locale code to reflect after `basePath` (e.g. `en_US`).
+ * @param knownCodes      Language codes eligible for the leading-segment check.
+ * @param defaultLanguage Locale code that is served without a URL segment.
+ * @returns The rewritten absolute URL as a string.
+ */
+export function buildLanguageUrl(
+	currentUrl: string,
+	basePath: string,
+	language: string,
+	knownCodes: ReadonlySet<string>,
+	defaultLanguage: string,
+): string {
+	const url = new URL(currentUrl);
+
+	const base = normalizeBasePath(basePath, knownCodes);
+	const segments = segmentsAfterBase(url.pathname, base);
+	const leadingIsLanguage = segments.length > 0 && knownCodes.has(urlSegmentToCode(segments[0]));
+
+	if (language === defaultLanguage) {
+		// The default language is served un-prefixed. Drop an existing language
+		// segment so switching back to default removes it, rather than writing one.
+		if (leadingIsLanguage) {
+			segments.shift();
+		}
+	} else if (leadingIsLanguage) {
+		segments[0] = codeToUrlSegment(language);
+	} else {
+		segments.unshift(codeToUrlSegment(language));
+	}
+
+	const rebuiltPath = [base, ...segments].filter(Boolean).join("/");
+	url.pathname = `/${rebuiltPath}`;
+
+	return url.toString();
+}

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Public API for the Angular language switcher feature.
+ *
+ * Most apps only need:
+ *   ```typescript
+ *   import { LanguageSwitcherComponent } from ".../features/language-switcher";
+ *   // Add to component imports: [LanguageSwitcherComponent]
+ *   // Use in template: <app-language-switcher />
+ *   ```
+ *
+ * Lower-level pieces are exported for custom UIs and testing:
+ *   - {@link getCurrentLanguage} to read the active language
+ *   - {@link buildLanguageUrl} to compute the rewritten URL yourself
+ *   - {@link LANGUAGES} / {@link DEFAULT_LANGUAGE} for the supported set
+ */
+
+export { LanguageSwitcherComponent, getCurrentLanguage } from "./language-switcher";
+
+export { buildLanguageUrl, getLanguageFromUrl, urlSegmentToCode } from "./build-language-url";
+
+export { LANGUAGES, DEFAULT_LANGUAGE, LANGUAGE_CODES } from "./languages";
+export type { LanguageOption } from "./languages";

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/language-switcher.html

@@ -0,0 +1,22 @@
+@if (hasMultipleLanguages) {
+<app-dropdown-menu align="end" [aria-label]="accessibleLabel()" [triggerClass]="triggerClass">
+	<span trigger class="inline-flex items-center gap-1.5">
+		<app-icon name="globe" size="16" class="inline-flex" />
+		<span>{{ currentLanguageLabel }}</span>
+		<app-icon name="chevronDown" size="14" class="inline-flex opacity-50" />
+	</span>
+
+	<ng-template appDropdownMenuContent>
+		@for (language of languages; track language.code) {
+		<button appDropdownMenuItem type="button" (triggered)="switchLanguage(language.code)">
+			@if (language.code === currentLanguage) {
+			<app-icon name="check" size="14" class="mr-2" />
+			} @else {
+			<span class="mr-2 inline-block size-3.5"></span>
+			}
+			<span>{{ language.label }}</span>
+		</button>
+		}
+	</ng-template>
+</app-dropdown-menu>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/language-switcher.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Drop-in language switcher for B2X (Experience) Angular apps.
+ *
+ * Renders a dropdown menu of the site's supported {@link LANGUAGES} using the
+ * shared `app-dropdown-menu` component. Choosing a language rewrites the current
+ * URL so the chosen code becomes the first path segment after `basePath` (see
+ * {@link buildLanguageUrl}) and reloads the page via `window.location.assign`.
+ * A full reload lets the platform serve the correctly localized content — this
+ * component owns only the URL rewrite.
+ */
+
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+
+import { DropdownMenuImports } from "../../components/ui/dropdown-menu/dropdown-menu";
+import { IconComponent } from "../../components/ui/icon/icon";
+import { buildLanguageUrl, getLanguageFromUrl, urlSegmentToCode } from "./build-language-url";
+import { DEFAULT_LANGUAGE, LANGUAGE_CODES, LANGUAGES } from "./languages";
+
+/**
+ * The subset of `SFDC_ENV` this component reads. We type it structurally here
+ * (rather than relying on the ambient `SfdcEnv`) so the feature type-checks in
+ * isolation: its ambient augmentation intentionally declares only `language?`,
+ * while `basePath` is provided by the platform types once composed into an app.
+ */
+interface SfdcEnvSubset {
+	basePath?: string;
+	/** Page locale in hyphenated form, e.g. "en-US" (the platform's injected form). */
+	language?: string;
+}
+
+/** Read `SFDC_ENV` off the global scope without assuming it exists. */
+function getSfdcEnv(): SfdcEnvSubset | undefined {
+	return (globalThis as { SFDC_ENV?: SfdcEnvSubset }).SFDC_ENV;
+}
+
+/**
+ * Resolve the active language, in precedence order:
+ *
+ * 1. `SFDC_ENV.language` — authoritative when the platform provides it. The
+ *    platform injects this in hyphenated form (e.g. `"en-US"`), so it is
+ *    remapped back to a locale code (`en_US`) before matching, mirroring how the
+ *    URL segment is handled.
+ * 2. The leading URL path segment after `basePath`, when it is a supported
+ *    language code — reflects the page the user is actually viewing (e.g. a
+ *    direct hit on `/shop/fr/catalog`) even before the runtime populates
+ *    `SFDC_ENV.language`.
+ * 3. {@link DEFAULT_LANGUAGE}.
+ *
+ * Only codes in {@link LANGUAGES} are honored; anything else falls through.
+ */
+export function getCurrentLanguage(): string {
+	const envLanguage = getSfdcEnv()?.language;
+	if (envLanguage) {
+		const envCode = urlSegmentToCode(envLanguage);
+		if (LANGUAGE_CODES.has(envCode)) {
+			return envCode;
+		}
+	}
+
+	const basePath = getSfdcEnv()?.basePath ?? "";
+	const urlLanguage = getLanguageFromUrl(window.location.href, basePath, LANGUAGE_CODES);
+	return urlLanguage ?? DEFAULT_LANGUAGE;
+}
+
+@Component({
+	selector: "app-language-switcher",
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [...DropdownMenuImports, IconComponent],
+	templateUrl: "./language-switcher.html",
+})
+export class LanguageSwitcherComponent {
+	/** Accessible label prefix for the dropdown trigger. Defaults to "Language". */
+	readonly label = input<string>("Language");
+
+	readonly languages = LANGUAGES;
+	readonly currentLanguage = getCurrentLanguage();
+	readonly hasMultipleLanguages = LANGUAGES.length >= 2;
+
+	/** The label of the currently active language (for display in the trigger). */
+	readonly currentLanguageLabel =
+		LANGUAGES.find((l) => l.code === this.currentLanguage)?.label ?? "";
+
+	/** Accessible label that includes the visible current-language text (WCAG 2.5.3). */
+	readonly accessibleLabel = computed(() => `${this.label()}: ${this.currentLanguageLabel}`);
+
+	/** Classes applied to the dropdown-menu's trigger button. */
+	readonly triggerClass =
+		"inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none";
+
+	switchLanguage(code: string): void {
+		if (code === this.currentLanguage) return;
+
+		const basePath = getSfdcEnv()?.basePath ?? "";
+		const nextUrl = buildLanguageUrl(
+			window.location.href,
+			basePath,
+			code,
+			LANGUAGE_CODES,
+			DEFAULT_LANGUAGE,
+		);
+		window.location.assign(nextUrl);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/features/language-switcher/languages.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** A single language option offered by the switcher. */
+export interface LanguageOption {
+	/** Salesforce locale code, e.g. "en_US". Used as the URL path segment. */
+	code: string;
+	/** Human-readable label shown in the dropdown, e.g. "English". */
+	label: string;
+}
+
+/**
+ * The languages this app offers in the switcher.
+ *
+ * IMPORTANT — keep this list in sync BY HAND with the site's language settings:
+ *   digitalExperiences/site/<siteName>/sfdc_cms__languageSettings/content.json
+ *
+ * There is no runtime API to read `sfdc_cms__languageSettings` on a published
+ * site, so the supported languages are baked into the bundle at authoring time.
+ * When the site's content.json changes, update this array (and
+ * {@link DEFAULT_LANGUAGE}) to match.
+ *
+ * `code` values are Salesforce locale codes (underscores). They are converted to
+ * hyphenated form for use as the first URL path segment after `basePath` (e.g.
+ * `en_US` → `/en-US/...`, `fr` → `/fr/...`). Display order here is the order shown
+ * in the dropdown.
+ */
+export const LANGUAGES: readonly LanguageOption[] = [
+	{ code: "en_US", label: "English" },
+	{ code: "fr", label: "Français" },
+	{ code: "es", label: "Español" },
+	{ code: "de", label: "Deutsch" },
+	{ code: "ja", label: "日本語" },
+];
+
+/**
+ * Language used when `SFDC_ENV.language` is missing or is not one of
+ * {@link LANGUAGES}. Should match the site's default language in content.json.
+ */
+export const DEFAULT_LANGUAGE = "en_US";
+
+/** Set of known language codes, for fast membership checks. */
+export const LANGUAGE_CODES: ReadonlySet<string> = new Set(LANGUAGES.map((l) => l.code));

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/pages/home/home.html

@@ -0,0 +1,6 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+		<p class="text-lg text-gray-600 mb-8">Welcome to your Angular application.</p>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-language-switcher/src/app/pages/home/home.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home';
+
+describe('HomeComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+});