feat(fe): Add form field navigation - Enter key moves to next field

- Create useFormFieldNavigation composable for Tab-like Enter behavior
- KsTextField: Enter -> next field
- KsTextArea: Ctrl+Enter for newline, Enter -> next field
- KsSelect: Enter -> next field after selection
- Implements standard form navigation pattern across input components

frontend/src/shared/ui/components/KsSelect.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useFieldLayout } from '../contracts/layoutContext'
+import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
 
 export interface SelectOption {
   label: string
@@ -22,6 +24,7 @@ export interface KsSelectProps {
   searchable?: boolean
   inputId?: string
   size?: 'sm' | 'md' | 'lg'
+  inline?: boolean
 }
 
 const props = withDefaults(defineProps<KsSelectProps>(), {
@@ -45,6 +48,8 @@ const isFocused = ref(false)
 const searchInput = ref('')
 const highlightedIndex = ref(-1)
 const id = computed(() => props.inputId || `select-${Math.random().toString(36).substr(2, 9)}`)
+const { isInline } = useFieldLayout(props.inline)
+const { inputRef, moveToNextField } = useFormFieldNavigation()
 
 const filteredOptions = computed(() => {
   if (!props.searchable || !searchInput.value) return props.options
@@ -58,6 +63,7 @@ const containerClass = computed(() => [
   'ks-select',
   `ks-select--${props.size}`,
   {
+    'ks-select--inline': isInline.value,
     'ks-select--open': isOpen.value,
     'ks-select--focused': isFocused.value,
     'ks-select--filled': props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== '',
@@ -67,6 +73,7 @@ const containerClass = computed(() => [
   },
 ])
 
+
 const handleClick = () => {
   if (props.disabled) return
   isOpen.value = !isOpen.value
@@ -111,6 +118,11 @@ const handleKeydown = (event: KeyboardEvent) => {
       event.preventDefault()
       if (isOpen.value && highlightedIndex.value >= 0) {
         handleSelect(filteredOptions.value[highlightedIndex.value])
+        // After selection, move to next field
+        setTimeout(() => moveToNextField(), 0)
+      } else if (!isOpen.value) {
+        // Dropdown closed, move to next field
+        moveToNextField()
       }
       break
     case 'Escape':
@@ -145,6 +157,7 @@ const handleBlur = (event: FocusEvent) => {
     <!-- Select button -->
     <div class="ks-select__container">
       <button
+        ref="inputRef"
         :id="id"
         type="button"
         class="ks-select__button"
@@ -154,6 +167,7 @@ const handleBlur = (event: FocusEvent) => {
         @click="handleClick"
         @focus="handleFocus"
         @blur="handleBlur"
+        @keydown="handleKeydown"
       >
         <!-- Selected value or placeholder -->
         <span class="ks-select__value">
@@ -232,6 +246,32 @@ const handleBlur = (event: FocusEvent) => {
   gap: var(--spacing-2);
 }
 
+.ks-select--inline {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ks-space-2, 6px);
+}
+
+.ks-select--inline .ks-select__label {
+  width: var(--ks-field-label-width, 72px);
+  min-width: var(--ks-field-label-width, 72px);
+  max-width: var(--ks-field-label-width, 72px);
+  text-align: left;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-bottom: 0;
+}
+
+.ks-select--inline .ks-select__container {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+
+
+
 .ks-select--sm {
   --input-height: 32px;
   --font-size: var(--font-size-sm);