@svgrid/grid 2.1.6 → 2.1.8

package/dist/SvCarousel.svelte

@@ -12,6 +12,7 @@
    * ```
    */
   import type { Snippet } from 'svelte'
+  import { type EditorDir } from './editor-contract'
 
   type Props = {
     count: number
@@ -24,6 +25,8 @@
     arrows?: boolean
     dots?: boolean
     ariaLabel?: string
+    /** Text direction (rtl mirrors the prev/next arrows + slide direction). */
+    dir?: EditorDir
   }
 
   let {
@@ -35,8 +38,12 @@
     arrows = true,
     dots = true,
     ariaLabel = 'Carousel',
+    dir,
   }: Props = $props()
 
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const rtl = $derived(resolvedDir === 'rtl')
+
   function go(i: number) {
     if (count === 0) return
     current = loop ? (i + count) % count : Math.max(0, Math.min(i, count - 1))
@@ -44,10 +51,13 @@
   const next = () => go(current + 1)
   const prev = () => go(current - 1)
 
-  // Autoplay, paused while hovered/focused.
+  // Autoplay, paused while hovered/focused, or stopped via the persistent
+  // play/pause toggle (WCAG 2.2.2: auto-advancing content needs a way to stop
+  // it that doesn't depend on hover/focus).
   let paused = $state(false)
+  let userPaused = $state(false)
   $effect(() => {
-    if (!autoplay || paused || count < 2) return
+    if (!autoplay || paused || userPaused || count < 2) return
     const t = setInterval(next, autoplay)
     return () => clearInterval(t)
   })
@@ -82,9 +92,9 @@
 >
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="sv-carousel__viewport" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
-    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${-current * 100}% + ${dx}px))`}>
+    <div class="sv-carousel__track" class:is-dragging={dragging} style:transform={`translateX(calc(${(rtl ? current : -current) * 100}% + ${dx}px))`}>
       {#each Array(count) as _, i (i)}
-        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current}>
+        <div class="sv-carousel__slide" role="group" aria-roledescription="slide" aria-label={`${i + 1} of ${count}`} aria-hidden={i !== current} inert={i !== current}>
           {@render slide?.(i)}
         </div>
       {/each}
@@ -92,8 +102,8 @@
   </div>
 
   {#if arrows && count > 1}
-    <button type="button" class="sv-carousel__arrow is-prev" aria-label="Previous slide" onclick={prev} disabled={!loop && current === 0}>‹</button>
-    <button type="button" class="sv-carousel__arrow is-next" aria-label="Next slide" onclick={next} disabled={!loop && current === count - 1}>›</button>
+    <button type="button" class="sv-carousel__arrow is-prev" aria-label={rtl ? 'Next slide' : 'Previous slide'} onclick={rtl ? next : prev} disabled={rtl ? (!loop && current === count - 1) : (!loop && current === 0)}>{rtl ? '›' : '‹'}</button>
+    <button type="button" class="sv-carousel__arrow is-next" aria-label={rtl ? 'Previous slide' : 'Next slide'} onclick={rtl ? prev : next} disabled={rtl ? (!loop && current === 0) : (!loop && current === count - 1)}>{rtl ? '‹' : '›'}</button>
   {/if}
 
   {#if dots && count > 1}
@@ -103,6 +113,16 @@
       {/each}
     </div>
   {/if}
+
+  {#if autoplay > 0}
+    <button
+      type="button"
+      class="sv-carousel__playpause"
+      aria-label={userPaused ? 'Play autoplay' : 'Pause autoplay'}
+      aria-pressed={userPaused}
+      onclick={() => (userPaused = !userPaused)}
+    >{userPaused ? '▶' : '⏸'}</button>
+  {/if}
 </div>
 
 <style>
@@ -131,4 +151,13 @@
     background: color-mix(in srgb, var(--sg-fg, #0f172a) 30%, var(--sg-bg, #fff)); transition: background 0.15s, width 0.15s;
   }
   .sv-carousel__dot.is-active { width: 20px; border-radius: 4px; background: var(--sg-accent, #2563eb); }
+
+  .sv-carousel__playpause {
+    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
+    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
+    background: color-mix(in srgb, var(--sg-bg, #fff) 82%, transparent); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); cursor: pointer; font-size: 12px; line-height: 1;
+    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
+  }
+  .sv-carousel__playpause:hover { background: var(--sg-bg, #fff); }
 </style>

package/dist/SvCarousel.svelte.d.ts

@@ -11,6 +11,7 @@
    * ```
    */
 import type { Snippet } from 'svelte';
+import { type EditorDir } from './editor-contract';
 type Props = {
     count: number;
     slide?: Snippet<[number]>;
@@ -22,6 +23,8 @@ type Props = {
     arrows?: boolean;
     dots?: boolean;
     ariaLabel?: string;
+    /** Text direction (rtl mirrors the prev/next arrows + slide direction). */
+    dir?: EditorDir;
 };
 declare const SvCarousel: import("svelte").Component<Props, {}, "current">;
 type SvCarousel = ReturnType<typeof SvCarousel>;

package/dist/SvColorInput.svelte

@@ -84,7 +84,6 @@
     const layer = createDismissableLayer({
       element: () => [triggerEl, panelEl],
       onDismiss: () => col.popover.close(),
-      closeOnEscape: false,
     })
     layer.activate()
     return () => {

package/dist/SvContextMenu.svelte

@@ -18,6 +18,7 @@
   import type { Snippet } from 'svelte'
   import { portalToBody, popIn } from './popover'
   import { createDismissableLayer } from './a11y/dismissable'
+  import { createFocusTrap } from './a11y/focus-trap'
   import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
 
   type Props = {
@@ -33,6 +34,7 @@
   let open = $state(false)
   let pos = $state({ x: 0, y: 0 })
   let panelEl = $state<HTMLDivElement | null>(null)
+  let zoneEl = $state<HTMLDivElement | null>(null)
 
   const MENU_W = 200
   function openAt(clientX: number, clientY: number) {
@@ -50,9 +52,24 @@
     openAt(e.clientX, e.clientY)
   }
 
+  // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
+  // Anchors at the focused zone's own position instead of the (nonexistent)
+  // pointer coordinates.
+  function onZoneKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
+    if (!isMenuKey) return
+    e.preventDefault()
+    const rect = zoneEl?.getBoundingClientRect()
+    openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
+  }
+
   $effect(() => {
-    if (!open) return
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    if (!open || !panelEl) return
+    const trap = createFocusTrap(panelEl, {
+      initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
+    })
+    trap.activate()
     const layer = createDismissableLayer({
       element: () => panelEl,
       onDismiss: () => (open = false),
@@ -61,12 +78,12 @@
     // Reposition-close on scroll (a moved anchor would leave the menu stranded).
     const onScroll = () => (open = false)
     window.addEventListener('scroll', onScroll, true)
-    return () => { layer.release(); window.removeEventListener('scroll', onScroll, true) }
+    return () => { layer.release(); trap.release(); window.removeEventListener('scroll', onScroll, true) }
   })
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="sv-ctx__zone" oncontextmenu={onContextMenu}>
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
+<div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
   {@render children?.()}
 </div>
 
@@ -86,7 +103,10 @@
 {/if}
 
 <style>
-  .sv-ctx__zone { display: contents; }
+  /* display:contents generates no box and per spec cannot receive focus - it
+     must be a real box for the keyboard-open path (tabindex) to work at all. */
+  .sv-ctx__zone { display: block; }
+  .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
   :global(.sv-ctx) {
     z-index: 2147483646; min-width: 200px;
     background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);

package/dist/SvDrawer.svelte

@@ -171,12 +171,14 @@
     box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
     overflow: hidden;
   }
-  /* Left / right: full height, fixed width, slide along X. */
+  /* Left / right: full height, fixed width, slide along X. `side` is a stated
+     physical edge (like SvToaster's position prop), not a text-flow-relative
+     "start/end" - so it stays physical left/right regardless of page dir. */
   :global(.sv-drawer--right), :global(.sv-drawer--left) {
     top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
   }
-  :global(.sv-drawer--right) { inset-inline-end: 0; border-inline-start: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
-  :global(.sv-drawer--left) { inset-inline-start: 0; border-inline-end: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
   /* Top / bottom: full width, fixed height, slide along Y. */
   :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
     left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;

package/dist/SvGrid.controller.svelte.d.ts

@@ -1,7 +1,7 @@
-import { type CellEditorOption, type Column, type ColumnDef, type Row, type RowData, type TableFeatures } from "./index";
+import { type CellEditorOption, type Column, type ColumnDef, type Row, type RowData, type TableFeatures, type ChartType, type ChartSpec, type ChartValueFormat } from "./index";
 import "./sv-grid-scrollbar";
 import { type ColumnStat } from "./conditional-formatting";
-import type { Props, SelectionRange, CellEditState, FilterOperator, MenuPosition, ContextMenuTarget } from "./SvGrid.types";
+import type { Props, SelectionRange, CellEditState, FilterOperator, MenuPosition, ContextMenuTarget, ChartingConfig } from "./SvGrid.types";
 import { operatorOption, operatorsForColumn, defaultOperatorFor, operatorLabelFor } from "./filter-operators";
 import { type FacetBucket, isBucketableColumn, buildBuckets, isInBucket } from "./facet-buckets";
 import { getColumnBaseValue, isGroupRow, toolPanelHeaderLabel, formatSummaryNumeric, getColumnAlign, getPinnedCellValue, getColumnAccessorValue, columnDefMatchesId } from "./cell-values";
@@ -257,6 +257,89 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly toolPanelHeaderLabel: typeof toolPanelHeaderLabel;
     readonly toggleColumnVisibleInPanel: (columnId: string) => void;
     readonly moveColumnInPanel: (columnId: string, dir: -1 | 1) => void;
+    readonly chartingEnabled: boolean;
+    readonly chartingConfig: {
+        position: "right" | "bottom";
+        defaultOpen: boolean;
+        defaultType: ChartType;
+        height: number;
+        width: number;
+        crossFilter: boolean;
+    } | null;
+    readonly chartCfg: ChartingConfig<TData> | null;
+    readonly chartIsCustom: boolean;
+    chartPanelOpen: boolean;
+    chartType: ChartType;
+    chartReduce: "sum" | "avg" | "count";
+    chartDimensionId: string | null;
+    chartMeasureId: string | null;
+    chartSeriesId: string | null;
+    chartStacked: boolean;
+    chartDataLabels: boolean;
+    chartLogScale: boolean;
+    chartTimeAxis: boolean;
+    chartValueFormat: ChartValueFormat;
+    readonly chartDimensionIsDate: boolean;
+    chartSize: number | null;
+    chartFloating: boolean;
+    chartMaximized: boolean;
+    chartFloatRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null;
+    readonly chartableColumns: {
+        dims: {
+            id: string;
+            field: string;
+            label: string;
+        }[];
+        measures: {
+            id: string;
+            field: string;
+            label: string;
+        }[];
+    };
+    readonly chartSpec: ChartSpec | null;
+    applyChartCrossFilter: (category: string) => void;
+    clearChartCrossFilter: () => void;
+    readonly charts: {
+        id: string;
+        title: string;
+    }[];
+    activeChartIndex: number;
+    addChart(): void;
+    removeChart(index?: number): void;
+    renameChart(index: number, title: string): void;
+    getChartsState(): {
+        title: string;
+        type: ChartType;
+        dimension: string | null;
+        series: string | null;
+        measure: string | null;
+        reduce: "sum" | "avg" | "count";
+        stacked: boolean | null;
+        dataLabels: boolean | null;
+        logScale: boolean | null;
+        timeAxis: boolean | null;
+        valueFormat: ChartValueFormat | null;
+    }[];
+    applyChartsState(list: ReadonlyArray<Record<string, unknown>>, active?: number): void;
+    chartAiHandler: ((prompt: string) => Promise<Record<string, unknown> | null>) | null;
+    applyChartConfig(config: {
+        open?: boolean;
+        type?: ChartType;
+        dimension?: string | null;
+        series?: string | null;
+        measure?: string | null;
+        reduce?: "sum" | "avg" | "count";
+        stacked?: boolean;
+        dataLabels?: boolean;
+        logScale?: boolean;
+        timeAxis?: boolean;
+        valueFormat?: ChartValueFormat;
+    }): void;
     readonly toggleGroupInPanel: (columnId: string) => void;
     lastSortingSerialized: string;
     lastFiltersSerialized: string;