@spartan-ng/cli 0.0.1-alpha.608 → 0.0.1-alpha.610

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.608",
+  "version": "0.0.1-alpha.610",
   "type": "commonjs",
   "dependencies": {
     "@angular/core": ">=19.0.0",

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

@@ -1,23 +1,37 @@
 import { HlmAutocomplete } from './lib/hlm-autocomplete';
+import { HlmAutocompleteContent } from './lib/hlm-autocomplete-content';
 import { HlmAutocompleteEmpty } from './lib/hlm-autocomplete-empty';
 import { HlmAutocompleteGroup } from './lib/hlm-autocomplete-group';
+import { HlmAutocompleteInput } from './lib/hlm-autocomplete-input';
 import { HlmAutocompleteItem } from './lib/hlm-autocomplete-item';
+import { HlmAutocompleteLabel } from './lib/hlm-autocomplete-label';
 import { HlmAutocompleteList } from './lib/hlm-autocomplete-list';
-import { HlmAutocompleteTrigger } from './lib/hlm-autocomplete-trigger';
+import { HlmAutocompleteSearch } from './lib/hlm-autocomplete-search';
+import { HlmAutocompleteSeparator } from './lib/hlm-autocomplete-separator';
+import { HlmAutocompleteStatus } from './lib/hlm-autocomplete-status';
 
 export * from './lib/hlm-autocomplete';
+export * from './lib/hlm-autocomplete-content';
 export * from './lib/hlm-autocomplete-empty';
 export * from './lib/hlm-autocomplete-group';
+export * from './lib/hlm-autocomplete-input';
 export * from './lib/hlm-autocomplete-item';
+export * from './lib/hlm-autocomplete-label';
 export * from './lib/hlm-autocomplete-list';
-export * from './lib/hlm-autocomplete-trigger';
-export * from './lib/hlm-autocomplete.token';
+export * from './lib/hlm-autocomplete-search';
+export * from './lib/hlm-autocomplete-separator';
+export * from './lib/hlm-autocomplete-status';
 
 export const HlmAutocompleteImports = [
 	HlmAutocomplete,
+	HlmAutocompleteContent,
 	HlmAutocompleteEmpty,
 	HlmAutocompleteGroup,
+	HlmAutocompleteInput,
 	HlmAutocompleteItem,
+	HlmAutocompleteLabel,
 	HlmAutocompleteList,
-	HlmAutocompleteTrigger,
+	HlmAutocompleteSearch,
+	HlmAutocompleteSeparator,
+	HlmAutocompleteStatus,
 ] as const;

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteContent } from '@spartan-ng/brain/autocomplete';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocompleteContent]',
+	hostDirectives: [BrnAutocompleteContent],
+})
+export class HlmAutocompleteContent {
+	constructor() {
+		classes(
+			() =>
+				'group/autocomplete-content bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 w-(--brn-autocomplete-width) min-w-36 overflow-hidden rounded-md p-0 shadow-md ring-1 duration-100',
+		);
+	}
+}

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

@@ -1,11 +1,19 @@
 import { Directive } from '@angular/core';
+import { BrnAutocompleteEmpty } from '@spartan-ng/brain/autocomplete';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmAutocompleteEmpty]',
+	selector: '[hlmAutocompleteEmpty],hlm-autocomplete-empty',
+	hostDirectives: [BrnAutocompleteEmpty],
+	host: {
+		'data-slot': 'autocomplete-empty',
+	},
 })
 export class HlmAutocompleteEmpty {
 	constructor() {
-		classes(() => 'py-6 text-center text-sm');
+		classes(
+			() =>
+				'text-muted-foreground hidden w-full items-center justify-center gap-2 py-2 text-center text-sm group-data-empty/autocomplete-content:flex',
+		);
 	}
 }

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

@@ -3,16 +3,14 @@ import { BrnAutocompleteGroup } from '@spartan-ng/brain/autocomplete';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmAutocompleteGroup],hlm-autocomplete-group',
-	hostDirectives: [
-		{
-			directive: BrnAutocompleteGroup,
-			inputs: ['id'],
-		},
-	],
+	selector: '[hlmAutocompleteGroup]',
+	hostDirectives: [BrnAutocompleteGroup],
+	host: {
+		'data-slot': 'autocomplete-group',
+	},
 })
 export class HlmAutocompleteGroup {
 	constructor() {
-		classes(() => 'text-foreground block overflow-hidden p-1');
+		classes(() => 'data-hidden:hidden');
 	}
 }

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

@@ -0,0 +1,64 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideSearch, lucideX } from '@ng-icons/lucide';
+import {
+	BrnAutocompleteAnchor,
+	BrnAutocompleteClear,
+	BrnAutocompleteInput,
+	BrnAutocompleteInputWrapper,
+} from '@spartan-ng/brain/autocomplete';
+import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
+
+@Component({
+	selector: 'hlm-autocomplete-input',
+	imports: [HlmInputGroupImports, NgIcon, BrnAutocompleteAnchor, BrnAutocompleteClear, BrnAutocompleteInput],
+	providers: [provideIcons({ lucideSearch, lucideX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnAutocompleteInputWrapper],
+	template: `
+		<hlm-input-group brnAutocompleteAnchor class="w-auto">
+			<input
+				brnAutocompleteInput
+				#autocompleteInput="brnAutocompleteInput"
+				hlmInputGroupInput
+				[placeholder]="placeholder()"
+				[attr.aria-invalid]="ariaInvalid() ? 'true' : null"
+			/>
+
+			@if (showSearch()) {
+				<hlm-input-group-addon>
+					<ng-icon name="lucideSearch" [class.opacity-50]="autocompleteInput.disabled()" />
+				</hlm-input-group-addon>
+			}
+
+			@if (showClear()) {
+				<hlm-input-group-addon align="inline-end">
+					<button
+						*brnAutocompleteClear
+						hlmInputGroupButton
+						data-slot="autocomplete-clear"
+						[disabled]="autocompleteInput.disabled()"
+						size="icon-xs"
+						variant="ghost"
+					>
+						<ng-icon name="lucideX" />
+					</button>
+				</hlm-input-group-addon>
+			}
+			<ng-content />
+		</hlm-input-group>
+	`,
+})
+export class HlmAutocompleteInput {
+	public readonly placeholder = input<string>('');
+
+	public readonly showSearch = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+	public readonly showClear = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	// TODO input and input-group styles need to support aria-invalid directly
+	public readonly ariaInvalid = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+		alias: 'aria-invalid',
+	});
+}

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

@@ -1,22 +1,38 @@
-import { Directive } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
 import { BrnAutocompleteItem } from '@spartan-ng/brain/autocomplete';
 import { classes } from '<%- importAlias %>/utils';
 
-@Directive({
-	selector: 'button[hlmAutocompleteItem],button[hlm-autocomplete-item]',
-	hostDirectives: [
-		{
-			directive: BrnAutocompleteItem,
-			inputs: ['value', 'disabled', 'id'],
-			outputs: ['selected'],
-		},
-	],
+@Component({
+	selector: 'hlm-autocomplete-item',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnAutocompleteItem, inputs: ['id', 'disabled', 'value'] }],
+	host: {
+		'data-slot': 'autocomplete-item',
+	},
+	template: `
+		<ng-content />
+		@if (_active()) {
+			<ng-icon
+				name="lucideCheck"
+				class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+				aria-hidden="true"
+			/>
+		}
+	`,
 })
 export class HlmAutocompleteItem {
+	private readonly _brnAutocompleteItem = inject(BrnAutocompleteItem);
+
+	protected readonly _active = this._brnAutocompleteItem.active;
+
 	constructor() {
 		classes(
 			() =>
-				`data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[hidden]:hidden [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon:not([class*='text-'])]:text-base`,
+				`data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-hidden:hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
 		);
 	}
 }

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteLabel } from '@spartan-ng/brain/autocomplete';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocompleteLabel]',
+	hostDirectives: [{ directive: BrnAutocompleteLabel, inputs: ['id'] }],
+	host: {
+		'data-slot': 'autocomplete-label',
+	},
+})
+export class HlmAutocompleteLabel {
+	constructor() {
+		classes(() => 'text-muted-foreground px-2 py-1.5 text-xs');
+	}
+}

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

@@ -3,16 +3,17 @@ import { BrnAutocompleteList } from '@spartan-ng/brain/autocomplete';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmAutocompleteList],hlm-autocomplete-list',
-	hostDirectives: [
-		{
-			directive: BrnAutocompleteList,
-			inputs: ['id'],
-		},
-	],
+	selector: '[hlmAutocompleteList]',
+	hostDirectives: [{ directive: BrnAutocompleteList, inputs: ['id'] }],
+	host: {
+		'data-slot': 'autocomplete-list',
+	},
 })
 export class HlmAutocompleteList {
 	constructor() {
-		classes(() => 'block max-h-60 overflow-x-hidden overflow-y-auto');
+		classes(
+			() =>
+				'no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
+		);
 	}
 }

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

@@ -0,0 +1,38 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteSearch } from '@spartan-ng/brain/autocomplete';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocompleteSearch],hlm-autocomplete-search',
+	providers: [
+		provideBrnPopoverConfig({
+			align: 'start',
+			sideOffset: 6,
+		}),
+		provideBrnDialogDefaultOptions({
+			autoFocus: 'first-heading',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: BrnAutocompleteSearch,
+			inputs: ['disabled', 'value', 'search', 'itemToString'],
+			outputs: ['valueChange', 'searchChange'],
+		},
+		{
+			directive: BrnPopover,
+			inputs: ['align', 'autoFocus', 'closeDelay', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+	host: {
+		'data-slot': 'autocomplete',
+	},
+})
+export class HlmAutocompleteSearch {
+	constructor() {
+		classes(() => 'block');
+	}
+}

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteSeparator } from '@spartan-ng/brain/autocomplete';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocompleteSeparator]',
+	hostDirectives: [{ directive: BrnAutocompleteSeparator, inputs: ['orientation'] }],
+	host: {
+		'data-slot': 'autocomplete-separator',
+	},
+})
+export class HlmAutocompleteSeparator {
+	constructor() {
+		classes(() => 'bg-border -mx-1 my-1 h-px');
+	}
+}

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteStatus } from '@spartan-ng/brain/autocomplete';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocompleteStatus],hlm-autocomplete-status',
+	hostDirectives: [BrnAutocompleteStatus],
+	host: {
+		'data-slot': 'autocomplete-status',
+	},
+})
+export class HlmAutocompleteStatus {
+	constructor() {
+		classes(() => 'text-muted-foreground flex w-full items-center justify-center gap-2 px-3 py-2 text-center text-sm');
+	}
+}

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

@@ -1,357 +1,38 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
-import { NgTemplateOutlet } from '@angular/common';
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	effect,
-	ElementRef,
-	forwardRef,
-	inject,
-	input,
-	linkedSignal,
-	model,
-	output,
-	type TemplateRef,
-	viewChild,
-} from '@angular/core';
-import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronDown, lucideCircleX, lucideSearch } from '@ng-icons/lucide';
-import { BrnAutocomplete, BrnAutocompleteImports } from '@spartan-ng/brain/autocomplete';
-import { debouncedSignal } from '@spartan-ng/brain/core';
-import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { BrnPopoverImports } from '@spartan-ng/brain/popover';
-import { HlmIconImports } from '<%- importAlias %>/icon';
-import { HlmPopoverImports } from '<%- importAlias %>/popover';
-import { classes, hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-import { HlmAutocompleteEmpty } from './hlm-autocomplete-empty';
-import { HlmAutocompleteGroup } from './hlm-autocomplete-group';
-import { HlmAutocompleteItem } from './hlm-autocomplete-item';
-import { HlmAutocompleteList } from './hlm-autocomplete-list';
-
-import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
-import { HlmAutocompleteTrigger } from './hlm-autocomplete-trigger';
-import { injectHlmAutocompleteConfig } from './hlm-autocomplete.token';
-
-export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
-	provide: NG_VALUE_ACCESSOR,
-	useExisting: forwardRef(() => HlmAutocomplete),
-	multi: true,
-};
-
-@Component({
-	selector: 'hlm-autocomplete',
-	imports: [
-		NgTemplateOutlet,
-		BrnAutocompleteImports,
-		HlmAutocompleteEmpty,
-		HlmAutocompleteGroup,
-		HlmAutocompleteItem,
-		HlmAutocompleteList,
-		HlmAutocompleteTrigger,
-		BrnPopoverImports,
-		HlmPopoverImports,
-		HlmIconImports,
-		HlmInputGroupImports,
+import { Directive } from '@angular/core';
+import { BrnAutocomplete } from '@spartan-ng/brain/autocomplete';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAutocomplete],hlm-autocomplete',
+	providers: [
+		provideBrnPopoverConfig({
+			align: 'start',
+			sideOffset: 6,
+		}),
+		provideBrnDialogDefaultOptions({
+			autoFocus: 'first-heading',
+		}),
 	],
-	providers: [HLM_AUTOCOMPLETE_VALUE_ACCESSOR, provideIcons({ lucideSearch, lucideChevronDown, lucideCircleX })],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	template: `
-		@let transformer = transformOptionToValue();
-		<hlm-popover
-			#popover
-			align="start"
-			autoFocus="first-heading"
-			sideOffset="5"
-			closeDelay="100"
-			closeOnOutsidePointerEvents="true"
-			(closed)="_closed()"
-		>
-			<div brnAutocomplete (selectionCleared)="_selectionCleared()">
-				<div
-					hlmInputGroup
-					hlmAutocompleteTrigger
-					[class]="_computedAutocompleteSearchClass()"
-					[disabledTrigger]="!_search() || _disabled()"
-				>
-					<input
-						#input
-						brnAutocompleteSearchInput
-						hlmInputGroupInput
-						type="text"
-						autocomplete="off"
-						[id]="inputId()"
-						[class]="_computedAutocompleteInputClass()"
-						[placeholder]="searchPlaceholderText()"
-						[disabled]="_disabled()"
-						[value]="search()"
-						(input)="_searchChanged($event)"
-					/>
-					<div hlmInputGroupAddon>
-						<ng-icon name="lucideSearch" />
-					</div>
-					<div hlmInputGroupAddon align="inline-end">
-						@if (showClearBtn() && value() !== undefined) {
-							<button
-								hlmInputGroupButton
-								type="button"
-								tabindex="-1"
-								aria-label="clear"
-								[disabled]="_disabled()"
-								(click)="_selectionCleared()"
-								size="icon-xs"
-							>
-								<ng-icon name="lucideCircleX" />
-							</button>
-						}
-
-						<button
-							hlmInputGroupButton
-							type="button"
-							tabindex="-1"
-							[attr.aria-label]="ariaLabelToggleButton()"
-							[disabled]="_disabled()"
-							(click)="_toggleOptions()"
-							size="icon-xs"
-						>
-							<ng-icon name="lucideChevronDown" />
-						</button>
-					</div>
-				</div>
-
-				<div
-					*brnPopoverContent="let ctx"
-					hlmPopoverContent
-					class="p-0"
-					[style.width.px]="_elementRef.nativeElement.offsetWidth"
-				>
-					<hlm-autocomplete-list
-						[class]="_computedAutocompleteListClass()"
-						[class.hidden]="filteredOptions().length === 0"
-					>
-						<hlm-autocomplete-group>
-							@for (option of filteredOptions(); track option) {
-								<button
-									hlm-autocomplete-item
-									[class]="_computedAutocompleteItemClass()"
-									[value]="transformer ? transformer(option) : option"
-									(selected)="_optionSelected(option)"
-								>
-									@if (optionTemplate(); as optionTemplate) {
-										<ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: option }" />
-									} @else {
-										{{ transformOptionToString()(option) }}
-									}
-								</button>
-							}
-						</hlm-autocomplete-group>
-					</hlm-autocomplete-list>
-
-					<div *brnAutocompleteEmpty hlmAutocompleteEmpty [class]="_computedAutocompleteEmptyClass()">
-						@if (loading()) {
-							<ng-content select="[loading]">{{ loadingText() }}</ng-content>
-						} @else {
-							<ng-content select="[empty]">{{ emptyText() }}</ng-content>
-						}
-					</div>
-				</div>
-			</div>
-		</hlm-popover>
-	`,
+	hostDirectives: [
+		{
+			directive: BrnAutocomplete,
+			inputs: ['disabled', 'value', 'search', 'itemToString', 'isItemEqualToValue'],
+			outputs: ['valueChange', 'searchChange'],
+		},
+		{
+			directive: BrnPopover,
+			inputs: ['align', 'autoFocus', 'closeDelay', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+	host: {
+		'data-slot': 'autocomplete',
+	},
 })
-export class HlmAutocomplete<T, V = T> implements ControlValueAccessor {
-	private static _id = 0;
-	private readonly _config = injectHlmAutocompleteConfig<T, V>();
-
-	private readonly _brnAutocomplete = viewChild.required(BrnAutocomplete);
-
-	private readonly _inputRef = viewChild.required('input', { read: ElementRef });
-
-	protected readonly _elementRef = inject(ElementRef<HTMLElement>);
-
-	/** Custom class for the autocomplete search container. */
-	public readonly autocompleteSearchClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteSearchClass = computed(() => hlm(this.autocompleteSearchClass()));
-
-	/** Custom class for the autocomplete input. */
-	public readonly autocompleteInputClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteInputClass = computed(() => hlm(this.autocompleteInputClass()));
-
-	/** Custom class for the autocomplete list. */
-	public readonly autocompleteListClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteListClass = computed(() => hlm(this.autocompleteListClass()));
-
-	/** Custom class for each autocomplete item. */
-	public readonly autocompleteItemClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteItemClass = computed(() => hlm(this.autocompleteItemClass()));
-
-	/** Custom class for the empty and loading state container. */
-	public readonly autocompleteEmptyClass = input<ClassValue>('');
-	protected readonly _computedAutocompleteEmptyClass = computed(() => hlm(this.autocompleteEmptyClass()));
-
-	/** The list of filtered options to display in the autocomplete. */
-	public readonly filteredOptions = input<T[]>([]);
-
-	/** The selected value. */
-	public readonly value = model<T | V>();
-
-	/** Debounce time in milliseconds for the search input. */
-	public readonly debounceTime = input<number>(this._config.debounceTime);
-
-	/** The search query. */
-	public readonly search = model<string>('');
-
-	/** Debounced search query. */
-	protected readonly _search = debouncedSignal(this.search, this.debounceTime());
-
-	/** Function to transform an option value to a search string. Defaults to identity function for strings. */
-	public readonly transformValueToSearch = input<(option: T) => string>(this._config.transformValueToSearch);
-
-	/** Whether selection of an option is required. */
-	public readonly requireSelection = input<boolean, BooleanInput>(this._config.requireSelection, {
-		transform: booleanAttribute,
-	});
-
-	/** Function to transform an option value to a display string. Defaults to identity function for strings. */
-	public readonly transformOptionToString = input<(option: T) => string>(this._config.transformOptionToString);
-
-	/** Function to transform the object to the value. */
-	public readonly transformOptionToValue = input<((option: T) => V) | undefined>(this._config.transformOptionToValue);
-
-	/** Function to display the selected value as a string. */
-	public readonly displayWith = input<((value: V) => string) | undefined>(undefined);
-
-	/** Computed function to get the display value for the selected option. */
-	protected readonly _displaySearchValue = computed(() => {
-		const displayWith = this.displayWith();
-		if (displayWith) {
-			return displayWith;
-		} else {
-			return this.transformValueToSearch();
-		}
-	});
-
-	/** Optional template for rendering each option. */
-	public readonly optionTemplate = input<TemplateRef<HlmAutocompleteOption<T>>>();
-
-	/** Whether the autocomplete is in a loading state. */
-	public readonly loading = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-	/** Whether to show the clear button when a option is selected. */
-	public readonly showClearBtn = input<boolean, BooleanInput>(this._config.showClearBtn, {
-		transform: booleanAttribute,
-	});
-
-	/** Placeholder text for the input field. */
-	public readonly searchPlaceholderText = input<string>('Select an option');
-
-	/** Text to display when loading options. */
-	public readonly loadingText = input<string>('Loading options...');
-
-	/** Text to display when no options are found. */
-	public readonly emptyText = input<string>('No options found');
-
-	/** Aria label for the toggle button. */
-	public readonly ariaLabelToggleButton = input<string>('Toggle options');
-
-	/** The id of the input field. */
-	public readonly inputId = input<string>(`hlm-autocomplete-input-${++HlmAutocomplete._id}`);
-
-	/** Whether the autocomplete is disabled. */
-	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-
-	protected readonly _disabled = linkedSignal(() => this.disabled());
-
-	/** Emitted when the selected value changes. */
-	public readonly valueChange = output<T | V | null>();
-
-	/** Emitted when the search query changes. */
-	public readonly searchChange = output<string>();
-
-	protected _onChange?: ChangeFn<T | V | null>;
-	protected _onTouched?: TouchFn;
-
+export class HlmAutocomplete {
 	constructor() {
-		classes(() => 'block w-full');
-		effect(() => {
-			const search = this._search();
-			this.searchChange.emit(search);
-		});
+		classes(() => 'block');
 	}
-
-	protected _searchChanged(event: Event) {
-		const value = (event.target as HTMLInputElement).value;
-		this.search.set(value ?? '');
-
-		if (!this._brnAutocomplete().isExpanded() && value.length > 0) {
-			this._brnAutocomplete().open();
-		}
-	}
-
-	/** Toggle the options panel */
-	protected _toggleOptions() {
-		if (this._search() || this.filteredOptions().length > 0) {
-			// only toggle if there's a search term or options to show
-			this._brnAutocomplete().toggle();
-		}
-
-		this._inputRef().nativeElement.focus();
-	}
-
-	/** Clear the current selection and search input */
-	protected _selectionCleared() {
-		this.value.set(undefined);
-		this._onChange?.(null);
-		this.valueChange.emit(null);
-		this.search.set('');
-	}
-
-	protected _optionSelected(option: T) {
-		const transformer = this.transformOptionToValue();
-
-		const value = transformer ? transformer(option) : option;
-
-		this.value.set(value);
-		this._onChange?.(value);
-		this.valueChange.emit(value);
-
-		const searchValue = this._displaySearchValue()(value as any);
-		this.search.set(searchValue ?? '');
-		this._brnAutocomplete().close();
-	}
-
-	/** CONTROL VALUE ACCESSOR */
-	public writeValue(value: T | V | null): void {
-		this.value.set(value ? value : undefined);
-
-		const searchValue = value ? this._displaySearchValue()(value as any) : '';
-		this.search.set(searchValue);
-	}
-
-	public registerOnChange(fn: ChangeFn<T | V | null>): void {
-		this._onChange = fn;
-	}
-
-	public registerOnTouched(fn: TouchFn): void {
-		this._onTouched = fn;
-	}
-
-	public setDisabledState(isDisabled: boolean): void {
-		this._disabled.set(isDisabled);
-	}
-
-	protected _closed() {
-		if (this.requireSelection()) {
-			const value = this.value();
-			const searchValue = value ? this._displaySearchValue()(value as any) : '';
-			this.search.set(searchValue ?? '');
-		}
-	}
-}
-
-export interface HlmAutocompleteOption<T> {
-	$implicit: T;
 }

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

@@ -1,15 +1,10 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideGripVertical } from '@ng-icons/lucide';
 import { BrnResizableHandle } from '@spartan-ng/brain/resizable';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-resizable-handle',
 	exportAs: 'hlmResizableHandle',
-	imports: [NgIcon, HlmIcon],
-	providers: [provideIcons({ lucideGripVertical })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
 	host: {
@@ -17,9 +12,7 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 	template: `
 		@if (_brnResizableHandle.withHandle()) {
-			<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
-				<ng-icon hlm name="lucideGripVertical" size="10px" />
-			</div>
+			<div class="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg"></div>
 		}
 	`,
 })
@@ -27,9 +20,9 @@ export class HlmResizableHandle {
 	protected readonly _brnResizableHandle = inject(BrnResizableHandle);
 
 	constructor() {
-		classes(
-			() =>
-				'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:hover:cursor-ns-resize [&[data-panel-group-direction=vertical]>div]:rotate-90',
-		);
+		classes(() => [
+			'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+			'data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:hover:cursor-ns-resize',
+		]);
 	}
 }

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

@@ -36,7 +36,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 					data-slot="sidebar"
 					data-sidebar="sidebar"
 					data-mobile="true"
-					class="bg-sidebar text-sidebar-foreground h-screen w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+					class="bg-sidebar text-sidebar-foreground h-svh w-[var(--sidebar-width)] p-0 [&>button]:hidden"
 					[style.--sidebar-width]="sidebarWidthMobile()"
 				>
 					<div class="flex h-full w-full flex-col">

package/src/generators/ui/primitive-deps.js

@@ -40,7 +40,7 @@ exports.primitiveDependencies = {
     popover: ['utils'],
     progress: ['utils'],
     'radio-group': ['utils'],
-    resizable: ['utils', 'icon'],
+    resizable: ['utils'],
     'scroll-area': ['utils'],
     select: ['utils', 'icon'],
     separator: ['utils'],

package/src/generators/ui/primitive-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":";;;AAEa,QAAA,qBAAqB,GAAmC;IACpE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;IACnC,cAAc,EAAE,CAAC,OAAO,CAAC;IACzB,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC;IACzD,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC7B,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;IAC/C,IAAI,EAAE,CAAC,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAC,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAC;IACpD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACpC,cAAc,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC;IAC1C,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC;IACvD,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,CAAC;IACtC,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,CAAC;IACvD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC9B,IAAI,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC;IAC5B,GAAG,EAAE,CAAC,OAAO,CAAC;IACd,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC;IACnC,iBAAiB,EAAE,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;IACjD,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,OAAO,CAAC;IACxB,SAAS,EAAE,CAAC,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,OAAO,CAAC;IACxB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,CAAC,OAAO,CAAC;IACpB,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC;IAC1F,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;IACnC,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,CAAC,OAAO,CAAC;IACrB,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,sBAAsB,GAAG,CAAC,UAAuB,EAAe,EAAE;IAC9E,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAa,CAAC;IAEjD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,6BAAqB,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,2FAA2F;gBAC3F,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBAC7B,IAAA,8BAAsB,EAAC,CAAC,GAAG,CAAC,CAAC;qBAC3B,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;qBAC7F,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9C,CAAC;QACF,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAjBW,QAAA,sBAAsB,0BAiBjC"}

package/src/generators/ui/supported-ui-libraries.json

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
 		}
@@ -19,7 +19,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -34,20 +34,17 @@
 		"name": "autocomplete",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@angular/common": ">=20.0.0 <22.0.0",
-			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
-			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"clsx": "^2.1.1"
+			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
 		}
 	},
 	"avatar": {
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"badge": {
@@ -71,7 +68,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -80,7 +77,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -92,7 +89,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -121,7 +118,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -129,14 +126,14 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"combobox": {
 		"name": "combobox",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -147,14 +144,14 @@
 		"name": "command",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"context-menu": {
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -167,7 +164,7 @@
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -175,7 +172,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -191,7 +188,7 @@
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"empty": {
@@ -214,14 +211,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"hover-card": {
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"icon": {
@@ -237,7 +234,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -256,7 +253,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"item": {
@@ -264,7 +261,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"kbd": {
@@ -277,14 +274,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -293,7 +290,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"pagination": {
@@ -302,7 +299,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/router": ">=20.0.0 <22.0.0"
@@ -312,21 +309,21 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"radio-group": {
 		"name": "radio-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"clsx": "^2.1.1"
@@ -336,9 +333,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
-			"@ng-icons/core": ">=32.0.0 <34.0.0",
-			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"scroll-area": {
@@ -352,7 +347,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"class-variance-authority": "^0.7.0",
@@ -363,14 +358,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"class-variance-authority": "^0.7.0",
@@ -382,7 +377,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -400,7 +395,7 @@
 		"name": "slider",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"sonner": {
@@ -425,7 +420,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -439,7 +434,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -453,7 +448,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -462,7 +457,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -470,7 +465,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608",
+			"@spartan-ng/brain": "0.0.1-alpha.610",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -478,7 +473,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.608"
+			"@spartan-ng/brain": "0.0.1-alpha.610"
 		}
 	},
 	"typography": {

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

@@ -1,32 +0,0 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Directive, ElementRef, inject, input } from '@angular/core';
-import { BrnDialog } from '@spartan-ng/brain/dialog';
-
-@Directive({
-	selector: '[hlmAutocompleteTrigger]',
-	host: {
-		'(click)': 'open()',
-	},
-})
-export class HlmAutocompleteTrigger {
-	private readonly _host = inject(ElementRef, { host: true });
-
-	private readonly _brnDialog = inject(BrnDialog, { optional: true });
-
-	/** Whether the trigger is disabled. */
-	public readonly disabledTrigger = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-
-	constructor() {
-		if (!this._brnDialog) return;
-
-		this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
-	}
-
-	open() {
-		if (this.disabledTrigger()) return;
-
-		this._brnDialog?.open();
-	}
-}

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

@@ -1,35 +0,0 @@
-import { inject, InjectionToken, type ValueProvider } from '@angular/core';
-
-export type TransformValueToString<T> = (option: T) => string;
-
-export interface HlmAutocompleteConfig<T, V = T> {
-	transformValueToSearch: TransformValueToString<T>;
-	transformOptionToString: TransformValueToString<T>;
-	transformOptionToValue: ((option: T) => V) | undefined;
-	requireSelection: boolean;
-	showClearBtn: boolean;
-	debounceTime: number;
-}
-
-function getDefaultConfig<T, V = T>(): HlmAutocompleteConfig<T, V> {
-	return {
-		transformValueToSearch: (option: T) => (typeof option === 'string' ? option : String(option)),
-		transformOptionToString: (option: T) => (typeof option === 'string' ? option : String(option)),
-		transformOptionToValue: undefined,
-		requireSelection: false,
-		showClearBtn: false,
-		debounceTime: 150,
-	};
-}
-
-const HlmAutocompleteConfigToken = new InjectionToken<HlmAutocompleteConfig<unknown, unknown>>('HlmAutocompleteConfig');
-
-export function provideHlmAutocompleteConfig<T, V = T>(config: Partial<HlmAutocompleteConfig<T, V>>): ValueProvider {
-	return { provide: HlmAutocompleteConfigToken, useValue: { ...getDefaultConfig(), ...config } };
-}
-
-export function injectHlmAutocompleteConfig<T, V = T>(): HlmAutocompleteConfig<T, V> {
-	return (
-		(inject(HlmAutocompleteConfigToken, { optional: true }) as HlmAutocompleteConfig<T, V> | null) ?? getDefaultConfig()
-	);
-}