@salesforce/templates 66.13.6 → 66.13.8

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/date-picker/date-picker.ts

@@ -3,39 +3,47 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+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';
 
-/**
- * Thin wrapper over Material's `mat-form-field` + `matInput` + `mat-datepicker`.
- * Relies on `provideNativeDateAdapter()`, so `value` is a plain `Date`.
- */
 @Component({
 	selector: 'app-date-picker',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
+	imports: [HlmDatePickerImports, NgClass],
+	host: { class: 'block min-w-0' },
 	templateUrl: './date-picker.html',
-	styleUrl: './date-picker.scss',
 })
 export class DatePickerComponent {
-	/** Two-way bindable date value. `null` clears the field. Supports `[(value)]`. */
-	readonly value = model<Date | null>(null);
-
+	readonly value = model<Date | null | undefined>(undefined);
 	readonly label = input<string>('');
 	readonly placeholder = input<string>('');
-	readonly disabled = input<boolean>(false);
-	readonly appearance = input<MatFormFieldAppearance>('outline');
-	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly readonly = input(false, { transform: booleanAttribute });
 	readonly size = input<AppFieldSize>('default');
-
-	/** Earliest / latest selectable date; `null` leaves that bound open. */
 	readonly min = input<Date | null>(null);
 	readonly max = input<Date | null>(null);
 
-	/** When `true`, calendar-only: typing is blocked, clicking opens the picker. */
-	readonly readonly = input<boolean>(false);
+	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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/date-range-picker/date-range-picker.html

@@ -1,34 +1,20 @@
-<mat-form-field
-	class="w-full"
-	[class]="'size-' + size()"
-	[appearance]="appearance()"
-	subscriptSizing="dynamic"
->
+<div class="w-full" [ngClass]="wrapperClasses()">
 	@if (label()) {
-		<mat-label>{{ label() }}</mat-label>
+		<label [for]="labelId" class="text-sm leading-none font-medium select-none mb-1.5 block">
+			{{ label() }}
+		</label>
 	}
-	<mat-date-range-input [rangePicker]="picker" [min]="min()" [max]="max()" [disabled]="disabled()">
-		<input
-			matStartDate
-			[placeholder]="startPlaceholder()"
-			[value]="value()?.start ?? null"
+	<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()"
-			(dateChange)="onStartChange($event.value)"
-			(click)="readonly() && picker.open()"
-			(keydown.enter)="readonly() && picker.open()"
-			(keydown.space)="readonly() && picker.open()"
 		/>
-		<input
-			matEndDate
-			[placeholder]="endPlaceholder()"
-			[value]="value()?.end ?? null"
-			[readonly]="readonly()"
-			(dateChange)="onEndChange($event.value)"
-			(click)="readonly() && picker.open()"
-			(keydown.enter)="readonly() && picker.open()"
-			(keydown.space)="readonly() && picker.open()"
-		/>
-	</mat-date-range-input>
-	<mat-datepicker-toggle matIconSuffix [for]="picker" />
-	<mat-date-range-picker #picker />
-</mat-form-field>
+	</hlm-date-range-picker>
+</div>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/date-range-picker/date-range-picker.ts

@@ -3,64 +3,67 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+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 { DateRange } from '@angular/material/datepicker';
+export interface DateRange<D> {
+	start: D | null;
+	end: D | null;
+}
 
-/**
- * Thin wrapper over Material's `mat-form-field` + `mat-date-range-input` +
- * `mat-date-range-picker`. Relies on `provideNativeDateAdapter()`, so the value
- * is Material's `DateRange<Date>` (`{ start, end }`) of plain `Date`s.
- */
 @Component({
 	selector: 'app-date-range-picker',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule],
+	imports: [HlmDatePickerImports, NgClass],
+	host: { class: 'block min-w-0' },
 	templateUrl: './date-range-picker.html',
-	styleUrl: './date-range-picker.scss',
 })
 export class DateRangePickerComponent {
-	/** Two-way bindable range value. `null` clears the field. Supports `[(value)]`. */
 	readonly value = model<DateRange<Date> | null>(null);
-
 	readonly label = input<string>('');
 	readonly startPlaceholder = input<string>('Start');
 	readonly endPlaceholder = input<string>('End');
-	readonly disabled = input<boolean>(false);
-	readonly appearance = input<MatFormFieldAppearance>('outline');
-	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly readonly = input(false, { transform: booleanAttribute });
 	readonly size = input<AppFieldSize>('default');
-
-	/** Earliest / latest selectable date; `null` leaves that bound open. */
 	readonly min = input<Date | null>(null);
 	readonly max = input<Date | null>(null);
 
-	/** When `true`, calendar-only: typing is blocked, clicking opens the picker. */
-	readonly readonly = input<boolean>(false);
+	private static _uid = 0;
+	protected readonly labelId = `app-date-range-picker-${DateRangePickerComponent._uid++}`;
 
-	/** Start/end come off the range input's `(dateChange)` events as a pair. */
-	protected onStartChange(start: Date | null): void {
-		this.setRange(start, this.value()?.end ?? null);
-	}
+	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 onEndChange(end: Date | null): void {
-		this.setRange(this.value()?.start ?? null, end);
+	protected dateRange(): [Date, Date] | undefined {
+		const v = this.value();
+		if (v?.start && v?.end) return [v.start, v.end];
+		return undefined;
 	}
 
-	/**
-	 * Commit a range, guarding against an inverted `start > end` that the two
-	 * independent `(dateChange)` events can otherwise produce mid-selection.
-	 */
-	private setRange(start: Date | null, end: Date | null): void {
-		if (start && end && start.getTime() > end.getTime()) {
-			this.value.set(new DateRange(end, start));
+	protected onRangeChange(range: [Date | null, Date | null] | null): void {
+		if (!range) {
+			this.value.set(null);
 			return;
 		}
-		this.value.set(new DateRange(start, end));
+		this.value.set({ start: range[0], end: range[1] });
 	}
 }
+
+export const DateRangePickerImports = [DateRangePickerComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/dialog/dialog.html

@@ -1,37 +1,20 @@
-<ng-template
-	cdkConnectedOverlay
-	[cdkConnectedOverlayOpen]="open()"
-	[cdkConnectedOverlayHasBackdrop]="true"
-	cdkConnectedOverlayBackdropClass="cdk-overlay-dark-backdrop"
-	[cdkConnectedOverlayPositions]="[
-		{
-			originX: 'center',
-			originY: 'center',
-			overlayX: 'center',
-			overlayY: 'center',
-		},
-	]"
-	(backdropClick)="onBackdropClick()"
-	(overlayKeydown)="$event.key === 'Escape' && close()"
-	(detach)="close()"
+<hlm-dialog
+	[state]="open() ? 'open' : 'closed'"
+	[disableClose]="!closeOnBackdrop()"
+	[aria-label]="ariaLabel()"
+	[aria-labelledby]="ariaLabelledby()"
+	(stateChanged)="onStateChanged($event)"
 >
-	<div
-		role="dialog"
-		aria-modal="true"
-		[attr.aria-label]="ariaLabel()"
-		[attr.aria-labelledby]="ariaLabelledby()"
-		cdkTrapFocus
-		[cdkTrapFocusAutoCapture]="true"
-		class="bg-card text-card-foreground flex w-full max-w-md flex-col gap-4 rounded-xl p-6 shadow-lg ring-1 ring-black/10 outline-none"
-	>
-		<div data-slot="dialog-header" class="flex flex-col gap-1">
+	<button hlmDialogTrigger type="button" class="hidden" aria-label="Open dialog"></button>
+	<hlm-dialog-content *hlmDialogPortal>
+		<div hlmDialogHeader>
 			<ng-content select="[header]" />
 		</div>
-		<div data-slot="dialog-body" class="text-sm">
+		<div class="text-sm">
 			<ng-content />
 		</div>
-		<div data-slot="dialog-footer" class="flex items-center justify-end gap-2">
+		<div hlmDialogFooter>
 			<ng-content select="[footer]" />
 		</div>
-	</div>
-</ng-template>
+	</hlm-dialog-content>
+</hlm-dialog>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/dialog/dialog.ts

@@ -3,43 +3,26 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
+import { HlmDialogImports } from '@spartan-ng/styles/dialog';
 
-/**
- * Modal dialog backed by CDK Overlay. Slots: `[header]`, default (body),
- * `[footer]`. `open` is a two-way model; a backdrop click or Escape closes it
- * and emits `(closed)`. `cdkTrapFocus` keeps focus inside the panel while open.
- */
 @Component({
 	selector: 'app-dialog',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [CdkConnectedOverlay, CdkTrapFocus],
+	imports: [HlmDialogImports],
 	templateUrl: './dialog.html',
 })
 export class DialogComponent {
-	/** Two-way bindable open state. Supports `[(open)]`. */
 	readonly open = model<boolean>(false);
-
-	/** When true a backdrop click closes the dialog. */
 	readonly closeOnBackdrop = input<boolean>(true);
-
-	/** Accessible name for the dialog (or use `ariaLabelledby`). */
 	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
-
-	/** `id` of an element (e.g. the projected header) that names the dialog. */
 	readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
-
-	/** Emitted whenever the dialog transitions to closed. */
 	readonly closed = output<void>();
 
-	/** Imperatively open the dialog. */
 	show(): void {
 		this.open.set(true);
 	}
 
-	/** Imperatively close the dialog and notify listeners. */
 	close(): void {
 		if (this.open()) {
 			this.open.set(false);
@@ -47,9 +30,11 @@ export class DialogComponent {
 		}
 	}
 
-	protected onBackdropClick(): void {
-		if (this.closeOnBackdrop()) {
+	protected onStateChanged(state: 'open' | 'closed'): void {
+		if (state === 'closed' && this.open()) {
 			this.close();
 		}
 	}
 }
+
+export const DialogImports = [DialogComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/dropdown-menu/dropdown-menu.html

@@ -0,0 +1,20 @@
+<button
+	[hlmDropdownMenuTrigger]="menuTpl"
+	[align]="align()"
+	[side]="side()"
+	type="button"
+	[class]="triggerClass()"
+	[attr.aria-label]="ariaLabel()"
+>
+	<ng-content select="[trigger]" />
+</button>
+<ng-template #menuTpl>
+	<div
+		hlmDropdownMenu
+		appDropdownMenuInjector
+		#menuInjector="appDropdownMenuInjector"
+		[sideOffset]="sideOffset()"
+	>
+		<ng-container *ngTemplateOutlet="content().templateRef; injector: menuInjector.injector" />
+	</div>
+</ng-template>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/field/field.html

@@ -1,21 +1,15 @@
 @if (label()) {
-	<label [attr.for]="htmlFor()" class="text-sm leading-none font-medium select-none">
+	<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()) {
-	<p
-		[id]="htmlFor() ? htmlFor() + '-error' : null"
-		data-slot="field-error"
-		role="alert"
-		class="text-destructive text-sm"
-	>
-		{{ error() }}
-	</p>
+	<hlm-field-error [forceShow]="true">{{ error() }}</hlm-field-error>
 }

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/field/field.ts

@@ -3,34 +3,26 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmField, HlmFieldImports } from '@spartan-ng/styles/field';
 
-/**
- * Form-field wrapper: renders a `<label>`, the projected control, and an error
- * message when present. Composes around `app-input` and other controls.
- */
 @Component({
 	selector: 'app-field',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './field.html',
+	imports: [HlmFieldImports],
+	hostDirectives: [HlmField],
 	host: {
 		'data-slot': 'field',
-		class: 'flex flex-col gap-1.5',
+		'[attr.data-invalid]': 'error() ? true : null',
 	},
+	templateUrl: './field.html',
 })
 export class FieldComponent {
-	/** Optional label text rendered above the control. */
 	readonly label = input<string>('');
-
-	/**
-	 * Error message; renders in a `role="alert"` region. When `htmlFor` is set
-	 * the region gets id `<htmlFor>-error` for the control's `aria-describedby`.
-	 */
+	readonly description = input<string>('');
 	readonly error = input<string | null>(null);
-
-	/** Marks the field required and renders an asterisk next to the label. */
-	readonly required = input<boolean>(false);
-
-	/** `id` of the projected control; forwarded to the label's `for`. */
+	readonly required = input(false, { transform: booleanAttribute });
 	readonly htmlFor = input<string | null>(null);
 }
+
+export const FieldImports = [FieldComponent] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/icon/icon.ts

@@ -0,0 +1,62 @@
+/**
+ * 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,
+	lucideChevronRight,
+	lucideCircleAlert,
+	lucideFileQuestion,
+	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,
+	arrowUp: lucideArrowUp,
+	arrowDown: lucideArrowDown,
+	noResults: lucideSearchX,
+	notFound: lucideFileQuestion,
+} 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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/input/input.html

@@ -1,19 +1,34 @@
-<mat-form-field
-	class="w-full"
-	[class]="'size-' + size()"
-	[appearance]="appearance()"
-	subscriptSizing="dynamic"
->
+<div class="w-full space-y-1.5">
 	@if (label()) {
-		<mat-label>{{ label() }}</mat-label>
+		<label hlmLabel [for]="resolvedId()">{{ label() }}</label>
 	}
-	<input
-		matInput
-		[type]="type()"
-		[placeholder]="placeholder()"
-		[disabled]="disabled()"
-		[attr.id]="id() || null"
-		[attr.aria-describedby]="ariaDescribedby() || null"
-		[(ngModel)]="value"
-	/>
-</mat-form-field>
+	<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>