@spartan-ng/cli 0.0.1-alpha.574 → 0.0.1-alpha.576

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

@@ -14,6 +14,7 @@ import { HlmCarousel } from './hlm-carousel';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: {
+		'data-slot': 'carousel-previous',
 		'[disabled]': 'isDisabled()',
 		'(click)': '_carousel.scrollPrev()',
 	},

package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-slide-display.ts.template

@@ -7,6 +7,7 @@ import { HlmCarousel } from './hlm-carousel';
 	selector: 'hlm-carousel-slide-display',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'carousel-slide-display',
 		'[class]': '_computedClass()',
 	},
 	template: `

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

@@ -22,6 +22,7 @@ import {
 	imports: [EmblaCarouselDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'carousel',
 		'[class]': '_computedClass()',
 		role: 'region',
 		'aria-roledescription': 'carousel',
@@ -36,7 +37,7 @@ import {
 			[subscribeToEvents]="['init', 'select', 'reInit']"
 			(emblaChange)="onEmblaEvent($event)"
 		>
-			<ng-content select="hlm-carousel-content" />
+			<ng-content select="[hlmCarouselContent],hlm-carousel-content" />
 		</div>
 		<ng-content />
 	`,

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 @Directive({
 	selector: '[hlmCommandDialog]',
 	host: {
+		'data-slot': 'command-dialog',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -5,6 +5,7 @@ import type { ClassValue } from 'clsx';
 @Directive({
 	selector: '[hlmCommandEmpty]',
 	host: {
+		'data-slot': 'command-empty',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-group-label',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommandGroupLabel],hlm-command-group-label',
 	host: {
+		'data-slot': 'command-group-label',
 		role: 'presentation',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content />',
 })
 export class HlmCommandGroupLabel {
 	/** The user defined class  */
-	public readonly userClass = input<string>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>

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

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnCommandGroup } from '@spartan-ng/brain/command';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-group',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommandGroup],hlm-command-group',
 	hostDirectives: [
 		{
 			directive: BrnCommandGroup,
@@ -12,13 +12,13 @@ import { hlm } from '<%- importAlias %>/utils';
 		},
 	],
 	host: {
+		'data-slot': 'command-group',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content />',
 })
 export class HlmCommandGroup {
 	/** The user defined class  */
-	public readonly userClass = input<string>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmCommandIcon]',
 	providers: [provideHlmIconConfig({ size: 'sm' })],
 	host: {
+		'data-slot': 'command-icon',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnCommandItem } from '@spartan-ng/brain/command';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'button[hlm-command-item]',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: 'button[hlmCommandItem],button[hlm-command-item]',
 	hostDirectives: [
 		{
 			directive: BrnCommandItem,
@@ -13,15 +13,13 @@ import { hlm } from '<%- importAlias %>/utils';
 		},
 	],
 	host: {
+		'data-slot': 'command-item',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmCommandItem {
 	/** The user defined class  */
-	public readonly userClass = input<string>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>

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

@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnCommandList } from '@spartan-ng/brain/command';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-list',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommandList],hlm-command-list',
 	hostDirectives: [
 		{
 			directive: BrnCommandList,
@@ -12,13 +12,13 @@ import { hlm } from '<%- importAlias %>/utils';
 		},
 	],
 	host: {
+		'data-slot': 'command-list',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content />',
 })
 export class HlmCommandList {
 	/** The user defined class  */
-	public readonly userClass = input<string>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>

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

@@ -1,16 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnCommandSearchInput } from '@spartan-ng/brain/command';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'input[hlm-command-search-input]',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: 'input[hlmCommandSearchInput],input[hlm-command-search-input]',
 	hostDirectives: [{ directive: BrnCommandSearchInput, inputs: ['value'] }],
 	host: {
+		'data-slot': 'command-search-input',
 		'[class]': '_computedClass()',
 	},
-	template: '',
 })
 export class HlmCommandSearchInput {
 	/** The user defined class  */

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

@@ -1,18 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { provideHlmIconConfig } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-search',
+@Directive({
+	selector: '[hlmCommandSearch],hlm-command-search',
 	providers: [provideHlmIconConfig({ size: 'sm' })],
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'command-search',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmCommandSearch {
 	/** The user defined class  */

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

@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-separator',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommandSeparator],hlm-command-separator',
 	host: {
+		'data-slot': 'command-separator',
 		role: 'separator',
 		'[class]': '_computedClass()',
 	},
-	template: '',
 })
 export class HlmCommandSeparator {
 	/** The user defined class  */
-	public readonly userClass = input<string>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 block h-px', this.userClass()));

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

@@ -1,14 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command-shortcut',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommandShortcut],hlm-command-shortcut',
 	host: {
+		'data-slot': 'command-shortcut',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content />',
 })
 export class HlmCommandShortcut {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnCommand } from '@spartan-ng/brain/command';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-command',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmCommand],hlm-command',
 	hostDirectives: [
 		{
 			directive: BrnCommand,
@@ -14,11 +13,9 @@ import type { ClassValue } from 'clsx';
 		},
 	],
 	host: {
+		'data-slot': 'command',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmCommand {
 	/** The user defined class */

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

@@ -12,14 +12,14 @@ import {
 	signal,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import { BrnPopoverImports } from '@spartan-ng/brain/popover';
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
-import { HlmIcon } from '<%- importAlias %>/icon';
-import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { HlmIconImports } from '<%- importAlias %>/icon';
+import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
@@ -34,20 +34,20 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-picker-multi',
-	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
+	imports: [HlmIconImports, BrnPopoverImports, HlmPopoverImports, HlmCalendarMulti],
 	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'block',
 	},
 	template: `
-		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
 			<button
 				[id]="buttonId()"
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
-				brnPopoverTrigger
+				hlmPopoverTrigger
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -73,7 +73,7 @@ let nextId = 0;
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
-		</brn-popover>
+		</hlm-popover>
 	`,
 })
 export class HlmDatePickerMulti<T> implements ControlValueAccessor {

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

@@ -11,14 +11,14 @@ import {
 	signal,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import { BrnPopoverImports } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
-import { HlmIcon } from '<%- importAlias %>/icon';
-import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { HlmIconImports } from '<%- importAlias %>/icon';
+import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
@@ -33,20 +33,20 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-picker',
-	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
+	imports: [HlmIconImports, BrnPopoverImports, HlmPopoverImports, HlmCalendar],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'block',
 	},
 	template: `
-		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
 			<button
 				[id]="buttonId()"
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
-				brnPopoverTrigger
+				hlmPopoverTrigger
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -70,7 +70,7 @@ let nextId = 0;
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
-		</brn-popover>
+		</hlm-popover>
 	`,
 })
 export class HlmDatePicker<T> implements ControlValueAccessor {

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

@@ -12,14 +12,14 @@ import {
 	untracked,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import { BrnPopoverImports } from '@spartan-ng/brain/popover';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
-import { HlmIcon } from '<%- importAlias %>/icon';
-import { HlmPopoverContent } from '<%- importAlias %>/popover';
+import { HlmIconImports } from '<%- importAlias %>/icon';
+import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
@@ -34,14 +34,14 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-range-picker',
-	imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarRange],
+	imports: [HlmIconImports, BrnPopoverImports, HlmPopoverImports, HlmCalendarRange],
 	providers: [HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'block',
 	},
 	template: `
-		<brn-popover
+		<hlm-popover
 			sideOffset="5"
 			[state]="_popoverState()"
 			(stateChanged)="_popoverState.set($event)"
@@ -52,7 +52,7 @@ let nextId = 0;
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
-				brnPopoverTrigger
+				hlmPopoverTrigger
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -78,7 +78,7 @@ let nextId = 0;
 					(endDateChange)="_handleEndDateChange($event)"
 				/>
 			</div>
-		</brn-popover>
+		</hlm-popover>
 	`,
 })
 export class HlmDateRangePicker<T> implements ControlValueAccessor {

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

@@ -6,6 +6,7 @@ import { HlmDialogFooter } from './lib/hlm-dialog-footer';
 import { HlmDialogHeader } from './lib/hlm-dialog-header';
 import { HlmDialogOverlay } from './lib/hlm-dialog-overlay';
 import { HlmDialogTitle } from './lib/hlm-dialog-title';
+import { HlmDialogTrigger } from './lib/hlm-dialog-trigger';
 
 export * from './lib/hlm-dialog';
 export * from './lib/hlm-dialog-close';
@@ -15,6 +16,7 @@ export * from './lib/hlm-dialog-footer';
 export * from './lib/hlm-dialog-header';
 export * from './lib/hlm-dialog-overlay';
 export * from './lib/hlm-dialog-title';
+export * from './lib/hlm-dialog-trigger';
 export * from './lib/hlm-dialog.service';
 
 export const HlmDialogImports = [
@@ -26,4 +28,5 @@ export const HlmDialogImports = [
 	HlmDialogHeader,
 	HlmDialogOverlay,
 	HlmDialogTitle,
+	HlmDialogTrigger,
 ] as const;

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

@@ -1,10 +1,13 @@
 import { Directive, computed, input } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmDialogClose],[brnDialogClose][hlm]',
+	selector: 'button[hlmDialogClose]',
+	hostDirectives: [{ directive: BrnDialogClose, inputs: ['delay'] }],
 	host: {
+		'data-slot': 'dialog-close',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,19 +1,20 @@
 import { NgComponentOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
-import { BrnDialogClose, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
+import { HlmIconImports } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmDialogClose } from './hlm-dialog-close';
 
 @Component({
 	selector: 'hlm-dialog-content',
-	imports: [NgComponentOutlet, BrnDialogClose, HlmDialogClose, NgIcon, HlmIcon],
+	imports: [NgComponentOutlet, HlmDialogClose, HlmIconImports],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'dialog-content',
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
@@ -24,7 +25,7 @@ import { HlmDialogClose } from './hlm-dialog-close';
 			<ng-content />
 		}
 
-		<button brnDialogClose hlm>
+		<button hlmDialogClose>
 			<span class="sr-only">Close</span>
 			<ng-icon hlm size="sm" name="lucideX" />
 		</button>

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmDialogDescription]',
 	hostDirectives: [BrnDialogDescription],
 	host: {
+		'data-slot': 'dialog-description',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,16 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-dialog-footer',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmDialogFooter],hlm-dialog-footer',
 	host: {
+		'data-slot': 'dialog-footer',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,16 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-dialog-header',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmDialogHeader],hlm-dialog-header',
 	host: {
+		'data-slot': 'dialog-header',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmDialogHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,5 +1,6 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
@@ -7,7 +8,8 @@ export const hlmDialogOverlayClass =
 	'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50';
 
 @Directive({
-	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',
+	selector: '[hlmDialogOverlay],hlm-dialog-overlay',
+	hostDirectives: [BrnDialogOverlay],
 })
 export class HlmDialogOverlay {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmDialogTitle]',
 	hostDirectives: [BrnDialogTitle],
 	host: {
+		'data-slot': 'dialog-title',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -0,0 +1,11 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTrigger } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
+	hostDirectives: [{ directive: BrnDialogTrigger, inputs: ['id', 'brnDialogTriggerFor: hlmDialogTriggerFor', 'type'] }],
+	host: {
+		'data-slot': 'dialog-trigger',
+	},
+})
+export class HlmDialogTrigger {}