@spartan-ng/cli 0.0.1-alpha.717 → 0.0.1-alpha.719

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

@@ -1,197 +1,146 @@
-import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { NgTemplateOutlet } from '@angular/common';
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	input,
-	model,
-	numberAttribute,
-	viewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import { BrnCalendar, BrnCalendarImports, injectBrnCalendarI18n, type Weekday } from '@spartan-ng/brain/calendar';
+import { BrnCalendar, BrnCalendarImports, injectBrnCalendarI18n } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import { buttonVariants } from '<%- importAlias %>/button';
-import { HlmIcon } from '<%- importAlias %>/icon';
+import { buttonVariants, HlmButtonImports } from '<%- importAlias %>/button';
 import { HlmSelectImports } from '<%- importAlias %>/select';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
+import { classes, hlm } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-calendar',
-	imports: [BrnCalendarImports, NgIcon, HlmIcon, HlmSelectImports, NgTemplateOutlet],
+	imports: [BrnCalendarImports, NgIcon, HlmSelectImports, NgTemplateOutlet, HlmButtonImports],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [
+		{
+			directive: BrnCalendar,
+			inputs: ['min', 'max', 'disabled', 'date', 'dateDisabled', 'weekStartsOn', 'highlightDays', 'defaultFocusedDate'],
+			outputs: ['dateChange'],
+		},
+	],
 	host: { 'data-slot': 'calendar' },
 	template: `
-		<div
-			brnCalendar
-			[min]="min()"
-			[max]="max()"
-			[disabled]="disabled()"
-			[(date)]="date"
-			[dateDisabled]="dateDisabled()"
-			[weekStartsOn]="weekStartsOn()"
-			[highlightDays]="highlightDays()"
-			[defaultFocusedDate]="defaultFocusedDate()"
-			[class]="_computedCalenderClass()"
-		>
-			<div class="inline-flex flex-col space-y-4">
-				<!-- Header -->
-				<div class="space-y-4">
-					<div class="relative flex items-center justify-center pt-1">
-						<div class="flex w-full items-center justify-center gap-1.5">
-							<ng-template #month>
-								<hlm-select brnCalendarMonthSelect>
-									<hlm-select-trigger size="sm" [class]="_selectClass">
-										<hlm-select-value />
-									</hlm-select-trigger>
-									<hlm-select-content *hlmSelectPortal class="max-h-80">
-										<hlm-select-group>
-											@for (month of _i18n.config().months(); track month) {
-												<hlm-select-item [value]="month">{{ month }}</hlm-select-item>
-											}
-										</hlm-select-group>
-									</hlm-select-content>
-								</hlm-select>
-							</ng-template>
-							<ng-template #year>
-								<hlm-select brnCalendarYearSelect>
-									<hlm-select-trigger size="sm" [class]="_selectClass">
-										<hlm-select-value />
-									</hlm-select-trigger>
-									<hlm-select-content *hlmSelectPortal class="max-h-80">
-										<hlm-select-group>
-											@for (year of _i18n.config().years(); track year) {
-												<hlm-select-item [value]="year">{{ year }}</hlm-select-item>
-											}
-										</hlm-select-group>
-									</hlm-select-content>
-								</hlm-select>
-							</ng-template>
-							@let heading = _heading();
-							@switch (captionLayout()) {
-								@case ('dropdown') {
-									<ng-container [ngTemplateOutlet]="month" />
-									<ng-container [ngTemplateOutlet]="year" />
+		<div class="inline-flex flex-col gap-4">
+			<!-- Header -->
+			<div class="flex w-full items-center justify-between gap-1.5">
+				<ng-template #month>
+					<hlm-select brnCalendarMonthSelect class="order-1">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (month of _i18n.config().months(); track month) {
+									<hlm-select-item [value]="month">{{ month }}</hlm-select-item>
 								}
-								@case ('dropdown-months') {
-									<ng-container [ngTemplateOutlet]="month" />
-									<div brnCalendarHeader class="text-sm font-medium">{{ heading.year }}</div>
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				<ng-template #year>
+					<hlm-select brnCalendarYearSelect class="order-3">
+						<hlm-select-trigger size="sm" [class]="_selectClass">
+							<hlm-select-value />
+						</hlm-select-trigger>
+						<hlm-select-content *hlmSelectPortal class="max-h-80">
+							<hlm-select-group>
+								@for (year of _i18n.config().years(); track year) {
+									<hlm-select-item [value]="year">{{ year }}</hlm-select-item>
 								}
-								@case ('dropdown-years') {
-									<div brnCalendarHeader class="text-sm font-medium">{{ heading.month }}</div>
-									<ng-container [ngTemplateOutlet]="year" />
-								}
-								@case ('label') {
-									<div brnCalendarHeader class="text-sm font-medium">{{ heading.header }}</div>
-								}
-							}
-						</div>
-
-						<div class="flex items-center space-x-1">
-							<button
-								brnCalendarPreviousButton
-								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium whitespace-nowrap transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-							>
-								<ng-icon hlm name="lucideChevronLeft" size="sm" />
-							</button>
-
-							<button
-								brnCalendarNextButton
-								class="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium whitespace-nowrap transition-colors hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-							>
-								<ng-icon hlm name="lucideChevronRight" size="sm" />
-							</button>
-						</div>
-					</div>
-				</div>
+							</hlm-select-group>
+						</hlm-select-content>
+					</hlm-select>
+				</ng-template>
+				@let heading = _heading();
+
+				<button
+					brnCalendarPreviousButton
+					variant="ghost"
+					hlmBtn
+					class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+				</button>
+
+				@switch (captionLayout()) {
+					@case ('dropdown') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('dropdown-months') {
+						<ng-container [ngTemplateOutlet]="month" />
+						<div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+					}
+					@case ('dropdown-years') {
+						<div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+						<ng-container [ngTemplateOutlet]="year" />
+					}
+					@case ('label') {
+						<div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+					}
+				}
+
+				<button
+					brnCalendarNextButton
+					hlmBtn
+					variant="ghost"
+					class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+				>
+					<ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+				</button>
+			</div>
 
-				<table class="w-full border-collapse space-y-1" brnCalendarGrid>
-					<thead>
-						<tr class="flex">
-							<th
-								*brnCalendarWeekday="let weekday"
-								scope="col"
-								class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-								[attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+			<table class="w-full border-collapse space-y-1" brnCalendarGrid>
+				<thead aria-hidden="true">
+					<tr class="flex">
+						<th
+							*brnCalendarWeekday="let weekday"
+							scope="col"
+							class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+							[attr.aria-label]="_i18n.config().labelWeekday(weekday)"
+						>
+							{{ _i18n.config().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)) {
+							<td
+								brnCalendarCell
+								class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
 							>
-								{{ _i18n.config().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)) {
-								<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>
-								</td>
-							}
-						</tr>
-					</tbody>
-				</table>
-			</div>
+								<button brnCalendarCellButton [date]="date" [class]="_btnClass">
+									{{ _dateAdapter.getDate(date) }}
+								</button>
+							</td>
+						}
+					</tr>
+				</tbody>
+			</table>
 		</div>
 	`,
 })
 export class HlmCalendar<T> {
-	public readonly calendarClass = input<ClassValue>('');
-
-	protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
-
 	/** Access the calendar i18n */
 	protected readonly _i18n = injectBrnCalendarI18n();
 
 	/** Access the date time adapter */
 	protected readonly _dateAdapter = injectDateAdapter<T>();
 
-	/** The days to highlight. */
-	public readonly highlightDays = input<T[]>([]);
-
-	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
-
-	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
-
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
-	/** Determine if the date picker is disabled. */
-	public readonly disabled = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-
-	/** The selected value. */
-	public readonly date = model<T>();
-
-	/** Whether a specific date is disabled. */
-	public readonly dateDisabled = input<(date: T) => boolean>(() => false);
-
-	/** The day the week starts on */
-	public readonly weekStartsOn = input<Weekday, NumberInput>(undefined, {
-		transform: (v: unknown) => numberAttribute(v) as Weekday,
-	});
-
-	/** The default focused date. */
-	public readonly defaultFocusedDate = input<T>();
-
 	/** Access the calendar directive */
-	private readonly _calendar = viewChild.required(BrnCalendar);
+	private readonly _calendar = inject(BrnCalendar);
 
 	/** Get the heading for the current month and year */
 	protected readonly _heading = computed(() => {
 		const config = this._i18n.config();
-		const date = this._calendar().focusedDate();
+		const date = this._calendar.focusedDate();
 
 		return {
 			header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
@@ -201,17 +150,13 @@ export class HlmCalendar<T> {
 	});
 
 	protected readonly _btnClass = hlm(
-		buttonVariants({ variant: 'ghost' }),
-		'size-8 p-0 font-normal aria-selected:opacity-100',
-		'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30',
-		'data-[today]:bg-accent data-[today]:text-accent-foreground',
-		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-		'dark:hover:text-accent-foreground',
+		buttonVariants({ variant: 'ghost', size: 'icon' }),
+		'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
+		'data-[outside=true]:opacity-50',
 		"data-[highlighted]:before:content-['']",
 		'data-[highlighted]:before:absolute',
 		'data-[highlighted]:before:bottom-1',
-		'data-[highlighted]:before:left-1/2',
+		'data-[highlighted]:before:start-1/2',
 		'data-[highlighted]:before:h-1',
 		'data-[highlighted]:before:w-1',
 		'data-[highlighted]:before:-translate-x-1/2',
@@ -219,5 +164,12 @@ export class HlmCalendar<T> {
 		'data-[highlighted]:before:bg-destructive',
 	);
 
-	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ml-1';
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-calendar group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		);
+	}
 }

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

@@ -2,14 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, effect, inject, untracked
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowRight } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
-	imports: [NgIcon, HlmIcon],
-	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: {
@@ -18,7 +17,7 @@ import { HlmCarousel } from './hlm-carousel';
 		'(click)': '_carousel.scrollNext()',
 	},
 	template: `
-		<ng-icon hlm size="sm" name="lucideArrowRight" class="rtl:rotate-180" />
+		<ng-icon name="lucideArrowRight" class="rtl:rotate-180" />
 		<span class="sr-only">Next slide</span>
 	`,
 })

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

@@ -2,14 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, effect, inject, untracked
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowLeft } from '@ng-icons/lucide';
 import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import { HlmCarousel } from './hlm-carousel';
 
 @Component({
 	selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
-	imports: [NgIcon, HlmIcon],
-	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon' })],
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
 	host: {
@@ -18,7 +17,7 @@ import { HlmCarousel } from './hlm-carousel';
 		'(click)': '_carousel.scrollPrev()',
 	},
 	template: `
-		<ng-icon hlm size="sm" name="lucideArrowLeft" class="rtl:rotate-180" />
+		<ng-icon name="lucideArrowLeft" class="rtl:rotate-180" />
 		<span class="sr-only">Previous slide</span>
 	`,
 })

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

@@ -17,7 +17,6 @@ import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
@@ -29,7 +28,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-checkbox',
-	imports: [BrnCheckbox, NgIcon, HlmIcon],
+	imports: [BrnCheckbox, NgIcon],
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58,8 +57,8 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			(touched)="_onTouched?.()"
 		>
 			@if (checked() || indeterminate()) {
-				<span class="flex items-center justify-center text-current transition-none">
-					<ng-icon hlm size="14px" name="lucideCheck" />
+				<span class="spartan-checkbox-indicator flex items-center justify-center text-current transition-none">
+					<ng-icon name="lucideCheck" />
 				</span>
 			}
 		</brn-checkbox>

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

@@ -53,7 +53,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<ng-content select="[hlmDatePickerHeader]" />
 				<hlm-calendar-multi
-					calendarClass="border-0 rounded-none"
+					class="rounded-none border-0"
 					[date]="_mutableDate()"
 					[captionLayout]="captionLayout()"
 					[min]="min()"

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

@@ -47,7 +47,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<ng-content select="[hlmDatePickerHeader]" />
 				<hlm-calendar
-					calendarClass="rounded-none border-0"
+					class="rounded-none border-0"
 					[captionLayout]="captionLayout()"
 					[date]="_mutableDate()"
 					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"

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

@@ -53,7 +53,7 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
 				<ng-content select="[hlmDatePickerHeader]" />
 				<hlm-calendar-range
-					calendarClass="border-0 rounded-none"
+					class="rounded-none border-0"
 					[startDate]="_start()"
 					[captionLayout]="captionLayout()"
 					[endDate]="_end()"

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

@@ -2,11 +2,11 @@ import type { BooleanInput } from '@angular/cdk/coercion';
 import type { ComponentType } from '@angular/cdk/portal';
 import { NgComponentOutlet } from '@angular/common';
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { provideIcons } from '@ng-icons/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
 import { HlmButton } from '<%- importAlias %>/button';
-import { HlmIconImports } from '<%- importAlias %>/icon';
+
 import { classes } from '<%- importAlias %>/utils';
 import { HlmDialogClose } from './hlm-dialog-close';
 
@@ -18,7 +18,7 @@ type HlmDialogContentContext = {
 
 @Component({
 	selector: 'hlm-dialog-content',
-	imports: [NgComponentOutlet, HlmIconImports, HlmButton, HlmDialogClose],
+	imports: [NgComponentOutlet, HlmButton, HlmDialogClose, NgIcon],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
@@ -35,7 +35,7 @@ type HlmDialogContentContext = {
 		@if (showCloseButton()) {
 			<button hlmBtn variant="ghost" size="icon-sm" class="spartan-dialog-close" hlmDialogClose>
 				<span class="sr-only">close</span>
-				<ng-icon hlm size="sm" name="lucideX" />
+				<ng-icon name="lucideX" />
 			</button>
 		}
 	`,

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

@@ -9,7 +9,7 @@ import { classes } from '<%- importAlias %>/utils';
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<ng-icon name="lucideChevronRight" class="text-[calc(var(--spacing)*4)] rtl:rotate-180" />
+		<ng-icon name="lucideChevronRight" class="text-[length:--spacing(4)] rtl:rotate-180" />
 	`,
 })
 export class HlmDropdownMenuItemSubIndicator {

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

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideMinus } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-input-otp-separator',
-	imports: [HlmIcon, NgIcon],
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideMinus })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
@@ -14,7 +13,7 @@ import { classes } from '<%- importAlias %>/utils';
 		'data-slot': 'input-otp-separator',
 	},
 	template: `
-		<ng-icon hlm name="lucideMinus" />
+		<ng-icon name="lucideMinus" />
 	`,
 })
 export class HlmInputOtpSeparator {

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

@@ -10,17 +10,17 @@ import {
 	Renderer2,
 	signal,
 } from '@angular/core';
-import { provideIcons } from '@ng-icons/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { HlmButton } from '<%- importAlias %>/button';
-import { HlmIconImports } from '<%- importAlias %>/icon';
+
 import { classes } from '<%- importAlias %>/utils';
 import { HlmSheetClose } from './hlm-sheet-close';
 
 @Component({
 	selector: 'hlm-sheet-content',
-	imports: [HlmIconImports, HlmButton, HlmSheetClose],
+	imports: [HlmButton, HlmSheetClose, NgIcon],
 	providers: [provideIcons({ lucideX })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
@@ -34,7 +34,7 @@ import { HlmSheetClose } from './hlm-sheet-close';
 		@if (showCloseButton()) {
 			<button hlmBtn variant="ghost" size="icon-sm" class="spartan-sheet-close" hlmSheetClose>
 				<span class="sr-only">Close</span>
-				<ng-icon hlm size="sm" name="lucideX" />
+				<ng-icon name="lucideX" />
 			</button>
 		}
 	`,

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

@@ -12,7 +12,7 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 const sidebarMenuButtonVariants = cva(
-	'spartan-sidebar-menu-button peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[calc(var(--spacing)*4)] [&>span:last-child]:truncate',
+	'spartan-sidebar-menu-button peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[length:--spacing(4)] [&>span:last-child]:truncate',
 	{
 		variants: {
 			variant: {

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

@@ -27,6 +27,6 @@ export class HlmSpinner {
 	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
 	constructor() {
-		classes(() => 'inline-flex text-[calc(var(--spacing)*4)] motion-safe:animate-spin');
+		classes(() => 'inline-flex text-[length:--spacing(4)] motion-safe:animate-spin');
 	}
 }

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

@@ -2,9 +2,9 @@ import { CdkObserveContent } from '@angular/cdk/observers';
 import {
 	ChangeDetectionStrategy,
 	Component,
-	type ElementRef,
 	computed,
 	contentChildren,
+	type ElementRef,
 	input,
 	viewChild,
 } from '@angular/core';
@@ -13,7 +13,6 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
 import { type BrnPaginatedTabHeaderItem, BrnTabsPaginatedList, BrnTabsTrigger } from '@spartan-ng/brain/tabs';
 import { buttonVariants } from '<%- importAlias %>/button';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { classes, hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import type { Observable } from 'rxjs';
@@ -21,7 +20,7 @@ import { listVariants } from './hlm-tabs-list';
 
 @Component({
 	selector: 'hlm-paginated-tabs-list',
-	imports: [CdkObserveContent, NgIcon, HlmIcon],
+	imports: [CdkObserveContent, NgIcon],
 	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
@@ -42,7 +41,7 @@ import { listVariants } from './hlm-tabs-list';
 			(mousedown)="_handlePaginatorPress('before', $event)"
 			(touchend)="_stopInterval()"
 		>
-			<ng-icon hlm size="base" name="lucideChevronLeft" />
+			<ng-icon name="lucideChevronLeft" />
 		</button>
 
 		<div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
@@ -67,14 +66,14 @@ import { listVariants } from './hlm-tabs-list';
 			(mousedown)="_handlePaginatorPress('after', $event)"
 			(touchend)="_stopInterval()"
 		>
-			<ng-icon hlm size="base" name="lucideChevronRight" />
+			<ng-icon name="lucideChevronRight" />
 		</button>
 	`,
 })
 export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
 	constructor() {
 		super();
-		classes(() => 'relative flex flex-shrink-0 gap-1 overflow-hidden');
+		classes(() => 'relative flex flex-shrink-0 items-center gap-1 overflow-hidden');
 	}
 
 	public readonly items = contentChildren(BrnTabsTrigger, { descendants: false });
@@ -90,11 +89,11 @@ export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
 	public readonly tabListClass = input<ClassValue>('', { alias: 'tabListClass' });
 	protected readonly _tabListClass = computed(() => hlm(listVariants(), this.tabListClass()));
 
-	public readonly paginationButtonClass = input<ClassValue>('', { alias: 'paginationButtonClass' });
+	public readonly paginationButtonClass = input<ClassValue>('');
 	protected readonly _paginationButtonClass = computed(() =>
 		hlm(
 			'relative z-[2] select-none disabled:cursor-default',
-			buttonVariants({ variant: 'ghost', size: 'icon' }),
+			buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
 			this.paginationButtonClass(),
 		),
 	);

package/src/generators/ui/libs/utils/files/index.ts.template

@@ -1 +1,2 @@
 export * from './lib/hlm';
+export * from './lib/provide-spartan-hlm';