mgv-backoffice 1.24.0 → 1.27.0

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "mgv-backoffice",
-  "version": "1.24.0",
-  "description": "Shared Vue 3 UI component library",
-  "type": "module",
-  "main": "./dist/ui-lib.umd.cjs",
-  "module": "./dist/ui-lib.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/ui-lib.js",
-      "require": "./dist/ui-lib.umd.cjs"
-    },
-    "./dist/style.css": "./dist/ui-lib.css",
-    "./tailwind.safelist": "./tailwind.safelist.js",
-    "./tailwind.safelist.css": "./tailwind.safelist.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "tailwind.safelist.js",
-    "tailwind.safelist.css"
-  ],
-  "scripts": {
-    "safelist": "node scripts/generate-safelist.mjs",
-    "prebuild": "npm run safelist",
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "peerDependencies": {
-    "@heroicons/vue": "^2.0.0",
-    "vue": "^3.5.0",
-    "vue-router": "^5.0.0"
-  },
-  "devDependencies": {
-    "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.3.1",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/language-core": "^3.3.5",
-    "@vue/test-utils": "^2.4.11",
-    "jsdom": "^29.1.1",
-    "sass": "^1.101.0",
-    "tailwindcss": "^4.3.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0"
-  }
-}
+{
+  "name": "mgv-backoffice",
+  "version": "1.27.0",
+  "description": "Shared Vue 3 UI component library",
+  "type": "module",
+  "main": "./dist/ui-lib.umd.cjs",
+  "module": "./dist/ui-lib.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui-lib.js",
+      "require": "./dist/ui-lib.umd.cjs"
+    },
+    "./dist/style.css": "./dist/ui-lib.css",
+    "./tailwind.safelist": "./tailwind.safelist.js",
+    "./tailwind.safelist.css": "./tailwind.safelist.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.safelist.js",
+    "tailwind.safelist.css"
+  ],
+  "scripts": {
+    "safelist": "node scripts/generate-safelist.mjs",
+    "prebuild": "npm run safelist",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@heroicons/vue": "^2.0.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0"
+  },
+  "devDependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/language-core": "^3.3.5",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "sass": "^1.101.0",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
+  }
+}

package/src/components/BaseActionButton.vue

@@ -25,7 +25,7 @@
     :disabled="disabled"
     :title="title"
     :aria-label="ariaLabel"
-    class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+    class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current"
     :class="[fullWidth ? 'flex-1' : '', stateClass]"
     @click="$emit('click', $event)"
   >

package/src/components/BaseBreadcrumb.vue

@@ -3,7 +3,7 @@
     <ol class="inline-flex items-center space-x-1 md:space-x-3">
 
       <li class="inline-flex items-center" style="margin-left: 0;">
-        <router-link to="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
+        <router-link to="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
           <HomeIcon class="h-4 w-4 text-gray-500 mr-2" />
           Home
         </router-link>
@@ -11,7 +11,7 @@
 
       <li v-for="(crumb, index) in crumbs" :key="index" class="inline-flex items-center" style="margin-left: 0;">
         <ChevronRightIcon class="h-4 w-4 text-gray-500" />
-        <router-link :to="crumb.url" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">
+        <router-link :to="crumb.url" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white transition-colors rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500">
           {{ crumb.name }}
         </router-link>
       </li>

package/src/components/BaseButton.vue

@@ -139,7 +139,7 @@ function outlineCss() {
   const isDisabled = props.isDisable || props.isLoading;
   return isDisabled
     ? `border bg-transparent ${tone} opacity-50 cursor-not-allowed`
-    : `focus:outline-none border bg-transparent ${tone}`;
+    : `focus:outline-none focus-visible:ring-2 focus-visible:ring-current border bg-transparent ${tone}`;
 }
 
 // Per-colour ghost palette: borderless, transparent fill, coloured text,
@@ -198,12 +198,13 @@ function ghostCss() {
   const isDisabled = props.isDisable || props.isLoading;
   return isDisabled
     ? `bg-transparent ${tone} opacity-60 cursor-not-allowed`
-    : `focus:outline-none bg-transparent ${tone} cursor-pointer`;
+    : `focus:outline-none focus-visible:ring-2 focus-visible:ring-current bg-transparent ${tone} cursor-pointer`;
 }
 
 function computeCss() {
   const isDisabled = props.isDisable || props.isLoading;
-  let commonCss = "inline-flex items-center";
+  let commonCss = "inline-flex items-center transition-colors duration-150";
+  if (!isDisabled) { commonCss += " cursor-pointer"; }
   let css;
   switch (props.color) {
     case BaseButtonEnum.BLUE: {

package/src/components/BaseCollapsibleSection.vue

@@ -18,11 +18,17 @@
       • toggle — fired when the user clicks the header. The parent
         flips its own collapsed state in response.
   -->
-  <section class="rounded-xl border overflow-hidden transition-colors" :class="t.cardAlt">
+  <!--
+    NOTE: no `overflow-hidden` on the section — it would clip floating
+    menus (BaseDropdown) rendered near the bottom of the body. The child
+    corners are rounded explicitly instead so the card silhouette is
+    unchanged.
+  -->
+  <section class="rounded-xl border transition-colors" :class="t.cardAlt">
     <button
       type="button"
-      class="w-full flex items-center justify-between p-4 text-left transition-colors"
-      :class="headerClasses"
+      class="w-full flex items-center justify-between p-4 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
+      :class="[headerClasses, collapsed ? 'rounded-xl' : 'rounded-t-xl']"
       :aria-expanded="!collapsed"
       @click="emit('toggle')"
     >
@@ -50,7 +56,7 @@
     </button>
     <div
       v-show="!collapsed"
-      class="p-6 border-t"
+      class="p-6 border-t rounded-b-xl"
       :class="[t.border, resolvedBodyClass]"
     >
       <slot />

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.vue

@@ -25,7 +25,9 @@
       :aria-expanded="open"
       @click="toggle"
     >
-      <span :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+      <!-- min-w-0 + truncate so long labels ellipsize inside narrow
+           (fixed-column) triggers instead of wrapping or widening them. -->
+      <span class="min-w-0 truncate" :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
         {{ selectedOption ? selectedOption.label : placeholder }}
       </span>
       <ChevronDownIcon
@@ -39,7 +41,7 @@
       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"
+      class="absolute z-20 mt-1 w-full min-w-max max-w-xs 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"
@@ -112,7 +114,7 @@ const triggerClass = computed(() => {
     '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 ' +
-    'disabled:opacity-50 disabled:cursor-not-allowed ' +
+    'cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ' +
     padding
   )
 })
@@ -120,7 +122,7 @@ const triggerClass = computed(() => {
 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 disabled:opacity-50 disabled:cursor-not-allowed'
+    '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'

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/BaseStatBreakdown.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseStatBreakdown from './BaseStatBreakdown.vue'
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const items: StatBreakdownItem[] = [
+  { label: 'Alpaca', value: 12.5 },
+  { label: 'Kraken', value: -3 },
+  { label: 'Binance', value: null },
+]
+
+describe('BaseStatBreakdown', () => {
+  it('renders one row per item with label and formatted value', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$' },
+    })
+    const rows = wrapper.findAll('.flex')
+    expect(rows).toHaveLength(3)
+    expect(rows[0].text()).toContain('Alpaca')
+    expect(rows[0].text()).toContain('$12.50')
+  })
+
+  it('renders an em-dash for null values instead of a misleading 0', () => {
+    const wrapper = mount(BaseStatBreakdown, { props: { items } })
+    const rows = wrapper.findAll('.flex')
+    expect(rows[2].text()).toContain('—')
+    expect(rows[2].text()).not.toContain('0.00')
+  })
+
+  it('honours the decimals prop', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'BTC', value: 0.5 }], decimals: 8 },
+    })
+    expect(wrapper.text()).toContain('0.50000000')
+  })
+
+  it('prefixes a plus and colours by sign when signed', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$', signed: true },
+    })
+    const values = wrapper.findAll('.font-mono')
+    expect(values[0].text()).toBe('+$12.50')
+    expect(values[0].classes().join(' ')).toContain('text-emerald-600')
+    expect(values[1].text()).toBe('-$3.00')
+    expect(values[1].classes().join(' ')).toContain('text-red-600')
+    // Null rows stay neutral even in signed mode.
+    expect(values[2].classes().join(' ')).toContain('text-slate-500')
+  })
+
+  it('stays neutral-coloured when signed is off', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'Alpaca', value: 12.5 }] },
+    })
+    expect(wrapper.find('.font-mono').classes().join(' ')).toContain('text-slate-500')
+  })
+})

package/src/components/BaseStatBreakdown.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Compact per-item breakdown meant to sit under a summary/stat card (pairs
+// with EarningsCard). Each item renders on its own line — label left, value
+// right in monospace. A null/undefined value (a source that is unconfigured,
+// unreachable, or has no matching rows) shows a dash rather than a
+// misleading 0. With `signed`, values gain an explicit "+" and are coloured
+// green/red by sign.
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const props = withDefaults(
+  defineProps<{
+    items: StatBreakdownItem[]
+    currency?: string
+    decimals?: number
+    signed?: boolean
+  }>(),
+  { currency: '', decimals: 2, signed: false },
+)
+
+function fmt(v: number | null | undefined): string {
+  if (v === null || v === undefined) return '—'
+  // Sign sits before the currency symbol ("-$3.00", "+$5.00" — same shape
+  // as fmtUsd); the plus only appears in signed mode.
+  const sign = v < 0 ? '-' : props.signed ? '+' : ''
+  return `${sign}${props.currency}${Math.abs(v).toFixed(props.decimals)}`
+}
+
+function color(v: number | null | undefined): string {
+  if (!props.signed || v === null || v === undefined) {
+    return 'text-slate-500 dark:text-slate-400'
+  }
+  return v >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
+}
+</script>
+
+<template>
+  <div class="mt-1.5 space-y-0.5 px-1">
+    <div
+      v-for="item in items"
+      :key="item.label"
+      class="flex items-center justify-between text-[11px]"
+    >
+      <span class="text-slate-400 dark:text-slate-500">{{ item.label }}</span>
+      <span class="font-mono tabular-nums font-medium" :class="color(item.value)">
+        {{ fmt(item.value) }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -41,6 +41,7 @@ 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'
+export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
@@ -77,6 +78,7 @@ 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'
+export type { StatBreakdownItem } from './types/statBreakdown'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'
@@ -95,6 +97,7 @@ export {
   fmtPrice,
   fmtPct,
   fmtUsd,
+  fmtDuration,
 } from './utils/format'
 export { computePnL } from './utils/pnl'
 export type { PnL, PnLInputs } from './utils/pnl'

package/src/style.css

@@ -1 +1,10 @@
 @import "tailwindcss";
+
+/* Compile `dark:` variants against the `.dark` class that useTheme()/initTheme()
+   toggle on <html> — NOT the OS-level prefers-color-scheme media query
+   (Tailwind v4's default). Both consumers (TradeAutomation, WireMate) switch
+   themes with the class toggle, so media-gated dark rules leak the dark skin
+   into the light theme for users whose OS prefers dark.
+   Use a specificity-bearing selector (:is, not :where) so dark: utilities win
+   over plain base utilities like bg-slate-50 on a cascade tie. */
+@custom-variant dark (&:is(.dark, .dark *));

package/src/types/statBreakdown.ts

@@ -0,0 +1,6 @@
+export interface StatBreakdownItem {
+  /** Row label rendered on the left (e.g. a venue or category name). */
+  label: string
+  /** Numeric value; null/undefined renders as an em-dash rather than 0. */
+  value: number | null | undefined
+}