@spartan-ng/cli 0.0.1-alpha.655 → 0.0.1-alpha.656

package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template

@@ -10,7 +10,6 @@ import {
 	untracked,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { HlmSelectImports } from '<%- importAlias %>/select';
 import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
 import { HlmPagination } from './hlm-pagination';
@@ -32,8 +31,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 		HlmPaginationNext,
 		HlmPaginationLink,
 		HlmPaginationEllipsis,
-
-		BrnSelectImports,
 		HlmSelectImports,
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -89,16 +86,18 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</nav>
 
 			<!-- Show Page Size selector -->
-			<brn-select [(ngModel)]="itemsPerPage" class="ml-auto" placeholder="Page size">
+			<hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
 				<hlm-select-trigger class="w-fit">
 					<hlm-select-value />
 				</hlm-select-trigger>
-				<hlm-select-content>
-					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
-						<hlm-option [value]="pageSize">{{ pageSize }} / page</hlm-option>
-					}
+				<hlm-select-content *hlmSelectPortal>
+					<hlm-select-group>
+						@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
+							<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+						}
+					</hlm-select-group>
 				</hlm-select-content>
-			</brn-select>
+			</hlm-select>
 		</div>
 	`,
 })

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

@@ -10,7 +10,6 @@ import {
 	untracked,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { HlmSelectImports } from '<%- importAlias %>/select';
 import { HlmPagination } from './hlm-pagination';
 import { HlmPaginationContent } from './hlm-pagination-content';
@@ -31,7 +30,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 		HlmPaginationNext,
 		HlmPaginationLink,
 		HlmPaginationEllipsis,
-		BrnSelectImports,
 		HlmSelectImports,
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -73,16 +71,18 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</nav>
 
 			<!-- Show Page Size selector -->
-			<brn-select [(ngModel)]="itemsPerPage" class="ml-auto" placeholder="Page size">
+			<hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
 				<hlm-select-trigger class="w-fit">
 					<hlm-select-value />
 				</hlm-select-trigger>
-				<hlm-select-content>
-					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
-						<hlm-option [value]="pageSize">{{ pageSize }} / page</hlm-option>
-					}
+				<hlm-select-content *hlmSelectPortal>
+					<hlm-select-group>
+						@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
+							<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+						}
+					</hlm-select-group>
 				</hlm-select-content>
-			</brn-select>
+			</hlm-select>
 		</div>
 	`,
 })

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

@@ -1,34 +1,52 @@
 import { HlmSelect } from './lib/hlm-select';
 import { HlmSelectContent } from './lib/hlm-select-content';
 import { HlmSelectGroup } from './lib/hlm-select-group';
+import { HlmSelectItem } from './lib/hlm-select-item';
 import { HlmSelectLabel } from './lib/hlm-select-label';
-import { HlmSelectOption } from './lib/hlm-select-option';
+import { HlmSelectMultiple } from './lib/hlm-select-multiple';
+import { HlmSelectPlaceholder } from './lib/hlm-select-placeholder';
+import { HlmSelectPortal } from './lib/hlm-select-portal';
 import { HlmSelectScrollDown } from './lib/hlm-select-scroll-down';
 import { HlmSelectScrollUp } from './lib/hlm-select-scroll-up';
 import { HlmSelectSeparator } from './lib/hlm-select-separator';
 import { HlmSelectTrigger } from './lib/hlm-select-trigger';
 import { HlmSelectValue } from './lib/hlm-select-value';
+import { HlmSelectValueTemplate } from './lib/hlm-select-value-template';
+import { HlmSelectValues } from './lib/hlm-select-values';
+import { HlmSelectValuesContent } from './lib/hlm-select-values-content';
 
 export * from './lib/hlm-select';
 export * from './lib/hlm-select-content';
 export * from './lib/hlm-select-group';
+export * from './lib/hlm-select-item';
 export * from './lib/hlm-select-label';
-export * from './lib/hlm-select-option';
+export * from './lib/hlm-select-multiple';
+export * from './lib/hlm-select-placeholder';
+export * from './lib/hlm-select-portal';
 export * from './lib/hlm-select-scroll-down';
 export * from './lib/hlm-select-scroll-up';
 export * from './lib/hlm-select-separator';
 export * from './lib/hlm-select-trigger';
 export * from './lib/hlm-select-value';
+export * from './lib/hlm-select-value-template';
+export * from './lib/hlm-select-values';
+export * from './lib/hlm-select-values-content';
 
 export const HlmSelectImports = [
 	HlmSelect,
 	HlmSelectContent,
 	HlmSelectGroup,
+	HlmSelectItem,
 	HlmSelectLabel,
-	HlmSelectOption,
+	HlmSelectMultiple,
+	HlmSelectPlaceholder,
+	HlmSelectPortal,
 	HlmSelectScrollDown,
 	HlmSelectScrollUp,
 	HlmSelectSeparator,
 	HlmSelectTrigger,
 	HlmSelectValue,
+	HlmSelectValues,
+	HlmSelectValuesContent,
+	HlmSelectValueTemplate,
 ] as const;

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

@@ -1,26 +1,38 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
-import { Directive, booleanAttribute, input } from '@angular/core';
-import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
-import { classes } from '<%- importAlias %>/utils';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnSelectContent } from '@spartan-ng/brain/select';
+import { classes, hlm } from '<%- importAlias %>/utils';
+import { HlmSelectScrollDown } from './hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './hlm-select-scroll-up';
 
-@Directive({
-	selector: '[hlmSelectContent], hlm-select-content',
-	host: {
-		'[attr.data-state]': '_stateProvider?.state() ?? "open"',
-		'[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
-	},
+@Component({
+	selector: 'hlm-select-content',
+	imports: [HlmSelectScrollUp, HlmSelectScrollDown],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectContent],
+	template: `
+		@if (showScroll()) {
+			<hlm-select-scroll-up />
+		}
+
+		<div role="listbox" [class]="_computedListboxClasses()">
+			<ng-content />
+		</div>
+
+		@if (showScroll()) {
+			<hlm-select-scroll-down />
+		}
+	`,
 })
 export class HlmSelectContent {
-	public readonly stickyLabels = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-	protected readonly _stateProvider = injectExposesStateProvider({ optional: true });
-	protected readonly _sideProvider = injectExposedSideProvider({ optional: true });
+	protected readonly _computedListboxClasses = computed(() => hlm('flex flex-col'));
+
+	public readonly showScroll = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	constructor() {
 		classes(
 			() =>
-				'border-border 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 relative z-50 w-full min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px]',
+				'bg-popover no-scrollbar text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 relative isolate flex max-h-72 w-(--brn-select-width) min-w-36 flex-col overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100',
 		);
 	}
 }

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

@@ -1,8 +1,16 @@
 import { Directive } from '@angular/core';
 import { BrnSelectGroup } from '@spartan-ng/brain/select';
+import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmSelectGroup], hlm-select-group',
-	hostDirectives: [BrnSelectGroup],
+	selector: '[hlmSelectGroup],hlm-select-group',
+	hostDirectives: [{ directive: BrnSelectGroup }],
+	host: {
+		'data-slot': 'select-group',
+	},
 })
-export class HlmSelectGroup {}
+export class HlmSelectGroup {
+	constructor() {
+		classes(() => 'scroll-my-1 p-1');
+	}
+}

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { BrnSelectItem } from '@spartan-ng/brain/select';
+import { classes } from '<%- importAlias %>/utils';
+
+@Component({
+	selector: 'hlm-select-item',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnSelectItem, inputs: ['id', 'disabled', 'value'] }],
+	host: {
+		'data-slot': 'select-item',
+	},
+	template: `
+		<ng-content />
+		@if (_active()) {
+			<ng-icon name="lucideCheck" class="absolute right-2 flex items-center justify-center" aria-hidden="true" />
+		}
+	`,
+})
+export class HlmSelectItem {
+	private readonly _brnSelectItem = inject(BrnSelectItem);
+
+	protected readonly _active = this._brnSelectItem.active;
+
+	constructor() {
+		classes(
+			() =>
+				"data-highlighted:bg-accent data-highlighted::text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-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:not([class*='text-'])]:text-base *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		);
+	}
+}

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

@@ -1,20 +1,16 @@
-import { computed, Directive, inject } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnSelectLabel } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
-import { HlmSelectContent } from './hlm-select-content';
 
 @Directive({
-	selector: '[hlmSelectLabel], hlm-select-label',
-	hostDirectives: [BrnSelectLabel],
+	selector: '[hlmSelectLabel],hlm-select-label',
+	hostDirectives: [{ directive: BrnSelectLabel, inputs: ['id'] }],
+	host: {
+		'data-slot': 'select-label',
+	},
 })
 export class HlmSelectLabel {
-	private readonly _selectContent = inject(HlmSelectContent);
-	private readonly _stickyLabels = computed(() => this._selectContent.stickyLabels());
-
 	constructor() {
-		classes(() => [
-			'text-muted-foreground px-2 py-1.5 text-xs',
-			this._stickyLabels() ? 'bg-popover sticky top-0 z-[2] block' : '',
-		]);
+		classes(() => 'text-muted-foreground block px-2 py-1.5 text-xs');
 	}
 }

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

@@ -0,0 +1,47 @@
+import { Directive } from '@angular/core';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnSelectMultiple } from '@spartan-ng/brain/select';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmSelectMultiple],hlm-select-multiple',
+	providers: [
+		provideBrnPopoverConfig({
+			align: 'start',
+			sideOffset: 6,
+		}),
+		provideBrnDialogDefaultOptions({
+			autoFocus: 'first-heading',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: BrnSelectMultiple,
+			inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+			outputs: ['valueChange'],
+		},
+		{
+			directive: BrnPopover,
+			inputs: [
+				'align',
+				'autoFocus',
+				'closeDelay',
+				'closeOnOutsidePointerEvents',
+				'sideOffset',
+				'state',
+				'offsetX',
+				'restoreFocus',
+			],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+	host: {
+		'data-slot': 'select',
+	},
+})
+export class HlmSelectMultiple {
+	constructor() {
+		classes(() => 'block');
+	}
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnSelectPlaceholder } from '@spartan-ng/brain/select';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmSelectPlaceholder],hlm-select-placeholder',
+	hostDirectives: [BrnSelectPlaceholder],
+	host: { 'data-slot': 'select-placeholder' },
+})
+export class HlmSelectPlaceholder {
+	constructor() {
+		classes(
+			() =>
+				"flex items-center gap-2 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base",
+		);
+	}
+}

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnPopoverContent } from '@spartan-ng/brain/popover';
+
+@Directive({
+	selector: '[hlmSelectPortal]',
+	hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
+})
+export class HlmSelectPortal {}

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

@@ -1,20 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { BrnSelectScrollDown } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-select-scroll-down',
-	imports: [NgIcon, HlmIcon],
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectScrollDown],
 	template: `
-		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" />
+		<ng-icon name="lucideChevronDown" />
 	`,
 })
 export class HlmSelectScrollDown {
 	constructor() {
-		classes(() => 'flex cursor-default items-center justify-center py-1');
+		classes(
+			() =>
+				"bg-popover sticky bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 data-hidden:hidden [&_ng-icon:not([class*='text-'])]:text-base",
+		);
 	}
 }

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

@@ -1,20 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronUp } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { BrnSelectScrollUp } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-select-scroll-up',
-	imports: [NgIcon, HlmIcon],
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronUp })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectScrollUp],
 	template: `
-		<ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" />
+		<ng-icon name="lucideChevronUp" />
 	`,
 })
 export class HlmSelectScrollUp {
 	constructor() {
-		classes(() => 'flex cursor-default items-center justify-center py-1');
+		classes(
+			() =>
+				"bg-popover sticky top-0 z-10 flex w-full cursor-default items-center justify-center py-1 data-hidden:hidden [&_ng-icon:not([class*='text-'])]:text-base",
+		);
 	}
 }

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

@@ -1,14 +1,16 @@
 import { Directive } from '@angular/core';
+import { BrnSelectSeparator } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmSelectSeparator]',
+	selector: '[hlmSelectSeparator],hlm-select-separator',
+	hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
 	host: {
 		'data-slot': 'select-separator',
 	},
 })
 export class HlmSelectSeparator {
 	constructor() {
-		classes(() => 'bg-border pointer-events-none -mx-1 my-1 h-px');
+		classes(() => 'bg-border pointer-events-none -mx-1 my-1 h-px shrink-0');
 	}
 }

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

@@ -1,53 +1,41 @@
-import { ChangeDetectionStrategy, Component, computed, contentChild, inject, input } 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 { BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { BrnSelectTrigger, BrnSelectTriggerWrapper } from '@spartan-ng/brain/select';
 import { hlm } from '<%- importAlias %>/utils';
-import { cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
-export const selectTriggerVariants = cva(
-	`border-input [&>ng-icon:not([class*='text-'])]: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]:size-4 [&>ng-icon]:shrink-0`,
-	{
-		variants: {
-			error: {
-				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: {
-			error: 'auto',
-		},
-	},
-);
-
 @Component({
 	selector: 'hlm-select-trigger',
-	imports: [BrnSelectTrigger, NgIcon, HlmIcon],
+	imports: [NgIcon, BrnSelectTrigger],
 	providers: [provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectTriggerWrapper],
 	template: `
-		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button" [attr.data-size]="size()">
+		<button
+			brnSelectTrigger
+			[id]="buttonId()"
+			[class]="_computedClass()"
+			[attr.data-size]="size()"
+			data-slot="select-trigger"
+		>
 			<ng-content />
-			@if (_icon()) {
-				<ng-content select="ng-icon" />
-			} @else {
-				<ng-icon hlm size="sm" class="ml-2 flex-none" name="lucideChevronDown" />
-			}
+			<ng-icon name="lucideChevronDown" class="text-muted-foreground pointer-events-none text-base" />
 		</button>
 	`,
 })
 export class HlmSelectTrigger {
-	protected readonly _icon = contentChild(HlmIcon);
-
-	protected readonly _brnSelect = inject(BrnSelect, { optional: true });
+	private static _id = 0;
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	public readonly size = input<'default' | 'sm'>('default');
-
 	protected readonly _computedClass = computed(() =>
-		hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass()),
+		hlm(
+			"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-full items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base",
+			this.userClass(),
+		),
 	);
+
+	public readonly buttonId = input<string>(`hlm-select-trigger-${HlmSelectTrigger._id++}`);
+
+	public readonly size = input<'default' | 'sm'>('default');
 }

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

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValueTemplate } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] })
+export class HlmSelectValueTemplate {}

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

@@ -1,11 +1,18 @@
-import { Directive } from '@angular/core';
+import { Directive, inject } from '@angular/core';
+import { BrnSelectValue } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
+	selector: '[hlmSelectValue],hlm-select-value',
+	hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+	host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
 })
 export class HlmSelectValue {
+	private readonly _brnSelectValue = inject(BrnSelectValue);
+
+	protected readonly _hidden = this._brnSelectValue.hidden;
+
 	constructor() {
-		classes(() => 'data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2 truncate');
+		classes(() => 'data-hidden:hidden');
 	}
 }

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
+export class HlmSelectValuesContent {
+	constructor() {
+		classes(() => 'flex gap-1');
+	}
+}

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

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValues } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] })
+export class HlmSelectValues {}

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

@@ -1,11 +1,47 @@
 import { Directive } from '@angular/core';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnSelect } from '@spartan-ng/brain/select';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: 'hlm-select,[hlmSelect],brn-select[hlm]',
+	selector: '[hlmSelect],hlm-select',
+	providers: [
+		provideBrnPopoverConfig({
+			align: 'start',
+			sideOffset: 6,
+		}),
+		provideBrnDialogDefaultOptions({
+			autoFocus: 'first-heading',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: BrnSelect,
+			inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+			outputs: ['valueChange'],
+		},
+		{
+			directive: BrnPopover,
+			inputs: [
+				'align',
+				'autoFocus',
+				'closeDelay',
+				'closeOnOutsidePointerEvents',
+				'sideOffset',
+				'state',
+				'offsetX',
+				'restoreFocus',
+			],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+	host: {
+		'data-slot': 'select',
+	},
 })
 export class HlmSelect {
 	constructor() {
-		classes(() => 'space-y-2');
+		classes(() => 'block');
 	}
 }