@spartan-ng/cli 0.0.1-alpha.598 → 0.0.1-alpha.600

package/package.json

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

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

@@ -1,10 +1,9 @@
 import { HlmCommand } from './lib/hlm-command';
 import { HlmCommandDialog } from './lib/hlm-command-dialog';
-import { HlmCommandDialogCloseButton } from './lib/hlm-command-dialog-close-button';
 import { HlmCommandEmpty } from './lib/hlm-command-empty';
+import { HlmCommandEmptyState } from './lib/hlm-command-empty-state';
 import { HlmCommandGroup } from './lib/hlm-command-group';
 import { HlmCommandGroupLabel } from './lib/hlm-command-group-label';
-import { HlmCommandIcon } from './lib/hlm-command-icon';
 import { HlmCommandItem } from './lib/hlm-command-item';
 import { HlmCommandList } from './lib/hlm-command-list';
 import { HlmCommandSearch } from './lib/hlm-command-search';
@@ -14,11 +13,10 @@ import { HlmCommandShortcut } from './lib/hlm-command-shortcut';
 
 export * from './lib/hlm-command';
 export * from './lib/hlm-command-dialog';
-export * from './lib/hlm-command-dialog-close-button';
 export * from './lib/hlm-command-empty';
+export * from './lib/hlm-command-empty-state';
 export * from './lib/hlm-command-group';
 export * from './lib/hlm-command-group-label';
-export * from './lib/hlm-command-icon';
 export * from './lib/hlm-command-item';
 export * from './lib/hlm-command-list';
 export * from './lib/hlm-command-search';
@@ -28,16 +26,15 @@ export * from './lib/hlm-command-shortcut';
 
 export const HlmCommandImports = [
 	HlmCommand,
-	HlmCommandItem,
-	HlmCommandSeparator,
+	HlmCommandDialog,
+	HlmCommandEmpty,
+	HlmCommandEmptyState,
 	HlmCommandGroup,
+	HlmCommandGroupLabel,
+	HlmCommandItem,
 	HlmCommandList,
-	HlmCommandShortcut,
-	HlmCommandIcon,
-	HlmCommandDialogCloseButton,
-	HlmCommandDialog,
 	HlmCommandSearchInput,
 	HlmCommandSearch,
-	HlmCommandGroupLabel,
-	HlmCommandEmpty,
+	HlmCommandSeparator,
+	HlmCommandShortcut,
 ] as const;

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

@@ -1,6 +1,5 @@
-import { Directive, ElementRef, Renderer2, contentChild, effect, inject, signal } from '@angular/core';
+import { Directive, ElementRef, afterNextRender, contentChild } from '@angular/core';
 import { BrnCommandSearchInputToken } from '@spartan-ng/brain/command';
-import { injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -10,26 +9,16 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmCommandDialog {
-	private readonly _stateProvider = injectExposesStateProvider({ host: true });
-	public readonly state = this._stateProvider.state ?? signal('closed').asReadonly();
-	private readonly _renderer = inject(Renderer2);
-	private readonly _element = inject(ElementRef);
-
 	/** Access the search field */
 	private readonly _searchInput = contentChild(BrnCommandSearchInputToken, { read: ElementRef });
 
 	constructor() {
-		classes(
-			() =>
-				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]',
-		);
-
-		effect(() => {
-			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+		classes(() => '**:data-[slot=command-search]:h-12 **:data-[slot=command-search-input]:h-12');
 
+		afterNextRender(() => {
 			const searchInput = this._searchInput();
 
-			if (this.state() === 'open' && searchInput) {
+			if (searchInput) {
 				searchInput.nativeElement.focus();
 			}
 		});

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnCommandEmpty } from '@spartan-ng/brain/command';
+
+@Directive({
+	selector: '[hlmCommandEmptyState]',
+	hostDirectives: [BrnCommandEmpty],
+})
+export class HlmCommandEmptyState {}

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

@@ -10,6 +10,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandGroupLabel {
 	constructor() {
-		classes(() => 'text-muted-foreground px-2 py-1.5 text-xs font-medium');
+		classes(() => 'text-muted-foreground block px-2 py-1.5 text-xs font-medium');
 	}
 }

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

@@ -16,6 +16,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandGroup {
 	constructor() {
-		classes(() => 'text-foreground block overflow-hidden p-1 data-[hidden]:hidden');
+		classes(() => 'text-foreground block overflow-hidden p-1 data-hidden:hidden');
 	}
 }

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

@@ -19,7 +19,7 @@ export class HlmCommandItem {
 	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-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-[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-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/command/files/lib/hlm-command-list.ts.template

@@ -16,6 +16,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandList {
 	constructor() {
-		classes(() => 'max-h-[300px] overflow-x-hidden overflow-y-auto');
+		classes(() => 'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto');
 	}
 }

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

@@ -13,7 +13,7 @@ export class HlmCommandSearchInput {
 	constructor() {
 		classes(
 			() =>
-				'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+				'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
 		);
 	}
 }

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

@@ -1,15 +1,16 @@
 import { Directive } from '@angular/core';
+import { BrnCommandSeparator } from '@spartan-ng/brain/command';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmCommandSeparator],hlm-command-separator',
+	hostDirectives: [BrnCommandSeparator],
 	host: {
 		'data-slot': 'command-separator',
-		role: 'separator',
 	},
 })
 export class HlmCommandSeparator {
 	constructor() {
-		classes(() => 'bg-border -mx-1 block h-px');
+		classes(() => 'bg-border -mx-1 block h-px data-hidden:hidden');
 	}
 }

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

@@ -1,5 +1,6 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
@@ -23,16 +24,20 @@ import { HlmDialogClose } from './hlm-dialog-close';
 			<ng-content />
 		}
 
-		<button hlmDialogClose>
-			<span class="sr-only">Close</span>
-			<ng-icon hlm size="sm" name="lucideX" />
-		</button>
+		@if (showCloseButton()) {
+			<button hlmDialogClose>
+				<span class="sr-only">Close</span>
+				<ng-icon hlm size="sm" name="lucideX" />
+			</button>
+		}
 	`,
 })
 export class HlmDialogContent {
 	private readonly _dialogRef = inject(BrnDialogRef);
 	private readonly _dialogContext = injectBrnDialogContext({ optional: true });
 
+	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
 	public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
 
 	public readonly component = this._dialogContext?.$component;

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

@@ -13,9 +13,6 @@ export class HlmTabsContent {
 	public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
 
 	constructor() {
-		classes(
-			() =>
-				'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-		);
+		classes(() => 'flex-1 text-sm outline-none');
 	}
 }

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

@@ -4,16 +4,16 @@ import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 export const listVariants = cva(
-	'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+	'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
 	{
 		variants: {
-			orientation: {
-				horizontal: 'h-10 space-x-1',
-				vertical: 'mt-2 h-fit flex-col space-y-1',
+			variant: {
+				default: 'bg-muted',
+				line: 'gap-1 bg-transparent',
 			},
 		},
 		defaultVariants: {
-			orientation: 'horizontal',
+			variant: 'default',
 		},
 	},
 );
@@ -24,12 +24,13 @@ type ListVariants = VariantProps<typeof listVariants>;
 	hostDirectives: [BrnTabsList],
 	host: {
 		'data-slot': 'tabs-list',
+		'[attr.data-variant]': 'variant()',
 	},
 })
 export class HlmTabsList {
-	public readonly orientation = input<ListVariants['orientation']>('horizontal');
+	public readonly variant = input<ListVariants['variant']>('default');
 
 	constructor() {
-		classes(() => listVariants({ orientation: this.orientation() }));
+		classes(() => listVariants({ variant: this.variant() }));
 	}
 }

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

@@ -12,9 +12,11 @@ import { classes } from '<%- importAlias %>/utils';
 export class HlmTabsTrigger {
 	public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
 	constructor() {
-		classes(
-			() =>
-				`data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
-		);
+		classes(() => [
+			`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
+			'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+			'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+			'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+		]);
 	}
 }

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

@@ -7,7 +7,7 @@ import { classes } from '<%- importAlias %>/utils';
 	hostDirectives: [
 		{
 			directive: BrnTabs,
-			inputs: ['orientation', 'direction', 'activationMode', 'brnTabs: tab'],
+			inputs: ['orientation', 'activationMode', 'brnTabs: tab'],
 			outputs: ['tabActivated'],
 		},
 	],
@@ -19,6 +19,6 @@ export class HlmTabs {
 	public readonly tab = input.required<string>();
 
 	constructor() {
-		classes(() => 'flex flex-col gap-2');
+		classes(() => 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col');
 	}
 }

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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -34,7 +34,7 @@
 		"name": "autocomplete",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
@@ -47,7 +47,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"badge": {
@@ -71,7 +71,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -80,7 +80,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -92,7 +92,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -121,7 +121,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -129,21 +129,21 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"command": {
 		"name": "command",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"context-menu": {
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -156,7 +156,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -164,12 +164,12 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
+			"@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",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"clsx": "^2.1.1",
-			"@angular/cdk": ">=20.0.0 <22.0.0"
+			"clsx": "^2.1.1"
 		}
 	},
 	"dropdown-menu": {
@@ -180,7 +180,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.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"empty": {
@@ -203,14 +203,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.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"hover-card": {
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"icon": {
@@ -226,7 +226,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -245,7 +245,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.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"item": {
@@ -253,7 +253,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"kbd": {
@@ -266,14 +266,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -282,7 +282,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"pagination": {
@@ -291,7 +291,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@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"
@@ -301,21 +301,21 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"radio-group": {
 		"name": "radio-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"clsx": "^2.1.1"
@@ -325,7 +325,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
 		}
@@ -341,7 +341,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"class-variance-authority": "^0.7.0",
@@ -352,14 +352,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"class-variance-authority": "^0.7.0",
@@ -371,7 +371,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -389,7 +389,7 @@
 		"name": "slider",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"sonner": {
@@ -414,7 +414,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -428,7 +428,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -442,7 +442,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.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -451,7 +451,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -459,7 +459,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598",
+			"@spartan-ng/brain": "0.0.1-alpha.600",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -467,7 +467,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.598"
+			"@spartan-ng/brain": "0.0.1-alpha.600"
 		}
 	},
 	"typography": {

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

@@ -1,19 +0,0 @@
-import { Directive } from '@angular/core';
-import { BrnDialogClose } from '@spartan-ng/brain/dialog';
-import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
-import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { classes } from '<%- importAlias %>/utils';
-
-@Directive({
-	selector: '[hlmCommandDialogCloseBtn]',
-	providers: [provideBrnButtonConfig({ variant: 'ghost' }), provideHlmIconConfig({ size: 'xs' })],
-	hostDirectives: [HlmButton, BrnDialogClose],
-})
-export class HlmCommandDialogCloseButton {
-	constructor() {
-		classes(
-			() =>
-				'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',
-		);
-	}
-}

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

@@ -1,16 +0,0 @@
-import { Directive } from '@angular/core';
-import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { classes } from '<%- importAlias %>/utils';
-
-@Directive({
-	selector: '[hlmCommandIcon]',
-	providers: [provideHlmIconConfig({ size: 'sm' })],
-	host: {
-		'data-slot': 'command-icon',
-	},
-})
-export class HlmCommandIcon {
-	constructor() {
-		classes(() => 'text-muted-foreground pointer-events-none shrink-0');
-	}
-}