ketekny-ui-kit 1.0.105 → 1.0.107

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.105",
+  "version": "1.0.107",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/style/style.css

@@ -20,4 +20,13 @@ body {
   html {
     font-size: 14px;
   }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }

package/src/ui/componentDescription.vue

@@ -3,10 +3,13 @@
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
       <h2 class="text-[15px] font-semibold cp-text">{{ componentName }} Description</h2>
 
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1" role="tablist">
         <button
           v-for="tab in tabs"
           :key="tab.id"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === tab.id"
           @click="activeTab = tab.id"
           :class="['px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
           {{ tab.label }}
@@ -15,13 +18,14 @@
     </div>
 
     <div class="p-4">
-      <div v-show="activeTab === 'props'">
+      <div v-show="activeTab === 'props'" role="tabpanel">
         <div v-if="props.length > 0" class="overflow-x-auto">
           <table class="w-full text-[13px]">
             <thead>
               <tr class="border-b cp-border">
                 <th class="px-4 py-3 font-semibold text-left cp-text">Name</th>
                 <th class="px-4 py-3 font-semibold text-left cp-text">Type</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Values</th>
                 <th class="px-4 py-3 font-semibold text-left cp-text">Default</th>
                 <th class="px-4 py-3 font-semibold text-left cp-text">Description</th>
               </tr>
@@ -33,6 +37,12 @@
                   <code class="text-[13px] font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ prop.name }}</code>
                 </td>
                 <td class="px-4 py-3"><span class="font-mono text-[13px] text-blue-600">{{ prop.type }}</span></td>
+                <td class="px-4 py-3">
+                  <div v-if="prop.values && prop.values.length" class="flex flex-wrap gap-1">
+                    <code v-for="v in prop.values" :key="v" class="text-[12px] font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ v }}</code>
+                  </div>
+                  <span v-else class="cp-text-muted">-</span>
+                </td>
                 <td class="px-4 py-3">
                   <code v-if="prop.default !== undefined" class="font-mono text-[13px] text-slate-700">{{ prop.default }}</code>
                   <span v-else class="cp-text-muted">-</span>
@@ -48,7 +58,7 @@
         </div>
       </div>
 
-      <div v-show="activeTab === 'slots'">
+      <div v-show="activeTab === 'slots'" role="tabpanel">
         <div v-if="slots.length > 0" class="overflow-x-auto">
           <table class="w-full text-[13px]">
             <thead>

package/src/ui/componentShowcase.vue

@@ -3,10 +3,13 @@
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
       <h2 class="text-[15px] font-semibold cp-text">{{ componentName }} Preview</h2>
 
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1" role="tablist">
         <button
           v-for="tab in tabs"
           :key="tab.id"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === tab.id"
           @click="activeTab = tab.id"
           :class="['px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
           {{ tab.label }}
@@ -15,13 +18,14 @@
     </div>
 
     <div class="p-4">
-      <div v-show="activeTab === 'preview'" class="min-h-[120px] rounded-lg p-6 border cp-muted-30 cp-border-50">
+      <div v-show="activeTab === 'preview'" role="tabpanel" class="min-h-[120px] rounded-lg p-6 border cp-muted-30 cp-border-50">
         <div class="flex justify-end mb-4">
           <div class="inline-flex p-1 rounded-md cp-muted-50">
             <button
               v-for="vp in previewViewports"
               :key="vp.id"
               @click="activeViewport = vp.id"
+              :aria-pressed="activeViewport === vp.id"
               :class="['px-3 py-1.5 text-[13px] font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
               {{ vp.label }}
             </button>
@@ -35,9 +39,9 @@
         </div>
       </div>
 
-      <div v-show="activeTab === 'code'" class="relative">
+      <div v-show="activeTab === 'code'" role="tabpanel" class="relative">
         <div class="absolute z-10 top-3 right-3">
-          <button @click="copyCode" class="flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors cp-chip cp-chip-hover cp-chip-text">
+          <button @click="copyCode" type="button" aria-label="Copy code" class="flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors cp-chip cp-chip-hover cp-chip-text">
             <svg
               v-if="!copied"
               xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +72,7 @@
               <polyline points="20 6 9 17 4 12" />
             </svg>
 
-            {{ copied ? "Copied!" : "Copy" }}
+            <span aria-live="polite">{{ copied ? "Copied!" : "Copy" }}</span>
           </button>
         </div>
 

package/src/ui/kArrayList.vue

@@ -13,7 +13,7 @@
       :disabled="disabled"
       :class="[
         'block w-full p-3 transition border border-gray-300 shadow-sm outline-none rounded-xl dark:border-slate-600 dark:text-slate-100 dark:placeholder-slate-500',
-        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500' : 'bg-white focus:border-primary focus:ring-2 focus:ring-primary/20 dark:bg-slate-800',
+        disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500' : 'bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 dark:bg-slate-800',
       ]"
       @focus="isFocused = true"
       @blur="isFocused = false"

package/src/ui/kCheckbox.vue

@@ -1,6 +1,8 @@
 <template>
   <button
     type="button"
+    role="checkbox"
+    :aria-checked="isActive"
     class="admin-checkbox flex w-full items-center gap-2.5 rounded-2xl px-3 py-2 transition"
     :class="[themeTextClass, isActive ? activeTextClass : inactiveTextClass, combinedContainerClass]"
     :title="hoverCaption"
@@ -114,7 +116,7 @@ export default {
       return this.theme === 'dark' ? 'text-slate-300' : 'text-slate-500'
     },
     themeActiveClass() {
-      return this.theme === 'dark' ? 'bg-cyan-400 text-cyan-950' : 'bg-sky-600 text-white'
+      return this.theme === 'dark' ? 'bg-primary/90 text-white' : 'bg-primary text-white'
     },
     themeInactiveClass() {
       return this.theme === 'dark' ? 'bg-white/10 text-transparent' : 'bg-slate-200 text-transparent'

package/src/ui/kDialog.vue

@@ -8,7 +8,7 @@
     <transition name="dialog">
       <div
         ref="dialogPanel"
-        class="relative bg-white dark:bg-zinc-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[90vh] m-2 sm:m-4"
+        class="relative bg-white dark:bg-slate-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[90vh] m-2 sm:m-4"
         :class="dialogClasses"
         :role="'dialog'"
         :aria-modal="'true'"
@@ -22,7 +22,7 @@
           <div class="flex-1" />
           <button
             type="button"
-            class="p-1.5 rounded-md text-zinc-400 hover:text-primary dark:text-zinc-500 dark:hover:text-primary hover:bg-primary/10 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+            class="p-1.5 rounded-md text-slate-400 hover:text-primary dark:text-slate-500 dark:hover:text-primary hover:bg-primary/10 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
             aria-label="Close dialog"
             @click="close"
           >
@@ -43,7 +43,7 @@
         <!-- Footer -->
         <div
           v-if="$slots.footer"
-          class="flex flex-col-reverse gap-2 p-3 border-t shrink-0 border-zinc-200 dark:border-zinc-800 sm:flex-row sm:justify-end sm:p-4"
+          class="flex flex-col-reverse gap-2 p-3 border-t shrink-0 border-slate-200 dark:border-slate-800 sm:flex-row sm:justify-end sm:p-4"
         >
           <slot name="footer"></slot>
         </div>
@@ -130,10 +130,41 @@ export default {
       this.close()
     },
     handleKeydown(event) {
-      if (!this.visible || !this.closeOnEsc) return
+      if (!this.visible) return
       if (event.key === 'Escape') {
+        if (!this.closeOnEsc) return
         event.preventDefault()
         this.close()
+        return
+      }
+      if (event.key === 'Tab') {
+        this.trapFocus(event)
+      }
+    },
+    trapFocus(event) {
+      const panel = this.$refs.dialogPanel
+      if (!panel) return
+      const focusable = panel.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+      if (focusable.length === 0) {
+        event.preventDefault()
+        panel.focus()
+        return
+      }
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      const active = document.activeElement
+      if (event.shiftKey) {
+        if (active === first || active === panel || !panel.contains(active)) {
+          event.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (active === last) {
+          event.preventDefault()
+          first.focus()
+        }
       }
     },
     lockBodyScroll() {

package/src/ui/kEditor.vue

@@ -66,8 +66,8 @@ export default {
   data() {
     return {
       defaultStyle:
-        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 min-h-[150px] focus:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20",
+        "w-full px-3 py-2 border rounded-b-lg transition shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 min-h-[150px] focus-visible:border-primary bg-white placeholder-gray-400 !list-disc !list-inside prose dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
+      errorStyle: "border-red-500 focus-visible:ring focus-visible:ring-red-300 dark:border-rose-500 dark:focus-visible:ring-rose-500/20",
       disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed editor pointer-events-none select-none dark:!bg-slate-900 dark:!text-slate-500",
       isFocused: false,
       pendingModelValue: null,

package/src/ui/kInputDialog.vue

@@ -14,7 +14,7 @@
               :type="inputType"
               v-model="value"
               :placeholder="placeholder"
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500 dark:focus:ring-indigo-400"
+              class="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500 dark:focus-visible:ring-indigo-400"
               :disabled="loading"
               ref="inputEl"
               @keyup.enter="confirm"

package/src/ui/kList.vue

@@ -122,7 +122,7 @@ export default {
     },
     entryClass(stat) {
       return stat.action
-        ? 'cursor-pointer transition hover:border-primary/40 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:hover:bg-slate-700/70'
+        ? 'cursor-pointer transition hover:border-primary/40 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 dark:hover:bg-slate-700/70'
         : ''
     },
     handleAction(stat, index) {

package/src/ui/kOptionGroup.vue

@@ -240,7 +240,7 @@ export default {
         const pieces = ["items-center gap-3 rounded-lg border px-3 py-2.5 transition"];
 
         if (selected) {
-          pieces.push(styles.selBg);
+          pieces.push(styles.selBg, styles.text);
           if (colored) pieces.push(`border-l-2 ${styles.accent}`);
         } else if (colored) {
           pieces.push(styles.text);
@@ -255,11 +255,8 @@ export default {
 
       if (this.isTableVariant) {
         if (this.isSelected(option)) {
-          if (this.isTinted(option)) {
-            const styles = this.intentStyles(option);
-            return `items-center gap-3 border-b border-slate-200 px-3 py-3 last:border-b-0 dark:border-slate-700 ${styles.softBg} ${styles.text}`;
-          }
-          return "items-center gap-3 border-b border-slate-200 bg-primary/10 px-3 py-3 text-primary last:border-b-0 dark:border-slate-700 dark:bg-primary/15 dark:text-slate-100";
+          const styles = this.intentStyles(option);
+          return `items-center gap-3 border-b border-slate-200 px-3 py-3 last:border-b-0 dark:border-slate-700 ${styles.softBg} ${styles.text}`;
         }
         return "items-center gap-3 border-b border-slate-200 bg-white px-3 py-3 text-gray-700 hover:bg-slate-50 last:border-b-0 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800";
       }

package/src/ui/kSearch.vue

@@ -39,7 +39,7 @@ export default {
   data() {
     return {
       inputId: `ksearch-${Math.random().toString(36).slice(2, 10)}`,
-      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 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-gray-700 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
       disabledStyle: "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500",
 
       localValue: this.modelValue,

package/src/ui/kSelect.vue

@@ -48,7 +48,7 @@
                 type="text"
                 v-model="searchQuery"
                 placeholder="Αναζήτηση..."
-                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors placeholder-gray-400 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500"
+                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 transition-colors placeholder-gray-400 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500"
                 role="searchbox"
                 aria-label="Search options"
                 @keydown="handleSearchKeydown"
@@ -137,8 +137,8 @@ const searchQuery = ref("");
 const searchInput = ref(null);
 const viewportRef = ref(null);
 const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
-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 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500";
-const errorStyle = "border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20";
+const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-gray-700 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500";
+const errorStyle = "border-red-500 focus-visible:ring focus-visible:ring-red-300 dark:border-rose-500 dark:focus-visible:ring-rose-500/20";
 const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed dark:!bg-slate-900 dark:!text-slate-500";
 
 function normalizeDropdownHeight(value) {

package/src/ui/kSelectButton.vue

@@ -34,7 +34,7 @@ export default {
   emits: ["update:modelValue"],
   computed: {
     baseClasses() {
-      return "shrink-0 whitespace-nowrap px-3 py-2.5 text-sm font-medium border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset sm:px-4 sm:py-2";
+      return "shrink-0 whitespace-nowrap px-3 py-2.5 text-sm font-medium border-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset sm:px-4 sm:py-2";
     },
     activeClasses() {
       return "bg-primary text-white";

package/src/ui/kTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="tableWrapper" :class="['w-full', { 'k-table-mobile': isMobileLayout }]">
-    <table ref="tableRef" :class="['table-custom', `table-custom--${variant}`]">
+    <table ref="tableRef" role="table" :class="['table-custom', `table-custom--${variant}`]">
       <template v-if="hasNamedSlots">
         <thead ref="theadRef">
           <slot name="head"></slot>
@@ -74,15 +74,22 @@ export default {
       const thead = this.getTheadRef();
       if (!thead) return;
 
-      const headers = Array.from(thead.querySelectorAll("th")).map((th) => th.textContent.trim());
+      const headerCells = Array.from(thead.querySelectorAll("th"));
+      headerCells.forEach((th) => {
+        th.setAttribute("role", "columnheader");
+        th.setAttribute("scope", "col");
+      });
+      const headers = headerCells.map((th) => th.textContent.trim());
 
       const tbody = this.getTbodyRef();
       if (!tbody) return;
       const rows = tbody.querySelectorAll("tr");
 
       rows.forEach((row) => {
+        row.setAttribute("role", "row");
         const cells = row.querySelectorAll("td");
         cells.forEach((cell, index) => {
+          cell.setAttribute("role", "cell");
           cell.setAttribute("data-label", headers[index] || "");
         });
       });
@@ -97,7 +104,7 @@ export default {
 };
 </script>
 
-<style css>
+<style>
 .table-custom {
   @apply table-auto w-full border-collapse;
 }

package/src/ui/kTags.vue

@@ -27,7 +27,7 @@
         :placeholder="placeholder"
         :aria-label="!label ? placeholder || 'Add tag' : null"
         :disabled="disabled"
-        :class="['flex-1 p-1 bg-transparent border-none focus:outline-none dark:text-slate-100 dark:placeholder-slate-500', disabled ? 'text-gray-400 cursor-not-allowed dark:text-slate-500' : '']"
+        :class="['flex-1 p-1 bg-transparent border-none focus-visible:outline-none dark:text-slate-100 dark:placeholder-slate-500', disabled ? 'text-gray-400 cursor-not-allowed dark:text-slate-500' : '']"
       />
     </div>
     <!-- Error message -->

package/src/ui/kTextArea.vue

@@ -74,8 +74,8 @@ export default {
     },
     textareaClass() {
       return [
-        '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 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500',
-        this.hasError ? 'border-red-500 focus:ring focus:ring-red-300 dark:border-rose-500 dark:focus:ring-rose-500/20' : '',
+        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-gray-700 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500',
+        this.hasError ? 'border-red-500 focus-visible:ring focus-visible:ring-red-300 dark:border-rose-500 dark:focus-visible:ring-rose-500/20' : '',
         this.disabled ? '!bg-gray-100 !text-gray-400 !cursor-not-allowed dark:!bg-slate-900 dark:!text-slate-500 dark:!border-slate-700' : '',
       ]
     },

package/src/ui/kToggle.vue

@@ -7,7 +7,6 @@
         'block mb-1 text-sm font-bold',
         disabled ? 'text-slate-500' : 'text-primary/90',
       ]"
-      for="toggle"
     >
       {{ label }}
     </div>
@@ -15,7 +14,9 @@
     <!-- Toggle button -->
     <button
       @click="toggle"
-      id="toggle"
+      role="switch"
+      :aria-checked="modelValue"
+      :id="computedId"
       :aria-label="label || 'Toggle'"
       :aria-disabled="disabled.toString()"
       :disabled="disabled"
@@ -100,12 +101,12 @@ export default {
 
 .k-toggle-track:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgb(37 99 235 / 0.35);
+  box-shadow: 0 0 0 2px rgb(3 105 161 / 0.35);
 }
 
 .k-toggle-track--on {
-  background: #1d4ed8;
-  border-color: #1d4ed8;
+  background: #0369A1;
+  border-color: #0369A1;
   box-shadow: 0 2px 8px rgb(2 6 23 / 0.25);
 }
 
@@ -148,8 +149,8 @@ export default {
 }
 
 :global(html.dark) .k-toggle-track--on {
-  background: #1d4ed8;
-  border-color: #1d4ed8;
+  background: #0369A1;
+  border-color: #0369A1;
   box-shadow: 0 2px 8px rgb(2 6 23 / 0.45);
 }
 

package/src/ui/kUploader.vue

@@ -16,7 +16,7 @@
           Σύρετε το αρχείο εδώ, ή
           <label
             for="file-input"
-            class="underline cursor-pointer text-primary hover:text-primary/80 focus:outline-none"
+            class="underline cursor-pointer text-primary hover:text-primary/80 focus-visible:outline-none"
           >
             αναζητήστε
           </label>
@@ -63,7 +63,7 @@
             <CheckCircleIcon class="w-5 h-5 text-green-500" />
             <button
               @click="removeFile(file)"
-              class="text-gray-400 hover:text-red-500 focus:outline-none dark:text-slate-500 dark:hover:text-red-400"
+              class="text-gray-400 hover:text-red-500 focus-visible:outline-none dark:text-slate-500 dark:hover:text-red-400"
               :disabled="disabled"
               aria-label="Remove file"
             >

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

@@ -1,6 +1,6 @@
 import { INTENT_VARIANT_STYLES } from "./intentColors";
 
-export const K_BUTTON_FOCUS_RING = "focus-visible:ring-slate-900";
+export const K_BUTTON_FOCUS_RING = "focus-visible:ring-slate-900 dark:focus-visible:ring-primary";
 export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center font-medium transition-all rounded-lg border border-transparent";
 
 export const K_BUTTON_SIZE_STYLES = {

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

@@ -3,11 +3,11 @@ export const K_INPUT_THEME = {
   labelDisabled: "text-slate-500 dark:text-slate-400",
   labelError: "text-rose-800 dark:text-rose-400",
   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 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
+    "w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-slate-900 bg-white placeholder-gray-400 focus-visible:ring-2 focus-visible:ring-primary/25 focus-visible:border-primary dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
   withRightAdornment: "pr-10",
   withPasswordToggle: "pr-14",
   disabled: "!bg-slate-50 !text-slate-400 !border-slate-200 !shadow-none cursor-not-allowed placeholder-slate-400 dark:!bg-slate-900 dark:!text-slate-500 dark:!border-slate-700",
-  errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20 dark:bg-rose-950/40 dark:border-rose-500 dark:focus:ring-rose-500/20",
+  errorInput: "border-rose-500 bg-rose-50/40 focus-visible:border-rose-600 focus-visible:ring-rose-500/20 dark:bg-rose-950/40 dark:border-rose-500 dark:focus-visible:ring-rose-500/20",
   infoText: "text-sm text-slate-600 dark:text-slate-400",
   errorText: "text-sm text-rose-700 dark:text-rose-400",
   trailingIcon: "absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2",