@spartan-ng/cli 1.5.0-beta.3 → 1.5.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "1.5.0-beta.3",
+  "version": "1.5.0-beta.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan.git"

package/src/generators/ui/libs/message-scroller/files/index.ts.template

@@ -0,0 +1,22 @@
+import { HlmMessageScroller } from './lib/hlm-message-scroller';
+import { HlmMessageScrollerButton } from './lib/hlm-message-scroller-button';
+import { HlmMessageScrollerContent } from './lib/hlm-message-scroller-content';
+import { HlmMessageScrollerItem } from './lib/hlm-message-scroller-item';
+import { HlmMessageScrollerProvider } from './lib/hlm-message-scroller-provider';
+import { HlmMessageScrollerViewport } from './lib/hlm-message-scroller-viewport';
+
+export * from './lib/hlm-message-scroller';
+export * from './lib/hlm-message-scroller-button';
+export * from './lib/hlm-message-scroller-content';
+export * from './lib/hlm-message-scroller-item';
+export * from './lib/hlm-message-scroller-provider';
+export * from './lib/hlm-message-scroller-viewport';
+
+export const HlmMessageScrollerImports = [
+	HlmMessageScrollerProvider,
+	HlmMessageScroller,
+	HlmMessageScrollerViewport,
+	HlmMessageScrollerContent,
+	HlmMessageScrollerItem,
+	HlmMessageScrollerButton,
+] as const;

package/src/generators/ui/libs/message-scroller/files/lib/hlm-message-scroller-button.ts.template

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideArrowDown } from '@ng-icons/lucide';
+import { BrnMessageScrollerButton } from '@spartan-ng/brain/message-scroller';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector -- attribute selector on native button
+	selector: 'button[hlmMessageScrollerButton]',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideArrowDown }), provideBrnButtonConfig({ variant: 'secondary', size: 'icon-sm' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{ directive: HlmButton, inputs: ['variant', 'size'] },
+		{
+			directive: BrnMessageScrollerButton,
+			inputs: ['direction', 'behavior', 'aria-label'],
+		},
+	],
+	host: {
+		'data-slot': 'message-scroller-button',
+	},
+	template: `
+		<ng-icon name="lucideArrowDown" />
+		<span class="sr-only">{{ _brn.resolvedAriaLabel() }}</span>
+	`,
+})
+export class HlmMessageScrollerButton {
+	private readonly _button = inject(HlmButton);
+	protected readonly _brn = inject(BrnMessageScrollerButton);
+
+	constructor() {
+		this._button.setClass(
+			'absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_ng-icon]:rotate-180',
+		);
+	}
+}

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnMessageScrollerContent } from '@spartan-ng/brain/message-scroller';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageScrollerContent],hlm-message-scroller-content',
+	hostDirectives: [
+		{
+			directive: BrnMessageScrollerContent,
+			inputs: ['aria-relevant', 'spacerClassName'],
+		},
+	],
+	host: {
+		'data-slot': 'message-scroller-content',
+	},
+})
+export class HlmMessageScrollerContent {
+	constructor() {
+		classes(() => 'spartan-message-scroller-content flex h-max min-h-full flex-col');
+	}
+}

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnMessageScrollerItem } from '@spartan-ng/brain/message-scroller';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageScrollerItem],hlm-message-scroller-item',
+	hostDirectives: [
+		{
+			directive: BrnMessageScrollerItem,
+			inputs: ['messageId', 'scrollAnchor'],
+		},
+	],
+	host: {
+		'data-slot': 'message-scroller-item',
+	},
+})
+export class HlmMessageScrollerItem {
+	constructor() {
+		classes(() => 'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]');
+	}
+}

package/src/generators/ui/libs/message-scroller/files/lib/hlm-message-scroller-provider.ts.template

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { BrnMessageScrollerProvider } from '@spartan-ng/brain/message-scroller';
+
+@Directive({
+	selector: '[hlmMessageScrollerProvider]',
+	hostDirectives: [
+		{
+			directive: BrnMessageScrollerProvider,
+			inputs: ['autoScroll', 'defaultScrollPosition', 'scrollEdgeThreshold', 'scrollPreviousItemPeek', 'scrollMargin'],
+		},
+	],
+	host: {
+		// Match React's Provider (no layout box) so height:100% on the scroller
+		// resolves against the real parent (e.g. card content), not this wrapper.
+		// Inline style — don't depend on a Tailwind `contents` utility being generated.
+		style: 'display: contents',
+	},
+})
+export class HlmMessageScrollerProvider {}

package/src/generators/ui/libs/message-scroller/files/lib/hlm-message-scroller-viewport.ts.template

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { BrnMessageScrollerViewport } from '@spartan-ng/brain/message-scroller';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageScrollerViewport],hlm-message-scroller-viewport',
+	hostDirectives: [
+		{
+			directive: BrnMessageScrollerViewport,
+			inputs: ['preserveScrollOnPrepend', 'aria-label', 'tabindex'],
+		},
+	],
+	host: {
+		'data-slot': 'message-scroller-viewport',
+	},
+})
+export class HlmMessageScrollerViewport {
+	constructor() {
+		classes(
+			() =>
+				'scroll-fade-b size-full min-h-0 min-w-0 scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent',
+		);
+	}
+}

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnMessageScrollerRoot } from '@spartan-ng/brain/message-scroller';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageScroller],hlm-message-scroller',
+	hostDirectives: [{ directive: BrnMessageScrollerRoot }],
+	host: {
+		'data-slot': 'message-scroller',
+	},
+})
+export class HlmMessageScroller {
+	constructor() {
+		classes(() => 'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden');
+	}
+}

package/src/generators/ui/libs/message-scroller/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/message-scroller/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: 'message-scroller' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/message-scroller/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/message-scroller/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,kBAAkB,EAAE,CAAC,CAAC;AAC/E,CAAC"}

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

@@ -39,6 +39,7 @@ exports.primitiveDependencies = {
     marker: ['utils'],
     menubar: ['utils', 'dropdown-menu'],
     message: ['utils'],
+    'message-scroller': ['utils', 'button'],
     'native-select': ['utils'],
     'navigation-menu': ['utils'],
     pagination: ['utils', 'button', 'select'],

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' | 'attachment' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'bubble' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'chart' | 'checkbox' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'drawer' | 'dropdown-menu' | 'empty' | 'field' | 'hover-card' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'marker' | 'menubar' | 'message' | 'native-select' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'questionnaire' | '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' | 'attachment' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'bubble' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'chart' | 'checkbox' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'drawer' | 'dropdown-menu' | 'empty' | 'field' | 'hover-card' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'marker' | 'menubar' | 'message' | 'message-scroller' | 'native-select' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'questionnaire' | '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/style-luma.css

@@ -1305,6 +1305,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-8;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-3 text-sm;

package/src/generators/ui/style-lyra.css

@@ -567,6 +567,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-6;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-2 text-xs;

package/src/generators/ui/style-maia.css

@@ -589,6 +589,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-8;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-2.5 text-sm;

package/src/generators/ui/style-mira.css

@@ -589,6 +589,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-6;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-1.5 text-xs/relaxed;

package/src/generators/ui/style-nova.css

@@ -619,6 +619,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-6;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-2 text-sm;

package/src/generators/ui/style-vega.css

@@ -643,6 +643,11 @@
 		@apply min-w-0;
 	}
 
+	/* MARK: Message Scroller */
+	.spartan-message-scroller-content {
+		@apply gap-8;
+	}
+
 	/* MARK: Message */
 	.spartan-message {
 		@apply gap-2.5 text-sm;

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

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -20,7 +20,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -43,7 +43,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -53,7 +53,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"badge": {
@@ -83,7 +83,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -92,7 +92,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -103,7 +103,7 @@
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"card": {
@@ -140,7 +140,7 @@
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -148,7 +148,7 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"combobox": {
@@ -156,7 +156,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -168,7 +168,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -178,7 +178,7 @@
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0"
 		}
 	},
@@ -189,7 +189,7 @@
 			"@angular/forms": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"clsx": "^2.1.1"
 		}
@@ -198,7 +198,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/common": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -211,7 +211,7 @@
 		"name": "drawer",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -222,7 +222,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"rxjs": "^7.8.0"
 		}
 	},
@@ -237,7 +237,7 @@
 		"name": "field",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -246,7 +246,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"input": {
@@ -254,7 +254,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"input-group": {
@@ -271,7 +271,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"item": {
@@ -279,7 +279,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"kbd": {
@@ -292,7 +292,7 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"marker": {
@@ -306,7 +306,7 @@
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0"
 		}
 	},
@@ -316,6 +316,15 @@
 			"@angular/core": ">=21.0.0 <23.0.0"
 		}
 	},
+	"message-scroller": {
+		"name": "message-scroller",
+		"peerDependencies": {
+			"@angular/core": ">=21.0.0 <23.0.0",
+			"@ng-icons/core": ">=32.0.0 <34.0.0",
+			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
+			"@spartan-ng/brain": "1.5.0-beta.4"
+		}
+	},
 	"native-select": {
 		"name": "native-select",
 		"peerDependencies": {
@@ -324,7 +333,7 @@
 			"@angular/forms": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -333,7 +342,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
 		}
@@ -354,7 +363,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"progress": {
@@ -362,7 +371,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"questionnaire": {
@@ -371,7 +380,7 @@
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"radio-group": {
@@ -379,7 +388,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/common": ">=21.0.0 <23.0.0"
@@ -389,7 +398,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"scroll-area": {
@@ -405,7 +414,7 @@
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -415,14 +424,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -434,7 +443,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -453,7 +462,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"sonner": {
@@ -463,7 +472,7 @@
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -479,7 +488,7 @@
 		"name": "switch",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
 			"clsx": "^2.1.1"
@@ -495,7 +504,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -509,14 +518,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
 			"@angular/forms": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3"
+			"@spartan-ng/brain": "1.5.0-beta.4"
 		}
 	},
 	"toggle": {
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -524,7 +533,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"@angular/cdk": ">=21.0.0 <23.0.0"
 		}
 	},
@@ -533,7 +542,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=21.0.0 <23.0.0",
 			"@angular/core": ">=21.0.0 <23.0.0",
-			"@spartan-ng/brain": "1.5.0-beta.3",
+			"@spartan-ng/brain": "1.5.0-beta.4",
 			"class-variance-authority": "^0.7.0"
 		}
 	},