From f35b111e87c353c85abf935452cd6d14efa4cb03 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 16 Jun 2026 15:58:50 +0000
Subject: [PATCH 1/5] fix(charts): correct sortBy, scale guards, and loaded
 payload

- BarChart/ColumnChart: sortedData sorted itself instead of loadedData,
  so enabling sortBy rendered an empty chart; sort loadedData instead
- ColumnChart: fall back to 0 when d3.max is undefined so a missing/
  non-numeric value field no longer yields a NaN y-scale (vanished bars)
- StackedColumnChart: use ?? so an explicit maxValue of 0 is honoured
- StackedBarChart: stop throwing in barStyle on a zero total; log and
  fall back to 100 like StackedColumnChart
- Bar/Column/LineChart: clamp padded width/height (and Bar range,
  StackedColumn tickSize) to >= 0 to avoid negative SVG dimensions
- BarChart: remove dead initialize() axis builder and its watcher
- useChart: emit('loaded', loadedData) and detect highlights on
  loadedData so URL-fetched data works
- add sortBy regression tests for BarChart and ColumnChart
---
 lib/composables/useChart.ts                   |  4 +--
 lib/datavisualisations/BarChart/BarChart.vue  | 20 ++++--------
 .../ColumnChart/ColumnChart.vue               |  8 ++---
 .../LineChart/LineChart.vue                   |  4 +--
 .../StackedBarChart/StackedBarChart.vue       |  5 +--
 .../StackedColumnChart/StackedColumnChart.vue |  4 +--
 .../BarChart/BarChart.spec.js                 | 31 +++++++++++++++++++
 .../ColumnChart/ColumnChart.spec.js           | 31 +++++++++++++++++++
 8 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/lib/composables/useChart.ts b/lib/composables/useChart.ts
index 5b7af3a..8f67bf3 100644
--- a/lib/composables/useChart.ts
+++ b/lib/composables/useChart.ts
@@ -155,7 +155,7 @@ export function useChart(
 
     await afterLoaded?.()
     isLoaded.value = true
-    emit('loaded')
+    emit('loaded', loadedData.value)
 
     if (onResized) {
       onResized()
@@ -217,7 +217,7 @@ export function useChart(
   })
 
   const dataHasHighlights = computed(() => {
-    const data = toValue(dataRef)
+    const data = loadedData.value
     if (Array.isArray(data)) {
       return some(data, highlighted)
     }
diff --git a/lib/datavisualisations/BarChart/BarChart.vue b/lib/datavisualisations/BarChart/BarChart.vue
index d4dd04a..d978312 100644
--- a/lib/datavisualisations/BarChart/BarChart.vue
+++ b/lib/datavisualisations/BarChart/BarChart.vue
@@ -2,7 +2,7 @@
 import * as d3 from 'd3'
 import identity from 'lodash/identity'
 import sortByFn from 'lodash/sortBy'
-import { computed, ref, watch, ComponentPublicInstance } from 'vue'
+import { computed, ref, ComponentPublicInstance } from 'vue'
 import { getChartProps, useChart } from '@/composables/useChart'
 
 defineOptions({
@@ -104,13 +104,13 @@ const isLoaded = ref(false)
 const { loadedData, elementsMaxBBox, dataHasHighlights, d3Formatter }
   = useChart(el, getChartProps(props), { emit }, isLoaded, onResize)
 
-const sortedData = computed((): [] => {
+const sortedData = computed((): object[] => {
   if (!loadedData.value) {
     return []
   }
   return !props.sortBy
     ? loadedData.value
-    : sortByFn(sortedData.value, props.sortBy)
+    : sortByFn(loadedData.value, props.sortBy)
 })
 
 const labelWidth = computed(() => {
@@ -140,8 +140,8 @@ const margin = computed(() => {
 })
 
 const padded = computed(() => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
@@ -150,7 +150,7 @@ const scale = computed(() => {
     .scaleLinear()
     // @ts-expect-error D3 api
     .domain([0, d3.max(sortedData.value, (d: Datum) => d.value)])
-    .range([0, padded.value.width - valueWidth.value])
+    .range([0, Math.max(0, padded.value.width - valueWidth.value)])
   return { x }
 })
 
@@ -191,14 +191,6 @@ function onResize() {
   }
 }
 
-function initialize() {
-  // @ts-expect-error D3 api
-  d3.axisBottom().scale(scale.value.x)
-}
-
-watch(width, () => {
-  initialize()
-})
 </script>
 
 <template>
diff --git a/lib/datavisualisations/ColumnChart/ColumnChart.vue b/lib/datavisualisations/ColumnChart/ColumnChart.vue
index 27c2a97..1ff1ee2 100644
--- a/lib/datavisualisations/ColumnChart/ColumnChart.vue
+++ b/lib/datavisualisations/ColumnChart/ColumnChart.vue
@@ -213,7 +213,7 @@ const sortedData = computed((): object[] => {
   }
   return !props.sortBy
     ? loadedData.value
-    : sortByFn(sortedData.value, props.sortBy)
+    : sortByFn(loadedData.value, props.sortBy)
 })
 
 const labelWidth = computed((): number => {
@@ -261,8 +261,8 @@ const margin = computed(
 )
 
 const padded = computed((): { width: number, height: number } => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
@@ -288,7 +288,7 @@ const scaleY = computed((): d3.ScaleLinear<number, number> => {
     maxValue = props.maxValue ?? waterfallTotalValue.value
   }
   else {
-    maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
+    maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName)) ?? 0
   }
   return d3
     .scaleLinear()
diff --git a/lib/datavisualisations/LineChart/LineChart.vue b/lib/datavisualisations/LineChart/LineChart.vue
index b95dfc3..18901cc 100644
--- a/lib/datavisualisations/LineChart/LineChart.vue
+++ b/lib/datavisualisations/LineChart/LineChart.vue
@@ -222,8 +222,8 @@ const margin = computed(() => {
 })
 
 const padded = computed(() => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
diff --git a/lib/datavisualisations/StackedBarChart/StackedBarChart.vue b/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
index c4cfaa3..72fea35 100644
--- a/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
+++ b/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
@@ -255,9 +255,10 @@ function isRowHighlighted(i: number | string) {
 
 function barStyle(i: number | string, key: string) {
   const value = sortedData.value[i as number][key]
-  const totalWidth = props.relative ? totalRowValue(i) : maxValue.value
+  let totalWidth = props.relative ? totalRowValue(i) : maxValue.value
   if (!totalWidth) {
-    throw new Error('Total width is not correct' + totalWidth)
+    console.error('totalWidth as divider cannot be ' + totalWidth)
+    totalWidth = 100
   }
   const width = `${100 * (value / totalWidth)}%`
   const backgroundColor = colorScale.value(key)
diff --git a/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue b/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
index e0533af..5dc7673 100644
--- a/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
+++ b/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
@@ -210,7 +210,7 @@ const leftAxis = computed(() => {
   return d3
     .axisLeft(leftScale.value)
     .tickFormat(d => d3Formatter(d, props.yAxisTickFormat))
-    .tickSize(width.value - leftAxisLabelsWidth.value)
+    .tickSize(Math.max(0, width.value - leftAxisLabelsWidth.value))
     .tickPadding(props.yAxisTickPadding)
 })
 
@@ -246,7 +246,7 @@ const barTooltipDelay = computed(() => {
 const maxRowValue = computed(() => {
   return (
     props.maxValue
-    || (d3.max(loadedData.value || [], (datum, i) => {
+    ?? (d3.max(loadedData.value || [], (datum, i) => {
       return totalRowValue(i)
     }) as number)
   )
diff --git a/tests/unit/datavisualisations/BarChart/BarChart.spec.js b/tests/unit/datavisualisations/BarChart/BarChart.spec.js
index e0407c8..15c6bd6 100644
--- a/tests/unit/datavisualisations/BarChart/BarChart.spec.js
+++ b/tests/unit/datavisualisations/BarChart/BarChart.spec.js
@@ -59,4 +59,35 @@ describe('BarChart.vue', () => {
       expect(wrapper.vm).toBeTruthy()
     })
   })
+
+  describe('with the sortBy prop set', () => {
+    let wrapper
+
+    beforeEach(async () => {
+      const propsData = {
+        sortBy: 'value',
+        data: [
+          { label: 'B', value: 20 },
+          { label: 'A', value: 50 },
+          { label: 'C', value: 10 }
+        ]
+      }
+      wrapper = mount(BarChart, { propsData })
+      wrapper.vm.$el.style.width = '500px'
+      await wrapper.vm.$nextTick()
+    })
+
+    // Regression: sortedData used to sort itself instead of loadedData, so
+    // enabling sortBy collapsed the dataset to [] and rendered no bars.
+    it('still renders a bar for every datum', () => {
+      expect(wrapper.findAll('.bar-chart__bars__item')).toHaveLength(3)
+    })
+
+    it('orders the bars by the sortBy field', () => {
+      const labels = wrapper
+        .findAll('.bar-chart__labels__item')
+        .map(node => node.text())
+      expect(labels).toEqual(['C', 'B', 'A'])
+    })
+  })
 })
diff --git a/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js b/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
index 4a71bec..640251d 100644
--- a/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
+++ b/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
@@ -411,4 +411,35 @@ describe('ColumnChart.vue', () => {
       expect(ticks.at(0).text()).toBe('\'20')
     })
   })
+
+  describe('with the sortBy prop set', () => {
+    let wrapper
+
+    beforeEach(async () => {
+      const propsData = {
+        sortBy: 'value',
+        data: [
+          { date: 2000, value: 30 },
+          { date: 2001, value: 10 },
+          { date: 2002, value: 20 }
+        ]
+      }
+      wrapper = mount(ColumnChart, { propsData })
+      wrapper.vm.$el.style.width = '500px'
+      await wrapper.vm.$nextTick()
+    })
+
+    // Regression: sortedData used to sort itself instead of loadedData, so
+    // enabling sortBy collapsed the dataset to [] and rendered no columns.
+    it('still renders a column for every datum', () => {
+      expect(wrapper.findAll('.column-chart__columns__item__bar')).toHaveLength(3)
+    })
+
+    it('orders the columns by the sortBy field', () => {
+      const ticks = wrapper
+        .findAll('.column-chart__axis--x .tick')
+        .map(node => node.text())
+      expect(ticks).toEqual(['2001', '2002', '2000'])
+    })
+  })
 })

From a1534de3b3953e2ca39757a2004a1802dfcf6cbb Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 16 Jun 2026 15:59:06 +0000
Subject: [PATCH 2/5] fix(maps): tooltip target, click-to-zoom, zoom binding,
 category lookup

- SymbolMap: build the tooltip target id from the marker cursor value
  directly instead of re-extracting it through markerId(), which yielded
  "...-marker-undefined" and never anchored the tooltip
- ChoroplethMap: drop the root @click="draw" that rebuilt the whole SVG
  on every click and undid the feature click-to-zoom
- ChoroplethMap: stop double-binding mapZoom and binding both planar and
  spherical zoom behaviors at once; route programmatic zoom through the
  behavior actually bound to the selection
- SymbolMap: replace per-marker categories.indexOf (O(n^2)) with a
  memoized name->index Map
---
 lib/maps/ChoroplethMap/ChoroplethMap.vue | 15 ++++++++-------
 lib/maps/SymbolMap/SymbolMap.vue         | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/lib/maps/ChoroplethMap/ChoroplethMap.vue b/lib/maps/ChoroplethMap/ChoroplethMap.vue
index c875d93..e9c952e 100644
--- a/lib/maps/ChoroplethMap/ChoroplethMap.vue
+++ b/lib/maps/ChoroplethMap/ChoroplethMap.vue
@@ -462,11 +462,9 @@ function prepare() {
 }
 
 function prepareZoom() {
-  if (props.zoomable) {
-    map.value?.call(mapZoom.value as any)
-  }
-
-  // User can zoom on the map
+  // User can zoom on the map. A spherical map rotates and scales through its
+  // dedicated behaviors; a planar map uses mapZoom. Binding both (or binding
+  // mapZoom twice) would install conflicting zoom handlers on the selection.
   if (props.zoomable && props.spherical) {
     map.value?.call(mapRotate.value as any).call(mapSphericalZoom.value as any)
   }
@@ -653,10 +651,14 @@ function applyZoomIdentity(
   pointer: number[] | null = null,
   transitionDuration = props.transitionDuration
 ) {
+  // Dispatch through the behavior actually bound to the selection so the
+  // matching handler runs (spherical applies scale only and preserves
+  // rotation; planar applies the full transform).
+  const zoomBehavior = props.spherical ? mapSphericalZoom.value : mapZoom.value
   return map.value
     ?.transition()
     .duration(transitionDuration)
-    .call(mapZoom.value.transform as any, zoomIdentity, pointer)
+    .call(zoomBehavior.transform as any, zoomIdentity, pointer)
     .end()
 }
 
@@ -791,7 +793,6 @@ defineExpose({
     :class="mapClass"
     :style="mapStyle"
     class="choropleth-map"
-    @click="draw"
   >
     <svg
       :viewbox="`0 0 ${mapRect.width} ${mapRect.height}`"
diff --git a/lib/maps/SymbolMap/SymbolMap.vue b/lib/maps/SymbolMap/SymbolMap.vue
index 87bb80d..db536ff 100644
--- a/lib/maps/SymbolMap/SymbolMap.vue
+++ b/lib/maps/SymbolMap/SymbolMap.vue
@@ -346,6 +346,14 @@ const categories = computed(() => {
   return uniq(cats).map(String)
 })
 
+// Name -> index lookup so markerClassObject() doesn't run an O(n) indexOf for
+// every marker (which made class assignment O(n²) across the dataset).
+const categoryIndexByName = computed(() => {
+  const index = new Map<string, number>()
+  categories.value.forEach((category, i) => index.set(category, i))
+  return index
+})
+
 const legendData = computed(() => {
   const cats = groupBy(loadedData.value || [], (d: any) => {
     return get(d, props.categoryObjectsPath)
@@ -363,7 +371,9 @@ const hasTooltip = computed(() => {
 
 const tooltipTarget = computed(() => {
   if (hasTooltip.value) {
-    return markerId(markerCursor.value)
+    // markerCursor already holds the resolved id value, so build the element
+    // id directly rather than re-extracting it through markerId().
+    return `${mapId.value}-marker-${markerCursor.value}`
   }
   return null
 })
@@ -481,7 +491,7 @@ function markerId(d: any) {
 
 function markerClassObject(d: any) {
   const category = String(get(d, props.categoryObjectsPath))
-  const categoryIndex = categories.value.indexOf(category)
+  const categoryIndex = categoryIndexByName.value.get(category) ?? -1
   const id = get(d, props.markerObjectsPath)
   const pathClass = 'symbol-map__main__markers__item'
   return {

From ad676cc6dced35127736f0ddea823cd6ba4da254 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 16 Jun 2026 15:59:07 +0000
Subject: [PATCH 3/5] fix(components): selector, dropdown nav, embed url, tab
 types, clamp

- SharingOptions: fix malformed selector 'meta[name="description]'
  (missing quote) that threw a SyntaxError in real browsers, and stop
  Object.assign mutating the metaValues computed cache
- FormControlSelectableDropdown: match the active item by value so
  keyboard navigation works for object items (the spread clones broke
  reference-based indexOf)
- FormEmbed: build the iframe src from the resolved url argument instead
  of the possibly-null props.url
- FormAdvancedLink: import the real AdvancedLinkTab type instead of the
  non-existent Tab; FormAdvancedLinkTab: drop the invalid id default
- FormDonate: drop the no-op self-assignment in the amount watcher
- PaginationTiny: clamp submitted page/row input to [1, numberOfPages]
---
 .../Form/FormAdvancedLink/FormAdvancedLink.vue     |  8 ++++----
 .../Form/FormAdvancedLink/FormAdvancedLinkTab.vue  |  4 +---
 .../FormControl/FormControlSelectableDropdown.vue  | 14 +++++++++++---
 lib/components/Form/FormDonate.vue                 |  5 +----
 lib/components/Form/FormEmbed.vue                  |  4 ++--
 lib/components/Pagination/PaginationTiny.vue       |  5 +++--
 lib/components/SharingOptions/SharingOptions.vue   |  4 ++--
 7 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue b/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
index 7b8db2c..c585e6d 100644
--- a/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
+++ b/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
@@ -5,7 +5,7 @@ import { uniqueId } from 'lodash'
 import { ButtonVariant } from 'bootstrap-vue-next'
 
 import AdvancedLinkFormTab from './FormAdvancedLinkTab.vue'
-import { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 
 /**
  * A form with tabs to offer several copy formats to users.
@@ -31,7 +31,7 @@ export interface FormAdvancedLinkProps {
   /**
    * The forms to display
    */
-  forms?: Tab[]
+  forms?: AdvancedLinkTab[]
   /**
    * Activate the card integration for the tabs
    */
@@ -65,7 +65,7 @@ export interface FormAdvancedLinkProps {
 const props = withDefaults(defineProps<FormAdvancedLinkProps>(), {
   link: undefined,
   title: 'Link',
-  forms: () => ['raw', 'markdown', 'rich', 'html'],
+  forms: () => [AdvancedLinkTab.raw, AdvancedLinkTab.markdown, AdvancedLinkTab.rich, AdvancedLinkTab.html],
   card: false,
   pills: false,
   small: false,
@@ -86,7 +86,7 @@ const formClasses = computed(() => {
 })
 
 // default tabs order
-const defaultTabs: Tab[] = ['raw', 'rich', 'markdown', 'html']
+const defaultTabs: AdvancedLinkTab[] = [AdvancedLinkTab.raw, AdvancedLinkTab.rich, AdvancedLinkTab.markdown, AdvancedLinkTab.html]
 
 const tabs = computed(() => {
   return defaultTabs
diff --git a/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue b/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
index 42fed83..c1501f0 100644
--- a/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
+++ b/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
@@ -2,7 +2,6 @@
 import { BaseButtonVariant } from 'bootstrap-vue-next'
 import HapticCopy from '@/components/HapticCopy/HapticCopy.vue'
 import { computed, nextTick, type ShallowRef, useTemplateRef } from 'vue'
-import { uniqueId } from 'lodash'
 
 import { AdvancedLinkTab } from '@/enums'
 
@@ -28,8 +27,7 @@ interface HTMLElementSupportingCreateRange extends HTMLElement {
 const props = withDefaults(defineProps<AdvancedLinkFormTabProps>(), {
   type: AdvancedLinkTab.raw,
   compact: false,
-  variant: 'primary',
-  id: uniqueId('advanced-link-form-tab')
+  variant: 'primary'
 })
 
 const size = computed(() => (props.compact ? 'sm' : 'md'))
diff --git a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
index 58f143f..737d5b7 100644
--- a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
+++ b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
@@ -5,6 +5,7 @@ import findIndex from 'lodash/findIndex'
 import filter from 'lodash/filter'
 import identity from 'lodash/identity'
 import isEqual from 'lodash/isEqual'
+import omit from 'lodash/omit'
 // @ts-expect-error no typings available
 import { RecycleScroller } from 'vue-virtual-scroller'
 
@@ -135,9 +136,16 @@ const keyField = computed(() => {
 })
 
 const firstActiveItemIndex = computed(() => {
-  return activeItems.value.length
-    ? items_.value.indexOf(activeItems.value[0])
-    : -1
+  if (!activeItems.value.length) {
+    return -1
+  }
+  const activeItem = activeItems.value[0]
+  if (typeof activeItem === 'string') {
+    return items_.value.indexOf(activeItem)
+  }
+  return items_.value.findIndex(it =>
+    isEqual(omit(it, 'recycle_scroller_id'), activeItem)
+  )
 })
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
diff --git a/lib/components/Form/FormDonate.vue b/lib/components/Form/FormDonate.vue
index 3f0e06f..947612e 100644
--- a/lib/components/Form/FormDonate.vue
+++ b/lib/components/Form/FormDonate.vue
@@ -120,11 +120,8 @@ watch(installmentPeriod, () => {
 
 watch(
   () => amount.value,
-  (v: number) => {
+  () => {
     level.value = changeThe.value
-
-    // Set manual amount
-    return (amount.value = v)
   }
 )
 </script>
diff --git a/lib/components/Form/FormEmbed.vue b/lib/components/Form/FormEmbed.vue
index 0325d42..020ffcf 100644
--- a/lib/components/Form/FormEmbed.vue
+++ b/lib/components/Form/FormEmbed.vue
@@ -65,8 +65,8 @@ const currentUrl = computed(() => {
   return props.url || window?.location?.href
 })
 
-function iframeCodeFor(_url = currentUrl, width: string, height: string) {
-  const src = IframeResizer.deletePymParams(props.url)
+function iframeCodeFor(url = currentUrl, width: string, height: string) {
+  const src = IframeResizer.deletePymParams(url.value)
   return `<iframe width="${width}" height="${height}" src="${src}" frameborder="0" allowfullscreen></iframe>`
 }
 
diff --git a/lib/components/Pagination/PaginationTiny.vue b/lib/components/Pagination/PaginationTiny.vue
index f078db9..50f366e 100644
--- a/lib/components/Pagination/PaginationTiny.vue
+++ b/lib/components/Pagination/PaginationTiny.vue
@@ -155,6 +155,7 @@
 </template>
 
 <script lang="ts" setup>
+import clamp from 'lodash/clamp'
 import { BButton, BFormInput } from 'bootstrap-vue-next'
 import { computed, ref, watch, type Component } from 'vue'
 import { directive as vInputAutowidth } from 'vue-input-autowidth'
@@ -376,14 +377,14 @@ const title = computed(() => {
 function applyPageForm(): void {
   const { value } = currentPageInput
   if (!isNaN(value as number)) {
-    modelValue.value = +value
+    modelValue.value = clamp(Math.floor(+value), 1, numberOfPages.value)
   }
 }
 
 function applyRowForm(): void {
   const { value } = currentRowInput
   if (!isNaN(value as number)) {
-    currentPageInput.value = Math.floor(+value / +props.perPage) + 1
+    currentPageInput.value = clamp(Math.floor(+value / +props.perPage) + 1, 1, numberOfPages.value)
     currentRowInput.value = +props.perPage * (+currentPageInput.value - 1) + 1
     modelValue.value = +currentPageInput.value
   }
diff --git a/lib/components/SharingOptions/SharingOptions.vue b/lib/components/SharingOptions/SharingOptions.vue
index 96a814a..6dbc4d7 100644
--- a/lib/components/SharingOptions/SharingOptions.vue
+++ b/lib/components/SharingOptions/SharingOptions.vue
@@ -91,7 +91,7 @@ const metaValues = computed((): MetaValuesMap => {
     title: defaultValueFor('sharing-options.title'),
     description: defaultValueFor(
       'sharing-options.description',
-      'meta[name="description]'
+      'meta[name="description"]'
     ),
     facebook_title: defaultValueFor(
       'sharing-options.facebook_title',
@@ -109,7 +109,7 @@ const metaValues = computed((): MetaValuesMap => {
 })
 
 function valuesFor(network: string): Record<string, string> {
-  const values = Object.assign(metaValues.value, props.values)
+  const values = Object.assign({}, metaValues.value, props.values)
   return reduce(
     props.valuesKeys,
     (res: Record<string, string>, key) => {

From d7a6046616ab0c338de4f65ae4a998a3242f1a20 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 16 Jun 2026 15:59:18 +0000
Subject: [PATCH 4/5] fix(lifecycle): tear down observers/timers/listeners;
 debounce resize

- HapticCopy: clear the pending tooltip timeout on unmount
- SlideUpDown: remove the transitionend listener on unmount
- ActiveTextTruncate: stop the RAF loop and remove transition listeners
  on unmount
- ResponsiveIframe: remove the pym Parent (and its window listener) on
  unmount
- SharingOptionsLink: clear the polling interval / popup on unmount
- useResizeObserver: guard the element deref, disconnect the observer on
  unmount, and debounce resize so consumers redraw once dimensions settle
- useQueryObserver: disconnect MutationObservers on scope dispose
- EllipsisTooltip: disconnect the ResizeObserver on unmount
- assets: reject (and uncache) failed asset loads and resolve
  injectAssets() immediately for an empty list, so callers never hang
---
 .../ActiveTextTruncate/ActiveTextTruncate.vue | 20 +++++++++-
 lib/components/HapticCopy/HapticCopy.vue      |  1 +
 .../ResponsiveIframe/ResponsiveIframe.vue     |  6 ++-
 .../SharingOptions/SharingOptionsLink.vue     |  9 ++++-
 lib/components/SlideUpDown/SlideUpDown.vue    | 14 +++++--
 lib/composables/useQueryObserver.ts           |  8 +++-
 lib/composables/useResizeObserver.ts          | 38 ++++++++++++-------
 lib/directives/EllipsisTooltip.ts             | 13 +++++--
 lib/utils/assets.ts                           | 16 +++++++-
 9 files changed, 100 insertions(+), 25 deletions(-)

diff --git a/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue b/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
index 9162a7c..931416b 100644
--- a/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
+++ b/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useResizeObserver } from '@/composables/useResizeObserver'
 import { RequestAnimationFrameWrapper } from '@/utils/animation'
 
@@ -150,6 +150,24 @@ function resetTextLivePosition(): void {
    */
   emit('cancel')
 }
+
+onUnmounted(() => {
+  // Stop the Request Animation Frame loop so it doesn't reschedule forever
+  textLivePositionRequestAnimationFrame.value.stop()
+  // Remove the transition listeners added on the text element
+  textElement.value?.removeEventListener(
+    'transitionstart',
+    startTrackingTextLivePosition
+  )
+  textElement.value?.removeEventListener(
+    'transitionend',
+    endTrackingTextLivePosition
+  )
+  textElement.value?.removeEventListener(
+    'transitioncancel',
+    resetTextLivePosition
+  )
+})
 </script>
 
 <template>
diff --git a/lib/components/HapticCopy/HapticCopy.vue b/lib/components/HapticCopy/HapticCopy.vue
index e0b6138..8e8dce2 100644
--- a/lib/components/HapticCopy/HapticCopy.vue
+++ b/lib/components/HapticCopy/HapticCopy.vue
@@ -147,6 +147,7 @@ async function openTooltip(msg = 'haptic-copy.tooltip.succeed') {
 }
 
 async function closeTooltip() {
+  clearTimeout(tooltipTimeout.value)
   showClipboardTooltip.value = false
   tooltipTimeout.value = undefined
   emit('hideClipboardTooltip')
diff --git a/lib/components/ResponsiveIframe/ResponsiveIframe.vue b/lib/components/ResponsiveIframe/ResponsiveIframe.vue
index f0f275b..e095be3 100644
--- a/lib/components/ResponsiveIframe/ResponsiveIframe.vue
+++ b/lib/components/ResponsiveIframe/ResponsiveIframe.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from 'vue'
+import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import type { Parent } from 'pym.js'
 
 import { injectAssets } from '@/utils/assets'
@@ -41,6 +41,10 @@ onMounted(async (): Promise<void> => {
     props.options ?? {}
   )
 })
+
+onUnmounted(() => {
+  pymParent.value?.remove?.()
+})
 </script>
 
 <template>
diff --git a/lib/components/SharingOptions/SharingOptionsLink.vue b/lib/components/SharingOptions/SharingOptionsLink.vue
index f66fcb8..937c3af 100644
--- a/lib/components/SharingOptions/SharingOptionsLink.vue
+++ b/lib/components/SharingOptions/SharingOptionsLink.vue
@@ -72,7 +72,7 @@ export const networks: SharingPlatforms = {
 import querystring from 'querystring-es3'
 import reduce from 'lodash/reduce'
 import get from 'lodash/get'
-import { computed, reactive } from 'vue'
+import { computed, onUnmounted, reactive } from 'vue'
 
 import AppIcon from '@/components/App/AppIcon.vue'
 
@@ -229,6 +229,13 @@ function handleClick(event: Event): void {
   }
 }
 
+// Make sure the polling interval (and any open popup) is torn down when the
+// component unmounts, otherwise the setInterval started in openPopup() keeps
+// firing against a destroyed instance.
+onUnmounted(() => {
+  cleanExistingPopupInstance()
+})
+
 defineExpose({
   base,
   args,
diff --git a/lib/components/SlideUpDown/SlideUpDown.vue b/lib/components/SlideUpDown/SlideUpDown.vue
index 9158d35..92d1637 100644
--- a/lib/components/SlideUpDown/SlideUpDown.vue
+++ b/lib/components/SlideUpDown/SlideUpDown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import type { CSSProperties } from 'vue'
 
 import { SlideUpDownState } from '@/enums'
@@ -89,6 +89,10 @@ async function triggerSlide(): Promise<void> {
   state.value = SlideUpDownState.active
 }
 
+function onTransitionEnd(e: TransitionEvent) {
+  cleanLayout(e)
+}
+
 function cleanLayout(e: Event | null) {
   // This method can be triggered by animated child elements in
   // which case, we should do anything
@@ -111,9 +115,11 @@ onMounted(async () => {
   await deferredNextTick()
   mounted.value = true
   await cleanLayout(null)
-  container.value?.addEventListener('transitionend', (e: TransitionEvent) =>
-    cleanLayout(e)
-  )
+  container.value?.addEventListener('transitionend', onTransitionEnd)
+})
+
+onUnmounted(() => {
+  container.value?.removeEventListener('transitionend', onTransitionEnd)
 })
 
 defineExpose({
diff --git a/lib/composables/useQueryObserver.ts b/lib/composables/useQueryObserver.ts
index 6e2a353..06bbae8 100644
--- a/lib/composables/useQueryObserver.ts
+++ b/lib/composables/useQueryObserver.ts
@@ -1,4 +1,4 @@
-import { computed, reactive, toRef, watch } from 'vue'
+import { computed, onScopeDispose, reactive, toRef, watch } from 'vue'
 import { first, get } from 'lodash'
 type ElementMap = Record<string, HTMLElement[]>
 
@@ -56,6 +56,12 @@ export function useQueryObserver(root = window.document, once = false) {
     return computed(() => get(elements, selector, []))
   }
 
+  onScopeDispose(() => {
+    for (const selector in observers) {
+      observers[selector].disconnect()
+    }
+  })
+
   return {
     querySelector,
     querySelectorAll
diff --git a/lib/composables/useResizeObserver.ts b/lib/composables/useResizeObserver.ts
index 878b0b9..6286576 100644
--- a/lib/composables/useResizeObserver.ts
+++ b/lib/composables/useResizeObserver.ts
@@ -1,7 +1,12 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { Ref } from 'vue'
+import debounce from 'lodash/debounce'
 import ResizeObserver from 'resize-observer-polyfill'
 
+// Coalesce resize bursts (e.g. a window/pane drag fires dozens per second) so
+// consumers only redraw once the dimensions settle, rather than every frame.
+const RESIZE_DEBOUNCE_MS = 100
+
 export function useResizeObserver(resizableRef?: Ref) {
   const resizeRef: Ref<HTMLElement> = resizableRef ?? ref()
   const resizeState = reactive({
@@ -10,25 +15,32 @@ export function useResizeObserver(resizableRef?: Ref) {
     narrowWidth: false
   })
 
-  const observer = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
-      resizeState.dimensions = entry.contentRect
-      resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
-      resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
-    })
-  })
+  const observer = new ResizeObserver(
+    debounce((entries: ResizeObserverEntry[]) => {
+      entries.forEach((entry) => {
+        resizeState.dimensions = entry.contentRect
+        resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
+        resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
+      })
+    }, RESIZE_DEBOUNCE_MS)
+  )
 
   onMounted(async () => {
-    // set initial dimensions right before observing: Element.getBoundingClientRect()
-    resizeState.dimensions = resizeRef.value.getBoundingClientRect()
-    resizeState.offsetWidth = resizeRef.value.offsetWidth
-    resizeState.narrowWidth = false // TODO CD: old default is false but maybe this would work (resizeState.offsetWidth ?? 540) < 540 but would be often true
+    if (resizeRef.value) {
+      // set initial dimensions right before observing: Element.getBoundingClientRect()
+      resizeState.dimensions = resizeRef.value.getBoundingClientRect()
+      resizeState.offsetWidth = resizeRef.value.offsetWidth
+      resizeState.narrowWidth = false // TODO CD: old default is false but maybe this would work (resizeState.offsetWidth ?? 540) < 540 but would be often true
 
-    observer.observe(resizeRef.value)
+      observer.observe(resizeRef.value)
+    }
   })
 
   onBeforeUnmount(() => {
-    observer.unobserve(resizeRef.value)
+    if (resizeRef.value) {
+      observer.unobserve(resizeRef.value)
+    }
+    observer.disconnect()
   })
 
   return { resizeState, resizeRef }
diff --git a/lib/directives/EllipsisTooltip.ts b/lib/directives/EllipsisTooltip.ts
index b334b97..a96f840 100644
--- a/lib/directives/EllipsisTooltip.ts
+++ b/lib/directives/EllipsisTooltip.ts
@@ -9,8 +9,12 @@ import {
   unbind,
 } from '@/utils/floatingUi'
 
+interface ElementWithResizeObserver extends ElementWithPopper {
+  $__ellipsisResizeObserver?: ResizeObserver
+}
+
 export default {
-  mounted(el: ElementWithPopper, binding: DirectiveBinding) {
+  mounted(el: ElementWithResizeObserver, binding: DirectiveBinding) {
     const props = resolveDirectiveProps(binding, el)
     const tooltip = resolveActiveStatus(binding.value)
     const text = resolveContent(binding.value, el)
@@ -30,10 +34,13 @@ export default {
       }
     })
 
+    el.$__ellipsisResizeObserver = resizeObserver
     resizeObserver.observe(el)
     toggleTooltip(el)
   },
-  beforeUnmount(el: ElementWithPopper) {
+  beforeUnmount(el: ElementWithResizeObserver) {
+    el.$__ellipsisResizeObserver?.disconnect()
+    delete el.$__ellipsisResizeObserver
     unbind(el)
   }
-} satisfies Directive<ElementWithPopper>
+} satisfies Directive<ElementWithResizeObserver>
diff --git a/lib/utils/assets.ts b/lib/utils/assets.ts
index 329828b..4a801cc 100644
--- a/lib/utils/assets.ts
+++ b/lib/utils/assets.ts
@@ -6,7 +6,7 @@ export const injectAsset = memoize(function (
   file: string,
   id = `dynamic-asset-${assetUniqueIdCounter++}`
 ): Promise<unknown> {
-  return new Promise((resolve: (value?: unknown) => void) => {
+  const promise = new Promise((resolve: (value?: unknown) => void, reject: (reason?: unknown) => void) => {
     const parent: HTMLElement
       = document.querySelector('body') || document.querySelector('head')!
     const parts = file.split('.')
@@ -16,6 +16,7 @@ export const injectAsset = memoize(function (
       const script = document.createElement('script')
       script.setAttribute('type', 'text/javascript')
       script.onload = resolve
+      script.onerror = reject
       parent.appendChild(script)
       script.setAttribute('src', file)
       script.setAttribute('id', id)
@@ -25,16 +26,29 @@ export const injectAsset = memoize(function (
       css.setAttribute('rel', 'stylesheet')
       css.setAttribute('type', 'text/css')
       css.onload = resolve
+      css.onerror = reject
       parent.appendChild(css)
       css.setAttribute('href', file)
       css.setAttribute('id', id)
     }
+    else {
+      reject(new Error(`Unsupported asset extension: ${ext}`))
+    }
+  })
+  // Don't keep a failed injection cached forever, so callers can retry later.
+  return promise.catch((err) => {
+    injectAsset.cache?.delete(file)
+    throw err
   })
 })
 
 export const injectAssets = function (...args: string[]): Promise<void> {
   const files = flatten(args)
   return new Promise((resolve: () => void) => {
+    if (files.length === 0) {
+      resolve()
+      return
+    }
     let filesLoaded = 0
     const allFilesLoaded = function () {
       if (++filesLoaded == files.length) {

From 9742cd00a94d32b98dc8e58b3c15aa603755c877 Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Tue, 16 Jun 2026 16:31:02 +0000
Subject: [PATCH 5/5] fix: address self-review findings on the code-review
 fixes

- FormControlSelectableDropdown: strip recycle_scroller_id from BOTH
  sides in firstActiveItemIndex so keyboard nav works after a click or
  range-select (activeItems then holds items_ entries that carry the key)
- assets: count a failed injection as settled (.catch(allFilesLoaded)) so
  one failed asset no longer leaves injectAssets pending forever
- ChoroplethMap: route resetZoom and setFeatureZoom through a shared
  activeZoomBehavior too, so spherical maps no longer dispatch those
  zooms via the planar handler
- useResizeObserver: cancel the debounced callback on unmount (and drop
  the now-redundant unobserve) so no trailing call fires after teardown
- useChart: dataHasHighlights falls back to the raw data prop so a
  synchronous array reports highlights on first paint
- FormAdvancedLink tests: import AdvancedLinkTab instead of the
  non-existent Tab type
---
 .../FormControlSelectableDropdown.vue         |  6 ++++-
 lib/composables/useChart.ts                   |  5 +++-
 lib/composables/useResizeObserver.ts          | 24 +++++++++----------
 lib/maps/ChoroplethMap/ChoroplethMap.vue      | 14 +++++++----
 lib/utils/assets.ts                           |  4 +++-
 .../FormAdvancedLink/FormAdvancedLink.spec.ts |  4 ++--
 .../FormAdvancedLinkTab.spec.ts               |  5 ++--
 7 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
index 737d5b7..5674225 100644
--- a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
+++ b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
@@ -143,8 +143,12 @@ const firstActiveItemIndex = computed(() => {
   if (typeof activeItem === 'string') {
     return items_.value.indexOf(activeItem)
   }
+  // activeItems may hold either a raw modelValue object (no recycle_scroller_id)
+  // or an items_ entry from a click/range-select (which carries it), so strip
+  // the injected key from both sides before comparing.
+  const target = omit(activeItem, 'recycle_scroller_id')
   return items_.value.findIndex(it =>
-    isEqual(omit(it, 'recycle_scroller_id'), activeItem)
+    isEqual(omit(it, 'recycle_scroller_id'), target)
   )
 })
 
diff --git a/lib/composables/useChart.ts b/lib/composables/useChart.ts
index 8f67bf3..bd4ba82 100644
--- a/lib/composables/useChart.ts
+++ b/lib/composables/useChart.ts
@@ -217,7 +217,10 @@ export function useChart(
   })
 
   const dataHasHighlights = computed(() => {
-    const data = loadedData.value
+    // Prefer loadedData (so URL-fetched data is inspected), but fall back to the
+    // raw prop so a synchronously-passed array reports highlights on first paint
+    // rather than flickering once the load watcher resolves.
+    const data = loadedData.value ?? toValue(dataRef)
     if (Array.isArray(data)) {
       return some(data, highlighted)
     }
diff --git a/lib/composables/useResizeObserver.ts b/lib/composables/useResizeObserver.ts
index 6286576..cb478f6 100644
--- a/lib/composables/useResizeObserver.ts
+++ b/lib/composables/useResizeObserver.ts
@@ -15,15 +15,15 @@ export function useResizeObserver(resizableRef?: Ref) {
     narrowWidth: false
   })
 
-  const observer = new ResizeObserver(
-    debounce((entries: ResizeObserverEntry[]) => {
-      entries.forEach((entry) => {
-        resizeState.dimensions = entry.contentRect
-        resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
-        resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
-      })
-    }, RESIZE_DEBOUNCE_MS)
-  )
+  const onResize = debounce((entries: ResizeObserverEntry[]) => {
+    entries.forEach((entry) => {
+      resizeState.dimensions = entry.contentRect
+      resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
+      resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
+    })
+  }, RESIZE_DEBOUNCE_MS)
+
+  const observer = new ResizeObserver(onResize)
 
   onMounted(async () => {
     if (resizeRef.value) {
@@ -37,9 +37,9 @@ export function useResizeObserver(resizableRef?: Ref) {
   })
 
   onBeforeUnmount(() => {
-    if (resizeRef.value) {
-      observer.unobserve(resizeRef.value)
-    }
+    // Drop any pending trailing call so it can't fire after teardown, then stop
+    // observing every element (disconnect covers unobserve).
+    onResize.cancel()
     observer.disconnect()
   })
 
diff --git a/lib/maps/ChoroplethMap/ChoroplethMap.vue b/lib/maps/ChoroplethMap/ChoroplethMap.vue
index e9c952e..75e5a07 100644
--- a/lib/maps/ChoroplethMap/ChoroplethMap.vue
+++ b/lib/maps/ChoroplethMap/ChoroplethMap.vue
@@ -372,6 +372,13 @@ const mapRotate = computed(() => {
   return d3.drag(map.value as any).on('drag', mapRotated)
 })
 
+// The zoom behavior actually bound to the selection (see prepareZoom): spherical
+// maps scale via mapSphericalZoom, planar maps via mapZoom. Programmatic zoom
+// must dispatch through this one so the matching handler runs.
+const activeZoomBehavior = computed(() => {
+  return props.spherical ? mapSphericalZoom.value : mapZoom.value
+})
+
 const mapHeight = computed(() => {
   return mapRect.value.height
 })
@@ -654,11 +661,10 @@ function applyZoomIdentity(
   // Dispatch through the behavior actually bound to the selection so the
   // matching handler runs (spherical applies scale only and preserves
   // rotation; planar applies the full transform).
-  const zoomBehavior = props.spherical ? mapSphericalZoom.value : mapZoom.value
   return map.value
     ?.transition()
     .duration(transitionDuration)
-    .call(zoomBehavior.transform as any, zoomIdentity, pointer)
+    .call(activeZoomBehavior.value.transform as any, zoomIdentity, pointer)
     .end()
 }
 
@@ -667,7 +673,7 @@ function resetZoom(_event: MouseEvent, _d: number) {
     ?.style('--map-scale', 1)
     .transition()
     .duration(props.transitionDuration)
-    .call((mapZoom.value as any)?.transform, d3.zoomIdentity)
+    .call((activeZoomBehavior.value as any)?.transform, d3.zoomIdentity)
   featureZoom.value = null
   emitResetEvent()
 }
@@ -701,7 +707,7 @@ function setFeatureZoom(d: any, pointer = [0, 0]) {
     ?.style('--map-scale', scale)
     .transition()
     .duration(props.transitionDuration)
-    .call((mapZoom.value as any)?.transform, zoomIdentity, pointer)
+    .call((activeZoomBehavior.value as any)?.transform, zoomIdentity, pointer)
     .end()
 }
 
diff --git a/lib/utils/assets.ts b/lib/utils/assets.ts
index 4a801cc..60baa51 100644
--- a/lib/utils/assets.ts
+++ b/lib/utils/assets.ts
@@ -56,9 +56,11 @@ export const injectAssets = function (...args: string[]): Promise<void> {
       }
     }
     for (const file of files) {
+      // Count a failed injection as "settled" too, otherwise one asset that
+      // fails to load leaves the batch promise pending forever.
       injectAsset(file)
         .then(allFilesLoaded)
-        .catch(() => null)
+        .catch(allFilesLoaded)
     }
   })
 }
diff --git a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
index d231114..fd623df 100644
--- a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
+++ b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
@@ -1,7 +1,7 @@
 import { mount, shallowMount, flushPromises } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import AdvancedLinkForm from '@/components/Form/FormAdvancedLink/FormAdvancedLink.vue'
-import { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 
 describe('AdvancedLinkForm.vue', () => {
   const global = { stubs: { HapticCopy: true }, renderStubDefaultSlot: true }
@@ -47,7 +47,7 @@ describe('AdvancedLinkForm.vue', () => {
   })
 
   it('should create only 3 forms, markdown active by default', async () => {
-    const propsData = { forms: ['raw', 'markdown', 'html'] as Tab[], modelValue: 1 }
+    const propsData = { forms: ['raw', 'markdown', 'html'] as AdvancedLinkTab[], modelValue: 1 }
     const wrapper = mount(AdvancedLinkForm, { propsData, global })
     await wrapper.vm.$nextTick()
     expect(wrapper.findAll('.tab-pane').length).toBe(3)
diff --git a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
index 2e97532..de52283 100644
--- a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
+++ b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
@@ -1,10 +1,11 @@
 import { mount, shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AdvancedLinkFormTab, { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import AdvancedLinkFormTab from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 interface AdvancedLinkFormTabsProps {
   readonly link: string
   readonly title: string
-  readonly type?: Tab
+  readonly type?: AdvancedLinkTab
 }
 
 describe('AdvancedLinkFormTab.vue', () => {