@egose/shadcn-theme-ng-tw 0.0.26 → 0.0.28

package/select/fesm2022/select.mjs

@@ -1,271 +1,453 @@
 import * as i0 from '@angular/core';
-import { input, computed, Directive, booleanAttribute, inject, ChangeDetectionStrategy, Component, contentChild, NgModule } from '@angular/core';
-import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
-import { injectExposesStateProvider, injectExposedSideProvider } from '@spartan-ng/brain/core';
+import { Directive, ChangeDetectionStrategy, Component, computed, input, booleanAttribute, inject, NgModule } from '@angular/core';
+import * as i2 from '@spartan-ng/brain/popover';
+import { provideBrnPopoverConfig, provideBrnPopoverDefaultOptions, BrnPopover, BrnPopoverContent } from '@spartan-ng/brain/popover';
 import * as i1 from '@spartan-ng/brain/select';
-import { BrnSelectGroup, BrnSelectLabel, BrnSelectOption, BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { BrnSelect, BrnSelectScrollDown, BrnSelectScrollUp, BrnSelectContent, BrnSelectGroup, BrnSelectItem, BrnSelectLabel, BrnSelectMultiple, BrnSelectPlaceholder, BrnSelectSeparator, BrnSelectTrigger, BrnSelectValue, BrnSelectValueTemplate, BrnSelectValues } from '@spartan-ng/brain/select';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideCheck, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
-import { HlmIcon } from '@egose/shadcn-theme-ng-tw/icon';
-import { cva } from 'class-variance-authority';
+import { lucideChevronDown, lucideChevronUp, lucideCheck } from '@ng-icons/lucide';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 
 class HlmSelect {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelect, isStandalone: true, selector: "hlm-select, brn-select [hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelect, isStandalone: true, selector: "[hlmSelect],hlm-select", host: { attributes: { "data-slot": "select" } }, providers: [
+            provideBrnPopoverConfig({
+                align: 'start',
+                sideOffset: 6,
+            }),
+            provideBrnPopoverDefaultOptions({ role: null }),
+        ], hostDirectives: [{ directive: i1.BrnSelect, inputs: ["disabled", "disabled", "value", "value", "isItemEqualToValue", "isItemEqualToValue", "itemToString", "itemToString"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelect, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'hlm-select, brn-select [hlm]',
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+                    selector: '[hlmSelect],hlm-select',
+                    providers: [
+                        provideBrnPopoverConfig({
+                            align: 'start',
+                            sideOffset: 6,
+                        }),
+                        provideBrnPopoverDefaultOptions({ role: null }),
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: BrnSelect,
+                            inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+                            outputs: ['valueChange'],
+                        },
+                        {
+                            directive: BrnPopover,
+                            inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+                            outputs: ['stateChanged', 'closed'],
+                        },
+                    ],
+                    host: { 'data-slot': 'select' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmSelectContent {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    stickyLabels = input(false, ...(ngDevMode ? [{ debugName: "stickyLabels", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
-    _stateProvider = injectExposesStateProvider({ optional: true });
-    _sideProvider = injectExposedSideProvider({ optional: true });
-    _computedClass = computed(() => hlm('tw:border-border tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:relative tw:z-50 tw:w-full tw:min-w-[8rem] tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-md tw:data-[side=bottom]:top-[2px] tw:data-[side=top]:bottom-[2px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectContent, isStandalone: true, selector: "[hlmSelectContent], hlm-select-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, stickyLabels: { classPropertyName: "stickyLabels", publicName: "stickyLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-state": "_stateProvider?.state() ?? \"open\"", "attr.data-side": "_sideProvider?.side() ?? \"bottom\"" } }, ngImport: i0 });
+class HlmSelectScrollDown {
+    constructor() {
+        classes(() => "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] sticky bottom-0 w-full data-hidden:hidden");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", providers: [provideIcons({ lucideChevronDown })], hostDirectives: [{ directive: i1.BrnSelectScrollDown }], ngImport: i0, template: ` <ng-icon name="lucideChevronDown" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectContent, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectScrollDown, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[hlmSelectContent], hlm-select-content',
-                    host: {
-                        '[class]': '_computedClass()',
-                        '[attr.data-state]': '_stateProvider?.state() ?? "open"',
-                        '[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
-                    },
+                    selector: 'hlm-select-scroll-down',
+                    imports: [NgIcon],
+                    providers: [provideIcons({ lucideChevronDown })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnSelectScrollDown],
+                    template: ` <ng-icon name="lucideChevronDown" /> `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmSelectGroup {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm(this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectGroup, isStandalone: true, selector: "[hlmSelectGroup], hlm-select-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectGroup }], ngImport: i0 });
+class HlmSelectScrollUp {
+    constructor() {
+        classes(() => "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] sticky top-0 w-full data-hidden:hidden");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", providers: [provideIcons({ lucideChevronUp })], hostDirectives: [{ directive: i1.BrnSelectScrollUp }], ngImport: i0, template: ` <ng-icon name="lucideChevronUp" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectGroup, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectScrollUp, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[hlmSelectGroup], hlm-select-group',
-                    hostDirectives: [BrnSelectGroup],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+                    selector: 'hlm-select-scroll-up',
+                    imports: [NgIcon],
+                    providers: [provideIcons({ lucideChevronUp })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [BrnSelectScrollUp],
+                    template: ` <ng-icon name="lucideChevronUp" /> `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmSelectLabel {
-    _selectContent = inject(HlmSelectContent);
-    _stickyLabels = computed(() => this._selectContent.stickyLabels(), ...(ngDevMode ? [{ debugName: "_stickyLabels" }] : []));
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:px-2 tw:py-1.5 tw:text-xs', this._stickyLabels() ? 'tw:bg-popover tw:sticky tw:top-0 tw:z-[2] tw:block' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectLabel, isStandalone: true, selector: "[hlmSelectLabel], hlm-select-label", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectLabel }], ngImport: i0 });
+class HlmSelectContent {
+    _computedListboxClasses = computed(() => hlm('flex flex-col'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedListboxClasses" }] : /* istanbul ignore next */ []));
+    showScroll = input(false, { ...(ngDevMode ? { debugName: "showScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        classes(() => '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 max-h-72 min-w-36 flex-col rounded-md shadow-md ring-1 duration-100 relative flex w-(--brn-select-width) overflow-x-hidden overflow-y-auto');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmSelectContent, isStandalone: true, selector: "hlm-select-content", inputs: { showScroll: { classPropertyName: "showScroll", publicName: "showScroll", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.BrnSelectContent }], ngImport: i0, template: `
+    @if (showScroll()) {
+      <hlm-select-scroll-up />
+    }
+
+    <div role="listbox" [class]="_computedListboxClasses()">
+      <ng-content />
+    </div>
+
+    @if (showScroll()) {
+      <hlm-select-scroll-down />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: HlmSelectScrollUp, selector: "hlm-select-scroll-up" }, { kind: "component", type: HlmSelectScrollDown, selector: "hlm-select-scroll-down" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectLabel, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectContent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[hlmSelectLabel], hlm-select-label',
-                    hostDirectives: [BrnSelectLabel],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+                    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 />
+    }
+  `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { showScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScroll", required: false }] }] } });
 
-class HlmSelectOption {
-    _brnSelectOption = inject(BrnSelectOption, { host: true });
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[active]:bg-accent tw:data-[active]:text-accent-foreground tw:[&>ng-icon]:text-muted-foreground tw:*:[span]:last:flex tw:*:[span]:last:items-center tw:*:[span]:last:gap-2 tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pl-2 tw:pr-8 tw:text-sm tw:outline-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:size-4 tw:[&>ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmSelectOption, isStandalone: true, selector: "hlm-option", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
-    <span class="tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center">
-      @if (this._brnSelectOption.selected()) {
-        <ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
-      }
-    </span>
+class HlmSelectGroup {
+    constructor() {
+        classes(() => 'scroll-my-1 p-1');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectGroup, isStandalone: true, selector: "[hlmSelectGroup],hlm-select-group", host: { attributes: { "data-slot": "select-group" } }, hostDirectives: [{ directive: i1.BrnSelectGroup }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSelectGroup],hlm-select-group',
+                    hostDirectives: [{ directive: BrnSelectGroup }],
+                    host: { 'data-slot': 'select-group' },
+                }]
+        }], ctorParameters: () => [] });
 
+class HlmSelectItem {
+    _brnSelectItem = inject(BrnSelectItem);
+    _active = this._brnSelectItem.active;
+    constructor() {
+        classes(() => 'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmSelectItem, isStandalone: true, selector: "hlm-select-item", host: { attributes: { "data-slot": "select-item" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnSelectItem, inputs: ["id", "id", "disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
     <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectItem, decorators: [{
             type: Component,
             args: [{
-                    selector: 'hlm-option',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    hostDirectives: [{ directive: BrnSelectOption, inputs: ['disabled', 'value'] }],
+                    selector: 'hlm-select-item',
+                    imports: [NgIcon],
                     providers: [provideIcons({ lucideCheck })],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [{ directive: BrnSelectItem, inputs: ['id', 'disabled', 'value'] }],
+                    host: { 'data-slot': 'select-item' },
                     template: `
-    <span class="tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center">
-      @if (this._brnSelectOption.selected()) {
-        <ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
-      }
-    </span>
-
     <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
+    }
   `,
-                    imports: [NgIcon, HlmIcon],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmSelectScrollDown {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class HlmSelectLabel {
+    constructor() {
+        classes(() => 'text-muted-foreground px-2 py-1.5 text-xs flex');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectLabel, isStandalone: true, selector: "[hlmSelectLabel],hlm-select-label", host: { attributes: { "data-slot": "select-label" } }, hostDirectives: [{ directive: i1.BrnSelectLabel, inputs: ["id", "id"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectLabel, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'hlm-select-scroll-down',
-                    imports: [NgIcon, HlmIcon],
-                    providers: [provideIcons({ lucideChevronDown })],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[hlmSelectLabel],hlm-select-label',
+                    hostDirectives: [{ directive: BrnSelectLabel, inputs: ['id'] }],
+                    host: { 'data-slot': 'select-label' },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class HlmSelectScrollUp {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronUp })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class HlmSelectMultiple {
+    constructor() {
+        classes(() => 'block');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectMultiple, isStandalone: true, selector: "[hlmSelectMultiple],hlm-select-multiple", host: { attributes: { "data-slot": "select" } }, providers: [
+            provideBrnPopoverConfig({
+                align: 'start',
+                sideOffset: 6,
+            }),
+            provideBrnPopoverDefaultOptions({ role: null }),
+        ], hostDirectives: [{ directive: i1.BrnSelectMultiple, inputs: ["disabled", "disabled", "value", "value", "isItemEqualToValue", "isItemEqualToValue", "itemToString", "itemToString"], outputs: ["valueChange", "valueChange"] }, { directive: i2.BrnPopover, inputs: ["align", "align", "closeOnOutsidePointerEvents", "closeOnOutsidePointerEvents", "sideOffset", "sideOffset", "state", "state", "offsetX", "offsetX"], outputs: ["stateChanged", "stateChanged", "closed", "closed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectMultiple, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'hlm-select-scroll-up',
-                    imports: [NgIcon, HlmIcon],
-                    providers: [provideIcons({ lucideChevronUp })],
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
-                    template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[hlmSelectMultiple],hlm-select-multiple',
+                    providers: [
+                        provideBrnPopoverConfig({
+                            align: 'start',
+                            sideOffset: 6,
+                        }),
+                        provideBrnPopoverDefaultOptions({ role: null }),
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: BrnSelectMultiple,
+                            inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+                            outputs: ['valueChange'],
+                        },
+                        {
+                            directive: BrnPopover,
+                            inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+                            outputs: ['stateChanged', 'closed'],
+                        },
+                    ],
+                    host: { 'data-slot': 'select' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmSelectPlaceholder {
+    constructor() {
+        classes(() => "gap-2 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectPlaceholder, isStandalone: true, selector: "[hlmSelectPlaceholder],hlm-select-placeholder", host: { attributes: { "data-slot": "select-placeholder" } }, hostDirectives: [{ directive: i1.BrnSelectPlaceholder }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSelectPlaceholder],hlm-select-placeholder',
+                    hostDirectives: [BrnSelectPlaceholder],
+                    host: { 'data-slot': 'select-placeholder' },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmSelectPortal {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectPortal, isStandalone: true, selector: "[hlmSelectPortal]", hostDirectives: [{ directive: i2.BrnPopoverContent, inputs: ["context", "context", "class", "class"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSelectPortal]',
+                    hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
                 }]
         }] });
 
-const selectTriggerVariants = cva(`tw:border-input tw:[&>ng-icon]:text-muted-foreground tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:bg-input/10 tw:dark:hover:bg-input/50 tw:shadow-xs tw:flex tw:w-fit tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-sm tw:outline-none tw:transition-[color,box-shadow] tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:data-[size=default]:h-9 tw:data-[size=sm]:h-8 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:size-4 tw:[&>ng-icon]:shrink-0`, {
-    variants: {
-        error: {
-            auto: 'tw:[&.ng-invalid.ng-touched]:text-destructive tw:[&.ng-invalid.ng-touched]:border-destructive tw:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 tw:dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
-            true: 'tw:text-destructive tw:border-destructive tw:focus-visible:ring-destructive/20 tw:dark:focus-visible:ring-destructive/40',
-        },
-    },
-    defaultVariants: {
-        error: 'auto',
-    },
-});
+class HlmSelectSeparator {
+    constructor() {
+        classes(() => 'bg-border -mx-1 my-1 h-px pointer-events-none');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectSeparator, isStandalone: true, selector: "[hlmSelectSeparator],hlm-select-separator", host: { attributes: { "data-slot": "select-separator" } }, hostDirectives: [{ directive: i1.BrnSelectSeparator, inputs: ["orientation", "orientation"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmSelectSeparator],hlm-select-separator',
+                    hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
+                    host: { 'data-slot': 'select-separator' },
+                }]
+        }], ctorParameters: () => [] });
+
 class HlmSelectTrigger {
-    _icon = contentChild(HlmIcon, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
-    _brnSelect = inject(BrnSelect, { optional: true });
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    _computedClass = computed(() => hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmSelectTrigger, isStandalone: true, selector: "hlm-select-trigger", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown })], queries: [{ propertyName: "_icon", first: true, predicate: HlmIcon, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button [class]="_computedClass()" #button egInput brnSelectTrigger type="button" [attr.data-size]="size()">
+    static _id = 0;
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => 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 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    buttonId = input(`hlm-select-trigger-${HlmSelectTrigger._id++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether to force the trigger into an invalid state. */
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: HlmSelectTrigger, isStandalone: true, selector: "hlm-select-trigger", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: `
+    <button
+      brnSelectTrigger
+      brnFieldControlDescribedBy
+      [forceInvalid]="forceInvalid()"
+      [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="tw:ml-2 tw:flex-none" name="lucideChevronDown" />
-      }
+      <ng-icon name="lucideChevronDown" class="text-muted-foreground text-[length:--spacing(4)] ms-auto" />
     </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: BrnSelectTrigger, selector: "[brnSelectTrigger]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: BrnSelectTrigger, selector: "button[brnSelectTrigger]", inputs: ["id", "forceInvalid"] }, { kind: "directive", type: BrnFieldControlDescribedBy, selector: "[brnFieldControlDescribedBy]", inputs: ["aria-describedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectTrigger, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-select-trigger',
-                    imports: [BrnSelectTrigger, NgIcon, HlmIcon],
+                    imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
                     providers: [provideIcons({ lucideChevronDown })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <button [class]="_computedClass()" #button egInput brnSelectTrigger type="button" [attr.data-size]="size()">
+    <button
+      brnSelectTrigger
+      brnFieldControlDescribedBy
+      [forceInvalid]="forceInvalid()"
+      [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="tw:ml-2 tw:flex-none" name="lucideChevronDown" />
-      }
+      <ng-icon name="lucideChevronDown" class="text-muted-foreground text-[length:--spacing(4)] ms-auto" />
     </button>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }] } });
 
 class HlmSelectValue {
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[placeholder]:text-muted-foreground tw:line-clamp-1 tw:flex tw:items-center tw:gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectValue, isStandalone: true, selector: "hlm-select-value,[hlmSelectValue], brn-select-value[hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    _brnSelectValue = inject(BrnSelectValue);
+    _hidden = this._brnSelectValue.hidden;
+    constructor() {
+        classes(() => 'data-hidden:hidden');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectValue, isStandalone: true, selector: "[hlmSelectValue],hlm-select-value", host: { properties: { "attr.data-slot": "!_hidden() ? \"select-value\" : null" } }, hostDirectives: [{ directive: i1.BrnSelectValue, inputs: ["placeholder", "placeholder"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValue, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
-                    host: {
-                        '[class]': '_computedClass()',
-                    },
+                    selector: '[hlmSelectValue],hlm-select-value',
+                    hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+                    host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
                 }]
+        }], ctorParameters: () => [] });
+
+class HlmSelectValueTemplate {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectValueTemplate, isStandalone: true, selector: "[hlmSelectValueTemplate]", hostDirectives: [{ directive: i1.BrnSelectValueTemplate }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValueTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] }]
+        }] });
+
+class HlmSelectValues {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValues, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectValues, isStandalone: true, selector: "[hlmSelectValues]", hostDirectives: [{ directive: i1.BrnSelectValues }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValues, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] }]
         }] });
 
+class HlmSelectValuesContent {
+    constructor() {
+        classes(() => 'gap-2 flex');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValuesContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmSelectValuesContent, isStandalone: true, selector: "[hlmSelectValuesContent],hlm-select-values-content", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectValuesContent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hlmSelectValuesContent],hlm-select-values-content' }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of select
  */
 const HlmSelectImports = [
+    HlmSelect,
     HlmSelectContent,
+    HlmSelectGroup,
+    HlmSelectItem,
+    HlmSelectLabel,
+    HlmSelectMultiple,
+    HlmSelectPlaceholder,
+    HlmSelectPortal,
+    HlmSelectScrollDown,
+    HlmSelectScrollUp,
+    HlmSelectSeparator,
     HlmSelectTrigger,
-    HlmSelectOption,
     HlmSelectValue,
-    HlmSelect,
-    HlmSelectScrollUp,
-    HlmSelectScrollDown,
-    HlmSelectLabel,
-    HlmSelectGroup,
+    HlmSelectValues,
+    HlmSelectValuesContent,
+    HlmSelectValueTemplate,
 ];
 class HlmSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectContent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectModule, imports: [HlmSelect,
+            HlmSelectContent,
+            HlmSelectGroup,
+            HlmSelectItem,
+            HlmSelectLabel,
+            HlmSelectMultiple,
+            HlmSelectPlaceholder,
+            HlmSelectPortal,
+            HlmSelectScrollDown,
+            HlmSelectScrollUp,
+            HlmSelectSeparator,
             HlmSelectTrigger,
-            HlmSelectOption,
             HlmSelectValue,
-            HlmSelect,
-            HlmSelectScrollUp,
-            HlmSelectScrollDown,
+            HlmSelectValues,
+            HlmSelectValuesContent,
+            HlmSelectValueTemplate], exports: [HlmSelect,
+            HlmSelectContent,
+            HlmSelectGroup,
+            HlmSelectItem,
             HlmSelectLabel,
-            HlmSelectGroup], exports: [HlmSelectContent,
+            HlmSelectMultiple,
+            HlmSelectPlaceholder,
+            HlmSelectPortal,
+            HlmSelectScrollDown,
+            HlmSelectScrollUp,
+            HlmSelectSeparator,
             HlmSelectTrigger,
-            HlmSelectOption,
             HlmSelectValue,
-            HlmSelect,
-            HlmSelectScrollUp,
+            HlmSelectValues,
+            HlmSelectValuesContent,
+            HlmSelectValueTemplate] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectContent,
+            HlmSelectItem,
             HlmSelectScrollDown,
-            HlmSelectLabel,
-            HlmSelectGroup] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, imports: [HlmSelectTrigger,
-            HlmSelectOption,
             HlmSelectScrollUp,
-            HlmSelectScrollDown] });
+            HlmSelectTrigger] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmSelectImports],
@@ -277,5 +459,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HlmSelect, HlmSelectContent, HlmSelectGroup, HlmSelectImports, HlmSelectLabel, HlmSelectModule, HlmSelectOption, HlmSelectScrollDown, HlmSelectScrollUp, HlmSelectTrigger, HlmSelectValue, selectTriggerVariants };
+export { HlmSelect, HlmSelectContent, HlmSelectGroup, HlmSelectImports, HlmSelectItem, HlmSelectLabel, HlmSelectModule, HlmSelectMultiple, HlmSelectPlaceholder, HlmSelectPortal, HlmSelectScrollDown, HlmSelectScrollUp, HlmSelectSeparator, HlmSelectTrigger, HlmSelectValue, HlmSelectValueTemplate, HlmSelectValues, HlmSelectValuesContent };
 //# sourceMappingURL=select.mjs.map