@spartan-ng/cli 0.0.1-alpha.492 → 0.0.1-alpha.494

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnMenuDirective } from '@spartan-ng/brain/menu';
+import { BrnMenu } from '@spartan-ng/brain/menu';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -8,13 +8,13 @@ import type { ClassValue } from 'clsx';
 	host: {
 		'[class]': '_computedClass()',
 	},
-	hostDirectives: [BrnMenuDirective],
+	hostDirectives: [BrnMenu],
 	template: `
 		<ng-content />
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmSubMenuComponent {
+export class HlmSubMenu {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -1,35 +1,35 @@
 import { NgModule } from '@angular/core';
 
-import { HlmNumberedPaginationQueryParamsComponent } from './lib/hlm-numbered-pagination-query-params.component';
-import { HlmNumberedPaginationComponent } from './lib/hlm-numbered-pagination.component';
-import { HlmPaginationContentDirective } from './lib/hlm-pagination-content.directive';
-import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.component';
-import { HlmPaginationItemDirective } from './lib/hlm-pagination-item.directive';
-import { HlmPaginationLinkDirective } from './lib/hlm-pagination-link.directive';
-import { HlmPaginationNextComponent } from './lib/hlm-pagination-next.component';
-import { HlmPaginationPreviousComponent } from './lib/hlm-pagination-previous.component';
-import { HlmPaginationDirective } from './lib/hlm-pagination.directive';
+import { HlmNumberedPagination } from './lib/hlm-numbered-pagination';
+import { HlmNumberedPaginationQueryParams } from './lib/hlm-numbered-pagination-query-params';
+import { HlmPagination } from './lib/hlm-pagination';
+import { HlmPaginationContent } from './lib/hlm-pagination-content';
+import { HlmPaginationEllipsis } from './lib/hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './lib/hlm-pagination-item';
+import { HlmPaginationLink } from './lib/hlm-pagination-link';
+import { HlmPaginationNext } from './lib/hlm-pagination-next';
+import { HlmPaginationPrevious } from './lib/hlm-pagination-previous';
 
-export * from './lib/hlm-numbered-pagination-query-params.component';
-export * from './lib/hlm-numbered-pagination.component';
-export * from './lib/hlm-pagination-content.directive';
-export * from './lib/hlm-pagination-ellipsis.component';
-export * from './lib/hlm-pagination-item.directive';
-export * from './lib/hlm-pagination-link.directive';
-export * from './lib/hlm-pagination-next.component';
-export * from './lib/hlm-pagination-previous.component';
-export * from './lib/hlm-pagination.directive';
+export * from './lib/hlm-numbered-pagination';
+export * from './lib/hlm-numbered-pagination-query-params';
+export * from './lib/hlm-pagination';
+export * from './lib/hlm-pagination-content';
+export * from './lib/hlm-pagination-ellipsis';
+export * from './lib/hlm-pagination-item';
+export * from './lib/hlm-pagination-link';
+export * from './lib/hlm-pagination-next';
+export * from './lib/hlm-pagination-previous';
 
 export const HlmPaginationImports = [
-	HlmPaginationDirective,
-	HlmPaginationContentDirective,
-	HlmPaginationItemDirective,
-	HlmPaginationLinkDirective,
-	HlmPaginationPreviousComponent,
-	HlmPaginationNextComponent,
-	HlmPaginationEllipsisComponent,
-	HlmNumberedPaginationComponent,
-	HlmNumberedPaginationQueryParamsComponent,
+	HlmPagination,
+	HlmPaginationContent,
+	HlmPaginationItem,
+	HlmPaginationLink,
+	HlmPaginationPrevious,
+	HlmPaginationNext,
+	HlmPaginationEllipsis,
+	HlmNumberedPagination,
+	HlmNumberedPaginationQueryParams,
 ] as const;
 
 @NgModule({

package/src/generators/ui/libs/ui-pagination-helm/files/lib/{hlm-numbered-pagination-query-params.component.ts.template → hlm-numbered-pagination-query-params.ts.template}

@@ -12,14 +12,14 @@ import {
 import { FormsModule } from '@angular/forms';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
-import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination.component';
-import { HlmPaginationContentDirective } from './hlm-pagination-content.directive';
-import { HlmPaginationEllipsisComponent } from './hlm-pagination-ellipsis.component';
-import { HlmPaginationItemDirective } from './hlm-pagination-item.directive';
-import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
-import { HlmPaginationNextComponent } from './hlm-pagination-next.component';
-import { HlmPaginationPreviousComponent } from './hlm-pagination-previous.component';
-import { HlmPaginationDirective } from './hlm-pagination.directive';
+import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
+import { HlmPagination } from './hlm-pagination';
+import { HlmPaginationContent } from './hlm-pagination-content';
+import { HlmPaginationEllipsis } from './hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './hlm-pagination-item';
+import { HlmPaginationLink } from './hlm-pagination-link';
+import { HlmPaginationNext } from './hlm-pagination-next';
+import { HlmPaginationPrevious } from './hlm-pagination-previous';
 
 @Component({
 	selector: 'hlm-numbered-pagination-query-params',
@@ -89,19 +89,19 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 	`,
 	imports: [
 		FormsModule,
-		HlmPaginationDirective,
-		HlmPaginationContentDirective,
-		HlmPaginationItemDirective,
-		HlmPaginationPreviousComponent,
-		HlmPaginationNextComponent,
-		HlmPaginationLinkDirective,
-		HlmPaginationEllipsisComponent,
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
 		BrnSelectImports,
 		HlmSelectImports,
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmNumberedPaginationQueryParamsComponent {
+export class HlmNumberedPaginationQueryParams {
 	/**
 	 * The current (active) page.
 	 */

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

@@ -12,13 +12,13 @@ import {
 import { FormsModule } from '@angular/forms';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
-import { HlmPaginationContentDirective } from './hlm-pagination-content.directive';
-import { HlmPaginationEllipsisComponent } from './hlm-pagination-ellipsis.component';
-import { HlmPaginationItemDirective } from './hlm-pagination-item.directive';
-import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
-import { HlmPaginationNextComponent } from './hlm-pagination-next.component';
-import { HlmPaginationPreviousComponent } from './hlm-pagination-previous.component';
-import { HlmPaginationDirective } from './hlm-pagination.directive';
+import { HlmPagination } from './hlm-pagination';
+import { HlmPaginationContent } from './hlm-pagination-content';
+import { HlmPaginationEllipsis } from './hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './hlm-pagination-item';
+import { HlmPaginationLink } from './hlm-pagination-link';
+import { HlmPaginationNext } from './hlm-pagination-next';
+import { HlmPaginationPrevious } from './hlm-pagination-previous';
 
 @Component({
 	selector: 'hlm-numbered-pagination',
@@ -74,19 +74,19 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 	`,
 	imports: [
 		FormsModule,
-		HlmPaginationDirective,
-		HlmPaginationContentDirective,
-		HlmPaginationItemDirective,
-		HlmPaginationPreviousComponent,
-		HlmPaginationNextComponent,
-		HlmPaginationLinkDirective,
-		HlmPaginationEllipsisComponent,
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
 		BrnSelectImports,
 		HlmSelectImports,
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmNumberedPaginationComponent {
+export class HlmNumberedPagination {
 	/**
 	 * The current (active) page.
 	 */

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

@@ -15,7 +15,7 @@ export type PaginationContentVariants = VariantProps<typeof paginationContentVar
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmPaginationContentDirective {
+export class HlmPaginationContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm(paginationContentVariants(), this.userClass()));
 }

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

@@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
+import { HlmIcon } from '@spartan-ng/helm/icon';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-pagination-ellipsis',
-	imports: [NgIcon, HlmIconDirective],
+	imports: [NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideEllipsis })],
 	template: `
 		<span [class]="_computedClass()">
@@ -17,7 +17,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmPaginationEllipsisComponent {
+export class HlmPaginationEllipsis {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** Screen reader only text for the ellipsis */
 	public readonly srOnlyText = input<string>('More pages');

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

@@ -16,7 +16,7 @@ export type PaginationItemVariants = VariantProps<typeof paginationItemVariants>
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmPaginationItemDirective {
+export class HlmPaginationItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm(paginationItemVariants(), this.userClass()));
 }

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

@@ -37,7 +37,7 @@ export type PaginationLinkVariants = VariantProps<typeof paginationLinkVariants>
 		'[attr.aria-current]': 'isActive() ? "page" : null',
 	},
 })
-export class HlmPaginationLinkDirective {
+export class HlmPaginationLink {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** Whether the link is active (i.e., the current page). */
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

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

@@ -4,14 +4,14 @@ import { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import type { ButtonVariants } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
-import type { ClassValue } from 'clsx';
-import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+import { ButtonVariants } from '@spartan-ng/helm/button';
+import { HlmIcon } from '@spartan-ng/helm/icon';
+import { ClassValue } from 'clsx';
+import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({
 	selector: 'hlm-pagination-next',
-	imports: [HlmPaginationLinkDirective, NgIcon, HlmIconDirective],
+	imports: [HlmPaginationLink, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronRight })],
 	template: `
 		<a
@@ -29,7 +29,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmPaginationNextComponent {
+export class HlmPaginationNext {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the next page. */
 	public readonly link = input<RouterLink['routerLink']>();

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

@@ -4,14 +4,14 @@ import { RouterLink } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft } from '@ng-icons/lucide';
 import { hlm } from '@spartan-ng/brain/core';
-import type { ButtonVariants } from '@spartan-ng/helm/button';
-import { HlmIconDirective } from '@spartan-ng/helm/icon';
-import type { ClassValue } from 'clsx';
-import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+import { ButtonVariants } from '@spartan-ng/helm/button';
+import { HlmIcon } from '@spartan-ng/helm/icon';
+import { ClassValue } from 'clsx';
+import { HlmPaginationLink } from './hlm-pagination-link';
 
 @Component({
 	selector: 'hlm-pagination-previous',
-	imports: [HlmPaginationLinkDirective, NgIcon, HlmIconDirective],
+	imports: [HlmPaginationLink, NgIcon, HlmIcon],
 	providers: [provideIcons({ lucideChevronLeft })],
 	template: `
 		<a
@@ -29,7 +29,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmPaginationPreviousComponent {
+export class HlmPaginationPrevious {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the previous page. */
 	public readonly link = input<RouterLink['routerLink']>();

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

@@ -17,7 +17,7 @@ export type PaginationVariants = VariantProps<typeof paginationVariants>;
 		'[attr.aria-label]': 'ariaLabel()',
 	},
 })
-export class HlmPaginationDirective {
+export class HlmPagination {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	/** The aria-label for the pagination component. */

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

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 
-import { HlmPopoverCloseDirective } from './lib/hlm-popover-close.directive';
-import { HlmPopoverContentDirective } from './lib/hlm-popover-content.directive';
+import { HlmPopoverClose } from './lib/hlm-popover-close';
+import { HlmPopoverContent } from './lib/hlm-popover-content';
 
-export * from './lib/hlm-popover-close.directive';
-export * from './lib/hlm-popover-content.directive';
+export * from './lib/hlm-popover-close';
+export * from './lib/hlm-popover-content';
 
-export const HlmPopoverImports = [HlmPopoverContentDirective, HlmPopoverCloseDirective] as const;
+export const HlmPopoverImports = [HlmPopoverContent, HlmPopoverClose] as const;
 
 @NgModule({
 	imports: [...HlmPopoverImports],

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmPopoverCloseDirective {
+export class HlmPopoverClose {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmPopoverContentDirective {
+export class HlmPopoverContent {
 	private readonly _stateProvider = injectExposesStateProvider({ host: true });
 	public state = this._stateProvider.state ?? signal('closed');
 	private readonly _renderer = inject(Renderer2);

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

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 
-import { HlmProgressIndicatorDirective } from './lib/hlm-progress-indicator.directive';
-import { HlmProgressDirective } from './lib/hlm-progress.directive';
+import { HlmProgress } from './lib/hlm-progress';
+import { HlmProgressIndicator } from './lib/hlm-progress-indicator';
 
-export * from './lib/hlm-progress-indicator.directive';
-export * from './lib/hlm-progress.directive';
+export * from './lib/hlm-progress';
+export * from './lib/hlm-progress-indicator';
 
-export const HlmProgressImports = [HlmProgressDirective, HlmProgressIndicatorDirective] as const;
+export const HlmProgressImports = [HlmProgress, HlmProgressIndicator] as const;
 
 @NgModule({
 	imports: [...HlmProgressImports],

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

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 		'[style.transform]': '_transform()',
 	},
 })
-export class HlmProgressIndicatorDirective {
+export class HlmProgressIndicator {
 	private readonly _progress = injectBrnProgress();
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 

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

@@ -8,7 +8,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmProgressDirective {
+export class HlmProgress {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		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/index.ts.template

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 
-import { HlmRadioGroupComponent } from './lib/hlm-radio-group.component';
-import { HlmRadioIndicatorComponent } from './lib/hlm-radio-indicator.component';
-import { HlmRadioComponent } from './lib/hlm-radio.component';
+import { HlmRadio } from './lib/hlm-radio';
+import { HlmRadioGroup } from './lib/hlm-radio-group';
+import { HlmRadioIndicator } from './lib/hlm-radio-indicator';
 
-export * from './lib/hlm-radio-group.component';
-export * from './lib/hlm-radio-indicator.component';
-export * from './lib/hlm-radio.component';
+export * from './lib/hlm-radio';
+export * from './lib/hlm-radio-group';
+export * from './lib/hlm-radio-indicator';
 
-export const HlmRadioGroupImports = [HlmRadioGroupComponent, HlmRadioComponent, HlmRadioIndicatorComponent];
+export const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator];
 
 @NgModule({
 	imports: [...HlmRadioGroupImports],

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

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnRadioGroupDirective } from '@spartan-ng/brain/radio-group';
+import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-radio-group',
 	hostDirectives: [
 		{
-			directive: BrnRadioGroupDirective,
+			directive: BrnRadioGroup,
 			inputs: ['name', 'value', 'disabled', 'required', 'direction'],
 			outputs: ['valueChange'],
 		},
@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 	template: '<ng-content />',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmRadioGroupComponent {
+export class HlmRadioGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	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 → hlm-radio-indicator.ts.template}

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HlmRadioIndicatorComponent {
+export class HlmRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -14,12 +14,12 @@ import {
 	signal,
 } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnRadioChange, BrnRadioComponent } from '@spartan-ng/brain/radio-group';
+import { BrnRadio, BrnRadioChange } from '@spartan-ng/brain/radio-group';
 import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-radio',
-	imports: [BrnRadioComponent],
+	imports: [BrnRadio],
 	template: `
 		<brn-radio
 			[id]="id()"
@@ -45,7 +45,7 @@ import { ClassValue } from 'clsx';
 		'[attr.data-disabled]': '_state().disabled() ? "" : null',
 	},
 })
-export class HlmRadioComponent<T = unknown> {
+export class HlmRadio<T = unknown> {
 	private readonly _document = inject(DOCUMENT);
 	private readonly _renderer = inject(Renderer2);
 	private readonly _elementRef = inject(ElementRef);

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HlmScrollAreaDirective } from './lib/hlm-scroll-area.directive';
+import { HlmScrollArea } from './lib/hlm-scroll-area';
 
-export * from './lib/hlm-scroll-area.directive';
+export * from './lib/hlm-scroll-area';
 
 @NgModule({
-	imports: [HlmScrollAreaDirective],
-	exports: [HlmScrollAreaDirective],
+	imports: [HlmScrollArea],
+	exports: [HlmScrollArea],
 })
 export class HlmScrollAreaModule {}

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

@@ -13,7 +13,7 @@ import type { ClassValue } from 'clsx';
 		'[style.--scrollbar-thickness]': '7',
 	},
 })
-export class HlmScrollAreaDirective {
+export class HlmScrollArea {
 	protected readonly _computedClass = computed(() => hlm('block', this.userClass()));
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 }

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

@@ -1,34 +1,34 @@
 import { NgModule } from '@angular/core';
-import { HlmSelectContentDirective } from './lib/hlm-select-content.directive';
-import { HlmSelectGroupDirective } from './lib/hlm-select-group.directive';
-import { HlmSelectLabelDirective } from './lib/hlm-select-label.directive';
-import { HlmSelectOptionComponent } from './lib/hlm-select-option.component';
-import { HlmSelectScrollDownComponent } from './lib/hlm-select-scroll-down.component';
-import { HlmSelectScrollUpComponent } from './lib/hlm-select-scroll-up.component';
-import { HlmSelectTriggerComponent } from './lib/hlm-select-trigger.component';
-import { HlmSelectValueDirective } from './lib/hlm-select-value.directive';
-import { HlmSelectDirective } from './lib/hlm-select.directive';
+import { HlmSelect } from './lib/hlm-select';
+import { HlmSelectContent } from './lib/hlm-select-content';
+import { HlmSelectGroup } from './lib/hlm-select-group';
+import { HlmSelectLabel } from './lib/hlm-select-label';
+import { HlmSelectOption } from './lib/hlm-select-option';
+import { HlmSelectScrollDown } from './lib/hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './lib/hlm-select-scroll-up';
+import { HlmSelectTrigger } from './lib/hlm-select-trigger';
+import { HlmSelectValue } from './lib/hlm-select-value';
 
-export * from './lib/hlm-select-content.directive';
-export * from './lib/hlm-select-group.directive';
-export * from './lib/hlm-select-label.directive';
-export * from './lib/hlm-select-option.component';
-export * from './lib/hlm-select-scroll-down.component';
-export * from './lib/hlm-select-scroll-up.component';
-export * from './lib/hlm-select-trigger.component';
-export * from './lib/hlm-select-value.directive';
-export * from './lib/hlm-select.directive';
+export * from './lib/hlm-select';
+export * from './lib/hlm-select-content';
+export * from './lib/hlm-select-group';
+export * from './lib/hlm-select-label';
+export * from './lib/hlm-select-option';
+export * from './lib/hlm-select-scroll-down';
+export * from './lib/hlm-select-scroll-up';
+export * from './lib/hlm-select-trigger';
+export * from './lib/hlm-select-value';
 
 export const HlmSelectImports = [
-	HlmSelectContentDirective,
-	HlmSelectTriggerComponent,
-	HlmSelectOptionComponent,
-	HlmSelectValueDirective,
-	HlmSelectDirective,
-	HlmSelectScrollUpComponent,
-	HlmSelectScrollDownComponent,
-	HlmSelectLabelDirective,
-	HlmSelectGroupDirective,
+	HlmSelectContent,
+	HlmSelectTrigger,
+	HlmSelectOption,
+	HlmSelectValue,
+	HlmSelect,
+	HlmSelectScrollUp,
+	HlmSelectScrollDown,
+	HlmSelectLabel,
+	HlmSelectGroup,
 ] as const;
 
 @NgModule({

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

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 		'[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
 	},
 })
-export class HlmSelectContentDirective {
+export class HlmSelectContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly stickyLabels = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,

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

@@ -1,16 +1,16 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnSelectGroupDirective } from '@spartan-ng/brain/select';
+import { BrnSelectGroup } from '@spartan-ng/brain/select';
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmSelectGroup], hlm-select-group',
-	hostDirectives: [BrnSelectGroupDirective],
+	hostDirectives: [BrnSelectGroup],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmSelectGroupDirective {
+export class HlmSelectGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm(this.userClass()));
 }

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

@@ -1,18 +1,18 @@
 import { Directive, computed, inject, input } from '@angular/core';
 import { hlm } from '@spartan-ng/brain/core';
-import { BrnSelectLabelDirective } from '@spartan-ng/brain/select';
+import { BrnSelectLabel } from '@spartan-ng/brain/select';
 import type { ClassValue } from 'clsx';
-import { HlmSelectContentDirective } from './hlm-select-content.directive';
+import { HlmSelectContent } from './hlm-select-content';
 
 @Directive({
 	selector: '[hlmSelectLabel], hlm-select-label',
-	hostDirectives: [BrnSelectLabelDirective],
+	hostDirectives: [BrnSelectLabel],
 	host: {
 		'[class]': '_computedClass()',
 	},
 })
-export class HlmSelectLabelDirective {
-	private readonly _selectContent = inject(HlmSelectContentDirective);
+export class HlmSelectLabel {
+	private readonly _selectContent = inject(HlmSelectContent);
 	private readonly _stickyLabels = computed(() => this._selectContent.stickyLabels());
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>