@spartan-ng/cli 0.0.1-alpha.551 → 0.0.1-alpha.552

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.551",
+  "version": "0.0.1-alpha.552",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarContent]',
-
+	selector: '[hlmSidebarContent],hlm-sidebar-content',
 	host: {
+		'data-slot': 'sidebar-content',
 		'data-sidebar': 'content',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarFooter]',
-
+	selector: '[hlmSidebarFooter],hlm-sidebar-footer',
 	host: {
+		'data-slot': 'sidebar-footer',
 		'data-sidebar': 'footer',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'button[hlmSidebarGroupAction]',
-
 	host: {
+		'data-slot': 'sidebar-group-action',
 		'data-sidebar': 'group-action',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'div[hlmSidebarGroupContent]',
-
 	host: {
+		'data-slot': 'sidebar-group-content',
 		'data-sidebar': 'group-content',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
-
 	host: {
+		'data-slot': 'sidebar-group-label',
 		'data-sidebar': 'group-label',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarGroup]',
-
+	selector: '[hlmSidebarGroup],hlm-sidebar-group',
 	host: {
+		'data-slot': 'sidebar-group',
 		'data-sidebar': 'group',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarHeader]',
-
+	selector: '[hlmSidebarHeader],hlm-sidebar-header',
 	host: {
+		'data-slot': 'sidebar-header',
 		'data-sidebar': 'header',
 		'[class]': '_computedClass()',
 	},

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

@@ -4,8 +4,8 @@ import { hlm } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmSidebarInput]',
-
 	host: {
+		'data-slot': 'sidebar-input',
 		'data-sidebar': 'input',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,28 +1,20 @@
-import { computed, Directive, inject, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
-import { HlmSidebarService } from './hlm-sidebar.service';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'main[hlmSidebarInset]', // Restrict to main elements only
-
+	selector: 'main[hlmSidebarInset]',
 	host: {
 		'data-slot': 'sidebar-inset',
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarInset {
-	private readonly _sidebarService = inject(HlmSidebarService);
-
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'bg-background relative flex w-full flex-1 flex-col',
-			this._sidebarService.variant() === 'inset' &&
-				'min-h-[calc(100svh-theme(spacing.4)))] md:m-2 md:rounded-xl md:shadow-sm',
-			this._sidebarService.open() ? 'md:ml-0' : 'md:ml-2',
+			'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
 			this.userClass(),
 		),
 	);

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

@@ -1,12 +1,11 @@
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'button[hlmSidebarMenuAction]',
-
 	host: {
+		'data-slot': 'sidebar-menu-action',
 		'data-sidebar': 'menu-action',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarMenuBadge]',
-
+	selector: '[hlmSidebarMenuBadge],hlm-sidebar-menu-badge',
 	host: {
+		'data-slot': 'sidebar-menu-badge',
 		'data-sidebar': 'menu-badge',
 		'[class]': '_computedClass()',
 	},

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

@@ -3,10 +3,8 @@ import { BrnTooltipTrigger, provideBrnTooltipDefaultOptions } from '@spartan-ng/
 import { DEFAULT_TOOLTIP_CONTENT_CLASSES } from '<%- importAlias %>/tooltip';
 import { hlm } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
-
-import { HlmSidebarService } from './hlm-sidebar.service';
-
 import type { ClassValue } from 'clsx';
+import { HlmSidebarService } from './hlm-sidebar.service';
 
 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',
@@ -32,7 +30,6 @@ const sidebarMenuButtonVariants = cva(
 
 @Directive({
 	selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
-
 	providers: [
 		provideBrnTooltipDefaultOptions({
 			showDelay: 150,
@@ -49,6 +46,7 @@ const sidebarMenuButtonVariants = cva(
 		},
 	],
 	host: {
+		'data-slot': 'sidebar-menu-button',
 		'data-sidebar': 'menu-button',
 		'[attr.data-size]': 'size()',
 		'[attr.data-active]': 'isActive()',

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'li[hlmSidebarMenuItem]',
-
 	host: {
+		'data-slot': 'sidebar-menu-item',
 		'data-sidebar': 'menu-item',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,7 +1,6 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { hlm } from '<%- importAlias %>/utils';
-
 import { HlmSkeletonImports } from '<%- importAlias %>/skeleton';
+import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -16,6 +15,7 @@ import type { ClassValue } from 'clsx';
 		}
 	`,
 	host: {
+		'data-slot': 'sidebar-menu-skeleton',
 		'data-sidebar': 'menu-skeleton',
 		'[class]': '_computedClass()',
 		'[style.--skeleton-width]': '_width',

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

@@ -1,12 +1,11 @@
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
-
 	host: {
+		'data-slot': 'sidebar-menu-sub-button',
 		'data-sidebar': 'menu-sub-button',
 		'[attr.data-active]': 'isActive()',
 		'[attr.data-size]': 'size()',

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'li[hlmSidebarMenuSubItem]',
-
 	host: {
+		'data-slot': 'sidebar-menu-sub-item',
 		'data-sidebar': 'menu-sub-item',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'ul[hlmSidebarMenuSub]',
-
 	host: {
+		'data-slot': 'sidebar-menu-sub',
 		'data-sidebar': 'menu-sub',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,12 +1,11 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'ul[hlmSidebarMenu]',
-
 	host: {
+		'data-slot': 'sidebar-menu',
 		'data-sidebar': 'menu',
 		'[class]': '_computedClass()',
 	},

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

@@ -1,17 +1,14 @@
 import { computed, Directive, inject, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-
-import { HlmSidebarService } from './hlm-sidebar.service';
-
 import type { ClassValue } from 'clsx';
+import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Directive({
 	selector: 'button[hlmSidebarRail]',
-
 	host: {
 		'data-sidebar': 'rail',
 		'data-slot': 'sidebar-rail',
-		'aria-label': 'Toggle Sidebar',
+		'[attr.aria-label]': 'ariaLabel()',
 		tabindex: '-1',
 		'[class]': '_computedClass()',
 		'(click)': 'onClick()',
@@ -20,6 +17,8 @@ import type { ClassValue } from 'clsx';
 export class HlmSidebarRail {
 	private readonly _sidebarService = inject(HlmSidebarService);
 
+	public readonly ariaLabel = input<string>('Toggle Sidebar', { alias: 'aria-label' });
+
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(

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

@@ -1,20 +1,18 @@
 import { computed, Directive, input } from '@angular/core';
 import { HlmSeparator } from '<%- importAlias %>/separator';
 import { hlm } from '<%- importAlias %>/utils';
-
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: 'div[hlmSidebarSeparator]',
-
+	selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
 	hostDirectives: [{ directive: HlmSeparator }],
 	host: {
+		'data-slot': 'sidebar-separator',
 		'data-sidebar': 'separator',
 		'[class]': '_computedClass()',
 	},
 })
 export class HlmSidebarSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
-	protected readonly _computedClass = computed(() => hlm('bg-sidebar-border w-auto', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('bg-sidebar-border mx-2 w-auto', this.userClass()));
 }

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

@@ -2,16 +2,13 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucidePanelLeft } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
-
-import { HlmSidebarService } from './hlm-sidebar.service';
-
 import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmSidebarTrigger]',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-
 	imports: [HlmIcon, NgIcon],
 	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon' })],
 	template: `
@@ -23,8 +20,8 @@ import { HlmIcon } from '<%- importAlias %>/icon';
 		},
 	],
 	host: {
-		'data-sidebar': 'trigger',
 		'data-slot': 'sidebar-trigger',
+		'data-sidebar': 'trigger',
 		'(click)': '_onClick()',
 	},
 })
@@ -33,7 +30,7 @@ export class HlmSidebarTrigger {
 	private readonly _sidebarService = inject(HlmSidebarService);
 
 	constructor() {
-		this._hlmBtn.setClass('h-7 w-7');
+		this._hlmBtn.setClass('size-7');
 	}
 
 	protected _onClick(): void {

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

@@ -4,7 +4,7 @@ import type { ClassValue } from 'clsx';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
-	selector: 'div[hlmSidebarWrapper]',
+	selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
 	host: {
 		'data-slot': 'sidebar-wrapper',
 		'[class]': '_computedClass()',

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

@@ -1,20 +1,15 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
 import { BrnSheetContent } from '@spartan-ng/brain/sheet';
 import { HlmSheet, HlmSheetContent } from '<%- importAlias %>/sheet';
 import { hlm } from '<%- importAlias %>/utils';
-
-import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
-
-import { NgTemplateOutlet } from '@angular/common';
 import type { ClassValue } from 'clsx';
+import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Component({
 	selector: 'hlm-sidebar',
-
-	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [HlmSheet, HlmSheetContent, NgTemplateOutlet, BrnSheetContent],
-
 	template: `
 		<ng-template #contentContainer>
 			<ng-content></ng-content>
@@ -66,6 +61,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 			</div>
 		}
 	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSidebar {
 	protected readonly _sidebarService = inject(HlmSidebarService);
@@ -76,11 +72,12 @@ export class HlmSidebar {
 	public readonly side = input<'left' | 'right'>('left');
 	public readonly variant = input<SidebarVariant>(this._sidebarService.variant());
 	public readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
+	public readonly nonCollapsibleClass = input<ClassValue>('');
 	protected readonly _nonCollapsibleComputedClass = computed(() =>
-		hlm('bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col', this.userClass()),
+		hlm('bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col', this.nonCollapsibleClass()),
 	);
+
 	protected readonly _sidebarGapComputedClass = computed(() =>
 		hlm(
 			'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
@@ -92,6 +89,7 @@ export class HlmSidebar {
 		),
 	);
 
+	public readonly sidebarContainerClass = input<ClassValue>('');
 	protected readonly _sidebarContainerComputedClass = computed(() =>
 		hlm(
 			'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
@@ -101,7 +99,7 @@ export class HlmSidebar {
 			this.variant() === 'floating' || this.variant() === 'inset'
 				? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
 				: 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-			this.userClass(),
+			this.sidebarContainerClass(),
 		),
 	);
 

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

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0"
@@ -21,7 +21,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -38,7 +38,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"@angular/cdk": "^19.0.0",
 			"@angular/common": "^19.0.0",
 			"@angular/forms": "^19.0.0",
@@ -50,7 +50,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -76,7 +76,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -85,7 +85,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -98,7 +98,7 @@
 			"@angular/core": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -128,7 +128,7 @@
 			"@angular/cdk": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -136,7 +136,7 @@
 		"name": "command",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -148,7 +148,7 @@
 			"@angular/forms": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -160,7 +160,7 @@
 			"@angular/common": "^19.0.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"@angular/cdk": "^19.0.0"
 		}
 	},
@@ -185,7 +185,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -193,7 +193,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -210,7 +210,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -231,7 +231,7 @@
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
 			"@angular/cdk": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"item": {
@@ -240,7 +240,7 @@
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"kbd": {
@@ -254,7 +254,7 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -262,7 +262,7 @@
 		"name": "menu",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -275,7 +275,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"pagination": {
@@ -284,7 +284,7 @@
 			"@angular/cdk": "^19.0.0",
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
@@ -297,14 +297,14 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -312,7 +312,7 @@
 		"name": "radio-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@angular/common": "^19.0.0"
 		}
@@ -321,7 +321,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0"
@@ -339,7 +339,7 @@
 		"peerDependencies": {
 			"@angular/cdk": "^19.0.0",
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -350,7 +350,7 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -361,7 +361,7 @@
 			"clsx": "^2.1.1",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -370,7 +370,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": "^31.4.0",
 			"@ng-icons/lucide": "^31.4.0",
@@ -388,7 +388,7 @@
 		"name": "slider",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -416,7 +416,7 @@
 			"clsx": "^2.1.1",
 			"@angular/cdk": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"table": {
@@ -430,7 +430,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": "^19.0.0",
@@ -444,7 +444,7 @@
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
 			"@angular/forms": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -453,7 +453,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -462,7 +462,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551",
+			"@spartan-ng/brain": "0.0.1-alpha.552",
 			"clsx": "^2.1.1",
 			"@angular/cdk": "^19.0.0"
 		}
@@ -471,7 +471,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": "^19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.551"
+			"@spartan-ng/brain": "0.0.1-alpha.552"
 		}
 	},
 	"typography": {