@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/__tests__/stores/settings.test.ts

@@ -2,7 +2,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 import {
-  paletteCssVariables,
   tableDensityToSize,
   tryUseSettingsStore,
   useSettingsStore,
@@ -54,6 +53,7 @@ describe('useSettingsStore', () => {
     document.documentElement.classList.remove('dark')
     document.documentElement.removeAttribute('style')
     delete document.documentElement.dataset.density
+    delete document.documentElement.dataset.palette
     mockMatchMedia(false)
   })
 
@@ -72,51 +72,51 @@ describe('useSettingsStore', () => {
     expect(settings.serverHost).toBe('127.0.0.1')
     expect(settings.serverPort).toBe(8001)
     expect(settings.theme).toBe('dark')
-    expect(settings.colorPalette).toBe('viridis')
+    expect(settings.colorPalette).toBe('purple')
     expect(settings.tableDensity).toBe('compact')
     expect(localStorage.getItem('mld-settings')).toBeNull()
     expect(JSON.parse(localStorage.getItem('mint-settings') || '{}')).toEqual(expect.objectContaining({
       serverHost: '127.0.0.1',
       serverPort: 8001,
       theme: 'dark',
-      colorPalette: 'viridis',
+      colorPalette: 'purple',
       tableDensity: 'compact',
     }))
   })
 
   describe('palette and density DOM sync', () => {
-    it('writes no palette overrides for the default palette', () => {
+    it('mirrors the stored palette onto html[data-palette] without inline overrides', () => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'ocean' }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      expect(paletteCssVariables('default')).toEqual({})
+      expect(document.documentElement.dataset.palette).toBe('ocean')
       expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
     })
 
-    it('applies the stored palette hues to html on initialize', () => {
-      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'viridis' }))
-
+    it('updates html[data-palette] when the palette changes', async () => {
       const settings = useSettingsStore()
       settings.initialize()
+      expect(document.documentElement.dataset.palette).toBe('default')
 
-      const style = document.documentElement.style
-      expect(style.getPropertyValue('--color-primary')).toBe('hsl(280 84% 67%)')
-      expect(style.getPropertyValue('--color-primary-hover')).toBe('hsl(280 75% 59%)')
-      expect(style.getPropertyValue('--color-cta')).toBe('hsl(80 95% 53%)')
+      settings.colorPalette = 'forest'
+      await nextTick()
+      expect(document.documentElement.dataset.palette).toBe('forest')
     })
 
-    it('re-applies the overrides when the palette changes and clears them on default', async () => {
+    it.each([
+      ['viridis', 'purple'],
+      ['pastel', 'default'],
+      ['not-a-palette', 'default'],
+    ])('maps the stored palette %s onto %s', (stored, expected) => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: stored }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      settings.colorPalette = 'pastel'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('hsl(200 84% 67%)')
-
-      settings.colorPalette = 'default'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
-      expect(document.documentElement.style.getPropertyValue('--color-primary-soft')).toBe('')
+      expect(settings.colorPalette).toBe(expected)
+      expect(document.documentElement.dataset.palette).toBe(expected)
     })
 
     it('mirrors the table density onto html[data-density]', async () => {

package/src/__tests__/styles/baseControlsRules.test.ts

@@ -29,11 +29,11 @@ describe('SDK control refresh base-control rules', () => {
   })
 
   it('should find no soft or plain focus ring when scanning pressable controls (1a)', () => {
-    const pressables = ['checkbox.css', 'radio-group.css', 'toggle.css', 'icon-button.css', 'multi-select.css']
+    const pressables = ['checkbox.css', 'radio-group.css', 'toggle.css', 'icon-button.css']
     expect(offenders(pressables, (l) => /var\(--focus-ring(-soft)?\)/.test(l))).toEqual([])
   })
 
-  it.each(['input.css', 'select.css', 'textarea.css'])(
+  it.each(['input.css', 'select.css', 'textarea.css', 'multi-select.css'])(
     'should use the shared field hover border when scanning %s (1e)',
     (file) => {
       expect(css(file)).toContain('border-color: var(--_field-border-hover)')
@@ -77,6 +77,10 @@ describe('SDK control refresh base-control rules', () => {
     expect(offenders(['alert-box.css'], (l) => /\.mint-alert--\w+ \.mint-alert__title/.test(l))).toEqual([])
   })
 
+  it('should find no tone fill on the alert surface when scanning alert-box.css (v2 callout)', () => {
+    expect(offenders(['alert-box.css'], (l) => /^\.mint-alert--\w+\s*\{/.test(l))).toEqual([])
+  })
+
   it('should find no pill radius on the chip when scanning multi-select.css (1i)', () => {
     expect(offenders(['multi-select.css'], (l) => /9999px|999px/.test(l))).toEqual([])
   })

package/src/__tests__/styles/controlRefreshRules.test.ts

@@ -197,12 +197,6 @@ describe('SDK control refresh style rules', () => {
     expect(rule).toMatch(/padding:\s*0/)
   })
 
-  it('should pad resource picker group bars to the modal gutter when scanning resource-picker-list.css', () => {
-    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
-    const rule = /\.mint-resource-picker__group\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
-    expect(rule).toMatch(/padding:\s*0 1\.25rem/)
-  })
-
   // The list sat in a bordered card inside the modal card.
   it('should draw no frame around the resource picker list when scanning resource-picker-list.css', () => {
     const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))

package/src/__tests__/styles/cssTokens.test.ts

@@ -14,7 +14,10 @@ const variablesCss = readFileSync(join(stylesDir, 'variables.css'), 'utf-8')
  * component-local knobs declared in the same stylesheet that consumes them.
  * Anything else must be a canonical token from variables.css.
  */
-const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([])
+const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([
+  // Consumer knob: the gap width an edge LayoutResizeHandle centres on (falls back to --mint-gutter).
+  '--mint-layout-resize-gap',
+])
 
 const SOURCE_EXTENSIONS = ['.vue', '.css', '.ts']
 const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])
@@ -93,8 +96,8 @@ describe('CSS custom properties', () => {
 
   // 9a: PlotlyChart reads it through getComputedStyle('--font-sans'), which the
   // scan above counts as a declaration, so it slipped through as undefined.
-  it('should declare --font-sans as Fira Sans when charts read the sans font token (9a)', () => {
-    expect(variablesCss).toMatch(/--font-sans:\s*'Fira Sans'/)
+  it('should declare --font-sans as Geist when charts read the sans font token (9a)', () => {
+    expect(variablesCss).toMatch(/--font-sans:\s*'Geist'/)
   })
 
   it('does not use the platform-only --color-bg-*/--color-text-*/--color-border aliases', () => {

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -25,13 +25,19 @@ describe('menus and app shell styles', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
   })
 
-  // 28px items + 3px track padding + 1px border on each side = the 36px top-bar control height.
-  it('should size pill nav items so the track matches the 36px top-bar controls', () => {
-    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.75rem;/)
+  // 26px items + 2px track padding + 1px border on each side = the 32px top-bar control height.
+  it('should size pill nav items so the track matches the 32px top-bar controls', () => {
+    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.625rem;/)
   })
 
-  it('should size the page selector trigger to the 36px identity tile', () => {
-    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
+  // Design v2 option C: the page switcher sits in the crumb at the 32px top-bar control height.
+  it('should size the page selector trigger to the 32px top-bar control height', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2rem;/)
+  })
+
+  // A content-box menu measured 310px, and the platform's <a> rows (100% + padding) overflowed it.
+  it.each(['menu', 'item'])('should size the page selector %s as border-box', (part) => {
+    expect(css('app-page-selector.css')).toMatch(new RegExp(`\\.mint-page-selector__${part}\\s*\\{[^}]*box-sizing:\\s*border-box;`))
   })
 
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
@@ -44,17 +50,21 @@ describe('menus and app shell styles', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__identity > \*\s*\{[^}]*max-width:\s*100%;[^}]*max-height:\s*100%;/)
   })
 
-  // 15px x 1.15 + 12px x 1.2 = 31.7px, so the title group fits the 32px control row.
-  it('should fit the top-bar title and subtitle inside the control row (5a)', () => {
-    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar-title\s*\{[^}]*line-height:\s*1\.15;/)
+  // 18px name + 15px subtitle lines, spread over the 36px identity tile height (top and bottom aligned).
+  it('should fit the top-bar title and subtitle to the 36px identity tile (5a)', () => {
+    const topBar = css('app-top-bar.css')
+    expect(topBar).toMatch(/\.mint-topbar-title-group\s*\{[^}]*justify-content:\s*space-between;[^}]*height:\s*2\.25rem;/)
+    expect(topBar).toMatch(/\.mint-topbar-title\s*\{[^}]*font-size:\s*0\.9375rem;[^}]*line-height:\s*1\.125rem;/)
+    expect(topBar).toMatch(/\.mint-topbar-subtitle\s*\{[^}]*font-size:\s*0\.75rem;[^}]*line-height:\s*0\.9375rem;/)
   })
 
-  it('should size the top-bar experiment trigger to the 32px control height (5a)', () => {
-    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
+  // Design v2: the joined [trigger | Save] group is 30px inside its 1px border.
+  it('should size the top-bar experiment trigger to the 30px v2 control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__trigger\s*\{[^}]*height:\s*30px;/)
   })
 
-  it('should size the top-bar experiment save trigger to the 32px control height (5a)', () => {
-    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__save-trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
+  it('should size the top-bar experiment save button to the 30px v2 control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__save\s*\{[^}]*height:\s*30px;/)
   })
 
   it('should give settings number rows a 120px control (5d)', () => {

package/src/__tests__/styles/paletteTokens.test.ts

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { colorPalettes } from '../../stores/settings'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const variablesCss = readFileSync(join(resolve(here, '../..'), 'styles/variables.css'), 'utf-8')
+
+const ACCENT_TOKENS = [
+  '--color-primary',
+  '--color-primary-hover',
+  '--color-primary-pressed',
+  '--color-primary-soft',
+  '--color-primary-border',
+]
+const STATUS_TOKENS = ['--mint-success', '--mint-error', '--mint-warning', '--mint-warning-text']
+
+/** Declarations of every rule whose selector list has a selector that ends in `[data-palette="<key>"]`. */
+function paletteDeclarations(key: string, dark: boolean): string {
+  const attr = `[data-palette="${key}"]`
+  return [...variablesCss.matchAll(/([^{}]+)\{([^}]*)\}/g)]
+    .filter(([, selector]) => selector.split(',').some((s) => {
+      const one = s.trim()
+      return one.endsWith(attr) && one.startsWith('html.dark') === dark
+    }))
+    .map(([, , body]) => body)
+    .join('\n')
+}
+
+describe('accent palettes', () => {
+  it.each(Object.keys(colorPalettes).flatMap((key) => [[key, 'light'], [key, 'dark']]))(
+    'should define every accent token for the %s palette in %s mode',
+    (key, theme) => {
+      const body = paletteDeclarations(key, theme === 'dark')
+      for (const token of ACCENT_TOKENS) expect(body, `${key} ${theme} ${token}`).toMatch(new RegExp(`${token}\\s*:`))
+    },
+  )
+
+  it('should give the colour-blind palette Okabe-Ito status colours', () => {
+    const body = paletteDeclarations('colorblind', false)
+    for (const token of STATUS_TOKENS) expect(body, token).toMatch(new RegExp(`${token}\\s*:`))
+  })
+})

package/src/__tests__/styles/v2AuditRules.test.ts

@@ -0,0 +1,104 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// v2 design audit (2026-10-28) fixes in the SDK stylesheets.
+
+const srcRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const stylesDir = join(srcRoot, 'styles')
+
+function css(path: string): string {
+  return readFileSync(join(stylesDir, path), 'utf-8').replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+function rule(text: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`(?:^|\\})\\s*${escaped}\\s*\\{([^}]*)\\}`).exec(text)?.[1] ?? ''
+}
+
+const rem = (value: string): number => Number(value.replace('rem', '')) * 16
+
+describe('v2 audit style rules', () => {
+  it('should stop the page bounce in a tab vertically and in a PWA on both axes', () => {
+    const variables = css('variables.css')
+    expect(rule(variables, 'html,\nbody')).toMatch(/overscroll-behavior-y:\s*none/)
+    expect(variables).toMatch(
+      /@media \(display-mode: standalone\)\s*\{\s*html,\s*body\s*\{\s*overscroll-behavior:\s*none;\s*\}/,
+    )
+  })
+
+  it('should keep the outermost cards at least 16px from the window edge', () => {
+    const inset = /--mint-page-inset:\s*([\d.]+rem)/.exec(css('variables.css'))?.[1] ?? '0rem'
+    expect(rem(inset)).toBeGreaterThanOrEqual(16)
+    expect(rule(css('components/app-layout.css'), '.mint-layout--floating')).toMatch(/padding:\s*var\(--mint-page-inset\)/)
+    const topBarCard = rule(css('components/app-top-bar.css'), '.mint-topbar--card')
+    expect(topBarCard).toMatch(/width:\s*calc\(100% - 2 \* var\(--mint-page-inset\)\)/)
+    expect(topBarCard).toMatch(/margin:\s*var\(--mint-page-inset\) var\(--mint-page-inset\) 0/)
+  })
+
+  it('should put the SDK utility classes in the utilities layer so host variants beat them', () => {
+    const vars = css('variables.css')
+    const order = vars.indexOf('@layer theme, base, components, utilities;')
+    const layer = vars.indexOf('@layer utilities {')
+    expect(order).toBeGreaterThan(-1)
+    expect(order).toBeLessThan(vars.indexOf('@layer base {'))
+    const utilities = vars.slice(layer, vars.indexOf('@media (prefers-reduced-motion'))
+    expect(layer).toBeGreaterThan(-1)
+    for (const selector of ['.flex-col {', '.text-text-muted {', '.truncate {', '.max-w-sm {']) {
+      expect(utilities).toContain(selector)
+    }
+  })
+
+  it('should drop the last DataFrame row rule over the !important cell border', () => {
+    const body = rule(css('components/dataframe.css'), '.mint-dataframe__row:last-child .mint-dataframe__td')
+    expect(body).toMatch(/border-bottom:\s*none\s*!important/)
+  })
+
+  it('should round the modal close button with --radius-md', () => {
+    expect(rule(css('components/modal.css'), '.mint-modal__close')).toMatch(/border-radius:\s*var\(--radius-md\)/)
+  })
+
+  it('should draw no capsule on the progress rail or the sheet grab hint', () => {
+    expect(css('components/progress-bar.css')).not.toMatch(/9999px/)
+    expect(rule(css('components/modal.css'), '.mint-modal__grab-hint')).not.toMatch(/9999px/)
+  })
+
+  it('should keep a 28px header control inside the section card header strip', () => {
+    const text = css('components/section-card.css')
+    const cases: Array<[string, number]> = [
+      ['.mint-section-card__header', 28],
+      ['[data-density="comfortable"] .mint-section-card__header', 32],
+    ]
+    for (const [selector, control] of cases) {
+      const body = rule(text, selector)
+      const minHeight = rem(/min-height:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      const padTop = rem(/padding:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      expect(control + 2 * padTop + 1, selector).toBeLessThanOrEqual(minHeight)
+    }
+  })
+
+  it('should end the settings pane without a closing row hairline and draw no box around the density preview', () => {
+    const text = css('components/settings-modal.css')
+    const last = rule(
+      text,
+      '.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child',
+    )
+    expect(last).toMatch(/border-bottom:\s*none/)
+    expect(rule(text, '.mint-settings-modal__density-preview')).not.toMatch(/(^|;)\s*border(-radius)?:/)
+  })
+
+  it('should set the md number input text no smaller than the sm one', () => {
+    const text = css('components/number-input.css')
+    const size = (variant: string) =>
+      rem(/font-size:\s*([\d.]+rem)/.exec(rule(text, `.mint-number-input__input--${variant}`))?.[1] ?? '0rem')
+    expect(size('md')).toBeGreaterThan(size('sm'))
+  })
+
+  it('should give the generated JSON block a token radius and no frame', () => {
+    const sfc = readFileSync(join(srcRoot, 'components/GeneratedResultRenderer.vue'), 'utf-8')
+    const body = /\.mint-generated-result__json\s*\{([^}]*overflow:[^}]*)\}/.exec(sfc)?.[1] ?? ''
+    expect(body).toMatch(/border-radius:\s*var\(--radius-md\)/)
+    expect(body).not.toMatch(/(^|;)\s*border:/)
+  })
+})

package/src/__tests__/utils/plotlyTemplate.test.ts

@@ -10,8 +10,8 @@ const tokens: Record<string, string> = {
   '--mint-sample-6': '#666666',
   '--mint-sample-7': '#777777',
   '--mint-sample-8': '#888888',
-  '--font-sans': 'Fira Sans',
-  '--font-mono': 'Fira Code',
+  '--font-sans': 'Geist',
+  '--font-mono': 'Geist Mono',
   '--text-primary': '#1E293B',
   '--text-secondary': '#64748B',
   '--border-light': '#F3F4F6',
@@ -35,11 +35,11 @@ describe('mintPlotlyTemplate', () => {
   })
 
   it('should set 12px sans body text in the primary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Fira Sans', size: 12, color: '#1E293B' })
+    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Geist', size: 12, color: '#1E293B' })
   })
 
   it('should set 11px mono ticks in the secondary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Fira Code', size: 11, color: '#64748B' })
+    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Geist Mono', size: 11, color: '#64748B' })
   })
 
   it('should draw the grid with --border-light when tokens are defined', () => {

package/src/__tests__/utils/time.test.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
   findNearestTimeSlotIndex,
+  formatRelativeTime,
   formatTimeSlot,
   fromMinutes,
   generateTimeSlots,
@@ -25,4 +26,20 @@ describe('time', () => {
     expect(findNearestTimeSlotIndex('08:00', [])).toBe(-1)
   })
 
+  describe('formatRelativeTime', () => {
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it.each([
+      [{ weeks: true }, '2 weeks ago'],
+      [{}, new Date('2026-10-14T12:00:00Z').toLocaleDateString()],
+    ])('should format a 14-day-old time as a week count only when weeks is on (%o)', (options, expected) => {
+      vi.useFakeTimers({ toFake: ['Date'] })
+      vi.setSystemTime(new Date('2026-10-28T12:00:00Z'))
+
+      expect(formatRelativeTime('2026-10-14T12:00:00Z', options)).toBe(expected)
+    })
+  })
+
 })

package/src/components/ActionMenu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { Check, Ellipsis } from 'lucide-vue-next'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useFloatingPanel } from '../composables/useFloatingPanel'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { ActionMenuItem } from '../types/components'
 import BaseButton from './BaseButton.vue'
@@ -30,19 +30,15 @@ defineSlots<{
 }>()
 
 const panelRef = ref<HTMLElement | null>(null)
-const panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })
 
-// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)
-// comes from the shared composable; only floating-ui placement stays local.
+// Disclosure state (outside-click, Escape, focus return) and placement come from
+// the shared composables; the open menu follows its trigger on scroll.
 const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
-  closeOnScroll: true,
   insideRefs: [panelRef],
-  onOpen: () => {
-    panelStyle.value = { visibility: 'hidden' }
-    emit('open')
-  },
+  onOpen: () => emit('open'),
   onClose: () => emit('close'),
 })
+const { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: 'bottom-end' })
 
 // BaseButton owns the actual <button>, so the trigger element is resolved from
 // the wrapper once mounted rather than bound with a template ref.
@@ -57,27 +53,6 @@ function menuItems(): HTMLElement[] {
   )
 }
 
-async function positionPanel() {
-  const trigger = triggerRef.value
-  const panel = panelRef.value
-  if (!trigger || !panel) return
-
-  const position = await computePosition(trigger, panel, {
-    placement: 'bottom-end',
-    strategy: 'fixed',
-    middleware: [
-      offset(4),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-  panelStyle.value = {
-    left: `${position.x}px`,
-    top: `${position.y}px`,
-    visibility: 'visible',
-  }
-}
-
 /** `focusFirst` is false when the keyboard composable owns the initial focus. */
 function openMenu(focusFirst = true) {
   if (props.disabled || isOpen.value) return
@@ -105,12 +80,6 @@ function handleSelect(item: ActionMenuItem) {
   emit('select', item)
   close()
 }
-
-watch(isOpen, async (opened) => {
-  if (!opened) return
-  await nextTick()
-  await positionPanel()
-})
 </script>
 
 <template>

package/src/components/AdductText.story.vue

@@ -12,6 +12,13 @@ import AdductText from './AdductText.vue'
       </div>
     </Variant>
 
+    <Variant title="Badges">
+      <div style="display: flex; align-items: center; gap: 0.5rem; padding: 2rem;">
+        <AdductText v-for="v in ['[M+H]+', '[M-H]-', '[M+Na]+', '[M-H2O+H]+', '[M+2H]2+']" :key="v" :value="v" variant="badge" />
+        <AdductText value="[M+H]+" variant="badge" font="mono" />
+      </div>
+    </Variant>
+
     <Variant title="Tones and inherited size">
       <div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; max-width: 600px; color: var(--text-primary); font-size: 0.875rem;">
         <div style="display: flex; align-items: center; gap: 1rem;">

package/src/components/AdductText.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'inline',
   tone: 'default',
   size: 'xs',
-  font: 'mono',
+  font: 'sans',
 })
 
 const value = computed(() => props.value?.trim() ?? '')

package/src/components/AlertBox.story.vue

@@ -35,7 +35,7 @@ function handleAction(label: string) {
           </AlertBox>
           <p
             v-if="actionFired"
-            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
           >
             Action fired: "{{ actionFired }}"
           </p>
@@ -111,7 +111,7 @@ function handleAction(label: string) {
 
         <p
           v-if="actionFired"
-          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
         >
           Action fired: "{{ actionFired }}"
         </p>

package/src/components/AlertBox.vue

@@ -31,22 +31,24 @@ const hasActions = () => !!props.actionLabel || !!slots.actions
     :class="`mint-alert--${props.tone}`"
     role="alert"
   >
-    <!-- Lucide circle-check -->
-    <svg v-if="props.tone === 'success'" class="mint-alert__icon mint-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
-    </svg>
-    <!-- Lucide circle-x -->
-    <svg v-else-if="props.tone === 'error'" class="mint-alert__icon mint-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
-    </svg>
-    <!-- Lucide triangle-alert -->
-    <svg v-else-if="props.tone === 'warning'" class="mint-alert__icon mint-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
-    </svg>
-    <!-- Lucide info -->
-    <svg v-else :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
-    </svg>
+    <span :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]">
+      <!-- Lucide circle-check -->
+      <svg v-if="props.tone === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+      </svg>
+      <!-- Lucide circle-x -->
+      <svg v-else-if="props.tone === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+      </svg>
+      <!-- Lucide triangle-alert -->
+      <svg v-else-if="props.tone === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+      </svg>
+      <!-- Lucide info -->
+      <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+      </svg>
+    </span>
 
     <div class="mint-alert__content">
       <h4 v-if="props.title" class="mint-alert__title">