@svgrid/grid 2.1.6 → 2.1.7

package/src/SvMenuList.svelte

@@ -21,19 +21,29 @@
    * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
    */
   import Self from './SvMenuList.svelte'
+  import { type EditorDir } from './editor-contract'
 
   let {
     items,
     onclose,
     onselect,
     submenu = false,
+    oncollapse,
+    dir,
   }: {
     items: ReadonlyArray<MenuItem>
-    /** Close the WHOLE menu (a leaf was chosen or Escape at the root). */
+    /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */
     onclose: () => void
     /** Report the chosen leaf item. */
     onselect: (item: MenuItem) => void
     submenu?: boolean
+    /** Collapse just THIS submenu level (ArrowLeft, or ArrowRight under `rtl`)
+     *  and refocus the item that opened it. Only meaningful when `submenu` is
+     *  true; the root list has nowhere to collapse into. */
+    oncollapse?: () => void
+    /** Text direction; under `rtl` the ArrowRight/ArrowLeft submenu open/close
+     *  keys swap (see createTree.svelte.ts for the reference pattern). */
+    dir?: EditorDir
   } = $props()
 
   // Indexes of real (non-separator) items, for roving focus.
@@ -61,20 +71,25 @@
   }
   function onKeydown(e: KeyboardEvent, i: number) {
     const item = items[i]
+    const rtl = dir === 'rtl'
+    // Open this item's submenu (opposite key under rtl).
+    const openThis = () => { if (item?.children?.length) { e.preventDefault(); openSub = i } }
+    // Collapse just THIS list back into its parent item (opposite key under
+    // rtl) - `oncollapse` is local to this nesting level, unlike `onclose`.
+    const collapseThis = () => { if (submenu) { e.preventDefault(); oncollapse?.() } }
     switch (e.key) {
       case 'ArrowDown': e.preventDefault(); move(1); break
       case 'ArrowUp': e.preventDefault(); move(-1); break
       case 'Home': e.preventDefault(); focusItem(focusable[0] ?? 0); break
       case 'End': e.preventDefault(); focusItem(focusable.at(-1) ?? 0); break
-      case 'ArrowRight':
-        if (item?.children?.length) { e.preventDefault(); openSub = i }
-        break
-      case 'ArrowLeft':
-        if (submenu) { e.preventDefault(); onclose() } // parent listens via its own onclose wiring
-        break
+      case 'ArrowRight': (rtl ? collapseThis : openThis)(); break
+      case 'ArrowLeft': (rtl ? openThis : collapseThis)(); break
       case 'Enter':
       case ' ': e.preventDefault(); if (item) choose(item); break
       case 'Escape': e.preventDefault(); onclose(); break
+      // Tab leaves the menu entirely (WAI-ARIA menu button pattern): close the
+      // whole tree rather than trapping focus inside a portalled panel.
+      case 'Tab': onclose(); break
     }
   }
 </script>
@@ -108,7 +123,14 @@
         </button>
         {#if item.children?.length && openSub === i}
           <div class="sv-menu__flyout">
-            <Self items={item.children} onclose={onclose} onselect={onselect} submenu />
+            <Self
+              items={item.children}
+              {onclose}
+              {onselect}
+              oncollapse={() => { openSub = -1; focusItem(i) }}
+              {dir}
+              submenu
+            />
           </div>
         {/if}
       </div>
@@ -134,7 +156,7 @@
   .sv-menu__label { flex: 1; white-space: nowrap; }
   .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
   .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
-  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { }
+  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { transform: scaleX(-1); }
   .sv-menu__flyout {
     position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
     background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);

package/src/SvNumberInput.svelte

@@ -118,7 +118,7 @@
   .sv-num.is-disabled { opacity: 0.6; }
   .sv-num__input {
     flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
-    text-align: right; padding: 0 8px;
+    text-align: end; padding: 0 8px;
   }
   .sv-num--sm { height: 28px; font-size: 12px; }
   .sv-num--md { height: 34px; font-size: 13px; }

package/src/SvOtpInput.svelte

@@ -77,6 +77,7 @@
     if (ch) focusCell(i + 1)
   }
   function onCellKeydown(i: number, e: KeyboardEvent) {
+    const rtl = dir === 'rtl'
     if (e.key === 'Backspace') {
       e.preventDefault()
       const arr = currentCells()
@@ -90,10 +91,10 @@
       }
     } else if (e.key === 'ArrowLeft') {
       e.preventDefault()
-      focusCell(i - 1)
+      focusCell(rtl ? i + 1 : i - 1)
     } else if (e.key === 'ArrowRight') {
       e.preventDefault()
-      focusCell(i + 1)
+      focusCell(rtl ? i - 1 : i + 1)
     }
   }
   function onPaste(i: number, e: ClipboardEvent) {

package/src/SvPopover.svelte

@@ -84,6 +84,14 @@
   let hoverTimer: ReturnType<typeof setTimeout> | undefined
   function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
   function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
+
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -93,6 +101,8 @@
   onclick={() => trigger === 'click' && toggle()}
   onpointerenter={onEnter}
   onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
 >
   {@render anchor?.()}
 </span>
@@ -108,9 +118,11 @@
     style:left={`${rect.left}px`}
     style:min-width={minWidth ? `${rect.width}px` : undefined}
     role="dialog"
-    aria-label={ariaLabel}
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
     onpointerenter={onEnter}
     onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
   >
     {@render children?.()}
   </div>

package/src/SvRowGroupPanel.svelte

@@ -48,6 +48,24 @@
     const id = e.dataTransfer?.getData('text/sv-column')
     if (id) add(id)
   }
+  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
+   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
+  function moveByKeyboard(i: number, delta: number) {
+    const to = i + delta
+    if (to < 0 || to >= groupBy.length) return
+    dragIndex = i
+    reorder(to)
+  }
+  function onChipKeydown(e: KeyboardEvent, i: number) {
+    if (!e.altKey) return
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      moveByKeyboard(i, -1)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      moveByKeyboard(i, 1)
+    }
+  }
 </script>
 
 <div
@@ -63,14 +81,19 @@
   {:else}
     {#each groupBy as id, i (id)}
       {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
       <span
         class="sv-rgp-chip"
         class:sv-rgp-chip-drag={dragIndex === i}
+        role="group"
+        tabindex="0"
+        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
         draggable="true"
         ondragstart={() => (dragIndex = i)}
         ondragend={() => (dragIndex = null)}
         ondragover={(e) => e.preventDefault()}
         ondrop={() => reorder(i)}
+        onkeydown={(e) => onChipKeydown(e, i)}
       >
         <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
         {labelOf(id)}

package/src/SvScrollArea.svelte

@@ -17,13 +17,24 @@
     height?: string
     /** Scroll horizontally instead of vertically. */
     horizontal?: boolean
+    /** Accessible name for the scrollable region, announced by screen readers. */
+    ariaLabel?: string
     children?: Snippet
   }
 
-  let { maxHeight, height, horizontal = false, children }: Props = $props()
+  let { maxHeight, height, horizontal = false, ariaLabel = 'Scrollable content', children }: Props = $props()
 </script>
 
-<div class="sv-scroll" class:is-x={horizontal} style:max-height={maxHeight} style:height={height}>
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="sv-scroll"
+  class:is-x={horizontal}
+  style:max-height={maxHeight}
+  style:height={height}
+  tabindex="0"
+  role="region"
+  aria-label={ariaLabel}
+>
   {@render children?.()}
 </div>
 

package/src/SvTooltip.svelte

@@ -2,8 +2,9 @@
   /**
    * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
    * <body> so it is never clipped. Shows after a short delay, hides on leave /
-   * blur / Escape, and is wired via `aria-describedby` (role="tooltip"). Respects
-   * keyboard users (opens on focus).
+   * blur / Escape, and is wired via `aria-describedby` (role="tooltip") onto the
+   * focusable child itself, so AT users get it announced on focus, not just
+   * sighted users on hover.
    *
    * ```svelte
    * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
@@ -12,6 +13,7 @@
   import type { Snippet } from 'svelte'
   import { portalToBody, popIn } from './popover'
   import { nextEditorId } from './editor-contract'
+  import { getFocusable } from './a11y/focus-trap'
 
   type Props = {
     text: string
@@ -65,6 +67,29 @@
       document.removeEventListener('keydown', onKey)
     }
   })
+
+  // The wrapper span above is never itself Tab-focusable, so putting
+  // aria-describedby only on it does nothing for keyboard/AT users - they
+  // focus the real interactive child (e.g. the <button> in the doc example),
+  // and that's the element whose accessible description actually gets
+  // announced. Mirror the id onto that child too, merging with (and later
+  // restoring) any aria-describedby it already carries.
+  $effect(() => {
+    if (!open || !anchorEl) return
+    const child = getFocusable(anchorEl)[0]
+    if (!child) return
+    const before = child.getAttribute('aria-describedby')
+    const ids = new Set((before ?? '').split(/\s+/).filter(Boolean))
+    ids.add(tid)
+    child.setAttribute('aria-describedby', [...ids].join(' '))
+    return () => {
+      const remaining = (child.getAttribute('aria-describedby') ?? '')
+        .split(/\s+/)
+        .filter((id) => id && id !== tid)
+      if (remaining.length) child.setAttribute('aria-describedby', remaining.join(' '))
+      else child.removeAttribute('aria-describedby')
+    }
+  })
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/src/SvTour.svelte

@@ -18,6 +18,8 @@
    */
   import type { TourStep } from './ui-app.types'
   import { portalToBody } from './popover'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import type { EditorDir } from './editor-contract'
 
   type Props = {
     steps: ReadonlyArray<TourStep>
@@ -25,12 +27,15 @@
     onFinish?: () => void
     onSkip?: () => void
     onStep?: (index: number) => void
+    /** Text direction; under `'rtl'` the Left/Right advance/back keys swap. */
+    dir?: EditorDir
   }
 
-  let { steps, open = $bindable(false), onFinish, onSkip, onStep }: Props = $props()
+  let { steps, open = $bindable(false), onFinish, onSkip, onStep, dir }: Props = $props()
 
   let index = $state(0)
   let rect = $state<DOMRect | null>(null)
+  let popEl = $state<HTMLDivElement | null>(null)
   const step = $derived(steps[index])
 
   function targetEl(): HTMLElement | null {
@@ -43,10 +48,16 @@
     el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
     rect = el ? el.getBoundingClientRect() : null
   }
+  // Move focus into the popover on open + on every step change (its Next button
+  // is the sensible default target); the Tab trap (below) keeps it there.
+  function focusPopover() {
+    const btn = popEl?.querySelector<HTMLElement>('.sv-tour__next')
+    ;(btn ?? popEl)?.focus()
+  }
   function goto(i: number) {
     index = Math.max(0, Math.min(i, steps.length - 1))
     onStep?.(index)
-    queueMicrotask(measure)
+    queueMicrotask(() => { measure(); focusPopover() })
   }
   function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
   function back() { goto(index - 1) }
@@ -56,14 +67,15 @@
   $effect(() => {
     if (!open) return
     index = 0
-    queueMicrotask(measure)
+    queueMicrotask(() => { measure(); focusPopover() })
     const reflow = () => measure()
     window.addEventListener('resize', reflow)
     window.addEventListener('scroll', reflow, true)
+    const rtl = dir === 'rtl'
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') { e.preventDefault(); skip() }
-      else if (e.key === 'ArrowRight') { e.preventDefault(); next() }
-      else if (e.key === 'ArrowLeft') { e.preventDefault(); back() }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); (rtl ? back : next)() }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); (rtl ? next : back)() }
     }
     window.addEventListener('keydown', onKey)
     return () => {
@@ -73,6 +85,18 @@
     }
   })
 
+  // Focus trap for the duration the tour is open, from the shared primitive
+  // (same one SvModal/SvDrawer use): traps Tab within the popover and restores
+  // focus to whatever triggered the tour once it closes.
+  $effect(() => {
+    if (!open || !popEl) return
+    const trap = createFocusTrap(popEl, {
+      initialFocus: () => popEl?.querySelector<HTMLElement>('.sv-tour__next') ?? null,
+    })
+    trap.activate()
+    return () => trap.release()
+  })
+
   const POP_W = 300
   const pop = $derived.by(() => {
     if (typeof window === 'undefined' || !rect) {
@@ -100,6 +124,7 @@
     {/if}
 
     <div
+      bind:this={popEl}
       class="sv-tour__pop sv-tour__pop--{pop.place}"
       style:top={pop.top}
       style:left={pop.left}

package/src/SvTree.svelte

@@ -249,6 +249,7 @@
 {#snippet treeRow(item)}
   {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
   {@const isLoading = loadingIds.has(item.node.id)}
+  {@const rowProps = tree.itemProps(item)}
   <div
     class="sv-tree__row"
     class:is-selected={item.node.id === selected}
@@ -267,8 +268,11 @@
     ondrop={reorderable ? (e) => onRowDrop(e, item.node) : undefined}
     ondragend={reorderable ? endDrag : undefined}
     ondblclick={editable ? () => startEdit(item.node) : undefined}
-    onkeydown={editable ? (e) => { if (e.key === 'F2') { e.preventDefault(); startEdit(item.node) } } : undefined}
-    {...tree.itemProps(item)}
+    {...rowProps}
+    onkeydown={(e) => {
+      rowProps.onkeydown(e)
+      if (editable && e.key === 'F2') { e.preventDefault(); startEdit(item.node) }
+    }}
   >
     <button
       type="button"
@@ -277,7 +281,7 @@
       class:is-leaf={!item.hasChildren}
       class:is-loading={isLoading}
       tabindex="-1"
-      aria-hidden={!item.hasChildren}
+      aria-hidden="true"
       onclick={(e) => { e.stopPropagation(); tree.toggleExpand(item.node) }}
     >
       {#if isLoading}

package/src/SvTreeSelect.svelte

@@ -104,16 +104,23 @@
     estimatedHeight: () => 300,
     onExtraKey: (e, act) => {
       const row = rows[act]
-      if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        if (row?.hasChildren && !row.expanded) setExpanded(row.node.value, true)
-        return true
+      if (!row) return false
+      // "expand" opens the node or steps into the first child; "collapse" closes
+      // it or jumps to the parent - same fallback as createTree's core.
+      const expand = () => {
+        if (row.hasChildren && !row.expanded) setExpanded(row.node.value, true)
+        else if (row.hasChildren && row.expanded) ts.active = Math.min(act + 1, rows.length - 1)
       }
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        if (row?.hasChildren && row.expanded) setExpanded(row.node.value, false)
-        return true
+      const collapse = () => {
+        if (row.hasChildren && row.expanded) setExpanded(row.node.value, false)
+        else {
+          let pi = act - 1
+          while (pi >= 0 && rows[pi]!.depth >= row.depth) pi--
+          if (pi >= 0) ts.active = pi
+        }
       }
+      if (e.key === 'ArrowRight') { e.preventDefault(); expand(); return true }
+      if (e.key === 'ArrowLeft') { e.preventDefault(); collapse(); return true }
       return false
     },
     idPrefix: 'sv-ts',
@@ -129,7 +136,7 @@
       class:is-invalid={invalid}
       {disabled}
       onclick={() => ts.toggle()}
-      {...ts.triggerProps()}
+      {...ts.triggerProps('tree')}
       {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
     >
       <span class="sv-ts__value" class:is-placeholder={!triggerText}>{triggerText || placeholder}</span>

package/src/build-api.ts

@@ -239,6 +239,25 @@ export function createGridApi<
             [r.minRow, r.minCol, r.maxRow, r.maxCol] as [number, number, number, number],
           );
       },
+      openChart() {
+        ctx.chartPanelOpen = true;
+      },
+      closeChart() {
+        ctx.chartPanelOpen = false;
+      },
+      getChartSpec() {
+        return ctx.chartSpec;
+      },
+      chartRange(ranges) {
+        if (ranges && ranges.length) this.selectCells(ranges);
+        ctx.chartPanelOpen = true;
+      },
+      configureChart(config) {
+        if (ctx.chartingEnabled) ctx.applyChartConfig(config);
+      },
+      setChartAiHandler(handler) {
+        ctx.chartAiHandler = handler ?? null;
+      },
       addRow(row, position = "bottom") {
         this.addRows([row], position);
       },
@@ -752,6 +771,21 @@ export function createGridApi<
               Array.from(set),
             ]),
           ),
+          ...(ctx.chartingEnabled
+            ? {
+                chart: {
+                  open: ctx.chartPanelOpen,
+                  type: ctx.chartType,
+                  dimension: ctx.chartDimensionId,
+                  series: ctx.chartSeriesId,
+                  measure: ctx.chartMeasureId,
+                  reduce: ctx.chartReduce,
+                  stacked: ctx.chartStacked,
+                },
+                charts: ctx.getChartsState(),
+                chartActive: ctx.activeChartIndex,
+              }
+            : {}),
         };
       },
       setState(state) {
@@ -785,6 +819,21 @@ export function createGridApi<
             next[k] = new Set(arr);
           ctx.valueFilters = next;
         }
+        if ((state.chart || state.charts) && ctx.chartingEnabled) {
+          if (Array.isArray(state.charts) && state.charts.length) {
+            ctx.applyChartsState(state.charts, state.chartActive);
+          }
+          if (state.chart) {
+            const c = state.chart;
+            ctx.chartPanelOpen = c.open;
+            ctx.chartType = c.type;
+            ctx.chartDimensionId = c.dimension;
+            ctx.chartSeriesId = c.series;
+            ctx.chartMeasureId = c.measure;
+            ctx.chartReduce = c.reduce;
+            ctx.chartStacked = c.stacked;
+          }
+        }
       },
       refresh() {
         ctx.grid.store.setState((prev: any) => ({ ...prev }));

package/src/chart-export.ts

@@ -9,6 +9,8 @@
  * Pass the chart's `<svg class="sv-grid-chart-svg">` element (or any ancestor
  * that contains it).
  */
+import type { ChartSpec } from './chart'
+
 function resolveSvg(el: SVGSVGElement | HTMLElement): SVGSVGElement | null {
   if (el instanceof SVGSVGElement) return el
   return el.querySelector('svg.sv-grid-chart-svg') ?? el.querySelector('svg')
@@ -47,6 +49,29 @@ export function chartToSvgString(
   clone.setAttribute('width', String(w))
   clone.setAttribute('height', String(h))
   clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+  // Inline computed paint/text styles so the export is what's on screen -
+  // dynamic SVG presentation attributes (a line's `stroke={color}`) and scoped
+  // component CSS don't survive a raw clone + XMLSerializer. Walk the live tree
+  // and its clone (1:1 here, before we prune hit layers) and copy the resolved
+  // style, so line paths etc. export with their real stroke instead of nothing.
+  const PAINT_PROPS = [
+    'fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-opacity',
+    'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'opacity',
+    'font-size', 'font-family', 'font-weight', 'text-anchor',
+  ]
+  const liveNodes = svg.querySelectorAll('*')
+  const cloneNodes = clone.querySelectorAll('*')
+  for (let i = 0; i < liveNodes.length; i += 1) {
+    const el = cloneNodes[i] as (SVGElement & { style: CSSStyleDeclaration }) | undefined
+    if (!el || !el.style) continue
+    const cs = getComputedStyle(liveNodes[i]!)
+    for (const prop of PAINT_PROPS) {
+      const v = cs.getPropertyValue(prop)
+      if (v && v !== 'normal') el.style.setProperty(prop, v)
+    }
+  }
+
   // Drop interaction-only hit layers.
   clone.querySelectorAll('.sv-grid-chart-hit').forEach((n) => n.remove())
 
@@ -142,3 +167,35 @@ export async function downloadChartPng(
   triggerDownload(url, filename)
   setTimeout(() => URL.revokeObjectURL(url), 1000)
 }
+
+const csvCell = (v: unknown): string => {
+  const s = v == null ? '' : String(v)
+  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
+}
+
+/**
+ * Serialize a chart's data to CSV: one row per category, one column per series
+ * (`Category, <series 1>, ...`). Empty for exotic specs (sankey/treemap/gauge/
+ * calendar) that don't carry a rectangular categories x series grid.
+ */
+export function chartSpecToCsv(spec: ChartSpec): string {
+  const cats = spec.categories ?? []
+  const series = spec.series ?? []
+  if (!cats.length || !series.length) return ''
+  const header = ['Category', ...series.map((s) => s.label)].map(csvCell).join(',')
+  const rows = cats.map((cat, i) =>
+    [cat, ...series.map((s) => s.values[i] ?? '')].map(csvCell).join(','),
+  )
+  return [header, ...rows].join('\n')
+}
+
+/** Download the chart's data as a `.csv` file. Returns false if there's no
+ *  rectangular category/series data to export. */
+export function downloadChartCsv(spec: ChartSpec, filename = 'chart.csv'): boolean {
+  const csv = chartSpecToCsv(spec)
+  if (!csv) return false
+  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }))
+  triggerDownload(url, filename)
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+  return true
+}