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

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

@@ -1,21 +1,19 @@
 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: 'button[hlmSidebarMenuAction]',
 	host: {
 		'data-slot': 'sidebar-menu-action',
 		'data-sidebar': 'menu-action',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuAction {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly showOnHover = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+
+	constructor() {
+		classes(() => [
 			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
 			// Increases the hit area of the button on mobile.
 			'after:absolute after:-inset-2 after:md:hidden',
@@ -25,7 +23,6 @@ export class HlmSidebarMenuAction {
 			'group-data-[collapsible=icon]:hidden',
 			this.showOnHover() &&
 				'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,26 +1,22 @@
-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: '[hlmSidebarMenuBadge],hlm-sidebar-menu-badge',
 	host: {
 		'data-slot': 'sidebar-menu-badge',
 		'data-sidebar': 'menu-badge',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuBadge {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
 			'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
 			'peer-data-[size=sm]/menu-button:top-1',
 			'peer-data-[size=default]/menu-button:top-1.5',
 			'peer-data-[size=lg]/menu-button:top-2.5',
 			'group-data-[collapsible=icon]:hidden',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -2,9 +2,8 @@ import { type BooleanInput } from '@angular/cdk/coercion';
 import { booleanAttribute, computed, Directive, inject, input } from '@angular/core';
 import { BrnTooltipTrigger, provideBrnTooltipDefaultOptions } from '@spartan-ng/brain/tooltip';
 import { DEFAULT_TOOLTIP_CONTENT_CLASSES } from '<%- importAlias %>/tooltip';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
 import { HlmSidebarService } from './hlm-sidebar.service';
 
 const sidebarMenuButtonVariants = cva(
@@ -51,7 +50,6 @@ const sidebarMenuButtonVariants = cva(
 		'data-sidebar': 'menu-button',
 		'[attr.data-size]': 'size()',
 		'[attr.data-active]': 'isActive()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuButton {
@@ -60,12 +58,12 @@ export class HlmSidebarMenuButton {
 	public readonly variant = input<'default' | 'outline'>('default');
 	public readonly size = input<'default' | 'sm' | 'lg'>('default');
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _isTooltipHidden = computed(
 		() => this._sidebarService.state() !== 'collapsed' || this._sidebarService.isMobile(),
 	);
-	protected readonly _computedClass = computed(() =>
-		hlm(sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }), this.userClass()),
-	);
+
+	constructor() {
+		classes(() => sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }));
+	}
 }

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

@@ -1,16 +1,15 @@
-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: 'li[hlmSidebarMenuItem]',
 	host: {
 		'data-slot': 'sidebar-menu-item',
 		'data-sidebar': 'menu-item',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('group/menu-item relative', this.userClass()));
+	constructor() {
+		classes(() => 'group/menu-item relative');
+	}
 }

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

@@ -1,8 +1,7 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { HlmSkeletonImports } from '<%- importAlias %>/skeleton';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
@@ -11,7 +10,6 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'data-slot': 'sidebar-menu-skeleton',
 		'data-sidebar': 'menu-skeleton',
-		'[class]': '_computedClass()',
 		'[style.--skeleton-width]': '_width',
 	},
 	template: `
@@ -24,9 +22,9 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSidebarMenuSkeleton {
 	public readonly showIcon = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex h-8 items-center gap-2 rounded-md px-2', this.userClass()),
-	);
 	protected readonly _width = `${Math.floor(Math.random() * 40) + 50}%`;
+
+	constructor() {
+		classes(() => 'flex h-8 items-center gap-2 rounded-md px-2');
+	}
 }

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

@@ -1,7 +1,6 @@
 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: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
@@ -10,20 +9,17 @@ import type { ClassValue } from 'clsx';
 		'data-sidebar': 'menu-sub-button',
 		'[attr.data-active]': 'isActive()',
 		'[attr.data-size]': 'size()',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuSubButton {
 	public readonly size = input<'sm' | 'md'>('md');
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>_ng-icon:not([class*='text-'])]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 [&>span:last-child]:truncate`,
 			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
 			'data-[size=md]:text-sm data-[size=sm]:text-xs',
 			'group-data-[collapsible=icon]:hidden',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,16 +1,15 @@
-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: 'li[hlmSidebarMenuSubItem]',
 	host: {
 		'data-slot': 'sidebar-menu-sub-item',
 		'data-sidebar': 'menu-sub-item',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuSubItem {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('group/menu-sub-item relative', this.userClass()));
+	constructor() {
+		classes(() => 'group/menu-sub-item relative');
+	}
 }

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

@@ -1,22 +1,18 @@
-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: 'ul[hlmSidebarMenuSub]',
 	host: {
 		'data-slot': 'sidebar-menu-sub',
 		'data-sidebar': 'menu-sub',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenuSub {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
 			'group-data-[collapsible=icon]:hidden',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 }

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

@@ -1,16 +1,15 @@
-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: 'ul[hlmSidebarMenu]',
 	host: {
 		'data-slot': 'sidebar-menu',
 		'data-sidebar': 'menu',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarMenu {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex w-full min-w-0 flex-col gap-1', this.userClass()));
+	constructor() {
+		classes(() => 'flex w-full min-w-0 flex-col gap-1');
+	}
 }

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

@@ -1,6 +1,5 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, inject, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Directive({
@@ -10,7 +9,6 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 		'data-slot': 'sidebar-rail',
 		'[attr.aria-label]': 'ariaLabel()',
 		tabindex: '-1',
-		'[class]': '_computedClass()',
 		'(click)': 'onClick()',
 	},
 })
@@ -19,18 +17,16 @@ export class HlmSidebarRail {
 
 	public readonly ariaLabel = input<string>('Toggle Sidebar', { alias: 'aria-label' });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
+	constructor() {
+		classes(() => [
 			'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
 			'group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize',
 			'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
 			'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
 			'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
 			'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-			this.userClass(),
-		),
-	);
+		]);
+	}
 
 	protected onClick(): void {
 		this._sidebarService.toggleSidebar();

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

@@ -1,7 +1,6 @@
-import { computed, Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { HlmSeparator } from '<%- importAlias %>/separator';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
@@ -9,10 +8,10 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'data-slot': 'sidebar-separator',
 		'data-sidebar': 'separator',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarSeparator {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('bg-sidebar-border mx-2 w-auto', this.userClass()));
+	constructor() {
+		classes(() => 'bg-sidebar-border mx-2 w-auto');
+	}
 }

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

@@ -1,13 +1,11 @@
-import { computed, Directive, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
 	host: {
 		'data-slot': 'sidebar-wrapper',
-		'[class]': '_computedClass()',
 		'[style.--sidebar-width]': 'sidebarWidth()',
 		'[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
 	},
@@ -15,11 +13,10 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 export class HlmSidebarWrapper {
 	private readonly _config = injectHlmSidebarConfig();
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', this.userClass()),
-	);
-
 	public readonly sidebarWidth = input<string>(this._config.sidebarWidth);
 	public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
+
+	constructor() {
+		classes(() => 'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full');
+	}
 }

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

@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
 import { BrnSheetImports } from '@spartan-ng/brain/sheet';
 import { HlmSheetImports } from '<%- importAlias %>/sheet';
-import { hlm } from '<%- importAlias %>/utils';
+import { classes, hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
@@ -13,7 +13,6 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[attr.data-slot]': '_dataSlot()',
-		'[class]': '_computedClass()',
 		'[attr.data-state]': '_dataState()',
 		'[attr.data-collapsible]': '_dataCollapsible()',
 		'[attr.data-variant]': '_dataVariant()',
@@ -63,8 +62,6 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 export class HlmSidebar {
 	protected readonly _sidebarService = inject(HlmSidebarService);
 	private readonly _config = injectHlmSidebarConfig();
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly sidebarWidthMobile = input<string>(this._config.sidebarWidthMobile);
 
 	public readonly side = input<'left' | 'right'>('left');
@@ -96,16 +93,6 @@ export class HlmSidebar {
 		),
 	);
 
-	protected readonly _computedClass = computed(() => {
-		if (this.collapsible() === 'none') {
-			return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-[var(--sidebar-width)] flex-col', this.userClass());
-		} else if (this._sidebarService.isMobile()) {
-			return hlm(this.userClass());
-		} else {
-			return hlm('text-sidebar-foreground group peer hidden md:block', this.userClass());
-		}
-	});
-
 	protected readonly _dataSlot = computed(() => {
 		return !this._sidebarService.isMobile() ? 'sidebar' : undefined;
 	});
@@ -138,5 +125,15 @@ export class HlmSidebar {
 		effect(() => {
 			this._sidebarService.setVariant(this.variant());
 		});
+
+		classes(() => {
+			if (this.collapsible() === 'none') {
+				return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-[var(--sidebar-width)] flex-col');
+			} else if (this._sidebarService.isMobile()) {
+				return '';
+			} else {
+				return hlm('text-sidebar-foreground group peer hidden md:block');
+			}
+		});
 	}
 }

package/src/generators/ui/libs/skeleton/files/lib/hlm-skeleton.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: '[hlmSkeleton],hlm-skeleton',
 	host: {
 		'data-slot': 'skeleton',
-		'[class]': '_computedClass()',
 	},
 })
 export class HlmSkeleton {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('bg-accent block rounded-md motion-safe:animate-pulse', this.userClass()),
-	);
+	constructor() {
+		classes(() => 'bg-accent block rounded-md motion-safe:animate-pulse');
+	}
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
 	BrnSlider,
 	BrnSliderRange,
@@ -7,8 +7,7 @@ import {
 	BrnSliderTrack,
 	injectBrnSlider,
 } from '@spartan-ng/brain/slider';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-slider, brn-slider [hlm]',
@@ -21,9 +20,6 @@ import type { ClassValue } from 'clsx';
 			outputs: ['valueChange'],
 		},
 	],
-	host: {
-		'[class]': '_computedClass()',
-	},
 	template: `
 		<div brnSliderTrack class="bg-muted relative h-1.5 w-full grow overflow-hidden rounded-full">
 			<div class="bg-primary absolute h-full" brnSliderRange></div>
@@ -49,12 +45,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSlider {
 	protected readonly _slider = injectBrnSlider();
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'relative flex w-full touch-none items-center select-none',
-			this._slider.mutableDisabled() ? 'opacity-40' : '',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(() => 'relative flex w-full touch-none items-center select-none');
+	}
 }

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

@@ -1,8 +1,7 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideLoader } from '@ng-icons/lucide';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-spinner',
@@ -12,10 +11,9 @@ import type { ClassValue } from 'clsx';
 	host: {
 		role: 'status',
 		'[attr.aria-label]': 'ariaLabel()',
-		class: 'inline-flex',
 	},
 	template: `
-		<ng-icon [name]="icon()" [class]="_computedClass()" />
+		<ng-icon [name]="icon()" />
 	`,
 })
 export class HlmSpinner {
@@ -28,6 +26,7 @@ export class HlmSpinner {
 	/** Aria label for the spinner for accessibility. */
 	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-base motion-safe:animate-spin', this.userClass()));
+	constructor() {
+		classes(() => 'inline-flex size-fit text-base motion-safe:animate-spin');
+	}
 }

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

@@ -1,20 +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: 'brn-switch-thumb[hlm],[hlmSwitchThumb]',
-	host: {
-		'[class]': '_computedClass()',
-	},
 })
 export class HlmSwitchThumb {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-			this.userClass(),
-		),
-	);
+	constructor() {
+		classes(
+			() =>
+				'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+		);
+	}
 }