@warkypublic/svelix 0.1.27 → 0.1.28

package/dist/components/Boxer/Boxer.svelte

@@ -37,6 +37,10 @@
     value = $bindable<any>(undefined),
   }: BoxerProps = $props();
 
+  const instanceId = `boxer-${Math.random().toString(36).slice(2, 10)}`;
+  const inputId = `${instanceId}-input`;
+  const listboxId = `${instanceId}-listbox`;
+
   // Derive effective dataSource and onAPICall from adapter when not explicitly provided
   const dataSource = dataSourceProp ?? (adapter ? "server" : "local");
   const onAPICall =
@@ -88,6 +92,7 @@
   let popupTop = $state(0);
   let popupLeft = $state(0);
   let popupWidth = $state(0);
+  let activeOptionIndex = $state<number | null>(null);
   let backdropZ = $state(1090);
   let dropdownZ = $state(1100);
   let pointerInteractingWithDropdown = $state(false);
@@ -209,6 +214,8 @@
     const option = $store.boxerData?.[index];
     if (!option) return;
 
+    activeOptionIndex = index;
+
     if (multiSelect) {
       const currentValues = Array.isArray(value) ? value : [];
       const isSelected = currentValues.includes(option.value);
@@ -227,6 +234,7 @@
       store.setSearch("");
       store.setInput(option.label);
       store.setOpened(false);
+      activeOptionIndex = null;
     }
   }
 
@@ -238,6 +246,7 @@
       onChange?.(value);
       store.setSearch("");
       store.setInput("");
+      activeOptionIndex = null;
       targetRef?.focus();
     }
     if (openOnClear) {
@@ -247,6 +256,7 @@
 
   function focusDropdownItem(index: number) {
     const clamped = Math.max(0, Math.min(index, $store.boxerData.length - 1));
+    activeOptionIndex = clamped;
     requestAnimationFrame(() => {
       const el = parentEl?.querySelector<HTMLDivElement>(
         `[data-index="${clamped}"]`,
@@ -277,17 +287,20 @@
           );
           if (selectedIndex >= 0) {
             store.setOpened(false);
+            activeOptionIndex = null;
           } else {
             onOptionSubmit(0);
           }
         } else {
           store.setOpened(false);
+          activeOptionIndex = null;
         }
         break;
       case "Escape":
         if ($store.opened) {
           e.preventDefault();
           store.setOpened(false);
+          activeOptionIndex = null;
         }
         break;
     }
@@ -302,6 +315,7 @@
       case "ArrowUp":
         e.preventDefault();
         if (index === 0) {
+          activeOptionIndex = null;
           targetRef?.focus();
         } else {
           focusDropdownItem(index - 1);
@@ -316,6 +330,7 @@
       case "Escape":
         e.preventDefault();
         store.setOpened(false);
+        activeOptionIndex = null;
         targetRef?.focus();
         break;
     }
@@ -326,7 +341,8 @@
     const rect = anchorEl.getBoundingClientRect();
     const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
     const horizontalPadding = 8;
-    const nextWidth = Math.max(220, rect.width);
+    const maxWidth = Math.max(160, viewportWidth - horizontalPadding * 2);
+    const nextWidth = Math.min(Math.max(220, rect.width), maxWidth);
     const maxLeft = viewportWidth - nextWidth - horizontalPadding;
 
     popupTop = rect.bottom + 4;
@@ -368,6 +384,7 @@
   }
   export function close() {
     store.setOpened(false);
+    activeOptionIndex = null;
   }
   export function focus() {
     targetRef?.focus();
@@ -377,6 +394,7 @@
   }
   export function open() {
     store.setOpened(true);
+    activeOptionIndex = null;
   }
   export function setValue(val: unknown) {
     value = val;
@@ -462,6 +480,7 @@
     const relatedTarget = e.relatedTarget as Node | null;
     const insideDropdown = !!(relatedTarget && dropdownEl?.contains(relatedTarget));
     if (!currentTarget.contains(relatedTarget) && !insideDropdown) {
+      activeOptionIndex = null;
       if (!value && !multiSelect) {
         store.setSearch("");
         store.setInput("");
@@ -472,9 +491,13 @@
 >
   <BoxerTarget
     bind:this={targetRef}
+    activeDescendant={activeOptionIndex !== null ? `${instanceId}-option-${activeOptionIndex}` : undefined}
     {clearable}
+    controlsId={listboxId}
     {disabled}
     {error}
+    expanded={$store.opened}
+    {inputId}
     {label}
     {leftSection}
     {placeholder}
@@ -486,6 +509,7 @@
     onsearch={(v) => {
       store.setSearch(v);
       store.setInput(v);
+      activeOptionIndex = null;
       store.setOpened(true);
     }}
   />
@@ -495,6 +519,7 @@
       {#if !effectiveDisablePortal}
         <div
           class="fixed inset-0"
+          data-testid="boxer-backdrop"
           onpointerdown={onBackdropPointerDown}
           style:z-index={backdropZ}
         ></div>
@@ -505,6 +530,8 @@
         class={`${effectiveDisablePortal
           ? "absolute left-0 right-0 top-full mt-1"
           : "fixed"} card bg-surface-50-950 shadow-lg border border-surface-300-700 overflow-hidden`}
+        data-testid="boxer-dropdown"
+        id={listboxId}
         role="listbox"
         aria-label={label ?? "Options"}
         onpointerdown={markDropdownPointerInteraction}
@@ -539,6 +566,7 @@
                     class:bg-primary-100={isSelected}
                     class:dark:bg-primary-900={isSelected}
                     data-index={vRow.index}
+                    id={`${instanceId}-option-${vRow.index}`}
                     role="option"
                     aria-selected={isSelected}
                     tabindex="-1"
@@ -561,7 +589,14 @@
             </div>
           </div>
         {:else}
-          <div class="px-3 py-2 text-sm text-surface-500">Nothing found</div>
+          <div
+            aria-live="polite"
+            class="px-3 py-2 text-sm text-surface-500"
+            data-testid="boxer-empty"
+            role="status"
+          >
+            no data
+          </div>
         {/if}
       </div>
     {/if}

package/dist/components/Boxer/BoxerTarget.svelte

@@ -2,9 +2,13 @@
   import type { Snippet } from "svelte";
 
   export interface Props {
+    activeDescendant?: string;
+    controlsId?: string;
     clearable?: boolean;
     disabled?: boolean;
     error?: string;
+    expanded?: boolean;
+    inputId?: string;
     isFetching?: boolean;
     label?: string;
     leftSection?: Snippet;
@@ -17,9 +21,13 @@
   }
 
   let {
+    activeDescendant,
+    controlsId,
     clearable = true,
     disabled,
     error,
+    expanded = false,
+    inputId = 'boxer-input',
     isFetching,
     label,
     leftSection,
@@ -40,7 +48,7 @@
 
 <div class="flex flex-col gap-1">
   {#if label}
-    <label class="label text-sm font-medium" for="boxer-input">{label}</label>
+    <label class="label text-sm font-medium" for={inputId}>{label}</label>
   {/if}
   <div class="flex items-center relative">
     {#if leftSection}
@@ -49,9 +57,17 @@
       </div>
     {/if}
     <input
-      id="boxer-input"
+      id={inputId}
       bind:this={inputEl}
       bind:value={search}
+      aria-activedescendant={activeDescendant}
+      aria-autocomplete="list"
+      aria-controls={controlsId}
+      aria-describedby={error ? `${inputId}-error` : undefined}
+      aria-expanded={expanded}
+      aria-haspopup="listbox"
+      aria-invalid={!!error}
+      role="combobox"
       class="input pr-8"
       class:input-error={!!error}
       class:pl-8={!!leftSection}
@@ -82,6 +98,6 @@
     </div>
   </div>
   {#if error}
-    <p class="text-error-500 text-xs">{error}</p>
+    <p class="text-error-500 text-xs" id={`${inputId}-error`}>{error}</p>
   {/if}
 </div>

package/dist/components/Boxer/BoxerTarget.svelte.d.ts

@@ -1,8 +1,12 @@
 import type { Snippet } from "svelte";
 export interface Props {
+    activeDescendant?: string;
+    controlsId?: string;
     clearable?: boolean;
     disabled?: boolean;
     error?: string;
+    expanded?: boolean;
+    inputId?: string;
     isFetching?: boolean;
     label?: string;
     leftSection?: Snippet;

package/dist/components/Gridler/components/GridlerCanvas.svelte

@@ -131,6 +131,7 @@
   let dragHeaderCurrentX = $state(0);
   let announcement = $state("");
   let hasFocus = $state(false);
+  const gridId = `gridler-${Math.random().toString(36).slice(2, 10)}`;
 
   let isDraggingVScrollbar = $state(false);
   let isDraggingHScrollbar = $state(false);
@@ -141,7 +142,13 @@
   let isHoveringVScrollbar = $state(false);
   let isHoveringHScrollbar = $state(false);
   let hoverMenuButton = $state(false);
+  let pendingGridMenuOpen = $state(false);
   let hoverSortCol = $state<number | null>(null);
+  let touchStartClientX = $state(0);
+  let touchStartClientY = $state(0);
+  let touchStartScrollX = $state(0);
+  let touchStartScrollY = $state(0);
+  let isTouchScrolling = $state(false);
 
   let containerRef: HTMLDivElement | undefined = $state();
   let canvasRef: HTMLCanvasElement | undefined = $state();
@@ -201,6 +208,35 @@
   const containerHeightStyle = $derived(
     typeof height === "number" ? `${height}px` : height,
   );
+  const activeCellDescription = $derived.by(() => {
+    if (!focusedCell) {
+      return rows > 0 && columns.length > 0
+        ? "Use arrow keys to move between cells. On touch devices, swipe to scroll and tap to select."
+        : "No rows available.";
+    }
+
+    const [col, row] = focusedCell;
+    const columnTitle = columns[col]?.title ?? `Column ${col + 1}`;
+    const cell = getCellContent(focusedCell);
+    const value = `${cell.displayData ?? ""}`.trim();
+    return value
+      ? `Row ${row + 1}, ${columnTitle}, value ${value}`
+      : `Row ${row + 1}, ${columnTitle}, empty cell`;
+  });
+  const selectionDescription = $derived.by(() => {
+    switch (currentSelection.type) {
+      case "cell":
+        return "One cell selected.";
+      case "range":
+        return `Range selected from row ${currentSelection.start[1] + 1} to row ${currentSelection.end[1] + 1}.`;
+      case "row":
+        return `${currentSelection.rows.length} row${currentSelection.rows.length === 1 ? "" : "s"} selected.`;
+      case "column":
+        return `${currentSelection.columns.length} column${currentSelection.columns.length === 1 ? "" : "s"} selected.`;
+      default:
+        return "No selection.";
+    }
+  });
 
   // ── Dark mode detection ───────────────────────────────────────────────────────
 
@@ -467,6 +503,7 @@
 
   function handleMouseDown(e: MouseEvent) {
     if (e.button !== 0) return;
+    pendingGridMenuOpen = false;
     containerRef?.focus();
 
     const sbGeo = getScrollbarGeometry(buildRenderContext());
@@ -504,7 +541,7 @@
       e.offsetX < rowMarkerWidth &&
       e.offsetY < headerHeight
     ) {
-      onGridMenuOpen({ x: e.clientX, y: e.clientY });
+      pendingGridMenuOpen = true;
       return;
     }
 
@@ -792,6 +829,17 @@
   }
 
   function handleMouseUp(e: MouseEvent) {
+    if (
+      pendingGridMenuOpen &&
+      onGridMenuOpen &&
+      rowMarkerWidth > 0 &&
+      e.offsetX < rowMarkerWidth &&
+      e.offsetY < headerHeight
+    ) {
+      onGridMenuOpen({ x: e.clientX, y: e.clientY });
+    }
+    pendingGridMenuOpen = false;
+
     if (draggingHeaderCol !== null && onColumnMoved) {
       const fixedBoundaryX =
         fixedColumns > 0
@@ -883,6 +931,122 @@
   export function setAnnouncement(msg: string): void {
     announcement = msg;
   }
+
+  function getLocalPointFromClient(clientX: number, clientY: number) {
+    const rect = canvasRef?.getBoundingClientRect();
+    if (!rect) return null;
+
+    return {
+      offsetX: clientX - rect.left,
+      offsetY: clientY - rect.top,
+    };
+  }
+
+  function handleTouchTap(offsetX: number, offsetY: number) {
+    containerRef?.focus();
+
+    if (
+      onGridMenuOpen &&
+      rowMarkerWidth > 0 &&
+      offsetX < rowMarkerWidth &&
+      offsetY < headerHeight
+    ) {
+      const rect = canvasRef?.getBoundingClientRect();
+      onGridMenuOpen({
+        x: (rect?.left ?? 0) + offsetX,
+        y: (rect?.top ?? 0) + offsetY,
+      });
+      return;
+    }
+
+    const fixedBoundaryX =
+      fixedColumns > 0
+        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
+        : 0;
+    const localX = offsetX - rowMarkerWidth;
+    const effectiveScrollX =
+      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+
+    if (offsetY < headerHeight) {
+      const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+      if (col >= 0 && col < columns.length) {
+        toggleSort(col, false);
+        if (!readonly) {
+          currentSelection = { type: "column", columns: [col] };
+          onSelectionChange?.(currentSelection);
+          announcement = `Column ${columns[col].title} selected`;
+        }
+      }
+      return;
+    }
+
+    if (rowMarkers !== "none" && offsetX < rowMarkerWidth) {
+      const row = Math.floor((offsetY - headerHeight + scrollY) / rowHeight);
+      if (row >= 0 && row < rows) {
+        onRowToggle?.(row);
+      }
+      return;
+    }
+
+    const cell = getCellFromPoint(
+      localX,
+      offsetY,
+      effectiveScrollX,
+      scrollY,
+      effectiveColumns,
+      rowHeight,
+      headerHeight,
+    );
+
+    if (cell) {
+      focusedCell = cell;
+      currentSelection = { type: "cell", item: cell };
+      onSelectionChange?.(currentSelection);
+      announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
+    }
+  }
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length !== 1) return;
+
+    const touch = e.touches[0];
+    touchStartClientX = touch.clientX;
+    touchStartClientY = touch.clientY;
+    touchStartScrollX = scrollRef?.scrollLeft ?? 0;
+    touchStartScrollY = scrollRef?.scrollTop ?? 0;
+    isTouchScrolling = false;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.touches.length !== 1 || !scrollRef) return;
+
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchStartClientX;
+    const deltaY = touch.clientY - touchStartClientY;
+
+    if (!isTouchScrolling && (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8)) {
+      isTouchScrolling = true;
+    }
+
+    if (!isTouchScrolling) return;
+
+    e.preventDefault();
+    scrollRef.scrollLeft = touchStartScrollX - deltaX;
+    scrollRef.scrollTop = touchStartScrollY - deltaY;
+  }
+
+  function handleTouchEnd(e: TouchEvent) {
+    const touch = e.changedTouches[0];
+    if (!touch) return;
+
+    const point = getLocalPointFromClient(touch.clientX, touch.clientY);
+    const wasScrolling = isTouchScrolling;
+    isTouchScrolling = false;
+
+    if (!point || wasScrolling) return;
+
+    handleTouchTap(point.offsetX, point.offsetY);
+  }
 </script>
 
 <div
@@ -893,6 +1057,10 @@
   aria-rowcount={rows}
   aria-colcount={columns.length}
   aria-label="Data grid"
+  aria-describedby={`${gridId}-instructions ${gridId}-selection ${gridId}-active`}
+  aria-activedescendant={focusedCell ? `${gridId}-active` : undefined}
+  aria-multiselectable="true"
+  aria-readonly={readonly}
   style:width={containerWidthStyle}
   style:height={containerHeightStyle}
   style:--gridler-border={mergedTheme.borderColor}
@@ -916,6 +1084,9 @@
     onmousemove={handleMouseMove}
     onmouseup={handleMouseUp}
     onmouseleave={handleMouseLeave}
+    ontouchstart={handleTouchStart}
+    ontouchmove={handleTouchMove}
+    ontouchend={handleTouchEnd}
     ondblclick={handleDblClick}
     onwheel={handleWheel}
     oncontextmenu={handleContextMenu}
@@ -956,6 +1127,15 @@
     />
   {/if}
 
+  <div class="sr-only" id={`${gridId}-instructions`}>
+    Swipe with one finger to scroll the grid on touch devices. Tap a cell to select it. Use arrow keys to move between cells when the grid is focused.
+  </div>
+  <div class="sr-only" id={`${gridId}-selection`}>
+    {selectionDescription}
+  </div>
+  <div class="sr-only" id={`${gridId}-active`} role="gridcell">
+    {activeCellDescription}
+  </div>
   <div role="status" aria-live="polite" class="sr-only">
     {announcement}
   </div>
@@ -986,6 +1166,8 @@
     position: relative;
     z-index: 1;
     scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
   }
 
   .gridler-scroll::-webkit-scrollbar {
@@ -1003,6 +1185,7 @@
     left: 0;
     z-index: 2;
     cursor: default;
+    touch-action: none;
   }
 
   .sr-only {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {
@@ -26,43 +26,43 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
-    "@chromatic-com/storybook": "^5.0.1",
+    "@chromatic-com/storybook": "^5.0.2",
     "@eslint/compat": "^2.0.3",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.58.2",
-    "@sentry/svelte": "^10.43.0",
-    "@skeletonlabs/skeleton": "^4.12.1",
-    "@skeletonlabs/skeleton-svelte": "^4.12.1",
-    "@storybook/addon-a11y": "^10.2.17",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-svelte-csf": "^5.0.11",
-    "@storybook/addon-vitest": "^10.2.17",
-    "@storybook/sveltekit": "^10.2.17",
+    "@sentry/svelte": "^10.45.0",
+    "@skeletonlabs/skeleton": "^4.13.0",
+    "@skeletonlabs/skeleton-svelte": "^4.13.0",
+    "@storybook/addon-a11y": "^10.3.1",
+    "@storybook/addon-docs": "^10.3.1",
+    "@storybook/addon-svelte-csf": "^5.0.12",
+    "@storybook/addon-vitest": "^10.3.1",
+    "@storybook/sveltekit": "^10.3.1",
     "@storybook/test": "^8.6.15",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/svelte-virtual": "^3.13.21",
-    "@types/node": "^25.4.0",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/svelte-virtual": "^3.13.23",
+    "@types/node": "^25.5.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "eslint": "^10.0.3",
     "eslint-plugin-svelte": "^3.15.2",
     "globals": "^17.4.0",
     "playwright": "^1.58.2",
     "publint": "^0.3.18",
-    "storybook": "^10.2.17",
-    "svelte": "^5.53.10",
+    "storybook": "^10.3.1",
+    "svelte": "^5.54.0",
     "svelte-check": "^4.4.5",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.57.1",
+    "vite": "^8.0.1",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -76,13 +76,13 @@
     "@cartamd/plugin-math": "^4.3.1",
     "@friendofsvelte/tipex": "^0.1.1",
     "@js-temporal/polyfill": "^0.5.1",
-    "@svar-ui/svelte-grid": "^2.5.1",
+    "@svar-ui/svelte-grid": "^2.6.0",
     "@warkypublic/resolvespec-js": "^1.0.1",
     "@warkypublic/artemis-kit": "^1.0.10",
     "carta-md": "^4.11.1",
     "github-markdown-css": "^5.9.0",
-    "isomorphic-dompurify": "^3.1.0",
-    "katex": "^0.16.38",
+    "isomorphic-dompurify": "^3.5.1",
+    "katex": "^0.16.39",
     "monaco-editor": "^0.55.1"
   },
   "scripts": {