@spartan-ng/cli 0.0.1-alpha.708 → 0.0.1-alpha.710

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

@@ -8,7 +8,6 @@ import {
 	inject,
 	input,
 	linkedSignal,
-	model,
 	output,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
@@ -105,11 +104,12 @@ export class HlmNativeSelect implements ControlValueAccessor {
 
 	protected readonly _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._invalid?.());
 
-	public readonly value = model<string | null>('');
+	public readonly valueInput = input<string | undefined | null>('', { alias: 'value' });
+	public readonly value = linkedSignal(this.valueInput);
 
-	public readonly valueChange = output<string | null>();
+	public readonly valueChange = output<string | undefined | null>();
 
-	protected _onChange?: ChangeFn<string | null>;
+	protected _onChange?: ChangeFn<string | undefined | null>;
 	protected _onTouched?: TouchFn;
 
 	public readonly labelableId = this.selectId;
@@ -136,11 +136,11 @@ export class HlmNativeSelect implements ControlValueAccessor {
 	}
 
 	/** CONTROL VALUE ACCESSOR */
-	public writeValue(value: string | null): void {
+	public writeValue(value: string | undefined | null): void {
 		this.value.set(value);
 	}
 
-	public registerOnChange(fn: ChangeFn<string | null>): void {
+	public registerOnChange(fn: ChangeFn<string | undefined | null>): void {
 		this._onChange = fn;
 	}
 

package/src/generators/ui/libs/native-select/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'native-select' });
+"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: 'native-select' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/native-select/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/native-select/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/native-select/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,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}

package/src/generators/ui/libs/navigation-menu/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'navigation-menu' });
+"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: 'navigation-menu' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/navigation-menu/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/navigation-menu/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;AAC9E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/navigation-menu/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,iBAAiB,EAAE,CAAC,CAAC;AAC9E,CAAC"}

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

@@ -9,7 +9,6 @@ import {
 	numberAttribute,
 	untracked,
 } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HlmSelectImports } from '<%- importAlias %>/select';
 import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
 import { HlmPagination } from './hlm-pagination';
@@ -23,7 +22,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 @Component({
 	selector: 'hlm-numbered-pagination-query-params',
 	imports: [
-		FormsModule,
 		HlmPagination,
 		HlmPaginationContent,
 		HlmPaginationItem,
@@ -86,7 +84,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</nav>
 
 			<!-- Show Page Size selector -->
-			<hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
+			<hlm-select [(value)]="itemsPerPage" class="ml-auto">
 				<hlm-select-trigger class="w-fit">
 					<hlm-select-value />
 				</hlm-select-trigger>

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

@@ -9,7 +9,6 @@ import {
 	numberAttribute,
 	untracked,
 } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HlmSelectImports } from '<%- importAlias %>/select';
 import { HlmPagination } from './hlm-pagination';
 import { HlmPaginationContent } from './hlm-pagination-content';
@@ -22,7 +21,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 @Component({
 	selector: 'hlm-numbered-pagination',
 	imports: [
-		FormsModule,
 		HlmPagination,
 		HlmPaginationContent,
 		HlmPaginationItem,
@@ -71,7 +69,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 			</nav>
 
 			<!-- Show Page Size selector -->
-			<hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
+			<hlm-select [(value)]="itemsPerPage" class="ml-auto">
 				<hlm-select-trigger class="w-fit">
 					<hlm-select-value />
 				</hlm-select-trigger>

package/src/generators/ui/libs/pagination/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'pagination' });
+"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: 'pagination' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/pagination/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/pagination/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AACzE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/pagination/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,YAAY,EAAE,CAAC,CAAC;AACzE,CAAC"}

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

@@ -18,7 +18,7 @@ export class HlmPopoverContent {
 
 		classes(
 			() =>
-				'border-border bg-popover text-popover-foreground 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 relative flex w-72 flex-col rounded-md border p-4 shadow-md outline-none',
+				'spartan-popover-content 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 relative flex w-72 flex-col outline-none',
 		);
 	}
 }

package/src/generators/ui/libs/popover/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'popover' });
+"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: 'popover' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/popover/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/popover/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/popover/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}

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

@@ -1,4 +1,5 @@
-import { Directive, computed } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { Directive, computed, inject } from '@angular/core';
 import { BrnProgressIndicator, injectBrnProgress } from '@spartan-ng/brain/progress';
 import { classes } from '<%- importAlias %>/utils';
 
@@ -9,12 +10,18 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmProgressIndicator {
 	private readonly _progress = injectBrnProgress();
-	protected readonly _transform = computed(() => `translateX(-${100 - (this._progress.value() ?? 100)}%)`);
+	private readonly _dir = inject(Directionality);
+	// Offset the indicator by the unfilled remainder. In RTL the bar fills from the inline-start
+	// (visually the right), so translate the opposite way to keep the fill on the correct side.
+	protected readonly _transform = computed(() => {
+		const offset = 100 - (this._progress.value() ?? 100);
+		return `translateX(${this._dir.valueSignal() === 'rtl' ? '' : '-'}${offset}%)`;
+	});
 	protected readonly _indeterminate = computed(
 		() => this._progress.value() === null || this._progress.value() === undefined,
 	);
 
 	constructor() {
-		classes(() => 'bg-primary h-full w-full flex-1 transition-all');
+		classes(() => 'spartan-progress-indicator h-full w-full flex-1 transition-all');
 	}
 }

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

@@ -8,6 +8,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmProgress {
 	constructor() {
-		classes(() => 'bg-primary/20 relative inline-flex h-2 w-full overflow-hidden rounded-full');
+		classes(() => 'spartan-progress relative inline-flex w-full overflow-hidden');
 	}
 }

package/src/generators/ui/libs/progress/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'progress' });
+"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: 'progress' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/progress/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/progress/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/progress/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}

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

@@ -33,6 +33,10 @@ export class HlmRadioGroup {
 	protected readonly _errorState = computed(() => this._brnRadioGroup.controlState?.()?.spartanInvalid);
 
 	constructor() {
-		classes(() => ['grid gap-3', this.userClass(), this._errorState() ? 'data-[invalid=true]:text-destructive' : '']);
+		classes(() => [
+			'spartan-radio-group',
+			this.userClass(),
+			this._errorState() ? 'data-[invalid=true]:text-destructive' : '',
+		]);
 	}
 }

package/src/generators/ui/libs/radio-group/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'radio-group' });
+"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: 'radio-group' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/radio-group/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/radio-group/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/radio-group/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,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}

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

@@ -12,7 +12,7 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 	template: `
 		@if (_brnResizableHandle.withHandle()) {
-			<div class="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg"></div>
+			<div class="spartan-resizable-handle-icon z-10 flex shrink-0"></div>
 		}
 	`,
 })
@@ -21,7 +21,7 @@ export class HlmResizableHandle {
 
 	constructor() {
 		classes(() => [
-			'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+			'bg-border ring-offset-background focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
 			'data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:hover:cursor-ns-resize',
 		]);
 	}

package/src/generators/ui/libs/resizable/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'resizable' });
+"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: 'resizable' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/resizable/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/resizable/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/resizable/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,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC"}

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

@@ -1,19 +1,21 @@
 import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { provideScrollbarOptions } from 'ngx-scrollbar';
 
 @Directive({
 	selector: 'ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]',
+	providers: [provideScrollbarOptions({ visibility: 'hover' })],
 	host: {
 		'data-slot': 'scroll-area',
-		'[style.--scrollbar-border-radius]': '100 + "px"',
-		'[style.--scrollbar-offset]': '3',
 		'[style.--scrollbar-thumb-color]': '"var(--border)"',
 		'[style.--scrollbar-thumb-hover-color]': '"var(--border)"',
-		'[style.--scrollbar-thickness]': '7',
+		'[style.--scrollbar-track-color]': '"transparent"',
+		'[style.--scrollbar-track-thickness]': '"0.625rem"',
+		'[style.--scrollbar-track-offset]': '"1.5px"',
 	},
 })
 export class HlmScrollArea {
 	constructor() {
-		classes(() => 'block');
+		classes(() => 'spartan-scroll-area block');
 	}
 }

package/src/generators/ui/libs/scroll-area/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'scroll-area' });
+"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: 'scroll-area' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/scroll-area/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/scroll-area/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/scroll-area/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,aAAa,EAAE,CAAC,CAAC;AAC1E,CAAC"}

package/src/generators/ui/libs/select/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'select' });
+"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: 'select' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/select/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/select/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/select/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,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/separator/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'separator' });
+"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: 'separator' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/separator/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/separator/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/separator/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,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC"}

package/src/generators/ui/libs/sheet/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'sheet' });
+"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: 'sheet' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/sheet/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sheet/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sheet/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,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}

package/src/generators/ui/libs/sidebar/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'sidebar' });
+"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: 'sidebar' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/sidebar/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sidebar/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sidebar/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}

package/src/generators/ui/libs/skeleton/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'skeleton' });
+"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: 'skeleton' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/skeleton/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/skeleton/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/skeleton/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,UAAU,EAAE,CAAC,CAAC;AACvE,CAAC"}

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

@@ -33,19 +33,16 @@ import { classes } from '<%- importAlias %>/utils';
 	],
 	template: `
 		<div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
-			<div
-				brnSliderTrack
-				class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
-			>
+			<div brnSliderTrack class="spartan-slider-track relative grow overflow-hidden">
 				<div
-					class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
+					class="spartan-slider-range absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
 					brnSliderRange
 				></div>
 			</div>
 
 			@for (i of _slider.thumbIndexes(); track i) {
 				<span
-					class="border-ring ring-ring/50 absolute block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px]"
+					class="spartan-slider-thumb absolute block shrink-0 select-none after:absolute after:-inset-2"
 					brnSliderThumb
 				></span>
 			}

package/src/generators/ui/libs/slider/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'slider' });
+"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: 'slider' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/slider/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/slider/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/slider/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,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/sonner/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'sonner' });
+"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: 'sonner' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/sonner/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sonner/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/sonner/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,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/spinner/generator.js

@@ -1,5 +1,9 @@
-import hlmBaseGenerator from '../../../base/generator';
-export async function generator(tree, options) {
-    return await hlmBaseGenerator(tree, { ...options, name: 'spinner' });
+"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: 'spinner' });
 }
 //# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/spinner/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/spinner/generator.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAGvD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,gBAAgB,CAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/spinner/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,SAAS,EAAE,CAAC,CAAC;AACtE,CAAC"}

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

@@ -6,9 +6,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSwitchThumb {
 	constructor() {
-		classes(
-			() =>
-				'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-		);
+		classes(() => 'spartan-switch-thumb pointer-events-none block ring-0 transition-transform');
 	}
 }