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

package/package.json

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

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/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/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/navigation-menu/files/lib/hlm-navigation-menu-content.ts.template

@@ -1,17 +1,24 @@
-import { Directive } from '@angular/core';
+import { type NumberInput } from '@angular/cdk/coercion';
+import { Directive, input, numberAttribute } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmNavigationMenuContent],hlm-navigation-menu-content',
-	host: { 'data-slot': 'navigation-menu-content' },
+	host: {
+		'data-slot': 'navigation-menu-content',
+		'[style.--nav-offset]': 'navOffset()',
+	},
 })
 export class HlmNavigationMenuContent {
+	public readonly navOffset = input<number, NumberInput>(1.5, { transform: numberAttribute });
+
 	constructor() {
 		classes(() => [
 			'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:w-auto',
 			'data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52',
 			'data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-top-52',
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 top-full overflow-hidden rounded-md border shadow duration-200 data-[orientation=horizontal]:mt-1.5 data-[orientation=vertical]:mx-1.5 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+			'data-[orientation=horizontal]:mt-[--spacing(var(--nav-offset))] data-[orientation=vertical]:mx-[--spacing(var(--nav-offset))]',
+			'spartan-navigation-menu-popup block',
 		]);
 	}
 }

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

@@ -5,9 +5,12 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'li[hlmNavigationMenuItem]',
 	hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
+	host: {
+		'data-slot': 'navigation-menu-item',
+	},
 })
 export class HlmNavigationMenuItem {
 	constructor() {
-		classes(() => 'relative');
+		classes(() => 'relative has-[:focus]:z-10 data-active:z-10');
 	}
 }

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

@@ -5,12 +5,12 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'a[hlmNavigationMenuLink]',
 	hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
+	host: {
+		'data-slot': 'navigation-menu-link',
+	},
 })
 export class HlmNavigationMenuLink {
 	constructor() {
-		classes(() => [
-			'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_ng-icon:not([class*="text-"])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_ng-icon:not([class*="text-"])]:text-base',
-			'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-		]);
+		classes(() => 'spartan-navigation-menu-link');
 	}
 }

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

@@ -9,11 +9,14 @@ import { classes } from '<%- importAlias %>/utils';
 			directive: BrnNavigationMenuList,
 		},
 	],
+	host: {
+		'data-slot': 'navigation-menu-list',
+	},
 })
 export class HlmNavigationMenuList {
 	constructor() {
 		classes(() => [
-			'group flex flex-1 list-none items-center justify-center gap-0',
+			'spartan-navigation-menu-list group flex flex-1 list-none items-center justify-center',
 			'data-[orientation=vertical]:flex-col',
 		]);
 	}

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

@@ -1,16 +1,27 @@
-import { Directive } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnNavigationMenuTrigger } from '@spartan-ng/brain/navigation-menu';
 import { classes } from '<%- importAlias %>/utils';
 
-@Directive({
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmNavigationMenuTrigger]',
-	hostDirectives: [BrnNavigationMenuTrigger],
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnNavigationMenuTrigger, inputs: ['align'] }],
+	host: { 'data-slot': 'navigation-menu-trigger' },
+	template: `
+		<ng-content />
+		<ng-icon name="lucideChevronDown" class="spartan-navigation-menu-trigger-icon" />
+	`,
 })
 export class HlmNavigationMenuTrigger {
 	constructor() {
 		classes(
 			() =>
-				'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50',
+				'spartan-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none',
 		);
 	}
 }

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

@@ -11,9 +11,14 @@ import { classes } from '<%- importAlias %>/utils';
 			outputs: ['valueChange'],
 		},
 	],
+	host: {
+		'data-slot': 'navigation-menu',
+	},
 })
 export class HlmNavigationMenu {
 	constructor() {
-		classes(() => 'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center');
+		classes(
+			() => 'spartan-navigation-menu group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+		);
 	}
 }

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

@@ -1,11 +1,25 @@
 import { HlmPopover } from './lib/hlm-popover';
 import { HlmPopoverContent } from './lib/hlm-popover-content';
+import { HlmPopoverDescription } from './lib/hlm-popover-description';
+import { HlmPopoverHeader } from './lib/hlm-popover-header';
 import { HlmPopoverPortal } from './lib/hlm-popover-portal';
+import { HlmPopoverTitle } from './lib/hlm-popover-title';
 import { HlmPopoverTrigger } from './lib/hlm-popover-trigger';
 
 export * from './lib/hlm-popover';
 export * from './lib/hlm-popover-content';
+export * from './lib/hlm-popover-description';
+export * from './lib/hlm-popover-header';
 export * from './lib/hlm-popover-portal';
+export * from './lib/hlm-popover-title';
 export * from './lib/hlm-popover-trigger';
 
-export const HlmPopoverImports = [HlmPopover, HlmPopoverContent, HlmPopoverPortal, HlmPopoverTrigger] as const;
+export const HlmPopoverImports = [
+	HlmPopover,
+	HlmPopoverContent,
+	HlmPopoverDescription,
+	HlmPopoverHeader,
+	HlmPopoverPortal,
+	HlmPopoverTitle,
+	HlmPopoverTrigger,
+] as const;

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmPopoverDescription]',
+	host: { 'data-slot': 'popover-description' },
+})
+export class HlmPopoverDescription {
+	constructor() {
+		classes(() => 'spartan-popover-description');
+	}
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmPopoverHeader],hlm-popover-header',
+	host: { 'data-slot': 'popover-header' },
+})
+export class HlmPopoverHeader {
+	constructor() {
+		classes(() => 'spartan-popover-header');
+	}
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmPopoverTitle]',
+	host: { 'data-slot': 'popover-title' },
+})
+export class HlmPopoverTitle {
+	constructor() {
+		classes(() => 'spartan-popover-title');
+	}
+}

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

@@ -6,8 +6,6 @@ import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
 	hostDirectives: [
 		{ directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: hlmPopoverTriggerFor', 'type'] },
 	],
-	host: {
-		'data-slot': 'popover-trigger',
-	},
+	host: { 'data-slot': 'popover-trigger' },
 })
 export class HlmPopoverTrigger {}

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

@@ -6,17 +6,7 @@ import { BrnPopover } from '@spartan-ng/brain/popover';
 	hostDirectives: [
 		{
 			directive: BrnPopover,
-			inputs: [
-				'align',
-				'autoFocus',
-				'attachTo',
-				'closeDelay',
-				'closeOnOutsidePointerEvents',
-				'offsetX',
-				'restoreFocus',
-				'sideOffset',
-				'state',
-			],
+			inputs: ['align', 'attachTo', 'autoFocus', 'closeOnOutsidePointerEvents', 'offsetX', 'sideOffset', 'state'],
 			outputs: ['stateChanged', 'closed'],
 		},
 	],

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

@@ -1,6 +1,5 @@
 import { Directive } from '@angular/core';
-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 { BrnSelectMultiple } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
@@ -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/select/files/lib/hlm-select.ts.template

@@ -1,6 +1,5 @@
 import { Directive } from '@angular/core';
-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 { BrnSelect } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
@@ -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/sheet/files/lib/hlm-sheet-close.ts.template

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