techniq · techniq · Jun 23, 2024 · Jun 22, 2024 · Jun 22, 2024 · Jun 22, 2024
diff --git a/.changeset/breezy-bananas-cross.md b/.changeset/breezy-bananas-cross.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Cleanup a11y and TS warnings/errors
diff --git a/.changeset/healthy-seas-bathe.md b/.changeset/healthy-seas-bathe.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[ButtonGroup] Remove mouse/keyboard event handlers (a11y). Use wrapping container to stop event propagation
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,6 +27,8 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
+      - run: pnpm check
+
       - run: pnpm lint
 
       - run: pnpm test:unit

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "test:unit": "pnpm -r test:unit",
     "build": "rimraf packages/*/dist && pnpm -r build",
+    "check": "pnpm -r check",
     "lint": "pnpm -r lint",
     "format": "pnpm -r format",
     "changeset": "changeset",

diff --git a/packages/svelte-ux/src/app.d.ts b/packages/svelte-ux/src/app.d.ts
@@ -4,6 +4,22 @@
 declare namespace App {
   // interface Error {}
   // interface Locals {}
-  // interface PageData {}
+
+  interface PageData {
+    meta: {
+      title?: string;
+      description?: string;
+      source?: string;
+      pageSource?: string;
+      api?: SveldJson;
+      features?: string[];
+      related?: string[];
+      hideUsage?: boolean;
+      hideTableOfContents?: boolean;
+      status?: string;
+    };
+  }
+
+  // interface PageState {}
   // interface Platform {}
 }
diff --git a/packages/svelte-ux/src/docs/Link.svelte b/packages/svelte-ux/src/docs/Link.svelte
@@ -1,3 +1,5 @@
+<!-- href provided by markdown/mdsvex -->
+<!-- svelte-ignore a11y-missing-attribute -->
 <a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>
diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { mdiGithub } from '@mdi/js';
+
   import Button from '../lib/components/Button.svelte';
   import Code from '../lib/components/Code.svelte';
   import Dialog from '../lib/components/Dialog.svelte';
   import Toggle from '../lib/components/Toggle.svelte';
   import Tooltip from '../lib/components/Tooltip.svelte';
 
   export let label: string;
-  export let source: string;
-  export let href: string;
-  export let icon: string;
+  export let source: string | undefined = undefined;
+  export let href: string | undefined = undefined;
+  export let icon: ComponentProps<Button>['icon'];
 </script>
 
 {#if source}

diff --git a/packages/svelte-ux/src/lib/actions/_domTracker.ts b/packages/svelte-ux/src/lib/actions/_domTracker.ts
@@ -51,10 +51,10 @@ export default class DomTracker {
     const existingAction = this.changes.actions.get(action.name);
     if (existingAction) {
       // Action already created, call action's update() (if available)
-      existingAction.update?.(options);
+      existingAction.update?.(options as any);
     } else {
       // Add new action
-      this.changes.actions.set(action.name, action(this.node, options));
+      this.changes.actions.set(action.name, action(this.node, options as any));
     }
   }
 

diff --git a/packages/svelte-ux/src/lib/actions/dataBackground.ts b/packages/svelte-ux/src/lib/actions/dataBackground.ts
@@ -28,7 +28,7 @@ export type DataBackgroundOptions = {
    */
   baseline?: boolean;
 
-  tweened?: Parameters<typeof tweened>[1];
+  tweened?: Parameters<typeof tweened<number | null>>[1];
 };
 
 export const dataBackground: Action<HTMLElement, DataBackgroundOptions> = (node, options) => {

diff --git a/packages/svelte-ux/src/lib/actions/mouse.ts b/packages/svelte-ux/src/lib/actions/mouse.ts
@@ -76,7 +76,7 @@ type MovableOptions = {
 /**
  * Track mouse position changes from mouse down on node to mouse up
  */
-export const movable: Action<HTMLElement, MovableOptions> = (node, options = {}) => {
+export const movable: Action<HTMLElement, MovableOptions | undefined> = (node, options = {}) => {
   let lastX = 0;
   let lastY = 0;
 
@@ -184,7 +184,7 @@ type MouseCoordsOptions = {
 };
 
 /** Set relative mouse coordinates as --x/--y CSS variables */
-export const mouseCoords: Action<HTMLElement, HTMLElement> = (node, target = node) => {
+export const mouseCoords: Action<HTMLElement, HTMLElement | undefined> = (node, target = node) => {
   function onMouseMove(e: MouseEvent) {
     // Mouse coordinates relative to node instead of viewport (`e.offsetX/Y` changes based on target/children)
     const rect = node.getBoundingClientRect();
@@ -209,7 +209,7 @@ export const mouseCoords: Action<HTMLElement, HTMLElement> = (node, target = nod
   node.addEventListener('mouseleave', onMouseLeave);
 
   return {
-    update(target: HTMLElement) {
+    update(target: HTMLElement | undefined) {
       target = target;
     },
     destroy() {

diff --git a/packages/svelte-ux/src/lib/actions/observable.d.ts b/packages/svelte-ux/src/lib/actions/observable.d.ts
diff --git a/packages/svelte-ux/src/lib/actions/observer.ts b/packages/svelte-ux/src/lib/actions/observer.ts
@@ -15,7 +15,10 @@ export const resize: Action<HTMLElement> = (node) => {
   };
 };
 
-export const intersection: Action<HTMLElement, IntersectionObserverInit> = (node, options) => {
+export const intersection: Action<HTMLElement, IntersectionObserverInit | undefined> = (
+  node,
+  options = {}
+) => {
   // TODO: Support defininting `options.root = node.parentNode` easily (maybe querySelector() string?)
 
   let observer = new IntersectionObserver(

diff --git a/packages/svelte-ux/src/lib/actions/popover.ts b/packages/svelte-ux/src/lib/actions/popover.ts
@@ -16,7 +16,7 @@ import {
 import { portal } from './portal.js';
 
 export type PopoverOptions = {
-  anchorEl?: HTMLElement;
+  anchorEl?: Element | HTMLElement;
   placement?: Placement;
   offset?: OffsetOptions;
   padding?: number;
@@ -71,7 +71,7 @@ export const popover: Action<Element | HTMLElement, PopoverOptions> = (node, opt
         left: `${x}px`,
         top: `${y}px`,
         ...(options?.matchWidth && {
-          width: `${anchorEl.offsetWidth}px`,
+          width: `${(anchorEl as HTMLElement).offsetWidth}px`,
         }),
       });
     });

diff --git a/packages/svelte-ux/src/lib/actions/scroll.ts b/packages/svelte-ux/src/lib/actions/scroll.ts
@@ -33,20 +33,12 @@ export const scrollIntoView: Action<HTMLElement, ScrollIntoViewOptions | undefin
   return { update };
 };
 
-type ScrollShadowOptions = {
-  top?: {
-    color?: string;
-  };
-  bottom?: {
-    color?: string;
-  };
-  left?: {
-    color?: string;
-  };
-  right?: {
-    color?: string;
-  };
-};
+type ScrollShadowOptions = Partial<
+  Record<
+    'top' | 'bottom' | 'left' | 'right',
+    { color?: string; offset?: number; blur?: number; spread?: number; scrollRatio?: number }
+  >
+>;
 
 export const scrollShadow: Action<HTMLElement, ScrollShadowOptions | undefined> = (
   node,

diff --git a/packages/svelte-ux/src/lib/actions/spotlight.ts b/packages/svelte-ux/src/lib/actions/spotlight.ts
@@ -49,20 +49,25 @@ export const spotlight: Action<HTMLElement, SpotlightOptions> = (node, options)
     'relative',
     'isolate',
 
-    options?.radius && '[--spotlight-radius:var(--default-spotlight-radius)]',
-    options?.borderWidth && '[--spotlight-border-width:var(--default-spotlight-border-width)]',
-    options?.borderColorStops &&
-      '[--spotlight-border-color-stops:var(--default-spotlight-border-color-stops)]',
-    options?.surfaceColorStops &&
-      '[--spotlight-surface-color-stops:var(--default-spotlight-surface-color-stops)]',
+    options?.radius ? '[--spotlight-radius:var(--default-spotlight-radius)]' : '',
+    options?.borderWidth ? '[--spotlight-border-width:var(--default-spotlight-border-width)]' : '',
+    options?.borderColorStops
+      ? '[--spotlight-border-color-stops:var(--default-spotlight-border-color-stops)]'
+      : '',
+    options?.surfaceColorStops
+      ? '[--spotlight-surface-color-stops:var(--default-spotlight-surface-color-stops)]'
+      : '',
 
-    options?.hover?.radius && 'hover:[--spotlight-radius:var(--hover-spotlight-radius)]',
-    options?.hover?.borderWidth &&
-      'hover:[--spotlight-border-width:var(--hover-spotlight-border-width)]',
-    options?.hover?.borderColorStops &&
-      'hover:[--spotlight-border-color-stops:var(--hover-spotlight-border-color-stops)]',
-    options?.hover?.surfaceColorStops &&
-      'hover:[--spotlight-surface-color-stops:var(--hover-spotlight-surface-color-stops)]',
+    options?.hover?.radius ? 'hover:[--spotlight-radius:var(--hover-spotlight-radius)]' : '',
+    options?.hover?.borderWidth
+      ? 'hover:[--spotlight-border-width:var(--hover-spotlight-border-width)]'
+      : '',
+    options?.hover?.borderColorStops
+      ? 'hover:[--spotlight-border-color-stops:var(--hover-spotlight-border-color-stops)]'
+      : '',
+    options?.hover?.surfaceColorStops
+      ? 'hover:[--spotlight-surface-color-stops:var(--hover-spotlight-surface-color-stops)]'
+      : '',
 
     // Spotlight applied as :after element with 2 background gradients.  padding-box for surface, and border-box for border
     'before:absolute',

diff --git a/packages/svelte-ux/src/lib/actions/table.ts b/packages/svelte-ux/src/lib/actions/table.ts
@@ -150,6 +150,7 @@ export const tableCell: Action<HTMLElement, TableCellOptions> = (node, options)
     if (column.dataBackground) {
       const extents = extent(tableData ?? [], (d) => getCellValue(column, d));
 
+      // @ts-ignore
       tracker.addAction(dataBackground, {
         value: context.cellValue,
         domain: tableData ? [min([0, extents[0]]), max([0, extents[1]])] : undefined,
@@ -174,7 +175,11 @@ export const tableCell: Action<HTMLElement, TableCellOptions> = (node, options)
   };
 };
 
-function getClasses(classProp: ColumnDef['classes']['td'], context: ResolveContext): string[] {
+function getClasses(
+  // @ts-ignore
+  classProp: ColumnDef['classes']['td'],
+  context: ResolveContext
+): string[] {
   const resolvedClassProp = typeof classProp === 'function' ? classProp(context) : classProp;
 
   if (typeof resolvedClassProp === 'string') {
@@ -188,6 +193,7 @@ function getClasses(classProp: ColumnDef['classes']['td'], context: ResolveConte
 }
 
 function getStyleProperties(
+  // @ts-ignore
   styleProp: ColumnDef['style']['td'],
   context: ResolveContext
 ): string[][] {

diff --git a/packages/svelte-ux/src/lib/actions/types.d.ts b/packages/svelte-ux/src/lib/actions/types.d.ts
@@ -0,0 +1,24 @@
+// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
+declare namespace svelteHTML {
+  interface HTMLAttributes<T> {
+    // use:intersection
+    'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
+
+    // use:mutate
+    'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
+
+    // use:movable
+    'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+    'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
+    'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+
+    // use:popover
+    'on:clickOutside'?: (event: CustomEvent) => void;
+
+    // use:overflow
+    'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
+
+    // use:longpress
+    'on:longpress'?: (event: CustomEvent) => void;
+  }
+}
diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.d.ts b/packages/svelte-ux/src/lib/components/ApiDocs.d.ts
@@ -1,61 +1,61 @@
+// See: https://github.com/carbon-design-system/sveld/blob/main/src/ComponentParser.ts#L26
 // See: https://github.com/mattjennings/vite-plugin-sveld/blob/main/types.d.ts
 
 interface SveldProp {
   name: string;
-  kind: string;
+  kind: 'let' | 'const' | 'function';
+  constant: boolean;
   type?: string;
+  value?: any;
+  description?: string;
   isFunction: boolean;
   isFunctionDeclaration: boolean;
   isRequired: boolean;
-  constant: boolean;
   reactive: boolean;
 }
 
 interface SveldSlot {
-  name: string;
+  name?: string;
   default: boolean;
-  fallback: string;
-  slot_props: string;
+  fallback?: string;
+  slot_props?: string;
   description?: string;
 }
 
-interface SveldEvent {
-  type: string;
+interface ForwardedEvent {
+  type: 'forwarded';
   name: string;
-  element: string;
+  element: ComponentInlineElement | ComponentElement;
+}
+
+interface DispatchedEvent {
+  type: 'dispatched';
+  name: string;
+  detail?: any;
   description?: string;
 }
 
+type SvelteEvent = ForwardedEvent | DispatchedEvent;
+
 interface SveldRestProps {
-  type: string;
+  type: 'InlineComponent' | 'Element';
   name: string;
 }
 
 interface SveldTypedefs {
   type: string;
   name: string;
+  description?: string;
   ts: string;
 }
 
-interface SveldModuleExport {
-  name: string;
-  kind: string;
-  type?: string;
-  value: string;
-  isFunction: boolean;
-  isFunctionDeclaration: boolean;
-  isRequired: boolean;
-  constant: boolean;
-  reactive: boolean;
-}
-
 interface SveldJson {
   props: SveldProp[];
   slots: SveldSlot[];
   events: SveldEvent[];
   typedefs: SveldTypedefs[];
-  rest_props: SveldRestProps[];
-  moduleExports: SveldModuleExport[];
+  rest_props: SveldRestProps;
+  moduleExports: SveldProp[];
   componentComment?: string;
   extends?: {
     interface: string;

diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte
@@ -133,7 +133,7 @@
 
           <div slot="actions" class="flex flex-wrap justify-end gap-1">
             {#if slot.slot_props != '{}'}
-              {#each parseSlotProps(slot.slot_props) as { key, value }}
+              {#each parseSlotProps(slot.slot_props ?? '') as { key, value }}
                 <Tooltip title="slot prop" offset={2}>
                   <div
                     class="inline-block border bg-orange-500/10 border-orange-500 text-orange-600 px-2 rounded-full text-xs cursor-help"

diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte
@@ -32,6 +32,7 @@
   in:fade|global={fadeParams}
   out:fade={fadeParams}
   use:portalAction={portal}
+  role="none"
 >
   <slot />
 </div>