@spartan-ng/cli 0.0.1-alpha.574 → 0.0.1-alpha.576

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

@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
-import { BrnDialog, BrnDialogOverlay, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
 import { HlmDialogOverlay } from './hlm-dialog-overlay';
 
 @Component({
 	selector: 'hlm-dialog',
 	exportAs: 'hlmDialog',
-	imports: [BrnDialogOverlay, HlmDialogOverlay],
+	imports: [HlmDialogOverlay],
 	providers: [
 		{
 			provide: BrnDialog,
@@ -17,7 +17,7 @@ import { HlmDialogOverlay } from './hlm-dialog-overlay';
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<brn-dialog-overlay hlm />
+		<hlm-dialog-overlay />
 		<ng-content />
 	`,
 })

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

@@ -1,27 +1,14 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ElementRef,
-	Renderer2,
-	computed,
-	effect,
-	inject,
-	input,
-	signal,
-} from '@angular/core';
+import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-hover-card-content',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmHoverCardContent],hlm-hover-card-content',
 	host: {
+		'data-slot': 'hover-card-content',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmHoverCardContent {
 	private readonly _renderer = inject(Renderer2);

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

@@ -1,7 +1,9 @@
-import { HlmPopoverClose } from './lib/hlm-popover-close';
+import { HlmPopover } from './lib/hlm-popover';
 import { HlmPopoverContent } from './lib/hlm-popover-content';
+import { HlmPopoverTrigger } from './lib/hlm-popover-trigger';
 
-export * from './lib/hlm-popover-close';
+export * from './lib/hlm-popover';
 export * from './lib/hlm-popover-content';
+export * from './lib/hlm-popover-trigger';
 
-export const HlmPopoverImports = [HlmPopoverContent, HlmPopoverClose] as const;
+export const HlmPopoverImports = [HlmPopover, HlmPopoverContent, HlmPopoverTrigger] as const;

package/src/generators/ui/libs/popover/files/lib/hlm-popover-trigger.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+
+@Directive({
+	selector: 'button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]',
+	hostDirectives: [
+		{ directive: BrnPopoverTrigger, inputs: ['id', 'brnPopoverTriggerFor: hlmPopoverTriggerFor', 'type'] },
+	],
+	host: {
+		'data-slot': 'popover-trigger',
+	},
+})
+export class HlmPopoverTrigger {}

package/src/generators/ui/libs/popover/files/lib/hlm-popover.ts.template

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnPopover } from '@spartan-ng/brain/popover';
+
+@Directive({
+	selector: '[hlmPopover],hlm-popover',
+	hostDirectives: [
+		{
+			directive: BrnPopover,
+			inputs: ['align', 'autoFocus', 'closeDelay', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+})
+export class HlmPopover {}

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

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-radio-group',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmRadioGroup],hlm-radio-group',
 	hostDirectives: [
 		{
 			directive: BrnRadioGroup,
@@ -17,7 +16,6 @@ import type { ClassValue } from 'clsx';
 		'data-slot': 'radio-group',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content />',
 })
 export class HlmRadioGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,3 +1,4 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
 import { isPlatformBrowser } from '@angular/common';
 import {
 	booleanAttribute,
@@ -79,10 +80,10 @@ export class HlmRadio<T = unknown> {
 	public readonly value = input.required<T>();
 
 	/** 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 });
 
 	/**
 	 * Event emitted when the checked state of this radio button changes.

package/src/generators/ui/libs/resizable/files/lib/hlm-resizable-group.ts.template

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnResizableGroup } from '@spartan-ng/brain/resizable';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-resizable-group',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmResizableGroup],hlm-resizable-group',
 	hostDirectives: [
 		{
 			directive: BrnResizableGroup,
@@ -14,11 +13,9 @@ import type { ClassValue } from 'clsx';
 		},
 	],
 	host: {
+		'data-slot': 'resizable-group',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmResizableGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/resizable/files/lib/hlm-resizable-handle.ts.template

@@ -1,12 +1,10 @@
-import type { ClassValue } from 'clsx';
-
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideGripVertical } from '@ng-icons/lucide';
 import { BrnResizableHandle } from '@spartan-ng/brain/resizable';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-resizable-handle',
@@ -16,6 +14,7 @@ import { hlm } from '<%- importAlias %>/utils';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
 	host: {
+		'data-slot': 'resizable-handle',
 		'[class]': '_computedClass()',
 	},
 	template: `

package/src/generators/ui/libs/resizable/files/lib/hlm-resizable-panel.ts.template

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnResizablePanel } from '@spartan-ng/brain/resizable';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-resizable-panel',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmResizablePanel],hlm-resizable-panel',
 	hostDirectives: [
 		{
 			directive: BrnResizablePanel,
@@ -13,11 +12,9 @@ import type { ClassValue } from 'clsx';
 		},
 	],
 	host: {
+		'data-slot': 'resizable-panel',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmResizablePanel {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

package/src/generators/ui/libs/sheet/files/index.ts.template

@@ -6,6 +6,7 @@ import { HlmSheetFooter } from './lib/hlm-sheet-footer';
 import { HlmSheetHeader } from './lib/hlm-sheet-header';
 import { HlmSheetOverlay } from './lib/hlm-sheet-overlay';
 import { HlmSheetTitle } from './lib/hlm-sheet-title';
+import { HlmSheetTrigger } from './lib/hlm-sheet-trigger';
 
 export * from './lib/hlm-sheet';
 export * from './lib/hlm-sheet-close';
@@ -15,6 +16,7 @@ export * from './lib/hlm-sheet-footer';
 export * from './lib/hlm-sheet-header';
 export * from './lib/hlm-sheet-overlay';
 export * from './lib/hlm-sheet-title';
+export * from './lib/hlm-sheet-trigger';
 
 export const HlmSheetImports = [
 	HlmSheet,
@@ -25,4 +27,5 @@ export const HlmSheetImports = [
 	HlmSheetHeader,
 	HlmSheetOverlay,
 	HlmSheetTitle,
+	HlmSheetTrigger,
 ] as const;

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

@@ -1,10 +1,13 @@
 import { Directive, computed, input } from '@angular/core';
+import { BrnSheetClose } from '@spartan-ng/brain/sheet';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmSheetClose],[brnSheetClose][hlm]',
+	selector: 'button[hlmSheetClose]',
+	hostDirectives: [{ directive: BrnSheetClose, inputs: ['delay'] }],
 	host: {
+		'data-slot': 'sheet-close',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -9,11 +9,10 @@ import {
 	input,
 	signal,
 } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { BrnSheetClose } from '@spartan-ng/brain/sheet';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmIconImports } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
@@ -40,16 +39,17 @@ export const sheetVariants = cva(
 
 @Component({
 	selector: 'hlm-sheet-content',
-	imports: [HlmSheetClose, BrnSheetClose, NgIcon, HlmIcon],
+	imports: [HlmSheetClose, HlmIconImports],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'sheet-content',
 		'[class]': '_computedClass()',
 		'[attr.data-state]': 'state()',
 	},
 	template: `
 		<ng-content />
-		<button brnSheetClose hlm>
+		<button hlmSheetClose>
 			<span class="sr-only">Close</span>
 			<ng-icon hlm size="sm" name="lucideX" />
 		</button>

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmSheetDescription]',
 	hostDirectives: [BrnSheetDescription],
 	host: {
+		'data-slot': 'sheet-description',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,16 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-sheet-footer',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmSheetFooter],hlm-sheet-footer',
 	host: {
+		'data-slot': 'sheet-footer',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmSheetFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,16 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-sheet-header',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmSheetHeader],hlm-sheet-header',
 	host: {
+		'data-slot': 'sheet-header',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmSheetHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });

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

@@ -1,10 +1,12 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
 import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnSheetOverlay } from '@spartan-ng/brain/sheet';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmSheetOverlay],brn-sheet-overlay[hlm]',
+	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
+	hostDirectives: [BrnSheetOverlay],
 	host: {
 		'[class]': '_computedClass()',
 	},

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-title.ts.template

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmSheetTitle]',
 	hostDirectives: [BrnSheetTitle],
 	host: {
+		'data-slot': 'sheet-title',
 		'[class]': '_computedClass()',
 	},
 })

package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-trigger.ts.template

@@ -0,0 +1,11 @@
+import { Directive } from '@angular/core';
+import { BrnSheetTrigger } from '@spartan-ng/brain/sheet';
+
+@Directive({
+	selector: 'button[hlmSheetTrigger]',
+	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
+	host: {
+		'data-slot': 'sheet-trigger',
+	},
+})
+export class HlmSheetTrigger {}

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

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
 import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
-import { BrnSheet, BrnSheetOverlay } from '@spartan-ng/brain/sheet';
+import { BrnSheet } from '@spartan-ng/brain/sheet';
 import { HlmSheetOverlay } from './hlm-sheet-overlay';
 
 @Component({
 	selector: 'hlm-sheet',
 	exportAs: 'hlmSheet',
-	imports: [BrnSheetOverlay, HlmSheetOverlay],
+	imports: [HlmSheetOverlay],
 	providers: [
 		{
 			provide: BrnDialog,
@@ -22,7 +22,7 @@ import { HlmSheetOverlay } from './hlm-sheet-overlay';
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<brn-sheet-overlay hlm />
+		<hlm-sheet-overlay />
 		<ng-content />
 	`,
 })

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-wrapper.ts.template

@@ -20,6 +20,6 @@ export class HlmSidebarWrapper {
 		hlm('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', this.userClass()),
 	);
 
-	public readonly sidebarWidth = input(this._config.sidebarWidth);
-	public readonly sidebarWidthIcon = input(this._config.sidebarWidthIcon);
+	public readonly sidebarWidth = input<string>(this._config.sidebarWidth);
+	public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
 }

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar.ts.template

@@ -21,7 +21,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 	},
 	template: `
 		<ng-template #contentContainer>
-			<ng-content></ng-content>
+			<ng-content />
 		</ng-template>
 
 		@if (collapsible() === 'none') {
@@ -41,7 +41,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 					[style.--sidebar-width]="sidebarWidthMobile()"
 				>
 					<div class="flex h-full w-full flex-col">
-						<ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+						<ng-container *ngTemplateOutlet="contentContainer" />
 					</div>
 				</hlm-sheet-content>
 			</hlm-sheet>
@@ -54,7 +54,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 					data-slot="sidebar-inner"
 					class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
 				>
-					<ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+					<ng-container *ngTemplateOutlet="contentContainer" />
 				</div>
 			</div>
 		}
@@ -65,7 +65,7 @@ export class HlmSidebar {
 	private readonly _config = injectHlmSidebarConfig();
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly sidebarWidthMobile = input(this._config.sidebarWidthMobile);
+	public readonly sidebarWidthMobile = input<string>(this._config.sidebarWidthMobile);
 
 	public readonly side = input<'left' | 'right'>('left');
 	public readonly variant = input<SidebarVariant>(this._sidebarService.variant());

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmTabsContent]',
 	hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
 	host: {
+		'data-slot': 'tabs-content',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnTabsList } from '@spartan-ng/brain/tabs';
 import { hlm } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
@@ -20,14 +20,13 @@ export const listVariants = cva(
 );
 type ListVariants = VariantProps<typeof listVariants>;
 
-@Component({
-	selector: 'hlm-tabs-list',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmTabsList],hlm-tabs-list',
 	hostDirectives: [BrnTabsList],
 	host: {
+		'data-slot': 'tabs-list',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content/>',
 })
 export class HlmTabsList {
 	public readonly orientation = input<ListVariants['orientation']>('horizontal');

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

@@ -25,6 +25,7 @@ import { listVariants } from './hlm-tabs-list';
 	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'tabs-paginated-list',
 		'[class]': '_computedClass()',
 	},
 	template: `
@@ -48,7 +49,7 @@ import { listVariants } from './hlm-tabs-list';
 		<div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
 			<div class="relative grow transition-transform" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
 				<div #tabListInner [class]="_tabListClass()">
-					<ng-content></ng-content>
+					<ng-content />
 				</div>
 			</div>
 		</div>

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

@@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmTabsTrigger]',
 	hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
 	host: {
+		'data-slot': 'tabs-trigger',
 		'[class]': '_computedClass()',
 	},
 })

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

@@ -1,11 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { BrnTabs } from '@spartan-ng/brain/tabs';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-tabs',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmTabs],hlm-tabs',
 	hostDirectives: [
 		{
 			directive: BrnTabs,
@@ -14,9 +13,9 @@ import type { ClassValue } from 'clsx';
 		},
 	],
 	host: {
+		'data-slot': 'tabs',
 		'[class]': '_computedClass()',
 	},
-	template: '<ng-content/>',
 })
 export class HlmTabs {
 	public readonly tab = input.required<string>();

package/src/generators/ui/libs/tooltip/files/lib/hlm-tooltip-trigger.ts.template

@@ -34,5 +34,8 @@ export const DEFAULT_TOOLTIP_CONTENT_CLASSES =
 			],
 		},
 	],
+	host: {
+		'data-slot': 'tooltip-trigger',
+	},
 })
 export class HlmTooltipTrigger {}

package/src/generators/ui/libs/tooltip/files/lib/hlm-tooltip.ts.template

@@ -1,15 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnTooltip } from '@spartan-ng/brain/tooltip';
 
-@Component({
-	selector: 'hlm-tooltip',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmTooltip],hlm-tooltip',
 	hostDirectives: [BrnTooltip],
 	host: {
+		'data-slot': 'tooltip',
 		'[style]': '{display: "contents"}',
 	},
-	template: `
-		<ng-content />
-	`,
 })
 export class HlmTooltip {}