@spartan-ng/cli 0.0.1-alpha.533 → 0.0.1-alpha.535

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

@@ -5,25 +5,25 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-accordion-content',
-	template: `
-		<div [attr.inert]="_addInert()" [style]="contentStyle()">
-			<div class="flex flex-col gap-4 text-balance pb-4 pt-0">
-				<ng-content />
-			</div>
-		</div>
-	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
+	template: `
+		<div class="flex flex-col gap-4 pt-0 pb-4 text-balance">
+			<ng-content />
+		</div>
+	`,
 })
-export class HlmAccordionContent extends BrnAccordionContent {
+export class HlmAccordionContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly contentStyle = input<string>('overflow: hidden');
 
 	protected readonly _computedClass = computed(() => {
-		const gridRows = this.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
-		return hlm('grid text-sm transition-all', gridRows, this.userClass());
+		return hlm(
+			'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-[var(--brn-accordion-content-height)]',
+			this.userClass(),
+		);
 	});
 }

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

@@ -12,6 +12,7 @@ import type { ClassValue } from 'clsx';
 		{
 			directive: BrnAccordionItem,
 			inputs: ['isOpened'],
+			outputs: ['openedChange'],
 		},
 	],
 })

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

@@ -15,7 +15,7 @@ export class HlmAccordionTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
+			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
 			this.userClass(),
 		),
 	);

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

@@ -26,7 +26,7 @@ export class HlmAutocompleteItem {
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base',
+			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]: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]:text-base',
 			this.userClass(),
 		),
 	);

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

@@ -22,6 +22,6 @@ export class HlmAutocompleteList {
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('block max-h-60 overflow-y-auto overflow-x-hidden', this.userClass()),
+		hlm('block max-h-60 overflow-x-hidden overflow-y-auto', this.userClass()),
 	);
 }

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

@@ -6,7 +6,7 @@ import type { ClassValue } from 'clsx';
 @Component({
 	selector: 'input[hlm-autocomplete-search-input]',
 	template: '',
-	hostDirectives: [{ directive: BrnAutocompleteSearchInput, inputs: ['value'] }],
+	hostDirectives: [{ directive: BrnAutocompleteSearchInput, inputs: ['value'], outputs: ['valueChange'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},

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

@@ -21,7 +21,7 @@ export class HlmAutocompleteSearch {
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-input focus-within:border-ring bg-background focus-within:ring-ring/50 shadow-xs dark:bg-input/30 flex h-9 min-w-0 items-center gap-2 rounded-md border px-3 focus-within:ring-[3px] [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50',
+			'border-input focus-within:border-ring bg-background focus-within:ring-ring/50 dark:bg-input/30 flex h-9 min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs focus-within:ring-[3px] [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50',
 			this.userClass(),
 		),
 	);

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

@@ -88,8 +88,7 @@ export const HLM_AUTOCOMPLETE_VALUE_ACCESSOR = {
 						[placeholder]="searchPlaceholderText()"
 						[disabled]="_disabled()"
 						[value]="_search()"
-						(input)="_onSearchChanged($event)"
-						(keydown.arrowDown)="_openPopover()"
+						(valueChange)="_onSearchChanged($event)"
 					/>
 
 					<button
@@ -152,7 +151,8 @@ export class HlmAutocomplete<T> implements ControlValueAccessor {
 	private static _id = 0;
 	private readonly _config = injectHlmAutocompleteConfig<T>();
 
-	private readonly _brnPopover = viewChild.required(BrnPopover);
+	private readonly _brnAutocomplete = viewChild.required(BrnAutocomplete);
+
 	private readonly _inputRef = viewChild.required('input', { read: ElementRef });
 
 	protected readonly _elementRef = inject(ElementRef<HTMLElement>);
@@ -232,40 +232,23 @@ export class HlmAutocomplete<T> implements ControlValueAccessor {
 	protected _onChange?: ChangeFn<T | null>;
 	protected _onTouched?: TouchFn;
 
-	protected _setPopoverState(state: 'open' | 'closed') {
-		if (state === 'open') {
-			this._brnPopover().open();
-		} else {
-			this._brnPopover().close();
-		}
-	}
-
-	protected _openPopover() {
-		if (this._search() || this.filteredOptions().length > 0) {
-			// only open if there's a search term or options to show
-			this._brnPopover().open();
-		}
-	}
-
 	protected _toggleOptions() {
 		if (this._search() || this.filteredOptions().length > 0) {
 			// only toggle if there's a search term or options to show
-			const state = this._brnPopover().stateComputed();
-			this._setPopoverState(state === 'open' ? 'closed' : 'open');
+			this._brnAutocomplete().toggle();
 		}
 
 		this._inputRef().nativeElement.focus();
 	}
 
-	protected _onSearchChanged(event: Event) {
-		const input = event.target as HTMLInputElement;
-		this._search.set(input.value);
-		this.searchChange.emit(input.value);
+	protected _onSearchChanged(value: string) {
+		this._search.set(value);
+		this.searchChange.emit(value);
 
 		this._clearOption();
 
-		if (this._brnPopover().stateComputed() !== 'open' && input.value.length > 0) {
-			this._setPopoverState('open');
+		if (!this._brnAutocomplete().isExpanded() && value.length > 0) {
+			this._brnAutocomplete().open();
 		}
 	}
 
@@ -285,12 +268,16 @@ export class HlmAutocomplete<T> implements ControlValueAccessor {
 		this._search.set(searchValue);
 		this.searchChange.emit(searchValue);
 
-		this._setPopoverState('closed');
+		this._brnAutocomplete().close();
 	}
 
 	/** CONTROL VALUE ACCESSOR */
 	public writeValue(value: T | null): void {
 		this._value.set(value ? value : undefined);
+
+		const searchValue = value ? this.transformValueToSearch()(value) : '';
+		this._search.set(searchValue);
+		this.searchChange.emit(searchValue);
 	}
 
 	public registerOnChange(fn: ChangeFn<T | null>): void {

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

@@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 const badgeVariants = cva(
-	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&_ng-icon]:pointer-events-none [&_ng-icon]:size-3',
+	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&_ng-icon]:pointer-events-none [&_ng-icon]:size-3',
 	{
 		variants: {
 			variant: {

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

@@ -12,6 +12,6 @@ export class HlmBreadcrumbList {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', this.userClass()),
+		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-button-group-helm/files/lib/hlm-button-group-separator.ts.template

@@ -17,7 +17,7 @@ export class HlmButtonGroupSeparator {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-auto data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+			'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-button-group-helm/files/lib/hlm-button-group-text.ts.template

@@ -13,7 +13,7 @@ export class HlmButtonGroupText {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_ng-icon:not([class*='size-'])]:size-4 [&_ng-icon]:pointer-events-none",
+			"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='size-'])]:size-4",
 			this.userClass(),
 		),
 	);

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

@@ -6,7 +6,7 @@ import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hallo inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon:not([class*='size-'])]:size-4 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hallo inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='size-'])]:size-4",
 	{
 		variants: {
 			variant: {
@@ -14,7 +14,7 @@ export const buttonVariants = cva(
 				destructive:
 					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				link: 'text-primary underline-offset-4 hover:underline',

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar-multi.ts.template

@@ -12,21 +12,7 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import {
-	BrnCalendarCell,
-	BrnCalendarCellButton,
-	BrnCalendarGrid,
-	BrnCalendarHeader,
-	BrnCalendarMonthSelect,
-	BrnCalendarMulti,
-	BrnCalendarNextButton,
-	BrnCalendarPreviousButton,
-	BrnCalendarWeek,
-	BrnCalendarWeekday,
-	BrnCalendarYearSelect,
-	injectBrnCalendarI18n,
-	type Weekday,
-} from '@spartan-ng/brain/calendar';
+import { BrnCalendarImports, BrnCalendarMulti, injectBrnCalendarI18n, type Weekday } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
@@ -37,24 +23,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-calendar-multi',
-	imports: [
-		BrnCalendarMulti,
-		BrnCalendarHeader,
-		BrnCalendarNextButton,
-		BrnCalendarPreviousButton,
-		BrnCalendarWeekday,
-		BrnCalendarWeek,
-		BrnCalendarCellButton,
-		BrnCalendarCell,
-		BrnCalendarGrid,
-		NgIcon,
-		HlmIcon,
-		BrnCalendarMonthSelect,
-		NgTemplateOutlet,
-		BrnSelectImports,
-		HlmSelectImports,
-		BrnCalendarYearSelect,
-	],
+	imports: [BrnCalendarImports, NgIcon, HlmIcon, NgTemplateOutlet, BrnSelectImports, HlmSelectImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
 		<div
@@ -122,14 +91,14 @@ import type { ClassValue } from 'clsx';
 						<div class="flex items-center space-x-1">
 							<button
 								brnCalendarPreviousButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 text-sm font-medium whitespace-nowrap opacity-50 transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronLeft" size="sm" />
 							</button>
 
 							<button
 								brnCalendarNextButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 text-sm font-medium whitespace-nowrap opacity-50 transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronRight" size="sm" />
 							</button>

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar-range.ts.template

@@ -12,21 +12,7 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import {
-	BrnCalendarCell,
-	BrnCalendarCellButton,
-	BrnCalendarGrid,
-	BrnCalendarHeader,
-	BrnCalendarMonthSelect,
-	BrnCalendarNextButton,
-	BrnCalendarPreviousButton,
-	BrnCalendarRange,
-	BrnCalendarWeek,
-	BrnCalendarWeekday,
-	BrnCalendarYearSelect,
-	injectBrnCalendarI18n,
-	type Weekday,
-} from '@spartan-ng/brain/calendar';
+import { BrnCalendarImports, BrnCalendarRange, injectBrnCalendarI18n, type Weekday } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
@@ -37,24 +23,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-calendar-range',
-	imports: [
-		BrnCalendarHeader,
-		BrnCalendarNextButton,
-		BrnCalendarPreviousButton,
-		BrnCalendarWeekday,
-		BrnCalendarWeek,
-		BrnCalendarCellButton,
-		BrnCalendarCell,
-		BrnCalendarGrid,
-		NgIcon,
-		HlmIcon,
-		BrnCalendarRange,
-		BrnCalendarMonthSelect,
-		HlmSelectImports,
-		BrnSelectImports,
-		BrnCalendarYearSelect,
-		NgTemplateOutlet,
-	],
+	imports: [BrnCalendarImports, NgIcon, HlmIcon, HlmSelectImports, BrnSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
 		<div
@@ -121,14 +90,14 @@ import type { ClassValue } from 'clsx';
 						<div class="flex items-center space-x-1">
 							<button
 								brnCalendarPreviousButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 text-sm font-medium whitespace-nowrap opacity-50 transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronLeft" size="sm" />
 							</button>
 
 							<button
 								brnCalendarNextButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border bg-transparent p-0 text-sm font-medium whitespace-nowrap opacity-50 transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronRight" size="sm" />
 							</button>

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

@@ -12,21 +12,7 @@ import {
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import {
-	BrnCalendar,
-	BrnCalendarCell,
-	BrnCalendarCellButton,
-	BrnCalendarGrid,
-	BrnCalendarHeader,
-	BrnCalendarMonthSelect,
-	BrnCalendarNextButton,
-	BrnCalendarPreviousButton,
-	BrnCalendarWeek,
-	BrnCalendarWeekday,
-	BrnCalendarYearSelect,
-	injectBrnCalendarI18n,
-	type Weekday,
-} from '@spartan-ng/brain/calendar';
+import { BrnCalendar, BrnCalendarImports, injectBrnCalendarI18n, type Weekday } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
@@ -37,27 +23,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-calendar',
-	imports: [
-		BrnCalendar,
-		BrnCalendarHeader,
-		BrnCalendarNextButton,
-		BrnCalendarPreviousButton,
-		BrnCalendarWeekday,
-		BrnCalendarWeek,
-		BrnCalendarCellButton,
-		BrnCalendarCell,
-		BrnCalendarGrid,
-		NgIcon,
-		HlmIcon,
-		BrnSelectImports,
-		HlmSelectImports,
-		BrnCalendarPreviousButton,
-		BrnCalendarMonthSelect,
-		BrnCalendarMonthSelect,
-		BrnCalendarMonthSelect,
-		BrnCalendarYearSelect,
-		NgTemplateOutlet,
-	],
+	imports: [BrnCalendarImports, NgIcon, HlmIcon, BrnSelectImports, HlmSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
 		<div
@@ -123,14 +89,14 @@ import type { ClassValue } from 'clsx';
 						<div class="flex items-center space-x-1">
 							<button
 								brnCalendarPreviousButton
-								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium whitespace-nowrap transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronLeft" size="sm" />
 							</button>
 
 							<button
 								brnCalendarNextButton
-								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium whitespace-nowrap transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronRight" size="sm" />
 							</button>

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-footer.ts.template

@@ -10,5 +10,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmCardFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('[.border-t]:pt-6 flex items-center px-6', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('flex items-center px-6 [.border-t]:pt-6', this.userClass()));
 }

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-header.ts.template

@@ -12,7 +12,7 @@ export class HlmCardHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6',
+			'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-card-helm/files/lib/hlm-card-title.ts.template

@@ -10,5 +10,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmCardTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('font-semibold leading-none', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
 }

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-next.ts.template

@@ -40,7 +40,7 @@ export class HlmCarouselNext {
 		hlm(
 			'absolute h-8 w-8 rounded-full',
 			this._carousel.orientation() === 'horizontal'
-				? '-right-12 top-1/2 -translate-y-1/2'
+				? 'top-1/2 -right-12 -translate-y-1/2'
 				: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
 			this.userClass(),
 		),

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-previous.ts.template

@@ -43,7 +43,7 @@ export class HlmCarouselPrevious {
 		hlm(
 			'absolute h-8 w-8 rounded-full',
 			this._carousel.orientation() === 'horizontal'
-				? '-left-12 top-1/2 -translate-y-1/2'
+				? 'top-1/2 -left-12 -translate-y-1/2'
 				: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
 			this.userClass(),
 		),

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

@@ -6,9 +6,9 @@ import {
 	computed,
 	forwardRef,
 	input,
+	linkedSignal,
 	model,
 	output,
-	signal,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
@@ -34,15 +34,16 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
-			[disabled]="_state().disabled()"
+			[(indeterminate)]="indeterminate"
+			[disabled]="_disabled()"
 			[required]="required()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
 			[aria-describedby]="ariaDescribedby()"
-			(checkedChange)="_handleChange()"
+			(checkedChange)="_handleChange($event)"
 			(touched)="_onTouched?.()"
 		>
-			@if (checked()) {
+			@if (checked() || indeterminate()) {
 				<span class="flex items-center justify-center text-current transition-none">
 					<ng-icon hlm size="14px" name="lucideCheck" />
 				</span>
@@ -55,7 +56,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
-		'[attr.data-disabled]': '_state().disabled() ? "" : null',
+		'[attr.data-disabled]': '_disabled() ? "" : null',
 	},
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
@@ -66,9 +67,9 @@ export class HlmCheckbox implements ControlValueAccessor {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 cursor-default rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 			this.userClass(),
-			this._state().disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
@@ -85,10 +86,16 @@ export class HlmCheckbox implements ControlValueAccessor {
 	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
 
 	/** The checked state of the checkbox. */
-	public readonly checked = model<CheckboxValue>(false);
+	public readonly checked = model<boolean>(false);
 
 	/** Emits when checked state changes. */
-	public readonly checkedChange = output<CheckboxValue>();
+	public readonly checkedChange = output<boolean>();
+
+	/**
+	 * The indeterminate state of the checkbox.
+	 * For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.
+	 */
+	public readonly indeterminate = model<boolean>(false);
 
 	/** The name attribute of the checkbox. */
 	public readonly name = input<string | null>(null);
@@ -99,28 +106,24 @@ export class HlmCheckbox implements ControlValueAccessor {
 	/** Whether the checkbox is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
-	protected readonly _state = computed(() => ({
-		disabled: signal(this.disabled()),
-	}));
+	protected readonly _disabled = linkedSignal(this.disabled);
 
-	protected _onChange?: ChangeFn<CheckboxValue>;
+	protected _onChange?: ChangeFn<boolean>;
 	protected _onTouched?: TouchFn;
 
-	protected _handleChange(): void {
-		if (this._state().disabled()) return;
-
-		const previousChecked = this.checked();
-		this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
-		this._onChange?.(!previousChecked);
-		this.checkedChange.emit(!previousChecked);
+	protected _handleChange(value: boolean): void {
+		if (this._disabled()) return;
+		this.checked.set(value);
+		this.checkedChange.emit(value);
+		this._onChange?.(value);
 	}
 
 	/** CONTROL VALUE ACCESSOR */
-	writeValue(value: CheckboxValue): void {
-		this.checked.set(!!value);
+	writeValue(value: boolean): void {
+		this.checked.set(value);
 	}
 
-	registerOnChange(fn: ChangeFn<CheckboxValue>): void {
+	registerOnChange(fn: ChangeFn<boolean>): void {
 		this._onChange = fn;
 	}
 
@@ -129,8 +132,6 @@ export class HlmCheckbox implements ControlValueAccessor {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this._state().disabled.set(isDisabled);
+		this._disabled.set(isDisabled);
 	}
 }
-
-type CheckboxValue = boolean | 'indeterminate';

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.ts.template

@@ -17,7 +17,7 @@ export class HlmCommandDialogCloseButton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground ring-offset-background absolute right-3 top-3 inline-flex !h-5 h-10 !w-5 items-center justify-center rounded-md !p-1 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+			'focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground ring-offset-background absolute top-3 right-3 inline-flex !h-5 h-10 !w-5 items-center justify-center rounded-md !p-1 px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			this.userClass(),
 		),
 	);

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

@@ -26,7 +26,7 @@ export class HlmCommandItem {
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base',
+			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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]:text-base',
 			this.userClass(),
 		),
 	);