@indielayer/ui 1.3.0 → 1.5.0

package/src/components/table/theme/TableCell.base.theme.ts

@@ -19,7 +19,7 @@ const theme: TableCellTheme = {
       else if (props.verticalAlign === 'text-top') c.push('align-text-top')
       else if (props.verticalAlign === 'top') c.push('align-top')
 
-      if (props.truncate && props.fixed) c.push('truncate')
+      if (props.truncate) c.push('truncate')
 
       return c
     },

package/src/components/table/theme/TableCell.carbon.theme.ts

@@ -1,7 +1,29 @@
 import type { TableCellTheme } from '../TableCell.vue'
 
-import BaseTheme from './TableCell.base.theme'
+const theme: TableCellTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['last:pr-0 px-3']
 
-const theme: TableCellTheme = BaseTheme
+      c.push(props.dense ? 'py-2' : 'py-4')
+
+      if (props.textAlign === 'left') c.push('text-left')
+      else if (props.textAlign === 'center') c.push('text-center')
+      else if (props.textAlign === 'right') c.push('text-right')
+      else if (props.textAlign === 'justify') c.push('text-justify')
+
+      if (props.verticalAlign === 'baseline') c.push('align-baseline')
+      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+      else if (props.verticalAlign === 'middle') c.push('align-middle')
+      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+      else if (props.verticalAlign === 'top') c.push('align-top')
+
+      if (props.truncate) c.push('truncate')
+
+      return c
+    },
+  },
+}
 
 export default theme

package/src/components/table/theme/TableHead.base.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-sm text-secondary-600 dark:text-secondary-400 border-b',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHead.carbon.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-secondary-900 dark:text-secondary-50',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
+
+      if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-3 h-3 top-2.5 right-0.5']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-secondary-200 dark:bg-secondary-700 select-none']
+
+      if (props.sortable) classes.push('cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-600 transition-colors duration-150 ease-in-out pr-5')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-4 h-4 top-4 right-2']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableRow.base.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
+      } else {
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableRow.carbon.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
+      } else {
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/tag/Tag.vue

@@ -13,7 +13,7 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper'
 export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
 
 export default {
@@ -52,13 +52,13 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-secondary-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/tag/theme/Tag.base.theme.ts

@@ -13,19 +13,19 @@ const theme: TagTheme = {
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[100],
+      bg: color[200],
       text: color[800],
       border: color[800],
       dark: {
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -5,15 +5,13 @@ const theme: TagTheme = {
     wrapper: ({ props }) => {
       let c = 'inline-flex items-center leading-none max-w-full '
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
       else if (props.size === 'lg') c += ' px-4 py-3'
       else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
-      else c += ' px-3 py-2 text-sm'
+      else c += ' px-3 py-1 text-sm'
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
@@ -24,8 +22,9 @@ const theme: TagTheme = {
       text: color[800],
       border: color[800],
       dark: {
-        bg: color[700],
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/components/textarea/Textarea.vue

@@ -3,8 +3,6 @@ const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: 'ltr',
@@ -21,6 +19,7 @@ const textareaProps = {
   adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
+  resizable: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
@@ -91,6 +90,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -115,15 +115,17 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <textarea
+      :id="id"
       ref="elRef"
       class=""
       :style="style"
       :class="[
         classes.input,
         errorInternal
-          ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+          ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
           : 'focus:outline-[color:var(--x-textarea-border)]',
       ]"
       :disabled="disabled"
@@ -142,6 +144,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       @input="onInput"
     ></textarea>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -5,9 +5,10 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!props.resizable) classes.push('resize-none')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
       else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
@@ -16,8 +17,8 @@ const theme: TextareaTheme = {
       else classes.push('px-3 py-2')
 
       classes.push(props.disabled
-        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        ? 'bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed'
+        : 'bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       return classes
     },

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -5,20 +5,20 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
       else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
       else classes.push('py-2.5')
 
       if (props.disabled) {
-        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+        classes.push('bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed')
       } else if (props.readonly) {
-        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+        classes.push('bg-white dark:bg-secondary-900 text-secondary-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
       }
 
       return classes

package/src/components/toggle/Toggle.vue

@@ -4,9 +4,6 @@ const toggleProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  id: String,
-  label: String,
-  helper: String,
   glow: Boolean,
 }
 
@@ -53,6 +50,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   reset,
   validate,
   setError,
@@ -78,8 +76,8 @@ defineExpose({ focus, blur, reset, validate, setError })
         :style="styles"
         :class="{
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
-          'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
-          'bg-gray-100 dark:bg-gray-700': disabled || loading,
+          'bg-secondary-300 dark:bg-secondary-500': !disabled && !checked && !loading,
+          'bg-secondary-100 dark:bg-secondary-700': disabled || loading,
           'bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]': !disabled && checked,
         }"
       >
@@ -104,7 +102,7 @@ defineExpose({ focus, blur, reset, validate, setError })
                 'translate-x-full': checked,
                 'shadow': !disabled
               },
-              disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800'
+              disabled ? 'bg-secondary-50 dark:bg-secondary-800' : 'bg-white dark:bg-secondary-800'
             ]"
           ></div>
         </div>
@@ -119,6 +117,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/toggle/theme/Toggle.base.theme.ts

@@ -5,7 +5,7 @@ const theme: ToggleTheme = {
     wrapper: '',
 
     label: ({ props }) => {
-      const c = 'font-medium text-gray-800 dark:text-gray-200'
+      const c = 'font-medium text-secondary-800 dark:text-secondary-200'
 
       if (props.size === 'xs') return c + ' text-xs'
       else if (props.size === 'sm') return c + ' text-sm'

package/src/components/tooltip/ToggleTip.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+const toggleTipProps = {
+  content: String,
+  icon: String,
+}
+
+export type ToggleTipProps = ExtractPublicPropTypes<typeof toggleTipProps>
+
+export default { name: 'XToggleTip' }
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import XTooltip from './Tooltip.vue'
+import XIcon from '../icon/Icon.vue'
+
+import { infoIcon } from '../../common/icons'
+
+const props = defineProps(toggleTipProps)
+
+const computedIcon = computed(() => props.icon || infoIcon)
+</script>
+
+<template>
+  <x-tooltip placement="auto">
+    <x-icon :icon="computedIcon" class="text-secondary-500 dark:text-secondary-300 cursor-pointer" />
+    <template #tooltip>
+      <div v-html="content"></div>
+    </template>
+  </x-tooltip>
+</template>

package/src/components/tooltip/Tooltip.vue

@@ -1,5 +1,12 @@
 <script lang="ts">
-const tooltipProps = {}
+const tooltipProps = {
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom',
+  },
+}
+
+export type PopoverPlacement = Placement
 
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
 
@@ -7,17 +14,20 @@ export default { name: 'XTooltip' }
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import XPopover from '../../components/popover/Popover.vue'
 import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
+import { type Placement } from 'floating-vue'
+
+const props = defineProps(tooltipProps)
 </script>
 
 <template>
-  <x-popover :triggers="['hover']" class="inline-block">
+  <x-popover :triggers="['hover', 'click']" class="inline-block" :hide-arrow="false" :placement="placement">
     <slot></slot>
     <template #content>
       <div class="dark">
-        <x-popover-container class="p-2 text-white text-sm w-max max-w-xs">
+        <x-popover-container class="p-2 text-white text-xs w-max max-w-xs">
           <slot name="tooltip"></slot>
         </x-popover-container>
       </div>

package/src/components/tooltip/__tests__/ToggleTip.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleTip from '../ToggleTip.vue'
+
+describe('ToggleTip', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(ToggleTip)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/tooltip/index.ts

@@ -1,2 +1,5 @@
 export { default as XTooltip } from './Tooltip.vue'
 export type { TooltipProps } from './Tooltip.vue'
+
+export { default as XToggleTip } from './ToggleTip.vue'
+export type { ToggleTipProps } from './ToggleTip.vue'

package/src/composables/keys.ts

@@ -4,13 +4,17 @@ import type { TabGroupInjection } from '../components/tab/TabGroup.vue'
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 import type { IconInjection } from '../components/icon/Icon.vue'
+import type { FormGroupInjection } from '../components/formGroup'
+import type { AccordionInjection } from '../components/accordion'
 import type { UIOptions } from '../create'
 import type { UITheme } from '../theme'
 
 export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
 export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
-export const injectTabKey = Symbol() as InjectionKey<TabGroupInjection>
+export const injectTabGroupKey = Symbol() as InjectionKey<TabGroupInjection>
 export const injectFormKey = Symbol() as InjectionKey<FormInjection>
+export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
 export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
 export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionInjection>

package/src/composables/useColors.ts

@@ -33,7 +33,7 @@ export interface ColorComposition {
 const colorCache: ColorLibrary = {}
 
 const defaultColors = {
-  primary: tailwindColors.sky,
+  primary: tailwindColors.emerald,
   secondary: tailwindColors.slate,
   success: tailwindColors.green,
   warning: tailwindColors.yellow,

package/src/composables/useFocusTrap.ts

@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance } from 'vue'
+import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+
+const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
+
+export function useFocusTrap() {
+  let focusable: HTMLElement[] = []
+  let observer: MutationObserver | null = null
+
+  let firstFocusableEl: HTMLElement | null = null
+  let lastFocusableEl: HTMLElement | null = null
+
+  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    targetRef = unref(targetRef)
+
+    if (!targetRef) return
+
+    await nextTick()
+
+    getFocusableElements(targetRef)
+
+    if (firstFocusableEl) firstFocusableEl.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(targetRef))
+
+    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
+    else observer.observe(targetRef as Node, { childList: true, subtree: true })
+  }
+
+  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    if (targetRef === null) return
+
+    let elements
+
+    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
+    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+
+    focusable = Array.from(elements || []) as HTMLElement[]
+    firstFocusableEl = focusable[0] || null
+    lastFocusableEl = focusable[focusable.length - 1] || null
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      const isShiftPressed = event.shiftKey
+      const currentEl = document.activeElement as HTMLElement | null
+
+      if (!currentEl) {
+        event.preventDefault()
+        focusable[0]?.focus()
+
+        return
+      }
+
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      if (!isShiftPressed && currentEl === lastEl) {
+        event.preventDefault()
+        firstEl?.focus()
+      } else if (isShiftPressed && currentEl === firstEl) {
+        event.preventDefault()
+        lastEl?.focus()
+      }
+
+    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const previousEl = focusable[index - 1]
+
+      if (previousEl) {
+        previousEl.focus()
+      } else if (lastFocusableEl) {
+        lastFocusableEl.focus()
+      }
+
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const nextElement = focusable[index + 1]
+
+      if (nextElement) {
+        nextElement.focus()
+      } else if (firstFocusableEl) {
+        firstFocusableEl.focus()
+      }
+    }
+  }
+
+  const clearFocusTrap = () => {
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+  }
+
+  onUnmounted(() => {
+    clearFocusTrap()
+  })
+
+  return {
+    initFocusTrap,
+    clearFocusTrap,
+  }
+}