@salesforce/ui-bundle-template-feature-angular-authentication 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	Directive,
+	inject,
+	Injector,
+	input,
+	TemplateRef,
+	contentChild,
+} from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+import type { MenuAlign, MenuSide } from '@spartan-ng/brain/core';
+import {
+	HlmDropdownMenu,
+	HlmDropdownMenuItem,
+	HlmDropdownMenuLabel,
+	HlmDropdownMenuSeparator,
+	HlmDropdownMenuTrigger,
+} from '@spartan-ng/styles/dropdown-menu';
+
+// `appDropdownMenuItem` must be a directive (not a component) so it can be applied
+// directly to the feature's own `<a>`/`<button>`, preserving native ENTER→click for
+// `routerLink` and keyboard nav.
+// Marker for the projected menu body. Consumers declare their items inside
+// `<ng-template appDropdownMenuContent>` so the template can be rendered *inside*
+// the `hlmDropdownMenu` (CdkMenu) with that element's injector — otherwise the
+// items resolve DI at their declaration site and can't find `cdk-menu-stack`.
+@Directive({ selector: '[appDropdownMenuContent]' })
+export class DropdownMenuContentDirective {
+	readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+// Captures the node injector of the `hlmDropdownMenu` element (which carries the
+// `cdk-menu-stack` provider) so the projected content can inherit it.
+@Directive({ selector: '[appDropdownMenuInjector]', exportAs: 'appDropdownMenuInjector' })
+export class DropdownMenuInjectorDirective {
+	readonly injector = inject(Injector);
+}
+
+@Component({
+	selector: 'app-dropdown-menu',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		HlmDropdownMenuTrigger,
+		HlmDropdownMenu,
+		NgTemplateOutlet,
+		DropdownMenuInjectorDirective,
+	],
+	templateUrl: './dropdown-menu.html',
+})
+export class DropdownMenuComponent {
+	readonly align = input<MenuAlign>('start');
+	readonly side = input<MenuSide>('bottom');
+	readonly sideOffset = input<number>(1);
+	readonly triggerClass = input<string>('');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	protected readonly content = contentChild.required(DropdownMenuContentDirective);
+}
+
+@Directive({
+	selector: 'a[appDropdownMenuItem], button[appDropdownMenuItem]',
+	hostDirectives: [{ directive: HlmDropdownMenuItem, inputs: ['disabled', 'variant', 'inset'] }],
+})
+export class DropdownMenuItemDirective {
+	// outputFromObservable workaround: a parent hostDirective can't re-export a host
+	// directive's output directly (raises NG2017), so bridge it via CdkMenuItem's observable.
+	readonly triggered = outputFromObservable(inject(CdkMenuItem).triggered);
+}
+
+@Component({
+	selector: 'app-dropdown-menu-label',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmDropdownMenuLabel, inputs: ['inset'] }],
+	template: '<ng-content />',
+})
+export class DropdownMenuLabelComponent {}
+
+@Component({
+	selector: 'app-dropdown-menu-separator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmDropdownMenuSeparator],
+	template: '',
+})
+export class DropdownMenuSeparatorComponent {}
+
+export const DropdownMenuImports = [
+	DropdownMenuComponent,
+	DropdownMenuContentDirective,
+	DropdownMenuItemDirective,
+	DropdownMenuLabelComponent,
+	DropdownMenuSeparatorComponent,
+] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/field/field.html

@@ -0,0 +1,15 @@
+@if (label()) {
+	<label hlmFieldLabel [for]="htmlFor() ?? undefined">
+		{{ label() }}
+		@if (required()) {
+			<span aria-hidden="true" class="text-destructive">*</span>
+		}
+	</label>
+}
+@if (description()) {
+	<p hlmFieldDescription>{{ description() }}</p>
+}
+<ng-content />
+@if (error()) {
+	<hlm-field-error [forceShow]="true">{{ error() }}</hlm-field-error>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/field/field.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { HlmField, HlmFieldImports } from '@spartan-ng/styles/field';
+
+@Component({
+	selector: 'app-field',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmFieldImports],
+	hostDirectives: [HlmField],
+	host: {
+		'data-slot': 'field',
+		'[attr.data-invalid]': 'error() ? true : null',
+	},
+	templateUrl: './field.html',
+})
+export class FieldComponent {
+	readonly label = input<string>('');
+	readonly description = input<string>('');
+	readonly error = input<string | null>(null);
+	readonly required = input(false, { transform: booleanAttribute });
+	readonly htmlFor = input<string | null>(null);
+}
+
+export const FieldImports = [FieldComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/field-appearance.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Form-field visual treatment: `outline` = bordered (default), `fill` = borderless muted background. */
+export type AppFieldAppearance = 'outline' | 'fill';

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/field-size.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Form-field height scale: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+export type AppFieldSize = 'sm' | 'default' | 'lg';

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/icon/icon.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 {
+	lucideArrowDown,
+	lucideArrowUp,
+	lucideCheck,
+	lucideChevronDown,
+	lucideChevronRight,
+	lucideCircleAlert,
+	lucideFileQuestion,
+	lucideGlobe,
+	lucideListFilter,
+	lucideLogIn,
+	lucideLogOut,
+	lucideSearch,
+	lucideSearchX,
+	lucideUser,
+	lucideUserPen,
+	lucideUserPlus,
+	lucideX,
+} from '@ng-icons/lucide';
+
+export const APP_ICONS = {
+	error: lucideCircleAlert,
+	close: lucideX,
+	person: lucideUser,
+	login: lucideLogIn,
+	logout: lucideLogOut,
+	editProfile: lucideUserPen,
+	personAdd: lucideUserPlus,
+	search: lucideSearch,
+	filter: lucideListFilter,
+	chevronRight: lucideChevronRight,
+	chevronDown: lucideChevronDown,
+	arrowUp: lucideArrowUp,
+	arrowDown: lucideArrowDown,
+	noResults: lucideSearchX,
+	notFound: lucideFileQuestion,
+	globe: lucideGlobe,
+	check: lucideCheck,
+} as const;
+
+export type AppIconName = keyof typeof APP_ICONS;
+
+@Component({
+	selector: 'app-icon',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgIcon],
+	providers: [provideIcons(APP_ICONS)],
+	host: {
+		'[class]': 'classes()',
+		'[attr.aria-label]': 'ariaLabel()',
+		'[attr.aria-hidden]': 'ariaLabel() ? null : true',
+	},
+	template: '<ng-icon [name]="name()" [size]="size()" />',
+})
+export class IconComponent {
+	readonly name = input.required<AppIconName>();
+	readonly size = input<string>('1rem');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+	// Non-size utilities (color, margin) still pass through to the host.
+	readonly classes = input<string>('', { alias: 'class' });
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/input/input.html

@@ -0,0 +1,34 @@
+<div class="w-full space-y-1.5">
+	@if (label()) {
+		<label hlmLabel [for]="resolvedId()">{{ label() }}</label>
+	}
+	<hlm-input-group [class]="groupClasses()">
+		@if (icon(); as leadingIcon) {
+			<hlm-input-group-addon>
+				<app-icon [name]="leadingIcon" class="flex items-end" aria-hidden="true" />
+			</hlm-input-group-addon>
+		}
+		<input
+			hlmInputGroupInput
+			[type]="type()"
+			[placeholder]="placeholder()"
+			[disabled]="disabled()"
+			[id]="resolvedId()"
+			[attr.aria-label]="ariaLabel() || null"
+			[attr.aria-describedby]="describedBy()"
+			[attr.aria-invalid]="error() || null"
+			[attr.data-matches-spartan-invalid]="error() || null"
+			[(ngModel)]="value"
+		/>
+		@if (iconEnd(); as trailingIcon) {
+			<hlm-input-group-addon align="inline-end">
+				<app-icon [name]="trailingIcon" class="flex items-end" aria-hidden="true" />
+			</hlm-input-group-addon>
+		}
+	</hlm-input-group>
+	@if (error() && errorMessage()) {
+		<p [id]="errorId()" class="text-sm text-destructive" role="alert" aria-live="polite">
+			{{ errorMessage() }}
+		</p>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/input/input.ts

@@ -0,0 +1,79 @@
+/**
+ * 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 { FormsModule } from '@angular/forms';
+import { HlmInputGroupImports } from '@spartan-ng/styles/input-group';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
+import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
+import { IconComponent, type AppIconName } from '../icon/icon';
+
+const SIZE_CLASSES: Record<AppFieldSize, string> = {
+	sm: 'h-6 text-xs',
+	default: 'h-8',
+	lg: 'h-10',
+};
+
+const APPEARANCE_CLASSES: Record<AppFieldAppearance, string> = {
+	outline: '',
+	fill: 'border-transparent bg-muted',
+};
+
+@Component({
+	selector: 'app-input',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [FormsModule, HlmInputGroupImports, HlmLabelImports, IconComponent],
+	host: { class: 'block min-w-0' },
+	templateUrl: './input.html',
+})
+export class InputComponent {
+	readonly value = model<string>('');
+	readonly placeholder = input<string>('');
+	readonly label = input<string>('');
+	readonly type = input<string>('text');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
+	readonly error = input(false, { transform: booleanAttribute });
+	readonly errorMessage = input<string>('');
+	readonly size = input<AppFieldSize>('default');
+	readonly id = input<string>('');
+	readonly ariaDescribedby = input<string>('');
+	// Accessible name for inputs with no visible <label> (e.g. an icon-only
+	// search box); harmless when a label is present.
+	readonly ariaLabel = input<string>('');
+	// Optional leading/trailing icons. When set the input renders inside an
+	// input-group so the icon sits inside the shared border.
+	readonly icon = input<AppIconName | ''>('');
+	readonly iconEnd = input<AppIconName | ''>('');
+
+	private static _uid = 0;
+	private readonly _autoId = `app-input-${InputComponent._uid++}`;
+	protected readonly resolvedId = computed(() => this.id() || this._autoId);
+	protected readonly errorId = computed(() => `${this.resolvedId()}-error`);
+
+	// Link the error message to the input via aria-describedby (merged with any
+	// caller-supplied ids) so screen readers announce it; null when absent.
+	protected readonly describedBy = computed(() => {
+		const ids = [this.ariaDescribedby(), this.error() && this.errorMessage() ? this.errorId() : '']
+			.filter(Boolean)
+			.join(' ');
+		return ids || null;
+	});
+
+	// Size + appearance apply to the input-group wrapper, which owns the border.
+	protected readonly groupClasses = computed(() =>
+		[SIZE_CLASSES[this.size()], APPEARANCE_CLASSES[this.appearance()]].filter(Boolean).join(' '),
+	);
+}
+
+export const InputImports = [InputComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/label/label.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { HlmLabelImports } from '@spartan-ng/styles/label';
+
+@Component({
+	selector: 'app-label',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmLabelImports],
+	template: `
+		<label hlmLabel [for]="for() ?? undefined" class="mb-1.5 block"><ng-content /></label>
+	`,
+})
+export class LabelComponent {
+	readonly for = input<string | null | undefined>(undefined);
+}
+
+export const LabelImports = [LabelComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/paginator/paginator.html

@@ -0,0 +1,74 @@
+@if (!hidePageSize()) {
+	<div class="flex items-center gap-2">
+		<span [id]="pageSizeLabelId" class="text-muted-foreground text-nowrap">Items per page:</span>
+		@if (pageSizeOptions().length > 0) {
+			<select
+				class="h-8 rounded-md border border-input bg-background px-2 text-sm"
+				[attr.aria-labelledby]="pageSizeLabelId"
+				[disabled]="disabled()"
+				(change)="onPageSizeChange($event)"
+			>
+				@for (opt of pageSizeOptions(); track opt) {
+					<option [value]="opt" [selected]="opt === pageSize()">{{ opt }}</option>
+				}
+			</select>
+		} @else {
+			<span class="text-muted-foreground">{{ pageSize() }}</span>
+		}
+	</div>
+}
+<div class="text-muted-foreground text-nowrap">
+	{{ rangeLabel() }}
+</div>
+<nav hlmPagination class="w-auto mx-0">
+	<ul hlmPaginationContent>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() === 0"
+					(click)="goToPage(0)"
+					aria-label="First page"
+				>
+					<ng-icon name="lucideChevronFirst" size="16" />
+				</button>
+			</li>
+		}
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() === 0"
+				(click)="goToPage(clampedPageIndex() - 1)"
+				aria-label="Previous page"
+			>
+				<ng-icon name="lucideChevronLeft" size="16" />
+			</button>
+		</li>
+		<li hlmPaginationItem>
+			<button
+				type="button"
+				class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+				[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+				(click)="goToPage(clampedPageIndex() + 1)"
+				aria-label="Next page"
+			>
+				<ng-icon name="lucideChevronRight" size="16" />
+			</button>
+		</li>
+		@if (showFirstLastButtons()) {
+			<li hlmPaginationItem>
+				<button
+					type="button"
+					class="inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none"
+					[disabled]="disabled() || clampedPageIndex() >= lastPage()"
+					(click)="goToPage(lastPage())"
+					aria-label="Last page"
+				>
+					<ng-icon name="lucideChevronLast" size="16" />
+				</button>
+			</li>
+		}
+	</ul>
+</nav>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/paginator/paginator.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	output,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	lucideChevronFirst,
+	lucideChevronLast,
+	lucideChevronLeft,
+	lucideChevronRight,
+} from '@ng-icons/lucide';
+import { HlmPaginationImports } from '@spartan-ng/styles/pagination';
+import type { PageEvent } from './types';
+
+export type { PageEvent } from './types';
+
+@Component({
+	selector: 'app-paginator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmPaginationImports, NgIcon],
+	providers: [
+		provideIcons({ lucideChevronFirst, lucideChevronLast, lucideChevronLeft, lucideChevronRight }),
+	],
+	host: { class: 'flex items-center justify-end gap-4 text-sm' },
+	templateUrl: './paginator.html',
+})
+export class PaginatorComponent {
+	readonly length = input<number>(0);
+	readonly pageIndex = model<number>(0);
+	readonly pageSize = model<number>(10);
+	readonly pageSizeOptions = input<readonly number[]>([]);
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly hidePageSize = input(false, { transform: booleanAttribute });
+	readonly showFirstLastButtons = input(false, { transform: booleanAttribute });
+	readonly page = output<PageEvent>();
+
+	private static _uid = 0;
+	// Unique so the label→select association survives multiple paginators on a page.
+	protected readonly pageSizeLabelId = `app-paginator-page-size-${PaginatorComponent._uid++}`;
+
+	protected readonly lastPage = computed(() =>
+		Math.max(0, Math.ceil(this.length() / this.pageSize()) - 1),
+	);
+
+	protected readonly clampedPageIndex = computed(() =>
+		Math.max(0, Math.min(this.pageIndex(), this.lastPage())),
+	);
+
+	protected readonly rangeLabel = computed(() => {
+		const len = this.length();
+		if (len === 0) return '0 of 0';
+		const idx = this.clampedPageIndex();
+		const start = idx * this.pageSize() + 1;
+		const end = Math.min((idx + 1) * this.pageSize(), len);
+		return `${start} – ${end} of ${len}`;
+	});
+
+	protected goToPage(index: number): void {
+		const previousPageIndex = this.pageIndex();
+		this.pageIndex.set(index);
+		this.page.emit({
+			pageIndex: index,
+			previousPageIndex,
+			pageSize: this.pageSize(),
+			length: this.length(),
+		});
+	}
+
+	protected onPageSizeChange(event: Event): void {
+		const newSize = Number((event.target as HTMLSelectElement).value);
+		const previousPageIndex = this.pageIndex();
+		this.pageSize.set(newSize);
+		this.pageIndex.set(0);
+		this.page.emit({
+			pageIndex: 0,
+			previousPageIndex,
+			pageSize: newSize,
+			length: this.length(),
+		});
+	}
+}
+
+export const PaginatorImports = [PaginatorComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/paginator/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Payload emitted by PaginatorComponent's `(page)` output. */
+export interface PageEvent {
+	pageIndex: number;
+	previousPageIndex: number;
+	pageSize: number;
+	length: number;
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/popover/popover.html

@@ -0,0 +1,13 @@
+<hlm-popover
+	[align]="align()"
+	[sideOffset]="sideOffset()"
+	[state]="open() ? 'open' : 'closed'"
+	(stateChanged)="onStateChanged($event)"
+>
+	<button hlmPopoverTrigger type="button" [class]="triggerClass()" [attr.aria-label]="ariaLabel()">
+		<ng-content select="[trigger]" />
+	</button>
+	<div hlmPopoverContent *hlmPopoverPortal>
+		<ng-content />
+	</div>
+</hlm-popover>

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/ui/popover/popover.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
+
+@Component({
+	selector: 'app-popover',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmPopoverImports],
+	templateUrl: './popover.html',
+})
+export class PopoverComponent {
+	readonly open = model<boolean>(false);
+	readonly align = input<'start' | 'center' | 'end'>('start');
+	readonly sideOffset = input<number>(4);
+	// The wrapper owns the single real trigger `<button>` (so callers project
+	// plain content, never a nested button); these style/label it.
+	readonly triggerClass = input<string>('');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	toggle(): void {
+		this.open.set(!this.open());
+	}
+
+	close(): void {
+		this.open.set(false);
+	}
+
+	protected onStateChanged(state: 'open' | 'closed'): void {
+		this.open.set(state === 'open');
+	}
+}
+
+export const PopoverImports = [PopoverComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/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>
+}