@spartan-ng/cli 0.0.1-alpha.489 → 0.0.1-alpha.491

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-numbered-pagination-query-params.component.ts.template

@@ -28,13 +28,13 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 			<div class="flex items-center gap-1 text-nowrap text-sm text-gray-600">
 				<b>{{ totalItems() }}</b>
 				total items |
-				<b>{{ pages().length }}</b>
+				<b>{{ _pages().length }}</b>
 				pages
 			</div>
 
 			<nav hlmPagination>
 				<ul hlmPaginationContent>
-					@if (showEdges() && !isFirstPageActive()) {
+					@if (showEdges() && !_isFirstPageActive()) {
 						<li hlmPaginationItem>
 							<hlm-pagination-previous
 								[link]="link()"
@@ -44,7 +44,7 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 						</li>
 					}
 
-					@for (page of pages(); track page) {
+					@for (page of _pages(); track page) {
 						<li hlmPaginationItem>
 							@if (page === '...') {
 								<hlm-pagination-ellipsis />
@@ -62,7 +62,7 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 						</li>
 					}
 
-					@if (showEdges() && !isLastPageActive()) {
+					@if (showEdges() && !_isLastPageActive()) {
 						<li hlmPaginationItem>
 							<hlm-pagination-next
 								[link]="link()"
@@ -80,7 +80,7 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 					<hlm-select-value />
 				</hlm-select-trigger>
 				<hlm-select-content>
-					@for (pageSize of pageSizesWithCurrent(); track pageSize) {
+					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
 						<hlm-option [value]="pageSize">{{ pageSize }} / page</hlm-option>
 					}
 				</hlm-select-content>
@@ -147,17 +147,17 @@ export class HlmNumberedPaginationQueryParamsComponent {
 	 */
 	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
 
-	protected readonly pageSizesWithCurrent = computed(() => {
+	protected readonly _pageSizesWithCurrent = computed(() => {
 		const pageSizes = this.pageSizes();
 		return pageSizes.includes(this.itemsPerPage())
 			? pageSizes // if current page size is included, return the same array
 			: [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
 	});
 
-	protected readonly isFirstPageActive = computed(() => this.currentPage() === 1);
-	protected readonly isLastPageActive = computed(() => this.currentPage() === this.lastPageNumber());
+	protected readonly _isFirstPageActive = computed(() => this.currentPage() === 1);
+	protected readonly _isLastPageActive = computed(() => this.currentPage() === this._lastPageNumber());
 
-	protected readonly lastPageNumber = computed(() => {
+	protected readonly _lastPageNumber = computed(() => {
 		if (this.totalItems() < 1) {
 			// when there are 0 or fewer (an error case) items, there are no "pages" as such,
 			// but it makes sense to consider a single, empty page as the last page.
@@ -166,7 +166,7 @@ export class HlmNumberedPaginationQueryParamsComponent {
 		return Math.ceil(this.totalItems() / this.itemsPerPage());
 	});
 
-	protected readonly pages = computed(() => {
+	protected readonly _pages = computed(() => {
 		const correctedCurrentPage = outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage());
 
 		if (correctedCurrentPage !== this.currentPage()) {

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

@@ -27,19 +27,19 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 			<div class="flex items-center gap-1 text-nowrap text-sm text-gray-600">
 				<b>{{ totalItems() }}</b>
 				total items |
-				<b>{{ pages().length }}</b>
+				<b>{{ _pages().length }}</b>
 				pages
 			</div>
 
 			<nav hlmPagination>
 				<ul hlmPaginationContent>
-					@if (showEdges() && !isFirstPageActive()) {
+					@if (showEdges() && !_isFirstPageActive()) {
 						<li hlmPaginationItem (click)="goToPrevious()">
 							<hlm-pagination-previous />
 						</li>
 					}
 
-					@for (page of pages(); track page) {
+					@for (page of _pages(); track page) {
 						<li hlmPaginationItem>
 							@if (page === '...') {
 								<hlm-pagination-ellipsis />
@@ -51,7 +51,7 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 						</li>
 					}
 
-					@if (showEdges() && !isLastPageActive()) {
+					@if (showEdges() && !_isLastPageActive()) {
 						<li hlmPaginationItem (click)="goToNext()">
 							<hlm-pagination-next />
 						</li>
@@ -65,7 +65,7 @@ import { HlmPaginationDirective } from './hlm-pagination.directive';
 					<hlm-select-value />
 				</hlm-select-trigger>
 				<hlm-select-content>
-					@for (pageSize of pageSizesWithCurrent(); track pageSize) {
+					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
 						<hlm-option [value]="pageSize">{{ pageSize }} / page</hlm-option>
 					}
 				</hlm-select-content>
@@ -126,17 +126,17 @@ export class HlmNumberedPaginationComponent {
 	 */
 	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
 
-	protected readonly pageSizesWithCurrent = computed(() => {
+	protected readonly _pageSizesWithCurrent = computed(() => {
 		const pageSizes = this.pageSizes();
 		return pageSizes.includes(this.itemsPerPage())
 			? pageSizes // if current page size is included, return the same array
 			: [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
 	});
 
-	protected readonly isFirstPageActive = computed(() => this.currentPage() === 1);
-	protected readonly isLastPageActive = computed(() => this.currentPage() === this.lastPageNumber());
+	protected readonly _isFirstPageActive = computed(() => this.currentPage() === 1);
+	protected readonly _isLastPageActive = computed(() => this.currentPage() === this._lastPageNumber());
 
-	protected readonly lastPageNumber = computed(() => {
+	protected readonly _lastPageNumber = computed(() => {
 		if (this.totalItems() < 1) {
 			// when there are 0 or fewer (an error case) items, there are no "pages" as such,
 			// but it makes sense to consider a single, empty page as the last page.
@@ -145,7 +145,7 @@ export class HlmNumberedPaginationComponent {
 		return Math.ceil(this.totalItems() / this.itemsPerPage());
 	});
 
-	protected readonly pages = computed(() => {
+	protected readonly _pages = computed(() => {
 		const correctedCurrentPage = outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage());
 
 		if (correctedCurrentPage !== this.currentPage()) {
@@ -169,7 +169,7 @@ export class HlmNumberedPaginationComponent {
 	}
 
 	protected goToLast(): void {
-		this.currentPage.set(this.lastPageNumber());
+		this.currentPage.set(this._lastPageNumber());
 	}
 }
 

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

@@ -20,7 +20,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			[link]="link()"
 			[queryParams]="queryParams()"
 			[queryParamsHandling]="queryParamsHandling()"
-			[size]="size()"
+			[size]="_size()"
 			[attr.aria-label]="ariaLabel()"
 		>
 			<span [class]="_labelClass()">{{ text() }}</span>
@@ -48,7 +48,7 @@ export class HlmPaginationNextComponent {
 	});
 	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
 
-	protected readonly size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
+	protected readonly _size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
 
 	protected readonly _computedClass = computed(() =>
 		hlm('gap-1', !this.iconOnly() ? 'sm:pr-2.5' : '', this.userClass()),

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

@@ -20,7 +20,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			[link]="link()"
 			[queryParams]="queryParams()"
 			[queryParamsHandling]="queryParamsHandling()"
-			[size]="size()"
+			[size]="_size()"
 			[attr.aria-label]="ariaLabel()"
 		>
 			<ng-icon hlm size="sm" name="lucideChevronLeft" />
@@ -48,7 +48,7 @@ export class HlmPaginationPreviousComponent {
 	});
 	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
 
-	protected readonly size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
+	protected readonly _size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
 
 	protected readonly _computedClass = computed(() =>
 		hlm('gap-1', !this.iconOnly() ? 'sm:pl-2.5' : '', this.userClass()),

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

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmPopoverCloseDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
 			this.userClass(),

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

@@ -21,7 +21,7 @@ export class HlmPopoverContentDirective {
 	}
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 			this.userClass(),

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

@@ -7,8 +7,8 @@ import type { ClassValue } from 'clsx';
 	selector: '[hlmProgressIndicator],brn-progress-indicator[hlm]',
 	host: {
 		'[class]': '_computedClass()',
-		'[class.animate-indeterminate]': 'indeterminate()',
-		'[style.transform]': 'transform()',
+		'[class.animate-indeterminate]': '_indeterminate()',
+		'[style.transform]': '_transform()',
 	},
 })
 export class HlmProgressIndicatorDirective {
@@ -19,9 +19,9 @@ export class HlmProgressIndicatorDirective {
 		hlm('bg-primary h-full w-full flex-1 transition-all', this.userClass()),
 	);
 
-	protected readonly transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);
+	protected readonly _transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);
 
-	protected readonly indeterminate = computed(
+	protected readonly _indeterminate = computed(
 		() => this._progress.value() === null || this._progress.value() === undefined,
 	);
 }

package/src/generators/ui/libs/ui-radio-group-helm/files/lib/hlm-radio-indicator.component.ts.template

@@ -14,7 +14,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmRadioIndicatorComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'relative flex items-center justify-center border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px] group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50',
 			this.userClass(),

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

@@ -42,7 +42,7 @@ import { ClassValue } from 'clsx';
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
-		'[attr.data-disabled]': 'state().disabled() ? "" : null',
+		'[attr.data-disabled]': '_state().disabled() ? "" : null',
 	},
 })
 export class HlmRadioComponent<T = unknown> {
@@ -56,7 +56,7 @@ export class HlmRadioComponent<T = unknown> {
 		hlm(
 			'group flex items-center gap-x-3',
 			this.userClass(),
-			this.state().disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._state().disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),
 	);
 
@@ -83,7 +83,7 @@ export class HlmRadioComponent<T = unknown> {
 	/** Whether the checkbox is disabled. */
 	public readonly disabled = input(false, { transform: booleanAttribute });
 
-	protected readonly state = computed(() => {
+	protected readonly _state = computed(() => {
 		const id = this.id();
 		return {
 			disabled: signal(this.disabled()),
@@ -98,7 +98,7 @@ export class HlmRadioComponent<T = unknown> {
 
 	constructor() {
 		effect(() => {
-			const state = this.state();
+			const state = this._state();
 			const isDisabled = state.disabled();
 
 			if (!this._elementRef.nativeElement || !this._isBrowser) return;

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

@@ -15,7 +15,7 @@ export class HlmSelectLabelDirective {
 	private readonly _selectContent = inject(HlmSelectContentDirective);
 	private readonly _stickyLabels = computed(() => this._selectContent.stickyLabels());
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'text-muted-foreground px-2 py-1.5 text-xs',
 			this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',

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

@@ -29,7 +29,7 @@ export const selectTriggerVariants = cva(
 	template: `
 		<button [class]="_computedClass()" #button hlmInput brnSelectTrigger type="button" [attr.data-size]="size()">
 			<ng-content />
-			@if (icon()) {
+			@if (_icon()) {
 				<ng-content select="ng-icon" />
 			} @else {
 				<ng-icon hlm size="sm" class="ml-2 flex-none" name="lucideChevronDown" />
@@ -39,15 +39,15 @@ export const selectTriggerVariants = cva(
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmSelectTriggerComponent {
-	protected readonly icon = contentChild(HlmIconDirective);
+	protected readonly _icon = contentChild(HlmIconDirective);
 
-	protected readonly brnSelect = inject(BrnSelectComponent, { optional: true });
+	protected readonly _brnSelect = inject(BrnSelectComponent, { optional: true });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	public readonly size = input<'default' | 'sm'>('default');
 
-	protected _computedClass = computed(() =>
-		hlm(selectTriggerVariants({ error: this.brnSelect?.errorState() }), this.userClass()),
+	protected readonly _computedClass = computed(() =>
+		hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass()),
 	);
 }

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

@@ -10,7 +10,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetCloseDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none',
 			this.userClass(),

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

@@ -68,5 +68,7 @@ export class HlmSheetContentComponent {
 	}
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(sheetVariants({ side: this._sideProvider.side() }), this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm(sheetVariants({ side: this._sideProvider.side() }), this.userClass()),
+	);
 }

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

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

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

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 export class HlmSheetOverlayDirective {
 	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 			this.userClass(),

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

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

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

@@ -25,7 +25,7 @@ import type { ClassValue } from 'clsx';
 			<div class="bg-primary absolute h-full" brnSliderRange></div>
 		</div>
 
-		@if (slider.showTicks()) {
+		@if (_slider.showTicks()) {
 			<div class="pointer-events-none absolute -inset-x-px top-2 h-1 w-full cursor-pointer transition-all">
 				<div
 					*brnSliderTick="let tick; let position = position"
@@ -48,12 +48,12 @@ import type { ClassValue } from 'clsx';
 	imports: [BrnSliderThumbDirective, BrnSliderTrackDirective, BrnSliderRangeDirective, BrnSliderTickDirective],
 })
 export class HlmSliderComponent {
-	protected readonly slider = injectBrnSlider();
+	protected readonly _slider = injectBrnSlider();
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
 			'relative flex w-full touch-none select-none items-center',
-			this.slider.disabled() ? 'opacity-40' : '',
+			this._slider.mutableDisabled() ? 'opacity-40' : '',
 			this.userClass(),
 		),
 	);

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

@@ -31,7 +31,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSpinnerComponent {
 	public readonly userClass = input<ClassValue>('size-8', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm('inline-block [&>svg]:text-foreground/30 [&>svg]:fill-accent', this.userClass()),
 	);
 }

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

@@ -14,7 +14,7 @@ export class HlmTabsContentDirective {
 	public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
 			this.userClass(),

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

@@ -33,5 +33,7 @@ export class HlmTabsListComponent {
 	public readonly orientation = input<ListVariants['orientation']>('horizontal');
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(listVariants({ orientation: this.orientation() }), this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm(listVariants({ orientation: this.orientation() }), this.userClass()),
+	);
 }

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

@@ -34,10 +34,10 @@ import { listVariants } from './hlm-tabs-list.component';
 			type="button"
 			aria-hidden="true"
 			tabindex="-1"
-			[class.flex]="_showPaginationControls()"
-			[class.hidden]="!_showPaginationControls()"
+			[class.flex]="showPaginationControls()"
+			[class.hidden]="!showPaginationControls()"
 			[class]="_paginationButtonClass()"
-			[disabled]="_disableScrollBefore || null"
+			[disabled]="disableScrollBefore || null"
 			(click)="_handlePaginatorClick('before')"
 			(mousedown)="_handlePaginatorPress('before', $event)"
 			(touchend)="_stopInterval()"
@@ -59,10 +59,10 @@ import { listVariants } from './hlm-tabs-list.component';
 			type="button"
 			aria-hidden="true"
 			tabindex="-1"
-			[class.flex]="_showPaginationControls()"
-			[class.hidden]="!_showPaginationControls()"
+			[class.flex]="showPaginationControls()"
+			[class.hidden]="!showPaginationControls()"
 			[class]="_paginationButtonClass()"
-			[disabled]="_disableScrollAfter || null"
+			[disabled]="disableScrollAfter || null"
 			(click)="_handlePaginatorClick('after')"
 			(mousedown)="_handlePaginatorPress('after', $event)"
 			(touchend)="_stopInterval()"
@@ -76,15 +76,15 @@ import { listVariants } from './hlm-tabs-list.component';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmTabsPaginatedListComponent extends BrnTabsPaginatedListDirective {
-	public readonly _items = contentChildren(BrnTabsTriggerDirective, { descendants: false });
+	public readonly items = contentChildren(BrnTabsTriggerDirective, { descendants: false });
 	/** Explicitly annotating type to avoid non-portable inferred type */
-	public readonly _itemsChanges: Observable<ReadonlyArray<BrnPaginatedTabHeaderItem>> = toObservable(this._items);
+	public readonly itemsChanges: Observable<ReadonlyArray<BrnPaginatedTabHeaderItem>> = toObservable(this.items);
 
-	public readonly _tabListContainer = viewChild.required<ElementRef<HTMLElement>>('tabListContainer');
-	public readonly _tabList = viewChild.required<ElementRef<HTMLElement>>('tabList');
-	public readonly _tabListInner = viewChild.required<ElementRef<HTMLElement>>('tabListInner');
-	public readonly _nextPaginator = viewChild.required<ElementRef<HTMLElement>>('nextPaginator');
-	public readonly _previousPaginator = viewChild.required<ElementRef<HTMLElement>>('previousPaginator');
+	public readonly tabListContainer = viewChild.required<ElementRef<HTMLElement>>('tabListContainer');
+	public readonly tabList = viewChild.required<ElementRef<HTMLElement>>('tabList');
+	public readonly tabListInner = viewChild.required<ElementRef<HTMLElement>>('tabListInner');
+	public readonly nextPaginator = viewChild.required<ElementRef<HTMLElement>>('nextPaginator');
+	public readonly previousPaginator = viewChild.required<ElementRef<HTMLElement>>('previousPaginator');
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>

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

@@ -12,5 +12,5 @@ export const hlmH4 = 'scroll-m-20 text-xl font-semibold tracking-tight';
 })
 export class HlmH4Directive {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmH4, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmH4, this.userClass()));
 }