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

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

@@ -1,32 +1,52 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
+import { CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemSelectable } from '@angular/cdk/menu';
 import { Directive, booleanAttribute, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
+/** @internal. Use HlmDropdownMenuCheckbox instead. */
 @Directive({
-	selector: '[hlmDropdownMenuCheckbox]',
+	selector: '[hlmDropdownMenuCheckboxCdk]',
+	providers: [
+		{ provide: CdkMenuItemCheckbox, useExisting: HlmDropdownMenuCheckboxCdk },
+		{ provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuCheckboxCdk },
+		{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+	],
+})
+export class HlmDropdownMenuCheckboxCdk extends CdkMenuItemCheckbox {
+	public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+	public override trigger(options?: { keepOpen: boolean }) {
+		super.trigger({ ...options, keepOpen: this.keepOpen() });
+	}
+}
+
+@Directive({
+	selector: '[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]',
 	hostDirectives: [
 		{
-			directive: CdkMenuItemCheckbox,
-			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+			directive: HlmDropdownMenuCheckboxCdk,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
 			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
 	],
 	host: {
 		'data-slot': 'dropdown-menu-checkbox-item',
-		'[attr.data-disabled]': 'disabled() ? "" : null',
-		'[attr.data-checked]': 'checked() ? "" : null',
+		'[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+		'[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
+		'[attr.data-inset]': 'inset() ? "" : null',
 	},
 })
 export class HlmDropdownMenuCheckbox {
-	private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox);
-	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
-	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { transform: booleanAttribute });
+	protected readonly _cdkMenuItem = inject(HlmDropdownMenuCheckboxCdk);
+
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 
 	constructor() {
 		classes(
 			() =>
-				'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:ps-2 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:pe-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:start-auto has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:end-2',
+				'spartan-dropdown-menu-checkbox-item group/dropdown-menu-checkbox relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -5,9 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
 	hostDirectives: [CdkMenuGroup],
-	host: {
-		'data-slot': 'dropdown-menu-group',
-	},
+	host: { 'data-slot': 'dropdown-menu-group' },
 })
 export class HlmDropdownMenuGroup {
 	constructor() {

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

@@ -9,11 +9,11 @@ import { classes } from '<%- importAlias %>/utils';
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<ng-icon name="lucideChevronRight" class="text-base rtl:rotate-180" />
+		<ng-icon name="lucideChevronRight" class="text-[calc(var(--spacing)*4)] rtl:rotate-180" />
 	`,
 })
 export class HlmDropdownMenuItemSubIndicator {
 	constructor() {
-		classes(() => 'ms-auto size-4');
+		classes(() => 'ms-auto flex items-center justify-center');
 	}
 }

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

@@ -34,7 +34,7 @@ export class HlmDropdownMenuItem {
 	constructor() {
 		classes(
 			() =>
-				"hover:bg-accent focus-visible:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_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-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_svg:not([class*='text-'])]:text-base",
+				'spartan-dropdown-menu-item group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -10,11 +10,11 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmDropdownMenuLabel {
-	constructor() {
-		classes(() => 'block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8');
-	}
-
 	public readonly inset = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
+
+	constructor() {
+		classes(() => 'spartan-dropdown-menu-label block');
+	}
 }

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

@@ -1,22 +1,23 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCircle } from '@ng-icons/lucide';
+import { lucideCheck } from '@ng-icons/lucide';
 import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-dropdown-menu-radio-indicator',
 	imports: [NgIcon],
-	providers: [provideIcons({ lucideCircle })],
+	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'dropdown-menu-radio-item-indicator' },
 	template: `
-		<ng-icon name="lucideCircle" class="text-[0.5rem] *:[svg]:fill-current" />
+		<ng-icon name="lucideCheck" />
 	`,
 })
 export class HlmDropdownMenuRadioIndicator {
 	constructor() {
 		classes(
 			() =>
-				'pointer-events-none absolute start-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-radio:opacity-100',
 		);
 	}
 }

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

@@ -1,32 +1,47 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
-import { CdkMenuItemRadio } from '@angular/cdk/menu';
+import { CdkMenuItem, CdkMenuItemRadio, CdkMenuItemSelectable } from '@angular/cdk/menu';
 import { Directive, booleanAttribute, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
+/** @internal. Use HlmDropdownMenuRadio instead. */
+@Directive({
+	selector: '[hlmDropdownMenuRadioCdk]',
+	providers: [
+		{ provide: CdkMenuItemRadio, useExisting: HlmDropdownMenuRadioCdk },
+		{ provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuRadioCdk },
+		{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+	],
+})
+export class HlmDropdownMenuRadioCdk extends CdkMenuItemRadio {
+	public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+	public override trigger(options?: { keepOpen: boolean }) {
+		super.trigger({ ...options, keepOpen: this.keepOpen() });
+	}
+}
+
 @Directive({
 	selector: '[hlmDropdownMenuRadio]',
 	hostDirectives: [
 		{
-			directive: CdkMenuItemRadio,
-			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+			directive: HlmDropdownMenuRadioCdk,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
 			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
 	],
 	host: {
 		'data-slot': 'dropdown-menu-radio-item',
-		'[attr.data-disabled]': 'disabled() ? "" : null',
-		'[attr.data-checked]': 'checked() ? "" : null',
+		'[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+		'[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
 	},
 })
 export class HlmDropdownMenuRadio {
-	private readonly _cdkMenuItem = inject(CdkMenuItemRadio);
-	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
-	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { transform: booleanAttribute });
+	protected readonly _cdkMenuItem = inject(HlmDropdownMenuRadioCdk);
 
 	constructor() {
 		classes(
 			() =>
-				'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				'spartan-dropdown-menu-radio-item group/dropdown-menu-radio relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
-	host: {
-		'data-slot': 'dropdown-menu-separator',
-	},
+	host: { 'data-slot': 'dropdown-menu-separator' },
 })
 export class HlmDropdownMenuSeparator {
 	constructor() {
-		classes(() => 'bg-border -mx-1 my-1 block h-px');
+		classes(() => 'spartan-dropdown-menu-separator block');
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
-	host: {
-		'data-slot': 'dropdown-menu-shortcut',
-	},
+	host: { 'data-slot': 'dropdown-menu-shortcut' },
 })
 export class HlmDropdownMenuShortcut {
 	constructor() {
-		classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+		classes(() => 'spartan-dropdown-menu-shortcut');
 	}
 }

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

@@ -0,0 +1,44 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { 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 { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+	selector: '[hlmDropdownMenuSubTrigger]',
+	hostDirectives: [
+		{
+			directive: CdkMenuTrigger,
+			inputs: ['cdkMenuTriggerFor: hlmDropdownMenuSubTrigger', 'cdkMenuTriggerData: hlmDropdownMenuTriggerData'],
+			outputs: ['cdkMenuOpened: hlmDropdownMenuSubOpened', 'cdkMenuClosed: hlmDropdownMenuSubClosed'],
+		},
+	],
+	host: { 'data-slot': 'dropdown-menu-sub-trigger' },
+})
+export class HlmDropdownMenuSubTrigger {
+	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+	private readonly _config = injectHlmDropdownMenuConfig();
+
+	public readonly align = input<MenuAlign>(this._config.align);
+	public readonly side = input<MenuSide>(this._config.side);
+
+	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+	constructor() {
+		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
+			setTimeout(
+				() =>
+					// eslint-disable-next-line
+					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
+						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
+			),
+		);
+
+		effect(() => {
+			this._cdkTrigger.menuPosition = this._menuPosition();
+		});
+
+		classes(() => 'aria-expanded:bg-accent aria-expanded:text-accent-foreground');
+	}
+}

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

@@ -24,10 +24,7 @@ export class HlmDropdownMenuSub {
 		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
 		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
 
-		classes(
-			() =>
-				'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-hidden rounded-md border p-1 shadow-lg',
-		);
+		classes(() => 'spartan-dropdown-menu-sub-content w-auto');
 	}
 
 	private setSideWithDarkMagic() {

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

@@ -13,9 +13,7 @@ import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
 			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
 		},
 	],
-	host: {
-		'data-slot': 'dropdown-menu-trigger',
-	},
+	host: { 'data-slot': 'dropdown-menu-trigger' },
 })
 export class HlmDropdownMenuTrigger {
 	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });

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

@@ -25,7 +25,7 @@ export class HlmDropdownMenu {
 	constructor() {
 		classes(
 			() =>
-				'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 my-[--spacing(var(--side-offset))] min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+				'spartan-dropdown-menu-content my-[--spacing(var(--side-offset))] overflow-x-hidden overflow-y-auto outline-none',
 		);
 
 		this.setSideWithDarkMagic();

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

@@ -6,6 +6,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmInput]',
 	hostDirectives: [{ directive: BrnInput, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
+	host: { 'data-slot': 'input' },
 })
 export class HlmInput {
 	constructor() {

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-content.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmPopoverContent],hlm-popover-content',
+	host: { 'data-slot': 'popover-content' },
 })
 export class HlmPopoverContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });

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,19 +6,10 @@ 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'],
 		},
 	],
+	host: { 'data-slot': 'popover' },
 })
 export class HlmPopover {}

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

@@ -6,7 +6,11 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmProgressIndicator],hlm-progress-indicator',
 	hostDirectives: [BrnProgressIndicator],
-	host: { '[class.animate-indeterminate]': '_indeterminate()', '[style.transform]': '_transform()' },
+	host: {
+		'data-slot': 'progress-indicator',
+		'[class.animate-indeterminate]': '_indeterminate()',
+		'[style.transform]': '_transform()',
+	},
 })
 export class HlmProgressIndicator {
 	private readonly _progress = injectBrnProgress();

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'hlm-progress,[hlmProgress]',
 	hostDirectives: [{ directive: BrnProgress, inputs: ['value', 'max', 'getValueLabel'] }],
+	host: { 'data-slot': 'progress' },
 })
 export class HlmProgress {
 	constructor() {

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'],
 		},
 	],