@spartan-ng/cli 0.0.1-alpha.638 → 0.0.1-alpha.640

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.638",
+  "version": "0.0.1-alpha.640",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan"

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-multi.ts.template

@@ -60,7 +60,7 @@ let nextId = 0;
 				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
-			<hlm-popover-content class="w-auto p-0" *hlmPopoverPortal="let ctx">
+			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<hlm-calendar-multi
 					calendarClass="border-0 rounded-none"
 					[date]="_mutableDate()"

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

@@ -58,7 +58,7 @@ let nextId = 0;
 				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
-			<hlm-popover-content class="w-auto p-0" *hlmPopoverPortal="let ctx">
+			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<hlm-calendar
 					calendarClass="border-0 rounded-none"
 					[captionLayout]="captionLayout()"

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-picker.ts.template

@@ -64,7 +64,7 @@ let nextId = 0;
 				<ng-icon hlm size="sm" name="lucideChevronDown" />
 			</button>
 
-			<hlm-popover-content class="w-auto p-0" *hlmPopoverPortal="let ctx">
+			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<hlm-calendar-range
 					calendarClass="border-0 rounded-none"
 					[startDate]="_start()"

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

@@ -0,0 +1,9 @@
+import { HlmNativeSelect } from './lib/hlm-native-select';
+import { HlmNativeSelectOptGroup } from './lib/hlm-native-select-opt-group';
+import { HlmNativeSelectOption } from './lib/hlm-native-select-option';
+
+export * from './lib/hlm-native-select';
+export * from './lib/hlm-native-select-opt-group';
+export * from './lib/hlm-native-select-option';
+
+export const HlmNativeSelectImports = [HlmNativeSelect, HlmNativeSelectOption, HlmNativeSelectOptGroup] as const;

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[hlmNativeSelectOptGroup]',
+	host: {
+		'data-slot': 'native-select-optgroup',
+	},
+})
+export class HlmNativeSelectOptGroup {}

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[hlmNativeSelectOption]',
+	host: {
+		'data-slot': 'native-select-option',
+	},
+})
+export class HlmNativeSelectOption {}

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

@@ -0,0 +1,136 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	forwardRef,
+	input,
+	linkedSignal,
+	model,
+	output,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { classes, hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+// TODO support BrnFormFieldControl
+export const HLM_NATIVE_SELECT_VALUE_ACCESSOR = {
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => HlmNativeSelect),
+	multi: true,
+};
+
+@Component({
+	selector: 'hlm-native-select',
+	imports: [NgIcon],
+	providers: [HLM_NATIVE_SELECT_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'native-select-wrapper',
+		'[attr.data-size]': 'size()',
+	},
+	template: `
+		<select
+			data-slot="native-select"
+			[id]="_selectId()"
+			[class]="_computedSelectClass()"
+			[attr.data-size]="size()"
+			[attr.aria-invalid]="ariaInvalid() ? 'true' : null"
+			[value]="value()"
+			[disabled]="_disabled()"
+			(change)="_valueChanged($event)"
+			(blur)="_blur()"
+		>
+			<ng-content />
+		</select>
+
+		<ng-icon
+			name="lucideChevronDown"
+			[class]="_computedSelectIconClass()"
+			aria-hidden="true"
+			data-slot="native-select-icon"
+		/>
+	`,
+})
+export class HlmNativeSelect implements ControlValueAccessor {
+	private static _id = 0;
+
+	public readonly selectId = input<string>('');
+
+	protected readonly _selectId = computed(() => this.selectId() || `hlm-native-select-${HlmNativeSelect._id++}`);
+
+	public readonly selectClass = input<ClassValue>('');
+
+	protected readonly _computedSelectClass = computed(() =>
+		hlm(
+			'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8',
+			// TODO support BrnFormFieldControl
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-3',
+			this.selectClass(),
+		),
+	);
+
+	public readonly selectIconClass = input<ClassValue>('');
+
+	protected readonly _computedSelectIconClass = computed(() =>
+		hlm(
+			'text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-base select-none',
+			this.selectIconClass(),
+		),
+	);
+
+	public readonly size = input<'sm' | 'default'>('default');
+
+	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	protected readonly _disabled = linkedSignal(this.disabled);
+
+	public readonly ariaInvalid = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+		alias: 'aria-invalid',
+	});
+
+	public readonly value = model<string | null>('');
+
+	public readonly valueChange = output<string | null>();
+
+	protected _onChange?: ChangeFn<string | null>;
+	protected _onTouched?: TouchFn;
+
+	constructor() {
+		classes(() => 'group/native-select relative w-fit has-[select:disabled]:opacity-50');
+	}
+
+	protected _valueChanged(event: Event): void {
+		const value = (event.target as HTMLSelectElement).value;
+		this.value.set(value);
+		this.valueChange.emit(value);
+		this._onChange?.(value);
+		this._onTouched?.();
+	}
+
+	protected _blur(): void {
+		this._onTouched?.();
+	}
+
+	/** CONTROL VALUE ACCESSOR */
+	public writeValue(value: string | null): void {
+		this.value.set(value);
+	}
+
+	public registerOnChange(fn: ChangeFn<string | null>): void {
+		this._onChange = fn;
+	}
+
+	public registerOnTouched(fn: TouchFn): void {
+		this._onTouched = fn;
+	}
+
+	public setDisabledState(isDisabled: boolean): void {
+		this._disabled.set(isDisabled);
+	}
+}

package/src/generators/ui/libs/native-select/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/native-select/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'native-select' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/native-select/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/native-select/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}

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

@@ -5,6 +5,7 @@ import { DEFAULT_TOOLTIP_CONTENT_CLASSES } from '<%- importAlias %>/tooltip';
 import { classes } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
 import { HlmSidebarService } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 const sidebarMenuButtonVariants = cva(
 	'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center justify-start gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] outline-none group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 group-data-[collapsible=icon]:[&>span]:hidden [&>span:last-child]:truncate',
@@ -49,14 +50,20 @@ const sidebarMenuButtonVariants = cva(
 		'data-sidebar': 'menu-button',
 		'[attr.data-size]': 'size()',
 		'[attr.data-active]': 'isActive()',
+		'(click)': 'onClick()',
 	},
 })
 export class HlmSidebarMenuButton {
+	private readonly _config = injectHlmSidebarConfig();
 	private readonly _sidebarService = inject(HlmSidebarService);
 
 	public readonly variant = input<'default' | 'outline'>('default');
 	public readonly size = input<'default' | 'sm' | 'lg'>('default');
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+	public readonly closeMobileSidebarOnClick = input<boolean, BooleanInput>(
+		this._config.closeMobileSidebarOnMenuButtonClick,
+		{ transform: booleanAttribute },
+	);
 
 	protected readonly _isTooltipHidden = computed(
 		() => this._sidebarService.state() !== 'collapsed' || this._sidebarService.isMobile(),
@@ -65,4 +72,10 @@ export class HlmSidebarMenuButton {
 	constructor() {
 		classes(() => sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }));
 	}
+
+	protected onClick(): void {
+		if (this.closeMobileSidebarOnClick()) {
+			this._sidebarService.setOpenMobile(false);
+		}
+	}
 }

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

@@ -1,6 +1,8 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, Directive, input } from '@angular/core';
+import { booleanAttribute, Directive, inject, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmSidebarService } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
@@ -9,9 +11,18 @@ import { classes } from '<%- importAlias %>/utils';
 		'data-sidebar': 'menu-sub-button',
 		'[attr.data-active]': 'isActive()',
 		'[attr.data-size]': 'size()',
+		'(click)': 'onClick()',
 	},
 })
 export class HlmSidebarMenuSubButton {
+	private readonly _sidebarService = inject(HlmSidebarService);
+	private readonly _config = injectHlmSidebarConfig();
+
+	public readonly closeMobileSidebarOnClick = input<boolean, BooleanInput>(
+		this._config.closeMobileSidebarOnMenuButtonClick,
+		{ transform: booleanAttribute },
+	);
+
 	public readonly size = input<'sm' | 'md'>('md');
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 	constructor() {
@@ -22,4 +33,10 @@ export class HlmSidebarMenuSubButton {
 			'group-data-[collapsible=icon]:hidden',
 		]);
 	}
+
+	protected onClick(): void {
+		if (this.closeMobileSidebarOnClick()) {
+			this._sidebarService.setOpenMobile(false);
+		}
+	}
 }

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

@@ -8,6 +8,7 @@ export interface HlmSidebarConfig {
 	sidebarCookieMaxAge: number;
 	sidebarKeyboardShortcut: string;
 	mobileBreakpoint: string;
+	closeMobileSidebarOnMenuButtonClick: boolean;
 }
 
 const defaultConfig: HlmSidebarConfig = {
@@ -18,6 +19,7 @@ const defaultConfig: HlmSidebarConfig = {
 	sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
 	sidebarKeyboardShortcut: 'b',
 	mobileBreakpoint: '768px',
+	closeMobileSidebarOnMenuButtonClick: false,
 };
 
 const HlmSidebarConfigToken = new InjectionToken<HlmSidebarConfig>('HlmSidebarConfig');

package/src/generators/ui/primitive-deps.js

@@ -35,6 +35,7 @@ exports.primitiveDependencies = {
     kbd: ['utils'],
     label: ['utils'],
     menubar: ['utils', 'dropdown-menu'],
+    'native-select': ['utils', 'icon'],
     'navigation-menu': ['utils'],
     pagination: ['utils', 'button', 'icon', 'select'],
     popover: ['utils'],

package/src/generators/ui/primitive-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}

package/src/generators/ui/primitives.d.ts

@@ -1 +1 @@
-export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'dropdown-menu' | 'empty' | 'field' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'menubar' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'resizable' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'textarea' | 'toggle' | 'toggle-group' | 'tooltip' | 'typography' | 'utils';
+export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'dropdown-menu' | 'empty' | 'field' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'menubar' | 'native-select' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'resizable' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'textarea' | 'toggle' | 'toggle-group' | 'tooltip' | 'typography' | 'utils';

package/src/generators/ui/supported-ui-libraries.json

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
 		}
@@ -19,7 +19,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -34,7 +34,7 @@
 		"name": "autocomplete",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -44,7 +44,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"badge": {
@@ -68,7 +68,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -77,7 +77,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -89,7 +89,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -117,7 +117,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -125,14 +125,14 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"combobox": {
 		"name": "combobox",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -144,7 +144,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -154,7 +154,7 @@
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -167,7 +167,7 @@
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -175,7 +175,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -191,7 +191,7 @@
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"empty": {
@@ -214,14 +214,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"hover-card": {
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"icon": {
@@ -237,7 +237,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -256,7 +256,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"item": {
@@ -264,7 +264,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"kbd": {
@@ -277,23 +277,35 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
 	},
+	"native-select": {
+		"name": "native-select",
+		"peerDependencies": {
+			"@angular/core": ">=20.0.0 <22.0.0",
+			"@angular/cdk": ">=20.0.0 <22.0.0",
+			"@angular/forms": ">=20.0.0 <22.0.0",
+			"@ng-icons/core": ">=32.0.0 <34.0.0",
+			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
+			"clsx": "^2.1.1"
+		}
+	},
 	"navigation-menu": {
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"pagination": {
@@ -302,7 +314,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/router": ">=20.0.0 <22.0.0"
@@ -312,21 +324,21 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"radio-group": {
 		"name": "radio-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"clsx": "^2.1.1"
@@ -336,7 +348,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"scroll-area": {
@@ -350,7 +362,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"class-variance-authority": "^0.7.0",
@@ -361,14 +373,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -381,7 +393,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -399,7 +411,7 @@
 		"name": "slider",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638"
+			"@spartan-ng/brain": "0.0.1-alpha.640"
 		}
 	},
 	"sonner": {
@@ -424,7 +436,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -438,7 +450,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -452,7 +464,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -461,7 +473,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -469,7 +481,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -477,7 +489,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.638",
+			"@spartan-ng/brain": "0.0.1-alpha.640",
 			"class-variance-authority": "^0.7.0"
 		}
 	},