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

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

@@ -3,13 +3,10 @@ import { hlm } from '@spartan-ng/brain/core';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const cardVariants = cva(
-	'rounded-lg border border-border bg-card focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-card-foreground shadow-sm',
-	{
-		variants: {},
-		defaultVariants: {},
-	},
-);
+export const cardVariants = cva('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', {
+	variants: {},
+	defaultVariants: {},
+});
 export type CardVariants = VariantProps<typeof cardVariants>;
 
 @Directive({

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

@@ -1,3 +1,4 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import {
 	ChangeDetectionStrategy,
 	Component,
@@ -41,15 +42,20 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			(changed)="_handleChange()"
 			(touched)="_onTouched?.()"
 		>
-			<ng-icon [class]="_computedIconClass()" hlm size="sm" name="lucideCheck" />
+			@if (checked()) {
+				<span class="flex items-center justify-center text-current transition-none">
+					<ng-icon hlm size="14px" name="lucideCheck" />
+				</span>
+			}
 		</brn-checkbox>
 	`,
 	host: {
-		class: 'contents',
+		class: 'contents peer',
 		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
+		'[attr.data-disabled]': 'state().disabled() ? "" : null',
 	},
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
@@ -60,17 +66,12 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 
 	protected readonly _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',
+			'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-default',
 			this.userClass(),
 			this.state().disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
-	protected readonly _computedIconClass = computed(() =>
-		hlm('leading-none group-data-[state=unchecked]:opacity-0', this.checked() === 'indeterminate' ? 'opacity-50' : ''),
-	);
-
 	/** Used to set the id on the underlying brn element. */
 	public readonly id = input<string | null>(null);
 
@@ -90,10 +91,10 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 	public readonly name = input<string | null>(null);
 
 	/** Whether the checkbox is required. */
-	public readonly required = input(false, { transform: booleanAttribute });
+	public readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	/** Whether the checkbox is disabled. */
-	public readonly disabled = input(false, { transform: booleanAttribute });
+	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	protected readonly state = computed(() => ({
 		disabled: signal(this.disabled()),

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

@@ -21,7 +21,7 @@ export class HlmCommandDialogDirective {
 	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%]',
+			'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(),
 		),
 	);

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

@@ -16,6 +16,6 @@ export class HlmCommandGroupLabelComponent {
 
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('font-medium px-2 py-1.5 text-muted-foreground text-xs', this.userClass()),
+		hlm('text-muted-foreground px-2 py-1.5 text-xs font-medium', this.userClass()),
 	);
 }

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

@@ -22,6 +22,6 @@ export class HlmCommandGroupComponent {
 
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col overflow-hidden p-1 text-foreground data-[hidden]:hidden', this.userClass()),
+		hlm('text-foreground overflow-hidden p-1 block data-[hidden]:hidden', this.userClass()),
 	);
 }

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

@@ -1,11 +1,18 @@
-import { Directive } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
+import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmCommandIcon]',
 	host: {
-		class: 'inline-flex mr-2 w-4 h-4',
+		'[class]': '_computedClass()',
 	},
 	providers: [provideHlmIconConfig({ size: 'sm' })],
 })
-export class HlmCommandIconDirective {}
+export class HlmCommandIconDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('text-muted-foreground pointer-events-none shrink-0', this.userClass()),
+	);
+}

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

@@ -38,7 +38,7 @@ export class HlmCommandItemComponent {
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'text-start aria-selected:bg-accent aria-selected:text-accent-foreground cursor-default disabled:opacity-50 disabled:pointer-events-none hover:bg-accent/50 items-center outline-none px-2 py-1.5 relative flex rounded-sm select-none text-sm data-[hidden]:hidden',
+			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base w-full',
 			this.userClass(),
 		),
 	);

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

@@ -22,6 +22,6 @@ export class HlmCommandListComponent {
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
+		hlm('flex flex-col max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', this.userClass()),
 	);
 }

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

@@ -18,7 +18,7 @@ export class HlmCommandSearchInputComponent {
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-transparent disabled:cursor-not-allowed disabled:opacity-50 h-11 outline-none placeholder:text-muted-foreground py-3 text-sm w-full',
+			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
 			this.userClass(),
 		),
 	);

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

@@ -19,6 +19,6 @@ export class HlmCommandSearchComponent {
 
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('relative [&_ng-icon]:flex-none border-b border-border flex items-center px-3 space-x-2', this.userClass()),
+		hlm('flex h-9 items-center gap-2 border-b px-3 [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50', this.userClass()),
 	);
 }

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

@@ -15,5 +15,5 @@ export class HlmCommandSeparatorComponent {
 	public readonly userClass = input<string>('', { alias: 'class' });
 
 	/*** The styles to apply  */
-	protected readonly _computedClass = computed(() => hlm('h-px block w-full border-b border-border', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 h-px', this.userClass()));
 }

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

@@ -1,11 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-command-shortcut',
 	template: '<ng-content />',
 	host: {
-		class: 'font-light ml-auto opacity-60 text-xs tracking-widest',
+		'[class]': '_computedClass()',
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmCommandShortcutComponent {}
+export class HlmCommandShortcutComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),
+	);
+}

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

@@ -25,9 +25,6 @@ export class HlmCommandComponent {
 
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm(
-			'w-96 bg-popover border border-border flex flex-col h-full overflow-hidden rounded-md text-popover-foreground',
-			this.userClass(),
-		),
+		hlm('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', this.userClass()),
 	);
 }

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

@@ -11,7 +11,7 @@ import {
 	output,
 	signal,
 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
@@ -75,7 +75,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmDatePickerMultiComponent<T> {
+export class HlmDatePickerMultiComponent<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -10,9 +10,9 @@ import {
 	output,
 	signal,
 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCalendar } from '@ng-icons/lucide';
+import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnDialogState } from '@spartan-ng/brain/dialog';
 import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
@@ -40,12 +40,10 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 		HlmPopoverContentDirective,
 		HlmCalendarComponent,
 	],
-	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
 		<brn-popover sideOffset="5" [state]="popoverState()" (stateChanged)="popoverState.set($event)">
 			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
-				<ng-icon hlm size="sm" name="lucideCalendar" />
-
 				<span class="truncate">
 					@if (formattedDate(); as formattedDate) {
 						{{ formattedDate }}
@@ -53,6 +51,8 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 						<ng-content />
 					}
 				</span>
+
+				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
@@ -72,13 +72,13 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmDatePickerComponent<T> {
+export class HlmDatePickerComponent<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerConfig<T>();
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
+			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background transition-colors border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground h-9 px-3 py-2 w-[280px] justify-start text-left font-normal cursor-default justify-between',
 			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',

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

@@ -3,7 +3,7 @@ import { hlm, injectCustomClassSettable } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 export const hlmDialogOverlayClass =
-	'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';
 
 @Directive({
 	selector: '[hlmDialogOverlay],brn-dialog-overlay[hlm]',

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

@@ -1,10 +1,17 @@
-import { Directive } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { ClassValue } from 'clsx';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector
 	selector: 'hlm-error',
 	host: {
-		class: 'block text-destructive text-sm font-medium',
+		'[class]': '_computedClass()',
 	},
 })
-export class HlmErrorDirective {}
+export class HlmErrorDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('block text-destructive text-sm font-medium', this.userClass()),
+	);
+}

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

@@ -1,5 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	contentChild,
+	contentChildren,
+	effect,
+	input,
+} from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
+import { ClassValue } from 'clsx';
 import { HlmErrorDirective } from './hlm-error.directive';
 
 @Component({
@@ -17,11 +27,13 @@ import { HlmErrorDirective } from './hlm-error.directive';
 		}
 	`,
 	host: {
-		class: 'space-y-2 block',
+		'[class]': '_computedClass()',
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmFormFieldComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('space-y-2 block', this.userClass()));
 	public readonly control = contentChild(BrnFormFieldControl);
 
 	public readonly errorChildren = contentChildren(HlmErrorDirective);

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-hint.directive.ts.template

@@ -1,10 +1,15 @@
-import { Directive } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { ClassValue } from 'clsx';
 
 @Directive({
 	// eslint-disable-next-line @angular-eslint/directive-selector
 	selector: 'hlm-hint',
 	host: {
-		class: 'block text-sm text-muted-foreground',
+		'[class]': '_computedClass()',
 	},
 })
-export class HlmHintDirective {}
+export class HlmHintDirective {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('block text-sm text-muted-foreground', this.userClass()));
+}

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

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmInputErrorDirective } from './lib/hlm-input-error.directive';
 import { HlmInputDirective } from './lib/hlm-input.directive';
 
-export * from './lib/hlm-input-error.directive';
 export * from './lib/hlm-input.directive';
 
 @NgModule({
-	imports: [HlmInputDirective, HlmInputErrorDirective],
-	exports: [HlmInputDirective, HlmInputErrorDirective],
+	imports: [HlmInputDirective],
+	exports: [HlmInputDirective],
 })
 export class HlmInputModule {}

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

@@ -1,39 +1,32 @@
 import {
+	computed,
 	Directive,
 	type DoCheck,
-	Injector,
-	computed,
 	effect,
 	forwardRef,
 	inject,
+	Injector,
 	input,
-	signal,
+	linkedSignal,
 	untracked,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
-
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(
-	'flex rounded-md border font-normal border-input bg-transparent text-base md:text-sm ring-offset-background file:border-0 file:text-foreground file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 	{
 		variants: {
-			size: {
-				default: 'h-10 py-2 px-4 file:max-md:py-0',
-				sm: 'h-9 px-3 file:md:py-2 file:max-md:py-1.5',
-				lg: 'h-11 px-8 file:md:py-3 file:max-md:py-2.5',
-			},
 			error: {
-				auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
-				true: 'text-destructive border-destructive focus-visible:ring-destructive',
+				auto: '[&.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+				true: 'text-destructive/20 dark:text-destructive/40 border-destructive focus-visible:ring-destructive',
 			},
 		},
 		defaultVariants: {
-			size: 'default',
 			error: 'auto',
 		},
 	},
@@ -53,17 +46,13 @@ type InputVariants = VariantProps<typeof inputVariants>;
 	],
 })
 export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
-	public readonly size = input<InputVariants['size']>('default');
-
 	public readonly error = input<InputVariants['error']>('auto');
 
-	protected readonly state = computed(() => ({
-		error: signal(this.error()),
-	}));
+	protected readonly state = linkedSignal(() => ({ error: this.error() }));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(inputVariants({ size: this.size(), error: this.state().error() }), this.userClass()),
+		hlm(inputVariants({ error: this.state().error }), this.userClass()),
 	);
 
 	private readonly _injector = inject(Injector);
@@ -103,6 +92,6 @@ export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
 	}
 
 	setError(error: InputVariants['error']) {
-		this.state().error.set(error);
+		this.state.set({ error });
 	}
 }

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideDot } from '@ng-icons/lucide';
+import { lucideMinus } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
 import { HlmIconDirective } from '@spartan-ng/helm/icon';
 import { type ClassValue } from 'clsx';
@@ -8,9 +8,9 @@ import { type ClassValue } from 'clsx';
 @Component({
 	selector: 'hlm-input-otp-separator',
 	imports: [HlmIconDirective, NgIcon],
-	providers: [provideIcons({ lucideDot })],
+	providers: [provideIcons({ lucideMinus })],
 	template: `
-		<ng-icon hlm name="lucideDot" />
+		<ng-icon hlm name="lucideMinus" />
 	`,
 	host: {
 		role: 'separator',
@@ -19,7 +19,7 @@ import { type ClassValue } from 'clsx';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmInputOtpSeparatorComponent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('inline-flex', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() => hlm(this.userClass()));
 }

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

@@ -26,8 +26,8 @@ export class HlmInputOtpSlotComponent {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-			'has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-2 has-[brn-input-otp-slot[data-active="true"]]:ring-ring has-[brn-input-otp-slot[data-active="true"]]:ring-offset-background',
+			'dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md',
+			'has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-[3px] has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50',
 			this.userClass(),
 		),
 	);

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

@@ -12,6 +12,6 @@ export class HlmInputOtpDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('flex items-center gap-2 has-[:disabled]:opacity-50', this.userClass()),
+		hlm('flex items-center gap-2 has-disabled:opacity-50', this.userClass()),
 	);
 }

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

@@ -1,34 +1,8 @@
-import { Directive, computed, inject, input, signal } from '@angular/core';
+import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnLabelDirective } from '@spartan-ng/brain/label';
-import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const labelVariants = cva(
-	'text-sm font-medium leading-none [&>[hlmInput]]:my-1 [&:has([hlmInput]:disabled)]:cursor-not-allowed [&:has([hlmInput]:disabled)]:opacity-70',
-	{
-		variants: {
-			variant: {
-				default: '',
-			},
-			error: {
-				auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive',
-				true: 'text-destructive',
-			},
-			disabled: {
-				auto: '[&:has([hlmInput]:disabled)]:opacity-70',
-				true: 'opacity-70',
-				false: '',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			error: 'auto',
-		},
-	},
-);
-export type LabelVariants = VariantProps<typeof labelVariants>;
-
 @Directive({
 	selector: '[hlmLabel]',
 	hostDirectives: [
@@ -42,31 +16,12 @@ export type LabelVariants = VariantProps<typeof labelVariants>;
 	},
 })
 export class HlmLabelDirective {
-	private readonly _brn = inject(BrnLabelDirective, { host: true });
-
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	public readonly variant = input<LabelVariants['variant']>('default');
-
-	public readonly error = input<LabelVariants['error']>('auto');
-
-	protected readonly state = computed(() => ({
-		error: signal(this.error()),
-	}));
-
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			labelVariants({
-				variant: this.variant(),
-				error: this.state().error(),
-				disabled: this._brn?.dataDisabled() ?? 'auto',
-			}),
-			'[&.ng-invalid.ng-touched]:text-destructive',
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50',
 			this.userClass(),
 		),
 	);
-
-	setError(error: LabelVariants['error']): void {
-		this.state().error.set(error);
-	}
 }

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

@@ -14,7 +14,7 @@ export class HlmMenuBarItemDirective {
 	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',
+			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none',
 			this.userClass(),
 		),
 	);

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

@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmMenuBarComponent {
 	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('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', this.userClass()),
 	);
 }

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

@@ -3,14 +3,14 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
 import { HlmIconDirective } from '@spartan-ng/helm/icon';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-item-sub-indicator',
 	providers: [provideIcons({ lucideChevronRight })],
 	imports: [NgIcon, HlmIconDirective],
 	template: `
-		<ng-icon hlm size="none" class="h-full w-full" name="lucideChevronRight" />
+		<ng-icon hlm size="sm" name="lucideChevronRight" class="text-popover-foreground" />
 	`,
 	host: {
 		'[class]': '_computedClass()',
@@ -19,5 +19,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuItemSubIndicatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('inline-block ml-auto h-4 w-4', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('ml-auto size-4', this.userClass()));
 }