@spartan-ng/cli 0.0.1-alpha.484 → 0.0.1-alpha.486

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

@@ -11,7 +11,7 @@ export class HlmAlertDialogOverlayDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-black/80 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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 			this.userClass(),
 		),
 	);

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

@@ -1,13 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const alertDescriptionVariants = cva('text-sm [&_p]:leading-relaxed', {
-	variants: {},
-});
-export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVariants>;
-
 @Directive({
 	selector: '[hlmAlertDesc],[hlmAlertDescription]',
 	host: {
@@ -16,5 +10,10 @@ export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVaria
 })
 export class HlmAlertDescriptionDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(alertDescriptionVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+			this.userClass(),
+		),
+	);
 }

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

@@ -1,13 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const alertTitleVariants = cva('mb-1 font-medium leading-none tracking-tight', {
-	variants: {},
-});
-export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
-
 @Directive({
 	selector: '[hlmAlertTitle]',
 	host: {
@@ -16,5 +10,7 @@ export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
 })
 export class HlmAlertTitleDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm(alertTitleVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.userClass()),
+	);
 }

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

@@ -3,14 +3,14 @@ import { hlm } from '@spartan-ng/brain/core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const alertVariants = cva(
-	'relative w-full rounded-lg border border-border p-4 [&>[hlmAlertIcon]]:absolute [&>[hlmAlertIcon]]:text-foreground [&>[hlmAlertIcon]]:left-4 [&>[hlmAlertIcon]]:top-4 [&>[hlmAlertIcon]+div]:translate-y-[-3px] [&>[hlmAlertIcon]~*]:pl-7',
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>[hlmAlertIcon]]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>[hlmAlertIcon]]:gap-x-3 gap-y-0.5 items-start [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
 	{
 		variants: {
 			variant: {
-				default: 'bg-background text-foreground',
+				default: 'bg-card text-card-foreground',
 				destructive:
-					'text-destructive border-destructive/50 dark:border-destructive [&>[hlmAlertIcon]]:text-destructive',
+					'text-destructive bg-card [&>[hlmAlertIcon]]:text-current [&>[hlmAlertDescription]]:text-destructive/90 [&>[hlmAlertDesc]]:text-destructive/90',
 			},
 		},
 		defaultVariants: {
@@ -18,6 +18,7 @@ export const alertVariants = cva(
 		},
 	},
 );
+
 export type AlertVariants = VariantProps<typeof alertVariants>;
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, inject } from '@angular/core';
-import { BrnAvatarFallbackDirective, hexColorFor, isBright } from '@spartan-ng/brain/avatar';
+import { BrnAvatarFallbackDirective } from '@spartan-ng/brain/avatar';
 import { hlm } from '@spartan-ng/brain/core';
 
 @Directive({
@@ -8,32 +8,17 @@ import { hlm } from '@spartan-ng/brain/core';
 	hostDirectives: [
 		{
 			directive: BrnAvatarFallbackDirective,
-			inputs: ['class:class', 'autoColor:autoColor'],
+			inputs: ['class'],
 		},
 	],
 	host: {
 		'[class]': '_computedClass()',
-		'[style.backgroundColor]': "_hex() || ''",
 	},
 })
 export class HlmAvatarFallbackDirective {
 	private readonly _brn = inject(BrnAvatarFallbackDirective);
-	protected readonly _hex = computed(() => {
-		if (!this._brn.autoColor() || !this._brn.getTextContent()) return;
-		return hexColorFor(this._brn.getTextContent());
-	});
-
-	private readonly _autoColorTextCls = computed(() => {
-		const hex = this._hex();
-		if (!hex) return;
-		return `${isBright(hex) ? 'text-black' : 'text-white'}`;
-	});
 
 	protected readonly _computedClass = computed(() => {
-		return hlm(
-			'flex h-full w-full items-center justify-center rounded-full',
-			this._autoColorTextCls() ?? 'bg-muted',
-			this._brn?.userClass(),
-		);
+		return hlm('bg-muted flex size-full items-center justify-center rounded-full', this._brn?.userClass());
 	});
 }

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

@@ -1,24 +1,8 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
 import { BrnAvatarComponent } from '@spartan-ng/brain/avatar';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
-	variants: {
-		variant: {
-			small: 'h-6 w-6 text-xs',
-			medium: 'h-10 w-10',
-			large: 'h-14 w-14 text-lg',
-		},
-	},
-	defaultVariants: {
-		variant: 'medium',
-	},
-});
-
-export type AvatarVariants = VariantProps<typeof avatarVariants>;
-
 @Component({
 	selector: 'hlm-avatar',
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -36,9 +20,8 @@ export type AvatarVariants = VariantProps<typeof avatarVariants>;
 })
 export class HlmAvatarComponent extends BrnAvatarComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly variant = input<AvatarVariants['variant']>('medium');
 
 	protected readonly _computedClass = computed(() =>
-		hlm(avatarVariants({ variant: this.variant() }), this.userClass()),
+		hlm('relative flex shrink-0 overflow-hidden rounded-full size-8', this.userClass()),
 	);
 }

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

@@ -15,5 +15,5 @@ export class HlmAvatarImageDirective {
 	public canShow = inject(BrnAvatarImageDirective).canShow;
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('aspect-square object-cover h-full w-full', this.userClass()));
+	protected _computedClass = computed(() => hlm('aspect-square size-full', this.userClass()));
 }

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

@@ -3,8 +3,10 @@ import { HlmBadgeDirective } from './lib/hlm-badge.directive';
 
 export * from './lib/hlm-badge.directive';
 
+export const HlmBadgeImports = [HlmBadgeDirective] as const;
+
 @NgModule({
-	imports: [HlmBadgeDirective],
-	exports: [HlmBadgeDirective],
+	imports: [...HlmBadgeImports],
+	exports: [...HlmBadgeImports],
 })
 export class HlmBadgeModule {}

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

@@ -1,49 +1,26 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
-import { Directive, booleanAttribute, computed, input } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const badgeVariants = cva(
-	'inline-flex items-center border rounded-full px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary border-transparent text-primary-foreground',
-				secondary: 'bg-secondary border-transparent text-secondary-foreground',
-				destructive: 'bg-destructive border-transparent text-destructive-foreground',
-				outline: 'text-foreground border-border',
+				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
 			},
-			size: {
-				default: 'text-xs',
-				lg: 'text-sm',
-			},
-			static: { true: '', false: '' },
 		},
-		compoundVariants: [
-			{
-				variant: 'default',
-				static: false,
-				class: 'hover:bg-primary/80',
-			},
-			{
-				variant: 'secondary',
-				static: false,
-				class: 'hover:bg-secondary/80',
-			},
-			{
-				variant: 'destructive',
-				static: false,
-				class: 'hover:bg-destructive/80',
-			},
-		],
 		defaultVariants: {
 			variant: 'default',
-			size: 'default',
-			static: false,
 		},
 	},
 );
+
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
 
 @Directive({
@@ -53,12 +30,8 @@ export type BadgeVariants = VariantProps<typeof badgeVariants>;
 	},
 })
 export class HlmBadgeDirective {
-	protected readonly _computedClass = computed(() =>
-		hlm(badgeVariants({ variant: this.variant(), size: this.size(), static: this.static() }), this.userClass()),
-	);
+	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');
-	public readonly static = input<BadgeVariants['static'], BooleanInput>(false, { transform: booleanAttribute });
-	public readonly size = input<BadgeVariants['size']>('default');
 }

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

@@ -20,5 +20,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbEllipsisComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() => hlm('flex h-9 w-9 items-center justify-center', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('flex size-9 items-center justify-center', this.userClass()));
 }

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

@@ -31,5 +31,5 @@ export class HlmBreadcrumbLinkDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly link = input<RouterLink['routerLink']>();
 
-	protected readonly _computedClass = computed(() => hlm('transition-colors hover:text-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('hover:text-foreground transition-colors', this.userClass()));
 }

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

@@ -12,6 +12,6 @@ export class HlmBreadcrumbListDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.userClass()),
+		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', this.userClass()),
 	);
 }

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
@@ -11,12 +11,12 @@ import type { ClassValue } from 'clsx';
 	providers: [provideIcons({ lucideChevronRight })],
 	host: {
 		role: 'presentation',
+		'aria-hidden': 'true',
 		'[class]': '_computedClass()',
-		'[attr.aria-hidden]': 'true',
 	},
 	template: `
 		<ng-content>
-			<ng-icon name="lucideChevronRight" />
+			<ng-icon class="flex" size="14px" name="lucideChevronRight" />
 		</ng-content>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,7 +24,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() =>
-		hlm('[&>ng-icon]:text-[14px] [&>ng-icon]:flex!', this.userClass()),
-	);
+	protected readonly _computedClass = computed(() => hlm('size-3.5', this.userClass()));
 }

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

@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { HlmButtonDirective } from './lib/hlm-button.directive';
-export * from './lib/hlm-button.token';
-
 export * from './lib/hlm-button.directive';
+export * from './lib/hlm-button.token';
 
 @NgModule({
 	imports: [HlmButtonDirective],

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

@@ -5,22 +5,24 @@ import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-				outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'underline-offset-4 hover:underline text-primary',
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
-				default: 'h-10 py-2 px-4',
-				sm: 'h-9 px-3 rounded-md',
-				lg: 'h-11 px-8 rounded-md',
-				icon: 'h-10 w-10',
+				default: 'h-9 px-4 py-2 has-[>ng-icon]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>ng-icon]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>ng-icon]:px-4',
+				icon: 'size-9',
 			},
 		},
 		defaultVariants: {
@@ -29,6 +31,7 @@ export const buttonVariants = cva(
 		},
 	},
 );
+
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 
 @Directive({

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

@@ -92,7 +92,7 @@ import type { ClassValue } from 'clsx';
 							<th
 								*brnCalendarWeekday="let weekday"
 								scope="col"
-								class="text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal"
+								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
 								[attr.aria-label]="i18n.labelWeekday(weekday)"
 							>
 								{{ i18n.formatWeekdayName(weekday) }}
@@ -105,7 +105,7 @@ import type { ClassValue } from 'clsx';
 							@for (date of week; track dateAdapter.getTime(date)) {
 								<td
 									brnCalendarCell
-									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
+									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
 								>
 									<button brnCalendarCellButton [date]="date" [class]="btnClass">
 										{{ dateAdapter.getDate(date) }}
@@ -179,7 +179,7 @@ export class HlmCalendarMultiComponent<T> {
 
 	protected readonly btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
-		'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+		'size-8 p-0 font-normal aria-selected:opacity-100',
 		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
 		'data-[today]:bg-accent data-[today]:text-accent-foreground',
 		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',

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

@@ -69,14 +69,14 @@ import type { ClassValue } from 'clsx';
 						<div class="flex items-center space-x-1">
 							<button
 								brnCalendarPreviousButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronLeft" size="sm" />
 							</button>
 
 							<button
 								brnCalendarNextButton
-								class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 							>
 								<ng-icon hlm name="lucideChevronRight" size="sm" />
 							</button>
@@ -90,7 +90,7 @@ import type { ClassValue } from 'clsx';
 							<th
 								*brnCalendarWeekday="let weekday"
 								scope="col"
-								class="text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal"
+								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
 								[attr.aria-label]="i18n.labelWeekday(weekday)"
 							>
 								{{ i18n.formatWeekdayName(weekday) }}
@@ -103,7 +103,7 @@ import type { ClassValue } from 'clsx';
 							@for (date of week; track dateAdapter.getTime(date)) {
 								<td
 									brnCalendarCell
-									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
+									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
 								>
 									<button brnCalendarCellButton [date]="date" [class]="btnClass">
 										{{ dateAdapter.getDate(date) }}
@@ -167,10 +167,10 @@ export class HlmCalendarComponent<T> {
 
 	protected readonly btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
-		'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+		'size-8 p-0 font-normal aria-selected:opacity-100',
 		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
 		'data-[today]:bg-accent data-[today]:text-accent-foreground',
-		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 	);
 }

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { HlmCardActionDirective } from './lib/hlm-card-action.directive';
 import { HlmCardContentDirective } from './lib/hlm-card-content.directive';
 import { HlmCardDescriptionDirective } from './lib/hlm-card-description.directive';
 import { HlmCardFooterDirective } from './lib/hlm-card-footer.directive';
@@ -7,6 +8,7 @@ import { HlmCardHeaderDirective } from './lib/hlm-card-header.directive';
 import { HlmCardTitleDirective } from './lib/hlm-card-title.directive';
 import { HlmCardDirective } from './lib/hlm-card.directive';
 
+export * from './lib/hlm-card-action.directive';
 export * from './lib/hlm-card-content.directive';
 export * from './lib/hlm-card-description.directive';
 export * from './lib/hlm-card-footer.directive';
@@ -21,6 +23,7 @@ export const HlmCardImports = [
 	HlmCardTitleDirective,
 	HlmCardDescriptionDirective,
 	HlmCardContentDirective,
+	HlmCardActionDirective,
 ] as const;
 
 @NgModule({

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

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmCardAction]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCardActionDirective {
+	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()),
+	);
+}

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

@@ -1,14 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardContentVariants = cva('p-6 pt-0', {
-	variants: {},
-	defaultVariants: {},
-});
-export type CardContentVariants = VariantProps<typeof cardContentVariants>;
-
 @Directive({
 	selector: '[hlmCardContent]',
 	host: {
@@ -17,5 +10,5 @@ export type CardContentVariants = VariantProps<typeof cardContentVariants>;
 })
 export class HlmCardContentDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardContentVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('px-6', this.userClass()));
 }

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

@@ -1,14 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardDescriptionVariants = cva('text-sm text-muted-foreground', {
-	variants: {},
-	defaultVariants: {},
-});
-export type CardDescriptionVariants = VariantProps<typeof cardDescriptionVariants>;
-
 @Directive({
 	selector: '[hlmCardDescription]',
 	host: {
@@ -17,5 +10,5 @@ export type CardDescriptionVariants = VariantProps<typeof cardDescriptionVariant
 })
 export class HlmCardDescriptionDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardDescriptionVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
 }

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

@@ -1,21 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardFooterVariants = cva('flex p-6 pt-0', {
-	variants: {
-		direction: {
-			row: 'flex-row items-center space-x-1.5',
-			column: 'flex-col space-y-1.5',
-		},
-	},
-	defaultVariants: {
-		direction: 'row',
-	},
-});
-export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
-
 @Directive({
 	selector: '[hlmCardFooter]',
 	host: {
@@ -24,7 +10,5 @@ export type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
 })
 export class HlmCardFooterDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardFooterVariants({ direction: this.direction() }), this.userClass()));
-
-	public readonly direction = input<CardFooterVariants['direction']>('row');
+	protected readonly _computedClass = computed(() => hlm('flex items-center px-6 [.border-t]:pt-6', this.userClass()));
 }

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

@@ -1,21 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardHeaderVariants = cva('flex p-6', {
-	variants: {
-		direction: {
-			row: 'flex-row items-center space-x-1.5',
-			column: 'flex-col space-y-1.5',
-		},
-	},
-	defaultVariants: {
-		direction: 'column',
-	},
-});
-export type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
-
 @Directive({
 	selector: '[hlmCardHeader]',
 	host: {
@@ -24,7 +10,10 @@ export type CardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
 })
 export class HlmCardHeaderDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardHeaderVariants({ direction: this.direction() }), this.userClass()));
-
-	public readonly direction = input<CardHeaderVariants['direction']>('column');
+	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(),
+		),
+	);
 }

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

@@ -1,14 +1,7 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardTitleVariants = cva('text-lg font-semibold leading-none tracking-tight', {
-	variants: {},
-	defaultVariants: {},
-});
-export type CardTitleVariants = VariantProps<typeof cardTitleVariants>;
-
 @Directive({
 	selector: '[hlmCardTitle]',
 	host: {
@@ -17,5 +10,5 @@ export type CardTitleVariants = VariantProps<typeof cardTitleVariants>;
 })
 export class HlmCardTitleDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(cardTitleVariants(), this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
 }