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

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

@@ -74,6 +74,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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100;
+	}
+
+	.spartan-autocomplete-label {
+		@apply text-muted-foreground px-3.5 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-xl py-2 ps-3 pe-8 text-sm;
+	}
+
+	.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 p-1 data-empty:p-0;
+	}
+
+	.spartan-autocomplete-separator {
+		@apply bg-border/50 -mx-1 my-1 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;
@@ -294,11 +327,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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none;
-	}
-
-	.spartan-combobox-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 **:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-9 **:data-[slot=input-group]:border-none **:data-[slot=input-group]:shadow-none;
 	}
 
 	.spartan-combobox-label {
@@ -306,23 +335,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-xl py-2 ps-3 pe-8 text-sm [&_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-xl py-2 ps-3 pe-8 text-sm;
 	}
 
 	.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 overflow-y-auto p-1 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 overflow-y-auto p-1 data-empty:p-0;
 	}
 
 	.spartan-combobox-separator {
@@ -330,15 +355,15 @@
 	}
 
 	.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 {
-		@apply bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-data-[slot=combobox-chip]:px-1.5 data-[matches-spartan-invalid=true]:ring-[3px];
+		@apply bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-data-[slot=combobox-chip]:px-1.5 data-[matches-spartan-invalid=true]:ring-[3px];
 	}
 
 	.spartan-combobox-chip {
@@ -346,7 +371,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: Command */
@@ -961,23 +998,15 @@
 
 	/* MARK: Select */
 	.spartan-select-trigger {
-		@apply border-input data-placeholder:text-muted-foreground 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 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] data-[matches-spartan-invalid=true]:ring-[3px] 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 border-input data-placeholder:text-muted-foreground 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 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100;
-	}
-
-	.spartan-select-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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 max-h-72 min-w-36 flex-col rounded-2xl shadow-2xl ring-1 duration-100;
 	}
 
 	.spartan-select-label {
@@ -985,21 +1014,17 @@
 	}
 
 	.spartan-select-item {
-		@apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm [&_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-xl py-2 ps-3 pe-8 text-sm *:[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 p-1;
 	}
 
-	.spartan-select-item-text {
-		@apply flex flex-1 gap-2;
-	}
-
 	.spartan-select-separator {
 		@apply bg-border/50 -mx-1 my-1 h-px;
 	}
@@ -1012,6 +1037,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: Separator */
 	.spartan-separator {
 		@apply bg-border shrink-0;
@@ -1120,7 +1153,7 @@
 	}
 
 	.spartan-sidebar-menu-button-variant-outline {
-		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)];
 	}
 
 	.spartan-sidebar-menu-button-size-default {

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

@@ -74,6 +74,39 @@
 		@apply absolute end-2 top-1.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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100;
+	}
+
+	.spartan-autocomplete-label {
+		@apply text-muted-foreground px-2 py-1.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 min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed;
+	}
+
+	.spartan-autocomplete-item-indicator {
+		@apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*3.5)];
+	}
+
+	.spartan-autocomplete-empty {
+		@apply text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-xs/relaxed group-data-empty/autocomplete-content:flex;
+	}
+
+	.spartan-autocomplete-list {
+		@apply no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1 p-1 data-empty:p-0;
+	}
+
+	.spartan-autocomplete-separator {
+		@apply bg-border/50 -mx-1 my-1 h-px;
+	}
+
+	.spartan-autocomplete-status {
+		@apply text-muted-foreground gap-2 py-2 text-xs/relaxed;
+	}
+
 	/* MARK: Avatar */
 	.spartan-avatar {
 		@apply size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;
@@ -294,11 +327,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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none;
-	}
-
-	.spartan-combobox-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 **:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-7 **:data-[slot=input-group]:border-none **:data-[slot=input-group]:shadow-none;
 	}
 
 	.spartan-combobox-label {
@@ -306,23 +335,19 @@
 	}
 
 	.spartan-combobox-item {
-		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
+		@apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed;
 	}
 
 	.spartan-combobox-item-indicator {
-		@apply pointer-events-none absolute end-2 flex items-center justify-center;
+		@apply pointer-events-none absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-combobox-empty {
-		@apply text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex;
+		@apply text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-xs/relaxed 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 overflow-y-auto p-1 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 overflow-y-auto p-1 data-empty:p-0;
 	}
 
 	.spartan-combobox-separator {
@@ -330,15 +355,15 @@
 	}
 
 	.spartan-combobox-trigger {
-		@apply [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
+		@apply data-placeholder:text-muted-foreground;
 	}
 
 	.spartan-combobox-trigger-icon {
-		@apply text-muted-foreground size-3.5;
+		@apply text-muted-foreground text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-combobox-chips {
-		@apply bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-data-[slot=combobox-chip]:px-1 data-[matches-spartan-invalid=true]:ring-2;
+		@apply bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed shadow-xs transition-[color,box-shadow] focus-within:ring-2 has-data-[slot=combobox-chip]:px-1 data-[matches-spartan-invalid=true]:ring-2;
 	}
 
 	.spartan-combobox-chip {
@@ -346,7 +371,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)*3.5)];
+	}
+
+	.spartan-combobox-status {
+		@apply text-muted-foreground gap-2 py-2 text-xs/relaxed;
 	}
 
 	/* MARK: Command */
@@ -961,23 +998,15 @@
 
 	/* MARK: Select */
 	.spartan-select-trigger {
-		@apply border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 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-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 data-[matches-spartan-invalid=true]:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
-	}
-
-	.spartan-select-value {
-		@apply flex flex-1 text-start;
+		@apply border-input data-placeholder:text-muted-foreground bg-input/20 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 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 data-[matches-spartan-invalid=true]:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:gap-1.5;
 	}
 
 	.spartan-select-trigger-icon {
-		@apply text-muted-foreground size-3.5;
+		@apply text-muted-foreground text-[calc(var(--spacing)*3.5)];
 	}
 
 	.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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100;
-	}
-
-	.spartan-select-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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/10 max-h-72 min-w-36 flex-col rounded-lg shadow-md ring-1 duration-100;
 	}
 
 	.spartan-select-label {
@@ -985,21 +1014,17 @@
 	}
 
 	.spartan-select-item {
-		@apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)] *:[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 min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
 	}
 
 	.spartan-select-item-indicator {
-		@apply pointer-events-none absolute end-2 flex items-center justify-center;
+		@apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-select-group {
 		@apply scroll-my-1 p-1;
 	}
 
-	.spartan-select-item-text {
-		@apply flex flex-1 gap-2;
-	}
-
 	.spartan-select-separator {
 		@apply bg-border/50 -mx-1 my-1 h-px;
 	}
@@ -1012,6 +1037,14 @@
 		@apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
+	.spartan-select-placeholder {
+		@apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
+	}
+
+	.spartan-select-values-content {
+		@apply gap-2;
+	}
+
 	/* MARK: Separator */
 	.spartan-separator {
 		@apply bg-border shrink-0;
@@ -1122,7 +1155,7 @@
 	}
 
 	.spartan-sidebar-menu-button-variant-outline {
-		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)];
 	}
 
 	.spartan-sidebar-menu-button-size-default {

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

@@ -74,6 +74,39 @@
 		@apply bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;
 	}
 
+	/* 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100;
+	}
+
+	.spartan-autocomplete-label {
+		@apply text-muted-foreground px-2 py-1.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 rounded-md py-1 ps-1.5 pe-8 text-sm;
+	}
+
+	.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 p-1 data-empty:p-0;
+	}
+
+	.spartan-autocomplete-separator {
+		@apply bg-border -mx-1 my-1 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;
@@ -294,11 +327,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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *: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-right-2 data-[side=inline-end]:slide-in-from-left-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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 **:data-[slot=input-group]:bg-input/30 **:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-8 **:data-[slot=input-group]:shadow-none;
 	}
 
 	.spartan-combobox-label {
@@ -306,23 +335,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 rounded-md py-1 ps-1.5 pe-8 text-sm [&_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 rounded-md py-1 ps-1.5 pe-8 text-sm;
 	}
 
 	.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 overflow-y-auto p-1 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 overflow-y-auto p-1 data-empty:p-0;
 	}
 
 	.spartan-combobox-separator {
@@ -330,15 +355,15 @@
 	}
 
 	.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 {
-		@apply dark:bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-data-[slot=combobox-chip]:px-1 data-[matches-spartan-invalid=true]:ring-3;
+		@apply dark:bg-input/30 border-input focus-within:border-ring focus-within: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 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-data-[slot=combobox-chip]:px-1 data-[matches-spartan-invalid=true]:ring-3;
 	}
 
 	.spartan-combobox-chip {
@@ -346,7 +371,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: Command */
@@ -961,23 +998,15 @@
 
 	/* MARK: Select */
 	.spartan-select-trigger {
-		@apply 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 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-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 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 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-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100;
-	}
-
-	.spartan-select-content-logical {
-		@apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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/10 max-h-72 min-w-36 flex-col rounded-lg shadow-md ring-1 duration-100;
 	}
 
 	.spartan-select-label {
@@ -985,21 +1014,17 @@
 	}
 
 	.spartan-select-item {
-		@apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm [&_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-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm *:[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 p-1;
 	}
 
-	.spartan-select-item-text {
-		@apply flex flex-1 gap-2;
-	}
-
 	.spartan-select-separator {
 		@apply bg-border -mx-1 my-1 h-px;
 	}
@@ -1012,6 +1037,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: Separator */
 	.spartan-separator {
 		@apply bg-border shrink-0;
@@ -1120,7 +1153,7 @@
 	}
 
 	.spartan-sidebar-menu-button-variant-outline {
-		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+		@apply bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)];
 	}
 
 	.spartan-sidebar-menu-button-size-default {