@spartan-ng/cli 0.0.1-alpha.326 → 0.0.1-alpha.327

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

@@ -1,47 +1,56 @@
 import { NgModule } from '@angular/core';
 
 import { HlmMenuBarItemDirective } from './lib/hlm-menu-bar-item.directive';
-import { HlmMenuBarDirective } from './lib/hlm-menu-bar.directive';
+import { HlmMenuBarComponent } from './lib/hlm-menu-bar.component';
+import { HlmMenuGroupComponent } from './lib/hlm-menu-group.component';
 import { HlmMenuItemCheckComponent } from './lib/hlm-menu-item-check.component';
+import { HlmMenuItemCheckboxDirective } from './lib/hlm-menu-item-checkbox.directive';
 import { HlmMenuItemIconDirective } from './lib/hlm-menu-item-icon.directive';
 import { HlmMenuItemRadioComponent } from './lib/hlm-menu-item-radio.component';
+import { HlmMenuItemRadioDirective } from './lib/hlm-menu-item-radio.directive';
 import { HlmMenuItemSubIndicatorComponent } from './lib/hlm-menu-item-sub-indicator.component';
 import { HlmMenuItemDirective } from './lib/hlm-menu-item.directive';
 import { HlmMenuLabelComponent } from './lib/hlm-menu-label.component';
 import { HlmMenuSeparatorComponent } from './lib/hlm-menu-separator.component';
 import { HlmMenuShortcutComponent } from './lib/hlm-menu-shortcut.component';
-import { HlmMenuDirective } from './lib/hlm-menu.directive';
-import { HlmSubMenuDirective } from './lib/hlm-sub-menu.directive';
+import { HlmMenuComponent } from './lib/hlm-menu.component';
+import { HlmSubMenuComponent } from './lib/hlm-sub-menu.component';
 
 export * from './lib/hlm-menu-bar-item.directive';
-export * from './lib/hlm-menu-bar.directive';
+export * from './lib/hlm-menu-bar.component';
+export * from './lib/hlm-menu-group.component';
 export * from './lib/hlm-menu-item-check.component';
+export * from './lib/hlm-menu-item-checkbox.directive';
 export * from './lib/hlm-menu-item-icon.directive';
 export * from './lib/hlm-menu-item-radio.component';
+export * from './lib/hlm-menu-item-radio.directive';
 export * from './lib/hlm-menu-item-sub-indicator.component';
 export * from './lib/hlm-menu-item.directive';
 export * from './lib/hlm-menu-label.component';
 export * from './lib/hlm-menu-separator.component';
 export * from './lib/hlm-menu-shortcut.component';
-export * from './lib/hlm-menu.directive';
-export * from './lib/hlm-sub-menu.directive';
+export * from './lib/hlm-menu.component';
+export * from './lib/hlm-sub-menu.component';
 
 export const HlmMenuItemImports = [
 	HlmMenuItemDirective,
 	HlmMenuItemIconDirective,
+	HlmMenuGroupComponent,
 	HlmMenuItemSubIndicatorComponent,
 	HlmMenuItemRadioComponent,
 	HlmMenuItemCheckComponent,
 	HlmMenuShortcutComponent,
+	HlmMenuItemCheckboxDirective,
+	HlmMenuItemRadioDirective,
 ];
 export const HlmMenuStructureImports = [HlmMenuLabelComponent, HlmMenuSeparatorComponent] as const;
 export const HlmMenuImports = [
 	...HlmMenuItemImports,
 	...HlmMenuStructureImports,
-	HlmMenuDirective,
-	HlmSubMenuDirective,
+	HlmMenuComponent,
+	HlmSubMenuComponent,
 ] as const;
-export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBarDirective, HlmMenuBarItemDirective] as const;
+export const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBarComponent, HlmMenuBarItemDirective] as const;
 
 @NgModule({
 	imports: [...HlmMenuItemImports],

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

@@ -1,5 +1,6 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
 
 @Directive({
@@ -8,6 +9,7 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnMenuItemDirective],
 })
 export class HlmMenuBarItemDirective {
 	private readonly _userCls = signal<ClassValue>('');

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

@@ -1,15 +1,18 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuBarDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
 
-@Directive({
-	selector: '[hlm][brnMenuBar]',
+@Component({
+	selector: 'hlm-menu-bar',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnMenuBarDirective],
+	template: '<ng-content/>',
 })
-export class HlmMenuBarDirective {
+export class HlmMenuBarComponent {
 	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(userCls: ClassValue) {

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BrnMenuGroupDirective } from '@spartan-ng/ui-menu-brain';
+
+@Component({
+	selector: 'hlm-menu-group',
+	standalone: true,
+	host: {
+		class: 'block',
+	},
+	hostDirectives: [BrnMenuGroupDirective],
+	template: `
+		<ng-content />
+	`,
+})
+export class HlmMenuGroupComponent {}

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { radixCheck } from '@ng-icons/radix-icons';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';

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

@@ -0,0 +1,41 @@
+import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuItemCheckboxDirective } from '@spartan-ng/ui-menu-brain';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmMenuItemCheckbox]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [
+		{
+			directive: BrnMenuItemCheckboxDirective,
+			inputs: ['disabled: disabled', 'checked: checked'],
+			outputs: ['triggered: triggered'],
+		},
+	],
+})
+export class HlmMenuItemCheckboxDirective {
+	private readonly _inset = signal<ClassValue>(false);
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+	@Input({ transform: booleanAttribute })
+	set inset(value: boolean) {
+		this._inset.set(value);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'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',
+			this._inset() && 'pl-10',
+			this._userCls(),
+		);
+	}
+}

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

@@ -1,4 +1,4 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { radixDotFilled } from '@ng-icons/radix-icons';
 import { hlm } from '@spartan-ng/ui-core';
 import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';

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

@@ -0,0 +1,41 @@
+import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuItemRadioDirective } from '@spartan-ng/ui-menu-brain';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmMenuItemRadio]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+	hostDirectives: [
+		{
+			directive: BrnMenuItemRadioDirective,
+			inputs: ['disabled: disabled', 'checked: checked'],
+			outputs: ['triggered: triggered'],
+		},
+	],
+})
+export class HlmMenuItemRadioDirective {
+	private readonly _inset = signal<ClassValue>(false);
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+	@Input({ transform: booleanAttribute })
+	set inset(value: boolean) {
+		this._inset.set(value);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(
+			'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',
+			this._inset() && 'pl-10',
+			this._userCls(),
+		);
+	}
+}

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

@@ -1,33 +1,50 @@
 import { booleanAttribute, computed, Directive, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuItemDirective } from '@spartan-ng/ui-menu-brain';
+import { cva, VariantProps } from 'class-variance-authority';
 import { 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-10', false: '' } },
+		defaultVariants: { inset: false },
+	},
+);
+export type HlmMenuItemVariants = VariantProps<typeof hlmMenuItemVariants>;
+
 @Directive({
-	selector: '[hlm][brnMenuItem], [hlm][brnMenuItemRadio], [hlm][brnMenuItemCheckbox]',
+	selector: '[hlmMenuItem]',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [
+		{
+			directive: BrnMenuItemDirective,
+			inputs: ['disabled: disabled'],
+			outputs: ['triggered: triggered'],
+		},
+	],
 })
 export class HlmMenuItemDirective {
-	private readonly _inset = signal<ClassValue>(false);
+	private readonly _inset = signal<boolean>(false);
 
 	private readonly _userCls = signal<ClassValue>('');
+
 	@Input()
 	set class(userCls: ClassValue) {
 		this._userCls.set(userCls);
 	}
+
 	@Input({ transform: booleanAttribute })
 	set inset(value: boolean) {
 		this._inset.set(value);
 	}
 
 	protected _computedClass = computed(() => this._generateClass());
+
 	private _generateClass() {
-		return hlm(
-			'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',
-			this._inset() && 'pl-10',
-			this._userCls(),
-		);
+		return hlm(hlmMenuItemVariants({ inset: this._inset() }), this._userCls());
 	}
 }

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

@@ -1,9 +1,10 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const menuVariants = cva(
+export const menuVariants = cva(
 	'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',
 	{
 		variants: {
@@ -19,14 +20,18 @@ const menuVariants = cva(
 );
 type MenuVariants = VariantProps<typeof menuVariants>;
 
-@Directive({
-	selector: '[hlm][brnMenu]',
+@Component({
+	selector: 'hlm-menu',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnMenuDirective],
+	template: `
+		<ng-content />
+	`,
 })
-export class HlmMenuDirective {
+export class HlmMenuComponent {
 	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(userCls: ClassValue) {

package/src/generators/ui/libs/ui-menu-helm/files/lib/{hlm-sub-menu.directive.ts.template → hlm-sub-menu.component.ts.template}

@@ -1,15 +1,20 @@
-import { Directive, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
+import { BrnMenuDirective } from '@spartan-ng/ui-menu-brain';
 import { ClassValue } from 'clsx';
 
-@Directive({
-	selector: '[hlm][brnSubMenu]',
+@Component({
+	selector: 'hlm-sub-menu',
 	standalone: true,
 	host: {
 		'[class]': '_computedClass()',
 	},
+	hostDirectives: [BrnMenuDirective],
+	template: `
+		<ng-content />
+	`,
 })
-export class HlmSubMenuDirective {
+export class HlmSubMenuComponent {
 	private readonly _userCls = signal<ClassValue>('');
 	@Input()
 	set class(userCls: ClassValue) {

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

@@ -3,7 +3,7 @@ import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spa
 import { cva } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const sheetVariants = cva(
+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',
 	{
 		variants: {

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

@@ -1,9 +1,9 @@
-import { Component, Input, computed, signal } from '@angular/core';
+import { Component, computed, Input, signal } from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 
-const spinnerVariants = cva('inline-block', {
+export const spinnerVariants = cva('inline-block', {
 	variants: {
 		variant: {
 			default: 'animate-spin [&>svg]:text-foreground/30 [&>svg]:fill-accent',

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

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 
+import { HlmCaptionComponent } from './lib/hlm-caption.component';
 import { HlmTableComponent } from './lib/hlm-table.component';
 import { HlmTableDirective } from './lib/hlm-table.directive';
 import { HlmTdComponent } from './lib/hlm-td.component';
 import { HlmThComponent } from './lib/hlm-th.component';
 import { HlmTrowComponent } from './lib/hlm-trow.component';
 
+export { HlmCaptionComponent } from './lib/hlm-caption.component';
 export { HlmTableComponent } from './lib/hlm-table.component';
 export { HlmTableDirective } from './lib/hlm-table.directive';
 export { HlmTdComponent } from './lib/hlm-td.component';
@@ -15,6 +17,7 @@ export { HlmTrowComponent } from './lib/hlm-trow.component';
 export const HlmTableImports = [
 	HlmTableComponent,
 	HlmTableDirective,
+	HlmCaptionComponent,
 	HlmThComponent,
 	HlmTdComponent,
 	HlmTrowComponent,

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

@@ -0,0 +1,73 @@
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	effect,
+	inject,
+	Input,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+import { HlmTableComponent } from '../index';
+
+let captionIdSequence = 0;
+
+@Component({
+	selector: 'hlm-caption',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[id]': '_id()',
+	},
+	template: `
+		<ng-content />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+})
+export class HlmCaptionComponent {
+	private readonly _table = inject(HlmTableComponent, { optional: true });
+
+	private readonly _hidden = signal(false);
+	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-center block mt-4 text-sm text-muted-foreground',
+			this._hidden() ? 'sr-only' : 'order-last',
+			this._userCls(),
+		),
+	);
+	protected readonly _id = signal<string | null | undefined>(`${captionIdSequence++}`);
+
+	@Input({ transform: booleanAttribute })
+	public truncate = false;
+
+	@Input()
+	set class(inputs: ClassValue) {
+		this._userCls.set(inputs);
+	}
+
+	@Input()
+	set id(value: string | null | undefined) {
+		this._id.set(value);
+	}
+
+	@Input({ transform: booleanAttribute })
+	set hidden(value: boolean) {
+		this._hidden.set(value);
+	}
+
+	constructor() {
+		effect(
+			() => {
+				const id = this._id();
+				if (!this._table) return;
+				this._table.labeledBy = id;
+			},
+			{ allowSignalWrites: true },
+		);
+	}
+}

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

@@ -1,4 +1,12 @@
-import { booleanAttribute, Component, computed, Input, signal } from '@angular/core';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	Input,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -8,10 +16,13 @@ import { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 		role: 'table',
+		'[attr.aria-labelledby]': '_labeledBy()',
 	},
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTableComponent {
 	@Input({ transform: booleanAttribute })
@@ -23,8 +34,15 @@ export class HlmTableComponent {
 		this._userCls.set(inputs);
 	}
 
+	protected readonly _labeledBy = signal<string | null | undefined>(undefined);
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input({ alias: 'aria-labelledby' })
+	set labeledBy(value: string | null | undefined) {
+		this._labeledBy.set(value);
+	}
+
 	protected _computedClass = computed(() => this._generateClass());
 	private _generateClass() {
-		return hlm('flex flex-col [&_hlm-trow:last-child]:border-0', this._userCls());
+		return hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this._userCls());
 	}
 }

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

@@ -7,11 +7,12 @@ export class HlmTableDirective {
 
 	constructor() {
 		this._tableClassesSettable?.setTableClasses({
-			table: 'flex flex-col [&_cdk-row:last-child]:border-0',
+			table: 'flex flex-col text-sm [&_cdk-row:last-child]:border-0',
 			headerRow:
-				'flex  min-w-[100%] w-fit border-b border-border [&.cdk-table-sticky]:bg-background [&.cdk-table-sticky]:hover:bg-muted',
+				'flex min-w-[100%] w-fit border-b border-border [&.cdk-table-sticky]:bg-background ' +
+				'[&.cdk-table-sticky>*]:z-[101] [&.cdk-table-sticky]:before:z-0 [&.cdk-table-sticky]:before:block [&.cdk-table-sticky]:hover:before:bg-muted/50 [&.cdk-table-sticky]:before:absolute [&.cdk-table-sticky]:before:inset-0',
 			bodyRow:
-				'flex min-w-[100%] w-fit border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+				'flex min-w-[100%] w-fit border-b border-border transition-[background-color] hover:bg-muted/50 [&:has([role=checkbox][aria-checked=true])]:bg-muted',
 		});
 	}
 }

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

@@ -1,12 +1,20 @@
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, Input, booleanAttribute, computed, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	Input,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-td',
 	standalone: true,
-	imports: [NgTemplateOutlet, NgIf],
+	imports: [NgTemplateOutlet],
 	host: {
 		'[class]': '_computedClass()',
 	},
@@ -14,24 +22,28 @@ import { ClassValue } from 'clsx';
 		<ng-template #content>
 			<ng-content />
 		</ng-template>
-		<span *ngIf="truncate" class="flex-1 truncate">
+		@if (truncate) {
+			<span class="flex-1 truncate">
+				<ng-container [ngTemplateOutlet]="content" />
+			</span>
+		} @else {
 			<ng-container [ngTemplateOutlet]="content" />
-		</span>
-		<ng-container *ngIf="!truncate" [ngTemplateOutlet]="content" />
+		}
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTdComponent {
 	@Input({ transform: booleanAttribute })
 	public truncate = false;
 
 	private readonly _userCls = signal<ClassValue>('');
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._userCls()),
+	);
+
 	@Input()
 	set class(inputs: ClassValue) {
 		this._userCls.set(inputs);
 	}
-
-	protected _computedClass = computed(() => this._generateClass());
-	private _generateClass() {
-		return hlm('flex flex-none p-2 items-center [&:has([role=checkbox])]:pr-0', this._userCls());
-	}
 }

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

@@ -1,5 +1,13 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, Input, booleanAttribute, computed, signal } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	Input,
+	ViewEncapsulation,
+	booleanAttribute,
+	computed,
+	signal,
+} from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -19,6 +27,8 @@ import { ClassValue } from 'clsx';
 		</span>
 		<ng-container *ngIf="!truncate" [ngTemplateOutlet]="content" />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmThComponent {
 	@Input({ transform: booleanAttribute })
@@ -33,7 +43,7 @@ export class HlmThComponent {
 	protected _computedClass = computed(() => this._generateClass());
 	private _generateClass() {
 		return hlm(
-			'flex flex-none h-12 px-2 text-sm items-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+			'flex flex-none h-12 px-4 text-sm items-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
 			this._userCls(),
 		);
 	}

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

@@ -1,4 +1,12 @@
-import { booleanAttribute, Component, computed, Input, signal } from '@angular/core';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	Input,
+	signal,
+	ViewEncapsulation,
+} from '@angular/core';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
 
@@ -12,6 +20,8 @@ import { ClassValue } from 'clsx';
 	template: `
 		<ng-content />
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
 })
 export class HlmTrowComponent {
 	@Input({ transform: booleanAttribute })