@spartan-ng/cli 0.0.1-alpha.557 → 0.0.1-alpha.558

package/src/generators/ui/libs/navigation-menu/files/hlm-navigation-menu.ts.template

@@ -5,9 +5,6 @@ import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'nav[hlmNavigationMenu]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 	hostDirectives: [
 		{
 			directive: BrnNavigationMenu,
@@ -15,6 +12,9 @@ import { ClassValue } from 'clsx';
 			outputs: ['valueChange'],
 		},
 	],
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmNavigationMenu {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template

@@ -23,6 +23,19 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 
 @Component({
 	selector: 'hlm-numbered-pagination-query-params',
+	imports: [
+		FormsModule,
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
+		BrnSelectImports,
+		HlmSelectImports,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div class="flex items-center justify-between gap-2 px-4 py-2">
 			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
@@ -87,19 +100,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</brn-select>
 		</div>
 	`,
-	imports: [
-		FormsModule,
-		HlmPagination,
-		HlmPaginationContent,
-		HlmPaginationItem,
-		HlmPaginationPrevious,
-		HlmPaginationNext,
-		HlmPaginationLink,
-		HlmPaginationEllipsis,
-		BrnSelectImports,
-		HlmSelectImports,
-	],
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmNumberedPaginationQueryParams {
 	/**

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

@@ -22,6 +22,19 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 
 @Component({
 	selector: 'hlm-numbered-pagination',
+	imports: [
+		FormsModule,
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
+		BrnSelectImports,
+		HlmSelectImports,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<div class="flex items-center justify-between gap-2 px-4 py-2">
 			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
@@ -72,19 +85,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</brn-select>
 		</div>
 	`,
-	imports: [
-		FormsModule,
-		HlmPagination,
-		HlmPaginationContent,
-		HlmPaginationItem,
-		HlmPaginationPrevious,
-		HlmPaginationNext,
-		HlmPaginationLink,
-		HlmPaginationEllipsis,
-		BrnSelectImports,
-		HlmSelectImports,
-	],
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmNumberedPagination {
 	/**

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

@@ -9,13 +9,13 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-pagination-ellipsis',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideEllipsis })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<span [class]="_computedClass()">
 			<ng-icon hlm size="sm" name="lucideEllipsis" />
 			<span class="sr-only">{{ srOnlyText() }}</span>
 		</span>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationEllipsis {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -13,6 +13,7 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	selector: 'hlm-pagination-next',
 	imports: [HlmPaginationLink, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<a
 			[class]="_computedClass()"
@@ -27,7 +28,6 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 			<ng-icon hlm size="sm" name="lucideChevronRight" />
 		</a>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationNext {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -13,6 +13,7 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	selector: 'hlm-pagination-previous',
 	imports: [HlmPaginationLink, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronLeft })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<a
 			[class]="_computedClass()"
@@ -27,7 +28,6 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 			<span [class]="_labelClass()">{{ text() }}</span>
 		</a>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationPrevious {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,12 +5,12 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmProgressIndicator],hlm-progress-indicator',
+	hostDirectives: [BrnProgressIndicator],
 	host: {
 		'[class]': '_computedClass()',
 		'[class.animate-indeterminate]': '_indeterminate()',
 		'[style.transform]': '_transform()',
 	},
-	hostDirectives: [BrnProgressIndicator],
 })
 export class HlmProgressIndicator {
 	private readonly _progress = injectBrnProgress();

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'hlm-progress,[hlmProgress]',
+	hostDirectives: [{ directive: BrnProgress, inputs: ['value', 'max', 'getValueLabel'] }],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [{ directive: BrnProgress, inputs: ['value', 'max', 'getValueLabel'] }],
 })
 export class HlmProgress {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,6 +5,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-radio-group',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnRadioGroup,
@@ -17,7 +18,6 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 	template: '<ng-content />',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmRadioGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,6 +4,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-radio-indicator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'data-slot': 'radio-group-indicator',
 		'[class]': '_computedClass()',
@@ -11,7 +12,6 @@ import type { ClassValue } from 'clsx';
 	template: `
 		<div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -19,6 +19,15 @@ import type { ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-radio',
 	imports: [BrnRadio],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[attr.id]': 'null',
+		'[attr.aria-label]': 'null',
+		'[attr.aria-labelledby]': 'null',
+		'[attr.aria-describedby]': 'null',
+		'[attr.data-disabled]': 'disabled() ? "" : null',
+		'data-slot': 'radio-group-item',
+	},
 	template: `
 		<brn-radio
 			[id]="id()"
@@ -35,15 +44,6 @@ import type { ClassValue } from 'clsx';
 			<ng-content />
 		</brn-radio>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[attr.id]': 'null',
-		'[attr.aria-label]': 'null',
-		'[attr.aria-labelledby]': 'null',
-		'[attr.aria-describedby]': 'null',
-		'[attr.data-disabled]': 'disabled() ? "" : null',
-		'data-slot': 'radio-group-item',
-	},
 })
 export class HlmRadio<T = unknown> {
 	private readonly _document = inject(DOCUMENT);

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

@@ -5,6 +5,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-resizable-group',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnResizableGroup,
@@ -12,13 +13,12 @@ import type { ClassValue } from 'clsx';
 			outputs: ['dragEnd', 'dragStart', 'layoutChange'],
 		},
 	],
-	template: `
-		<ng-content />
-	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmResizableGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -11,9 +11,13 @@ import { hlm } from '<%- importAlias %>/utils';
 @Component({
 	selector: 'hlm-resizable-handle',
 	exportAs: 'hlmResizableHandle',
-	hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
+	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideGripVertical })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
+	host: {
+		'[class]': '_computedClass()',
+	},
 	template: `
 		@if (_brnResizableHandle.withHandle()) {
 			<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
@@ -21,10 +25,6 @@ import { hlm } from '<%- importAlias %>/utils';
 			</div>
 		}
 	`,
-	host: {
-		'[class]': '_computedClass()',
-	},
-	imports: [NgIcon, HlmIcon],
 })
 export class HlmResizableHandle {
 	protected readonly _brnResizableHandle = inject(BrnResizableHandle);

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

@@ -5,19 +5,19 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-resizable-panel',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: BrnResizablePanel,
 			inputs: ['defaultSize', 'id', 'collapsible', 'maxSize', 'minSize'],
 		},
 	],
-	template: `
-		<ng-content />
-	`,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmResizablePanel {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -8,9 +8,10 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-option',
+	imports: [NgIcon, HlmIcon],
+	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnSelectOption, inputs: ['disabled', 'value'] }],
-	providers: [provideIcons({ lucideCheck })],
 	host: {
 		'[class]': '_computedClass()',
 	},
@@ -23,7 +24,6 @@ import type { ClassValue } from 'clsx';
 
 		<ng-content />
 	`,
-	imports: [NgIcon, HlmIcon],
 })
 export class HlmSelectOption {
 	protected readonly _brnSelectOption = inject(BrnSelectOption, { host: true });

package/src/generators/ui/libs/select/files/lib/hlm-select-scroll-down.ts.template

@@ -9,13 +9,13 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-select-scroll-down',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSelectScrollDown {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/select/files/lib/hlm-select-scroll-up.ts.template

@@ -9,13 +9,13 @@ import type { ClassValue } from 'clsx';
 	selector: 'hlm-select-scroll-up',
 	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronUp })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSelectScrollUp {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -26,6 +26,7 @@ export const selectTriggerVariants = cva(
 	selector: 'hlm-select-trigger',
 	imports: [BrnSelectTrigger, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button" [attr.data-size]="size()">
 			<ng-content />
@@ -36,7 +37,6 @@ export const selectTriggerVariants = cva(
 			}
 		</button>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSelectTrigger {
 	protected readonly _icon = contentChild(HlmIcon);

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

@@ -42,6 +42,7 @@ export const sheetVariants = cva(
 	selector: 'hlm-sheet-content',
 	imports: [HlmSheetClose, BrnSheetClose, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
@@ -53,7 +54,6 @@ export const sheetVariants = cva(
 			<ng-icon hlm size="sm" name="lucideX" />
 		</button>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSheetContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmSheetDescription]',
+	hostDirectives: [BrnSheetDescription],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnSheetDescription],
 })
 export class HlmSheetDescription {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,13 +4,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-sheet-footer',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmSheetFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -4,13 +4,13 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-sheet-header',
-	template: `
-		<ng-content />
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
-	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-content />
+	`,
 })
 export class HlmSheetHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,10 +5,10 @@ import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmSheetTitle]',
+	hostDirectives: [BrnSheetTitle],
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnSheetTitle],
 })
 export class HlmSheetTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -5,6 +5,7 @@ import { HlmSheetOverlay } from './hlm-sheet-overlay';
 
 @Component({
 	selector: 'hlm-sheet',
+	exportAs: 'hlmSheet',
 	imports: [BrnSheetOverlay, HlmSheetOverlay],
 	providers: [
 		{
@@ -19,11 +20,10 @@ import { HlmSheetOverlay } from './hlm-sheet-overlay';
 			// add custom options here
 		}),
 	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<brn-sheet-overlay hlm />
 		<ng-content />
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	exportAs: 'hlmSheet',
 })
 export class HlmSheet extends BrnSheet {}

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

@@ -1,3 +1,4 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
@@ -12,7 +13,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSidebarMenuAction {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly showOnHover = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly showOnHover = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',

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

@@ -1,3 +1,4 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, inject, input } from '@angular/core';
 import { BrnTooltipTrigger, provideBrnTooltipDefaultOptions } from '@spartan-ng/brain/tooltip';
 import { DEFAULT_TOOLTIP_CONTENT_CLASSES } from '<%- importAlias %>/tooltip';
@@ -58,7 +59,7 @@ export class HlmSidebarMenuButton {
 
 	public readonly variant = input<'default' | 'outline'>('default');
 	public readonly size = input<'default' | 'sm' | 'lg'>('default');
-	public readonly isActive = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _isTooltipHidden = computed(

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

@@ -1,12 +1,19 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { HlmSkeletonImports } from '<%- importAlias %>/skeleton';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
-	// eslint-disable-next-line @angular-eslint/component-selector
-	selector: 'div[hlmSidebarMenuSkeleton]',
+	selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
+	imports: [HlmSkeletonImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'sidebar-menu-skeleton',
+		'data-sidebar': 'menu-skeleton',
+		'[class]': '_computedClass()',
+		'[style.--skeleton-width]': '_width',
+	},
 	template: `
 		@if (showIcon()) {
 			<hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
@@ -14,17 +21,9 @@ import type { ClassValue } from 'clsx';
 			<hlm-skeleton data-sidebar="menu-skeleton-text" class="h-4 max-w-[var(--skeleton-width)] flex-1" />
 		}
 	`,
-	host: {
-		'data-slot': 'sidebar-menu-skeleton',
-		'data-sidebar': 'menu-skeleton',
-		'[class]': '_computedClass()',
-		'[style.--skeleton-width]': '_width',
-	},
-
-	imports: [HlmSkeletonImports],
 })
 export class HlmSidebarMenuSkeleton {
-	public readonly showIcon = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly showIcon = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('flex h-8 items-center gap-2 rounded-md px-2', this.userClass()),

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

@@ -1,3 +1,4 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
@@ -14,7 +15,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSidebarMenuSubButton {
 	public readonly size = input<'sm' | 'md'>('md');
-	public readonly isActive = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -8,12 +8,9 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmSidebarTrigger]',
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [HlmIcon, NgIcon],
 	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon' })],
-	template: `
-		<ng-icon hlm name="lucidePanelLeft" size="sm"></ng-icon>
-	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [
 		{
 			directive: HlmButton,
@@ -24,6 +21,9 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 		'data-sidebar': 'trigger',
 		'(click)': '_onClick()',
 	},
+	template: `
+		<ng-icon hlm name="lucidePanelLeft" size="sm"></ng-icon>
+	`,
 })
 export class HlmSidebarTrigger {
 	private readonly _hlmBtn = inject(HlmButton);

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

@@ -10,6 +10,15 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 @Component({
 	selector: 'hlm-sidebar',
 	imports: [HlmSheet, HlmSheetContent, NgTemplateOutlet, BrnSheetContent],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[attr.data-slot]': '_dataSlot()',
+		'[class]': '_computedClass()',
+		'[attr.data-state]': '_dataState()',
+		'[attr.data-collapsible]': '_dataCollapsible()',
+		'[attr.data-variant]': '_dataVariant()',
+		'[attr.data-side]': '_dataSide()',
+	},
 	template: `
 		<ng-template #contentContainer>
 			<ng-content></ng-content>
@@ -50,15 +59,6 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 			</div>
 		}
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[attr.data-slot]': '_dataSlot()',
-		'[class]': '_computedClass()',
-		'[attr.data-state]': '_dataState()',
-		'[attr.data-collapsible]': '_dataCollapsible()',
-		'[attr.data-variant]': '_dataVariant()',
-		'[attr.data-side]': '_dataSide()',
-	},
 })
 export class HlmSidebar {
 	protected readonly _sidebarService = inject(HlmSidebarService);