@spartan-ng/cli 0.0.1-alpha.337 → 0.0.1-alpha.339

package/src/generators/ui/libs/ui-checkbox-helm/files/lib/hlm-checkbox.component.ts.template

@@ -27,14 +27,19 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	imports: [BrnCheckboxComponent, HlmCheckboxCheckIconComponent],
 	template: `
 		<brn-checkbox
+			[id]="id()"
+			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="_checked()"
+			[disabled]="disabled()"
+			[required]="required()"
+			[aria-label]="ariaLabel()"
+			[aria-labelledby]="ariaLabelledby()"
+			[aria-describedby]="ariaDescribedby()"
 			(changed)="_handleChange()"
 			(touched)="_onTouched()"
-			[disabled]="_disabled()"
-			[id]="id"
 		>
-			<hlm-checkbox-checkicon [class]="_checkIconClass()" [iconName]="_checkIconName()" />
+			<hlm-checkbox-checkicon [class]="checkIconClass()" [iconName]="checkIconName()" />
 		</brn-checkbox>
 	`,
 	host: {
@@ -47,33 +52,41 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 })
 export class HlmCheckboxComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'group inline-flex border border-foreground shrink-0 cursor-pointer items-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' +
 				' focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-background',
-			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
-			this._userClass(),
+			this.userClass(),
+			this.disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
-	protected readonly _checkIconName = signal<string>('lucideCheck');
-	@Input()
-	set checkIconName(checkIconName: string) {
-		this._checkIconName.set(checkIconName);
-	}
+	/** Used to set the id on the underlying brn element. */
+	public readonly id = input<string | null>(null);
 
-	protected readonly _checkIconClass = signal<string>('');
-	@Input()
-	set checkIconClass(checkIconName: string) {
-		this._checkIconClass.set(checkIconName);
-	}
+	/** Used to set the aria-label attribute on the underlying brn element. */
+	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	/** Used to set the aria-labelledby attribute on the underlying brn element. */
+	public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
+
+	/** Used to set the aria-describedby attribute on the underlying brn element. */
+	public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
+
+	public readonly name = input<string | null>(null);
+	public readonly disabled = input(false, { transform: booleanAttribute });
+	public readonly required = input(false, { transform: booleanAttribute });
+
+	// icon inputs
+	public readonly checkIconName = input<string>('lucideCheck');
+	public readonly checkIconClass = input<string>('');
 
 	@Output()
 	public changed = new EventEmitter<boolean>();
 
 	protected _handleChange(): void {
-		if (this._disabled()) return;
+		if (this.disabled()) return;
 
 		const previousChecked = this._checked();
 		this._checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
@@ -81,34 +94,13 @@ export class HlmCheckboxComponent {
 		this.changed.emit(!previousChecked);
 	}
 
+	// TODO should be changed to new model input when updated to Angular 17.2
 	protected _checked = signal<boolean | 'indeterminate'>(false);
 	@Input({ transform: indeterminateBooleanAttribute })
 	set checked(value: boolean | 'indeterminate') {
 		this._checked.set(value);
 	}
 
-	protected readonly _disabled = signal(false);
-	@Input({ transform: booleanAttribute })
-	set disabled(value: boolean) {
-		this._disabled.set(value);
-	}
-
-	/** Used to set the id on the underlying brn element. */
-	@Input()
-	id: string | null = null;
-
-	/** Used to set the aria-label attribute on the underlying brn element. */
-	@Input('aria-label')
-	ariaLabel: string | null = null;
-
-	/** Used to set the aria-labelledby attribute on the underlying brn element. */
-	@Input('aria-labelledby')
-	ariaLabelledby: string | null = null;
-
-	/** Used to set the aria-describedby attribute on the underlying brn element. */
-	@Input('aria-describedby')
-	ariaDescribedby: string | null = null;
-
 	/** CONROL VALUE ACCESSOR */
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.directive.ts.template

@@ -17,6 +17,6 @@ export class HlmCommandDialogCloseButtonDirective {
 		this._hlmBtn.variant = 'ghost';
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('!p-1 !h-5 !w-5', this.userClass()));
 }

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

@@ -17,11 +17,11 @@ export class HlmCommandDialogDirective {
 	private _renderer = inject(Renderer2);
 	private _element = inject(ElementRef);
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'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-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%]',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 

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

@@ -10,6 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandEmptyDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('py-6 text-center text-sm', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('py-6 text-center text-sm', this.userClass()));
 }

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

@@ -10,13 +10,13 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandGroupDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'block [&[cmdk-hidden="true"]]:hidden\n' +
 				'[&_.cmdk-group-label]:px-2 [&_.cmdk-group-label]:py-1.5 [&_.cmdk-group-label]:text-xs [&_.cmdk-group-label]:font-medium [&_.cmdk-group-label]:text-muted-foreground\n' +
 				'[&_.cmdk-group-content]:flex [&_.cmdk-group-content]:flex-col [&_.cmdk-group-content]:flex-col overflow-hidden p-1 text-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -11,8 +11,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandInputWrapperComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', this._userClass()),
+		hlm('flex space-x-2 items-center border-b border-border px-3 [&_hlm-icon]:h-5 [&_hlm-icon]:w-5', this.userClass()),
 	);
 }

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

@@ -10,12 +10,12 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandInputDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected _computedClass = computed(() =>
 		hlm(
 			'h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item-icon.directive.ts.template

@@ -18,6 +18,6 @@ export class HlmCommandItemIconDirective {
 		this._menuIcon.size = 'none';
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this.userClass()));
 }

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

@@ -14,7 +14,7 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandItemDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected _computedClass = computed(() =>
 		hlm(
@@ -22,7 +22,7 @@ export class HlmCommandItemDirective {
 				'aria-selected:bg-accent aria-selected:text-accent-foreground\n' +
 				'hover:bg-accent/50\n' +
 				'disabled:pointer-events-none disabled:opacity-50',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -10,6 +10,6 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandListDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this.userClass()));
 }

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

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandShortcutComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this._userClass()),
+		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this.userClass()),
 	);
 }

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmCommandDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'flex h-full w-full flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/index.ts.template

@@ -17,6 +17,7 @@ export * from './lib/hlm-dialog-header.component';
 export * from './lib/hlm-dialog-overlay.directive';
 export * from './lib/hlm-dialog-title.directive';
 export * from './lib/hlm-dialog.component';
+export * from './lib/hlm-dialog.service';
 
 export const HlmDialogImports = [
 	HlmDialogComponent,

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

@@ -10,11 +10,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogCloseDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, signal } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from '@angular/core';
 import { lucideX } from '@ng-icons/lucide';
-import { hlm, injectExposesStateProvider } from '@spartan-ng/ui-core';
-import { BrnDialogCloseDirective } from '@spartan-ng/ui-dialog-brain';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnDialogCloseDirective, BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/ui-dialog-brain';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
 import { ClassValue } from 'clsx';
 import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
@@ -9,31 +10,42 @@ import { HlmDialogCloseDirective } from './hlm-dialog-close.directive';
 @Component({
 	selector: 'hlm-dialog-content',
 	standalone: true,
-	imports: [BrnDialogCloseDirective, HlmDialogCloseDirective, HlmIconComponent],
+	imports: [NgComponentOutlet, BrnDialogCloseDirective, HlmDialogCloseDirective, HlmIconComponent],
 	providers: [provideIcons({ lucideX })],
 	host: {
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
 	template: `
-		<ng-content />
+		@if (component) {
+			<ng-container [ngComponentOutlet]="component" />
+		} @else {
+			<ng-content />
+		}
+
 		<button brnDialogClose hlm>
 			<span class="sr-only">Close</span>
-			<hlm-icon class="flex h-4 w-4" size="100%" name="lucideX" />
+			<hlm-icon class="flex h-4 w-4" size="none" name="lucideX" />
 		</button>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 })
 export class HlmDialogContentComponent {
-	private readonly _statusProvider = injectExposesStateProvider({ host: true });
-	public readonly state = this._statusProvider.state ?? signal('closed').asReadonly();
+	private readonly _dialogRef = inject(BrnDialogRef);
+	private readonly _dialogContext = injectBrnDialogContext({ optional: true });
+
+	public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
+
+	public readonly component = this._dialogContext?.['$component'];
+	private readonly _dynamicComponentClass = this._dialogContext?.['$dynamicComponentClass'];
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
-			this._userClass(),
+			this.userClass(),
+			this._dynamicComponentClass,
 		),
 	);
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-description.directive.ts.template

@@ -12,6 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnDialogDescriptionDirective],
 })
 export class HlmDialogDescriptionDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-footer.component.ts.template

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogFooterComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this._userClass()),
+		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass()),
 	);
 }

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

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmDialogHeaderComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex flex-col space-y-1.5 text-center sm:text-left', this._userClass()),
+		hlm('flex flex-col space-y-1.5 text-center sm:text-left', this.userClass()),
 	);
 }

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

@@ -2,6 +2,9 @@ import { computed, Directive, effect, input } from '@angular/core';
 import { hlm, injectCustomClassSettable } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
+export const hlmDialogOverlayClass =
+	'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
+
 @Directive({
 	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',
 	standalone: true,
@@ -9,15 +12,12 @@ import { ClassValue } from 'clsx';
 export class HlmDialogOverlayDirective {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-			this._userClass(),
-		),
-	);
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(hlmDialogOverlayClass, this.userClass()));
 
 	constructor() {
-		effect(() => this._classSettable?.setClassToCustomElement(this._computedClass()));
+		effect(() => {
+			this._classSettable?.setClassToCustomElement(this._computedClass());
+		});
 	}
 }

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

@@ -12,8 +12,6 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnDialogTitleDirective],
 })
 export class HlmDialogTitleDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('text-lg font-semibold leading-none tracking-tight', this._userClass()),
-	);
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('text-lg font-semibold leading-none tracking-tight', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
-import { BrnDialogComponent, BrnDialogOverlayComponent, provideBrnDialog } from '@spartan-ng/ui-dialog-brain';
+import { BrnDialogComponent, BrnDialogOverlayComponent } from '@spartan-ng/ui-dialog-brain';
 import { HlmDialogOverlayDirective } from './hlm-dialog-overlay.directive';
 
 @Component({
@@ -7,7 +7,6 @@ import { HlmDialogOverlayDirective } from './hlm-dialog-overlay.directive';
 	standalone: true,
 	imports: [BrnDialogComponent, BrnDialogOverlayComponent, HlmDialogOverlayDirective],
 	providers: [
-		provideBrnDialog(),
 		{
 			provide: BrnDialogComponent,
 			useExisting: forwardRef(() => HlmDialogComponent),

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

@@ -0,0 +1,35 @@
+import { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable, TemplateRef } from '@angular/core';
+import {
+	BrnDialogOptions,
+	BrnDialogService,
+	cssClassesToArray,
+	DEFAULT_BRN_DIALOG_OPTIONS,
+} from '@spartan-ng/ui-dialog-brain';
+import { HlmDialogContentComponent } from './hlm-dialog-content.component';
+import { hlmDialogOverlayClass } from './hlm-dialog-overlay.directive';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type HlmDialogOptions<DialogContext = any> = BrnDialogOptions & {
+	contentClass?: string;
+	context?: DialogContext;
+};
+
+@Injectable({
+	providedIn: 'root',
+})
+export class HlmDialogService {
+	private readonly _brnDialogService = inject(BrnDialogService);
+
+	public open(component: ComponentType<unknown> | TemplateRef<unknown>, options?: Partial<HlmDialogOptions>) {
+		options = {
+			...DEFAULT_BRN_DIALOG_OPTIONS,
+			closeDelay: 100,
+			...(options ?? {}),
+			backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''}`),
+			context: { ...options?.context, $component: component, $dynamicComponentClass: options?.contentClass },
+		};
+
+		return this._brnDialogService.open(HlmDialogContentComponent, undefined, options.context, options);
+	}
+}

package/src/generators/ui/libs/ui-hover-card-helm/files/lib/hlm-hover-card-content.component.ts.template

@@ -16,8 +16,6 @@ export class HlmHoverCardContentComponent {
 	private readonly _renderer = inject(Renderer2);
 	private readonly _element = inject(ElementRef);
 
-	private _inputs: ClassValue = '';
-
 	public readonly state = injectExposesStateProvider({ host: true }).state ?? signal('closed').asReadonly();
 	public readonly side = injectExposedSideProvider({ host: true }).side ?? signal('bottom').asReadonly();
 
@@ -28,12 +26,12 @@ export class HlmHoverCardContentComponent {
 		});
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 			'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',
-			this._inputs,
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.component.ts.template

@@ -81,11 +81,11 @@ export class HlmIconComponent implements OnDestroy {
 
 	protected readonly _computedClass = computed(() => {
 		const size: IconSize = this._size();
+		const hostClasses = this._hostClasses();
+		const userCls = this.userCls();
 		const variant = isDefinedSize(size) ? size : 'none';
-		const hostClasses =
-			variant === 'none' ? this._hostClasses().replace(TAILWIND_H_W_PATTERN, '') : this._hostClasses();
-
-		return hlm(iconVariants({ variant }), this.userCls(), hostClasses);
+		const classes = variant === 'none' && size === 'none' ? hostClasses : hostClasses.replace(TAILWIND_H_W_PATTERN, '');
+		return hlm(iconVariants({ variant }), userCls, classes);
 	});
 
 	constructor() {

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

@@ -17,6 +17,6 @@ export type InputErrorVariants = VariantProps<typeof inputErrorVariants>;
 	},
 })
 export class HlmInputErrorDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(inputErrorVariants(), this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm(inputErrorVariants(), this.userClass()));
 }

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

@@ -45,8 +45,8 @@ export class HlmInputDirective {
 		this._error.set(value);
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm(inputVariants({ size: this._size(), error: this._error() }), this._userClass()),
+		hlm(inputVariants({ size: this._size(), error: this._error() }), this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-label-helm/files/lib/hlm-label.directive.ts.template

@@ -45,7 +45,7 @@ export type LabelVariants = VariantProps<typeof labelVariants>;
 export class HlmLabelDirective {
 	private readonly _brn = inject(BrnLabelDirective, { host: true });
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			labelVariants({
@@ -53,7 +53,7 @@ export class HlmLabelDirective {
 				error: this._error(),
 				disabled: this._brn?.dataDisabled() ?? 'auto',
 			}),
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar-item.directive.ts.template

@@ -12,11 +12,11 @@ import { ClassValue } from 'clsx';
 	hostDirectives: [BrnMenuItemDirective],
 })
 export class HlmMenuBarItemDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar.component.ts.template

@@ -13,8 +13,8 @@ import { ClassValue } from 'clsx';
 	template: '<ng-content/>',
 })
 export class HlmMenuBarComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this._userClass()),
+		hlm('border-border flex h-10 items-center space-x-1 rounded-md border bg-background p-1', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-check.component.ts.template

@@ -18,11 +18,11 @@ import { ClassValue } from 'clsx';
 	},
 })
 export class HlmMenuItemCheckComponent {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'group-[.checked]:opacity-100 opacity-0 absolute left-2 flex h-3.5 w-3.5 items-center justify-center',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-checkbox.directive.ts.template

@@ -18,11 +18,11 @@ import { ClassValue } from 'clsx';
 	],
 })
 export class HlmMenuItemCheckboxDirective {
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
 			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
-			this._userClass(),
+			this.userClass(),
 		),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-icon.directive.ts.template

@@ -18,6 +18,6 @@ export class HlmMenuItemIconDirective {
 		this._menuIcon.size = 'none';
 	}
 
-	private readonly _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this._userClass()));
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => hlm('mr-2 h-4 w-4', this.userClass()));
 }