@spartan-ng/cli 0.0.1-alpha.657 → 0.0.1-alpha.658

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker.ts.template

@@ -5,18 +5,20 @@ import {
 	Component,
 	computed,
 	forwardRef,
+	inject,
 	input,
 	linkedSignal,
 	output,
 	signal,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { provideIcons } from '@ng-icons/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
-import { HlmIconImports } from '<%- importAlias %>/icon';
+import { HlmIcon } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
@@ -32,20 +34,32 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-picker',
-	imports: [HlmIconImports, HlmPopoverImports, HlmCalendar],
-	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	imports: [NgIcon, HlmIcon, BrnFieldControlDescribedBy, HlmPopoverImports, HlmCalendar],
+	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown }), provideBrnLabelable(HlmDatePicker)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
 	host: {
 		class: 'block',
 	},
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+		<hlm-popover
+			sideOffset="5"
+			[state]="_popoverState()"
+			(stateChanged)="_popoverState.set($event)"
+			(closed)="_onTouched?.()"
+		>
 			<button
 				[id]="buttonId()"
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
+				[attr.aria-invalid]="_ariaInvalid()"
+				[attr.data-invalid]="_ariaInvalid()"
+				[attr.data-touched]="_touched?.() ? 'true' : null"
+				[attr.data-dirty]="_dirty?.() ? 'true' : null"
+				[attr.data-matches-spartan-invalid]="_spartanInvalid?.() ? 'true' : null"
 				hlmPopoverTrigger
+				brnFieldControlDescribedBy
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -74,14 +88,28 @@ let nextId = 0;
 })
 export class HlmDatePicker<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid?.()
+			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+			: '',
+	);
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+			this._errorStateClass(),
 			this.userClass(),
 		),
 	);
@@ -130,6 +158,8 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 
 	public readonly dateChange = output<T>();
 
+	public readonly labelableId = this.buttonId;
+
 	protected _onChange?: ChangeFn<T>;
 	protected _onTouched?: TouchFn;
 

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-picker.ts.template

@@ -5,6 +5,7 @@ import {
 	Component,
 	computed,
 	forwardRef,
+	inject,
 	input,
 	linkedSignal,
 	output,
@@ -15,6 +16,7 @@ import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
 import { HlmIconImports } from '<%- importAlias %>/icon';
@@ -33,9 +35,14 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-range-picker',
-	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarRange],
-	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarRange, BrnFieldControlDescribedBy],
+	providers: [
+		HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
+		provideIcons({ lucideChevronDown }),
+		provideBrnLabelable(HlmDateRangePicker),
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
 	host: {
 		class: 'block',
 	},
@@ -44,14 +51,20 @@ let nextId = 0;
 			sideOffset="5"
 			[state]="_popoverState()"
 			(stateChanged)="_popoverState.set($event)"
-			(closed)="_onClose()"
+			(closed)="_onClose(); _onTouched?.()"
 		>
 			<button
 				[id]="buttonId()"
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
+				[attr.aria-invalid]="_ariaInvalid()"
+				[attr.data-invalid]="_ariaInvalid()"
+				[attr.data-touched]="_touched?.() ? 'true' : null"
+				[attr.data-dirty]="_dirty?.() ? 'true' : null"
+				[attr.data-matches-spartan-invalid]="_spartanInvalid?.() ? 'true' : null"
 				hlmPopoverTrigger
+				brnFieldControlDescribedBy
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -82,14 +95,28 @@ let nextId = 0;
 })
 export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDateRangePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
+	protected readonly _touched = this._fieldControl?.touched;
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _invalid = this._fieldControl?.invalid;
+
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid?.()
+			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+			: '',
+	);
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+			this._errorStateClass(),
 			this.userClass(),
 		),
 	);
@@ -142,6 +169,8 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 
 	public readonly dateChange = output<[T, T] | null>();
 
+	public readonly labelableId = this.buttonId;
+
 	protected _onChange?: ChangeFn<[T, T] | null>;
 	protected _onTouched?: TouchFn;
 

package/src/generators/ui/libs/field/files/index.ts.template

@@ -22,13 +22,13 @@ export * from './lib/hlm-field-title';
 
 export const HlmFieldImports = [
 	HlmField,
-	HlmFieldTitle,
 	HlmFieldContent,
 	HlmFieldDescription,
 	HlmFieldError,
-	HlmFieldLabel,
-	HlmFieldSeparator,
 	HlmFieldGroup,
+	HlmFieldLabel,
 	HlmFieldLegend,
+	HlmFieldSeparator,
 	HlmFieldSet,
+	HlmFieldTitle,
 ] as const;

package/src/generators/ui/libs/field/files/lib/hlm-field-content.ts.template

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmFieldContent {
 	constructor() {
-		classes(() => 'group/field-content flex flex-1 flex-col gap-1.5 leading-snug');
+		classes(() => 'group/field-content flex flex-1 flex-col gap-1 leading-snug');
 	}
 }

package/src/generators/ui/libs/field/files/lib/hlm-field-description.ts.template

@@ -1,18 +1,56 @@
-import { Directive } from '@angular/core';
+import { Directive, effect, EffectRef, inject, input, OnDestroy } from '@angular/core';
+import { BrnFieldA11yService } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldDescription],hlm-field-description',
 	host: {
 		'data-slot': 'field-description',
+		'[attr.id]': 'id()',
 	},
 })
-export class HlmFieldDescription {
+export class HlmFieldDescription implements OnDestroy {
+	private static _id = 0;
+
+	private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly id = input<string>(`hlm-field-description-${HlmFieldDescription._id++}`);
+
+	private _registeredId?: string;
+
+	private readonly _cleanup: EffectRef | null = this._a11y
+		? effect(() => {
+				const a11y = this._a11y;
+				if (!a11y) return;
+
+				const id = this.id();
+				if (this._registeredId && this._registeredId !== id) {
+					a11y.unregisterDescription(this._registeredId);
+				}
+
+				if (this._registeredId !== id) {
+					a11y.registerDescription(id);
+					this._registeredId = id;
+				}
+			})
+		: null;
+
 	constructor() {
 		classes(() => [
 			'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
 			'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
 			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+			this.userClass(),
 		]);
 	}
+
+	ngOnDestroy() {
+		this._cleanup?.destroy();
+
+		if (this._registeredId) {
+			this._a11y?.unregisterDescription(this._registeredId);
+		}
+	}
 }

package/src/generators/ui/libs/field/files/lib/hlm-field-error.ts.template

@@ -1,40 +1,102 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	effect,
+	EffectRef,
+	inject,
+	input,
+	OnDestroy,
+} from '@angular/core';
+import { BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '<%- importAlias %>/utils';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-error',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		role: 'alert',
+		'data-slot': 'field-error',
+		'[attr.id]': 'id()',
+		'[hidden]': '!_display()',
+	},
 	template: `
-		<div role="alert" data-slot="field-error" [class]="_computedClass()">
-			<ng-content>
-				@if (_uniqueErrors().length === 1) {
-					{{ _uniqueErrors()[0]?.message }}
-				} @else if (_uniqueErrors().length > 1) {
-					<ul class="ml-4 flex list-disc flex-col gap-1">
-						@for (error of _uniqueErrors(); track $index) {
-							@if (error?.message) {
-								<li>{{ error?.message }}</li>
-							}
-						}
-					</ul>
-				}
-			</ng-content>
-		</div>
+		@if (_display()) {
+			<ng-content />
+		}
 	`,
 })
-export class HlmFieldError {
+export class HlmFieldError implements OnDestroy {
+	private static _id = 0;
+
+	private readonly _field = inject(BrnField, { optional: true });
+	private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+	private _registeredId?: string;
+
+	private readonly _hasParentField = !!this._field;
+
+	/** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+	public readonly id = input<string>(`hlm-field-error-${HlmFieldError._id++}`);
+
+	/** Additional CSS classes to apply to the field error element. */
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly error = input<Array<{ message: string } | undefined>>();
 
-	protected readonly _uniqueErrors = computed(() => {
-		const errors = this.error();
-		if (!errors?.length) {
-			return [];
-		}
+	/**
+	 * The name of the specific validator error key to match (e.g. 'required').
+	 * When omitted, the error is shown if any validation error is present.
+	 */
+	public readonly validator = input<string>();
+
+	/** Forces the error message to be visible regardless of the control's validation state. */
+	public readonly forceShow = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	protected readonly _display = computed(() => !this._hasParentField || this.forceShow() || this._hasError());
+
+	protected readonly _hasError = computed(() => {
+		const errors = this._field?.errors();
+		if (!errors) return false;
 
-		return [...new Map(errors.map((err) => [err?.message, err])).values()];
+		const validator = this.validator();
+		const spartanInvalid = this._field?.controlState()?.spartanInvalid;
+
+		if (!spartanInvalid) return false;
+
+		return validator ? validator in errors : Object.keys(errors).length > 0;
 	});
 
-	protected readonly _computedClass = computed(() => hlm('text-destructive text-sm font-normal', this.userClass()));
+	private readonly _cleanup: EffectRef | null = this._a11y
+		? effect(() => {
+				const a11y = this._a11y;
+				if (!a11y) return;
+
+				const id = this.id();
+				const hasError = this._hasError();
+
+				if (this._registeredId && (this._registeredId !== id || !hasError)) {
+					a11y.unregisterError(this._registeredId);
+					this._registeredId = undefined;
+				}
+
+				if (hasError && this._registeredId !== id) {
+					a11y.registerError(id);
+					this._registeredId = id;
+				}
+			})
+		: null;
+
+	constructor() {
+		classes(() => ['text-destructive text-sm font-normal', this.userClass()]);
+	}
+
+	ngOnDestroy() {
+		this._cleanup?.destroy();
+
+		if (this._registeredId) {
+			this._a11y?.unregisterError(this._registeredId);
+		}
+	}
 }

package/src/generators/ui/libs/field/files/lib/hlm-field-group.ts.template

@@ -11,7 +11,7 @@ export class HlmFieldGroup {
 	constructor() {
 		classes(
 			() =>
-				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
 		);
 	}
 }

package/src/generators/ui/libs/field/files/lib/hlm-field-legend.ts.template

@@ -9,9 +9,9 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmFieldLegend {
+	public readonly variant = input<'label' | 'legend'>('legend');
+
 	constructor() {
 		classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
 	}
-
-	public readonly variant = input<'label' | 'legend'>('legend');
 }

package/src/generators/ui/libs/field/files/lib/hlm-field.ts.template

@@ -1,19 +1,20 @@
 import { Directive, input } from '@angular/core';
+import { BrnField } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 
-const fieldVariants = cva('group/field data-[invalid=true]:text-destructive flex w-full gap-3', {
+const fieldVariants = cva('group/field data-[matches-spartan-invalid=true]:text-destructive flex w-full gap-3', {
 	variants: {
 		orientation: {
-			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+			vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
 			horizontal: [
 				'flex-row items-center',
-				'[&>[data-slot=field-label]]:flex-auto',
+				'*:data-[slot=field-label]:flex-auto',
 				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			],
 			responsive: [
-				'flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto',
-				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+				'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+				'@md/field-group:*:data-[slot=field-label]:flex-auto',
 				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			],
 		},
@@ -27,6 +28,7 @@ export type FieldVariants = VariantProps<typeof fieldVariants>;
 
 @Directive({
 	selector: '[hlmField],hlm-field',
+	hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
 	host: {
 		role: 'group',
 		'data-slot': 'field',
@@ -35,6 +37,7 @@ export type FieldVariants = VariantProps<typeof fieldVariants>;
 })
 export class HlmField {
 	public readonly orientation = input<FieldVariants['orientation']>('vertical');
+
 	constructor() {
 		classes(() => fieldVariants({ orientation: this.orientation() }));
 	}

package/src/generators/ui/libs/input/files/lib/hlm-input.ts.template

@@ -1,29 +1,15 @@
-import {
-	computed,
-	Directive,
-	effect,
-	forwardRef,
-	inject,
-	Injector,
-	input,
-	linkedSignal,
-	signal,
-	untracked,
-	type DoCheck,
-} from '@angular/core';
-import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
-import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
+import { Directive, input, linkedSignal } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnInput } from '@spartan-ng/brain/input';
 import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(
 	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 	{
 		variants: {
 			error: {
-				auto: '[&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:ring-destructive/40',
+				auto: 'data-[matches-spartan-invalid=true]:border-destructive data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40',
 				true: 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
 			},
 		},
@@ -36,62 +22,17 @@ type InputVariants = VariantProps<typeof inputVariants>;
 
 @Directive({
 	selector: '[hlmInput]',
-	providers: [
-		{
-			provide: BrnFormFieldControl,
-			useExisting: forwardRef(() => HlmInput),
-		},
-	],
+	hostDirectives: [{ directive: BrnInput, inputs: ['id'] }, BrnFieldControlDescribedBy],
 })
-export class HlmInput implements BrnFormFieldControl, DoCheck {
-	private readonly _injector = inject(Injector);
-	private readonly _additionalClasses = signal<ClassValue>('');
-
-	private readonly _errorStateTracker: ErrorStateTracker;
-
-	private readonly _defaultErrorStateMatcher = inject(ErrorStateMatcher);
-	private readonly _parentForm = inject(NgForm, { optional: true });
-	private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
-
+export class HlmInput {
+	/** Controls the error visual state of the input.
+	 * Defaults to 'auto', which infers the state from the associated form control.
+	 */
 	public readonly error = input<InputVariants['error']>('auto');
 
 	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
 
-	public readonly ngControl: NgControl | null = this._injector.get(NgControl, null);
-
-	public readonly errorState = computed(() => this._errorStateTracker.errorState());
-
 	constructor() {
-		this._errorStateTracker = new ErrorStateTracker(
-			this._defaultErrorStateMatcher,
-			this.ngControl,
-			this._parentFormGroup,
-			this._parentForm,
-		);
-
-		classes(() => [inputVariants({ error: this._state().error }), this._additionalClasses()]);
-
-		effect(() => {
-			const error = this._errorStateTracker.errorState();
-			untracked(() => {
-				if (this.ngControl) {
-					const shouldShowError = error && this.ngControl.invalid && (this.ngControl.touched || this.ngControl.dirty);
-					this._errorStateTracker.errorState.set(shouldShowError ? true : false);
-					this.setError(shouldShowError ? true : 'auto');
-				}
-			});
-		});
-	}
-
-	ngDoCheck() {
-		this._errorStateTracker.updateErrorState();
-	}
-
-	setError(error: InputVariants['error']) {
-		this._state.set({ error });
-	}
-
-	setClass(classes: string): void {
-		this._additionalClasses.set(classes);
+		classes(() => inputVariants({ error: this._state().error }));
 	}
 }

package/src/generators/ui/libs/input-group/files/lib/hlm-input-group.ts.template

@@ -1,4 +1,5 @@
-import { Directive } from '@angular/core';
+import { computed, contentChild, Directive, inject } from '@angular/core';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -9,6 +10,15 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmInputGroup {
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+	private readonly _fieldControlChild = contentChild(BrnFieldControl);
+
+	private readonly _spartanInvalid = computed(() => {
+		if (this._fieldControl) return this._fieldControl.spartanInvalid();
+
+		return this._fieldControlChild()?.spartanInvalid();
+	});
+
 	constructor() {
 		classes(() => [
 			'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
@@ -18,10 +28,10 @@ export class HlmInputGroup {
 			'has-[>[data-align=inline-end]]:[&>input]:pe-2',
 			'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
 			'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-			// Focus state.
-			'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
-			// Error state.
-			'has-[>.ng-invalid.ng-touched]:ring-destructive/20 has-[>.ng-invalid.ng-touched]:border-destructive dark:has-[>.ng-invalid.ng-touched]:ring-destructive/40',
+			'has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+			this._spartanInvalid?.()
+				? 'has-[>[data-matches-spartan-invalid=true]]:ring-destructive/20 has-[>[data-matches-spartan-invalid=true]]:border-destructive dark:has-[>[data-matches-spartan-invalid=true]]:ring-destructive/40'
+				: 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
 		]);
 	}
 }

package/src/generators/ui/libs/label/files/lib/hlm-label.ts.template

@@ -7,9 +7,12 @@ import { classes } from '<%- importAlias %>/utils';
 	hostDirectives: [
 		{
 			directive: BrnLabel,
-			inputs: ['id'],
+			inputs: ['id', 'for'],
 		},
 	],
+	host: {
+		'data-slot': 'label',
+	},
 })
 export class HlmLabel {
 	constructor() {