@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaMenu.vue

@@ -1,605 +1,623 @@
-<template>
-  <div class="dm-menu" :class="{ 'dm-menu--disabled': disabled }">
-    <div
-      ref="triggerRef"
-      class="dm-menu__trigger"
-      :aria-expanded="isOpen"
-      :aria-haspopup="true"
-      :aria-controls="menuId"
-      @click="handleTriggerClick"
-      @keydown="handleTriggerKeydown"
-    >
-      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
-        <button
-          type="button"
-          class="dm-menu__button"
-          :disabled="disabled"
-        >
-          {{ triggerText }}
-          <svg
-            class="dm-menu__chevron"
-            :class="{ 'dm-menu__chevron--open': isOpen }"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
-      </slot>
-    </div>
-
-    <Teleport to="body">
-      <Transition
-        name="menu"
-        @enter="onEnter"
-        @leave="onLeave"
-      >
-        <div
-          v-if="isOpen"
-          ref="menuRef"
-          :id="menuId"
-          class="dm-menu__dropdown"
-          :class="[
-            `dm-menu__dropdown--${placement}`,
-            { 'dm-menu__dropdown--full-width': fullWidth }
-          ]"
-          :style="menuStyle"
-          role="menu"
-          :aria-labelledby="triggerId"
-          @keydown="handleMenuKeydown"
-          @click="handleMenuClick"
-        >
-          <div class="dm-menu__content">
-            <slot :close="close" :focusedIndex="focusedIndex">
-              <div
-                v-for="(item, index) in items"
-                :key="item.key || index"
-                class="dm-menu__item"
-                :class="{
-                  'dm-menu__item--focused': focusedIndex === index,
-                  'dm-menu__item--disabled': item.disabled,
-                  'dm-menu__item--divider': item.divider
-                }"
-                role="menuitem"
-                :tabindex="item.disabled ? -1 : 0"
-                :aria-disabled="item.disabled"
-                @click="handleItemClick(item, index)"
-                @mouseenter="focusedIndex = index"
-              >
-                <div v-if="item.divider" class="dm-menu__divider"></div>
-                <template v-else>
-                  <div v-if="item.icon" class="dm-menu__item-icon">
-                    <component :is="item.icon" />
-                  </div>
-                  <div class="dm-menu__item-content">
-                    <div class="dm-menu__item-label">{{ item.label }}</div>
-                    <div v-if="item.description" class="dm-menu__item-description">
-                      {{ item.description }}
-                    </div>
-                  </div>
-                  <div v-if="item.shortcut" class="dm-menu__item-shortcut">
-                    {{ item.shortcut }}
-                  </div>
-                </template>
-              </div>
-            </slot>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-    <!-- Backdrop for mobile -->
-    <Teleport to="body">
-      <Transition name="backdrop">
-        <div
-          v-if="isOpen && showBackdrop"
-          class="dm-menu__backdrop"
-          @click="close"
-        ></div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
-
-interface MenuItem {
-  key?: string
-  label?: string
-  description?: string
-  icon?: any
-  shortcut?: string
-  disabled?: boolean
-  divider?: boolean
-  action?: () => void
-}
-
-type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left' | 'right'
-
-interface Props {
-  items?: MenuItem[]
-  triggerText?: string
-  placement?: Placement
-  disabled?: boolean
-  fullWidth?: boolean
-  showBackdrop?: boolean
-  closeOnItemClick?: boolean
-  offset?: number
-}
-
-interface Emits {
-  (e: 'open'): void
-  (e: 'close'): void
-  (e: 'item-click', item: MenuItem, index: number): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  triggerText: 'Menu',
-  placement: 'bottom-start',
-  showBackdrop: false,
-  closeOnItemClick: true,
-  offset: 4
-})
-
-const emit = defineEmits<Emits>()
-
-// Refs
-const triggerRef = ref<HTMLElement>()
-const menuRef = ref<HTMLElement>()
-const isOpen = ref(false)
-const focusedIndex = ref(-1)
-
-// Computed
-const menuId = computed(() => `dm-menu-${Math.random().toString(36).substr(2, 9)}`)
-const triggerId = computed(() => `dm-menu-trigger-${Math.random().toString(36).substr(2, 9)}`)
-
-const menuStyle = ref<Record<string, string>>({})
-
-// const enabledItems = computed(() => 
-//   props.items.filter(item => !item.disabled && !item.divider)
-// )
-
-// Methods
-const calculatePosition = async () => {
-  if (!triggerRef.value || !menuRef.value) return
-
-  await nextTick()
-
-  const trigger = triggerRef.value.getBoundingClientRect()
-  const menu = menuRef.value.getBoundingClientRect()
-  const viewport = {
-    width: window.innerWidth,
-    height: window.innerHeight
-  }
-
-  let top = 0
-  let left = 0
-
-  // Calculate base position
-  switch (props.placement) {
-    case 'bottom-start':
-      top = trigger.bottom + props.offset
-      left = trigger.left
-      break
-    case 'bottom-end':
-      top = trigger.bottom + props.offset
-      left = trigger.right - menu.width
-      break
-    case 'top-start':
-      top = trigger.top - menu.height - props.offset
-      left = trigger.left
-      break
-    case 'top-end':
-      top = trigger.top - menu.height - props.offset
-      left = trigger.right - menu.width
-      break
-    case 'left':
-      top = trigger.top
-      left = trigger.left - menu.width - props.offset
-      break
-    case 'right':
-      top = trigger.top
-      left = trigger.right + props.offset
-      break
-  }
-
-  // Viewport boundary checks
-  if (left < 8) {
-    left = 8
-  } else if (left + menu.width > viewport.width - 8) {
-    left = viewport.width - menu.width - 8
-  }
-
-  if (top < 8) {
-    top = 8
-  } else if (top + menu.height > viewport.height - 8) {
-    top = viewport.height - menu.height - 8
-  }
-
-  const width = props.fullWidth ? `${trigger.width}px` : 'auto'
-
-  menuStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    width,
-    zIndex: '9999'
-  }
-}
-
-const open = async () => {
-  if (props.disabled || isOpen.value) return
-
-  isOpen.value = true
-  focusedIndex.value = -1
-  emit('open')
-  
-  await calculatePosition()
-  
-  // Focus first enabled item
-  nextTick(() => {
-    const firstEnabledIndex = props.items.findIndex(item => !item.disabled && !item.divider)
-    if (firstEnabledIndex !== -1) {
-      focusedIndex.value = firstEnabledIndex
-    }
-  })
-}
-
-const close = () => {
-  if (!isOpen.value) return
-
-  isOpen.value = false
-  focusedIndex.value = -1
-  emit('close')
-  
-  // Return focus to trigger
-  nextTick(() => {
-    triggerRef.value?.focus()
-  })
-}
-
-const toggle = () => {
-  if (isOpen.value) {
-    close()
-  } else {
-    open()
-  }
-}
-
-const handleTriggerClick = () => {
-  toggle()
-}
-
-const handleTriggerKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case 'Enter':
-    case ' ':
-    case 'ArrowDown':
-      event.preventDefault()
-      open()
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      open()
-      // Focus last item
-      nextTick(() => {
-        const lastEnabledIndex = props.items.map((item, index) => ({ item, index }))
-          .filter(({ item }) => !item.disabled && !item.divider)
-          .pop()?.index ?? -1
-        if (lastEnabledIndex !== -1) {
-          focusedIndex.value = lastEnabledIndex
-        }
-      })
-      break
-    case 'Escape':
-      close()
-      break
-  }
-}
-
-const handleMenuKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault()
-      focusNext()
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      focusPrevious()
-      break
-    case 'Enter':
-    case ' ':
-      event.preventDefault()
-      if (focusedIndex.value !== -1) {
-        const item = props.items[focusedIndex.value]
-        handleItemClick(item, focusedIndex.value)
-      }
-      break
-    case 'Escape':
-      event.preventDefault()
-      close()
-      break
-    case 'Tab':
-      close()
-      break
+<template>
+  <div class="dm-menu" :class="{ 'dm-menu--disabled': disabled }">
+    <div
+      ref="triggerRef"
+      class="dm-menu__trigger"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      :aria-controls="menuId"
+      @click="handleTriggerClick"
+      @keydown="handleTriggerKeydown"
+    >
+      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
+        <button
+          type="button"
+          class="dm-menu__button"
+          :disabled="disabled"
+        >
+          {{ triggerText }}
+          <svg
+            class="dm-menu__chevron"
+            :class="{ 'dm-menu__chevron--open': isOpen }"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </slot>
+    </div>
+
+    <Teleport to="body">
+      <Transition
+        name="menu"
+        @enter="onEnter"
+        @leave="onLeave"
+      >
+        <div
+          v-if="isOpen"
+          ref="menuRef"
+          :id="menuId"
+          class="dm-menu__dropdown"
+          :class="[
+            `dm-menu__dropdown--${placement}`,
+            { 'dm-menu__dropdown--full-width': fullWidth }
+          ]"
+          :style="menuStyle"
+          role="menu"
+          :aria-labelledby="triggerId"
+          @keydown="handleMenuKeydown"
+          @click="handleMenuClick"
+        >
+          <div class="dm-menu__content">
+            <slot :close="close" :focusedIndex="focusedIndex">
+              <div
+                v-for="(item, index) in items"
+                :key="item.key || index"
+                class="dm-menu__item"
+                :class="{
+                  'dm-menu__item--focused': focusedIndex === index,
+                  'dm-menu__item--disabled': item.disabled,
+                  'dm-menu__item--divider': item.divider
+                }"
+                role="menuitem"
+                :tabindex="item.disabled ? -1 : 0"
+                :aria-disabled="item.disabled"
+                @click="handleItemClick(item, index)"
+                @mouseenter="focusedIndex = index"
+              >
+                <div v-if="item.divider" class="dm-menu__divider"></div>
+                <template v-else>
+                  <div v-if="item.icon" class="dm-menu__item-icon">
+                    <component :is="item.icon" />
+                  </div>
+                  <div class="dm-menu__item-content">
+                    <div class="dm-menu__item-label">{{ item.label }}</div>
+                    <div v-if="item.description" class="dm-menu__item-description">
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div v-if="item.shortcut" class="dm-menu__item-shortcut">
+                    {{ item.shortcut }}
+                  </div>
+                </template>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Backdrop for mobile -->
+    <Teleport to="body">
+      <Transition name="backdrop">
+        <div
+          v-if="isOpen && showBackdrop"
+          class="dm-menu__backdrop"
+          @click="close"
+        ></div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+
+interface MenuItem {
+  key?: string
+  label?: string
+  description?: string
+  icon?: any
+  shortcut?: string
+  disabled?: boolean
+  divider?: boolean
+  action?: () => void
+}
+
+type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left' | 'right'
+
+interface Props {
+  items?: MenuItem[]
+  triggerText?: string
+  placement?: Placement
+  disabled?: boolean
+  fullWidth?: boolean
+  showBackdrop?: boolean
+  closeOnItemClick?: boolean
+  offset?: number
+}
+
+interface Emits {
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'item-click', item: MenuItem, index: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  triggerText: 'Menu',
+  placement: 'bottom-start',
+  showBackdrop: false,
+  closeOnItemClick: true,
+  offset: 4
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const triggerRef = ref<HTMLElement>()
+const menuRef = ref<HTMLElement>()
+const isOpen = ref(false)
+const focusedIndex = ref(-1)
+
+// Computed
+const menuId = computed(() => `dm-menu-${Math.random().toString(36).substr(2, 9)}`)
+const triggerId = computed(() => `dm-menu-trigger-${Math.random().toString(36).substr(2, 9)}`)
+
+const menuStyle = ref<Record<string, string>>({})
+
+// const enabledItems = computed(() => 
+//   props.items.filter(item => !item.disabled && !item.divider)
+// )
+
+// Methods
+const calculatePosition = async () => {
+  if (!triggerRef.value || !menuRef.value) return
+
+  await nextTick()
+
+  const trigger = triggerRef.value.getBoundingClientRect()
+  const menu = menuRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  let top = 0
+  let left = 0
+
+  // Calculate base position
+  switch (props.placement) {
+    case 'bottom-start':
+      top = trigger.bottom + props.offset
+      left = trigger.left
+      break
+    case 'bottom-end':
+      top = trigger.bottom + props.offset
+      left = trigger.right - menu.width
+      break
+    case 'top-start':
+      top = trigger.top - menu.height - props.offset
+      left = trigger.left
+      break
+    case 'top-end':
+      top = trigger.top - menu.height - props.offset
+      left = trigger.right - menu.width
+      break
+    case 'left':
+      top = trigger.top
+      left = trigger.left - menu.width - props.offset
+      break
+    case 'right':
+      top = trigger.top
+      left = trigger.right + props.offset
+      break
+  }
+
+  // Viewport boundary checks
+  if (left < 8) {
+    left = 8
+  } else if (left + menu.width > viewport.width - 8) {
+    left = viewport.width - menu.width - 8
+  }
+
+  if (top < 8) {
+    top = 8
+  } else if (top + menu.height > viewport.height - 8) {
+    top = viewport.height - menu.height - 8
+  }
+
+  const width = props.fullWidth ? `${trigger.width}px` : 'auto'
+
+  menuStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width,
+    zIndex: '9999'
+  }
+}
+
+const open = async () => {
+  if (props.disabled || isOpen.value) return
+
+  isOpen.value = true
+  focusedIndex.value = -1
+  emit('open')
+  
+  await calculatePosition()
+  
+  // Focus first enabled item
+  nextTick(() => {
+    const firstEnabledIndex = props.items.findIndex(item => !item.disabled && !item.divider)
+    if (firstEnabledIndex !== -1) {
+      focusedIndex.value = firstEnabledIndex
+    }
+  })
+}
+
+const close = () => {
+  if (!isOpen.value) return
+
+  isOpen.value = false
+  focusedIndex.value = -1
+  emit('close')
+  
+  // Return focus to trigger
+  nextTick(() => {
+    triggerRef.value?.focus()
+  })
+}
+
+const toggle = () => {
+  if (isOpen.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+const handleTriggerClick = () => {
+  toggle()
+}
+
+const handleTriggerKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'Enter':
+    case ' ':
+    case 'ArrowDown':
+      event.preventDefault()
+      open()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      open()
+      // Focus last item
+      nextTick(() => {
+        const lastEnabledIndex = props.items.map((item, index) => ({ item, index }))
+          .filter(({ item }) => !item.disabled && !item.divider)
+          .pop()?.index ?? -1
+        if (lastEnabledIndex !== -1) {
+          focusedIndex.value = lastEnabledIndex
+        }
+      })
+      break
+    case 'Escape':
+      close()
+      break
+  }
+}
+
+const handleMenuKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusNext()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusPrevious()
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      if (focusedIndex.value !== -1) {
+        const item = props.items[focusedIndex.value]
+        handleItemClick(item, focusedIndex.value)
+      }
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      break
+    case 'Tab':
+      close()
+      break
+  }
+}
+
+const focusNext = () => {
+  const enabledIndices = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled && !item.divider)
+    .map(({ index }) => index)
+
+  if (enabledIndices.length === 0) return
+
+  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
+  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledIndices.length
+  focusedIndex.value = enabledIndices[nextIndex]
+}
+
+const focusPrevious = () => {
+  const enabledIndices = props.items
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.disabled && !item.divider)
+    .map(({ index }) => index)
+
+  if (enabledIndices.length === 0) return
+
+  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
+  const prevIndex = currentIndex === -1 ? enabledIndices.length - 1 : (currentIndex - 1 + enabledIndices.length) % enabledIndices.length
+  focusedIndex.value = enabledIndices[prevIndex]
+}
+
+const handleItemClick = (item: MenuItem, index: number) => {
+  if (item.disabled || item.divider) return
+
+  emit('item-click', item, index)
+  
+  if (item.action) {
+    item.action()
+  }
+
+  if (props.closeOnItemClick) {
+    close()
+  }
+}
+
+const handleMenuClick = (event: Event) => {
+  event.stopPropagation()
+}
+
+const onEnter = () => {
+  calculatePosition()
+}
+
+const onLeave = () => {
+  menuStyle.value = {}
+}
+
+// Handle clicks outside
+const handleClickOutside = (event: Event) => {
+  if (!isOpen.value) return
+
+  const target = event.target as Node
+  if (
+    triggerRef.value?.contains(target) ||
+    menuRef.value?.contains(target)
+  ) {
+    return
+  }
+
+  close()
+}
+
+// Handle window resize
+const handleResize = () => {
+  if (isOpen.value) {
+    calculatePosition()
+  }
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('resize', handleResize)
+})
+
+// Watch for items changes
+watch(() => props.items, () => {
+  if (focusedIndex.value >= props.items.length) {
+    focusedIndex.value = -1
+  }
+})
+
+// Expose methods
+defineExpose({
+  open,
+  close,
+  toggle,
+  isOpen: computed(() => isOpen.value)
+})
+</script>
+
+<style scoped>
+.dm-menu {
+  @apply relative inline-block;
+}
+
+.dm-menu--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.dm-menu__trigger {
+  @apply inline-block;
+}
+
+.dm-menu__button {
+  @apply inline-flex items-center justify-between text-sm font-medium;
+  @apply focus:outline-none disabled:cursor-not-allowed;
+  
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
+  background-color: var(--dm-neutral-50, #ffffff);
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  color: var(--dm-neutral-900, #111827);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  box-shadow: var(--dm-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  transition: all 0.2s ease;
+}
+
+.dm-menu__button:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--dm-neutral-50, #ffffff) 95%, var(--dm-neutral-900, #111827) 5%);
+}
+
+.dm-menu__button:focus {
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.dm-menu__button:disabled {
+  opacity: 0.5;
+}
+
+.dm-menu__chevron {
+  @apply w-4 h-4;
+  margin-left: var(--dm-spacing-2, 0.5rem);
+  transition: transform 0.2s ease;
+}
+
+.dm-menu__chevron--open {
+  @apply transform rotate-180;
+}
+
+.dm-menu__dropdown {
+  @apply min-w-48 max-w-xs;
+  
+  background-color: var(--dm-neutral-50, #ffffff);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+}
+
+.dm-menu__content {
+  padding: var(--dm-spacing-1, 0.25rem) 0;
+}
+
+.dm-menu__item {
+  @apply flex items-center cursor-pointer focus:outline-none;
+  
+  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
+  color: var(--dm-neutral-900, #111827);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  transition: background-color 0.15s ease;
+}
+
+.dm-menu__item:hover:not(.dm-menu__item--disabled) {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-menu__item--focused {
+  background-color: var(--dm-neutral-100, #f3f4f6);
+}
+
+.dm-menu__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dm-menu__item--disabled:hover,
+.dm-menu__item--disabled:focus {
+  background-color: transparent;
+}
+
+.dm-menu__item--divider {
+  @apply p-0 cursor-default;
+}
+
+.dm-menu__divider {
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  margin: var(--dm-spacing-1, 0.25rem) 0;
+}
+
+.dm-menu__item-icon {
+  @apply w-4 h-4 mr-3 flex-shrink-0;
+}
+
+.dm-menu__item-content {
+  @apply flex-1 min-w-0;
+}
+
+.dm-menu__item-label {
+  @apply font-medium;
+}
+
+.dm-menu__item-description {
+  color: var(--dm-neutral-500, #6b7280);
+  font-size: var(--dm-font-size-xs, 0.75rem);
+  margin-top: 0.125rem;
+}
+
+.dm-menu__item-shortcut {
+  @apply flex-shrink-0;
+  color: var(--dm-neutral-400, #9ca3af);
+  font-size: var(--dm-font-size-xs, 0.75rem);
+  margin-left: var(--dm-spacing-4, 1rem);
+}
+
+.dm-menu__backdrop {
+  @apply fixed inset-0 bg-black bg-opacity-25 z-40;
+}
+
+/* Transitions */
+.menu-enter-active,
+.menu-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.backdrop-enter-active,
+.backdrop-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.backdrop-enter-from,
+.backdrop-leave-to {
+  opacity: 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .dm-menu__chevron,
+  .dm-menu__item,
+  .menu-enter-active,
+  .menu-leave-active,
+  .backdrop-enter-active,
+  .backdrop-leave-active {
+    transition: none;
+  }
+}
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  .dm-menu__dropdown {
+    @apply max-w-none;
+    width: calc(100vw - 2rem);
+  }
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-menu {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-const focusNext = () => {
-  const enabledIndices = props.items
-    .map((item, index) => ({ item, index }))
-    .filter(({ item }) => !item.disabled && !item.divider)
-    .map(({ index }) => index)
-
-  if (enabledIndices.length === 0) return
-
-  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
-  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledIndices.length
-  focusedIndex.value = enabledIndices[nextIndex]
-}
-
-const focusPrevious = () => {
-  const enabledIndices = props.items
-    .map((item, index) => ({ item, index }))
-    .filter(({ item }) => !item.disabled && !item.divider)
-    .map(({ index }) => index)
-
-  if (enabledIndices.length === 0) return
-
-  const currentIndex = enabledIndices.indexOf(focusedIndex.value)
-  const prevIndex = currentIndex === -1 ? enabledIndices.length - 1 : (currentIndex - 1 + enabledIndices.length) % enabledIndices.length
-  focusedIndex.value = enabledIndices[prevIndex]
-}
-
-const handleItemClick = (item: MenuItem, index: number) => {
-  if (item.disabled || item.divider) return
-
-  emit('item-click', item, index)
-  
-  if (item.action) {
-    item.action()
-  }
-
-  if (props.closeOnItemClick) {
-    close()
-  }
-}
-
-const handleMenuClick = (event: Event) => {
-  event.stopPropagation()
-}
-
-const onEnter = () => {
-  calculatePosition()
-}
-
-const onLeave = () => {
-  menuStyle.value = {}
-}
-
-// Handle clicks outside
-const handleClickOutside = (event: Event) => {
-  if (!isOpen.value) return
-
-  const target = event.target as Node
-  if (
-    triggerRef.value?.contains(target) ||
-    menuRef.value?.contains(target)
-  ) {
-    return
-  }
-
-  close()
-}
-
-// Handle window resize
-const handleResize = () => {
-  if (isOpen.value) {
-    calculatePosition()
-  }
-}
-
-// Lifecycle
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  window.removeEventListener('resize', handleResize)
-})
-
-// Watch for items changes
-watch(() => props.items, () => {
-  if (focusedIndex.value >= props.items.length) {
-    focusedIndex.value = -1
-  }
-})
-
-// Expose methods
-defineExpose({
-  open,
-  close,
-  toggle,
-  isOpen: computed(() => isOpen.value)
-})
-</script>
-
-<style scoped>
-.dm-menu {
-  @apply relative inline-block;
-}
-
-.dm-menu--disabled {
-  @apply opacity-60 cursor-not-allowed;
-}
-
-.dm-menu__trigger {
-  @apply inline-block;
-}
-
-.dm-menu__button {
-  @apply inline-flex items-center justify-between text-sm font-medium;
-  @apply focus:outline-none disabled:cursor-not-allowed;
-  
-  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
-  background-color: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  box-shadow: var(--dm-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-  transition: all 0.2s ease;
-}
-
-.dm-menu__button:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--dm-neutral-50, #ffffff) 95%, var(--dm-neutral-900, #111827) 5%);
-}
-
-.dm-menu__button:focus {
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.dm-menu__button:disabled {
-  opacity: 0.5;
-}
-
-.dm-menu__chevron {
-  @apply w-4 h-4;
-  margin-left: var(--dm-spacing-2, 0.5rem);
-  transition: transform 0.2s ease;
-}
-
-.dm-menu__chevron--open {
-  @apply transform rotate-180;
-}
-
-.dm-menu__dropdown {
-  @apply min-w-48 max-w-xs;
-  
-  background-color: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-}
-
-.dm-menu__content {
-  padding: var(--dm-spacing-1, 0.25rem) 0;
-}
-
-.dm-menu__item {
-  @apply flex items-center cursor-pointer focus:outline-none;
-  
-  padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  transition: background-color 0.15s ease;
-}
-
-.dm-menu__item:hover:not(.dm-menu__item--disabled) {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-menu__item--focused {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-menu__item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.dm-menu__item--disabled:hover,
-.dm-menu__item--disabled:focus {
-  background-color: transparent;
-}
-
-.dm-menu__item--divider {
-  @apply p-0 cursor-default;
-}
-
-.dm-menu__divider {
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-  margin: var(--dm-spacing-1, 0.25rem) 0;
-}
-
-.dm-menu__item-icon {
-  @apply w-4 h-4 mr-3 flex-shrink-0;
-}
-
-.dm-menu__item-content {
-  @apply flex-1 min-w-0;
-}
-
-.dm-menu__item-label {
-  @apply font-medium;
-}
-
-.dm-menu__item-description {
-  color: var(--dm-neutral-500, #6b7280);
-  font-size: var(--dm-font-size-xs, 0.75rem);
-  margin-top: 0.125rem;
-}
-
-.dm-menu__item-shortcut {
-  @apply flex-shrink-0;
-  color: var(--dm-neutral-400, #9ca3af);
-  font-size: var(--dm-font-size-xs, 0.75rem);
-  margin-left: var(--dm-spacing-4, 1rem);
-}
-
-.dm-menu__backdrop {
-  @apply fixed inset-0 bg-black bg-opacity-25 z-40;
-}
-
-/* Transitions */
-.menu-enter-active,
-.menu-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.menu-enter-from,
-.menu-leave-to {
-  opacity: 0;
-  transform: scale(0.95) translateY(-10px);
-}
-
-.backdrop-enter-active,
-.backdrop-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.backdrop-enter-from,
-.backdrop-leave-to {
-  opacity: 0;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .dm-menu__chevron,
-  .dm-menu__item,
-  .menu-enter-active,
-  .menu-leave-active,
-  .backdrop-enter-active,
-  .backdrop-leave-active {
-    transition: none;
-  }
-}
-
-/* Mobile optimizations */
-@media (max-width: 640px) {
-  .dm-menu__dropdown {
-    @apply max-w-none;
-    width: calc(100vw - 2rem);
-  }
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-menu {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
 </style>