@spartan-ng/cli 0.0.1-alpha.715 → 0.0.1-alpha.717

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.715",
+  "version": "0.0.1-alpha.717",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan"

package/src/generators/migrate-module-imports/import-map.js

@@ -40,7 +40,7 @@ exports.default = {
     HlmAutocompleteModule: 'HlmAutocompleteImports',
     HlmAvatarModule: 'HlmAvatarImports',
     HlmBadgeModule: 'HlmBadgeImports',
-    HlmBreadCrumbModule: 'HlmBreadCrumbImports',
+    HlmBreadCrumbModule: 'HlmBreadcrumbImports',
     HlmButtonModule: 'HlmButtonImports',
     HlmCalendarModule: 'HlmCalendarImports',
     HlmCardModule: 'HlmCardImports',

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

@@ -5,10 +5,7 @@ import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 @Directive({
 	selector: 'button[hlmAlertDialogCancel]',
 	providers: [provideBrnButtonConfig({ variant: 'outline' })],
-	hostDirectives: [
-		{ directive: BrnDialogClose, inputs: ['delay'] },
-		{ directive: HlmButton, inputs: ['variant', 'size'] },
-	],
+	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
 })
 export class HlmAlertDialogCancel {

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

@@ -1,7 +1,6 @@
 import { Directive } from '@angular/core';
 import { BrnAutocompleteSearch } from '@spartan-ng/brain/autocomplete';
-import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnPopover, provideBrnPopoverConfig, provideBrnPopoverDefaultOptions } from '@spartan-ng/brain/popover';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -11,9 +10,7 @@ import { classes } from '<%- importAlias %>/utils';
 			align: 'start',
 			sideOffset: 6,
 		}),
-		provideBrnDialogDefaultOptions({
-			autoFocus: 'first-heading',
-		}),
+		provideBrnPopoverDefaultOptions({ role: null }),
 	],
 	hostDirectives: [
 		{
@@ -23,16 +20,7 @@ import { classes } from '<%- importAlias %>/utils';
 		},
 		{
 			directive: BrnPopover,
-			inputs: [
-				'align',
-				'autoFocus',
-				'closeDelay',
-				'closeOnOutsidePointerEvents',
-				'sideOffset',
-				'state',
-				'offsetX',
-				'restoreFocus',
-			],
+			inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
 			outputs: ['stateChanged', 'closed'],
 		},
 	],

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

@@ -1,7 +1,6 @@
 import { Directive } from '@angular/core';
 import { BrnAutocomplete } from '@spartan-ng/brain/autocomplete';
-import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnPopover, provideBrnPopoverConfig, provideBrnPopoverDefaultOptions } from '@spartan-ng/brain/popover';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -11,9 +10,7 @@ import { classes } from '<%- importAlias %>/utils';
 			align: 'start',
 			sideOffset: 6,
 		}),
-		provideBrnDialogDefaultOptions({
-			autoFocus: 'first-heading',
-		}),
+		provideBrnPopoverDefaultOptions({ role: null }),
 	],
 	hostDirectives: [
 		{
@@ -23,16 +20,7 @@ import { classes } from '<%- importAlias %>/utils';
 		},
 		{
 			directive: BrnPopover,
-			inputs: [
-				'align',
-				'autoFocus',
-				'closeDelay',
-				'closeOnOutsidePointerEvents',
-				'sideOffset',
-				'state',
-				'offsetX',
-				'restoreFocus',
-			],
+			inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
 			outputs: ['stateChanged', 'closed'],
 		},
 	],

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

@@ -4,7 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAvatarFallback]',
-	exportAs: 'avatarFallback',
+	exportAs: 'hlmAvatarFallback',
 	hostDirectives: [BrnAvatarFallback],
 	host: {
 		'data-slot': 'avatar-fallback',

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

@@ -4,7 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'img[hlmAvatarImage]',
-	exportAs: 'avatarImage',
+	exportAs: 'hlmAvatarImage',
 	hostDirectives: [BrnAvatarImage],
 	host: {
 		'data-slot': 'avatar-image',

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

@@ -23,8 +23,3 @@ export const HlmBreadcrumbImports = [
 	HlmBreadcrumbPage,
 	HlmBreadcrumbList,
 ] as const;
-
-/**
- * @deprecated Use `HlmBreadcrumbImports` instead.
- */
-export const HlmBreadCrumbImports = HlmBreadcrumbImports;

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, NgTemplateOutlet, HlmSelectImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'calendar' },
 	template: `
 		<div
 			brnCalendarMulti

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, HlmSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'calendar' },
 	template: `
 		<div
 			brnCalendarRange

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

@@ -25,6 +25,7 @@ import type { ClassValue } from 'clsx';
 	imports: [BrnCalendarImports, NgIcon, HlmIcon, HlmSelectImports, NgTemplateOutlet],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'calendar' },
 	template: `
 		<div
 			brnCalendar

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

@@ -1,7 +1,6 @@
 import { Directive } from '@angular/core';
 import { BrnComboboxMultiple } from '@spartan-ng/brain/combobox';
-import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnPopover, provideBrnPopoverConfig, provideBrnPopoverDefaultOptions } from '@spartan-ng/brain/popover';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -11,9 +10,7 @@ import { classes } from '<%- importAlias %>/utils';
 			align: 'start',
 			sideOffset: 6,
 		}),
-		provideBrnDialogDefaultOptions({
-			autoFocus: 'first-heading',
-		}),
+		provideBrnPopoverDefaultOptions({ role: null }),
 	],
 	hostDirectives: [
 		{
@@ -32,16 +29,7 @@ import { classes } from '<%- importAlias %>/utils';
 		},
 		{
 			directive: BrnPopover,
-			inputs: [
-				'align',
-				'autoFocus',
-				'closeDelay',
-				'closeOnOutsidePointerEvents',
-				'sideOffset',
-				'state',
-				'offsetX',
-				'restoreFocus',
-			],
+			inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
 			outputs: ['stateChanged', 'closed'],
 		},
 	],

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

@@ -1,7 +1,6 @@
 import { Directive } from '@angular/core';
 import { BrnCombobox } from '@spartan-ng/brain/combobox';
-import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnPopover, provideBrnPopoverConfig, provideBrnPopoverDefaultOptions } from '@spartan-ng/brain/popover';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -11,9 +10,7 @@ import { classes } from '<%- importAlias %>/utils';
 			align: 'start',
 			sideOffset: 6,
 		}),
-		provideBrnDialogDefaultOptions({
-			autoFocus: 'first-heading',
-		}),
+		provideBrnPopoverDefaultOptions({ role: null }),
 	],
 	hostDirectives: [
 		{
@@ -32,16 +29,7 @@ import { classes } from '<%- importAlias %>/utils';
 		},
 		{
 			directive: BrnPopover,
-			inputs: [
-				'align',
-				'autoFocus',
-				'closeDelay',
-				'closeOnOutsidePointerEvents',
-				'sideOffset',
-				'state',
-				'offsetX',
-				'restoreFocus',
-			],
+			inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
 			outputs: ['stateChanged', 'closed'],
 		},
 	],

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

@@ -8,14 +8,14 @@ import {
 	linkedSignal,
 	output,
 } from '@angular/core';
-import { BrnDialogContent, BrnDialogState } from '@spartan-ng/brain/dialog';
+import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { HlmDialogImports } from '<%- importAlias %>/dialog';
 import { hlm } from '<%- importAlias %>/utils';
 import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command-dialog',
-	imports: [HlmDialogImports, BrnDialogContent],
+	imports: [HlmDialogImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
 		<hlm-dialog [state]="_state()" (stateChanged)="stateChanged($event)">

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandEmpty {
 	constructor() {
-		classes(() => 'py-6 text-center text-sm');
+		classes(() => 'spartan-command-empty');
 	}
 }

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 block px-2 py-1.5 text-xs font-medium');
+		classes(() => 'inline-block');
 	}
 }

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(() => 'spartan-command-group block data-hidden:hidden');
 	}
 }

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

@@ -10,20 +10,21 @@ import { classes } from '<%- importAlias %>/utils';
 	imports: [HlmInputGroupImports, NgIcon, BrnCommandInput],
 	providers: [provideIcons({ lucideSearch })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'command-input-wrapper',
+	},
 	template: `
-		<hlm-input-group
-			class="bg-input/30 border-input/30 h-8 rounded-lg shadow-none *:data-[slot=input-group-addon]:pl-2"
-		>
+		<hlm-input-group class="spartan-command-input-group">
 			<input
 				brnCommandInput
 				data-slot="command-input"
-				class="w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+				class="spartan-command-input outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
 				[id]="inputId()"
 				[placeholder]="placeholder()"
 			/>
 
 			<hlm-input-group-addon>
-				<ng-icon name="lucideSearch" />
+				<ng-icon name="lucideSearch" class="spartan-command-input-icon" />
 			</hlm-input-group-addon>
 		</hlm-input-group>
 	`,
@@ -33,6 +34,6 @@ export class HlmCommandInput {
 	public readonly placeholder = input<string>('');
 
 	constructor() {
-		classes(() => 'p-1 pb-0');
+		classes(() => 'spartan-command-input-wrapper');
 	}
 }

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-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",
+				'spartan-command-item group/command-item w-full data-disabled:pointer-events-none data-disabled:opacity-50 data-hidden:hidden [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0',
 		);
 	}
 }

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(() => 'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none');
+		classes(() => 'spartan-command-list overflow-x-hidden overflow-y-auto');
 	}
 }

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

@@ -11,6 +11,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandSeparator {
 	constructor() {
-		classes(() => 'bg-border -mx-1 block h-px w-auto data-hidden:hidden');
+		classes(() => 'spartan-command-separator block data-hidden:hidden');
 	}
 }

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommandShortcut {
 	constructor() {
-		classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+		classes(() => 'spartan-command-shortcut');
 	}
 }

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

@@ -17,6 +17,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCommand {
 	constructor() {
-		classes(() => 'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl p-1');
+		classes(() => 'spartan-command flex size-full flex-col overflow-hidden');
 	}
 }

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

@@ -3,6 +3,7 @@ import { CdkContextMenuTrigger } from '@angular/cdk/menu';
 import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+import { classes } from '<%- importAlias %>/utils';
 import { injectHlmContextMenuConfig } from './hlm-context-menu-token';
 
 @Directive({
@@ -50,5 +51,7 @@ export class HlmContextMenuTrigger {
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();
 		});
+
+		classes(() => 'select-none');
 	}
 }

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

@@ -1,11 +1,11 @@
-import { Directive, effect, ElementRef, inject, input, untracked } from '@angular/core';
-import { BrnDialog } from '@spartan-ng/brain/dialog';
+import { Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { BrnOverlay } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 
 @Directive({ selector: '[hlmDatePickerAnchor]' })
 export class HlmDatePickerAnchor {
 	private readonly _host = inject(ElementRef, { host: true });
-	private readonly _brnDialog = inject(BrnDialog, { optional: true });
+	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });
 
 	public readonly hlmDatePickerAnchorFor = input<BrnPopover | undefined>(undefined, {
 		alias: 'hlmDatePickerAnchorFor',
@@ -13,16 +13,9 @@ export class HlmDatePickerAnchor {
 
 	constructor() {
 		effect(() => {
-			const brnDialog = this.hlmDatePickerAnchorFor();
-			untracked(() => {
-				if (!brnDialog) return;
-				brnDialog.mutableAttachTo.set(this._host.nativeElement);
-				brnDialog.mutableCloseOnOutsidePointerEvents.set(true);
-			});
+			this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);
 		});
 
-		if (!this._brnDialog) return;
-		this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
-		this._brnDialog.mutableCloseOnOutsidePointerEvents.set(true);
+		this._brnOverlay?.setOrigin(this._host.nativeElement);
 	}
 }

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

@@ -14,9 +14,9 @@ import {
 	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
@@ -115,7 +115,7 @@ export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValue
 	/** Defines how the date should be transformed before saving to model/form. */
 	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);
 
-	protected readonly _popoverState = signal<BrnDialogState | null>(null);
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
 
 	protected readonly _disabled = linkedSignal(this.disabled);
 

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

@@ -13,9 +13,9 @@ import {
 	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
@@ -38,7 +38,6 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	template: `
 		<hlm-popover
 			sideOffset="5"
-			autoFocus="first-heading"
 			[state]="_popoverState()"
 			(stateChanged)="_popoverState.set($event)"
 			(closed)="_onTouched?.()"
@@ -102,7 +101,7 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 	/** Defines how the date should be transformed before saving to model/form. */
 	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
 
-	protected readonly _popoverState = signal<BrnDialogState | null>(null);
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
 
 	protected readonly _disabled = linkedSignal(this.disabled);
 

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

@@ -14,9 +14,9 @@ import {
 	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
@@ -108,7 +108,7 @@ export class HlmDateRangePicker<T> implements HlmDatePickerBase<T>, ControlValue
 	/** Defines how the date should be transformed before saving to model/form. */
 	public readonly transformDates = input<(date: [T, T]) => [T, T]>(this._config.transformDates);
 
-	protected readonly _popoverState = signal<BrnDialogState | null>(null);
+	protected readonly _popoverState = signal<BrnOverlayState | null>(null);
 
 	protected readonly _disabled = linkedSignal(this.disabled);
 

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

@@ -3,7 +3,7 @@ import { BrnDialogClose } from '@spartan-ng/brain/dialog';
 
 @Directive({
 	selector: 'button[hlmDialogClose]',
-	hostDirectives: [{ directive: BrnDialogClose, inputs: ['delay'] }],
+	hostDirectives: [BrnDialogClose],
 	host: { 'data-slot': 'dialog-close' },
 })
 export class HlmDialogClose {}

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

@@ -1,4 +1,5 @@
 import type { BooleanInput } from '@angular/cdk/coercion';
+import type { ComponentType } from '@angular/cdk/portal';
 import { NgComponentOutlet } from '@angular/common';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
@@ -9,6 +10,12 @@ import { HlmIconImports } from '<%- importAlias %>/icon';
 import { classes } from '<%- importAlias %>/utils';
 import { HlmDialogClose } from './hlm-dialog-close';
 
+type HlmDialogContentContext = {
+	$component?: ComponentType<unknown>;
+	$dynamicComponentClass?: string;
+	$showCloseButton?: boolean;
+};
+
 @Component({
 	selector: 'hlm-dialog-content',
 	imports: [NgComponentOutlet, HlmIconImports, HlmButton, HlmDialogClose],
@@ -35,7 +42,7 @@ import { HlmDialogClose } from './hlm-dialog-close';
 })
 export class HlmDialogContent {
 	private readonly _dialogRef = inject(BrnDialogRef);
-	private readonly _dialogContext = injectBrnDialogContext({ optional: true });
+	private readonly _dialogContext = injectBrnDialogContext<HlmDialogContentContext | null>({ optional: true });
 
 	public readonly showCloseButton = input<boolean, BooleanInput>(this._dialogContext?.$showCloseButton ?? true, {
 		transform: booleanAttribute,

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

@@ -3,7 +3,7 @@ import { BrnDrawerClose } from '@spartan-ng/brain/drawer';
 
 @Directive({
 	selector: 'button[hlmDrawerClose]',
-	hostDirectives: [{ directive: BrnDrawerClose, inputs: ['delay'] }],
+	hostDirectives: [BrnDrawerClose],
 	host: { 'data-slot': 'drawer-close' },
 })
 export class HlmDrawerClose {}

package/src/generators/ui/libs/dropdown-menu/files/index.ts.template

@@ -10,6 +10,7 @@ import { HlmDropdownMenuRadioIndicator } from './lib/hlm-dropdown-menu-radio-ind
 import { HlmDropdownMenuSeparator } from './lib/hlm-dropdown-menu-separator';
 import { HlmDropdownMenuShortcut } from './lib/hlm-dropdown-menu-shortcut';
 import { HlmDropdownMenuSub } from './lib/hlm-dropdown-menu-sub';
+import { HlmDropdownMenuSubTrigger } from './lib/hlm-dropdown-menu-sub-trigger';
 
 import { HlmDropdownMenuTrigger } from './lib/hlm-dropdown-menu-trigger';
 
@@ -25,6 +26,7 @@ export * from './lib/hlm-dropdown-menu-radio-indicator';
 export * from './lib/hlm-dropdown-menu-separator';
 export * from './lib/hlm-dropdown-menu-shortcut';
 export * from './lib/hlm-dropdown-menu-sub';
+export * from './lib/hlm-dropdown-menu-sub-trigger';
 export * from './lib/hlm-dropdown-menu-token';
 export * from './lib/hlm-dropdown-menu-trigger';
 
@@ -41,5 +43,6 @@ export const HlmDropdownMenuImports = [
 	HlmDropdownMenuSeparator,
 	HlmDropdownMenuShortcut,
 	HlmDropdownMenuSub,
+	HlmDropdownMenuSubTrigger,
 	HlmDropdownMenuTrigger,
 ] as const;

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-checkbox-indicator.ts.template

@@ -8,15 +8,16 @@ import { classes } from '<%- importAlias %>/utils';
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'dropdown-menu-checkbox-item-indicator' },
 	template: `
-		<ng-icon class="text-base" name="lucideCheck" />
+		<ng-icon name="lucideCheck" />
 	`,
 })
 export class HlmDropdownMenuCheckboxIndicator {
 	constructor() {
 		classes(
 			() =>
-				'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
+				'spartan-dropdown-menu-item-indicator pointer-events-none opacity-0 group-data-checked/dropdown-menu-checkbox:opacity-100',
 		);
 	}
 }