@spartan-ng/cli 0.0.1-alpha.720 → 1.0.0

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

@@ -2,58 +2,59 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown, lucideX } from '@ng-icons/lucide';
-import { BrnComboboxImports, BrnComboboxPopoverTrigger } from '@spartan-ng/brain/combobox';
-import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
+import { BrnComboboxAnchor, BrnComboboxImports, BrnComboboxPopoverTrigger } from '@spartan-ng/brain/combobox';
+import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-combobox-input',
 	imports: [HlmInputGroupImports, NgIcon, BrnComboboxImports, BrnComboboxPopoverTrigger],
 	providers: [provideIcons({ lucideChevronDown, lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnComboboxAnchor, HlmInputGroup],
 	template: `
-		<hlm-input-group brnComboboxAnchor class="w-auto">
-			<input
-				brnComboboxInput
-				#comboboxInput="brnComboboxInput"
-				brnComboboxPopoverTrigger
-				hlmInputGroupInput
-				[id]="inputId()"
-				[placeholder]="placeholder()"
-				[forceInvalid]="forceInvalid()"
-				[aria-invalid]="ariaInvalidOverride()"
-			/>
+		<input
+			brnComboboxInput
+			#comboboxInput="brnComboboxInput"
+			brnComboboxPopoverTrigger
+			[closeOnTriggerClick]="false"
+			hlmInputGroupInput
+			[id]="inputId()"
+			[placeholder]="placeholder()"
+			[forceInvalid]="forceInvalid()"
+			[aria-invalid]="ariaInvalidOverride()"
+		/>
 
-			<hlm-input-group-addon align="inline-end">
-				@if (showTrigger()) {
-					<button
-						brnComboboxPopoverTrigger
-						hlmInputGroupButton
-						data-slot="input-group-button"
-						[disabled]="comboboxInput.disabled()"
-						size="icon-xs"
-						variant="ghost"
-						class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-					>
-						<ng-icon name="lucideChevronDown" />
-					</button>
-				}
+		<hlm-input-group-addon align="inline-end">
+			@if (showTrigger()) {
+				<button
+					brnComboboxPopoverTrigger
+					hlmInputGroupButton
+					data-slot="input-group-button"
+					[disabled]="comboboxInput.disabled()"
+					size="icon-xs"
+					variant="ghost"
+					class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+				>
+					<ng-icon name="lucideChevronDown" />
+				</button>
+			}
 
-				@if (showClear()) {
-					<button
-						*brnComboboxClear
-						hlmInputGroupButton
-						data-slot="combobox-clear"
-						[disabled]="comboboxInput.disabled()"
-						size="icon-xs"
-						variant="ghost"
-					>
-						<ng-icon name="lucideX" />
-					</button>
-				}
-			</hlm-input-group-addon>
+			@if (showClear()) {
+				<button
+					*brnComboboxClear
+					hlmInputGroupButton
+					data-slot="combobox-clear"
+					[disabled]="comboboxInput.disabled()"
+					size="icon-xs"
+					variant="ghost"
+				>
+					<ng-icon name="lucideX" />
+				</button>
+			}
+		</hlm-input-group-addon>
 
-			<ng-content />
-		</hlm-input-group>
+		<ng-content />
 	`,
 })
 export class HlmComboboxInput {
@@ -71,4 +72,8 @@ export class HlmComboboxInput {
 		transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
 		alias: 'aria-invalid',
 	});
+
+	constructor() {
+		classes(() => 'w-auto');
+	}
 }

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

@@ -1,13 +1,13 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 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 { booleanAttribute, computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import { createMenuPosition, MENU_SIDE, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 import { injectHlmContextMenuConfig } from './hlm-context-menu-token';
 
 @Directive({
 	selector: '[hlmContextMenuTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmContextMenuTrigger) }],
 	hostDirectives: [
 		{
 			directive: CdkContextMenuTrigger,
@@ -36,17 +36,11 @@ export class HlmContextMenuTrigger {
 	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
 
 	constructor() {
-		// once the trigger opens we wait until the next tick and then grab the last position
-		// used to position the menu. we store this in our trigger which the brnMenu directive has
-		// access to through DI
-		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),
-			),
-		);
+		// CDK sets transform-origin on the menu content (a shared hlm-dropdown-menu) from the resolved
+		// position; the content reads it to animate from the anchored corner and to derive its data-side.
+		// Cast tolerates @angular/cdk < 21.2 (we still support >=21.0), where the property is absent and
+		// the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector = '[data-slot="dropdown-menu"]';
 
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();

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

@@ -1,4 +1,4 @@
-import { Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { Directive, effect, ElementRef, inject, input, linkedSignal } from '@angular/core';
 import { BrnOverlay } from '@spartan-ng/brain/overlay';
 import { BrnPopover } from '@spartan-ng/brain/popover';
 
@@ -7,10 +7,12 @@ export class HlmDatePickerAnchor {
 	private readonly _host = inject(ElementRef, { host: true });
 	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });
 
-	public readonly hlmDatePickerAnchorFor = input<BrnPopover | undefined>(undefined, {
+	public readonly hlmDatePickerAnchorForInput = input<BrnPopover | undefined>(undefined, {
 		alias: 'hlmDatePickerAnchorFor',
 	});
 
+	public readonly hlmDatePickerAnchorFor = linkedSignal(this.hlmDatePickerAnchorForInput);
+
 	constructor() {
 		effect(() => {
 			this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);

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

@@ -1,61 +1,69 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, linkedSignal } from '@angular/core';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	effect,
+	ElementRef,
+	inject,
+	input,
+	linkedSignal,
+} from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
-import { HlmButtonImports } from '<%- importAlias %>/button';
-import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
-import { HlmDatePickerAnchor } from './hlm-date-picker-anchor';
+import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { HlmDatePickerTriggerBase, provideHlmDatePickerTrigger } from './hlm-date-picker-trigger.token';
 import { injectHlmDatePicker, injectHlmDatePickerConfig } from './hlm-date-picker.token';
 
 @Component({
 	selector: 'hlm-date-picker-input',
-	imports: [HlmInputGroupImports, HlmButtonImports, HlmDatePickerAnchor, NgIcon],
+	imports: [HlmInputGroupImports, NgIcon],
 	providers: [provideIcons({ lucideCalendar, lucideX }), provideHlmDatePickerTrigger(HlmDatePickerInput)],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmInputGroup],
 	template: `
-		<hlm-input-group hlmDatePickerAnchor [hlmDatePickerAnchorFor]="_popover()">
-			<input
-				hlmInputGroupInput
-				[value]="_inputValue()"
-				[id]="inputId()"
-				[placeholder]="placeholder()"
-				[disabled]="_disabled()"
-				[forceInvalid]="forceInvalid()"
-				(click)="_handleClick()"
-				(keydown.arrowDown)="_open()"
-				(keydown.enter)="_handleEnter($event)"
-				(input)="_handleInputChange($event)"
-				(blur)="_commitDate()"
-			/>
-			<hlm-input-group-addon align="inline-end">
-				@if (_showClearButton()) {
-					<button
-						hlmInputGroupButton
-						size="icon-xs"
-						variant="ghost"
-						[attr.aria-label]="clearAriaLabel()"
-						(click)="_clear()"
-						[disabled]="_disabled()"
-					>
-						<ng-icon name="lucideX" />
-					</button>
-				}
+		<input
+			hlmInputGroupInput
+			[value]="_inputValue()"
+			[id]="inputId()"
+			[placeholder]="placeholder()"
+			[disabled]="_disabled()"
+			[forceInvalid]="forceInvalid()"
+			(click)="_handleClick()"
+			(keydown.arrowDown)="_open()"
+			(keydown.enter)="_handleEnter($event)"
+			(input)="_handleInputChange($event)"
+			(blur)="_commitDate()"
+		/>
+		<hlm-input-group-addon align="inline-end">
+			@if (_showClearButton()) {
 				<button
 					hlmInputGroupButton
 					size="icon-xs"
-					[attr.aria-label]="calendarAriaLabel()"
-					(click)="_popover().open()"
+					variant="ghost"
+					[attr.aria-label]="clearAriaLabel()"
+					(click)="_clear()"
 					[disabled]="_disabled()"
 				>
-					<ng-icon name="lucideCalendar" />
+					<ng-icon name="lucideX" />
 				</button>
-			</hlm-input-group-addon>
-		</hlm-input-group>
+			}
+			<button
+				hlmInputGroupButton
+				size="icon-xs"
+				[attr.aria-label]="calendarAriaLabel()"
+				(click)="_popover().open()"
+				[disabled]="_disabled()"
+			>
+				<ng-icon name="lucideCalendar" />
+			</button>
+		</hlm-input-group-addon>
 	`,
 })
 export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
 	private static _nextId = 0;
+	private readonly _host = inject(ElementRef);
 	private readonly _datePicker = injectHlmDatePicker<T>();
 	private readonly _config = injectHlmDatePickerConfig<T>();
 
@@ -129,6 +137,10 @@ export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
 		},
 	});
 
+	constructor() {
+		effect(() => this._popover()?.setOrigin(this._host.nativeElement));
+	}
+
 	protected _handleInputChange(event: Event) {
 		const text = (event.target as HTMLInputElement).value;
 		this._inputValue.set(text);

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

@@ -42,12 +42,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover
-			sideOffset="5"
-			[state]="_popoverState()"
-			(stateChanged)="_popoverState.set($event)"
-			(closed)="_onTouched?.()"
-		>
+		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -136,6 +131,11 @@ export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValue
 	protected _onChange?: ChangeFn<T[]>;
 	protected _onTouched?: TouchFn;
 
+	protected _onStateChange(state: BrnOverlayState) {
+		this._popoverState.set(state);
+		if (state === 'closed') this._onTouched?.();
+	}
+
 	protected _handleChange(value: T[] | undefined) {
 		if (value === undefined) return;
 

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

@@ -63,7 +63,7 @@ export class HlmDatePickerTrigger implements HlmDatePickerTriggerBase {
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('spartan-date-picker-trigger w-64 justify-between', this.userClass()),
+		hlm('spartan-date-picker-trigger justify-between', this.userClass()),
 	);
 
 	protected readonly _isPlaceholder = computed(() => !this._datePicker.hasDate());

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

@@ -36,12 +36,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover
-			sideOffset="5"
-			[state]="_popoverState()"
-			(stateChanged)="_popoverState.set($event)"
-			(closed)="_onTouched?.()"
-		>
+		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -122,6 +117,11 @@ export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAcces
 	protected _onChange?: ChangeFn<T>;
 	protected _onTouched?: TouchFn;
 
+	protected _onStateChange(state: BrnOverlayState) {
+		this._popoverState.set(state);
+		if (state === 'closed') this._onTouched?.();
+	}
+
 	protected _handleChange(value: T | undefined) {
 		if (this._disabled()) return;
 		this.updateDate(value);

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

@@ -42,12 +42,7 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover
-			sideOffset="5"
-			[state]="_popoverState()"
-			(stateChanged)="_popoverState.set($event)"
-			(closed)="_onClose(); _onTouched?.()"
-		>
+		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -130,6 +125,14 @@ export class HlmDateRangePicker<T> implements HlmDatePickerBase<T>, ControlValue
 	protected _onChange?: ChangeFn<[T, T] | null>;
 	protected _onTouched?: TouchFn;
 
+	protected _onStateChange(state: BrnOverlayState) {
+		this._popoverState.set(state);
+		if (state === 'closed') {
+			this._onClose();
+			this._onTouched?.();
+		}
+	}
+
 	protected _handleStartDayChange(value: T | undefined) {
 		this._start.set(value);
 	}

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

@@ -17,6 +17,7 @@ import { HlmDropdownMenuTrigger } from './lib/hlm-dropdown-menu-trigger';
 export * from './lib/hlm-dropdown-menu';
 export * from './lib/hlm-dropdown-menu-checkbox';
 export * from './lib/hlm-dropdown-menu-checkbox-indicator';
+export * from './lib/hlm-dropdown-menu-focus-on-hover';
 export * from './lib/hlm-dropdown-menu-group';
 export * from './lib/hlm-dropdown-menu-item';
 export * from './lib/hlm-dropdown-menu-item-sub-indicator';

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

@@ -2,6 +2,7 @@ import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemSelectable } from '@angular/cdk/menu';
 import { Directive, booleanAttribute, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
 
 /** @internal. Use HlmDropdownMenuCheckbox instead. */
 @Directive({
@@ -28,6 +29,7 @@ export class HlmDropdownMenuCheckboxCdk extends CdkMenuItemCheckbox {
 			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
 			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
+		HlmDropdownMenuFocusOnHover,
 	],
 	host: {
 		'data-slot': 'dropdown-menu-checkbox-item',

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

@@ -0,0 +1,35 @@
+import { InputModalityDetector } from '@angular/cdk/a11y';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { Directive, inject } from '@angular/core';
+
+/**
+ * @internal
+ * Moves DOM focus to the hovered menu item. CDK menus only move focus with the keyboard, so on a pointer
+ * the highlight would otherwise stay on the last keyboard-focused item (leaving two rows highlighted) and,
+ * when a submenu closes, focus would fall to <body>, the menu stack would report no focus, and the whole
+ * dropdown would collapse. Following the pointer with focus (Radix/shadcn behaviour) keeps a single
+ * highlight and keeps focus inside the menu stack. setActiveMenuItem also syncs the key manager so keyboard
+ * navigation continues from the hovered item.
+ *
+ * Applied as a host directive on every dropdown item type (item, checkbox, radio, sub-trigger).
+ */
+@Directive({
+	selector: '[hlmDropdownMenuFocusOnHover]',
+	host: {
+		'(mouseenter)': '_focusOnHover()',
+	},
+})
+export class HlmDropdownMenuFocusOnHover {
+	private readonly _cdkMenuItem = inject(CdkMenuItem, { self: true });
+	private readonly _parentMenu = inject(CdkMenu, { optional: true });
+	private readonly _inputModality = inject(InputModalityDetector);
+
+	protected _focusOnHover(): void {
+		// Only skip synthetic hovers from touch taps; every real hover (mouse, or keyboard-then-hover,
+		// which leaves the modality as 'keyboard') should move focus to keep a single highlight.
+		if (this._inputModality.mostRecentModality === 'touch' || this._cdkMenuItem.disabled) {
+			return;
+		}
+		this._parentMenu?.setActiveMenuItem(this._cdkMenuItem);
+	}
+}

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

@@ -2,6 +2,7 @@ import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItem } from '@angular/cdk/menu';
 import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
 
 @Directive({
 	selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
@@ -11,6 +12,7 @@ import { classes } from '<%- importAlias %>/utils';
 			inputs: ['cdkMenuItemDisabled: disabled'],
 			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
+		HlmDropdownMenuFocusOnHover,
 	],
 	host: {
 		'data-slot': 'dropdown-menu-item',

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

@@ -2,6 +2,7 @@ import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItem, CdkMenuItemRadio, CdkMenuItemSelectable } from '@angular/cdk/menu';
 import { Directive, booleanAttribute, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
 
 /** @internal. Use HlmDropdownMenuRadio instead. */
 @Directive({
@@ -28,6 +29,7 @@ export class HlmDropdownMenuRadioCdk extends CdkMenuItemRadio {
 			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
 			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
+		HlmDropdownMenuFocusOnHover,
 	],
 	host: {
 		'data-slot': 'dropdown-menu-radio-item',

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

@@ -1,12 +1,12 @@
 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 { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import { createMenuPosition, MENU_SIDE, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
 
 @Directive({
 	selector: '[hlmDropdownMenuSubTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuSubTrigger) }],
 	hostDirectives: [
 		{
 			directive: CdkMenuTrigger,
@@ -26,14 +26,11 @@ export class HlmDropdownMenuSubTrigger {
 	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),
-			),
-		);
+		// CDK sets transform-origin on the submenu content from the resolved position; the content reads it
+		// to animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+		// (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+			'[data-slot="dropdown-menu-sub"]';
 
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();

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

@@ -1,6 +1,7 @@
 import { CdkMenu } from '@angular/cdk/menu';
-import { Directive, inject, signal } from '@angular/core';
+import { Directive, ElementRef, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { deriveMenuSideFromTransformOrigin, MENU_SIDE, type MenuSide } from '@spartan-ng/brain/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -14,12 +15,15 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmDropdownMenuSub {
 	private readonly _host = inject(CdkMenu);
+	private readonly _elementRef = inject(ElementRef<HTMLElement>);
+	// The sub-trigger provides its configured side; CDK parents this content's injector under it.
+	private readonly _menuSide = inject(MENU_SIDE, { optional: true });
 
 	protected readonly _state = signal('open');
-	protected readonly _side = signal('top');
+	protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'right');
 
 	constructor() {
-		this.setSideWithDarkMagic();
+		this.setSideFromTransformOrigin();
 		// this is a best effort, but does not seem to work currently
 		// 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'));
@@ -27,29 +31,11 @@ export class HlmDropdownMenuSub {
 		classes(() => 'spartan-dropdown-menu-sub-content w-auto');
 	}
 
-	private setSideWithDarkMagic() {
-		/**
-		 * This is an ugly workaround to at least figure out the correct side of where a submenu
-		 * will appear and set the attribute to the host accordingly
-		 *
-		 * First of all we take advantage of the menu stack not being aware of the root
-		 * object immediately after it is added. This code executes before the root element is added,
-		 * which means the stack is still empty and the peek method returns undefined.
-		 */
-		const isRoot = this._host.menuStack.peek() === undefined;
+	private setSideFromTransformOrigin() {
+		const side = this._menuSide?.side() ?? 'right';
+		// CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
 		setTimeout(() => {
-			// our menu trigger directive leaves the last position used for use immediately after opening
-			// we can access it here and determine the correct side.
-			// eslint-disable-next-line
-			const ps = (this._host as any)._parentTrigger._spartanLastPosition;
-			if (!ps) {
-				// if we have no last position we default to the most likely option
-				// I hate that we have to do this and hope we can revisit soon and improve
-				this._side.set(isRoot ? 'top' : 'left');
-				return;
-			}
-			const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
-			this._side.set(side);
+			this._side.set(deriveMenuSideFromTransformOrigin(this._elementRef.nativeElement.style.transformOrigin, side));
 		});
 	}
 }

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

@@ -1,11 +1,11 @@
 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 { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import { createMenuPosition, MENU_SIDE, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
 import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
 
 @Directive({
 	selector: '[hlmDropdownMenuTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuTrigger) }],
 	hostDirectives: [
 		{
 			directive: CdkMenuTrigger,
@@ -25,17 +25,10 @@ export class HlmDropdownMenuTrigger {
 	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
 
 	constructor() {
-		// once the trigger opens we wait until the next tick and then grab the last position
-		// used to position the menu. we store this in our trigger which the brnMenu directive has
-		// access to through DI
-		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),
-			),
-		);
+		// CDK sets transform-origin on the menu content from the resolved position; the content reads it to
+		// animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+		// (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector = '[data-slot="dropdown-menu"]';
 
 		effect(() => {
 			this._cdkTrigger.menuPosition = this._menuPosition();