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

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

@@ -1,22 +1,15 @@
-import { Directive, Input, booleanAttribute, computed, input, signal } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuItemDirective } from '@spartan-ng/brain/menu';
-import { type VariantProps, cva } from 'class-variance-authority';
-import type { ClassValue } from 'clsx';
-
-export const hlmMenuItemVariants = cva(
-	'group w-full relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
-	{
-		variants: { inset: { true: 'pl-8', false: '' } },
-		defaultVariants: { inset: false },
-	},
-);
-export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
+import { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmMenuItem]',
 	host: {
 		'[class]': '_computedClass()',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-inset]': 'inset() ? "" : null',
 	},
 	hostDirectives: [
 		{
@@ -27,13 +20,17 @@ export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
 	],
 })
 export class HlmMenuItemDirective {
-	private readonly _inset = signal<boolean>(false);
+	public readonly variant = input<'default' | 'destructive'>('default');
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmMenuItemVariants({ inset: this._inset() }), this.userClass()));
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 
-	@Input({ transform: booleanAttribute })
-	public set inset(value: boolean) {
-		this._inset.set(value);
-	}
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() =>
+		hlm(
+			`hover:bg-accent focus-visible:bg-accent w-full focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_ng-icon:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
+			this.userClass(),
+		),
+	);
 }

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

@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input, booleanAttribute, computed, input, signal } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-label',
@@ -9,18 +10,17 @@ import type { ClassValue } from 'clsx';
 	`,
 	host: {
 		'[class]': '_computedClass()',
+		'[attr.data-inset]': 'inset() ? "" : null',
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmMenuLabelComponent {
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('block px-2 py-1.5 text-sm font-semibold', this._inset() && 'pl-8', this.userClass()),
+		hlm('block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', this.userClass()),
 	);
-
-	private readonly _inset = signal<ClassValue>(false);
-	@Input({ transform: booleanAttribute })
-	public set inset(value: boolean) {
-		this._inset.set(value);
-	}
 }

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-menu-separator',
@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuSeparatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('block -mx-1 my-1 h-px bg-muted', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('block bg-border -mx-1 my-1 h-px', this.userClass()));
 }

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

@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmMenuShortcutComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('ml-auto font-light text-xs tracking-widest opacity-60', this.userClass()),
+		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),
 	);
 }

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

@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, computed, input, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnMenuDirective } from '@spartan-ng/brain/menu';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const menuVariants = cva(
-	'block border-border min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+	'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
 	{
 		variants: {
 			variant: {
@@ -33,11 +33,7 @@ type MenuVariants = VariantProps<typeof menuVariants>;
 })
 export class HlmMenuComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(menuVariants({ variant: this._variant() }), this.userClass()));
+	protected _computedClass = computed(() => hlm(menuVariants({ variant: this.variant() }), this.userClass()));
 
-	private readonly _variant = signal<MenuVariants['variant']>('default');
-	@Input()
-	public set variant(value: MenuVariants['variant']) {
-		this._variant.set(value);
-	}
+	public readonly variant = input<MenuVariants['variant']>('default');
 }

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

@@ -16,7 +16,7 @@ export class HlmProgressIndicatorDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('inline-flex transform-gpu h-full w-full flex-1 bg-primary transition-all', this.userClass()),
+		hlm('bg-primary h-full w-full flex-1 transition-all', this.userClass()),
 	);
 
 	protected readonly transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);

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

@@ -11,6 +11,6 @@ import type { ClassValue } from 'clsx';
 export class HlmProgressDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('inline-flex relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.userClass()),
+		hlm('inline-flex bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', this.userClass()),
 	);
 }

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

@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 		{
 			directive: BrnRadioGroupDirective,
 			inputs: ['name', 'value', 'disabled', 'required', 'direction'],
+			outputs: ['valueChange'],
 		},
 	],
 	host: {
@@ -19,5 +20,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmRadioGroupComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('grid gap-2', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('grid gap-3', this.userClass()));
 }

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

@@ -2,23 +2,22 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
-const btnLike =
-	'aspect-square rounded-full ring-offset-background group-[.cdk-keyboard-focused]:ring-2 group-[.cdk-keyboard-focused]:ring-ring group-[.cdk-keyboard-focused]:ring-offset-2 group-[.brn-radio-disabled]:cursor-not-allowed group-[.brn-radio-disabled]:opacity-50';
-
 @Component({
 	selector: 'hlm-radio-indicator',
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<div
-			class="bg-foreground absolute inset-0 hidden scale-[55%] rounded-full group-[.brn-radio-checked]:inline-block"
-		></div>
-		<div class="border-primary ${btnLike} rounded-full border"></div>
+		<div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmRadioIndicatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('relative inline-flex h-4 w-4', this.userClass()));
+	protected _computedClass = computed(() =>
+		hlm(
+			'relative flex items-center justify-center border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px] group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50',
+			this.userClass(),
+		),
+	);
 }

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

@@ -32,7 +32,7 @@ import { ClassValue } from 'clsx';
 			[aria-describedby]="ariaDescribedby()"
 			(change)="change.emit($event)"
 		>
-			<ng-content select="[target],[indicator]" indicator />
+			<ng-content select="[target],[indicator],hlm-radio-indicator" indicator />
 			<ng-content />
 		</brn-radio>
 	`,
@@ -45,12 +45,7 @@ export class HlmRadioComponent<T = unknown> {
 	private readonly _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm(
-			'group [&.brn-radio-disabled]:text-muted-foreground flex items-center space-x-2 rtl:space-x-reverse',
-			this.userClass(),
-		),
-	);
+	protected readonly _computedClass = computed(() => hlm('group flex items-center gap-x-3', this.userClass()));
 
 	/** Used to set the id on the underlying brn element. */
 	public readonly id = input<string | undefined>(undefined);

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

@@ -17,7 +17,7 @@ export class HlmSelectLabelDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
-			'pl-8 pr-2 text-sm font-semibold rtl:pl-2 rtl:pr-8',
+			'text-muted-foreground px-2 py-1.5 text-xs',
 			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
 			this.userClass(),
 		),

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

@@ -15,16 +15,13 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<ng-content />
-		<span
-			[attr.dir]="_brnSelectOption.dir()"
-			class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center rtl:left-auto rtl:right-2"
-			[attr.data-state]="this._brnSelectOption.checkedState()"
-		>
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
 			@if (this._brnSelectOption.selected()) {
 				<ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
 			}
 		</span>
+
+		<ng-content />
 	`,
 	imports: [NgIcon, HlmIconDirective],
 })
@@ -33,7 +30,7 @@ export class HlmSelectOptionComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 rtl:flex-reverse rtl:pr-8 rtl:pl-2 text-sm outline-none data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-down.component.ts.template

@@ -1,18 +1,25 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
 import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-select-scroll-down',
 	imports: [NgIcon, HlmIconDirective],
 	providers: [provideIcons({ lucideChevronDown })],
 	host: {
-		class: 'flex cursor-default items-center justify-center py-1',
+		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" />
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSelectScrollDownComponent {}
+export class HlmSelectScrollDownComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),
+	);
+}

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-up.component.ts.template

@@ -1,18 +1,25 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronUp } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
 import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-select-scroll-up',
 	imports: [NgIcon, HlmIconDirective],
 	providers: [provideIcons({ lucideChevronUp })],
 	host: {
-		class: 'flex cursor-default items-center justify-center py-1',
+		'[class]': '_computedClass()',
 	},
 	template: `
 		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" />
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSelectScrollUpComponent {}
+export class HlmSelectScrollUpComponent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex cursor-default items-center justify-center py-1', this.userClass()),
+	);
+}

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

@@ -4,37 +4,30 @@ import { lucideChevronDown } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
 import { BrnSelectComponent, BrnSelectTriggerDirective } from '@spartan-ng/brain/select';
 import { HlmIconDirective } from '@spartan-ng/helm/icon';
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const selectTriggerVariants = cva(
-	'flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+	`border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4`,
 	{
 		variants: {
-			size: {
-				default: 'h-10 py-2 px-4',
-				sm: 'h-9 px-3',
-				lg: 'h-11 px-8',
-			},
 			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 [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
+				true: 'text-destructive border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
 			},
 		},
 		defaultVariants: {
-			size: 'default',
 			error: 'auto',
 		},
 	},
 );
-type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
 
 @Component({
 	selector: 'hlm-select-trigger',
 	imports: [BrnSelectTriggerDirective, NgIcon, HlmIconDirective],
 	providers: [provideIcons({ lucideChevronDown })],
 	template: `
-		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button">
+		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button" [attr.data-size]="size()">
 			<ng-content />
 			@if (icon()) {
 				<ng-content select="ng-icon" />
@@ -50,10 +43,11 @@ export class HlmSelectTriggerComponent {
 
 	protected readonly brnSelect = inject(BrnSelectComponent, { optional: true });
 
-	public readonly _size = input<SelectTriggerVariants['size']>('default');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
+	public readonly size = input<'default' | 'sm'>('default');
+
 	protected _computedClass = computed(() =>
-		hlm(selectTriggerVariants({ size: this._size(), error: this.brnSelect?.errorState() }), this.userClass()),
+		hlm(selectTriggerVariants({ error: this.brnSelect?.errorState() }), this.userClass()),
 	);
 }

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

@@ -11,9 +11,6 @@ import type { ClassValue } from 'clsx';
 export class HlmSelectValueDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(
-			'!inline-block ltr:text-left rtl:text-right border-border w-[calc(100%)]] min-w-0 pointer-events-none truncate data-[placeholder]:text-muted-foreground',
-			this.userClass(),
-		),
+		hlm('line-clamp-1 flex items-center gap-2 data-[placeholder]:text-muted-foreground', this.userClass()),
 	);
 }

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

@@ -12,7 +12,7 @@ export class HlmSheetCloseDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
 		hlm(
-			'absolute flex h-4 w-4 right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none',
 			this.userClass(),
 		),
 	);

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

@@ -19,16 +19,16 @@ import type { ClassValue } from 'clsx';
 import { HlmSheetCloseDirective } from './hlm-sheet-close.directive';
 
 export const sheetVariants = cva(
-	'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+	'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
 	{
 		variants: {
 			side: {
-				top: 'border-border inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
 				bottom:
-					'border-border inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-				left: 'border-border inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
 				right:
-					'border-border inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+					'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
 			},
 		},
 		defaultVariants: {

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

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetDescriptionDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
+	protected _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
 }

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

@@ -14,7 +14,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetFooterComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass()),
-	);
+	protected _computedClass = computed(() => hlm('mt-auto flex flex-col gap-2 p-4', this.userClass()));
 }

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

@@ -14,5 +14,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetHeaderComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('flex flex-col space-y-2 text-center sm:text-left', this.userClass()));
+	protected _computedClass = computed(() => hlm('flex flex-col gap-1.5 p-4', this.userClass()));
 }

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

@@ -13,7 +13,7 @@ export class HlmSheetOverlayDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _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-sheet-helm/files/lib/hlm-sheet-title.directive.ts.template

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetTitleDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-lg font-semibold', this.userClass()));
+	protected _computedClass = computed(() => hlm('text-foreground font-semibold', this.userClass()));
 }

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

@@ -21,7 +21,7 @@ import type { ClassValue } from 'clsx';
 		},
 	],
 	template: `
-		<div brnSliderTrack class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
+		<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>
 		</div>
 
@@ -38,7 +38,7 @@ import type { ClassValue } from 'clsx';
 		}
 
 		<span
-			class="border-primary bg-background ring-offset-background focus-visible:ring-ring absolute block h-5 w-5 -translate-x-1/2 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+			class="border-primary bg-background ring-ring/50 focus-visible:outline-hidden absolute block size-4 shrink-0 -translate-x-1/2 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
 			brnSliderThumb
 		></span>
 	`,
@@ -52,7 +52,7 @@ export class HlmSliderComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'w-full h-5 flex relative select-none items-center touch-none',
+			'relative flex w-full touch-none select-none items-center',
 			this.slider.disabled() ? 'opacity-40' : '',
 			this.userClass(),
 		),

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

@@ -13,7 +13,7 @@ export class HlmSwitchThumbDirective {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform group-data-[state=checked]:translate-x-5 group-data-[state=unchecked]:translate-x-0',
+			'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(),
 		),
 	);

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

@@ -54,8 +54,7 @@ export class HlmSwitchComponent implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'group inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-			this.disabled() ? 'cursor-not-allowed opacity-50' : '',
+			'group data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
 			this.userClass(),
 		),
 	);

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

@@ -5,7 +5,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const listVariants = cva(
-	'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+	'inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
 	{
 		variants: {
 			orientation: {

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

@@ -14,9 +14,9 @@ export class HlmTabsTriggerDirective {
 	public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+			'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon]:text-base',
 			this.userClass(),
 		),
 	);

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

@@ -1,5 +1,7 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
 import { BrnTabsDirective } from '@spartan-ng/brain/tabs';
+import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-tabs',
@@ -12,7 +14,13 @@ import { BrnTabsDirective } from '@spartan-ng/brain/tabs';
 	],
 	template: '<ng-content/>',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class]': '_computedClass()',
+	},
 })
 export class HlmTabsComponent {
 	public readonly tab = input.required<string>();
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2', this.userClass()));
 }

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

@@ -6,23 +6,23 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 import { toggleGroupItemVariants } from './hlm-toggle-item.directive';
 
 type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItemVariants>;
+
 @Directive({
 	selector: 'brn-toggle-group[hlm],[hlmToggleGroup]',
 	host: {
 		'[class]': '_computedClass()',
+		'[attr.data-variant]': 'variant()',
 	},
 	providers: [provideHlmToggleGroup(HlmToggleGroupDirective)],
 })
 export class HlmToggleGroupDirective {
-	public readonly variant = input<ToggleGroupItemVariants['variant']>('default');
-	public readonly size = input<ToggleGroupItemVariants['size']>('default');
+	public readonly variant = input<ToggleGroupItemVariants['variant']>('outline');
+	public readonly size = input<ToggleGroupItemVariants['size']>('sm');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
 	protected readonly _computedClass = computed(() =>
-		hlm('inline-flex items-center gap-x-2 focus:[&>[hlm][brnToggle]]:z-10', {
-			'gap-x-0 rounded-md first-of-type:[&>[hlmToggleGroupItem]]:rounded-l-md last-of-type:[&>[hlmToggleGroupItem]]:rounded-r-md [&>[hlmToggleGroupItem][variant="outline"]]:-mx-[0.5px] [&>[hlmToggleGroupItem]]:rounded-none':
-				this.variant() === 'merged',
-			[String(this.userClass())]: !!this.userClass(),
-		}),
+		hlm(
+			'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs focus:[&>[hlm][brnToggle]]:z-10',
+			this.userClass(),
+		),
 	);
 }