@spartan-ng/cli 0.0.1-alpha.701 → 0.0.1-alpha.702

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.701",
+  "version": "0.0.1-alpha.702",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan"

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldContent],hlm-field-content',
-	host: {
-		'data-slot': 'field-content',
-	},
+	host: { 'data-slot': 'field-content' },
 })
 export class HlmFieldContent {
 	constructor() {
-		classes(() => 'group/field-content flex flex-1 flex-col gap-1 leading-snug');
+		classes(() => 'spartan-field-content group/field-content flex flex-1 flex-col leading-snug');
 	}
 }

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

@@ -1,7 +1,6 @@
 import { Directive, effect, EffectRef, inject, input, OnDestroy } from '@angular/core';
 import { BrnFieldA11yService } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldDescription],hlm-field-description',
@@ -15,7 +14,6 @@ export class HlmFieldDescription implements OnDestroy {
 
 	private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
 
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly id = input<string>(`hlm-field-description-${HlmFieldDescription._id++}`);
 
 	private _registeredId?: string;
@@ -39,10 +37,9 @@ export class HlmFieldDescription implements OnDestroy {
 
 	constructor() {
 		classes(() => [
-			'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-			'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+			'spartan-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance',
+			'last:mt-0 nth-last-2:-mt-1',
 			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-			this.userClass(),
 		]);
 	}
 

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

@@ -12,7 +12,6 @@ import {
 } from '@angular/core';
 import { BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-error',
@@ -42,9 +41,6 @@ export class HlmFieldError implements OnDestroy {
 	/** The unique ID for the field error. If none is supplied, it will be auto-generated. */
 	public readonly id = input<string>(`hlm-field-error-${HlmFieldError._id++}`);
 
-	/** Additional CSS classes to apply to the field error element. */
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
 	/**
 	 * The name of the specific validator error key to match (e.g. 'required').
 	 * When omitted, the error is shown if any validation error is present.
@@ -89,7 +85,7 @@ export class HlmFieldError implements OnDestroy {
 		: null;
 
 	constructor() {
-		classes(() => ['text-destructive text-sm font-normal', this.userClass()]);
+		classes(() => 'spartan-field-error font-normal');
 	}
 
 	ngOnDestroy() {

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

@@ -3,15 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldGroup],hlm-field-group',
-	host: {
-		'data-slot': 'field-group',
-	},
+	host: { 'data-slot': 'field-group' },
 })
 export class HlmFieldGroup {
 	constructor() {
-		classes(
-			() =>
-				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
-		);
+		classes(() => 'spartan-field-group group/field-group @container/field-group flex w-full flex-col');
 	}
 }

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

@@ -5,17 +5,13 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmFieldLabel],hlm-field-label',
 	hostDirectives: [HlmLabel],
-	host: {
-		'data-slot': 'field-label',
-	},
+	host: { 'data-slot': 'field-label' },
 })
 export class HlmFieldLabel {
 	constructor() {
 		classes(() => [
-			'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-			'has-data-[checked=true]:bg-primary/5 has-data-[checked=true]:border-primary dark:has-data-[checked=true]:bg-primary/10',
-			'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+			'spartan-field-label group/field-label peer/field-label flex w-fit',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
 		]);
 	}
 }

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

@@ -12,6 +12,6 @@ export class HlmFieldLegend {
 	public readonly variant = input<'label' | 'legend'>('legend');
 
 	constructor() {
-		classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
+		classes(() => 'spartan-field-legend');
 	}
 }

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

@@ -6,14 +6,12 @@ import { classes } from '<%- importAlias %>/utils';
 	selector: 'hlm-field-separator',
 	imports: [HlmSeparator],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'data-slot': 'field-separator',
-	},
+	host: { 'data-slot': 'field-separator' },
 	template: `
 		<hlm-separator class="absolute inset-0 top-1/2" />
 		<span
 			data-slot="field-separator-content"
-			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			class="spartan-field-separator-content bg-background relative mx-auto block w-fit"
 		>
 			<ng-content />
 		</span>
@@ -21,6 +19,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmFieldSeparator {
 	constructor() {
-		classes(() => 'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2');
+		classes(() => 'spartan-field-separator relative');
 	}
 }

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

@@ -3,15 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'fieldset[hlmFieldSet]',
-	host: {
-		'data-slot': 'field-set',
-	},
+	host: { 'data-slot': 'field-set' },
 })
 export class HlmFieldSet {
 	constructor() {
-		classes(() => [
-			'flex flex-col gap-6',
-			'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-		]);
+		classes(() => 'spartan-field-set flex flex-col');
 	}
 }

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

@@ -3,15 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmFieldTitle],hlm-field-title',
-	host: {
-		'data-slot': 'field-label',
-	},
+	host: { 'data-slot': 'field-label' },
 })
 export class HlmFieldTitle {
 	constructor() {
-		classes(
-			() =>
-				'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-		);
+		classes(() => 'spartan-field-title flex w-fit items-center');
 	}
 }

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

@@ -3,17 +3,17 @@ import { BrnField } from '@spartan-ng/brain/field';
 import { classes } from '<%- importAlias %>/utils';
 import { cva, VariantProps } from 'class-variance-authority';
 
-const fieldVariants = cva('group/field data-[matches-spartan-invalid=true]:text-destructive flex w-full gap-3', {
+const fieldVariants = cva('spartan-field group/field flex w-full', {
 	variants: {
 		orientation: {
-			vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+			vertical: 'spartan-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto',
 			horizontal: [
-				'flex-row items-center',
+				'spartan-field-orientation-horizontal flex-row items-center',
 				'*:data-[slot=field-label]:flex-auto',
 				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			],
 			responsive: [
-				'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+				'spartan-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
 				'@md/field-group:*:data-[slot=field-label]:flex-auto',
 				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 			],

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

@@ -2,8 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
 	selector: '[hlmNativeSelectOptGroup]',
-	host: {
-		'data-slot': 'native-select-optgroup',
-	},
+	host: { 'data-slot': 'native-select-optgroup' },
 })
 export class HlmNativeSelectOptGroup {}

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

@@ -2,8 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
 	selector: '[hlmNativeSelectOption]',
-	host: {
-		'data-slot': 'native-select-option',
-	},
+	host: { 'data-slot': 'native-select-option' },
 })
 export class HlmNativeSelectOption {}

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

@@ -49,7 +49,7 @@ export const HLM_NATIVE_SELECT_VALUE_ACCESSOR = {
 			[attr.data-invalid]="_ariaInvalid() ? 'true' : null"
 			[attr.data-dirty]="_dirty?.() ? 'true' : null"
 			[attr.data-touched]="_touched?.() ? 'true' : null"
-			[attr.data-matches-spartan-invalid]="_spartanInvalid?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			[value]="value()"
 			[disabled]="_disabled()"
 			(change)="_valueChanged($event)"
@@ -77,8 +77,7 @@ export class HlmNativeSelect implements ControlValueAccessor {
 
 	protected readonly _computedSelectClass = computed(() =>
 		hlm(
-			'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8',
-			'data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 data-[matches-spartan-invalid=true]:ring-3',
+			'spartan-native-select outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
 			this.selectClass(),
 		),
 	);
@@ -86,10 +85,7 @@ export class HlmNativeSelect implements ControlValueAccessor {
 	public readonly selectIconClass = input<ClassValue>('');
 
 	protected readonly _computedSelectIconClass = computed(() =>
-		hlm(
-			'text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-base select-none',
-			this.selectIconClass(),
-		),
+		hlm('spartan-native-select-icon pointer-events-none absolute select-none', this.selectIconClass()),
 	);
 
 	public readonly size = input<'sm' | 'default'>('default');
@@ -98,6 +94,9 @@ export class HlmNativeSelect implements ControlValueAccessor {
 
 	protected readonly _disabled = linkedSignal(this.disabled);
 
+	/** Whether to force the input into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
 	/** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
 	public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
 		transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
@@ -118,10 +117,10 @@ export class HlmNativeSelect implements ControlValueAccessor {
 	protected readonly _invalid = this._fieldControl?.invalid;
 	protected readonly _touched = this._fieldControl?.touched;
 	protected readonly _dirty = this._fieldControl?.dirty;
-	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
 
 	constructor() {
-		classes(() => 'group/native-select relative w-fit has-[select:disabled]:opacity-50');
+		classes(() => 'spartan-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50');
 	}
 
 	protected _valueChanged(event: Event): void {

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

@@ -21,7 +21,7 @@ import type { ClassValue } from 'clsx';
 			data-slot="select-trigger"
 		>
 			<ng-content />
-			<ng-icon name="lucideChevronDown" class="text-muted-foreground pointer-events-none text-base" />
+			<ng-icon name="lucideChevronDown" class="text-muted-foreground pointer-events-none ms-auto text-base" />
 		</button>
 	`,
 })

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

@@ -23,7 +23,7 @@ import type { ClassValue } from 'clsx';
 			[duration]="duration()"
 			[visibleToasts]="visibleToasts()"
 			[closeButton]="closeButton()"
-			[toastOptions]="toastOptions()"
+			[toastOptions]="_computedToastOptions()"
 			[offset]="offset()"
 			[style]="userStyle()"
 		>
@@ -68,6 +68,17 @@ export class HlmToaster {
 		transform: booleanAttribute,
 	});
 	public readonly toastOptions = input<ToasterProps['toastOptions']>({});
+
+	protected readonly _computedToastOptions = computed(() => {
+		const options = this.toastOptions();
+		return {
+			...options,
+			classes: {
+				...options?.classes,
+				toast: hlm('spartan-toast', options?.classes?.toast),
+			},
+		};
+	});
 	public readonly offset = input<ToasterProps['offset']>(null);
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly userStyle = input<Record<string, string>>(

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

@@ -227,7 +227,7 @@
 	}
 
 	.spartan-native-select-icon {
-		@apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
+		@apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
 	}
 
 	/* MARK: Combobox */
@@ -375,7 +375,7 @@
 	}
 
 	.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-3;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-3;
 	}
 
 	.spartan-field-content {
@@ -383,11 +383,11 @@
 	}
 
 	.spartan-field-label {
-		@apply has-data-checked:bg-input/30 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
+		@apply has-data-checked:bg-input/30 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
 	}
 
 	.spartan-field-title {
-		@apply gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50;
+		@apply gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50;
 	}
 
 	.spartan-field-description {
@@ -1202,7 +1202,7 @@
 
 	/* MARK: Sonner */
 	.spartan-toast {
-		@apply rounded-2xl;
+		@apply rounded-2xl!;
 	}
 
 	/* MARK: Table */

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

@@ -576,7 +576,7 @@
 	}
 
 	.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-2;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-2;
 	}
 
 	.spartan-field-content {
@@ -584,7 +584,7 @@
 	}
 
 	.spartan-field-label {
-		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
+		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
 	}
 
 	.spartan-field-title {
@@ -841,7 +841,7 @@
 	}
 
 	.spartan-native-select-icon {
-		@apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
+		@apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
 	}
 
 	/* MARK: Pagination */
@@ -1162,7 +1162,7 @@
 
 	/* MARK: Sonner */
 	.spartan-toast {
-		@apply rounded-none;
+		@apply rounded-none!;
 	}
 
 	/* MARK: Switch */

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

@@ -601,7 +601,7 @@
 	}
 
 	.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-3;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-3;
 	}
 
 	.spartan-field-content {
@@ -609,11 +609,11 @@
 	}
 
 	.spartan-field-label {
-		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
+		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
 	}
 
 	.spartan-field-title {
-		@apply gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50;
+		@apply gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50;
 	}
 
 	.spartan-field-description {
@@ -866,7 +866,7 @@
 	}
 
 	.spartan-native-select-icon {
-		@apply text-muted-foreground end-3.5 top-1/2 size-4 -translate-y-1/2;
+		@apply text-muted-foreground end-3.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
 	}
 
 	/* MARK: Pagination */
@@ -1187,7 +1187,7 @@
 
 	/* MARK: Sonner */
 	.spartan-toast {
-		@apply rounded-2xl;
+		@apply rounded-2xl!;
 	}
 
 	/* MARK: Switch */

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

@@ -601,7 +601,7 @@
 	}
 
 	.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-2;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-2;
 	}
 
 	.spartan-field-content {
@@ -609,7 +609,7 @@
 	}
 
 	.spartan-field-label {
-		@apply has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
+		@apply has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
 	}
 
 	.spartan-field-title {
@@ -866,7 +866,7 @@
 	}
 
 	.spartan-native-select-icon {
-		@apply text-muted-foreground end-1.5 top-1/2 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))];
+		@apply text-muted-foreground end-1.5 top-1/2 -translate-y-1.5 text-[calc(var(--spacing)*3.5)] group-data-[size=sm]/native-select:-translate-y-1.25 group-data-[size=sm]/native-select:text-[calc(var(--spacing)*3)];
 	}
 
 	/* MARK: Pagination */
@@ -1189,7 +1189,7 @@
 
 	/* MARK: Sonner */
 	.spartan-toast {
-		@apply rounded-md;
+		@apply rounded-md!;
 	}
 
 	/* MARK: Switch */

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

@@ -601,7 +601,7 @@
 	}
 
 	.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-2;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-2;
 	}
 
 	.spartan-field-content {
@@ -609,11 +609,11 @@
 	}
 
 	.spartan-field-label {
-		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5;
+		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5;
 	}
 
 	.spartan-field-title {
-		@apply gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50;
+		@apply gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50;
 	}
 
 	.spartan-field-description {
@@ -866,7 +866,7 @@
 	}
 
 	.spartan-native-select-icon {
-		@apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
+		@apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
 	}
 
 	/* MARK: Pagination */
@@ -1187,7 +1187,7 @@
 
 	/* MARK: Sonner */
 	.spartan-toast {
-		@apply rounded-2xl;
+		@apply rounded-2xl!;
 	}
 
 	/* MARK: Switch */

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

@@ -597,7 +597,7 @@
 	}
 
 	&.spartan-field {
-		@apply data-[invalid=true]:text-destructive gap-3;
+		@apply data-[matches-spartan-invalid=true]:text-destructive gap-3;
 	}
 
 	&.spartan-field-content {
@@ -605,11 +605,11 @@
 	}
 
 	&.spartan-field-label {
-		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3;
+		@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3;
 	}
 
 	&.spartan-field-title {
-		@apply gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50;
+		@apply gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50;
 	}
 
 	&.spartan-field-description {
@@ -858,11 +858,11 @@
 
 	/* MARK: Native Select */
 	&.spartan-native-select {
-		@apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-8;
+		@apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-8;
 	}
 
 	&.spartan-native-select-icon {
-		@apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
+		@apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
 	}
 
 	/* MARK: Pagination */
@@ -1183,7 +1183,7 @@
 
 	/* MARK: Sonner */
 	&.spartan-toast {
-		@apply rounded-2xl;
+		@apply rounded-2xl!;
 	}
 
 	/* MARK: Switch */

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

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -20,7 +20,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -36,7 +36,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -46,7 +46,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"badge": {
@@ -70,7 +70,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -79,7 +79,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -91,7 +91,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -119,7 +119,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -127,7 +127,7 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"combobox": {
@@ -135,7 +135,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -147,7 +147,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -157,7 +157,7 @@
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -170,7 +170,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -178,7 +178,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -194,7 +194,7 @@
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"empty": {
@@ -208,8 +208,7 @@
 		"name": "field",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
-			"clsx": "^2.1.1",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -218,7 +217,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"icon": {
@@ -234,7 +233,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"input-group": {
@@ -251,7 +250,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"item": {
@@ -259,7 +258,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"kbd": {
@@ -272,14 +271,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -292,7 +291,7 @@
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -300,7 +299,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"pagination": {
@@ -319,14 +318,14 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"radio-group": {
@@ -334,7 +333,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0"
@@ -344,7 +343,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"scroll-area": {
@@ -359,7 +358,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -369,14 +368,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -389,7 +388,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -408,7 +407,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"sonner": {
@@ -418,7 +417,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -436,7 +435,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -450,7 +449,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -464,14 +463,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701"
+			"@spartan-ng/brain": "0.0.1-alpha.702"
 		}
 	},
 	"toggle": {
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -479,7 +478,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -487,7 +486,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.701",
+			"@spartan-ng/brain": "0.0.1-alpha.702",
 			"class-variance-authority": "^0.7.0"
 		}
 	},