termcast 1.6.0 → 1.7.0

package/src/components/chart-tooltip.tsx

@@ -0,0 +1,191 @@
+/**
+ * Shared tooltip component for all chart/graph components.
+ *
+ * Renders an absolute-positioned box near the cursor showing the x-axis label
+ * and y-axis value for the hovered data point. Used by BarGraph, Graph,
+ * DottedLineGraph, HorizontalBarGraph, BarChart, and CandleChart.
+ *
+ * Each chart wraps its plot area with a container that handles mouse events
+ * and converts cursor coordinates to tooltip content via `useChartTooltip()`.
+ */
+
+import React, { useState, useRef } from 'react'
+import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
+import { useTheme } from 'termcast/src/theme'
+
+// ── Tooltip state ────────────────────────────────────────────────────
+
+export interface TooltipData {
+  /** Absolute terminal X where the tooltip should appear */
+  x: number
+  /** Absolute terminal Y where the tooltip should appear */
+  y: number
+  /** Lines of text to show in the tooltip */
+  lines: string[]
+}
+
+export interface ChartTooltipState {
+  tooltip: TooltipData | null
+  show: (data: TooltipData) => void
+  hide: () => void
+}
+
+/**
+ * Hook to manage tooltip state. Each chart component calls this once
+ * and passes `show`/`hide` to mouse event handlers.
+ */
+export function useChartTooltip(): ChartTooltipState {
+  const [tooltip, setTooltip] = useState<TooltipData | null>(null)
+  const showRef = useRef((data: TooltipData) => {
+    setTooltip(data)
+  })
+  const hideRef = useRef(() => {
+    setTooltip(null)
+  })
+  return { tooltip, show: showRef.current, hide: hideRef.current }
+}
+
+// ── Tooltip component ────────────────────────────────────────────────
+
+interface ChartTooltipProps {
+  tooltip: TooltipData | null
+  /** The ref of the chart container box, used to compute relative position */
+  containerRef: React.RefObject<{ x: number; y: number; width: number; height: number } | null>
+}
+
+/**
+ * Absolute-positioned tooltip that floats near the hovered data point.
+ * Must be rendered inside the chart's outermost `<box>` container.
+ *
+ * Position is computed relative to the container. The tooltip shifts
+ * left when it would overflow the right edge, and shifts above the
+ * cursor when it would overflow the bottom.
+ */
+export function ChartTooltip({ tooltip, containerRef }: ChartTooltipProps): any {
+  const theme = useTheme()
+
+  if (!tooltip || !containerRef.current) {
+    return null
+  }
+
+  const container = containerRef.current
+  const maxWidth = Math.max(...tooltip.lines.map((line) => line.length)) + 2
+  const tooltipHeight = tooltip.lines.length
+
+  // Convert absolute terminal coordinates to relative container coordinates
+  let relX = tooltip.x - container.x + 2
+  let relY = tooltip.y - container.y - tooltipHeight
+
+  // Shift left if tooltip would overflow the right edge
+  if (relX + maxWidth > container.width) {
+    relX = Math.max(0, container.width - maxWidth)
+  }
+
+  // Shift below cursor if tooltip would overflow the top
+  if (relY < 0) {
+    relY = tooltip.y - container.y + 1
+  }
+
+  return (
+    <box
+      position="absolute"
+      left={relX}
+      top={relY}
+      height={tooltipHeight}
+      overflow="hidden"
+      flexShrink={0}
+      backgroundColor={theme.backgroundPanel}
+    >
+      {tooltip.lines.map((line, i) => {
+        return (
+          <text key={i} fg={theme.text} wrapMode="none"> {line} </text>
+        )
+      })}
+    </box>
+  )
+}
+
+// ── Helpers for renderable-based charts ──────────────────────────────
+
+/**
+ * For renderable-based charts (Graph, DottedLineGraph, CandleChart), compute
+ * which data index the cursor is hovering over based on the mouse X coordinate
+ * relative to the plot area.
+ */
+export function computeDataIndexFromMouseX({
+  mouseX,
+  plotX,
+  plotW,
+  dataLength,
+}: {
+  mouseX: number
+  plotX: number
+  plotW: number
+  dataLength: number
+}): number {
+  if (dataLength <= 0 || plotW <= 0) return -1
+  const relX = mouseX - plotX
+  if (relX < 0 || relX >= plotW) return -1
+  return Math.round((relX / Math.max(1, plotW - 1)) * (dataLength - 1))
+}
+
+/**
+ * Resolve the x-axis label for a given data index.
+ *
+ * When xLabels has at least as many entries as data points (1:1 mapping,
+ * typical for BarGraph where each bar has its own label), the label is
+ * looked up directly by index.
+ *
+ * When xLabels is shorter (typical for line charts where a few tick labels
+ * are spread across many data points), the label is interpolated by mapping
+ * the normalized data position to the nearest label.
+ *
+ * Falls back to the stringified index only if no labels are provided at all.
+ */
+export function interpolateXLabel({
+  dataIndex,
+  dataLength,
+  xLabels,
+}: {
+  dataIndex: number
+  dataLength: number
+  xLabels: string[]
+}): string {
+  if (xLabels.length === 0) return `${dataIndex}`
+
+  // 1:1 mapping: xLabels covers every data point
+  const hasDirectLabels = xLabels.length >= dataLength
+  if (hasDirectLabels) {
+    const direct = xLabels[dataIndex]
+    if (direct !== undefined && direct !== '') return direct
+    return `${dataIndex}`
+  }
+
+  // Sparse labels: interpolate by normalized position
+  if (dataLength <= 1) return xLabels[0] || `${dataIndex}`
+  const t = dataIndex / (dataLength - 1)
+  const labelIdx = Math.round(t * (xLabels.length - 1))
+  const resolved = xLabels[labelIdx]
+  if (resolved !== undefined && resolved !== '') return resolved
+
+  // Scan for nearest non-empty label
+  let bestIdx = -1
+  let bestDist = Infinity
+  for (let i = 0; i < xLabels.length; i++) {
+    if (xLabels[i] === undefined || xLabels[i] === '') continue
+    const dist = Math.abs(i - labelIdx)
+    if (dist < bestDist) {
+      bestDist = dist
+      bestIdx = i
+    }
+  }
+  if (bestIdx >= 0) return xLabels[bestIdx]!
+  return `${dataIndex}`
+}
+
+/**
+ * Format a single tooltip line from a label and numeric value.
+ */
+export function formatTooltipLine(label: string, value: number | string): string {
+  return `${label}: ${value}`
+}

package/src/components/dotted-line-graph.tsx

@@ -5,12 +5,13 @@
  * can move by half columns and quarter rows instead of snapping to full cells.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { Renderable, RGBA } from '@opentui/core'
-import type { OptimizedBuffer, RenderableOptions, RenderContext } from '@opentui/core'
+import type { OptimizedBuffer, RenderableOptions, RenderContext, MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import { extend } from '@opentui/react'
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getThemePalette, useTheme } from 'termcast/src/theme'
+import { ChartTooltip, useChartTooltip, computeDataIndexFromMouseX, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 const BRAILLE_BITS: number[][] = [
   [1, 8],
@@ -73,6 +74,12 @@ class DottedLineGraphPlotRenderable extends Renderable {
   set axisColor(value: string) { this._axisColor = value; this.requestRender() }
   set dotSpacing(value: number) { this._dotSpacing = value; this.requestRender() }
 
+  /** Public accessor for tooltip coordinate mapping */
+  getPlotLayout() { return this.computeLayout() }
+
+  /** Current series data for tooltip value lookup */
+  getSeries() { return this._series }
+
   private computeLayout(): {
     plotX: number
     plotY: number
@@ -314,6 +321,9 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
     children,
   } = props
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const plotRef = useRef<DottedLineGraphPlotRenderable>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   const series = useMemo<Array<DottedLineGraphSeriesData & { title?: string }>>(() => {
     return React.Children.toArray(children)
@@ -364,11 +374,46 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
     })) + 1
   }, [computedYRange, yFormat, yTicks])
 
+  const handleMouseMove = (evt: OpenTUIMouseEvent) => {
+    const plot = plotRef.current
+    if (!plot) return
+    const layout = plot.getPlotLayout()
+    if (!layout) return
+
+    const allSeries = plot.getSeries()
+    const maxDataLen = Math.max(0, ...allSeries.map((s) => s.data.length))
+    const idx = computeDataIndexFromMouseX({
+      mouseX: evt.x,
+      plotX: layout.plotX,
+      plotW: layout.plotW,
+      dataLength: maxDataLen,
+    })
+    if (idx < 0) {
+      hideTooltip()
+      return
+    }
+
+    const label = interpolateXLabel({ dataIndex: idx, dataLength: maxDataLen, xLabels })
+    const lines = series
+      .filter((s) => idx < s.data.length)
+      .map((s) => {
+        const value = s.data[idx] ?? 0
+        const prefix = s.title ? `${s.title}` : label
+        return formatTooltipLine(prefix, Number(value.toFixed(2)))
+      })
+    if (lines.length === 0) return
+    // Always show x-axis label as the header line
+    lines.unshift(label)
+    showTooltip({ x: evt.x, y: evt.y, lines })
+  }
+
   if (series.length === 0) return null
 
   return (
-    <box flexDirection="column" width="100%" flexShrink={0}>
+    <box ref={containerRef} flexDirection="column" width="100%" flexShrink={0} onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
       <dotted-line-graph-plot
+        ref={plotRef}
         width="100%"
         height={height + (xLabels.length > 0 ? 1 : 0)}
         series={plotSeries}
@@ -379,6 +424,7 @@ const DottedLineGraph: DottedLineGraphType = (props) => {
         yFormat={yFormat}
         axisColor={theme.textMuted}
         dotSpacing={dotSpacing}
+        onMouseMove={handleMouseMove}
       />
       {legendVisible ? (
         <box height={1} width="100%" flexShrink={0} overflow="hidden" flexDirection="row">

package/src/components/graph.tsx

@@ -20,13 +20,14 @@
  * For a plot of W cols x H rows we get W*2 x H*4 virtual pixels.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { Renderable, RGBA } from '@opentui/core'
-import type { RenderableOptions, RenderContext } from '@opentui/core'
+import type { RenderableOptions, RenderContext, MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import type { OptimizedBuffer } from '@opentui/core'
 import { extend } from '@opentui/react'
 import { useTheme, getThemePalette } from 'termcast/src/theme'
 import { Color, resolveColor } from 'termcast/src/colors'
+import { ChartTooltip, useChartTooltip, computeDataIndexFromMouseX, interpolateXLabel, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 // ── Graph variant ────────────────────────────────────────────────────
 // Three rendering modes for the plot area:
@@ -124,6 +125,12 @@ export class GraphPlotRenderable extends Renderable {
   set stripeColor1(value: string) { this._stripeColor1 = value; this.requestRender() }
   set stripeColor2(value: string) { this._stripeColor2 = value; this.requestRender() }
 
+  /** Public accessor for tooltip coordinate mapping */
+  getPlotLayout() { return this.computeLayout() }
+
+  /** Current series data for tooltip value lookup */
+  getSeries() { return this._series }
+
   // ── Shared: compute layout and draw axes ─────────────────────
   private computeLayout(): {
     plotX: number; plotY: number; plotW: number; plotH: number
@@ -440,10 +447,13 @@ const Graph: GraphType = (props) => {
   const { height = 15, xLabels = [], yRange, yTicks = 5, yFormat, variant = 'area', stripeColors, children } = props
 
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const plotRef = useRef<GraphPlotRenderable>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   // Collect series data from Graph.Line children
-  const series = useMemo<SeriesData[]>(() => {
-    const result: SeriesData[] = []
+  const seriesWithTitles = useMemo<Array<SeriesData & { title?: string }>>(() => {
+    const result: Array<SeriesData & { title?: string }> = []
     let colorIndex = 0
     React.Children.forEach(children, (child) => {
       if (!React.isValidElement(child)) return
@@ -454,12 +464,18 @@ const Graph: GraphType = (props) => {
       result.push({
         data: childProps.data,
         color,
+        title: childProps.title,
       })
       colorIndex++
     })
     return result
   }, [children, palette])
 
+  // Strip titles for the renderable (it only needs data + color)
+  const series = useMemo<SeriesData[]>(() => {
+    return seriesWithTitles.map((s) => ({ data: s.data, color: s.color }))
+  }, [seriesWithTitles])
+
   // Auto-compute Y range if not provided
   const computedYRange = useMemo<[number, number]>(() => {
     if (yRange) return yRange
@@ -484,21 +500,63 @@ const Graph: GraphType = (props) => {
   // Total height = plot rows + 1 for x-axis labels
   const totalHeight = height + (xLabels.length > 0 ? 1 : 0)
 
+  const handleMouseMove = (evt: OpenTUIMouseEvent) => {
+    const plot = plotRef.current
+    if (!plot) return
+    const layout = plot.getPlotLayout()
+    if (!layout) return
+
+    const allSeries = plot.getSeries()
+    const maxDataLen = Math.max(0, ...allSeries.map((s) => s.data.length))
+    const idx = computeDataIndexFromMouseX({
+      mouseX: evt.x,
+      plotX: layout.plotX,
+      plotW: layout.plotW,
+      dataLength: maxDataLen,
+    })
+    if (idx < 0) {
+      hideTooltip()
+      return
+    }
+
+    const label = interpolateXLabel({ dataIndex: idx, dataLength: maxDataLen, xLabels })
+    const lines = allSeries
+      .map((s, si) => ({ series: s, title: seriesWithTitles[si]?.title }))
+      .filter(({ series }) => idx < series.data.length)
+      .map(({ series, title }) => {
+        const value = series.data[idx]!
+        const prefix = title || label
+        return formatTooltipLine(prefix, Number(value.toFixed(2)))
+      })
+    if (lines.length === 0) {
+      hideTooltip()
+      return
+    }
+    // Always show x-axis label as the header line
+    lines.unshift(label)
+    showTooltip({ x: evt.x, y: evt.y, lines })
+  }
+
   return (
-    <graph-plot
-      width="100%"
-      height={totalHeight}
-      series={series}
-      xLabels={xLabels}
-      yMin={computedYRange[0]}
-      yMax={computedYRange[1]}
-      yTicks={yTicks}
-      yFormat={yFormat}
-      axisColor={theme.textMuted}
-      variant={variant}
-      stripeColor1={resolvedStripe1}
-      stripeColor2={resolvedStripe2}
-    />
+    <box ref={containerRef} width="100%" onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
+      <graph-plot
+        ref={plotRef}
+        width="100%"
+        height={totalHeight}
+        series={series}
+        xLabels={xLabels}
+        yMin={computedYRange[0]}
+        yMax={computedYRange[1]}
+        yTicks={yTicks}
+        yFormat={yFormat}
+        axisColor={theme.textMuted}
+        variant={variant}
+        stripeColor1={resolvedStripe1}
+        stripeColor2={resolvedStripe2}
+        onMouseMove={handleMouseMove}
+      />
+    </box>
   )
 }
 

package/src/components/horizontal-bar-graph.tsx

@@ -6,10 +6,12 @@
  * colored series rows and percentages.
  */
 
-import React, { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo, useRef } from 'react'
 import { BoxProps } from '@opentui/react'
+import type { MouseEvent as OpenTUIMouseEvent } from '@opentui/core'
 import { Color, resolveColor } from 'termcast/src/colors'
 import { getThemePalette, useTheme } from 'termcast/src/theme'
+import { ChartTooltip, useChartTooltip, formatTooltipLine } from 'termcast/src/components/chart-tooltip'
 
 export interface HorizontalBarGraphSeriesProps {
   /** One value per row/category position. */
@@ -97,6 +99,8 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
   } = props
 
   const palette = getThemePalette(theme)
+  const containerRef = useRef<any>(null)
+  const { tooltip, show: showTooltip, hide: hideTooltip } = useChartTooltip()
 
   const seriesList = useMemo<Array<{ data: number[]; color: string; title?: string }>>(() => {
     const childArray = React.Children.toArray(children)
@@ -189,7 +193,8 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
   const chartHeight = headerHeight + visibleRows.length
 
   return (
-    <box flexDirection="column" width="100%" flexShrink={0} {...rest}>
+    <box ref={containerRef} flexDirection="column" width="100%" flexShrink={0} {...rest} onMouseOut={hideTooltip}>
+      <ChartTooltip tooltip={tooltip} containerRef={containerRef} />
       {showHeader && (
         <>
           <box flexDirection="row" height={1} flexShrink={0}>
@@ -238,7 +243,22 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
                     }
                     const series = seriesList[seriesIndex]!
                     return (
-                      <box key={seriesIndex} flexGrow={value} flexBasis={0} flexShrink={1} overflow="hidden">
+                      <box
+                        key={seriesIndex}
+                        flexGrow={value}
+                        flexBasis={0}
+                        flexShrink={1}
+                        overflow="hidden"
+                        onMouseMove={(evt: OpenTUIMouseEvent) => {
+                          const label = row.label
+                          const seriesTitle = series.title || `#${seriesIndex + 1}`
+                          showTooltip({
+                            x: evt.x,
+                            y: evt.y,
+                            lines: [label, formatTooltipLine(seriesTitle, value)],
+                          })
+                        }}
+                      >
                         <box position="absolute" width="100%" height="100%" overflow="hidden">
                           <text fg={series.color} wrapMode="none">{barCharacter.repeat(200)}</text>
                         </box>
@@ -246,7 +266,7 @@ const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
                     )
                   })}
                   {maxTotal > row.total && (
-                    <box flexGrow={maxTotal - row.total} flexBasis={0} flexShrink={1} />
+                    <box flexGrow={maxTotal - row.total} flexBasis={0} flexShrink={1} onMouseMove={hideTooltip} />
                   )}
                 </box>
               </box>

package/src/components/list.tsx

@@ -164,15 +164,7 @@ function ListFooter(): any {
           </text>
         </Hoverable>
       )}
-      {!isVim && (
-        <Hoverable
-          onMouseDown={() => {
-            executeVimCommand('vim')
-          }}
-        >
-          <text flexShrink={0} fg={theme.textMuted}>:vim</text>
-        </Hoverable>
-      )}
+
     </box>
   )
 

package/src/examples/action-shortcut.vitest.tsx

@@ -61,7 +61,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
 
 
-       ↵ refresh   ↑↓ navigate   ^k actions   :vim
+       ↵ refresh   ↑↓ navigate   ^k actions
     "
   `)
 }, 30000)

package/src/examples/bar-graph-weekly.vitest.tsx

@@ -134,7 +134,7 @@ test('many series (8) bottom legend clips on one row', async () => {
                                             │
                                             │
                                             │
-       ↑↓ navigate   ^k actions   :vim      │
+       ↑↓ navigate   ^k actions             │
 
     "
   `)
@@ -188,7 +188,7 @@ test('long labels truncated by overflow hidden', async () => {
                                             │
                                             │
                                             │
-       ↑↓ navigate   ^k actions   :vim      │
+       ↑↓ navigate   ^k actions             │
 
     "
   `)

package/src/examples/chart-tooltips.tsx

@@ -0,0 +1,54 @@
+// Example: Chart tooltip showcase. Hover over any bar, segment, or data point
+// to see an absolute-positioned tooltip showing the label and value.
+// Demonstrates tooltips on BarGraph, Graph, BarChart, and HorizontalBarGraph.
+
+import React from 'react'
+import { Detail, BarGraph, Graph, BarChart, HorizontalBarGraph, Row } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const values1 = [40, 30, 25, 15, 50, 40]
+const values2 = [20, 25, 10, 10, 25, 20]
+
+function ChartTooltipsExample() {
+  return (
+    <Detail
+      navigationTitle="Chart Tooltips"
+      markdown={[
+        '# Chart Tooltips',
+        '',
+        'Hover over any chart element to see a tooltip with the data label and value.',
+        'Works on BarGraph, Graph, BarChart, and HorizontalBarGraph.',
+      ].join('\n')}
+      metadata={
+        <Detail.Metadata>
+          <Detail.Metadata.Label title="BarGraph (vertical stacked)" />
+          <BarGraph height={10} labels={days}>
+            <BarGraph.Series data={values1} title="Direct" />
+            <BarGraph.Series data={values2} title="Referral" />
+          </BarGraph>
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label title="Graph (line chart)" />
+          <Graph height={8} xLabels={days}>
+            <Graph.Line data={values1} title="Traffic" />
+          </Graph>
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label title="BarChart (horizontal segments)" />
+          <BarChart>
+            <BarChart.Segment value={60} label="Spent" />
+            <BarChart.Segment value={25} label="Remaining" />
+            <BarChart.Segment value={15} label="Reserved" />
+          </BarChart>
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label title="HorizontalBarGraph (stacked rows)" />
+          <HorizontalBarGraph labels={days.slice(0, 4)}>
+            <HorizontalBarGraph.Series data={[40, 30, 25, 15]} title="Organic" />
+            <HorizontalBarGraph.Series data={[20, 25, 10, 10]} title="Paid" />
+          </HorizontalBarGraph>
+        </Detail.Metadata>
+      }
+    />
+  )
+}
+
+void renderWithProviders(<ChartTooltipsExample />)

package/src/examples/form-basic.vitest.tsx

@@ -221,7 +221,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -279,7 +279,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -338,7 +338,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -413,7 +413,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -471,7 +471,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -531,7 +531,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -589,7 +589,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -763,7 +763,7 @@ test('arrow down from checkbox to dropdown lands on first item', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←        May        →
+      │   ←        June       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions