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

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

@@ -1,6 +1,6 @@
-import { Directive, computed, inject } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAvatarFallback]',
@@ -8,17 +8,11 @@ import { hlm } from '<%- importAlias %>/utils';
 	hostDirectives: [
 		{
 			directive: BrnAvatarFallback,
-			inputs: ['class'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAvatarFallback {
-	private readonly _brn = inject(BrnAvatarFallback);
-
-	protected readonly _computedClass = computed(() => {
-		return hlm('bg-muted flex size-full items-center justify-center rounded-full', this._brn?.userClass());
-	});
+	constructor() {
+		classes(() => 'bg-muted flex size-full items-center justify-center rounded-full');
+	}
 }

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

@@ -1,14 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BrnAvatar } from '@spartan-ng/brain/avatar';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-avatar',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		@if (_image()?.canShow()) {
 			<ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
@@ -18,9 +14,8 @@ import type { ClassValue } from 'clsx';
 	`,
 })
 export class HlmAvatar extends BrnAvatar {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.userClass()),
-	);
+	constructor() {
+		super();
+		classes(() => 'relative flex size-8 shrink-0 overflow-hidden rounded-full');
+	}
 }

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

@@ -1,19 +1,16 @@
-import { Directive, computed, inject, input } from '@angular/core';
+import { Directive, inject } from '@angular/core';
 import { BrnAvatarImage } from '@spartan-ng/brain/avatar';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'img[hlmAvatarImage]',
 	exportAs: 'avatarImage',
 	hostDirectives: [BrnAvatarImage],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmAvatarImage {
-	public canShow = inject(BrnAvatarImage).canShow;
+	public readonly canShow = inject(BrnAvatarImage).canShow;
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('aspect-square size-full', this.userClass()));
+	constructor() {
+		classes(() => 'aspect-square size-full');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 const badgeVariants = cva(
 	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&_ng-icon]:pointer-events-none [&_ng-icon]:size-3',
@@ -27,12 +26,12 @@ export type BadgeVariants = VariantProps<typeof badgeVariants>;
 	selector: '[hlmBadge]',
 	host: {
 		'data-slot': 'badge',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmBadge {
-	protected readonly _computedClass = computed(() => hlm(badgeVariants({ variant: this.variant() }), this.userClass()));
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly variant = input<BadgeVariants['variant']>('default');
+
+	constructor() {
+		classes(() => badgeVariants({ variant: this.variant() }));
+	}
 }

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

@@ -1,15 +1,11 @@
-import { Directive, computed, 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: '[hlmBreadcrumbItem]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmBreadcrumbItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('inline-flex items-center gap-1.5', this.userClass()));
+	constructor() {
+		classes(() => 'inline-flex items-center gap-1.5');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBreadcrumbLink]',
@@ -23,14 +22,12 @@ import type { ClassValue } from 'clsx';
 			],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmBreadcrumbLink {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	constructor() {
+		classes(() => 'hover:text-foreground transition-colors');
+	}
+
 	/** The link to navigate to the page. */
 	public readonly link = input<RouterLink['routerLink']>();
-
-	protected readonly _computedClass = computed(() => hlm('hover:text-foreground transition-colors', this.userClass()));
 }

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

@@ -1,17 +1,11 @@
-import { Directive, computed, 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: '[hlmBreadcrumbList]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmBreadcrumbList {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5');
+	}
 }

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

@@ -1,6 +1,5 @@
-import { Directive, computed, 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: '[hlmBreadcrumbPage]',
@@ -8,11 +7,10 @@ import type { ClassValue } from 'clsx';
 		role: 'link',
 		'aria-disabled': 'true',
 		'aria-current': 'page',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmBreadcrumbPage {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('text-foreground font-normal', this.userClass()));
+	constructor() {
+		classes(() => 'text-foreground font-normal');
+	}
 }

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

@@ -1,8 +1,7 @@
-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({
 	// eslint-disable-next-line @angular-eslint/component-selector
@@ -13,7 +12,6 @@ import type { ClassValue } from 'clsx';
 	host: {
 		role: 'presentation',
 		'aria-hidden': 'true',
-		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-content>
@@ -22,7 +20,7 @@ import type { ClassValue } from 'clsx';
 	`,
 })
 export class HlmBreadcrumbSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:block [&_ng-icon]:size-3.5', this.userClass()));
+	constructor() {
+		classes(() => '[&_ng-icon]:block [&_ng-icon]:size-3.5');
+	}
 }

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

@@ -1,18 +1,12 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, input } from '@angular/core';
 
 @Directive({
 	selector: '[hlmBreadcrumb]',
 	host: {
 		role: 'navigation',
-		'[class]': '_computedClass()',
 		'[attr.aria-label]': 'ariaLabel()',
 	},
 })
 export class HlmBreadcrumb {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly ariaLabel = input<string>('breadcrumb', { alias: 'aria-label' });
-
-	protected readonly _computedClass = computed(() => hlm(this.userClass()));
 }

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

@@ -1,6 +1,6 @@
-import { Directive, computed, input, signal } from '@angular/core';
+import { Directive, input, signal } from '@angular/core';
 import { BrnButton } from '@spartan-ng/brain/button';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
@@ -43,7 +43,6 @@ export type ButtonVariants = VariantProps<typeof buttonVariants>;
 	hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
 	host: {
 		'data-slot': 'button',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmButton {
@@ -51,16 +50,14 @@ export class HlmButton {
 
 	private readonly _additionalClasses = signal<ClassValue>('');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(buttonVariants({ variant: this.variant(), size: this.size() }), this.userClass(), this._additionalClasses()),
-	);
-
 	public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
 
 	public readonly size = input<ButtonVariants['size']>(this._config.size);
 
+	constructor() {
+		classes(() => [buttonVariants({ variant: this.variant(), size: this.size() }), this._additionalClasses()]);
+	}
+
 	setClass(classes: string): void {
 		this._additionalClasses.set(classes);
 	}

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-separator.ts.template

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSeparator, provideBrnSeparatorConfig } from '@spartan-ng/brain/separator';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmButtonGroupSeparator],hlm-button-group-separator',
@@ -9,16 +8,13 @@ import type { ClassValue } from 'clsx';
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'data-slot': 'button-group-separator',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmButtonGroupSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px',
+		);
+	}
 }

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-text.ts.template

@@ -1,20 +1,14 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmButtonGroupText],hlm-button-group-text',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmButtonGroupText {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base",
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base",
+		);
+	}
 }

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group.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 } from 'class-variance-authority';
-import { ClassValue } from 'clsx';
 
 export const buttonGroupVariants = cva(
 	"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
@@ -25,15 +24,13 @@ export const buttonGroupVariants = cva(
 	host: {
 		'data-slot': 'button-group',
 		role: 'group',
-		'[class]': '_computedClass()',
 		'[attr.data-orientation]': 'orientation()',
 	},
 })
 export class HlmButtonGroup {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+	constructor() {
+		classes(() => buttonGroupVariants({ orientation: this.orientation() }));
+	}
 
-	protected readonly _computedClass = computed(() =>
-		hlm(buttonGroupVariants({ orientation: this.orientation() }), this.userClass()),
-	);
+	public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
 }

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

@@ -1,16 +1,11 @@
-import { Directive, computed, 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: '[hlmCardAction]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardAction {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
+	}
 }

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

@@ -1,14 +1,11 @@
-import { Directive, computed, 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: '[hlmCardContent]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardContent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('px-6', this.userClass()));
+	constructor() {
+		classes(() => 'px-6');
+	}
 }

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

@@ -1,14 +1,11 @@
-import { Directive, computed, 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: '[hlmCardDescription]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardDescription {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
+	constructor() {
+		classes(() => 'text-muted-foreground text-sm');
+	}
 }

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

@@ -1,14 +1,11 @@
-import { Directive, computed, 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: '[hlmCardFooter]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardFooter {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex items-center px-6 [.border-t]:pt-6', this.userClass()));
+	constructor() {
+		classes(() => 'flex items-center px-6 [.border-t]:pt-6');
+	}
 }

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

@@ -1,19 +1,14 @@
-import { Directive, computed, 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: '[hlmCardHeader]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardHeader {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				`@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6`,
+		);
+	}
 }

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

@@ -1,14 +1,11 @@
-import { Directive, computed, 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: '[hlmCardTitle]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCardTitle {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
+	constructor() {
+		classes(() => 'leading-none font-semibold');
+	}
 }

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

@@ -1,7 +1,6 @@
-import { Directive, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 
 export const cardVariants = cva('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', {
 	variants: {},
@@ -11,11 +10,9 @@ export type CardVariants = VariantProps<typeof cardVariants>;
 
 @Directive({
 	selector: '[hlmCard]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmCard {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(cardVariants(), this.userClass()));
+	constructor() {
+		classes(() => cardVariants());
+	}
 }

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

@@ -1,20 +1,17 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, inject } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmCarousel } from './hlm-carousel';
 
 @Directive({
 	selector: '[hlmCarouselContent],hlm-carousel-content',
 	host: {
 		'data-slot': 'carousel-content',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmCarouselContent {
 	private readonly _orientation = inject(HlmCarousel).orientation;
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.userClass()),
-	);
+	constructor() {
+		classes(() => ['flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col']);
+	}
 }

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

@@ -1,13 +1,11 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, inject } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmCarousel } from './hlm-carousel';
 
 @Directive({
 	selector: '[hlmCarouselItem],hlm-carousel-item',
 	host: {
 		'data-slot': 'carousel-item',
-		'[class]': '_computedClass()',
 		role: 'group',
 		'aria-roledescription': 'slide',
 	},
@@ -15,8 +13,7 @@ import { HlmCarousel } from './hlm-carousel';
 export class HlmCarouselItem {
 	private readonly _orientation = inject(HlmCarousel).orientation;
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('min-w-0 shrink-0 grow-0 basis-full', this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.userClass()),
-	);
+	constructor() {
+		classes(() => ['min-w-0 shrink-0 grow-0 basis-full', this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4']);
+	}
 }

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

@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, input, untracked } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, untracked } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 import { HlmCarousel } from './hlm-carousel';
 
 @Component({
@@ -26,14 +25,12 @@ import { HlmCarousel } from './hlm-carousel';
 export class HlmCarouselNext {
 	private readonly _button = inject(HlmButton);
 	protected readonly _carousel = inject(HlmCarousel);
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	private readonly _computedClass = computed(() =>
 		hlm(
 			'absolute h-8 w-8 rounded-full',
 			this._carousel.orientation() === 'horizontal'
 				? 'top-1/2 -right-12 -translate-y-1/2'
 				: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-			this.userClass(),
 		),
 	);
 	protected readonly isDisabled = () => !this._carousel.canScrollNext();