@spartan-ng/cli 0.0.1-alpha.583 → 0.0.1-alpha.585

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

@@ -1,17 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDialogHeader],hlm-dialog-header',
 	host: {
 		'data-slot': 'dialog-header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDialogHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex flex-col gap-2 text-center sm:text-left');
+	}
 }

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

@@ -1,8 +1,8 @@
-import { Directive, computed, effect, input, untracked } from '@angular/core';
+import { computed, Directive, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
 import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
 import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 export const hlmDialogOverlayClass =
 	'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50';

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

@@ -1,17 +1,16 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDialogTitle]',
 	hostDirectives: [BrnDialogTitle],
 	host: {
 		'data-slot': 'dialog-title',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDialogTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-lg leading-none font-semibold', this.userClass()));
+	constructor() {
+		classes(() => 'text-lg leading-none font-semibold');
+	}
 }

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

@@ -1,27 +1,22 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-dropdown-menu-checkbox-indicator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-icon class="text-base" name="lucideCheck" />
 	`,
 })
 export class HlmDropdownMenuCheckboxIndicator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
+		);
+	}
 }

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

@@ -1,8 +1,7 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
-import { Directive, booleanAttribute, computed, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuCheckbox]',
@@ -17,20 +16,17 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'dropdown-menu-checkbox-item',
 		'[attr.data-disabled]': 'disabled() ? "" : null',
 		'[attr.data-checked]': 'checked() ? "" : null',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuCheckbox {
 	private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox);
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			this.userClass(),
-		),
-	);
-
 	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
 	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		);
+	}
 }

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

@@ -1,17 +1,16 @@
 import { CdkMenuGroup } from '@angular/cdk/menu';
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
 	hostDirectives: [CdkMenuGroup],
 	host: {
 		'data-slot': 'dropdown-menu-group',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('block', this.userClass()));
+	constructor() {
+		classes(() => 'block');
+	}
 }

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

@@ -1,22 +1,19 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-dropdown-menu-item-sub-indicator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-icon name="lucideChevronRight" class="text-base" />
 	`,
 })
 export class HlmDropdownMenuItemSubIndicator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('ml-auto size-4', this.userClass()));
+	constructor() {
+		classes(() => 'ml-auto size-4');
+	}
 }

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

@@ -1,8 +1,7 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItem } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmDropdownMenuItem]',
@@ -15,7 +14,6 @@ import type { ClassValue } from 'clsx';
 	],
 	host: {
 		'data-slot': 'dropdown-menu-item',
-		'[class]': '_computedClass()',
 		'[disabled]': 'disabled() || null',
 		'[attr.data-disabled]': 'disabled() ? "" : null',
 		'[attr.data-variant]': 'variant()',
@@ -23,14 +21,6 @@ import type { ClassValue } from 'clsx';
 	},
 })
 export class HlmDropdownMenuItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			"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",
-			this.userClass(),
-		),
-	);
-
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	public readonly variant = input<'default' | 'destructive'>('default');
@@ -38,4 +28,11 @@ export class HlmDropdownMenuItem {
 	public readonly inset = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
+
+	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",
+		);
+	}
 }

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

@@ -1,21 +1,18 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
 	host: {
 		'data-slot': 'dropdown-menu-label',
-		'[class]': '_computedClass()',
 		'[attr.data-inset]': 'inset() ? "" : null',
 	},
 })
 export class HlmDropdownMenuLabel {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', this.userClass()),
-	);
+	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,

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

@@ -1,27 +1,22 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircle } from '@ng-icons/lucide';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-dropdown-menu-radio-indicator',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideCircle })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<ng-icon name="lucideCircle" class="text-[0.5rem] *:[svg]:fill-current" />
 	`,
 })
 export class HlmDropdownMenuRadioIndicator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
+		);
+	}
 }

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

@@ -1,8 +1,7 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkMenuItemRadio } from '@angular/cdk/menu';
-import { Directive, booleanAttribute, computed, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuRadio]',
@@ -17,20 +16,17 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'dropdown-menu-radio-item',
 		'[attr.data-disabled]': 'disabled() ? "" : null',
 		'[attr.data-checked]': 'checked() ? "" : null',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuRadio {
 	private readonly _cdkMenuItem = inject(CdkMenuItemRadio);
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-			this.userClass(),
-		),
-	);
-
 	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
 	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		);
+	}
 }

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

@@ -1,15 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
 	host: {
 		'data-slot': 'dropdown-menu-separator',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 my-1 block h-px', this.userClass()));
+	constructor() {
+		classes(() => 'bg-border -mx-1 my-1 block h-px');
+	}
 }

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

@@ -1,17 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
 	host: {
 		'data-slot': 'dropdown-menu-shortcut',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuShortcut {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground ml-auto text-xs tracking-widest');
+	}
 }

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

@@ -1,8 +1,7 @@
 import { CdkMenu } from '@angular/cdk/menu';
-import { computed, Directive, inject, input, signal } from '@angular/core';
+import { Directive, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
@@ -11,7 +10,6 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'dropdown-menu-sub',
 		'[attr.data-state]': '_state()',
 		'[attr.data-side]': '_side()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmDropdownMenuSub {
@@ -20,19 +18,16 @@ export class HlmDropdownMenuSub {
 	protected readonly _state = signal('open');
 	protected readonly _side = signal('top');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'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',
-			this.userClass(),
-		),
-	);
-
 	constructor() {
 		this.setSideWithDarkMagic();
 		// 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'));
+
+		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',
+		);
 	}
 
 	private setSideWithDarkMagic() {

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

@@ -1,9 +1,8 @@
 import { type NumberInput } from '@angular/cdk/coercion';
 import { CdkMenu } from '@angular/cdk/menu';
-import { computed, Directive, inject, input, numberAttribute, signal } from '@angular/core';
+import { Directive, inject, input, numberAttribute, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmDropdownMenu],hlm-dropdown-menu',
@@ -12,7 +11,6 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'dropdown-menu',
 		'[attr.data-state]': '_state()',
 		'[attr.data-side]': '_side()',
-		'[class]': '_computedClass()',
 		'[style.--side-offset]': 'sideOffset()',
 	},
 })
@@ -22,17 +20,14 @@ export class HlmDropdownMenu {
 	protected readonly _state = signal('open');
 	protected readonly _side = signal('top');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'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',
-			this.userClass(),
-		),
-	);
-
 	public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
 
 	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',
+		);
+
 		this.setSideWithDarkMagic();
 		// 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

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

@@ -1,18 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmEmptyContent],hlm-empty-content',
 	host: {
 		'data-slot': 'empty-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmptyContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance');
+	}
 }

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

@@ -1,21 +1,16 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmEmptyDescription]',
 	host: {
 		'data-slot': 'empty-description',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmptyDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() => 'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+		);
+	}
 }

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

@@ -1,18 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmEmptyHeader],hlm-empty-header',
 	host: {
 		'data-slot': 'empty-header',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmptyHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('flex max-w-sm flex-col items-center gap-2 text-center', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'flex max-w-sm flex-col items-center gap-2 text-center');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { cva, VariantProps } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const emptyMediaVariants = cva(
 	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
@@ -24,14 +23,12 @@ export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
 	selector: '[hlmEmptyMedia],hlm-empty-media',
 	host: {
 		'data-slot': 'empty-media',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmptyMedia {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly variant = input<EmptyMediaVariants['variant']>();
+	constructor() {
+		classes(() => emptyMediaVariants({ variant: this.variant() }));
+	}
 
-	protected readonly _computedClass = computed(() =>
-		hlm(emptyMediaVariants({ variant: this.variant() }), this.userClass()),
-	);
+	public readonly variant = input<EmptyMediaVariants['variant']>();
 }

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

@@ -1,16 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmEmptyTitle]',
 	host: {
 		'data-slot': 'empty-title',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmptyTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('text-lg font-medium tracking-tight', this.userClass()));
+	constructor() {
+		classes(() => 'text-lg font-medium tracking-tight');
+	}
 }

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

@@ -1,21 +1,17 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmEmpty],hlm-empty',
 	host: {
 		'data-slot': 'empty',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmEmpty {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+		);
+	}
 }