From 18ba2602811f41f920d07f820cf5725d499b39a3 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 00:34:14 +0530
Subject: [PATCH 01/22] remove deprecated dropshadows

---
 lib/styles/definitions.scss | 168 ++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
index ba1350e88..2441cdf8b 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -67,91 +67,91 @@ $core-time: 0.15s;
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
-%dropshadow-3dp {
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-    0 3px 3px -2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-4dp {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-5dp {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-}
+// %dropshadow-3dp {
+//   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+//     0 3px 3px -2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-4dp {
+//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 10px 0 rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-5dp {
+//   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 14px 0 rgba(0, 0, 0, 0.12);
+//}
 %dropshadow-6dp {
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }
-%dropshadow-7dp {
-  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-    0 2px 16px 1px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-8dp {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-9dp {
-  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-    0 3px 16px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-10dp {
-  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0 4px 18px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-11dp {
-  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-    0 4px 20px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-12dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-    0 5px 22px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-13dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-    0 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-14dp {
-  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-    0 5px 26px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-15dp {
-  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-    0 6px 28px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-16dp {
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-    0 6px 30px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-17dp {
-  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-    0 6px 32px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-18dp {
-  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-    0 7px 34px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-19dp {
-  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-    0 7px 36px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-20dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-    0 8px 38px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-21dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-    0 8px 40px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-22dp {
-  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-    0 8px 42px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-23dp {
-  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-    0 9px 44px 8px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-24dp {
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-    0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
+// %dropshadow-7dp {
+//   box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 2px 16px 1px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-8dp {
+//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 14px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-9dp {
+//   box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 16px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-10dp {
+//   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 18px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-11dp {
+//   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 20px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-12dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 22px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-13dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 24px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-14dp {
+//   box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 26px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-15dp {
+//   box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 28px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-16dp {
+//   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 30px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-17dp {
+//   box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 32px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-18dp {
+//   box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 34px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-19dp {
+//   box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 36px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-20dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 38px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-21dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 40px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-22dp {
+//   box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 42px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-23dp {
+//   box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 44px 8px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-24dp {
+//   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 46px 8px rgba(0, 0, 0, 0.12);
+//}

From a37e568cd4d6c451b043025a13258391cfd57289 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 22:07:45 +0530
Subject: [PATCH 02/22] add kfocustrap to kds

---
 lib/KFocusTrap.vue  |  78 +++++++++++++++++++
 lib/KModal.vue      | 180 ++++++++++++++++++++++----------------------
 lib/KThemePlugin.js |   2 +
 yarn.lock           |   6 +-
 4 files changed, 174 insertions(+), 92 deletions(-)
 create mode 100644 lib/KFocusTrap.vue

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
new file mode 100644
index 000000000..c36b9198c
--- /dev/null
+++ b/lib/KFocusTrap.vue
@@ -0,0 +1,78 @@
+<template>
+
+  <div>
+    <div
+      v-if="!disabled"
+      class="focus-trap-first"
+      tabindex="0"
+      @focus="handleFirstTrapFocus"
+    ></div>
+
+    <slot></slot>
+
+    <div
+      v-if="!disabled"
+      class="focus-trap-last"
+      tabindex="0"
+      @focus="handleLastTrapFocus"
+    ></div>
+  </div>
+
+</template>
+  
+  
+  <script>
+
+  /**
+   * This component ensures that focus moves between the first element
+   * and the last element of content provided by the default slot.
+   * In disabled state, it only renders whatever has been passed
+   * to the default slot, and doesn't add any focus trap behavior,
+   * allowing for flexible use from parent components.
+   */
+  export default {
+    name: 'FocusTrap',
+    props: {
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isTrapActive: false,
+      };
+    },
+    methods: {
+      handleFirstTrapFocus(e) {
+        e.stopPropagation();
+        if (!this.isTrapActive) {
+          // On first focus, redirect to first option, then activate trap
+          this.focusFirstEl();
+          this.isTrapActive = true;
+        } else {
+          this.focusLastEl();
+        }
+      },
+      handleLastTrapFocus(e) {
+        e.stopPropagation();
+        this.focusFirstEl();
+      },
+      focusFirstEl() {
+        this.$emit('shouldFocusFirstEl');
+      },
+      focusLastEl() {
+        this.$emit('shouldFocusLastEl');
+      },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      reset() {
+        this.isTrapActive = false;
+      },
+    },
+  };
+
+</script>
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 71bb228b2..2b22aa3a1 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -1,102 +1,104 @@
 <template>
 
-  <component :is="wrapper">
-    <!-- Accessibility properties for the overlay -->
-    <transition name="modal-fade" appear>
-      <div
-        id="modal-window"
-        ref="modal-overlay"
-        class="modal-overlay"
-        @keyup.esc.stop="emitCancelEvent"
-        @keyup.enter="handleEnter"
-      >
-        <!-- KeenUiSelect targets modal by using div.modal selector -->
+  <KFocusTrap>
+    <component :is="wrapper">
+      <!-- Accessibility properties for the overlay -->
+      <transition name="modal-fade" appear>
         <div
-          ref="modal"
-          class="modal"
-          :tabindex="0"
-          role="dialog"
-          aria-labelledby="modal-title"
-          :style="[
-            modalSizeStyles,
-            { background: $themeTokens.surface },
-            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-          ]"
+          id="modal-window"
+          ref="modal-overlay"
+          class="modal-overlay"
+          @keyup.esc.stop="emitCancelEvent"
+          @keyup.enter="handleEnter"
         >
-
-          <!-- Modal Title -->
-          <h1
-            id="modal-title"
-            ref="title"
-            class="title"
+          <!-- KeenUiSelect targets modal by using div.modal selector -->
+          <div
+            ref="modal"
+            class="modal"
+            :tabindex="0"
+            role="dialog"
+            aria-labelledby="modal-title"
+            :style="[
+              modalSizeStyles,
+              { background: $themeTokens.surface },
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+            ]"
           >
-            {{ title }}
-            <!-- Accessible error reporting per @radina -->
-            <span
-              v-if="hasError"
-              class="visuallyhidden"
+
+            <!-- Modal Title -->
+            <h1
+              id="modal-title"
+              ref="title"
+              class="title"
             >
-              {{ errorMessage }}
-            </span>
-          </h1>
-
-          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-          <form
-            class="form"
-            @submit.prevent="emitSubmitEvent"
-            @keyup.enter.stop
-          >
-            <!-- Wrapper for main content -->
-            <div
-              ref="content"
-              class="content"
-              :style="[ contentSectionMaxHeight, scrollShadow ? {
-                borderTop: `1px solid ${$themeTokens.fineLine}`,
-                borderBottom: `1px solid ${$themeTokens.fineLine}`,
-              } : {} ]"
-              :class="{
-                'scroll-shadow': scrollShadow,
-                'contains-kselect': containsKSelect
-              }"
+              {{ title }}
+              <!-- Accessible error reporting per @radina -->
+              <span
+                v-if="hasError"
+                class="visuallyhidden"
+              >
+                {{ errorMessage }}
+              </span>
+            </h1>
+
+            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <form
+              class="form"
+              @submit.prevent="emitSubmitEvent"
+              @keyup.enter.stop
             >
-              <!-- @slot Main content of modal -->
-              <slot></slot>
-            </div>
+              <!-- Wrapper for main content -->
+              <div
+                ref="content"
+                class="content"
+                :style="[ contentSectionMaxHeight, scrollShadow ? {
+                  borderTop: `1px solid ${$themeTokens.fineLine}`,
+                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                } : {} ]"
+                :class="{
+                  'scroll-shadow': scrollShadow,
+                  'contains-kselect': containsKSelect
+                }"
+              >
+                <!-- @slot Main content of modal -->
+                <slot></slot>
+              </div>
 
-            <div
-              ref="actions"
-              class="actions"
-            >
-              <!-- @slot Alternative buttons and actions below main content -->
-              <slot
-                v-if="$slots.actions"
-                name="actions"
+              <div
+                ref="actions"
+                class="actions"
               >
-              </slot>
-              <template v-else>
-                <KButton
-                  v-if="cancelText"
-                  name="cancel"
-                  :text="cancelText"
-                  appearance="flat-button"
-                  :disabled="cancelDisabled || $attrs.disabled"
-                  @click="emitCancelEvent"
-                />
-                <KButton
-                  v-if="submitText"
-                  name="submit"
-                  :text="submitText"
-                  :primary="true"
-                  :disabled="submitDisabled || $attrs.disabled"
-                  type="submit"
-                />
-              </template>
-            </div>
-          </form>
+                <!-- @slot Alternative buttons and actions below main content -->
+                <slot
+                  v-if="$slots.actions"
+                  name="actions"
+                >
+                </slot>
+                <template v-else>
+                  <KButton
+                    v-if="cancelText"
+                    name="cancel"
+                    :text="cancelText"
+                    appearance="flat-button"
+                    :disabled="cancelDisabled || $attrs.disabled"
+                    @click="emitCancelEvent"
+                  />
+                  <KButton
+                    v-if="submitText"
+                    name="submit"
+                    :text="submitText"
+                    :primary="true"
+                    :disabled="submitDisabled || $attrs.disabled"
+                    type="submit"
+                  />
+                </template>
+              </div>
+            </form>
+          </div>
         </div>
-      </div>
-    </transition>
-  </component>
+      </transition>
+    </component>
+  </KFocusTrap>
 
 </template>
 
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 1a8355ac0..43c361869 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -39,6 +39,7 @@ import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
 import KCard from './KCard';
+import KFocusTrap from './KFocusTrap.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -159,4 +160,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTextTruncator', KTextTruncator);
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
   Vue.component('KCard', KCard);
+  Vue.component('KFocusTrap', KFocusTrap);
 }
diff --git a/yarn.lock b/yarn.lock
index ff78f9eaf..0e1a1bbe1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3650,9 +3650,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001016, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001254, caniuse-lite@^1.0.30001286:
-  version "1.0.30001346"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz"
-  integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==
+  version "1.0.30001655"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 capture-exit@^2.0.0:
   version "2.0.0"

From 1a30127d971344c92c7374823212d92ab862bca9 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 23:22:15 +0530
Subject: [PATCH 03/22] Update KFocusTrap.vue

---
 lib/KFocusTrap.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index c36b9198c..1343c1e20 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -20,8 +20,8 @@
 
 </template>
   
-  
-  <script>
+
+<script>
 
   /**
    * This component ensures that focus moves between the first element

From dfc92e4c243b239f3f1fef5f0ef9fa0191ff14fe Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 23:23:02 +0530
Subject: [PATCH 04/22] Update definitions.scss

---
 lib/styles/definitions.scss | 168 ++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
index 2441cdf8b..ba1350e88 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -67,91 +67,91 @@ $core-time: 0.15s;
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
-// %dropshadow-3dp {
-//   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-//     0 3px 3px -2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-4dp {
-//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-//     0 1px 10px 0 rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-5dp {
-//   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-//     0 1px 14px 0 rgba(0, 0, 0, 0.12);
-//}
+%dropshadow-3dp {
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+    0 3px 3px -2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-4dp {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+%dropshadow-5dp {
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+    0 1px 14px 0 rgba(0, 0, 0, 0.12);
+}
 %dropshadow-6dp {
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }
-// %dropshadow-7dp {
-//   box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-//     0 2px 16px 1px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-8dp {
-//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-//     0 3px 14px 2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-9dp {
-//   box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-//     0 3px 16px 2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-10dp {
-//   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-//     0 4px 18px 3px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-11dp {
-//   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-//     0 4px 20px 3px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-12dp {
-//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 22px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-13dp {
-//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 24px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-14dp {
-//   box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 26px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-15dp {
-//   box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 28px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-16dp {
-//   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 30px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-17dp {
-//   box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 32px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-18dp {
-//   box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-//     0 7px 34px 6px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-19dp {
-//   box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-//     0 7px 36px 6px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-20dp {
-//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 38px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-21dp {
-//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 40px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-22dp {
-//   box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 42px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-23dp {
-//   box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-//     0 9px 44px 8px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-24dp {
-//   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-//     0 9px 46px 8px rgba(0, 0, 0, 0.12);
-//}
+%dropshadow-7dp {
+  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+    0 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-8dp {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-9dp {
+  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+    0 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-10dp {
+  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+    0 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-11dp {
+  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+    0 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-12dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-13dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+    0 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-14dp {
+  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+    0 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-15dp {
+  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+    0 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-16dp {
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-17dp {
+  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+    0 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-18dp {
+  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+    0 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-19dp {
+  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+    0 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-20dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+    0 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-21dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+    0 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-22dp {
+  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+    0 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-23dp {
+  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+    0 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-24dp {
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}

From d2fe7678ced587ab1d6465b374d024adf7d1eb7e Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 23:24:49 +0530
Subject: [PATCH 05/22] Update yarn.lock

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0e1a1bbe1..c97c9d26c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3650,9 +3650,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001016, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001254, caniuse-lite@^1.0.30001286:
-  version "1.0.30001655"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
-  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
+   version "1.0.30001346"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz"
+  integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"

From 4ce8852616f4218d24705fb59d8021b0d27554b6 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 2 Sep 2024 23:31:56 +0530
Subject: [PATCH 06/22] Update yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index c97c9d26c..ff78f9eaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3650,7 +3650,7 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001016, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001254, caniuse-lite@^1.0.30001286:
-   version "1.0.30001346"
+  version "1.0.30001346"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001346.tgz"
   integrity sha512-q6ibZUO2t88QCIPayP/euuDREq+aMAxFE5S70PkrLh0iTDj/zEhgvJRKC2+CvXY6EWc6oQwUR48lL5vCW6jiXQ==
 

From c3243102d1d1824764721b11e355d91706a1565d Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Mon, 2 Sep 2024 21:45:41 +0300
Subject: [PATCH 07/22] Fix linting issue

---
 lib/KFocusTrap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index 1343c1e20..28b9176a3 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -19,7 +19,7 @@
   </div>
 
 </template>
-  
+
 
 <script>
 

From 83e8312ce7403835075322cb7e6c2c1db370fb10 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Tue, 3 Sep 2024 17:34:30 +0530
Subject: [PATCH 08/22] Update lib/KFocusTrap.vue

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 lib/KFocusTrap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index 28b9176a3..a811e425c 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -31,7 +31,7 @@
    * allowing for flexible use from parent components.
    */
   export default {
-    name: 'FocusTrap',
+    name: 'KFocusTrap',
     props: {
       disabled: {
         type: Boolean,

From dbec4b6c71477dcd700a2b7d99837355317880a7 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sun, 15 Sep 2024 13:00:02 +0530
Subject: [PATCH 09/22] Make KRadioButton to show a warning for developers when
 it's not nested inside KRadioButtonGroup

---
 lib/KRadioButton.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index ba5a00b01..f12cd3de7 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -185,6 +185,9 @@
           "KRadioButton: 'value' prop is deprecated and will be removed in a future release. Please use 'buttonValue' instead."
         );
       }
+      if (process.env.NODE_ENV !== 'production') {
+        this.checkForKRadioButtonGroup();
+      }
     },
     methods: {
       /**
@@ -237,6 +240,18 @@
       setTabIndex(val) {
         this.tabIndex = val;
       },
+
+      checkForKRadioButtonGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.name === 'KRadioButtonGroup') {
+            return; // Found KRadioButtonGroup, no warning needed
+          }
+          parent = parent.$parent;
+        }
+        // If we get here, no KRadioButtonGroup was found
+        console.warn('KRadioButton should be nested inside a KRadioButtonGroup component.');
+      },
     },
   };
 

From bf0c9433e3662601f25db5494abcbe1e69b34d48 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sun, 15 Sep 2024 13:06:05 +0530
Subject: [PATCH 10/22] revert changes to Kmodal

revert changes made to KModal and remove KFocustrap for the time being
---
 lib/KFocusTrap.vue  |  78 -------------------
 lib/KModal.vue      | 182 ++++++++++++++++++++++----------------------
 lib/KThemePlugin.js |   2 -
 3 files changed, 90 insertions(+), 172 deletions(-)
 delete mode 100644 lib/KFocusTrap.vue

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
deleted file mode 100644
index a811e425c..000000000
--- a/lib/KFocusTrap.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-
-  <div>
-    <div
-      v-if="!disabled"
-      class="focus-trap-first"
-      tabindex="0"
-      @focus="handleFirstTrapFocus"
-    ></div>
-
-    <slot></slot>
-
-    <div
-      v-if="!disabled"
-      class="focus-trap-last"
-      tabindex="0"
-      @focus="handleLastTrapFocus"
-    ></div>
-  </div>
-
-</template>
-
-
-<script>
-
-  /**
-   * This component ensures that focus moves between the first element
-   * and the last element of content provided by the default slot.
-   * In disabled state, it only renders whatever has been passed
-   * to the default slot, and doesn't add any focus trap behavior,
-   * allowing for flexible use from parent components.
-   */
-  export default {
-    name: 'KFocusTrap',
-    props: {
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-    data() {
-      return {
-        isTrapActive: false,
-      };
-    },
-    methods: {
-      handleFirstTrapFocus(e) {
-        e.stopPropagation();
-        if (!this.isTrapActive) {
-          // On first focus, redirect to first option, then activate trap
-          this.focusFirstEl();
-          this.isTrapActive = true;
-        } else {
-          this.focusLastEl();
-        }
-      },
-      handleLastTrapFocus(e) {
-        e.stopPropagation();
-        this.focusFirstEl();
-      },
-      focusFirstEl() {
-        this.$emit('shouldFocusFirstEl');
-      },
-      focusLastEl() {
-        this.$emit('shouldFocusLastEl');
-      },
-      /**
-       * @public
-       * Reset the next focus to the first focus element
-       */
-      reset() {
-        this.isTrapActive = false;
-      },
-    },
-  };
-
-</script>
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 2b22aa3a1..f46c39d4e 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -1,104 +1,102 @@
 <template>
 
-  <KFocusTrap>
-    <component :is="wrapper">
-      <!-- Accessibility properties for the overlay -->
-      <transition name="modal-fade" appear>
+  <component :is="wrapper">
+    <!-- Accessibility properties for the overlay -->
+    <transition name="modal-fade" appear>
+      <div
+        id="modal-window"
+        ref="modal-overlay"
+        class="modal-overlay"
+        @keyup.esc.stop="emitCancelEvent"
+        @keyup.enter="handleEnter"
+      >
+        <!-- KeenUiSelect targets modal by using div.modal selector -->
         <div
-          id="modal-window"
-          ref="modal-overlay"
-          class="modal-overlay"
-          @keyup.esc.stop="emitCancelEvent"
-          @keyup.enter="handleEnter"
+          ref="modal"
+          class="modal"
+          :tabindex="0"
+          role="dialog"
+          aria-labelledby="modal-title"
+          :style="[
+            modalSizeStyles,
+            { background: $themeTokens.surface },
+            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+          ]"
         >
-          <!-- KeenUiSelect targets modal by using div.modal selector -->
-          <div
-            ref="modal"
-            class="modal"
-            :tabindex="0"
-            role="dialog"
-            aria-labelledby="modal-title"
-            :style="[
-              modalSizeStyles,
-              { background: $themeTokens.surface },
-              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-            ]"
-          >
 
-            <!-- Modal Title -->
-            <h1
-              id="modal-title"
-              ref="title"
-              class="title"
+          <!-- Modal Title -->
+          <h1
+            id="modal-title"
+            ref="title"
+            class="title"
+          >
+            {{ title }}
+            <!-- Accessible error reporting per @radina -->
+            <span
+              v-if="hasError"
+              class="visuallyhidden"
             >
-              {{ title }}
-              <!-- Accessible error reporting per @radina -->
-              <span
-                v-if="hasError"
-                class="visuallyhidden"
-              >
-                {{ errorMessage }}
-              </span>
-            </h1>
-
-            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-            <form
-              class="form"
-              @submit.prevent="emitSubmitEvent"
-              @keyup.enter.stop
+              {{ errorMessage }}
+            </span>
+          </h1>
+
+          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+          <form
+            class="form"
+            @submit.prevent="emitSubmitEvent"
+            @keyup.enter.stop
+          >
+            <!-- Wrapper for main content -->
+            <div
+              ref="content"
+              class="content"
+              :style="[ contentSectionMaxHeight, scrollShadow ? {
+                borderTop: `1px solid ${$themeTokens.fineLine}`,
+                borderBottom: `1px solid ${$themeTokens.fineLine}`,
+              } : {} ]"
+              :class="{
+                'scroll-shadow': scrollShadow,
+                'contains-kselect': containsKSelect
+              }"
             >
-              <!-- Wrapper for main content -->
-              <div
-                ref="content"
-                class="content"
-                :style="[ contentSectionMaxHeight, scrollShadow ? {
-                  borderTop: `1px solid ${$themeTokens.fineLine}`,
-                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
-                } : {} ]"
-                :class="{
-                  'scroll-shadow': scrollShadow,
-                  'contains-kselect': containsKSelect
-                }"
-              >
-                <!-- @slot Main content of modal -->
-                <slot></slot>
-              </div>
+              <!-- @slot Main content of modal -->
+              <slot></slot>
+            </div>
 
-              <div
-                ref="actions"
-                class="actions"
+            <div
+              ref="actions"
+              class="actions"
+            >
+              <!-- @slot Alternative buttons and actions below main content -->
+              <slot
+                v-if="$slots.actions"
+                name="actions"
               >
-                <!-- @slot Alternative buttons and actions below main content -->
-                <slot
-                  v-if="$slots.actions"
-                  name="actions"
-                >
-                </slot>
-                <template v-else>
-                  <KButton
-                    v-if="cancelText"
-                    name="cancel"
-                    :text="cancelText"
-                    appearance="flat-button"
-                    :disabled="cancelDisabled || $attrs.disabled"
-                    @click="emitCancelEvent"
-                  />
-                  <KButton
-                    v-if="submitText"
-                    name="submit"
-                    :text="submitText"
-                    :primary="true"
-                    :disabled="submitDisabled || $attrs.disabled"
-                    type="submit"
-                  />
-                </template>
-              </div>
-            </form>
-          </div>
+              </slot>
+              <template v-else>
+                <KButton
+                  v-if="cancelText"
+                  name="cancel"
+                  :text="cancelText"
+                  appearance="flat-button"
+                  :disabled="cancelDisabled || $attrs.disabled"
+                  @click="emitCancelEvent"
+                />
+                <KButton
+                  v-if="submitText"
+                  name="submit"
+                  :text="submitText"
+                  :primary="true"
+                  :disabled="submitDisabled || $attrs.disabled"
+                  type="submit"
+                />
+              </template>
+            </div>
+          </form>
         </div>
-      </transition>
-    </component>
-  </KFocusTrap>
+      </div>
+    </transition>
+  </component>
 
 </template>
 
@@ -452,4 +450,4 @@
     margin-left: 16px;
   }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 43c361869..1a8355ac0 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -39,7 +39,6 @@ import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
 import KCard from './KCard';
-import KFocusTrap from './KFocusTrap.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -160,5 +159,4 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTextTruncator', KTextTruncator);
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
   Vue.component('KCard', KCard);
-  Vue.component('KFocusTrap', KFocusTrap);
 }

From 2aaed510cf128bcba6ff52b94b1d4c47238c7fcd Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sun, 15 Sep 2024 13:08:17 +0530
Subject: [PATCH 11/22] Update KModal.vue

---
 lib/KModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KModal.vue b/lib/KModal.vue
index f46c39d4e..71bb228b2 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -450,4 +450,4 @@
     margin-left: 16px;
   }
 
-</style>
\ No newline at end of file
+</style>

From 1639251e003283dc444a48ddfc73ab4914398837 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Fri, 11 Oct 2024 11:57:52 +0530
Subject: [PATCH 12/22] Add KfocusTrap and wrap KModal with it

---
 .gitignore               |   1 +
 lib/KDateRange/index.vue | 102 ++++++++++++++++++++-------------------
 lib/KFocusTrap.vue       |  78 ++++++++++++++++++++++++++++++
 lib/KThemePlugin.js      |   2 +
 4 files changed, 134 insertions(+), 49 deletions(-)
 create mode 100644 lib/KFocusTrap.vue

diff --git a/.gitignore b/.gitignore
index b81f07174..9e4bc7763 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+docs/pages/playground.vue
diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index 917cbb372..af57bcbb2 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -1,58 +1,60 @@
 <template>
 
-  <KModal
-    :cancelText="cancelText"
-    :title="title"
-    :submitText="submitText"
-    :size="modalSize"
-    :submitDisabled="disabled"
-    data-test="dateRangeModal"
-    @submit="onSubmit"
-    @cancel="$emit('cancel')"
-  >
-    <div>
-      <!-- @slot Description of modal -->
-      <slot name="description">
-        <p id="modal-description" ref="description" class="description">
-          {{ description }}
-        </p>
-      </slot>
-      <div class="date-inputs">
-        <div class="left-input">
-          <KDateInput
-            :value="dateRange.start"
-            inputRef="dateStartRangeInput"
-            :errorMessage="invalidStartErrorMessage"
-            :legendText="startDateLegendText"
-            data-test="startDate"
-            @updateDate="debouncedSetStartDate"
-          />
+  <KFocusTrap>
+    <KModal
+      :cancelText="cancelText"
+      :title="title"
+      :submitText="submitText"
+      :size="modalSize"
+      :submitDisabled="disabled"
+      data-test="dateRangeModal"
+      @submit="onSubmit"
+      @cancel="$emit('cancel')"
+    >
+      <div>
+        <!-- @slot Description of modal -->
+        <slot name="description">
+          <p id="modal-description" ref="description" class="description">
+            {{ description }}
+          </p>
+        </slot>
+        <div class="date-inputs">
+          <div class="left-input">
+            <KDateInput
+              :value="dateRange.start"
+              inputRef="dateStartRangeInput"
+              :errorMessage="invalidStartErrorMessage"
+              :legendText="startDateLegendText"
+              data-test="startDate"
+              @updateDate="debouncedSetStartDate"
+            />
+          </div>
+          <div class="right-input">
+            <KDateInput
+              :value="dateRange.end"
+              inputRef="dateEndRangeInput"
+              :errorMessage="invalidEndErrorMessage"
+              :legendText="endDateLegendText"
+              data-test="endDate"
+              @updateDate="debouncedSetEndDate"
+            />
+          </div>
         </div>
-        <div class="right-input">
-          <KDateInput
-            :value="dateRange.end"
-            inputRef="dateEndRangeInput"
-            :errorMessage="invalidEndErrorMessage"
-            :legendText="endDateLegendText"
-            data-test="endDate"
-            @updateDate="debouncedSetEndDate"
+        <div>
+          <KDateCalendar
+            :firstAllowedDate="firstAllowedDate"
+            :lastAllowedDate="lastAllowedDate"
+            :selectedStartDate="createDate(dateRange.start)"
+            :selectedEndDate="createDate(dateRange.end)"
+            :previousMonthText="previousMonthText"
+            :nextMonthText="nextMonthText"
+            v-bind.sync="dateRange"
+            @updateSelectedDates="setSelectedDatesFromCalendar"
           />
         </div>
       </div>
-      <div>
-        <KDateCalendar
-          :firstAllowedDate="firstAllowedDate"
-          :lastAllowedDate="lastAllowedDate"
-          :selectedStartDate="createDate(dateRange.start)"
-          :selectedEndDate="createDate(dateRange.end)"
-          :previousMonthText="previousMonthText"
-          :nextMonthText="nextMonthText"
-          v-bind.sync="dateRange"
-          @updateSelectedDates="setSelectedDatesFromCalendar"
-        />
-      </div>
-    </div>
-  </KModal>
+    </KModal>
+  </KFocusTrap>
 
 </template>
 
@@ -64,6 +66,7 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
+  import KFocusTrap from '../KFocusTrap.vue';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -75,6 +78,7 @@
       KModal,
       KDateInput,
       KDateCalendar,
+      KFocusTrap,
     },
     props: {
       /**
diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
new file mode 100644
index 000000000..f61bc37a4
--- /dev/null
+++ b/lib/KFocusTrap.vue
@@ -0,0 +1,78 @@
+<template>
+
+  <div>
+    <div
+      v-if="!disabled"
+      class="focus-trap-first"
+      tabindex="0"
+      @focus="handleFirstTrapFocus"
+    ></div>
+
+    <slot></slot>
+
+    <div
+      v-if="!disabled"
+      class="focus-trap-last"
+      tabindex="0"
+      @focus="handleLastTrapFocus"
+    ></div>
+  </div>
+
+</template>
+  
+  
+  <script>
+
+  /**
+   * This component ensures that focus moves between the first element
+   * and the last element of content provided by the default slot.
+   * In disabled state, it only renders whatever has been passed
+   * to the default slot, and doesn't add any focus trap behavior,
+   * allowing for flexible use from parent components.
+   */
+  export default {
+    name: 'KFocusTrap',
+    props: {
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isTrapActive: false,
+      };
+    },
+    methods: {
+      handleFirstTrapFocus(e) {
+        e.stopPropagation();
+        if (!this.isTrapActive) {
+          // On first focus, redirect to first option, then activate trap
+          this.focusFirstEl();
+          this.isTrapActive = true;
+        } else {
+          this.focusLastEl();
+        }
+      },
+      handleLastTrapFocus(e) {
+        e.stopPropagation();
+        this.focusFirstEl();
+      },
+      focusFirstEl() {
+        this.$emit('shouldFocusFirstEl');
+      },
+      focusLastEl() {
+        this.$emit('shouldFocusLastEl');
+      },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      reset() {
+        this.isTrapActive = false;
+      },
+    },
+  };
+
+</script>
\ No newline at end of file
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index d220b9958..affdb6b5b 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -41,6 +41,7 @@ import KTransition from './KTransition';
 import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
+import KFocusTrap from './KFocusTrap.vue';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -163,4 +164,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTransition', KTransition);
   Vue.component('KTextTruncator', KTextTruncator);
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
+  Vue.component('KFocusTrap', KFocusTrap);
 }

From ec0e778731b26e8629d6e742abbafe938598128f Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Fri, 11 Oct 2024 12:40:39 +0530
Subject: [PATCH 13/22] /

---
 lib/KDateRange/index.vue | 102 +++++++++++------------
 lib/KModal.vue           | 172 ++++++++++++++++++++-------------------
 2 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index af57bcbb2..917cbb372 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -1,60 +1,58 @@
 <template>
 
-  <KFocusTrap>
-    <KModal
-      :cancelText="cancelText"
-      :title="title"
-      :submitText="submitText"
-      :size="modalSize"
-      :submitDisabled="disabled"
-      data-test="dateRangeModal"
-      @submit="onSubmit"
-      @cancel="$emit('cancel')"
-    >
-      <div>
-        <!-- @slot Description of modal -->
-        <slot name="description">
-          <p id="modal-description" ref="description" class="description">
-            {{ description }}
-          </p>
-        </slot>
-        <div class="date-inputs">
-          <div class="left-input">
-            <KDateInput
-              :value="dateRange.start"
-              inputRef="dateStartRangeInput"
-              :errorMessage="invalidStartErrorMessage"
-              :legendText="startDateLegendText"
-              data-test="startDate"
-              @updateDate="debouncedSetStartDate"
-            />
-          </div>
-          <div class="right-input">
-            <KDateInput
-              :value="dateRange.end"
-              inputRef="dateEndRangeInput"
-              :errorMessage="invalidEndErrorMessage"
-              :legendText="endDateLegendText"
-              data-test="endDate"
-              @updateDate="debouncedSetEndDate"
-            />
-          </div>
+  <KModal
+    :cancelText="cancelText"
+    :title="title"
+    :submitText="submitText"
+    :size="modalSize"
+    :submitDisabled="disabled"
+    data-test="dateRangeModal"
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <div>
+      <!-- @slot Description of modal -->
+      <slot name="description">
+        <p id="modal-description" ref="description" class="description">
+          {{ description }}
+        </p>
+      </slot>
+      <div class="date-inputs">
+        <div class="left-input">
+          <KDateInput
+            :value="dateRange.start"
+            inputRef="dateStartRangeInput"
+            :errorMessage="invalidStartErrorMessage"
+            :legendText="startDateLegendText"
+            data-test="startDate"
+            @updateDate="debouncedSetStartDate"
+          />
         </div>
-        <div>
-          <KDateCalendar
-            :firstAllowedDate="firstAllowedDate"
-            :lastAllowedDate="lastAllowedDate"
-            :selectedStartDate="createDate(dateRange.start)"
-            :selectedEndDate="createDate(dateRange.end)"
-            :previousMonthText="previousMonthText"
-            :nextMonthText="nextMonthText"
-            v-bind.sync="dateRange"
-            @updateSelectedDates="setSelectedDatesFromCalendar"
+        <div class="right-input">
+          <KDateInput
+            :value="dateRange.end"
+            inputRef="dateEndRangeInput"
+            :errorMessage="invalidEndErrorMessage"
+            :legendText="endDateLegendText"
+            data-test="endDate"
+            @updateDate="debouncedSetEndDate"
           />
         </div>
       </div>
-    </KModal>
-  </KFocusTrap>
+      <div>
+        <KDateCalendar
+          :firstAllowedDate="firstAllowedDate"
+          :lastAllowedDate="lastAllowedDate"
+          :selectedStartDate="createDate(dateRange.start)"
+          :selectedEndDate="createDate(dateRange.end)"
+          :previousMonthText="previousMonthText"
+          :nextMonthText="nextMonthText"
+          v-bind.sync="dateRange"
+          @updateSelectedDates="setSelectedDatesFromCalendar"
+        />
+      </div>
+    </div>
+  </KModal>
 
 </template>
 
@@ -66,7 +64,6 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
-  import KFocusTrap from '../KFocusTrap.vue';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -78,7 +75,6 @@
       KModal,
       KDateInput,
       KDateCalendar,
-      KFocusTrap,
     },
     props: {
       /**
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 71bb228b2..9bd7e8c12 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -3,98 +3,100 @@
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
-      <div
-        id="modal-window"
-        ref="modal-overlay"
-        class="modal-overlay"
-        @keyup.esc.stop="emitCancelEvent"
-        @keyup.enter="handleEnter"
-      >
-        <!-- KeenUiSelect targets modal by using div.modal selector -->
+      <KFocusTrap>
         <div
-          ref="modal"
-          class="modal"
-          :tabindex="0"
-          role="dialog"
-          aria-labelledby="modal-title"
-          :style="[
-            modalSizeStyles,
-            { background: $themeTokens.surface },
-            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-          ]"
+          id="modal-window"
+          ref="modal-overlay"
+          class="modal-overlay"
+          @keyup.esc.stop="emitCancelEvent"
+          @keyup.enter="handleEnter"
         >
-
-          <!-- Modal Title -->
-          <h1
-            id="modal-title"
-            ref="title"
-            class="title"
+          <!-- KeenUiSelect targets modal by using div.modal selector -->
+          <div
+            ref="modal"
+            class="modal"
+            :tabindex="0"
+            role="dialog"
+            aria-labelledby="modal-title"
+            :style="[
+              modalSizeStyles,
+              { background: $themeTokens.surface },
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+            ]"
           >
-            {{ title }}
-            <!-- Accessible error reporting per @radina -->
-            <span
-              v-if="hasError"
-              class="visuallyhidden"
+
+            <!-- Modal Title -->
+            <h1
+              id="modal-title"
+              ref="title"
+              class="title"
             >
-              {{ errorMessage }}
-            </span>
-          </h1>
-
-          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-          <form
-            class="form"
-            @submit.prevent="emitSubmitEvent"
-            @keyup.enter.stop
-          >
-            <!-- Wrapper for main content -->
-            <div
-              ref="content"
-              class="content"
-              :style="[ contentSectionMaxHeight, scrollShadow ? {
-                borderTop: `1px solid ${$themeTokens.fineLine}`,
-                borderBottom: `1px solid ${$themeTokens.fineLine}`,
-              } : {} ]"
-              :class="{
-                'scroll-shadow': scrollShadow,
-                'contains-kselect': containsKSelect
-              }"
+              {{ title }}
+              <!-- Accessible error reporting per @radina -->
+              <span
+                v-if="hasError"
+                class="visuallyhidden"
+              >
+                {{ errorMessage }}
+              </span>
+            </h1>
+
+            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <form
+              class="form"
+              @submit.prevent="emitSubmitEvent"
+              @keyup.enter.stop
             >
-              <!-- @slot Main content of modal -->
-              <slot></slot>
-            </div>
+              <!-- Wrapper for main content -->
+              <div
+                ref="content"
+                class="content"
+                :style="[ contentSectionMaxHeight, scrollShadow ? {
+                  borderTop: `1px solid ${$themeTokens.fineLine}`,
+                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                } : {} ]"
+                :class="{
+                  'scroll-shadow': scrollShadow,
+                  'contains-kselect': containsKSelect
+                }"
+              >
+                <!-- @slot Main content of modal -->
+                <slot></slot>
+              </div>
 
-            <div
-              ref="actions"
-              class="actions"
-            >
-              <!-- @slot Alternative buttons and actions below main content -->
-              <slot
-                v-if="$slots.actions"
-                name="actions"
+              <div
+                ref="actions"
+                class="actions"
               >
-              </slot>
-              <template v-else>
-                <KButton
-                  v-if="cancelText"
-                  name="cancel"
-                  :text="cancelText"
-                  appearance="flat-button"
-                  :disabled="cancelDisabled || $attrs.disabled"
-                  @click="emitCancelEvent"
-                />
-                <KButton
-                  v-if="submitText"
-                  name="submit"
-                  :text="submitText"
-                  :primary="true"
-                  :disabled="submitDisabled || $attrs.disabled"
-                  type="submit"
-                />
-              </template>
-            </div>
-          </form>
+                <!-- @slot Alternative buttons and actions below main content -->
+                <slot
+                  v-if="$slots.actions"
+                  name="actions"
+                >
+                </slot>
+                <template v-else>
+                  <KButton
+                    v-if="cancelText"
+                    name="cancel"
+                    :text="cancelText"
+                    appearance="flat-button"
+                    :disabled="cancelDisabled || $attrs.disabled"
+                    @click="emitCancelEvent"
+                  />
+                  <KButton
+                    v-if="submitText"
+                    name="submit"
+                    :text="submitText"
+                    :primary="true"
+                    :disabled="submitDisabled || $attrs.disabled"
+                    type="submit"
+                  />
+                </template>
+              </div>
+            </form>
+          </div>
         </div>
-      </div>
+      </KFocusTrap>
     </transition>
   </component>
 
@@ -106,6 +108,8 @@
   import debounce from 'lodash/debounce';
   import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
+  cla;
+
   const SIZE_SM = 'small';
   const SIZE_MD = 'medium';
   const SIZE_LG = 'large';

From c142e14b7f168ae3984adc103fe3410e81c262f0 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Fri, 11 Oct 2024 23:26:44 +0530
Subject: [PATCH 14/22] Revert "/"

This reverts commit ec0e778731b26e8629d6e742abbafe938598128f.
---
 lib/KDateRange/index.vue | 102 ++++++++++++-----------
 lib/KModal.vue           | 172 +++++++++++++++++++--------------------
 2 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index 917cbb372..af57bcbb2 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -1,58 +1,60 @@
 <template>
 
-  <KModal
-    :cancelText="cancelText"
-    :title="title"
-    :submitText="submitText"
-    :size="modalSize"
-    :submitDisabled="disabled"
-    data-test="dateRangeModal"
-    @submit="onSubmit"
-    @cancel="$emit('cancel')"
-  >
-    <div>
-      <!-- @slot Description of modal -->
-      <slot name="description">
-        <p id="modal-description" ref="description" class="description">
-          {{ description }}
-        </p>
-      </slot>
-      <div class="date-inputs">
-        <div class="left-input">
-          <KDateInput
-            :value="dateRange.start"
-            inputRef="dateStartRangeInput"
-            :errorMessage="invalidStartErrorMessage"
-            :legendText="startDateLegendText"
-            data-test="startDate"
-            @updateDate="debouncedSetStartDate"
-          />
+  <KFocusTrap>
+    <KModal
+      :cancelText="cancelText"
+      :title="title"
+      :submitText="submitText"
+      :size="modalSize"
+      :submitDisabled="disabled"
+      data-test="dateRangeModal"
+      @submit="onSubmit"
+      @cancel="$emit('cancel')"
+    >
+      <div>
+        <!-- @slot Description of modal -->
+        <slot name="description">
+          <p id="modal-description" ref="description" class="description">
+            {{ description }}
+          </p>
+        </slot>
+        <div class="date-inputs">
+          <div class="left-input">
+            <KDateInput
+              :value="dateRange.start"
+              inputRef="dateStartRangeInput"
+              :errorMessage="invalidStartErrorMessage"
+              :legendText="startDateLegendText"
+              data-test="startDate"
+              @updateDate="debouncedSetStartDate"
+            />
+          </div>
+          <div class="right-input">
+            <KDateInput
+              :value="dateRange.end"
+              inputRef="dateEndRangeInput"
+              :errorMessage="invalidEndErrorMessage"
+              :legendText="endDateLegendText"
+              data-test="endDate"
+              @updateDate="debouncedSetEndDate"
+            />
+          </div>
         </div>
-        <div class="right-input">
-          <KDateInput
-            :value="dateRange.end"
-            inputRef="dateEndRangeInput"
-            :errorMessage="invalidEndErrorMessage"
-            :legendText="endDateLegendText"
-            data-test="endDate"
-            @updateDate="debouncedSetEndDate"
+        <div>
+          <KDateCalendar
+            :firstAllowedDate="firstAllowedDate"
+            :lastAllowedDate="lastAllowedDate"
+            :selectedStartDate="createDate(dateRange.start)"
+            :selectedEndDate="createDate(dateRange.end)"
+            :previousMonthText="previousMonthText"
+            :nextMonthText="nextMonthText"
+            v-bind.sync="dateRange"
+            @updateSelectedDates="setSelectedDatesFromCalendar"
           />
         </div>
       </div>
-      <div>
-        <KDateCalendar
-          :firstAllowedDate="firstAllowedDate"
-          :lastAllowedDate="lastAllowedDate"
-          :selectedStartDate="createDate(dateRange.start)"
-          :selectedEndDate="createDate(dateRange.end)"
-          :previousMonthText="previousMonthText"
-          :nextMonthText="nextMonthText"
-          v-bind.sync="dateRange"
-          @updateSelectedDates="setSelectedDatesFromCalendar"
-        />
-      </div>
-    </div>
-  </KModal>
+    </KModal>
+  </KFocusTrap>
 
 </template>
 
@@ -64,6 +66,7 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
+  import KFocusTrap from '../KFocusTrap.vue';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -75,6 +78,7 @@
       KModal,
       KDateInput,
       KDateCalendar,
+      KFocusTrap,
     },
     props: {
       /**
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 9bd7e8c12..71bb228b2 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -3,100 +3,98 @@
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
-      <KFocusTrap>
+      <div
+        id="modal-window"
+        ref="modal-overlay"
+        class="modal-overlay"
+        @keyup.esc.stop="emitCancelEvent"
+        @keyup.enter="handleEnter"
+      >
+        <!-- KeenUiSelect targets modal by using div.modal selector -->
         <div
-          id="modal-window"
-          ref="modal-overlay"
-          class="modal-overlay"
-          @keyup.esc.stop="emitCancelEvent"
-          @keyup.enter="handleEnter"
+          ref="modal"
+          class="modal"
+          :tabindex="0"
+          role="dialog"
+          aria-labelledby="modal-title"
+          :style="[
+            modalSizeStyles,
+            { background: $themeTokens.surface },
+            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+          ]"
         >
-          <!-- KeenUiSelect targets modal by using div.modal selector -->
-          <div
-            ref="modal"
-            class="modal"
-            :tabindex="0"
-            role="dialog"
-            aria-labelledby="modal-title"
-            :style="[
-              modalSizeStyles,
-              { background: $themeTokens.surface },
-              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-            ]"
-          >
 
-            <!-- Modal Title -->
-            <h1
-              id="modal-title"
-              ref="title"
-              class="title"
+          <!-- Modal Title -->
+          <h1
+            id="modal-title"
+            ref="title"
+            class="title"
+          >
+            {{ title }}
+            <!-- Accessible error reporting per @radina -->
+            <span
+              v-if="hasError"
+              class="visuallyhidden"
             >
-              {{ title }}
-              <!-- Accessible error reporting per @radina -->
-              <span
-                v-if="hasError"
-                class="visuallyhidden"
-              >
-                {{ errorMessage }}
-              </span>
-            </h1>
-
-            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-            <form
-              class="form"
-              @submit.prevent="emitSubmitEvent"
-              @keyup.enter.stop
+              {{ errorMessage }}
+            </span>
+          </h1>
+
+          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+          <form
+            class="form"
+            @submit.prevent="emitSubmitEvent"
+            @keyup.enter.stop
+          >
+            <!-- Wrapper for main content -->
+            <div
+              ref="content"
+              class="content"
+              :style="[ contentSectionMaxHeight, scrollShadow ? {
+                borderTop: `1px solid ${$themeTokens.fineLine}`,
+                borderBottom: `1px solid ${$themeTokens.fineLine}`,
+              } : {} ]"
+              :class="{
+                'scroll-shadow': scrollShadow,
+                'contains-kselect': containsKSelect
+              }"
             >
-              <!-- Wrapper for main content -->
-              <div
-                ref="content"
-                class="content"
-                :style="[ contentSectionMaxHeight, scrollShadow ? {
-                  borderTop: `1px solid ${$themeTokens.fineLine}`,
-                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
-                } : {} ]"
-                :class="{
-                  'scroll-shadow': scrollShadow,
-                  'contains-kselect': containsKSelect
-                }"
-              >
-                <!-- @slot Main content of modal -->
-                <slot></slot>
-              </div>
+              <!-- @slot Main content of modal -->
+              <slot></slot>
+            </div>
 
-              <div
-                ref="actions"
-                class="actions"
+            <div
+              ref="actions"
+              class="actions"
+            >
+              <!-- @slot Alternative buttons and actions below main content -->
+              <slot
+                v-if="$slots.actions"
+                name="actions"
               >
-                <!-- @slot Alternative buttons and actions below main content -->
-                <slot
-                  v-if="$slots.actions"
-                  name="actions"
-                >
-                </slot>
-                <template v-else>
-                  <KButton
-                    v-if="cancelText"
-                    name="cancel"
-                    :text="cancelText"
-                    appearance="flat-button"
-                    :disabled="cancelDisabled || $attrs.disabled"
-                    @click="emitCancelEvent"
-                  />
-                  <KButton
-                    v-if="submitText"
-                    name="submit"
-                    :text="submitText"
-                    :primary="true"
-                    :disabled="submitDisabled || $attrs.disabled"
-                    type="submit"
-                  />
-                </template>
-              </div>
-            </form>
-          </div>
+              </slot>
+              <template v-else>
+                <KButton
+                  v-if="cancelText"
+                  name="cancel"
+                  :text="cancelText"
+                  appearance="flat-button"
+                  :disabled="cancelDisabled || $attrs.disabled"
+                  @click="emitCancelEvent"
+                />
+                <KButton
+                  v-if="submitText"
+                  name="submit"
+                  :text="submitText"
+                  :primary="true"
+                  :disabled="submitDisabled || $attrs.disabled"
+                  type="submit"
+                />
+              </template>
+            </div>
+          </form>
         </div>
-      </KFocusTrap>
+      </div>
     </transition>
   </component>
 
@@ -108,8 +106,6 @@
   import debounce from 'lodash/debounce';
   import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
-  cla;
-
   const SIZE_SM = 'small';
   const SIZE_MD = 'medium';
   const SIZE_LG = 'large';

From c831113719338ac45ecd33c0a2934bb9785b57b5 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sat, 12 Oct 2024 00:34:58 +0530
Subject: [PATCH 15/22] ..

---
 lib/KDateRange/index.vue | 102 +++++++++++------------
 lib/KModal.vue           | 170 ++++++++++++++++++++-------------------
 2 files changed, 135 insertions(+), 137 deletions(-)

diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index af57bcbb2..917cbb372 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -1,60 +1,58 @@
 <template>
 
-  <KFocusTrap>
-    <KModal
-      :cancelText="cancelText"
-      :title="title"
-      :submitText="submitText"
-      :size="modalSize"
-      :submitDisabled="disabled"
-      data-test="dateRangeModal"
-      @submit="onSubmit"
-      @cancel="$emit('cancel')"
-    >
-      <div>
-        <!-- @slot Description of modal -->
-        <slot name="description">
-          <p id="modal-description" ref="description" class="description">
-            {{ description }}
-          </p>
-        </slot>
-        <div class="date-inputs">
-          <div class="left-input">
-            <KDateInput
-              :value="dateRange.start"
-              inputRef="dateStartRangeInput"
-              :errorMessage="invalidStartErrorMessage"
-              :legendText="startDateLegendText"
-              data-test="startDate"
-              @updateDate="debouncedSetStartDate"
-            />
-          </div>
-          <div class="right-input">
-            <KDateInput
-              :value="dateRange.end"
-              inputRef="dateEndRangeInput"
-              :errorMessage="invalidEndErrorMessage"
-              :legendText="endDateLegendText"
-              data-test="endDate"
-              @updateDate="debouncedSetEndDate"
-            />
-          </div>
+  <KModal
+    :cancelText="cancelText"
+    :title="title"
+    :submitText="submitText"
+    :size="modalSize"
+    :submitDisabled="disabled"
+    data-test="dateRangeModal"
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <div>
+      <!-- @slot Description of modal -->
+      <slot name="description">
+        <p id="modal-description" ref="description" class="description">
+          {{ description }}
+        </p>
+      </slot>
+      <div class="date-inputs">
+        <div class="left-input">
+          <KDateInput
+            :value="dateRange.start"
+            inputRef="dateStartRangeInput"
+            :errorMessage="invalidStartErrorMessage"
+            :legendText="startDateLegendText"
+            data-test="startDate"
+            @updateDate="debouncedSetStartDate"
+          />
         </div>
-        <div>
-          <KDateCalendar
-            :firstAllowedDate="firstAllowedDate"
-            :lastAllowedDate="lastAllowedDate"
-            :selectedStartDate="createDate(dateRange.start)"
-            :selectedEndDate="createDate(dateRange.end)"
-            :previousMonthText="previousMonthText"
-            :nextMonthText="nextMonthText"
-            v-bind.sync="dateRange"
-            @updateSelectedDates="setSelectedDatesFromCalendar"
+        <div class="right-input">
+          <KDateInput
+            :value="dateRange.end"
+            inputRef="dateEndRangeInput"
+            :errorMessage="invalidEndErrorMessage"
+            :legendText="endDateLegendText"
+            data-test="endDate"
+            @updateDate="debouncedSetEndDate"
           />
         </div>
       </div>
-    </KModal>
-  </KFocusTrap>
+      <div>
+        <KDateCalendar
+          :firstAllowedDate="firstAllowedDate"
+          :lastAllowedDate="lastAllowedDate"
+          :selectedStartDate="createDate(dateRange.start)"
+          :selectedEndDate="createDate(dateRange.end)"
+          :previousMonthText="previousMonthText"
+          :nextMonthText="nextMonthText"
+          v-bind.sync="dateRange"
+          @updateSelectedDates="setSelectedDatesFromCalendar"
+        />
+      </div>
+    </div>
+  </KModal>
 
 </template>
 
@@ -66,7 +64,6 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
-  import KFocusTrap from '../KFocusTrap.vue';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -78,7 +75,6 @@
       KModal,
       KDateInput,
       KDateCalendar,
-      KFocusTrap,
     },
     props: {
       /**
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 71bb228b2..88728c450 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -3,98 +3,100 @@
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
-      <div
-        id="modal-window"
-        ref="modal-overlay"
-        class="modal-overlay"
-        @keyup.esc.stop="emitCancelEvent"
-        @keyup.enter="handleEnter"
-      >
-        <!-- KeenUiSelect targets modal by using div.modal selector -->
+      <KFocusTrap>
         <div
-          ref="modal"
-          class="modal"
-          :tabindex="0"
-          role="dialog"
-          aria-labelledby="modal-title"
-          :style="[
-            modalSizeStyles,
-            { background: $themeTokens.surface },
-            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-          ]"
+          id="modal-window"
+          ref="modal-overlay"
+          class="modal-overlay"
+          @keyup.esc.stop="emitCancelEvent"
+          @keyup.enter="handleEnter"
         >
-
-          <!-- Modal Title -->
-          <h1
-            id="modal-title"
-            ref="title"
-            class="title"
+          <!-- KeenUiSelect targets modal by using div.modal selector -->
+          <div
+            ref="modal"
+            class="modal"
+            :tabindex="0"
+            role="dialog"
+            aria-labelledby="modal-title"
+            :style="[
+              modalSizeStyles,
+              { background: $themeTokens.surface },
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+            ]"
           >
-            {{ title }}
-            <!-- Accessible error reporting per @radina -->
-            <span
-              v-if="hasError"
-              class="visuallyhidden"
+
+            <!-- Modal Title -->
+            <h1
+              id="modal-title"
+              ref="title"
+              class="title"
             >
-              {{ errorMessage }}
-            </span>
-          </h1>
-
-          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-          <form
-            class="form"
-            @submit.prevent="emitSubmitEvent"
-            @keyup.enter.stop
-          >
-            <!-- Wrapper for main content -->
-            <div
-              ref="content"
-              class="content"
-              :style="[ contentSectionMaxHeight, scrollShadow ? {
-                borderTop: `1px solid ${$themeTokens.fineLine}`,
-                borderBottom: `1px solid ${$themeTokens.fineLine}`,
-              } : {} ]"
-              :class="{
-                'scroll-shadow': scrollShadow,
-                'contains-kselect': containsKSelect
-              }"
+              {{ title }}
+              <!-- Accessible error reporting per @radina -->
+              <span
+                v-if="hasError"
+                class="visuallyhidden"
+              >
+                {{ errorMessage }}
+              </span>
+            </h1>
+
+            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <form
+              class="form"
+              @submit.prevent="emitSubmitEvent"
+              @keyup.enter.stop
             >
-              <!-- @slot Main content of modal -->
-              <slot></slot>
-            </div>
+              <!-- Wrapper for main content -->
+              <div
+                ref="content"
+                class="content"
+                :style="[ contentSectionMaxHeight, scrollShadow ? {
+                  borderTop: `1px solid ${$themeTokens.fineLine}`,
+                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                } : {} ]"
+                :class="{
+                  'scroll-shadow': scrollShadow,
+                  'contains-kselect': containsKSelect
+                }"
+              >
+                <!-- @slot Main content of modal -->
+                <slot></slot>
+              </div>
 
-            <div
-              ref="actions"
-              class="actions"
-            >
-              <!-- @slot Alternative buttons and actions below main content -->
-              <slot
-                v-if="$slots.actions"
-                name="actions"
+              <div
+                ref="actions"
+                class="actions"
               >
-              </slot>
-              <template v-else>
-                <KButton
-                  v-if="cancelText"
-                  name="cancel"
-                  :text="cancelText"
-                  appearance="flat-button"
-                  :disabled="cancelDisabled || $attrs.disabled"
-                  @click="emitCancelEvent"
-                />
-                <KButton
-                  v-if="submitText"
-                  name="submit"
-                  :text="submitText"
-                  :primary="true"
-                  :disabled="submitDisabled || $attrs.disabled"
-                  type="submit"
-                />
-              </template>
-            </div>
-          </form>
+                <!-- @slot Alternative buttons and actions below main content -->
+                <slot
+                  v-if="$slots.actions"
+                  name="actions"
+                >
+                </slot>
+                <template v-else>
+                  <KButton
+                    v-if="cancelText"
+                    name="cancel"
+                    :text="cancelText"
+                    appearance="flat-button"
+                    :disabled="cancelDisabled || $attrs.disabled"
+                    @click="emitCancelEvent"
+                  />
+                  <KButton
+                    v-if="submitText"
+                    name="submit"
+                    :text="submitText"
+                    :primary="true"
+                    :disabled="submitDisabled || $attrs.disabled"
+                    type="submit"
+                  />
+                </template>
+              </div>
+            </form>
+          </div>
         </div>
-      </div>
+      </KFocusTrap>
     </transition>
   </component>
 

From ee9c735c01d75d74aceed5599de4811377c16063 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sat, 12 Oct 2024 01:03:34 +0530
Subject: [PATCH 16/22] ..

---
 lib/KFocusTrap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index f61bc37a4..7c81bd5ac 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -75,4 +75,4 @@
     },
   };
 
-</script>
\ No newline at end of file
+</script>

From 0b16091c15b8671e068c5344dc421c2a129978af Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sun, 13 Oct 2024 18:08:54 +0530
Subject: [PATCH 17/22] add documentation

---
 docs/pages/kfocustrap.vue | 20 ++++++++++++++++++++
 docs/tableOfContents.js   |  5 +++++
 lib/KFocusTrap.vue        | 38 +++++++++++++++++++++++++++++++++-----
 3 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 docs/pages/kfocustrap.vue

diff --git a/docs/pages/kfocustrap.vue b/docs/pages/kfocustrap.vue
new file mode 100644
index 000000000..ea663f8e2
--- /dev/null
+++ b/docs/pages/kfocustrap.vue
@@ -0,0 +1,20 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+
+    <!-- Overview Section -->
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        The <code>KFocusTrap</code> component ensures that keyboard focus is trapped within a specific region of the page. 
+      </p>
+      <p>
+        When the <code>disabled</code> prop is set to <code>true</code>, focus trapping is disabled, allowing normal tab behavior. The focus trap moves the focus between the first and last elements in the slot content.
+      </p>
+
+    </DocsPageSection>
+
+
+  </DocsPageTemplate>
+
+</template>
+  
\ No newline at end of file
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index ae7ab9ee1..58877cc87 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -443,6 +443,11 @@ export default [
         isCode: true,
         keywords: cardRelatedKeywords,
       }),
+      new Page({
+        path: '/kfocustrap',
+        title: 'KFocusTrap',
+        isCode: true,
+      }),
     ],
   }),
 ];
diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index 7c81bd5ac..afcc84ad8 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div>
+    <!-- Focus trap starting point. If not disabled, focuses this first when tabbing. -->
     <div
       v-if="!disabled"
       class="focus-trap-first"
@@ -8,8 +9,10 @@
       @focus="handleFirstTrapFocus"
     ></div>
 
+    <!-- Default slot where the focusable content will be rendered -->
     <slot></slot>
 
+    <!-- Focus trap ending point. If not disabled, focuses this last when tabbing. -->
     <div
       v-if="!disabled"
       class="focus-trap-last"
@@ -19,9 +22,8 @@
   </div>
 
 </template>
-  
-  
-  <script>
+
+<script>
 
   /**
    * This component ensures that focus moves between the first element
@@ -33,6 +35,9 @@
   export default {
     name: 'KFocusTrap',
     props: {
+       * @type {Boolean}
+       * @default false
+       */
       disabled: {
         type: Boolean,
         required: false,
@@ -41,27 +46,43 @@
     },
     data() {
       return {
-        isTrapActive: false,
+        isTrapActive: false, // Tracks whether the focus trap is currently active
       };
     },
     methods: {
+      /**
+       * Called when the first focus trap element receives focus.
+       * If the trap is not yet active, redirects focus to the first element.
+       * Otherwise, redirects focus to the last element to enforce the loop.
+       * @param {Event} e - Focus event
+       */
       handleFirstTrapFocus(e) {
         e.stopPropagation();
         if (!this.isTrapActive) {
-          // On first focus, redirect to first option, then activate trap
           this.focusFirstEl();
           this.isTrapActive = true;
         } else {
           this.focusLastEl();
         }
       },
+      /**
+       * Called when the last focus trap element receives focus.
+       * Redirects focus to the first element, ensuring focus remains within the trap.
+       * @param {Event} e - Focus event
+       */
       handleLastTrapFocus(e) {
         e.stopPropagation();
         this.focusFirstEl();
       },
+      /**
+       * Emits an event to notify the parent component to focus the first element.
+       */
       focusFirstEl() {
         this.$emit('shouldFocusFirstEl');
       },
+      /**
+       * Emits an event to notify the parent component to focus the last element.
+       */
       focusLastEl() {
         this.$emit('shouldFocusLastEl');
       },
@@ -76,3 +97,10 @@
   };
 
 </script>
+
+<style scoped>
+  .focus-trap-first,
+  .focus-trap-last {
+    outline: none; /* Prevents focus outline */
+  }
+</style>

From db8facfda44b57705f01cb4921d031961f60465f Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Sun, 13 Oct 2024 18:09:16 +0530
Subject: [PATCH 18/22] Update KFocusTrap.vue

---
 lib/KFocusTrap.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index afcc84ad8..a32430ecb 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -35,6 +35,8 @@
   export default {
     name: 'KFocusTrap',
     props: {
+      /**
+       * Disables the focus trap when set to `true`. Focus will behave normally.
        * @type {Boolean}
        * @default false
        */

From d68e59ad01cbe6ac6f412a1bcc00b24b875146d1 Mon Sep 17 00:00:00 2001
From: lokesh-varma125 <lokesh.personal28@gmail.com>
Date: Tue, 22 Oct 2024 17:37:43 +0530
Subject: [PATCH 19/22] changes for the documentation page

---
 lib/KFocusTrap.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index a32430ecb..cec7134a6 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -9,8 +9,10 @@
       @focus="handleFirstTrapFocus"
     ></div>
 
-    <!-- Default slot where the focusable content will be rendered -->
-    <slot></slot>
+    <!--@slot Default slot where the focusable content will be rendered -->
+    <slot>
+     
+    </slot>
 
     <!-- Focus trap ending point. If not disabled, focuses this last when tabbing. -->
     <div
@@ -76,16 +78,18 @@
         e.stopPropagation();
         this.focusFirstEl();
       },
-      /**
-       * Emits an event to notify the parent component to focus the first element.
-       */
+
       focusFirstEl() {
+        /**
+         * Emits an event to notify the parent component to focus the first element.
+         */
         this.$emit('shouldFocusFirstEl');
       },
-      /**
-       * Emits an event to notify the parent component to focus the last element.
-       */
+
       focusLastEl() {
+        /**
+         * Emits an event to notify the parent component to focus the last element.
+         */
         this.$emit('shouldFocusLastEl');
       },
       /**

From c7bbe3587083ac8c6ecc2c6c9eb17b1f2d69d4ea Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Thu, 24 Oct 2024 18:42:46 +0530
Subject: [PATCH 20/22] Update lib/KFocusTrap.vue

Co-authored-by: Alex Velez <51239030+AlexVelezLl@users.noreply.github.com>
---
 lib/KFocusTrap.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index cec7134a6..f44be63ac 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -104,6 +104,7 @@
 
 </script>
 
+
 <style scoped>
   .focus-trap-first,
   .focus-trap-last {

From 46fa2a31c7829151f8099539ebfc09672c265f1b Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Thu, 24 Oct 2024 18:42:54 +0530
Subject: [PATCH 21/22] Update lib/KFocusTrap.vue

Co-authored-by: Alex Velez <51239030+AlexVelezLl@users.noreply.github.com>
---
 lib/KFocusTrap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index f44be63ac..ba6ef4bb3 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -11,7 +11,7 @@
 
     <!--@slot Default slot where the focusable content will be rendered -->
     <slot>
-     
+
     </slot>
 
     <!-- Focus trap ending point. If not disabled, focuses this last when tabbing. -->

From 90861484a60c720e3393cf975ef056b3b2141ae8 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Thu, 24 Oct 2024 18:43:03 +0530
Subject: [PATCH 22/22] Update lib/KFocusTrap.vue

Co-authored-by: Alex Velez <51239030+AlexVelezLl@users.noreply.github.com>
---
 lib/KFocusTrap.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index ba6ef4bb3..9fadf7eae 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -25,6 +25,7 @@
 
 </template>
 
+
 <script>
 
   /**