@spartan-ng/cli 0.0.1-alpha.703 → 0.0.1-alpha.705

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

@@ -45,9 +45,7 @@ import { classes } from '<%- importAlias %>/utils';
 			outputs: ['stateChanged', 'closed'],
 		},
 	],
-	host: {
-		'data-slot': 'combobox',
-	},
+	host: { 'data-slot': 'combobox' },
 })
 export class HlmComboboxMultiple {
 	constructor() {

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

@@ -11,7 +11,7 @@ export class HlmComboboxPlaceholder {
 	constructor() {
 		classes(
 			() =>
-				"flex items-center gap-2 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base",
+				'spartan-combobox-placeholder flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmComboboxSeparator]',
 	hostDirectives: [{ directive: BrnComboboxSeparator, inputs: ['orientation'] }],
-	host: {
-		'data-slot': 'combobox-separator',
-	},
+	host: { 'data-slot': 'combobox-separator' },
 })
 export class HlmComboboxSeparator {
 	constructor() {
-		classes(() => 'bg-border -mx-1 my-1 h-px');
+		classes(() => 'spartan-combobox-separator');
 	}
 }

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmComboboxStatus],hlm-combobox-status',
 	hostDirectives: [BrnComboboxStatus],
-	host: {
-		'data-slot': 'combobox-status',
-	},
+	host: { 'data-slot': 'combobox-status' },
 })
 export class HlmComboboxStatus {
 	constructor() {
-		classes(() => 'text-muted-foreground flex w-full items-center justify-center gap-2 py-2 text-center text-sm');
+		classes(() => 'spartan-combobox-status flex w-full items-center justify-center text-center');
 	}
 }

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

@@ -32,7 +32,7 @@ import type { ClassValue } from 'clsx';
 			[variant]="variant()"
 		>
 			<ng-content />
-			<ng-icon name="lucideChevronDown" />
+			<ng-icon name="lucideChevronDown" class="spartan-combobox-trigger-icon" />
 		</button>
 	`,
 })
@@ -42,7 +42,7 @@ export class HlmComboboxTrigger {
 	public readonly userClass = input<ClassValue>('', {
 		alias: 'class',
 	});
-	protected readonly _computedClass = computed(() => hlm('data-placeholder:text-muted-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('spartan-combobox-trigger', this.userClass()));
 
 	public readonly buttonId = input<string>(`hlm-combobox-trigger-${HlmComboboxTrigger._id++}`);
 

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

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmComboboxValue],hlm-combobox-value',
 	hostDirectives: [{ directive: BrnComboboxValue, inputs: ['placeholder'] }],
+	host: { 'data-slot': 'combobox-value' },
 })
 export class HlmComboboxValue {
 	constructor() {

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

@@ -45,9 +45,7 @@ import { classes } from '<%- importAlias %>/utils';
 			outputs: ['stateChanged', 'closed'],
 		},
 	],
-	host: {
-		'data-slot': 'combobox',
-	},
+	host: { 'data-slot': 'combobox' },
 })
 export class HlmCombobox {
 	constructor() {

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

@@ -30,9 +30,6 @@ export class HlmSelectContent {
 	public readonly showScroll = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
 	constructor() {
-		classes(
-			() =>
-				'bg-popover no-scrollbar text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 relative isolate flex max-h-72 w-(--brn-select-width) min-w-36 flex-col overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100',
-		);
+		classes(() => 'spartan-select-content relative flex w-(--brn-select-width) overflow-x-hidden overflow-y-auto');
 	}
 }

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmSelectGroup],hlm-select-group',
 	hostDirectives: [{ directive: BrnSelectGroup }],
-	host: {
-		'data-slot': 'select-group',
-	},
+	host: { 'data-slot': 'select-group' },
 })
 export class HlmSelectGroup {
 	constructor() {
-		classes(() => 'scroll-my-1 p-1');
+		classes(() => 'spartan-select-group');
 	}
 }

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

@@ -10,13 +10,11 @@ import { classes } from '<%- importAlias %>/utils';
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnSelectItem, inputs: ['id', 'disabled', 'value'] }],
-	host: {
-		'data-slot': 'select-item',
-	},
+	host: { 'data-slot': 'select-item' },
 	template: `
 		<ng-content />
 		@if (_active()) {
-			<ng-icon name="lucideCheck" class="absolute right-2 flex items-center justify-center" aria-hidden="true" />
+			<ng-icon name="lucideCheck" class="spartan-select-item-indicator" aria-hidden="true" />
 		}
 	`,
 })
@@ -28,7 +26,7 @@ export class HlmSelectItem {
 	constructor() {
 		classes(
 			() =>
-				"data-highlighted:bg-accent data-highlighted::text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				'spartan-select-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmSelectLabel],hlm-select-label',
 	hostDirectives: [{ directive: BrnSelectLabel, inputs: ['id'] }],
-	host: {
-		'data-slot': 'select-label',
-	},
+	host: { 'data-slot': 'select-label' },
 })
 export class HlmSelectLabel {
 	constructor() {
-		classes(() => 'text-muted-foreground block px-2 py-1.5 text-xs');
+		classes(() => 'spartan-select-label flex');
 	}
 }

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

@@ -36,9 +36,7 @@ import { classes } from '<%- importAlias %>/utils';
 			outputs: ['stateChanged', 'closed'],
 		},
 	],
-	host: {
-		'data-slot': 'select',
-	},
+	host: { 'data-slot': 'select' },
 })
 export class HlmSelectMultiple {
 	constructor() {

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

@@ -11,7 +11,7 @@ export class HlmSelectPlaceholder {
 	constructor() {
 		classes(
 			() =>
-				"flex items-center gap-2 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base",
+				'spartan-select-placeholder flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 		);
 	}
 }

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

@@ -16,9 +16,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSelectScrollDown {
 	constructor() {
-		classes(
-			() =>
-				"bg-popover sticky bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 data-hidden:hidden [&_ng-icon:not([class*='text-'])]:text-base",
-		);
+		classes(() => 'spartan-select-scroll-down-button sticky bottom-0 w-full data-hidden:hidden');
 	}
 }

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

@@ -16,9 +16,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSelectScrollUp {
 	constructor() {
-		classes(
-			() =>
-				"bg-popover sticky top-0 z-10 flex w-full cursor-default items-center justify-center py-1 data-hidden:hidden [&_ng-icon:not([class*='text-'])]:text-base",
-		);
+		classes(() => 'spartan-select-scroll-up-button sticky top-0 w-full data-hidden:hidden');
 	}
 }

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmSelectSeparator],hlm-select-separator',
 	hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
-	host: {
-		'data-slot': 'select-separator',
-	},
+	host: { 'data-slot': 'select-separator' },
 })
 export class HlmSelectSeparator {
 	constructor() {
-		classes(() => 'bg-border pointer-events-none -mx-1 my-1 h-px shrink-0');
+		classes(() => 'spartan-select-separator pointer-events-none');
 	}
 }

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

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
@@ -15,13 +16,14 @@ import type { ClassValue } from 'clsx';
 		<button
 			brnSelectTrigger
 			brnFieldControlDescribedBy
+			[forceInvalid]="forceInvalid()"
 			[id]="buttonId()"
 			[class]="_computedClass()"
 			[attr.data-size]="size()"
 			data-slot="select-trigger"
 		>
 			<ng-content />
-			<ng-icon name="lucideChevronDown" class="text-muted-foreground pointer-events-none ms-auto text-base" />
+			<ng-icon name="lucideChevronDown" class="spartan-select-trigger-icon ms-auto" />
 		</button>
 	`,
 })
@@ -31,8 +33,7 @@ export class HlmSelectTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 flex w-full items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base",
-			'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-select-trigger flex w-fit justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),
 		),
 	);
@@ -40,4 +41,7 @@ export class HlmSelectTrigger {
 	public readonly buttonId = input<string>(`hlm-select-trigger-${HlmSelectTrigger._id++}`);
 
 	public readonly size = input<'default' | 'sm'>('default');
+
+	/** Whether to force the trigger into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 }

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

@@ -4,6 +4,6 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
 export class HlmSelectValuesContent {
 	constructor() {
-		classes(() => 'flex gap-1');
+		classes(() => 'spartan-select-values-content flex');
 	}
 }

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

@@ -36,9 +36,7 @@ import { classes } from '<%- importAlias %>/utils';
 			outputs: ['stateChanged', 'closed'],
 		},
 	],
-	host: {
-		'data-slot': 'select',
-	},
+	host: { 'data-slot': 'select' },
 })
 export class HlmSelect {
 	constructor() {

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

@@ -170,23 +170,15 @@
 
 	/* MARK: Select */
 	.spartan-select-trigger {
-		@apply bg-input/50 data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 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 gap-1.5 rounded-3xl border border-transparent px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
-	}
-
-	.spartan-select-value {
-		@apply flex flex-1 text-start;
+		@apply bg-input/50 data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 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 gap-1.5 rounded-3xl border border-transparent px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5;
 	}
 
 	.spartan-select-trigger-icon {
-		@apply text-muted-foreground size-4;
+		@apply text-muted-foreground text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-select-content {
-		@apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 min-w-36 rounded-3xl shadow-lg ring-1 duration-100;
-	}
-
-	.spartan-select-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2;
+		@apply bg-popover no-scrollbar text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/5 dark:ring-foreground/10 max-h-72 min-w-36 flex-col rounded-3xl shadow-lg ring-1 duration-100;
 	}
 
 	.spartan-select-label {
@@ -194,21 +186,17 @@
 	}
 
 	.spartan-select-item {
-		@apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
+		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
 	}
 
 	.spartan-select-item-indicator {
-		@apply pointer-events-none absolute end-2 flex size-4 items-center justify-center;
+		@apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-select-group {
 		@apply scroll-my-1.5 p-1.5;
 	}
 
-	.spartan-select-item-text {
-		@apply flex flex-1 gap-2;
-	}
-
 	.spartan-select-separator {
 		@apply bg-border -mx-1.5 my-1.5 h-px;
 	}
@@ -221,6 +209,14 @@
 		@apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
 	}
 
+	.spartan-select-placeholder {
+		@apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
+	}
+
+	.spartan-select-values-content {
+		@apply gap-2;
+	}
+
 	/* MARK: Native Select */
 	.spartan-native-select {
 		@apply bg-input/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 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-3xl border border-transparent py-1 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-8;
@@ -232,11 +228,7 @@
 
 	/* MARK: Combobox */
 	.spartan-combobox-content {
-		@apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 *:data-[slot=input-group]:bg-input/50 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-3xl shadow-lg ring-1 duration-100 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;
-	}
-
-	.spartan-combobox-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2;
+		@apply bg-popover text-popover-foreground data-open:animate-in **:has-[[data-slot=input-group-control]:focus-visible]:border-input data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 **:data-[slot=input-group]:bg-input/50 **:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-3xl shadow-lg ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1.5 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-8 **:data-[slot=input-group]:shadow-none;
 	}
 
 	.spartan-combobox-label {
@@ -244,23 +236,19 @@
 	}
 
 	.spartan-combobox-item {
-		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
+		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium;
 	}
 
 	.spartan-combobox-item-indicator {
-		@apply pointer-events-none absolute end-2 flex size-4 items-center justify-center;
+		@apply pointer-events-none absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-combobox-empty {
-		@apply text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex;
+		@apply text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex;
 	}
 
 	.spartan-combobox-list {
-		@apply no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto p-1.5 data-empty:p-0;
-	}
-
-	.spartan-combobox-item-text {
-		@apply flex flex-1 gap-2;
+		@apply no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1.5 overflow-y-auto p-1.5 data-empty:p-0;
 	}
 
 	.spartan-combobox-separator {
@@ -268,11 +256,11 @@
 	}
 
 	.spartan-combobox-trigger {
-		@apply [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
+		@apply data-placeholder:text-muted-foreground;
 	}
 
 	.spartan-combobox-trigger-icon {
-		@apply text-muted-foreground size-4;
+		@apply text-muted-foreground text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-combobox-chips {
@@ -284,7 +272,19 @@
 	}
 
 	.spartan-combobox-chip-remove {
-		@apply -ml-1 opacity-50 hover:opacity-100;
+		@apply -ms-1 opacity-50 hover:opacity-100;
+	}
+
+	.spartan-combobox-chip-input {
+		@apply placeholder:text-muted-foreground;
+	}
+
+	.spartan-combobox-placeholder {
+		@apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
+	}
+
+	.spartan-combobox-status {
+		@apply text-muted-foreground gap-2 py-2 text-sm;
 	}
 
 	/* MARK: Input Group */
@@ -498,6 +498,39 @@
 		@apply absolute end-3 top-2.5;
 	}
 
+	/* MARK: Autocomplete */
+	.spartan-autocomplete-content {
+		@apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 max-h-72 min-w-36 overflow-hidden rounded-3xl shadow-lg ring-1 duration-100;
+	}
+
+	.spartan-autocomplete-label {
+		@apply text-muted-foreground px-3 py-2.5 text-xs;
+	}
+
+	.spartan-autocomplete-item {
+		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium;
+	}
+
+	.spartan-autocomplete-item-indicator {
+		@apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
+	}
+
+	.spartan-autocomplete-empty {
+		@apply text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-sm group-data-empty/autocomplete-content:flex;
+	}
+
+	.spartan-autocomplete-list {
+		@apply no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1.5 p-1.5 data-empty:p-0;
+	}
+
+	.spartan-autocomplete-separator {
+		@apply bg-border -mx-1.5 my-1.5 h-px;
+	}
+
+	.spartan-autocomplete-status {
+		@apply text-muted-foreground gap-2 py-2 text-sm;
+	}
+
 	/* MARK: Avatar */
 	.spartan-avatar {
 		@apply size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;