@graphenedata/cli 0.0.12 → 0.0.14

package/dist/ui/components/Column.svelte

@@ -1,116 +1,72 @@
-<script context="module">
+<script lang="ts" module>
   export const evidenceInclude = true
 </script>
 
 <script lang="ts">
-  import {getContext, onDestroy} from 'svelte'
+  import {getContext, onDestroy, onMount, untrack} from 'svelte'
+  import {type Writable, get} from 'svelte/store'
   import {propKey, strictBuild} from '../component-utilities/chartContext.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {toBoolean} from '../component-utilities/convert'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
-  export let id: string
-  export let description: string | undefined = undefined
-  export let contentType: string | undefined = undefined
-  export let title: string | undefined = undefined
-  export let align: string | undefined = undefined
-  export let wrap: boolean | string | undefined = undefined
-  export let wrapTitle: boolean | string | undefined = undefined
-  export let height: string | undefined = undefined
-  export let width: string | undefined = undefined
-  export let alt: string | undefined = undefined
-  export let openInNewTab: boolean | string | undefined = undefined
-  export let linkLabel: string | undefined = undefined
-  export let fmt: string | undefined = undefined
-  export let totalAgg: string | undefined = undefined
-  export let totalFmt: string | undefined = undefined
-  export let weightCol: string | undefined = undefined
-  export let subtotalFmt: string | undefined = undefined
-  export let colorMax: string | undefined = undefined
-  export let colorMin: string | undefined = undefined
-  export let colorMid: string | undefined = undefined
-  export let colorBreakpoints: string[] | undefined = undefined
-  export let colorScale: any = 'default'
-  export let scaleColumn: string | undefined = undefined
-  export let downIsGood: boolean | string | undefined = undefined
-  export let showValue: boolean | string | undefined = undefined
-  export let deltaSymbol: boolean | string | undefined = undefined
-  export let neutralMin: number | string | undefined = 0
-  export let neutralMax: number | string | undefined = 0
-  export let chip: boolean | string | undefined = undefined
-  export let sparkWidth: number | string | undefined = undefined
-  export let sparkHeight: number | string | undefined = undefined
-  export let sparkColor: string | undefined = undefined
-  export let sparkX: string | undefined = undefined
-  export let sparkY: string | undefined = undefined
-  export let sparkYScale: boolean | string | undefined = undefined
-  export let barColor: string | undefined = '#a5cdee'
-  export let negativeBarColor: string | undefined = '#fca5a5'
-  export let backgroundColor: string | undefined = 'transparent'
-  export let hideLabels: boolean | string | undefined = undefined
-  export let colGroup: string | undefined = undefined
-  export let fmtColumn: string | undefined = undefined
-  export let redNegatives: boolean | string | undefined = undefined
+  interface Props {
+    id: string, description?: string, contentType?: string, title?: string, align?: string
+    wrap?: boolean | string, wrapTitle?: boolean | string, height?: string, width?: string, alt?: string
+    openInNewTab?: boolean | string, linkLabel?: string, fmt?: string, totalAgg?: string, totalFmt?: string
+    weightCol?: string, subtotalFmt?: string, colorMax?: string, colorMin?: string, colorMid?: string
+    colorBreakpoints?: string[], colorScale?: any, scaleColumn?: string, downIsGood?: boolean | string
+    showValue?: boolean | string, deltaSymbol?: boolean | string, neutralMin?: number | string
+    neutralMax?: number | string, chip?: boolean | string, sparkWidth?: number | string
+    sparkHeight?: number | string, sparkColor?: string, sparkX?: string, sparkY?: string
+    sparkYScale?: boolean | string, barColor?: string, negativeBarColor?: string, backgroundColor?: string
+    hideLabels?: boolean | string, colGroup?: string, fmtColumn?: string, redNegatives?: boolean | string
+  }
 
-  const {resolveColor, resolveColorPalette} = getThemeStores()
+  let {
+    id, description = undefined, contentType = undefined, title = undefined, align = undefined,
+    wrap = undefined, wrapTitle = undefined, height = undefined, width = undefined, alt = undefined,
+    openInNewTab = undefined, linkLabel = undefined, fmt = undefined, totalAgg = undefined,
+    totalFmt = undefined, weightCol = undefined, subtotalFmt = undefined, colorMax = undefined,
+    colorMin = undefined, colorMid = undefined, colorBreakpoints = undefined, colorScale = 'default',
+    scaleColumn = undefined, downIsGood = undefined, showValue = undefined, deltaSymbol = undefined,
+    neutralMin = 0, neutralMax = 0, chip = undefined, sparkWidth = undefined, sparkHeight = undefined,
+    sparkColor = undefined, sparkX = undefined, sparkY = undefined, sparkYScale = undefined,
+    barColor = '#a5cdee', negativeBarColor = '#fca5a5', backgroundColor = 'transparent',
+    hideLabels = undefined, colGroup = undefined, fmtColumn = undefined, redNegatives = undefined,
+  }: Props = $props()
 
-  let barColorStore = resolveColor(barColor)
-  let negativeBarColorStore = resolveColor(negativeBarColor)
-  let backgroundColorStore = resolveColor(backgroundColor)
-  let colorScaleStore = resolveColorPalette(colorScale)
+  const {resolveColor, resolveColorPalette} = getThemeStores()
 
-  $: barColorStore = resolveColor(barColor)
-  $: negativeBarColorStore = resolveColor(negativeBarColor)
-  $: backgroundColorStore = resolveColor(backgroundColor)
-  $: colorScaleStore = resolveColorPalette(colorScale)
+  // Get stores reactively - use $derived to track prop changes
+  let barColorStore = $derived(resolveColor(barColor))
+  let negativeBarColorStore = $derived(resolveColor(negativeBarColor))
+  let backgroundColorStore = $derived(resolveColor(backgroundColor))
+  let colorScaleStore = $derived(resolveColorPalette(colorScale))
 
-  const props = getContext(propKey)
-  $: colorBreakpoints = parseCommaList(colorBreakpoints)
+  const chartProps = getContext<Writable<any>>(propKey)
 
   const identifier = Symbol('GrapheneColumn')
 
-  wrap = toBoolean(wrap) ?? false
-  wrapTitle = toBoolean(wrapTitle) ?? false
-  openInNewTab = toBoolean(openInNewTab) ?? false
-  downIsGood = toBoolean(downIsGood) ?? false
-  showValue = toBoolean(showValue) ?? true
-  deltaSymbol = toBoolean(deltaSymbol) ?? true
-  chip = toBoolean(chip) ?? false
-  sparkYScale = toBoolean(sparkYScale) ?? false
-  hideLabels = toBoolean(hideLabels) ?? false
-  redNegatives = toBoolean(redNegatives) ?? false
-
   const coerceNumber = (value: number | string | undefined): number | undefined => {
     if (value === undefined || value === null || value === '') return undefined
     let parsed = Number(value)
     return Number.isNaN(parsed) ? undefined : parsed
   }
 
-  const checkColumnName = () => {
-    try {
-      let data = $props.data?.[0]
-      if (!data || !Object.keys(data).includes(id)) {
-        let error = `Error in table: ${id} does not exist in the dataset`
-        if (strictBuild) throw new Error(error)
-        console.warn(error)
-      }
-    } catch (error) {
-      if (strictBuild) throw error
-    }
-  }
-
-  const options = () => ({
+  // Build the column options object - as a function so it can be called synchronously
+  const getColumnOptions = () => ({
     identifier,
     id,
     title,
     align,
-    wrap,
-    wrapTitle,
+    wrap: toBoolean(wrap) ?? false,
+    wrapTitle: toBoolean(wrapTitle) ?? false,
     contentType,
     height,
     width,
     alt,
-    openInNewTab,
+    openInNewTab: toBoolean(openInNewTab) ?? false,
     linkLabel,
     fmt,
     fmtColumn,
@@ -118,57 +74,90 @@
     totalFmt,
     subtotalFmt,
     weightCol,
-    downIsGood,
-    deltaSymbol,
-    chip,
+    downIsGood: toBoolean(downIsGood) ?? false,
+    deltaSymbol: toBoolean(deltaSymbol) ?? true,
+    chip: toBoolean(chip) ?? false,
     neutralMin: coerceNumber(neutralMin) ?? 0,
     neutralMax: coerceNumber(neutralMax) ?? 0,
-    showValue,
+    showValue: toBoolean(showValue) ?? true,
     colorMax,
     colorMin,
     colorMid,
-    colorScale: $colorScaleStore,
-    colorBreakpoints,
+    colorScale: get(colorScaleStore),
+    colorBreakpoints: parseCommaList(colorBreakpoints),
     scaleColumn,
     colGroup,
     description,
-    redNegatives,
+    redNegatives: toBoolean(redNegatives) ?? false,
     sparkWidth,
     sparkHeight,
     sparkColor,
     sparkX,
     sparkY,
-    sparkYScale,
-    barColor: $barColorStore,
-    negativeBarColor: $negativeBarColorStore,
-    backgroundColor: $backgroundColorStore,
-    hideLabels,
+    sparkYScale: toBoolean(sparkYScale) ?? false,
+    barColor: get(barColorStore),
+    negativeBarColor: get(negativeBarColorStore),
+    backgroundColor: get(backgroundColorStore),
+    hideLabels: toBoolean(hideLabels) ?? false,
   })
 
-  const updateProps = () => {
-    checkColumnName()
-    props.update((state: any) => {
-      let next = {...state}
-      let existing = next.columns.findIndex((column: any) => column.identifier === identifier)
-      let option = options()
-      if (existing === -1) {
-        next.columns = [...next.columns, option]
-      } else {
-        next.columns = [
-          ...next.columns.slice(0, existing),
-          option,
-          ...next.columns.slice(existing + 1),
-        ]
+  // Register column on mount
+  onMount(() => {
+    // Check column name once on mount (not reactively)
+    try {
+      let data = get(chartProps).data?.[0]
+      if (data && !Object.keys(data).includes(id)) {
+        let error = `Error in table: ${id} does not exist in the dataset`
+        if (strictBuild) throw new Error(error)
+        console.warn(error)
       }
+    } catch (error) {
+      if (strictBuild) throw error
+    }
+
+    // Initial registration
+    chartProps.update((state: any) => {
+      let next = {...state, columns: [...state.columns, getColumnOptions()]}
       return next
     })
-  }
+  })
 
-  $: updateProps()
+  // Update column options when props change
+  // Track all the props that affect columnOptions
+  $effect(() => {
+    // Read all props that could change
+    void [id, title, align, wrap, wrapTitle, contentType, height, width, alt, openInNewTab,
+      linkLabel, fmt, fmtColumn, totalAgg, totalFmt, subtotalFmt, weightCol, downIsGood,
+      deltaSymbol, chip, neutralMin, neutralMax, showValue, colorMax, colorMin, colorMid,
+      colorScale, colorBreakpoints, scaleColumn, colGroup, description, redNegatives,
+      sparkWidth, sparkHeight, sparkColor, sparkX, sparkY, sparkYScale, barColor,
+      negativeBarColor, backgroundColor, hideLabels]
+    // Also track store values
+    void [$colorScaleStore, $barColorStore, $negativeBarColorStore, $backgroundColorStore]
+
+    // Use untrack to prevent this update from creating a dependency loop
+    untrack(() => {
+      chartProps.update((state: any) => {
+        let next = {...state}
+        let existing = next.columns.findIndex((column: any) => column.identifier === identifier)
+        let option = getColumnOptions()
+        if (existing !== -1) {
+          next.columns = [
+            ...next.columns.slice(0, existing),
+            option,
+            ...next.columns.slice(existing + 1),
+          ]
+        }
+        return next
+      })
+    })
+  })
 
   onDestroy(() => {
-    props.update((state: any) => {
-      return {...state, columns: state.columns.filter((column: any) => column.identifier !== identifier)}
+    untrack(() => {
+      chartProps.update((state: any) => {
+        return {...state, columns: state.columns.filter((column: any) => column.identifier !== identifier)}
+      })
     })
   })
 </script>

package/dist/ui/components/DateRange.svelte

@@ -2,17 +2,25 @@
   import {onMount} from 'svelte'
   import {toBoolean} from '../component-utilities/inputUtils'
 
-  export let name: string
-  export let label: string | undefined = undefined
-  export let title: string | undefined = undefined
-  export let description: string | undefined = undefined
-  export let start: string | Date | undefined = undefined
-  export let end: string | Date | undefined = undefined
-  export let defaultValue: string | undefined = undefined
-  export let presetRanges: string | string[] | undefined = undefined
-  export let data: string | undefined = undefined
-  export let dates: string | undefined = undefined
-  export let hideDuringPrint: boolean | string = true
+  interface Props {
+    name: string
+    label?: string
+    title?: string
+    description?: string
+    start?: string | Date
+    end?: string | Date
+    defaultValue?: string
+    presetRanges?: string | string[]
+    data?: string
+    dates?: string
+    hideDuringPrint?: boolean | string
+  }
+
+  let {
+    name, label = undefined, title = undefined, description = undefined, start = undefined,
+    end = undefined, defaultValue = undefined, presetRanges = undefined, data = undefined,
+    dates = undefined, hideDuringPrint = true,
+  }: Props = $props()
 
   const DEFAULT_PRESETS = ['Last 7 Days', 'Last 30 Days', 'Last 90 Days', 'Last 365 Days', 'Last Month', 'Last Year', 'Month to Date', 'Month to Today', 'Year to Date', 'Year to Today', 'All Time']
 
@@ -20,21 +28,21 @@
   let queryKey = ''
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
 
-  let domainStart: string | null = null
-  let domainEnd: string | null = null
+  let domainStart: string | null = $state(null)
+  let domainEnd: string | null = $state(null)
 
-  let currentStart: string | null = null
-  let currentEnd: string | null = null
-  let currentPreset: string = ''
+  let currentStart: string | null = $state(null)
+  let currentEnd: string | null = $state(null)
+  let currentPreset: string = $state('')
   let touched = false
 
-  $: hidePrint = toBoolean(hideDuringPrint)
-  $: presetList = (() => {
+  let hidePrint = $derived(toBoolean(hideDuringPrint))
+  let presetList = $derived((() => {
     if (Array.isArray(presetRanges)) return presetRanges
     if (presetRanges) return [presetRanges]
     return DEFAULT_PRESETS
-  })()
-  $: displayLabel = title || label
+  })())
+  let displayLabel = $derived(title || label)
 
   onMount(() => {
     mounted = true
@@ -55,7 +63,9 @@
     }
   })
 
-  $: refreshQuery()
+  $effect(() => {
+    refreshQuery()
+  })
 
   function refreshQuery () {
     if (!mounted) return
@@ -108,7 +118,7 @@
   }
 
   function addDays (value: Date, days: number): Date {
-    let copy = new Date(value)
+    let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setDate(copy.getDate() + days)
     return copy
   }
@@ -128,13 +138,13 @@
   }
 
   function addMonths (value: Date, months: number): Date {
-    let copy = new Date(value)
+    let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setMonth(copy.getMonth() + months)
     return copy
   }
 
   function addYears (value: Date, years: number): Date {
-    let copy = new Date(value)
+    let copy = new Date(value) // eslint-disable-line svelte/prefer-svelte-reactivity
     copy.setFullYear(copy.getFullYear() + years)
     return copy
   }
@@ -263,12 +273,12 @@
     <div class="input-description">{description}</div>
   {/if}
   <div class="range-row">
-    <input id={`daterange-${name}-start`} class="date-input" type="date" value={currentStart || ''} on:change={onStartChange} />
+    <input id={`daterange-${name}-start`} class="date-input" type="date" value={currentStart || ''} onchange={onStartChange} />
     <span class="range-separator">to</span>
-    <input id={`daterange-${name}-end`} class="date-input" type="date" value={currentEnd || ''} on:change={onEndChange} />
+    <input id={`daterange-${name}-end`} class="date-input" type="date" value={currentEnd || ''} onchange={onEndChange} />
   </div>
   {#if presetList.length}
-    <select class="preset-select" on:change={onPresetChange}>
+    <select class="preset-select" onchange={onPresetChange}>
       <option value="">Custom range</option>
       {#each presetList as preset (preset)}
         <option value={preset} selected={preset === currentPreset}>{preset}</option>

package/dist/ui/components/Dropdown.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount, setContext, tick} from 'svelte'
+  import {onMount, setContext, tick, type Snippet} from 'svelte'
   import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
   import {ensureArray, toBoolean} from '../component-utilities/inputUtils'
 
@@ -8,38 +8,48 @@
     label: string
   }
 
-  export let name: string
-  export let data: string | undefined = undefined
-  export let value: string = 'value'
-  export let label: string | undefined = undefined
-  export let optionLabel: string | undefined = undefined
-  export let labelField: string | undefined = undefined
-  export let title: string | undefined = undefined
-  export let placeholder: string = 'Select option'
-  export let multiple: boolean | string = false
-  export let defaultValue: string | string[] | undefined = undefined
-  export let selectAllByDefault: boolean | string = false
-  export let noDefault: boolean | string = false
-  export let disableSelectAll: boolean | string = false
-  export let hideDuringPrint: boolean | string = true
-  export let description: string | undefined = undefined
-  export let disabled: boolean | string = false
+  interface Props {
+    name: string
+    data?: string
+    value?: string
+    label?: string
+    optionLabel?: string
+    labelField?: string
+    title?: string
+    placeholder?: string
+    multiple?: boolean | string
+    defaultValue?: string | string[]
+    selectAllByDefault?: boolean | string
+    noDefault?: boolean | string
+    disableSelectAll?: boolean | string
+    hideDuringPrint?: boolean | string
+    description?: string
+    disabled?: boolean | string
+    children?: Snippet
+  }
+
+  let {
+    name, data = undefined, value = 'value', label = undefined, optionLabel = undefined,
+    labelField = undefined, title = undefined, placeholder = 'Select option', multiple = false,
+    defaultValue = undefined, selectAllByDefault = false, noDefault = false, disableSelectAll = false,
+    hideDuringPrint = true, description = undefined, disabled = false, children = undefined,
+  }: Props = $props()
 
   let mounted = false
-  let queryOptions: Option[] = []
-  let manualOptions: Option[] = []
-  let selection: any[] = []
+  let queryOptions: Option[] = $state([])
+  let manualOptions: Option[] = $state([])
+  let selection: any[] = $state([])
   let touched = false
   let queryHandler: ((res: {rows?: any[]; error?: any}) => void) | null = null
   let queryKey = ''
 
-  let isOpen = false
-  let searchTerm = ''
-  let activeIndex = -1
-  let triggerEl: HTMLButtonElement | null = null
-  let menuEl: HTMLDivElement | null = null
-  let searchInput: HTMLInputElement | null = null
-  let triggerWidth = 0
+  let isOpen = $state(false)
+  let searchTerm = $state('')
+  let activeIndex = $state(-1)
+  let triggerEl: HTMLButtonElement | null = $state(null)
+  let menuEl: HTMLDivElement | null = $state(null)
+  let searchInput: HTMLInputElement | null = $state(null)
+  let triggerWidth = $state(0)
 
   const registerOption = (opt: Option) => {
     manualOptions = [...manualOptions, opt]
@@ -65,7 +75,7 @@
   }
 
   const combineOptions = (manual: Option[], queried: Option[]) => {
-    let map = new Map<string, Option>()
+    let map = new Map<string, Option>() // eslint-disable-line svelte/prefer-svelte-reactivity
     for (let opt of [...manual, ...queried]) {
       let key = optionKey(opt.value)
       if (!map.has(key)) map.set(key, opt)
@@ -73,23 +83,26 @@
     return Array.from(map.values())
   }
 
-  $: multi = toBoolean(multiple)
-  $: selectAllDefault = toBoolean(selectAllByDefault)
-  $: hasNoDefault = toBoolean(noDefault)
-  $: hidePrint = toBoolean(hideDuringPrint)
-  $: isDisabled = toBoolean(disabled)
-  $: disableSelectAllButton = toBoolean(disableSelectAll)
+  let multi = $derived(toBoolean(multiple))
+  let selectAllDefault = $derived(toBoolean(selectAllByDefault))
+  let hasNoDefault = $derived(toBoolean(noDefault))
+  let hidePrint = $derived(toBoolean(hideDuringPrint))
+  let isDisabled = $derived(toBoolean(disabled))
+  let disableSelectAllButton = $derived(toBoolean(disableSelectAll))
 
-  $: resolvedLabelField = optionLabel || labelField || (label && data ? label : undefined)
-  $: resolvedTitle = title || (!data ? label : undefined)
-  $: triggerPlaceholder = placeholder || resolvedTitle || 'Select option'
-  $: searchPlaceholder = resolvedTitle || placeholder || 'Search options'
+  let resolvedLabelField = $derived(optionLabel || labelField || (label && data ? label : undefined))
+  let resolvedTitle = $derived(title || (!data ? label : undefined))
+  let triggerPlaceholder = $derived(placeholder || resolvedTitle || 'Select option')
+  let searchPlaceholder = $derived(resolvedTitle || placeholder || 'Search options')
 
-  $: availableOptions = combineOptions(manualOptions, queryOptions)
-  $: valueMap = new Map(availableOptions.map(opt => [optionKey(opt.value), opt]))
-  $: filteredOptions = filterOptions(availableOptions, searchTerm)
-  $: if (isOpen) activeIndex = ensureActiveIndex(activeIndex, filteredOptions)
-  $: selectedDisplayOptions = selection.map(val => valueMap.get(optionKey(val)) || {value: val, label: String(val ?? '')})
+  let availableOptions = $derived(combineOptions(manualOptions, queryOptions))
+  let valueMap = $derived(new Map(availableOptions.map(opt => [optionKey(opt.value), opt])))
+  let filteredOptions = $derived(filterOptions(availableOptions, searchTerm))
+  let selectedDisplayOptions = $derived(selection.map(val => valueMap.get(optionKey(val)) || {value: val, label: String(val ?? '')}))
+
+  $effect(() => {
+    if (isOpen) activeIndex = ensureActiveIndex(activeIndex, filteredOptions)
+  })
 
   function setupQuery () {
     if (!mounted) return
@@ -276,7 +289,9 @@
     optionEl?.scrollIntoView({block: 'nearest'})
   }
 
-  $: if (isOpen && activeIndex >= 0) tick().then(scrollActiveIntoView)
+  $effect(() => {
+    if (isOpen && activeIndex >= 0) tick().then(scrollActiveIntoView)
+  })
 
   onMount(() => {
     mounted = true
@@ -303,9 +318,13 @@
     }
   })
 
-  $: setupQuery()
+  $effect(() => {
+    setupQuery()
+  })
 
-  $: if (triggerEl) updateTriggerWidth()
+  $effect(() => {
+    if (triggerEl) updateTriggerWidth()
+  })
 
   function syncSelection (fromUser: boolean) {
     let opts = availableOptions
@@ -356,8 +375,8 @@
     setSelection([], true)
   }
 
-  const elementId = `dropdown-${name}`
-  const menuId = `${elementId}-menu`
+  let elementId = $derived(`dropdown-${name}`)
+  let menuId = $derived(`${elementId}-menu`)
 
   function getContainerClass () {
     if (!hidePrint) return 'input-block'
@@ -377,6 +396,7 @@
   }
 </script>
 
+{@render children?.()}
 <div class={getContainerClass()}>
   {#if resolvedTitle}
     <label class="input-label" for={elementId}>{resolvedTitle}</label>
@@ -397,8 +417,8 @@
       aria-expanded={isOpen}
       aria-controls={menuId}
       aria-activedescendant={isOpen && activeIndex >= 0 ? `${menuId}-option-${activeIndex}` : undefined}
-      on:click={toggleMenu}
-      on:keydown={handleTriggerKeydown}
+      onclick={toggleMenu}
+      onkeydown={handleTriggerKeydown}
     >
       <span class="dropdown-trigger-label">
         {#if multi}
@@ -432,7 +452,7 @@
         tabindex="0"
         aria-multiselectable={multi}
         style={`min-width: ${Math.max(triggerWidth, 220)}px`}
-        on:keydown={handleMenuKeydown}
+        onkeydown={handleMenuKeydown}
       >
         <div class="dropdown-search">
           <input
@@ -455,10 +475,10 @@
                 aria-selected={isOptionSelected(opt)}
                 data-index={index}
                 id={`${menuId}-option-${index}`}
-                on:mousedown|preventDefault
-                on:mouseenter={() => activeIndex = index}
-                on:click={() => handleOptionSelect(opt, false)}
-                on:keydown={(event) => handleOptionKeydown(event, opt)}
+                onmousedown={(e) => e.preventDefault()}
+                onmouseenter={() => activeIndex = index}
+                onclick={() => handleOptionSelect(opt, false)}
+                onkeydown={(event) => handleOptionKeydown(event, opt)}
               >
                 <span class="dropdown-check" aria-hidden="true">
                   {#if multi}
@@ -501,13 +521,13 @@
         {#if multi}
           <div class="dropdown-footer">
             {#if !disableSelectAllButton}
-              <button type="button" class="dropdown-footer-action" on:click|stopPropagation={(event) => { event.preventDefault(); selectAll() }}>Select all</button>
+              <button type="button" class="dropdown-footer-action" onclick={(event) => { event.stopPropagation(); event.preventDefault(); selectAll() }}>Select all</button>
             {/if}
             <button
               type="button"
               class="dropdown-footer-action"
               disabled={!selection.length}
-              on:click|stopPropagation={(event) => { event.preventDefault(); clearSelection() }}
+              onclick={(event) => { event.stopPropagation(); event.preventDefault(); clearSelection() }}
             >
               Clear selection
             </button>

package/dist/ui/components/DropdownOption.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  import {getContext, onDestroy, onMount} from 'svelte'
+  import {getContext, onMount} from 'svelte'
   import {DROPDOWN_CONTEXT} from '../component-utilities/dropdownContext'
 
-  export let value: any
-  export let valueLabel: string | undefined = undefined
+  interface Props {
+    value: any
+    valueLabel?: string
+  }
+
+  let {value, valueLabel = undefined}: Props = $props()
 
   type RegisterFn = ((option: {value: any; label: string}) => (() => void) | void) | undefined
   const register = getContext<RegisterFn>(DROPDOWN_CONTEXT)
@@ -13,9 +17,8 @@
   onMount(() => {
     if (!register) return
     unregister = register({value, label: valueLabel ?? String(value)})
-  })
-
-  onDestroy(() => {
-    if (typeof unregister === 'function') unregister()
+    return () => {
+      if (typeof unregister === 'function') unregister()
+    }
   })
 </script>