ketekny-ui-kit 1.0.16 → 1.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -40,13 +40,14 @@
   "dependencies": {
     "@primeuix/themes": "^1.1.1",
     "@vuepic/vue-datepicker": "^11.0.2",
-    "json-editor-vue": "^0.18.1",
     "he-tree-vue": "^3.1.2",
+    "json-editor-vue": "^0.18.1",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.4",
     "quill": "^2.0.3",
+    "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
     "vue-router": "^4.6.4",
     "vue3-easy-data-table": "^1.5.47"

package/src/ui/kDialog.vue

@@ -2,24 +2,32 @@
   <div
     v-if="visible"
     :style="{ zIndex: zIndex }"
-    class="fixed inset-0 flex items-center justify-center overflow-hidden bg-black bg-opacity-50 backdrop-blur-sm"
+    class="fixed inset-0 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+    @click.self="onBackdropClick"
   >
     <transition name="dialog">
       <div
-        class="relative bg-white shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] w-full m-4 sm:min-w-[600px] sm:w-auto"
+        ref="dialogPanel"
+        class="relative bg-white shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] m-4"
         :class="dialogClasses"
+        :role="'dialog'"
+        :aria-modal="'true'"
+        :aria-labelledby="titleId"
+        tabindex="-1"
         v-show="visible"
       >
         <!-- Header -->
-        <div class="flex flex-row items-center p-4 text-white bg-primary shrink-0">
-          <div class="text-xl font-semibold !text-white">{{ title }}</div>
+        <div class="flex flex-row items-center p-4 text-white bg-sky-800 shrink-0">
+          <div :id="titleId" class="text-xl font-semibold !text-white">{{ title }}</div>
           <div class="flex-1" />
-          <div
-            class="p-1 text-black transition duration-100 ease-in-out rounded-full cursor-pointer text-secondary hover:bg-white hover:text-primary"
+          <button
+            type="button"
+            class="p-1 text-black transition duration-100 ease-in-out rounded-full cursor-pointer text-secondary hover:bg-white hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            aria-label="Close dialog"
             @click="close"
           >
-            <x />
-          </div>
+            <X />
+          </button>
         </div>
 
         <!-- Fixed content (optional) -->
@@ -46,6 +54,7 @@ import { X } from 'lucide-vue-next'
 
 // 🔥 Global z-index tracker
 let dialogZIndexCounter = 1000
+let bodyScrollLockCounter = 0
 
 export default {
   name: 'kDialog',
@@ -54,6 +63,14 @@ export default {
     visible: Boolean,
     title: String,
     maximized: Boolean,
+    closeOnBackdrop: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      default: true,
+    },
     width: {
       type: String,
       default: '',
@@ -62,39 +79,77 @@ export default {
   data() {
     return {
       zIndex: 1000, // Default fallback
+      titleId: `dialog-title-${Math.random().toString(36).slice(2, 10)}`,
+      previousActiveElement: null,
     }
   },
   watch: {
-    visible(val) {
-      if (val) {
-        dialogZIndexCounter += 1
-        this.zIndex = dialogZIndexCounter
-      }
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          dialogZIndexCounter += 1
+          this.zIndex = dialogZIndexCounter
+          this.previousActiveElement = document.activeElement
+          this.lockBodyScroll()
+          document.addEventListener('keydown', this.handleKeydown)
+          this.$nextTick(() => {
+            this.$refs.dialogPanel?.focus()
+          })
+        } else {
+          this.unlockBodyScroll()
+          document.removeEventListener('keydown', this.handleKeydown)
+          this.$nextTick(() => {
+            this.previousActiveElement?.focus?.()
+            this.previousActiveElement = null
+          })
+        }
+      },
     },
   },
-  //   mounted() {
-  //     // ✅ Assign a new z-index when component is created
-  //     dialogZIndexCounter += 1
-  //     this.zIndex = dialogZIndexCounter
-  //   },
   computed: {
     computedWidth() {
-      return this.width ? this.width : 'sm:w-[600px]'
+      return 'w-[600px] max-w-[calc(100vw-2rem)]'
     },
     dialogClasses() {
       if (this.width) {
-        return this.computedWidth
+        return this.width
       } else if (this.maximized) {
-        return 'max-w-none h-[90vh]'
+        return 'w-[calc(100vw-2rem)] max-w-none h-[90vh]'
       } else {
         return this.computedWidth + ' max-h-[90vh]'
       }
     },
   },
   methods: {
+    onBackdropClick() {
+      if (!this.closeOnBackdrop) return
+      this.close()
+    },
+    handleKeydown(event) {
+      if (!this.visible || !this.closeOnEsc) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        this.close()
+      }
+    },
+    lockBodyScroll() {
+      bodyScrollLockCounter += 1
+      if (bodyScrollLockCounter > 1) return
+      document.body.style.overflow = 'hidden'
+    },
+    unlockBodyScroll() {
+      bodyScrollLockCounter = Math.max(0, bodyScrollLockCounter - 1)
+      if (bodyScrollLockCounter > 0) return
+      document.body.style.overflow = ''
+    },
     close() {
       this.$emit('update:visible', false)
     },
   },
+  beforeUnmount() {
+    this.unlockBodyScroll()
+    document.removeEventListener('keydown', this.handleKeydown)
+  },
 }
 </script>

package/src/ui/kInput.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="w-full text-primary/90">
-    <label v-if="label != null" :for="inputId" class="inputLabel" :class="hasError ? theme.labelError : theme.label">
+    <label
+      v-if="label != null"
+      :for="inputId"
+      class="inputLabel"
+      :class="hasError ? theme.labelError : disabled ? theme.labelDisabled : theme.label">
       {{ label }}
     </label>
     <div class="relative">
@@ -22,11 +26,12 @@
         :aria-invalid="hasError ? 'true' : 'false'"
         :aria-describedby="describedById"
       />
-      <component v-if="iconComponent" :is="iconComponent" :class="theme.trailingIcon" />
+      <component v-if="iconComponent" :is="iconComponent" :class="[theme.trailingIcon, disabled ? theme.trailingIconDisabled : '']" />
       <div v-if="isPassword" :class="theme.passwordToggle">
         <button
           type="button"
-          :class="theme.passwordToggleButton"
+          :disabled="disabled"
+          :class="[theme.passwordToggleButton, disabled ? theme.passwordToggleButtonDisabled : '']"
           :aria-label="showPassword ? 'Hide password' : 'Show password'"
           :aria-pressed="showPassword ? 'true' : 'false'"
           @click="showPassword = !showPassword">

package/src/ui/kSelect.vue

@@ -1,95 +1,101 @@
 <template>
   <div class="relative w-full">
-    <!-- Label -->
     <label v-if="label != null" :for="computedId" class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
       {{ label }}
     </label>
 
-    <!-- Input Trigger -->
-    <div
-      ref="trigger"
-      @click="toggleDropdown"
-      @keydown="handleTriggerKeydown"
-      class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box"
-       :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
-      :aria-haspopup="'listbox'"
-      :aria-expanded="isOpen.toString()"
-      :aria-disabled="disabled.toString()"
-      :aria-controls="dropdownId"
-      :role="'combobox'"
-      :tabindex="disabled ? -1 : 0"
-    >
-      <span class="block pr-10 truncate">{{ selectedLabel || placeholder }}</span>
+    <SelectRoot v-model="internalValue" v-model:open="open" :disabled="disabled">
+      <SelectTrigger as-child>
+        <div
+          :id="computedId"
+          class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box"
+          :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
+          :aria-label="label || 'Select option'"
+        >
+          <SelectValue :placeholder="placeholder" class="block pr-10 truncate" />
 
-      <!-- Clear button -->
-      <button
-        v-if="clearable && isSelectionSet && !disabled"
-        type="button"
-        class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500"
-        @click.stop="clearSelection"
-        aria-label="Clear selection">
-        <X class="w-5 h-5 mr-2" />
-      </button>
-
-      <!-- Dropdown icon -->
-      <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
-        <ChevronDown class="w-5 h-5" v-if="!isOpen" />
-        <ChevronUp class="w-5 h-5" v-else />
-      </span>
-    </div>
+          <button
+            v-if="clearable && isSelectionSet && !disabled"
+            type="button"
+            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500"
+            aria-label="Clear selection"
+            @pointerdown.stop.prevent="clearSelection"
+            @click.stop.prevent="clearSelection"
+          >
+            <X class="w-5 h-5 mr-2" />
+          </button>
 
-    <!-- Dropdown Menu -->
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        ref="dropdown"
-        :id="dropdownId"
-        class="absolute z-[9999] mt-1 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
-        :class="dropdownHeight"
-        :style="dropdownPositionStyle"
-        role="listbox"
-        :aria-label="label || 'Select options'"
-      >
-        <!-- Search -->
-        <div class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
-          <input
-            ref="searchInput"
-            type="text"
-            v-model="searchQuery"
-            placeholder="Αναζήτηση..."
-            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none"
-            role="searchbox"
-            aria-label="Search options"
-            @keydown.esc.stop.prevent="closeDropdown"
-          />
+          <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
+            <ChevronDown class="w-5 h-5" v-if="!open" />
+            <ChevronUp class="w-5 h-5" v-else />
+          </span>
         </div>
+      </SelectTrigger>
 
-        <!-- Filtered Options -->
-        <div class="flex flex-col gap-[2px] p-2">
-          <div
-            v-for="option in filteredOptions"
-            :id="`${dropdownId}-opt-${option[optionValue]}`"
-            :key="option[optionValue]"
-            @click="selectOption(option)"
-            class="px-3 py-2 rounded cursor-pointer"
-            :class="option[optionValue] === selectedValue ? 'bg-primary text-white' : 'hover:bg-blue-100'"
-            role="option"
-            :aria-selected="(option[optionValue] === selectedValue).toString()"
-          >
-            {{ option[optionLabel] }}
+      <SelectPortal>
+        <SelectContent
+          :id="dropdownId"
+          position="popper"
+          :side-offset="6"
+          class="z-[9999] overflow-hidden bg-white border border-gray-200 rounded-lg shadow-[0_20px_45px_-15px_rgba(15,23,42,0.35),0_8px_18px_-10px_rgba(15,23,42,0.25)] ring-1 ring-slate-900/10"
+        >
+          <div v-if="searchable" data-select-search-header class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
+            <input
+              ref="searchInput"
+              type="text"
+              v-model="searchQuery"
+              placeholder="Αναζήτηση..."
+              class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none"
+              role="searchbox"
+              aria-label="Search options"
+              @keydown.stop="handleSearchKeydown"
+            />
           </div>
-        </div>
 
-        <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν αποτελέσματα</div>
-      </div>
-    </Teleport>
+          <div class="relative">
+            <SelectViewport
+              class="p-2 overflow-y-auto"
+              :class="canScrollAny ? 'pt-8 pb-8' : ''"
+              :style="{ maxHeight: viewportMaxHeight }"
+              @scroll="updateScrollState"
+            >
+              <div class="flex flex-col gap-0">
+                <SelectItem
+                  v-for="(option, index) in filteredOptions"
+                  :key="`${option[optionValue]}-${index}`"
+                  :value="option[optionValue]"
+                  class="px-3 py-2 rounded cursor-pointer outline-none text-slate-700 hover:bg-primary/20 hover:text-primary data-[highlighted]:bg-primary data-[highlighted]:text-white data-[state=checked]:text-primary data-[state=checked]:data-[highlighted]:text-white"
+                >
+                  <div class="flex items-center justify-between gap-2">
+                    <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
+                    <span class="inline-flex items-center justify-center w-4 h-4 shrink-0">
+                      <SelectItemIndicator>
+                        <Check class="w-4 h-4" />
+                      </SelectItemIndicator>
+                    </span>
+                  </div>
+                </SelectItem>
+              </div>
+
+              <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν επιλογές</div>
+            </SelectViewport>
+
+            <SelectScrollUpButton class="absolute top-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
+              <ChevronUp class="w-4 h-4" />
+            </SelectScrollUpButton>
+
+            <SelectScrollDownButton class="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
+              <ChevronDown class="w-4 h-4" />
+            </SelectScrollDownButton>
+          </div>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
 
-    <!-- Error -->
     <div class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <!-- Info -->
     <div class="mt-1 text-gray-500" v-if="info">
       {{ info }}
     </div>
@@ -97,163 +103,168 @@
 </template>
 
 <script setup>
-import { X, ChevronDown, ChevronUp } from "lucide-vue-next";
-</script>
+import { computed, nextTick, ref, watch } from "vue";
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from "reka-ui";
+import { X, ChevronDown, ChevronUp, Check } from "lucide-vue-next";
 
-<script>
-export default {
-  name: "kSelect",
-  props: {
-    options: { type: Array, required: true },
-    modelValue: [String, Number],
-    optionValue: { type: String, default: "value" },
-    optionLabel: { type: String, default: "label" },
-    label: String,
-    info: String,
-    error: [String, Boolean],
-    disabled: { type: Boolean, default: false },
-    placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
-    id: { type: String, default: null },
-    dropdownHeight: { type: String, default: "max-h-80" },
-    clearable: { type: Boolean, default: true },
-  },
-  data() {
-    return {
-      isOpen: false,
-      searchQuery: "",
-      dropdownPositionStyle: {},
-      generatedId: `select-${Math.random().toString(36).substr(2, 9)}`,
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300",
-      disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed",
-    };
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: [String, Number],
+  optionValue: { type: String, default: "value" },
+  optionLabel: { type: String, default: "label" },
+  label: String,
+  info: String,
+  error: [String, Boolean],
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
+  id: { type: String, default: null },
+  clearable: { type: Boolean, default: true },
+  searchable: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+const searchQuery = ref("");
+const searchInput = ref(null);
+const canScrollAny = ref(false);
+const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
+const viewportMaxHeight = "400px";
+const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400";
+const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
+const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
+
+const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
+const dropdownId = computed(() => `${computedId.value}-listbox`);
+
+const hasError = computed(() => props.error != null && props.error !== false);
+const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+
+const internalValue = computed({
+  get() {
+    return props.modelValue === null ? undefined : props.modelValue;
   },
-  computed: {
-    computedId() {
-      return this.id != null && this.id !== "" ? this.id : this.generatedId;
-    },
-    dropdownId() {
-      return `${this.computedId}-listbox`;
-    },
-    selectedValue() {
-      return this.modelValue;
-    },
-    isSelectionSet() {
-      return this.selectedValue !== null && this.selectedValue !== undefined && this.selectedValue !== "";
-    },
-    selectedLabel() {
-      const match = this.options.find((o) => o[this.optionValue] === this.modelValue);
-      return match ? match[this.optionLabel] : "";
-    },
-    filteredOptions() {
-      const q = this.searchQuery.trim().toLowerCase();
-      return this.options.filter((o) => String(o[this.optionLabel] ?? "").toLowerCase().includes(q));
-    },
-    hasError() {
-      return this.error != null && this.error !== false;
-    },
+  set(val) {
+    emit("update:modelValue", val ?? null);
   },
-  methods: {
-    toggleDropdown() {
-      if (this.disabled) return;
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.$nextTick(() => {
-          this.getDropdownPosition();
-          this.$refs.searchInput?.focus();
-        });
-      } else {
-        this.searchQuery = "";
-      }
-    },
-    closeDropdown() {
-      this.isOpen = false;
-      this.searchQuery = "";
-    },
-    selectOption(option) {
-      this.$emit("update:modelValue", option[this.optionValue]);
-      this.closeDropdown();
-    },
-    clearSelection() {
-      this.$emit("update:modelValue", null);
-      this.closeDropdown();
-    },
-    handleTriggerKeydown(event) {
-      if (this.disabled) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        this.toggleDropdown();
-      } else if (event.key === "ArrowDown" && !this.isOpen) {
-        event.preventDefault();
-        this.toggleDropdown();
-      } else if (event.key === "Escape" && this.isOpen) {
-        event.preventDefault();
-        this.closeDropdown();
-      }
-    },
-    closeOnClickOutside(e) {
-      const clickedOutside = !this.$el.contains(e.target) && !(this.$refs.dropdown && this.$refs.dropdown.contains(e.target));
+});
 
-      if (clickedOutside) {
-        this.closeDropdown();
-      }
-    },
-    handleViewportChange() {
-      if (!this.isOpen) return;
-      this.getDropdownPosition();
-    },
+const filteredOptions = computed(() => {
+  if (!props.searchable) return props.options;
+  const q = searchQuery.value.trim().toLowerCase();
+  if (!q) return props.options;
+  return props.options.filter((o) => String(o?.[props.optionLabel] ?? "").toLowerCase().includes(q));
+});
 
-    getDropdownPosition() {
-      const trigger = this.$refs.trigger;
-      if (!trigger) return;
-      const dropdown = this.$refs.dropdown;
+watch(open, (val) => {
+  if (val) {
+    nextTick(() => {
+      if (props.searchable) searchInput.value?.focus();
+      updateScrollState();
+    });
+    return;
+  }
+  searchQuery.value = "";
+  canScrollAny.value = false;
+});
 
-      const rect = trigger.getBoundingClientRect();
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      const pad = 8;
+watch(filteredOptions, () => {
+  if (!open.value) return;
+  nextTick(() => updateScrollState());
+});
 
-      const spaceBelow = viewportHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      const contentHeight = dropdown ? dropdown.scrollHeight : 320;
-      const maxViewportHeight = Math.max(120, viewportHeight - pad * 2);
-      const desiredHeight = Math.min(contentHeight, maxViewportHeight);
+function clearSelection() {
+  emit("update:modelValue", null);
+  open.value = false;
+}
 
-      const shouldOpenAbove = spaceBelow < Math.min(240, desiredHeight) && spaceAbove > spaceBelow;
-      const availableHeight = Math.max(120, (shouldOpenAbove ? spaceAbove : spaceBelow) - pad);
-      const finalHeight = Math.min(desiredHeight, availableHeight);
+function focusFirstOrLastOption(last = false) {
+  const container = document.getElementById(dropdownId.value);
+  if (!container) return;
+  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+  if (!nodes.length) return;
+  const target = last ? nodes[nodes.length - 1] : nodes[0];
+  target.focus();
+}
 
-      const rawTop = shouldOpenAbove ? rect.top + scrollTop - finalHeight : rect.bottom + scrollTop;
-      const minTop = scrollTop + pad;
-      const maxTop = scrollTop + viewportHeight - finalHeight - pad;
-      const top = Math.min(Math.max(rawTop, minTop), maxTop);
+function moveOptionFocus(step) {
+  const container = document.getElementById(dropdownId.value);
+  if (!container) return;
+  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+  if (!nodes.length) return;
+  const activeIndex = nodes.findIndex((node) => node === document.activeElement);
+  const baseIndex = activeIndex >= 0 ? activeIndex : step > 0 ? -1 : 0;
+  const nextIndex = Math.min(Math.max(baseIndex + step, 0), nodes.length - 1);
+  nodes[nextIndex].focus();
+}
 
-      const rawLeft = rect.left + scrollLeft;
-      const minLeft = scrollLeft + pad;
-      const maxLeft = scrollLeft + viewportWidth - rect.width - pad;
-      const left = Math.min(Math.max(rawLeft, minLeft), Math.max(minLeft, maxLeft));
+function handleSearchKeydown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    open.value = false;
+    return;
+  }
 
-      this.dropdownPositionStyle = {
-        position: "absolute",
-        top: `${top}px`,
-        left: `${left}px`,
-        minWidth: `${rect.width}px`,
-        maxWidth: `500px`,
-        maxHeight: `${finalHeight}px`,
-      };
-    },
-  },
-  mounted() {
-    document.addEventListener("click", this.closeOnClickOutside);
-    window.addEventListener("resize", this.handleViewportChange);
-    window.addEventListener("scroll", this.handleViewportChange, true);
-  },
-  beforeUnmount() {
-    document.removeEventListener("click", this.closeOnClickOutside);
-    window.removeEventListener("resize", this.handleViewportChange);
-    window.removeEventListener("scroll", this.handleViewportChange, true);
-  },
-};
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    event.stopPropagation();
+    moveOptionFocus(1);
+    return;
+  }
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    event.stopPropagation();
+    moveOptionFocus(-1);
+    return;
+  }
+
+  if (event.key === "Home") {
+    event.preventDefault();
+    event.stopPropagation();
+    focusFirstOrLastOption(false);
+    return;
+  }
+
+  if (event.key === "End") {
+    event.preventDefault();
+    event.stopPropagation();
+    focusFirstOrLastOption(true);
+    return;
+  }
+
+  if (event.key === "Enter") {
+    const container = document.getElementById(dropdownId.value);
+    if (!container) return;
+    const active = document.activeElement;
+    if (active && container.contains(active) && active.getAttribute("role") === "option") {
+      event.preventDefault();
+      event.stopPropagation();
+      active.click();
+    }
+  }
+}
+
+function updateScrollState() {
+  const container = document.getElementById(dropdownId.value);
+  const viewport = container?.querySelector("[data-reka-select-viewport]");
+  if (!viewport) {
+    canScrollAny.value = false;
+    return;
+  }
+  canScrollAny.value = viewport.scrollHeight > viewport.clientHeight + 1;
+}
 </script>

package/src/ui/kToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="labelStyle === 'inline' ? 'flex items-center' : ''">
     <!-- Block-style label -->
-    <div v-if="showLabel && labelStyle !== 'inline'" class="block mb-1 text-sm font-bold text-primary/90" for="toggle">
+    <div v-if="showLabel && labelStyle !== 'inline'" :class="['block mb-1 text-sm font-bold', disabled ? 'text-slate-500' : 'text-primary/90']" for="toggle">
       {{ label }}
     </div>
 
@@ -13,15 +13,27 @@
       :aria-disabled="disabled.toString()"
       :disabled="disabled"
       :class="[
-        'w-16 h-8 flex items-center rounded-full p-1 transition duration-300',
-        modelValue ? 'bg-primary' : 'bg-gray-400',
-        disabled ? 'opacity-50 cursor-not-allowed' : '',
+        'w-16 h-8 flex items-center rounded-full p-1 transition duration-300 border',
+        disabled
+          ? 'bg-slate-200 border-slate-300 cursor-not-allowed'
+          : modelValue
+            ? 'bg-primary border-primary shadow-sm shadow-primary/30'
+            : 'bg-gray-400 border-gray-400',
       ]">
-      <div :class="['w-6 h-6 bg-white rounded-full shadow-md transform transition duration-300', modelValue ? 'translate-x-8' : 'translate-x-0']"></div>
+      <div
+        :class="[
+          'w-6 h-6 rounded-full shadow-md transform transition duration-300',
+          disabled ? 'bg-slate-100' : modelValue ? 'bg-white ring-2 ring-primary/20' : 'bg-white',
+          modelValue ? 'translate-x-8' : 'translate-x-0',
+        ]"></div>
     </button>
 
     <!-- Inline-style label -->
-    <div v-if="showLabel && labelStyle === 'inline'" class="ml-2 text-sm font-bold cursor-pointer text-primary/90" :for="computedId" @click="toggle">
+    <div
+      v-if="showLabel && labelStyle === 'inline'"
+      :class="['ml-2 text-sm font-bold', disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90 cursor-pointer']"
+      :for="computedId"
+      @click="toggle">
       {{ label }}
     </div>
   </div>

package/src/ui/themes/kInput.theme.js

@@ -1,16 +1,19 @@
 export const K_INPUT_THEME = {
   label: "text-primary/90",
+  labelDisabled: "text-slate-500",
   labelError: "text-rose-800",
   baseInput:
     "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-primary/25 focus:border-primary",
   withRightAdornment: "pr-10",
   withPasswordToggle: "pr-14",
-  disabled: "bg-slate-100 text-slate-500 cursor-not-allowed border-slate-300",
+  disabled: "!bg-slate-50 !text-slate-400 !border-slate-200 !shadow-none cursor-not-allowed placeholder-slate-400",
   errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20",
   infoText: "text-sm text-slate-600",
   errorText: "text-sm text-rose-700",
   trailingIcon: "absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2",
+  trailingIconDisabled: "text-slate-400",
   passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-700",
   passwordToggleButton:
     "text-xs font-medium select-none rounded px-1 py-0.5 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+  passwordToggleButtonDisabled: "text-slate-400 cursor-not-allowed hover:bg-transparent",
 };

package/tailwind-preset.js

@@ -8,7 +8,7 @@ const config = {
                 header: '#256D96',
                 background: '#FEFCF6',
                 accent: '#8C1F1F',
-                primary: '#1E5F7C',
+                primary: '#0369A1',
                 secondary: '#f5f7fa',
                 success: '#228B22',
                 danger: '#A32626',
@@ -50,4 +50,4 @@ const config = {
     plugins: [],
 }
 
-export default config
+export default config

package/tailwind.config.js

@@ -22,7 +22,7 @@ export default {
         header: "#256D96",
         background: "#FEFCF6",
         accent: "#8C1F1F",
-        primary: "#1E5F7C",
+        primary: "#0369A1",
         secondary: "#f5f7fa",
         success: "#228B22",
         danger: "#A32626",