@spartan-ng/cli 0.0.1-alpha.488 → 0.0.1-alpha.490

package/package.json

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

package/src/generators/ui/libs/ui-accordion-helm/files/lib/hlm-accordion-trigger.directive.ts.template

@@ -13,7 +13,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmAccordionTriggerDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
 			this.userClass(),

package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.ts.template

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 		'[class]': '_computedClass()',
 	},
 	template: `
-		@if (image()?.canShow()) {
+		@if (_image()?.canShow()) {
 			<ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
 		} @else {
 			<ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar-multi.component.ts.template

@@ -65,7 +65,7 @@ import type { ClassValue } from 'clsx';
 				<div class="space-y-4">
 					<div class="relative flex items-center justify-center pt-1">
 						<div brnCalendarHeader class="text-sm font-medium">
-							{{ heading() }}
+							{{ _heading() }}
 						</div>
 
 						<div class="flex items-center space-x-1">
@@ -93,22 +93,22 @@ import type { ClassValue } from 'clsx';
 								*brnCalendarWeekday="let weekday"
 								scope="col"
 								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-								[attr.aria-label]="i18n.labelWeekday(weekday)"
+								[attr.aria-label]="_i18n.labelWeekday(weekday)"
 							>
-								{{ i18n.formatWeekdayName(weekday) }}
+								{{ _i18n.formatWeekdayName(weekday) }}
 							</th>
 						</tr>
 					</thead>
 
 					<tbody role="rowgroup">
 						<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-							@for (date of week; track dateAdapter.getTime(date)) {
+							@for (date of week; track _dateAdapter.getTime(date)) {
 								<td
 									brnCalendarCell
 									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
 								>
-									<button brnCalendarCellButton [date]="date" [class]="btnClass">
-										{{ dateAdapter.getDate(date) }}
+									<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+										{{ _dateAdapter.getDate(date) }}
 									</button>
 								</td>
 							}
@@ -126,10 +126,10 @@ export class HlmCalendarMultiComponent<T> {
 	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
 
 	/** Access the calendar i18n */
-	protected readonly i18n = injectBrnCalendarI18n();
+	protected readonly _i18n = injectBrnCalendarI18n();
 
 	/** Access the date time adapter */
-	protected readonly dateAdapter = injectDateAdapter<T>();
+	protected readonly _dateAdapter = injectDateAdapter<T>();
 
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
@@ -170,14 +170,14 @@ export class HlmCalendarMultiComponent<T> {
 	private readonly _calendar = viewChild.required(BrnCalendarMultiDirective);
 
 	/** Get the heading for the current month and year */
-	protected heading = computed(() =>
-		this.i18n.formatHeader(
-			this.dateAdapter.getMonth(this._calendar().focusedDate()),
-			this.dateAdapter.getYear(this._calendar().focusedDate()),
+	protected readonly _heading = computed(() =>
+		this._i18n.formatHeader(
+			this._dateAdapter.getMonth(this._calendar().focusedDate()),
+			this._dateAdapter.getYear(this._calendar().focusedDate()),
 		),
 	);
 
-	protected readonly btnClass = hlm(
+	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
 		'size-8 p-0 font-normal aria-selected:opacity-100',
 		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar.component.ts.template

@@ -63,7 +63,7 @@ import type { ClassValue } from 'clsx';
 				<div class="space-y-4">
 					<div class="relative flex items-center justify-center pt-1">
 						<div brnCalendarHeader class="text-sm font-medium">
-							{{ heading() }}
+							{{ _heading() }}
 						</div>
 
 						<div class="flex items-center space-x-1">
@@ -91,22 +91,22 @@ import type { ClassValue } from 'clsx';
 								*brnCalendarWeekday="let weekday"
 								scope="col"
 								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-								[attr.aria-label]="i18n.labelWeekday(weekday)"
+								[attr.aria-label]="_i18n.labelWeekday(weekday)"
 							>
-								{{ i18n.formatWeekdayName(weekday) }}
+								{{ _i18n.formatWeekdayName(weekday) }}
 							</th>
 						</tr>
 					</thead>
 
 					<tbody role="rowgroup">
 						<tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-							@for (date of week; track dateAdapter.getTime(date)) {
+							@for (date of week; track _dateAdapter.getTime(date)) {
 								<td
 									brnCalendarCell
 									class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md"
 								>
-									<button brnCalendarCellButton [date]="date" [class]="btnClass">
-										{{ dateAdapter.getDate(date) }}
+									<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+										{{ _dateAdapter.getDate(date) }}
 									</button>
 								</td>
 							}
@@ -124,10 +124,10 @@ export class HlmCalendarComponent<T> {
 	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
 
 	/** Access the calendar i18n */
-	protected readonly i18n = injectBrnCalendarI18n();
+	protected readonly _i18n = injectBrnCalendarI18n();
 
 	/** Access the date time adapter */
-	protected readonly dateAdapter = injectDateAdapter<T>();
+	protected readonly _dateAdapter = injectDateAdapter<T>();
 
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();
@@ -158,14 +158,14 @@ export class HlmCalendarComponent<T> {
 	private readonly _calendar = viewChild.required(BrnCalendarDirective);
 
 	/** Get the heading for the current month and year */
-	protected heading = computed(() =>
-		this.i18n.formatHeader(
-			this.dateAdapter.getMonth(this._calendar().focusedDate()),
-			this.dateAdapter.getYear(this._calendar().focusedDate()),
+	protected readonly _heading = computed(() =>
+		this._i18n.formatHeader(
+			this._dateAdapter.getMonth(this._calendar().focusedDate()),
+			this._dateAdapter.getYear(this._calendar().focusedDate()),
 		),
 	);
 
-	protected readonly btnClass = hlm(
+	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
 		'size-8 p-0 font-normal aria-selected:opacity-100',
 		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-content.component.ts.template

@@ -17,8 +17,8 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 export class HlmCarouselContentComponent {
 	private readonly _orientation = inject(HlmCarouselComponent).orientation;
 
-	public _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm('flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this._userClass()),
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex', this._orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-item.component.ts.template

@@ -17,13 +17,9 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	`,
 })
 export class HlmCarouselItemComponent {
-	public _userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	private readonly _orientation = inject(HlmCarouselComponent).orientation;
-	protected _computedClass = computed(() =>
-		hlm(
-			'min-w-0 shrink-0 grow-0 basis-full',
-			this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4',
-			this._userClass(),
-		),
+	protected readonly _computedClass = computed(() =>
+		hlm('min-w-0 shrink-0 grow-0 basis-full', this._orientation() === 'horizontal' ? 'pl-4' : 'pt-4', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel-slide-display.component.ts.template

@@ -5,9 +5,9 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 @Component({
 	selector: 'hlm-carousel-slide-display',
 	template: `
-		<span class="sr-only">{{ labelContent() }}</span>
+		<span class="sr-only">{{ _labelContent() }}</span>
 		<div aria-hidden="true" class="text-muted-foreground text-sm">
-			{{ currentSlide() }} / {{ carousel.slideCount() }}
+			{{ _currentSlide() }} / {{ _carousel.slideCount() }}
 		</div>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -16,18 +16,18 @@ import { HlmCarouselComponent } from './hlm-carousel.component';
 	},
 })
 export class HlmCarouselSlideDisplayComponent {
-	protected readonly carousel = inject(HlmCarouselComponent);
+	protected readonly _carousel = inject(HlmCarouselComponent);
 
-	protected readonly currentSlide = computed(() => this.carousel.currentSlide() + 1);
+	protected readonly _currentSlide = computed(() => this._carousel.currentSlide() + 1);
 
-	public _userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => this._userClass());
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected _computedClass = computed(() => this.userClass());
 
 	public readonly label = input('Slide');
 
-	protected readonly labelContent = computed(() => {
-		const currentSlide = this.currentSlide();
-		const slideCount = this.carousel.slideCount();
+	protected readonly _labelContent = computed(() => {
+		const currentSlide = this._currentSlide();
+		const slideCount = this._carousel.slideCount();
 		return `${this.label()} ${currentSlide} of ${slideCount} is displayed`;
 	});
 }

package/src/generators/ui/libs/ui-carousel-helm/files/lib/hlm-carousel.component.ts.template

@@ -34,7 +34,7 @@ import {
 			emblaCarousel
 			class="overflow-hidden"
 			[plugins]="plugins()"
-			[options]="emblaOptions()"
+			[options]="_emblaOptions()"
 			[subscribeToEvents]="['init', 'select', 'reInit']"
 			(emblaChange)="onEmblaEvent($event)"
 		>
@@ -44,7 +44,7 @@ import {
 	`,
 })
 export class HlmCarouselComponent {
-	protected emblaCarousel = viewChild.required(EmblaCarouselDirective);
+	protected readonly _emblaCarousel = viewChild.required(EmblaCarouselDirective);
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('relative', this.userClass()));
@@ -53,7 +53,7 @@ export class HlmCarouselComponent {
 	public readonly options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined> = input();
 	public readonly plugins: InputSignal<EmblaPluginType[]> = input([] as EmblaPluginType[]);
 
-	protected emblaOptions: Signal<EmblaOptionsType> = computed(() => ({
+	protected readonly _emblaOptions: Signal<EmblaOptionsType> = computed(() => ({
 		...this.options(),
 		axis: this.orientation() === 'horizontal' ? 'x' : 'y',
 	}));
@@ -69,7 +69,7 @@ export class HlmCarouselComponent {
 	public readonly slideCount = this._slideCount.asReadonly();
 
 	protected onEmblaEvent(event: EmblaEventType) {
-		const emblaApi = this.emblaCarousel().emblaApi;
+		const emblaApi = this._emblaCarousel().emblaApi;
 
 		if (!emblaApi) {
 			return;
@@ -88,18 +88,18 @@ export class HlmCarouselComponent {
 	protected onKeydown(event: KeyboardEvent) {
 		if (event.key === 'ArrowLeft') {
 			event.preventDefault();
-			this.emblaCarousel().scrollPrev();
+			this._emblaCarousel().scrollPrev();
 		} else if (event.key === 'ArrowRight') {
 			event.preventDefault();
-			this.emblaCarousel().scrollNext();
+			this._emblaCarousel().scrollNext();
 		}
 	}
 
 	scrollPrev() {
-		this.emblaCarousel().scrollPrev();
+		this._emblaCarousel().scrollPrev();
 	}
 
 	scrollNext() {
-		this.emblaCarousel().scrollNext();
+		this._emblaCarousel().scrollNext();
 	}
 }

package/src/generators/ui/libs/ui-checkbox-helm/files/lib/hlm-checkbox.component.ts.template

@@ -34,7 +34,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
-			[disabled]="state().disabled()"
+			[disabled]="_state().disabled()"
 			[required]="required()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
@@ -55,7 +55,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
-		'[attr.data-disabled]': 'state().disabled() ? "" : null',
+		'[attr.data-disabled]': '_state().disabled() ? "" : null',
 	},
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
@@ -68,7 +68,7 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 		hlm(
 			'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-default',
 			this.userClass(),
-			this.state().disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._state().disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
@@ -96,7 +96,7 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 	/** Whether the checkbox is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
-	protected readonly state = computed(() => ({
+	protected readonly _state = computed(() => ({
 		disabled: signal(this.disabled()),
 	}));
 
@@ -106,7 +106,7 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 	protected _onTouched?: TouchFn;
 
 	protected _handleChange(): void {
-		if (this.state().disabled()) return;
+		if (this._state().disabled()) return;
 
 		const previousChecked = this.checked();
 		this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
@@ -128,7 +128,7 @@ export class HlmCheckboxComponent implements ControlValueAccessor {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this.state().disabled.set(isDisabled);
+		this._state().disabled.set(isDisabled);
 	}
 }
 

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog.directive.ts.template

@@ -19,7 +19,7 @@ export class HlmCommandDialogDirective {
 	private readonly _searchInput = contentChild(BrnCommandSearchInputToken, { read: ElementRef });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]',
 			this.userClass(),

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.component.ts.template

@@ -38,7 +38,7 @@ export class HlmCommandItemComponent {
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base w-full',
+			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base w-full data-[hidden]:hidden',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-list.component.ts.template

@@ -22,6 +22,6 @@ export class HlmCommandListComponent {
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', this.userClass()),
+		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
 	);
 }

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

@@ -43,12 +43,12 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	],
 	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
 	template: `
-		<brn-popover sideOffset="5" [state]="popoverState()" (stateChanged)="popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
+		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+			<button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
 				<ng-icon hlm size="sm" name="lucideCalendar" />
 
 				<span class="truncate">
-					@if (formattedDate(); as formattedDate) {
+					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
 					} @else {
 						<ng-content />
@@ -64,7 +64,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 					[max]="max()"
 					[minSelection]="minSelection()"
 					[maxSelection]="maxSelection()"
-					[disabled]="state().disabled()"
+					[disabled]="_state().disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
@@ -125,13 +125,13 @@ export class HlmDatePickerMultiComponent<T> implements ControlValueAccessor {
 	/** Defines how the date should be transformed before saving to model/form. */
 	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);
 
-	protected readonly popoverState = signal<BrnDialogState | null>(null);
+	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly state = computed(() => ({
+	protected readonly _state = computed(() => ({
 		disabled: signal(this.disabled()),
 	}));
 
-	protected readonly formattedDate = computed(() => {
+	protected readonly _formattedDate = computed(() => {
 		const dates = this.date();
 		return dates ? this.formatDates()(dates) : undefined;
 	});
@@ -144,7 +144,7 @@ export class HlmDatePickerMultiComponent<T> implements ControlValueAccessor {
 	protected _handleChange(value: T[] | undefined) {
 		if (value === undefined) return;
 
-		if (this.state().disabled()) return;
+		if (this._state().disabled()) return;
 		const transformedDate = this.transformDates()(value);
 
 		this.date.set(transformedDate);
@@ -152,7 +152,7 @@ export class HlmDatePickerMultiComponent<T> implements ControlValueAccessor {
 		this.changed.emit(transformedDate);
 
 		if (this.autoCloseOnMaxSelection() && this.date()?.length === this.maxSelection()) {
-			this.popoverState.set('closed');
+			this._popoverState.set('closed');
 		}
 	}
 
@@ -173,14 +173,14 @@ export class HlmDatePickerMultiComponent<T> implements ControlValueAccessor {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this.state().disabled.set(isDisabled);
+		this._state().disabled.set(isDisabled);
 	}
 
 	open() {
-		this.popoverState.set('open');
+		this._popoverState.set('open');
 	}
 
 	close() {
-		this.popoverState.set('closed');
+		this._popoverState.set('closed');
 	}
 }

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

@@ -42,10 +42,10 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	],
 	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
 	template: `
-		<brn-popover sideOffset="5" [state]="popoverState()" (stateChanged)="popoverState.set($event)">
-			<button type="button" [class]="_computedClass()" [disabled]="state().disabled()" brnPopoverTrigger>
+		<brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+			<button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
 				<span class="truncate">
-					@if (formattedDate(); as formattedDate) {
+					@if (_formattedDate(); as formattedDate) {
 						{{ formattedDate }}
 					} @else {
 						<ng-content />
@@ -61,7 +61,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 					[date]="date()"
 					[min]="min()"
 					[max]="max()"
-					[disabled]="state().disabled()"
+					[disabled]="_state().disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
 			</div>
@@ -112,13 +112,13 @@ export class HlmDatePickerComponent<T> implements ControlValueAccessor {
 	/** Defines how the date should be transformed before saving to model/form. */
 	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
 
-	protected readonly popoverState = signal<BrnDialogState | null>(null);
+	protected readonly _popoverState = signal<BrnDialogState | null>(null);
 
-	protected readonly state = computed(() => ({
+	protected readonly _state = computed(() => ({
 		disabled: signal(this.disabled()),
 	}));
 
-	protected readonly formattedDate = computed(() => {
+	protected readonly _formattedDate = computed(() => {
 		const date = this.date();
 		return date ? this.formatDate()(date) : undefined;
 	});
@@ -129,7 +129,7 @@ export class HlmDatePickerComponent<T> implements ControlValueAccessor {
 	protected _onTouched?: TouchFn;
 
 	protected _handleChange(value: T) {
-		if (this.state().disabled()) return;
+		if (this._state().disabled()) return;
 		const transformedDate = this.transformDate()(value);
 
 		this.date.set(transformedDate);
@@ -137,7 +137,7 @@ export class HlmDatePickerComponent<T> implements ControlValueAccessor {
 		this.changed.emit(transformedDate);
 
 		if (this.autoCloseOnSelect()) {
-			this.popoverState.set('closed');
+			this._popoverState.set('closed');
 		}
 	}
 
@@ -158,14 +158,14 @@ export class HlmDatePickerComponent<T> implements ControlValueAccessor {
 	}
 
 	setDisabledState(isDisabled: boolean): void {
-		this.state().disabled.set(isDisabled);
+		this._state().disabled.set(isDisabled);
 	}
 
 	open() {
-		this.popoverState.set('open');
+		this._popoverState.set('open');
 	}
 
 	close() {
-		this.popoverState.set('closed');
+		this._popoverState.set('closed');
 	}
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-description.directive.ts.template

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogDescriptionDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
 }

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-title.directive.ts.template

@@ -12,5 +12,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogTitleDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('text-lg font-semibold leading-none tracking-tight', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('text-lg font-semibold leading-none tracking-tight', this.userClass()),
+	);
 }

package/src/generators/ui/libs/ui-form-field-helm/files/lib/hlm-form-field.component.ts.template

@@ -17,7 +17,7 @@ import { HlmErrorDirective } from './hlm-error.directive';
 	template: `
 		<ng-content />
 
-		@switch (hasDisplayedMessage()) {
+		@switch (_hasDisplayedMessage()) {
 			@case ('error') {
 				<ng-content select="hlm-error" />
 			}
@@ -38,7 +38,7 @@ export class HlmFormFieldComponent {
 
 	public readonly errorChildren = contentChildren(HlmErrorDirective);
 
-	protected readonly hasDisplayedMessage = computed<'error' | 'hint'>(() =>
+	protected readonly _hasDisplayedMessage = computed<'error' | 'hint'>(() =>
 		this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint',
 	);
 

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

@@ -48,11 +48,11 @@ type InputVariants = VariantProps<typeof inputVariants>;
 export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
 	public readonly error = input<InputVariants['error']>('auto');
 
-	protected readonly state = linkedSignal(() => ({ error: this.error() }));
+	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(inputVariants({ error: this.state().error }), this.userClass()),
+		hlm(inputVariants({ error: this._state().error }), this.userClass()),
 	);
 
 	private readonly _injector = inject(Injector);
@@ -92,6 +92,6 @@ export class HlmInputDirective implements BrnFormFieldControl, DoCheck {
 	}
 
 	setError(error: InputVariants['error']) {
-		this.state.set({ error });
+		this._state.set({ error });
 	}
 }

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

@@ -20,7 +20,7 @@ export class HlmLabelDirective {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50',
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar-item.directive.ts.template

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuBarItemDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none',
 			this.userClass(),

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-checkbox.directive.ts.template

@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuItemCheckboxDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
 			this.userClass(),

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-radio.directive.ts.template

@@ -18,7 +18,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmMenuItemRadioDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'group w-full relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',
 			this.userClass(),