mgv-backoffice 1.23.0 → 1.25.0

package/src/components/BaseConfirmModal.vue

@@ -44,7 +44,7 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="[
           t.ghostButton,
           submitting ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
@@ -57,8 +57,9 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
         :class="[
+          variant === 'danger' ? 'focus-visible:ring-red-500' : 'focus-visible:ring-emerald-500',
           variant === 'danger'
             ? submitting ? 'bg-red-400 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 cursor-pointer'
             : submitting ? 'bg-emerald-400 cursor-not-allowed' : 'bg-emerald-600 hover:bg-emerald-700 cursor-pointer',

package/src/components/BaseCopyButton.vue

@@ -75,7 +75,7 @@ const ariaLabel = computed(() => (props.label ? `Copy ${props.label}` : 'Copy'))
 const buttonClass = computed(() => {
   if (props.variant === 'bordered') {
     const base =
-      'inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0'
+      'inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500'
     const state = copied.value
       ? isDark.value
         ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-400'
@@ -86,7 +86,7 @@ const buttonClass = computed(() => {
     return `${base} ${state}`
   }
   // ghost
-  const base = 'p-1 rounded transition-colors cursor-pointer'
+  const base = 'p-1 rounded transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500'
   const state = isDark.value
     ? 'text-gray-400 hover:text-emerald-300 hover:bg-emerald-500/10'
     : 'text-gray-500 hover:text-emerald-600 hover:bg-emerald-50'

package/src/components/BaseDropdown.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseDropdown from './BaseDropdown.vue'
+import type { DropdownOption } from '../types/dropdown'
+
+const options: DropdownOption[] = [
+  { value: '1', label: 'Alice' },
+  { value: '2', label: 'Bob', title: 'Bob the builder' },
+  { value: '3', label: 'Carol', disabled: true },
+]
+
+describe('BaseDropdown', () => {
+  it('shows the placeholder when nothing is selected', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: null, placeholder: 'Select Social User' },
+    })
+    const trigger = wrapper.get('button')
+    expect(trigger.text()).toContain('Select Social User')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+    // Menu is closed until the trigger is clicked.
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('shows the selected option label instead of the placeholder', () => {
+    const wrapper = mount(BaseDropdown, {
+      props: { options, modelValue: '2', placeholder: 'Select Social User' },
+    })
+    expect(wrapper.get('button').text()).toContain('Bob')
+    expect(wrapper.get('button').text()).not.toContain('Select Social User')
+  })
+
+  it('opens the menu and renders one row per option on click', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows.map((r) => r.text())).toEqual(['Alice', 'Bob', 'Carol'])
+    expect(rows[1].attributes('title')).toBe('Bob the builder')
+  })
+
+  it('emits update:modelValue and closes when a row is chosen', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['2']])
+    expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+  })
+
+  it('does not emit for a disabled row', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: null } })
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('[role="option"] button')[2].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('marks the selected row with aria-selected and the active fill', async () => {
+    const wrapper = mount(BaseDropdown, { props: { options, modelValue: '1' } })
+    await wrapper.get('button').trigger('click')
+    const rows = wrapper.findAll('[role="option"]')
+    expect(rows[0].attributes('aria-selected')).toBe('true')
+    expect(rows[1].attributes('aria-selected')).toBe('false')
+    expect(rows[0].get('button').classes()).toContain('bg-emerald-500')
+  })
+})

package/src/components/BaseDropdown.vue

@@ -0,0 +1,154 @@
+<template>
+  <!--
+    Button-style single-select dropdown ("Select Social User ⌄"). Unlike
+    BaseSelect (a themed native <select>), this renders a trigger button plus
+    a floating menu, so the closed control shows a placeholder and a chevron
+    that rotates while open — matching the app's filter dropdowns.
+
+    Options are passed as data (not <option> slots) so the menu rows can carry
+    tooltips and disabled state. Selecting a row emits its `value` and closes
+    the menu; Escape and an outside click also close it.
+
+    Same `dark:`-variant note as BaseSelect: the slate skin ships static
+    light/dark classes so consumers get both themes without extra config.
+  -->
+  <div
+    ref="rootEl"
+    :class="block ? 'relative w-full' : 'relative inline-block'"
+  >
+    <button
+      type="button"
+      :class="[triggerClass, block ? 'w-full' : '']"
+      :disabled="disabled"
+      :aria-label="ariaLabel || undefined"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <span :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+        {{ selectedOption ? selectedOption.label : placeholder }}
+      </span>
+      <ChevronDownIcon
+        class="w-5 h-5 shrink-0 text-slate-500 dark:text-slate-400 transition-transform"
+        :class="open ? 'rotate-180' : ''"
+        aria-hidden="true"
+      />
+    </button>
+
+    <ul
+      v-if="open"
+      role="listbox"
+      :aria-label="ariaLabel || placeholder"
+      class="absolute z-20 mt-1 w-full max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
+    >
+      <li
+        v-for="opt in options"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        :title="opt.title"
+      >
+        <button
+          type="button"
+          :disabled="opt.disabled"
+          :class="rowClass(opt)"
+          @click="select(opt)"
+        >
+          {{ opt.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { useEscapeKey } from '../composables/useEscapeKey'
+import type { DropdownOption } from '../types/dropdown'
+
+// NOT generic on purpose: vite-plugin-dts flattens SFC generics out of the
+// emitted declarations, so consumers would see the erased constraint anyway.
+// The update:modelValue payload is `any` so `v-model` on a union-typed ref
+// type-checks; the actual payload is always one of the options' values.
+interface Props {
+  options: readonly DropdownOption[]
+  modelValue?: string | number | null
+  /** Trigger text shown when nothing is selected. */
+  placeholder?: string
+  /** 'md' = px-4 py-2.5 (default, the app filter height); 'sm' = px-3 py-2. */
+  size?: 'sm' | 'md'
+  /** Full-width (w-full). Set false for an inline, content-width dropdown. */
+  block?: boolean
+  disabled?: boolean
+  /** Accessible name for the trigger/listbox when there is no visible label. */
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Select',
+  size: 'md',
+  block: true,
+  disabled: false,
+  ariaLabel: '',
+})
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+
+const selectedOption = computed(() =>
+  props.options.find((o) => o.value === props.modelValue) ?? null,
+)
+
+const triggerClass = computed(() => {
+  const padding = props.size === 'sm' ? 'px-3 py-2' : 'px-4 py-2.5'
+  return (
+    'flex items-center justify-between gap-2 rounded-lg border text-left text-sm transition-colors ' +
+    'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 ' +
+    'hover:bg-slate-50 dark:hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ' +
+    'cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ' +
+    padding
+  )
+})
+
+function rowClass(opt: DropdownOption): string {
+  const selected = opt.value === props.modelValue
+  const base =
+    'block w-full px-4 py-2 text-left text-sm transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed'
+  const fill = selected
+    ? 'bg-emerald-500 text-white'
+    : 'text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800'
+  return `${base} ${fill}`
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+}
+
+function select(opt: DropdownOption) {
+  if (opt.disabled) return
+  emit('update:modelValue', opt.value)
+  open.value = false
+}
+
+useEscapeKey(() => {
+  open.value = false
+})
+
+function onDocumentClick(e: MouseEvent) {
+  if (!open.value) return
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocumentClick))
+onBeforeUnmount(() => document.removeEventListener('click', onDocumentClick))
+</script>

package/src/components/BaseEntityPickerModal.vue

@@ -55,10 +55,12 @@
 
     <!-- Item list -->
     <div v-if="!loading && !loadError" class="mt-3 max-h-64 overflow-y-auto">
-      <div
+      <button
         v-for="item in filteredItems"
         :key="item.id"
-        class="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors"
+        type="button"
+        :aria-pressed="selectedId === item.id"
+        class="w-full text-left flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
         :class="[
           selectedId === item.id
             ? palette.selectedRow
@@ -81,7 +83,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
           </svg>
         </div>
-      </div>
+      </button>
 
       <!-- Empty states -->
       <div v-if="items.length === 0" class="text-center py-6">
@@ -100,7 +102,7 @@
       <button
         type="button"
         :disabled="submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="t.ghostButton"
         @click="handleCancel"
       >
@@ -109,7 +111,7 @@
       <button
         type="button"
         :disabled="!selectedId || submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="!selectedId || submitting ? palette.confirmDisabled : palette.confirmActive"
         @click="handleConfirm"
       >

package/src/components/BaseInput.vue

@@ -11,7 +11,7 @@
   <input
     :value="modelValue"
     :type="type"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm"
+    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm placeholder:text-slate-400 dark:placeholder:text-slate-500 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
     :class="[block ? 'w-full' : '', size === 'sm' ? 'px-2 py-1.5' : 'px-3 py-2']"
     @input="onInput"
   />

package/src/components/BaseNotFoundPage.vue

@@ -8,7 +8,7 @@
       <p class="text-lg mb-6" :class="t.dimTextAlt">{{ message }}</p>
       <button
         @click="goHome"
-        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors cursor-pointer"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="isDark ? 'bg-emerald-600 hover:bg-emerald-500' : 'bg-emerald-600 hover:bg-emerald-700'"
       >
         {{ homeLabel }}

package/src/components/BaseSegmentedControl.vue

@@ -75,12 +75,12 @@ const wrapClass = computed(() =>
 const buttonClass = computed(() => {
   if (props.variant === 'toolbar') {
     return (
-      'flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors ' +
+      'flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors cursor-pointer ' +
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500'
     )
   }
   const padding = props.variant === 'wide' ? 'px-4 py-2' : 'px-3 py-2'
-  return `${padding} text-sm font-medium transition-colors border-l first:border-l-0 border-slate-300 dark:border-slate-600`
+  return `${padding} text-sm font-medium transition-colors cursor-pointer border-l first:border-l-0 border-slate-300 dark:border-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500`
 })
 
 const activeFill = computed(() =>

package/src/components/BaseSelect.vue

@@ -7,7 +7,7 @@
   -->
   <select
     :value="modelValue"
-    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm"
+    class="rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
     :class="[block ? 'w-full' : '', size === 'md' ? 'px-3 py-2' : 'px-2 py-1.5']"
     @change="onChange"
   >

package/src/components/BaseSidebar.vue

@@ -94,7 +94,7 @@ function navigate(name: string) {
     <!-- Mobile top bar (hidden on desktop via scoped CSS to avoid flex/hidden conflict) -->
     <div class="mobile-topbar fixed top-0 inset-x-0 z-30 flex items-center justify-between px-4 py-3 border-b transition-colors"
       :class="isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'">
-      <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+      <button type="button" @click="goHome" class="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500" aria-label="Go to home">
         <!--
           `logo` slot: consumers drop their brand logo in here. Receives
           the current size hint so a logo component can scale to match.
@@ -104,7 +104,7 @@ function navigate(name: string) {
       <button
         type="button"
         @click="toggleMobile"
-        class="p-2 rounded-lg cursor-pointer"
+        class="p-2 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-600 hover:bg-gray-100'"
         :aria-label="mobileOpen ? 'Close navigation menu' : 'Open navigation menu'"
         :aria-expanded="mobileOpen"
@@ -138,7 +138,7 @@ function navigate(name: string) {
           class="px-5 pt-5 pb-4 flex items-center justify-center relative"
           :class="{ 'lg:px-2': isRail }"
         >
-          <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
+          <button type="button" @click="goHome" class="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500" aria-label="Go to home">
             <slot name="logo" :size="isRail ? 36 : 52" />
           </button>
           <button

package/src/components/BaseTextInputModal.vue

@@ -53,7 +53,7 @@
     <template #footer>
       <button
         type="button"
-        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium transition-colors duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
         :class="t.ghostButton"
         @click="handleCancel"
       >
@@ -62,7 +62,7 @@
       <button
         type="button"
         :disabled="!inputValue.trim() || submitting"
-        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150"
+        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
         :class="[
           !inputValue.trim() || submitting
             ? 'bg-emerald-400 cursor-not-allowed'

package/src/components/BaseToolbarButton.vue

@@ -21,7 +21,7 @@
     :type="type"
     :disabled="disabled"
     :title="title"
-    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
     :class="variantClass"
     @click="$emit('click', $event)"
   >

package/src/components/EuroAmount.vue

@@ -1,9 +1,9 @@
 <template>
-  <span v-if="hasAmount && shouldBeGreen" class="font-bold text-green-800">
+  <span v-if="hasAmount && shouldBeGreen" class="font-bold text-green-800 dark:text-green-400">
     {{ amount }} <span v-if="showCurrency">&euro;</span>
   </span>
 
-  <span v-if="hasAmount && !shouldBeGreen" :class="[baseClasses, shouldBeRed ? 'text-red-800' : 'text-gray-800']">
+  <span v-if="hasAmount && !shouldBeGreen" :class="[baseClasses, shouldBeRed ? 'text-red-800 dark:text-red-400' : 'text-gray-800 dark:text-gray-200']">
     {{ amount }} <span v-if="showCurrency">&euro;</span>
   </span>
 </template>

package/src/components/Pagination.test.ts

@@ -8,7 +8,7 @@ function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
 }
 
 async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
-  const link = wrapper.findAll('a').find(a => a.text().trim() === String(page))
+  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
   expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
   await link!.trigger('click')
 }
@@ -80,6 +80,6 @@ describe('Pagination', () => {
     await clickPage(wrapper, 7)
     await wrapper.setProps({ totalItems: 40 })
     expect(cellLabels(wrapper)).toEqual(['1', '2'])
-    expect(wrapper.find('a.active').text()).toBe('2')
+    expect(wrapper.find('button.active').text()).toBe('2')
   })
 })

package/src/components/Pagination.vue

@@ -1,20 +1,20 @@
 <template>
-  <div>
+  <nav aria-label="Pagination">
     <ul class="flex list-none p-0 m-0">
       <li v-for="(cell, index) in cells" :key="index" class="mr-1">
-        <a
+        <button
           v-if="cell !== 0"
-          role="button"
-          tabindex="0"
+          type="button"
+          :aria-current="cell === currentPage ? 'page' : undefined"
+          :aria-label="`Go to page ${cell}`"
           @click="changePage(cell)"
-          @keydown.enter="changePage(cell)"
-          class="inline-block border border-gray-300 rounded-lg p-3 no-underline text-black cursor-pointer hover:bg-gray-300"
-          :class="{ 'active font-bold bg-gray-200': cell === currentPage }"
-        >{{ cell }}</a>
-        <span v-else class="inline-block border border-gray-300 rounded-lg p-3 text-black cursor-not-allowed">...</span>
+          class="inline-block min-w-[44px] border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+          :class="{ 'active font-bold bg-gray-200 dark:bg-gray-700': cell === currentPage }"
+        >{{ cell }}</button>
+        <span v-else aria-hidden="true" class="inline-block border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-not-allowed">...</span>
       </li>
     </ul>
-  </div>
+  </nav>
 </template>
 
 <script lang="ts" setup>

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as BaseNotificationPanel } from './components/BaseNotificationP
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'
 export { default as BaseSelect } from './components/BaseSelect.vue'
+export { default as BaseDropdown } from './components/BaseDropdown.vue'
 export { default as BaseSegmentedControl } from './components/BaseSegmentedControl.vue'
 export { default as BaseTable } from './components/BaseTable.vue'
 export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
@@ -73,6 +74,7 @@ export type { EntityPickerItem } from './types/entityPicker'
 export type { LoginCredentials } from './types/auth'
 export type { NotificationItem } from './types/notification'
 export type { SegmentedOption } from './types/segmented'
+export type { DropdownOption } from './types/dropdown'
 export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
 

package/src/types/dropdown.ts

@@ -0,0 +1,14 @@
+/**
+ * One choice in a BaseDropdown. `value` is what the dropdown emits, `label`
+ * what the trigger and the menu row show; `title` becomes the row's tooltip
+ * and `disabled` makes the row unselectable.
+ *
+ * Generic so callers with union-typed values ('7D' | '30D' | …) keep full
+ * type-safety through v-model.
+ */
+export interface DropdownOption<T extends string | number = string | number> {
+  value: T
+  label: string
+  title?: string
+  disabled?: boolean
+}