@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/layout/app-layout/app-layout.html

@@ -0,0 +1,51 @@
+<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">
+			<a routerLink="/" class="text-xl font-semibold text-gray-900"> Angular App </a>
+			<button
+				(click)="toggleMenu()"
+				class="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				aria-label="Toggle menu"
+				aria-controls="app-layout-nav-menu"
+				[attr.aria-expanded]="isOpen()"
+			>
+				<div class="w-6 h-6 flex flex-col justify-center space-y-1.5">
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.rotate-45]="isOpen()"
+						[class.translate-y-2]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.opacity-0]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.-rotate-45]="isOpen()"
+						[class.-translate-y-2]="isOpen()"
+					></span>
+				</div>
+			</button>
+		</div>
+		@if (isOpen()) {
+			<div id="app-layout-nav-menu" class="pb-4">
+				<ul class="flex flex-col space-y-2 list-none">
+					@for (item of navigationItems; track item.path) {
+						<li>
+							<a
+								[routerLink]="item.path"
+								routerLinkActive="bg-blue-100 text-blue-700"
+								[routerLinkActiveOptions]="{ exact: true }"
+								(click)="closeMenu()"
+								class="block px-3 py-2 rounded-md text-sm font-medium transition-colors text-gray-700 hover:bg-gray-100"
+							>
+								{{ item.label }}
+							</a>
+						</li>
+					}
+				</ul>
+			</div>
+		}
+	</div>
+</nav>
+<router-outlet />

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

@@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { AppLayoutComponent } from './app-layout';
+
+describe('AppLayoutComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [AppLayoutComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should toggle menu', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component.isOpen()).toBe(false);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it('should close menu', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.closeMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it('should have navigation items', () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		const component = fixture.componentInstance;
+		expect(component.navigationItems.length).toBeGreaterThan(0);
+		expect(component.navigationItems[0].path).toBe('/');
+	});
+
+	it('should render nav element', async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('nav')).toBeTruthy();
+	});
+
+	it('should set aria-expanded on toggle button', async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		const button = compiled.querySelector('button');
+		expect(button?.getAttribute('aria-expanded')).toBe('false');
+
+		fixture.componentInstance.toggleMenu();
+		fixture.detectChanges();
+		expect(button?.getAttribute('aria-expanded')).toBe('true');
+	});
+});

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-layout',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, RouterLinkActive, RouterOutlet],
+	templateUrl: './app-layout.html',
+})
+export class AppLayoutComponent {
+	readonly isOpen = signal(false);
+
+	readonly navigationItems = [{ path: '/', label: 'Home' }];
+
+	toggleMenu(): void {
+		this.isOpen.update((v) => !v);
+	}
+
+	closeMenu(): void {
+		this.isOpen.set(false);
+	}
+}

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

@@ -0,0 +1,27 @@
+@if (icon()) {
+	<ng-icon
+		[name]="icon()"
+		class="row-span-2 translate-y-0.5 size-4 text-base leading-4"
+		aria-hidden="true"
+	/>
+}
+<ng-content select="[icon]" />
+
+@if (title()) {
+	<div hlmAlertTitle>{{ title() }}</div>
+}
+@if (description()) {
+	<div
+		hlmAlertDescription
+		[class.text-muted-foreground]="variant() === 'default'"
+		[class.text-destructive]="variant() === 'destructive'"
+	>
+		{{ description() }}
+	</div>
+}
+
+<div class="text-sm empty:hidden group-has-[>ng-icon]/alert:col-start-2">
+	<ng-content />
+</div>
+
+<ng-content select="app-alert-action" />

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

@@ -0,0 +1,41 @@
+/**
+ * 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 { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	HlmAlert,
+	HlmAlertAction,
+	HlmAlertDescription,
+	HlmAlertTitle,
+} from '@spartan-ng/styles/alert';
+import { APP_ICONS, type AppIconName } from '../icon/icon';
+
+export type AppAlertVariant = 'default' | 'destructive';
+
+@Component({
+	selector: 'app-alert',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgIcon, HlmAlertTitle, HlmAlertDescription],
+	providers: [provideIcons(APP_ICONS)],
+	hostDirectives: [{ directive: HlmAlert, inputs: ['variant'] }],
+	templateUrl: './alert.html',
+})
+export class AlertComponent {
+	readonly variant = input<AppAlertVariant>('default');
+	readonly title = input<string>('');
+	readonly description = input<string>('');
+	readonly icon = input<AppIconName | ''>('');
+}
+
+@Component({
+	selector: 'app-alert-action',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmAlertAction],
+	template: '<ng-content />',
+})
+export class AlertActionComponent {}
+
+export const AlertImports = [AlertComponent, AlertActionComponent] as const;

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

@@ -0,0 +1,27 @@
+<button
+	hlmBtn
+	[variant]="hlmVariant()"
+	[size]="size()"
+	[disabled]="disabled() || loading()"
+	[type]="type()"
+	[attr.aria-label]="ariaLabel()"
+	[attr.aria-expanded]="ariaExpanded()"
+	[attr.aria-busy]="loading() || null"
+	[class]="classes()"
+	(click)="clicked.emit($event)"
+>
+	@if (loading()) {
+		<app-spinner data-icon="inline-start" class="flex items-center" aria-hidden="true" />
+		@if (loadingLabel()) {
+			{{ loadingLabel() }}
+		}
+	} @else {
+		@if (icon()) {
+			<ng-icon [name]="icon()" class="size-4" aria-hidden="true" />
+		}
+		<ng-content />
+		@if (iconEnd()) {
+			<ng-icon [name]="iconEnd()" class="size-4" aria-hidden="true" />
+		}
+	}
+</button>

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	output,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { HlmButtonImports } from '@spartan-ng/styles/button';
+import { APP_ICONS, type AppIconName } from '../icon/icon';
+import { SpinnerComponent } from '../spinner/spinner';
+
+export type AppButtonAppearance = 'filled' | 'outlined' | 'text' | 'destructive';
+export type AppButtonSize =
+	| 'default'
+	| 'xs'
+	| 'sm'
+	| 'lg'
+	| 'icon'
+	| 'icon-xs'
+	| 'icon-sm'
+	| 'icon-lg';
+
+const APPEARANCE_TO_VARIANT: Record<AppButtonAppearance, string> = {
+	filled: 'default',
+	outlined: 'outline',
+	text: 'ghost',
+	destructive: 'destructive',
+};
+
+@Component({
+	selector: 'app-button',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmButtonImports, NgIcon, SpinnerComponent],
+	providers: [provideIcons(APP_ICONS)],
+	templateUrl: './button.html',
+})
+export class ButtonComponent {
+	readonly appearance = input<AppButtonAppearance>('filled');
+	readonly size = input<AppButtonSize>('default');
+	readonly type = input<'button' | 'submit' | 'reset'>('button');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	// While loading the button is disabled and shows a spinner; loadingLabel
+	// replaces the content (empty label => spinner only).
+	readonly loading = input(false, { transform: booleanAttribute });
+	readonly loadingLabel = input<string>('');
+	readonly ariaLabel = input<string>();
+	readonly ariaExpanded = input<boolean>();
+	readonly classes = input<string>('', { alias: 'class' });
+	readonly icon = input<AppIconName | ''>('');
+	readonly iconEnd = input<AppIconName | ''>('');
+	readonly clicked = output<MouseEvent>();
+
+	protected readonly hlmVariant = computed(
+		() =>
+			APPEARANCE_TO_VARIANT[this.appearance()] as 'default' | 'outline' | 'ghost' | 'destructive',
+	);
+}
+
+export const ButtonImports = [ButtonComponent] as const;

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

@@ -0,0 +1,100 @@
+/**
+ * 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 {
+	HlmCard,
+	HlmCardAction,
+	HlmCardAvatar,
+	HlmCardContent,
+	HlmCardDescription,
+	HlmCardFooter,
+	HlmCardHeader,
+	HlmCardTitle,
+} from '@spartan-ng/styles/card';
+
+export type AppCardSize = 'default' | 'sm';
+
+@Component({
+	selector: 'app-card',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmCard, inputs: ['size'] }],
+	host: { '[class]': 'classes()' },
+	template: '<ng-content />',
+})
+export class CardComponent {
+	readonly size = input<AppCardSize>('default');
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+@Component({
+	selector: 'app-card-header',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardHeader],
+	host: { '[class]': 'classes()' },
+	template: '<ng-content />',
+})
+export class CardHeaderComponent {
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+@Component({
+	selector: 'app-card-title',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardTitle],
+	template: '<ng-content />',
+})
+export class CardTitleComponent {}
+
+@Component({
+	selector: 'app-card-description',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardDescription],
+	template: '<ng-content />',
+})
+export class CardDescriptionComponent {}
+
+@Component({
+	selector: 'app-card-avatar',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardAvatar],
+	template: '<ng-content />',
+})
+export class CardAvatarComponent {}
+
+@Component({
+	selector: 'app-card-action',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardAction],
+	template: '<ng-content />',
+})
+export class CardActionComponent {}
+
+@Component({
+	selector: 'app-card-content',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardContent],
+	template: '<ng-content />',
+})
+export class CardContentComponent {}
+@Component({
+	selector: 'app-card-footer',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmCardFooter],
+	host: { class: 'gap-2' },
+	template: '<ng-content />',
+})
+export class CardFooterComponent {}
+
+export const CardImports = [
+	CardComponent,
+	CardHeaderComponent,
+	CardTitleComponent,
+	CardDescriptionComponent,
+	CardAvatarComponent,
+	CardActionComponent,
+	CardContentComponent,
+	CardFooterComponent,
+] as const;

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

@@ -0,0 +1,38 @@
+<div
+	hlmCollapsible
+	[expanded]="open()"
+	[disabled]="disabled()"
+	(expandedChange)="open.set($event)"
+	class="rounded-[12px] bg-card shadow-md overflow-hidden"
+>
+	<button
+		hlmCollapsibleTrigger
+		type="button"
+		class="flex w-full items-center justify-between px-6 min-h-12 font-medium transition-[min-height,background-color] duration-225 rounded-[inherit] disabled:pointer-events-none disabled:text-foreground/[0.38]"
+		[class.min-h-16]="open()"
+		[disabled]="disabled()"
+	>
+		<span class="flex flex-1 items-center overflow-hidden">
+			@if (title()) {
+				<span>{{ title() }}</span>
+			} @else {
+				<ng-content select="[collapsibleHeader]" />
+			}
+		</span>
+		<svg
+			class="size-6 shrink-0 transition-transform duration-225 fill-foreground/60"
+			[class.rotate-180]="open()"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 -960 960 960"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
+		</svg>
+	</button>
+	<div hlmCollapsibleContent>
+		<div class="px-6 pb-4">
+			<ng-content />
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { HlmCollapsibleImports } from '@spartan-ng/styles/collapsible';
+
+@Component({
+	selector: 'app-collapsible',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmCollapsibleImports],
+	templateUrl: './collapsible.html',
+})
+export class CollapsibleComponent {
+	readonly open = model<boolean>(false);
+	readonly title = input<string>('');
+	readonly disabled = input(false, { transform: booleanAttribute });
+}
+
+export const CollapsibleImports = [CollapsibleComponent] as const;

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

@@ -0,0 +1,20 @@
+<div class="w-full" [ngClass]="wrapperClasses()">
+	@if (label()) {
+		<label [for]="labelId" class="text-sm leading-none font-medium select-none mb-1.5 block">
+			{{ label() }}
+		</label>
+	}
+	<hlm-date-picker
+		[date]="value() ?? undefined"
+		(dateChange)="value.set($event)"
+		[disabled]="disabled()"
+		[minDate]="min()"
+		[maxDate]="max()"
+	>
+		<hlm-date-picker-input
+			[inputId]="labelId"
+			[placeholder]="placeholder()"
+			[readonly]="readonly()"
+		/>
+	</hlm-date-picker>
+</div>

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

@@ -0,0 +1,49 @@
+/**
+ * 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 { NgClass } from '@angular/common';
+import { HlmDatePickerImports } from '@spartan-ng/styles/date-picker';
+import type { AppFieldSize } from '../field-size';
+
+@Component({
+	selector: 'app-date-picker',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmDatePickerImports, NgClass],
+	host: { class: 'block min-w-0' },
+	templateUrl: './date-picker.html',
+})
+export class DatePickerComponent {
+	readonly value = model<Date | null | undefined>(undefined);
+	readonly label = input<string>('');
+	readonly placeholder = input<string>('');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly readonly = input(false, { transform: booleanAttribute });
+	readonly size = input<AppFieldSize>('default');
+	readonly min = input<Date | null>(null);
+	readonly max = input<Date | null>(null);
+
+	private static _uid = 0;
+	protected readonly labelId = `app-date-picker-${DatePickerComponent._uid++}`;
+
+	protected readonly wrapperClasses = computed(() => {
+		const cls: string[] = [];
+		const s = this.size();
+		if (s === 'sm')
+			cls.push('[&_[data-slot=input-group]]:h-6', '[&_[data-slot=input-group]]:text-xs');
+		if (s === 'lg')
+			cls.push('[&_[data-slot=input-group]]:h-10', '[&_[data-slot=input-group]]:text-lg');
+		return cls;
+	});
+}
+
+export const DatePickerImports = [DatePickerComponent] as const;

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

@@ -0,0 +1,20 @@
+<div class="w-full" [ngClass]="wrapperClasses()">
+	@if (label()) {
+		<label [for]="labelId" class="text-sm leading-none font-medium select-none mb-1.5 block">
+			{{ label() }}
+		</label>
+	}
+	<hlm-date-range-picker
+		[date]="dateRange()"
+		(dateChange)="onRangeChange($event)"
+		[disabled]="disabled()"
+		[minDate]="min()"
+		[maxDate]="max()"
+	>
+		<hlm-date-range-input
+			[inputId]="labelId"
+			[placeholder]="startPlaceholder() + ' — ' + endPlaceholder()"
+			[readonly]="readonly()"
+		/>
+	</hlm-date-range-picker>
+</div>

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

@@ -0,0 +1,69 @@
+/**
+ * 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 { NgClass } from '@angular/common';
+import { HlmDatePickerImports } from '@spartan-ng/styles/date-picker';
+import type { AppFieldSize } from '../field-size';
+
+export interface DateRange<D> {
+	start: D | null;
+	end: D | null;
+}
+
+@Component({
+	selector: 'app-date-range-picker',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmDatePickerImports, NgClass],
+	host: { class: 'block min-w-0' },
+	templateUrl: './date-range-picker.html',
+})
+export class DateRangePickerComponent {
+	readonly value = model<DateRange<Date> | null>(null);
+	readonly label = input<string>('');
+	readonly startPlaceholder = input<string>('Start');
+	readonly endPlaceholder = input<string>('End');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly readonly = input(false, { transform: booleanAttribute });
+	readonly size = input<AppFieldSize>('default');
+	readonly min = input<Date | null>(null);
+	readonly max = input<Date | null>(null);
+
+	private static _uid = 0;
+	protected readonly labelId = `app-date-range-picker-${DateRangePickerComponent._uid++}`;
+
+	protected readonly wrapperClasses = computed(() => {
+		const cls: string[] = [];
+		const s = this.size();
+		if (s === 'sm')
+			cls.push('[&_[data-slot=input-group]]:h-6', '[&_[data-slot=input-group]]:text-xs');
+		if (s === 'lg')
+			cls.push('[&_[data-slot=input-group]]:h-10', '[&_[data-slot=input-group]]:text-lg');
+		return cls;
+	});
+
+	protected dateRange(): [Date, Date] | undefined {
+		const v = this.value();
+		if (v?.start && v?.end) return [v.start, v.end];
+		return undefined;
+	}
+
+	protected onRangeChange(range: [Date | null, Date | null] | null): void {
+		if (!range) {
+			this.value.set(null);
+			return;
+		}
+		this.value.set({ start: range[0], end: range[1] });
+	}
+}
+
+export const DateRangePickerImports = [DateRangePickerComponent] as const;

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

@@ -0,0 +1,20 @@
+<hlm-dialog
+	[state]="open() ? 'open' : 'closed'"
+	[disableClose]="!closeOnBackdrop()"
+	[aria-label]="ariaLabel()"
+	[aria-labelledby]="ariaLabelledby()"
+	(stateChanged)="onStateChanged($event)"
+>
+	<button hlmDialogTrigger type="button" class="hidden" aria-label="Open dialog"></button>
+	<hlm-dialog-content *hlmDialogPortal>
+		<div hlmDialogHeader>
+			<ng-content select="[header]" />
+		</div>
+		<div class="text-sm">
+			<ng-content />
+		</div>
+		<div hlmDialogFooter>
+			<ng-content select="[footer]" />
+		</div>
+	</hlm-dialog-content>
+</hlm-dialog>