diff --git a/.changeset/breezy-bananas-cross.md b/.changeset/breezy-bananas-cross.md
new file mode 100644
index 000000000..40e2b15bb
--- /dev/null
+++ 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
new file mode 100644
index 000000000..b95975bbf
--- /dev/null
+++ 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
index 6d68438a7..4a14ecc45 100644
--- 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
index 00c376d43..7b61ae9ba 100644
--- 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
index 1cea0dcf2..911f8b6a0 100644
--- 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
index eec570e72..e607ded31 100644
--- 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
index 7a2f2948d..0a740c946 100644
--- a/packages/svelte-ux/src/docs/ViewSourceButton.svelte
+++ b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -1,5 +1,7 @@
 <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';
@@ -7,9 +9,9 @@
   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
index c007b9617..6584d07e2 100644
--- 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
index 23b5e8012..5bac6feef 100644
--- 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
index e8f00ff05..fa0dd7367 100644
--- 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
deleted file mode 100644
index 2d30e674b..000000000
--- a/packages/svelte-ux/src/lib/actions/observable.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
-declare namespace svelteHTML {
-  interface HTMLAttributes<T> {
-    'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => any;
-    'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => any;
-  }
-}
diff --git a/packages/svelte-ux/src/lib/actions/observer.ts b/packages/svelte-ux/src/lib/actions/observer.ts
index 391344250..12d110b9e 100644
--- 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
index 6a0b8f798..6efeb5f74 100644
--- 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
index ceca27f55..e5c6f4687 100644
--- 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
index 60306f55e..9038e71e2 100644
--- 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
index f5222fe75..6824b5393 100644
--- 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
new file mode 100644
index 000000000..5c7a1ff77
--- /dev/null
+++ 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
index 841973850..2a27f7a20 100644
--- 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
index 7e3151ac9..7949673f8 100644
--- 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
index 33be43d71..3b0eb82bc 100644
--- 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>
diff --git a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
index c30e7afb5..a5f611758 100644
--- a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
+++ b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
@@ -1,11 +1,11 @@
-<script lang="ts">
+<script lang="ts" generics="TItem">
   import { mdiChevronRight } from '@mdi/js';
 
   import Icon from './Icon.svelte';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
-  export let items: (string | null | undefined)[] = [];
+  export let items: TItem[] = [];
   export let divider: string | undefined = undefined;
   export let inline = false;
   let className: string | undefined = undefined;
diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
index a221d1412..ef75efc82 100644
--- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
+++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
@@ -73,6 +73,6 @@
   });
 </script>
 
-<div role="group" class={_class} on:keydown on:keyup on:keypress on:click {...$$restProps}>
+<div role="group" class={_class} {...$$restProps}>
   <slot />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/Checkbox.svelte b/packages/svelte-ux/src/lib/components/Checkbox.svelte
index f051c616b..d0facda69 100644
--- a/packages/svelte-ux/src/lib/components/Checkbox.svelte
+++ b/packages/svelte-ux/src/lib/components/Checkbox.svelte
@@ -32,7 +32,7 @@
     groupCheck();
   }
   function groupCheck() {
-    checked = group.includes(value);
+    checked = group?.includes(value) ?? false;
   }
 
   // Update group when checkbox changes
diff --git a/packages/svelte-ux/src/lib/components/Code.svelte b/packages/svelte-ux/src/lib/components/Code.svelte
index ff3090585..ddaa6105a 100644
--- a/packages/svelte-ux/src/lib/components/Code.svelte
+++ b/packages/svelte-ux/src/lib/components/Code.svelte
@@ -3,7 +3,6 @@
   import 'prism-svelte';
 
   import { cls } from '../utils/styles.js';
-  import { getComponentClasses } from './theme.js';
   import CopyButton from './CopyButton.svelte';
 
   export let source: string | null = null;
@@ -17,11 +16,9 @@
     pre?: string;
     code?: string;
   } = {};
-
-  const settingsClasses = getComponentClasses('Code');
 </script>
 
-<div class={cls('Code', 'rounded', settingsClasses.root, classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded', classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre
diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
index b014e5833..504c125e1 100644
--- a/packages/svelte-ux/src/lib/components/DateButton.svelte
+++ b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -4,7 +4,12 @@
 
   import Button from './Button.svelte';
   import { getDateFuncsByPeriodType } from '../utils/date.js';
-  import { DateToken, PeriodType, type SelectedDate } from '../utils/date_types.js';
+  import {
+    DateToken,
+    PeriodType,
+    type CustomIntlDateTimeFormatOptions,
+    type SelectedDate,
+  } from '../utils/date_types.js';
   import { cls } from '../utils/styles.js';
   import { getComponentSettings, getSettings } from './settings.js';
 
@@ -18,7 +23,7 @@
   export let selected: SelectedDate;
   export let hidden: boolean = false;
   export let fade: boolean = false;
-  export let format = getCustomFormat(periodType);
+  export let format: CustomIntlDateTimeFormatOptions | undefined = getCustomFormat(periodType);
   export let variant = defaults.variant;
   let className: string | undefined = undefined;
   export { className as class };
@@ -57,7 +62,8 @@
       : selected instanceof Array
         ? selected.some((d) => isSame(date, d))
         : selected instanceof Object
-          ? isSame(date, selected.from ?? selected.to)
+          ? // @ts-ignore
+            isSame(date, selected.from ?? selected.to)
           : false;
 
   $: isSelectedEnd =
@@ -66,7 +72,8 @@
       : selected instanceof Array
         ? selected.some((d) => isSame(date, d))
         : selected instanceof Object
-          ? isSame(date, selected.to ?? selected.from)
+          ? // @ts-ignore
+            isSame(date, selected.to ?? selected.from)
           : false;
 
   $: isCurrent = isSame(date, new Date());
diff --git a/packages/svelte-ux/src/lib/components/DateSelect.svelte b/packages/svelte-ux/src/lib/components/DateSelect.svelte
index 718283d5d..e3204a059 100644
--- a/packages/svelte-ux/src/lib/components/DateSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/DateSelect.svelte
@@ -20,6 +20,7 @@
    */
   export let disabledDates: DisabledDate | undefined = undefined;
 
+  // @ts-ignore
   $: startOfMonth = selected?.[activeDate] ? startOfMonthFunc(selected[activeDate]) : undefined;
 </script>
 
diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte
index bda043c84..33c2e7073 100644
--- a/packages/svelte-ux/src/lib/components/Dialog.svelte
+++ b/packages/svelte-ux/src/lib/components/Dialog.svelte
@@ -106,6 +106,7 @@
       }
     }}
     use:portalAction={portal}
+    role="presentation"
   >
     <div
       class={cls(
@@ -123,6 +124,7 @@
       on:outroend
       bind:this={dialogEl}
       use:focusMove={{ restoreFocus: true }}
+      role="dialog"
     >
       {#if loading}
         <Overlay center class="rounded">
diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte
index 10f5b80fc..4513bd096 100644
--- a/packages/svelte-ux/src/lib/components/Drawer.svelte
+++ b/packages/svelte-ux/src/lib/components/Drawer.svelte
@@ -49,6 +49,7 @@
     {portal}
   />
 
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div
     class={cls(
       'Drawer',
@@ -96,6 +97,7 @@
     }}
     use:portalAction={portal}
     use:focusMove={{ restoreFocus: true }}
+    role="dialog"
   >
     {#if loading}
       <Overlay center class="rounded">
diff --git a/packages/svelte-ux/src/lib/components/Duration.svelte b/packages/svelte-ux/src/lib/components/Duration.svelte
index 8fb972250..d657bfc86 100644
--- a/packages/svelte-ux/src/lib/components/Duration.svelte
+++ b/packages/svelte-ux/src/lib/components/Duration.svelte
@@ -24,10 +24,10 @@
     const newDuration = getDuration(start, end ?? $timer, duration);
 
     const unitsMoreThanSeconds = [
-      newDuration.years,
-      newDuration.days,
-      newDuration.hours,
-      newDuration.minutes,
+      newDuration?.years,
+      newDuration?.days,
+      newDuration?.hours,
+      newDuration?.minutes,
     ].filter((x) => x).length;
 
     // DurationUnits is indexed biggest (Year) to smallest (Milliseconds)
diff --git a/packages/svelte-ux/src/lib/components/ErrorNotification.svelte b/packages/svelte-ux/src/lib/components/ErrorNotification.svelte
index e93f31eeb..4c1f287b2 100644
--- a/packages/svelte-ux/src/lib/components/ErrorNotification.svelte
+++ b/packages/svelte-ux/src/lib/components/ErrorNotification.svelte
@@ -52,8 +52,8 @@
   <Dialog {open} style="max-width: 90vw">
     <div slot="title">
       {#if message}
-        {#each message.split('\n') as message}
-          <div>{message}</div>
+        {#each message.split('\n') as msg}
+          <div>{msg}</div>
         {/each}
       {/if}
     </div>
diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
index 95b43eacb..64a3d8148 100644
--- a/packages/svelte-ux/src/lib/components/Field.svelte
+++ b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -126,6 +126,7 @@
         {/if}
 
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div class="flex-grow inline-grid" on:click>
           {#if label && ['inset', 'float'].includes(labelPlacement)}
             <span
diff --git a/packages/svelte-ux/src/lib/components/Grid.svelte b/packages/svelte-ux/src/lib/components/Grid.svelte
index c1b37168d..0f0279c0c 100644
--- a/packages/svelte-ux/src/lib/components/Grid.svelte
+++ b/packages/svelte-ux/src/lib/components/Grid.svelte
@@ -38,6 +38,7 @@
     (autoColumns ? `repeat(auto-fill, minmax(${autoColumns}, 1fr))` : `repeat(${columns}, 1fr)`);
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="Grid"
   class:grid={!inline}
diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte
index c360e8d59..1b67734b0 100644
--- a/packages/svelte-ux/src/lib/components/ListItem.svelte
+++ b/packages/svelte-ux/src/lib/components/ListItem.svelte
@@ -51,6 +51,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <li
   class={cls(
     'ListItem',
@@ -66,6 +67,7 @@
     $$props.class
   )}
   on:click
+  role="listitem"
 >
   {#if loading}
     <Overlay center class="rounded">
@@ -76,7 +78,10 @@
   <slot name="avatar">
     {#if icon != null}
       {#if avatar}
-        <Avatar class={cls(settingsClasses.avatar, classes.avatar)} {...avatar}>
+        <Avatar
+          class={cls(settingsClasses.avatar, classes.avatar)}
+          {...typeof avatar === 'object' ? avatar : {}}
+        >
           <Icon data={icon} class={cls(settingsClasses.icon, classes.icon)} />
         </Avatar>
       {:else}
diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte
index e8a9e48e3..7a1a254a3 100644
--- a/packages/svelte-ux/src/lib/components/Menu.svelte
+++ b/packages/svelte-ux/src/lib/components/Menu.svelte
@@ -80,6 +80,7 @@
   let:close
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <menu
     class={cls('menu-items outline-none max-h-screen', settingsClasses.menu, classes.menu)}
     bind:this={menuItemsEl}
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
index d706171f9..94c5f282f 100644
--- a/packages/svelte-ux/src/lib/components/MenuButton.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -29,6 +29,10 @@
   let open = false;
 
   $: restProps = { ...defaults, ...$$restProps };
+
+  function setValue(val: typeof value) {
+    value = val;
+  }
 </script>
 
 <Button
@@ -61,7 +65,7 @@
     }}
     {...menuProps}
   >
-    <slot {options} {selected} close={() => (open = false)} setValue={(val) => (value = val)}>
+    <slot {options} {selected} close={() => (open = false)} {setValue}>
       <menu class="group p-1">
         {#each options as option}
           <MenuItem
diff --git a/packages/svelte-ux/src/lib/components/Month.svelte b/packages/svelte-ux/src/lib/components/Month.svelte
index 27be66c7a..a5e262bf6 100644
--- a/packages/svelte-ux/src/lib/components/Month.svelte
+++ b/packages/svelte-ux/src/lib/components/Month.svelte
@@ -22,7 +22,7 @@
   import { getSettings } from './settings.js';
   import MonthListByYear from './MonthListByYear.svelte';
 
-  export let selected: SelectedDate | undefined = undefined;
+  export let selected: SelectedDate = undefined;
 
   export let startOfMonth =
     (selected instanceof Date && startOfMonthFunc(selected)) ||
diff --git a/packages/svelte-ux/src/lib/components/MonthList.svelte b/packages/svelte-ux/src/lib/components/MonthList.svelte
index 9a50cf105..feba554ae 100644
--- a/packages/svelte-ux/src/lib/components/MonthList.svelte
+++ b/packages/svelte-ux/src/lib/components/MonthList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { isSameMonth, isWithinInterval, startOfMonth, endOfMonth } from 'date-fns';
 
   import { getMonths, PeriodType } from '../utils/date.js';
@@ -6,8 +7,8 @@
   import DateButton from './DateButton.svelte';
 
   export let year: number | undefined = undefined;
-  export let selected: SelectedDate | undefined = undefined;
-  export let format: string | undefined = undefined;
+  export let selected: SelectedDate = undefined;
+  export let format: ComponentProps<DateButton>['format'] = undefined;
   /**
    * Dates to disable (not selectable)
    */
diff --git a/packages/svelte-ux/src/lib/components/MonthListByYear.svelte b/packages/svelte-ux/src/lib/components/MonthListByYear.svelte
index 776f73251..d8d0747dc 100644
--- a/packages/svelte-ux/src/lib/components/MonthListByYear.svelte
+++ b/packages/svelte-ux/src/lib/components/MonthListByYear.svelte
@@ -11,12 +11,14 @@
   export let minDate: Date | undefined = undefined;
   export let maxDate: Date | undefined = undefined;
 
+  let minYear: number;
   $: minYear =
     minYear ??
     (minDate
       ? minDate.getFullYear()
       : subYears(getMinSelectedDate(selected) || new Date(), 2).getFullYear());
 
+  let maxYear: number;
   $: maxYear =
     maxYear ??
     (maxDate
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
index 51043dd1b..3127fa520 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TOption, TValue extends string | number">
   import { getComponentClasses } from './theme.js';
 
   import { type ComponentProps, createEventDispatcher } from 'svelte';
@@ -17,11 +17,9 @@
   import uniqueStore from '../stores/uniqueStore.js';
   import { cls } from '../utils/styles.js';
 
-  type Option = $$Generic;
-
-  export let options: Option[];
-  export let value: string[] | number[] = [];
-  export let indeterminateSelected: string[] | number[] = [];
+  export let options: TOption[];
+  export let value: TValue[] = [];
+  export let indeterminateSelected: typeof value = [];
   export let duration = 200;
   export let inlineSearch = false;
   export let autoFocusSearch = false;
@@ -50,16 +48,17 @@
   export let onApply = async (ctx: {
     selection: typeof $selection;
     indeterminate: typeof $indeterminateStore;
-    original: { selected: Option[]; unselected: Option[] };
+    original: { selected: TOption[]; unselected: TOption[] };
   }) => {
     // no-op by default
   };
 
   const dispatch = createEventDispatcher<{
     change: {
+      value: typeof value;
       selection: typeof $selection;
       indeterminate: typeof $indeterminateStore;
-      original: { selected: Option[]; unselected: Option[] };
+      original: { selected: TOption[]; unselected: TOption[] };
     };
     cancel: null;
   }>();
@@ -69,11 +68,12 @@
 
   // Partition options based on if they initially selected, which will be displayed at the top
   $: [selectedOptions, unselectedOptions] = partition(options, (x) =>
+    // @ts-ignore
     value.includes(get(x, valueProp))
   );
 
   // Filter by search text
-  function applyFilter(option: Option, searchText: string) {
+  function applyFilter(option: TOption, searchText: string) {
     if (searchText) {
       return get(option, labelProp).toLowerCase().includes(searchText.toLowerCase());
     } else {
@@ -90,11 +90,12 @@
   });
 
   $: isSelectionDirty = dirtyStore(selection);
+  // @ts-ignore
   $: indeterminateStore = uniqueStore(indeterminateSelected);
 
   function onChange() {
     const changeContext = {
-      value: $selection.selected,
+      value: $selection.selected as TValue[],
       selection: $selection,
       indeterminate: $indeterminateStore,
       original: { selected: selectedOptions, unselected: unselectedOptions },
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 9d642c7f6..a275e3c30 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TOption, TValue extends string | number">
   import { getComponentSettings } from './settings.js';
 
   import { createEventDispatcher, type ComponentProps, type ComponentEvents } from 'svelte';
@@ -16,14 +16,12 @@
   import { Logger } from '../utils/logger.js';
   import ProgressCircle from './ProgressCircle.svelte';
 
-  type Option = $$Generic;
-
   const { classes: settingsClasses, defaults } = getComponentSettings('MultiSelectField');
 
   // MultiSelectMenu props
-  export let options: Option[];
-  export let value: any[] = [];
-  export let indeterminateSelected: any[] = [];
+  export let options: TOption[];
+  export let value: TValue[] = [];
+  export let indeterminateSelected: typeof value = [];
   /** Maximum number of options that can be selected  */
   export let max: number | undefined = undefined;
   export let placement: Placement = 'bottom-start';
@@ -43,12 +41,12 @@
   export let rounded = false;
   export let dense = false;
 
-  export let formatSelected: (ctx: { value: any[]; options: Option[] }) => string = ({ value }) =>
+  export let formatSelected: (ctx: { value: any[]; options: TOption[] }) => string = ({ value }) =>
     `${value.length} selected`;
 
   export let classes: {
     root?: string;
-    multiSelectMenu?: ComponentProps<MultiSelectMenu<Option>>['classes'];
+    multiSelectMenu?: ComponentProps<MultiSelectMenu<TOption, TValue>>['classes'];
     field?: string;
     actions?: string;
   } = {};
@@ -59,8 +57,9 @@
   let inputEl: HTMLInputElement | undefined;
   let menuOptionsEl: HTMLDivElement | undefined;
 
-  export let menuProps: Omit<ComponentProps<MultiSelectMenu<Option>>, 'options'> | undefined =
-    undefined;
+  export let menuProps:
+    | Omit<ComponentProps<MultiSelectMenu<TOption, TValue>>, 'options'>
+    | undefined = undefined;
 
   const logger = new Logger('MultiSelectField');
 
@@ -120,7 +119,7 @@
     }
   }
 
-  function onSelectChange(e: ComponentEvents<MultiSelectMenu<Option>>['change']) {
+  function onSelectChange(e: ComponentEvents<MultiSelectMenu<TOption, TValue>>['change']) {
     logger.info('onSelectChange', e);
     value = e.detail.selection.selected;
     // TODO: Also dispatch `indeterminate: e.detail.indeterminate`?
@@ -137,6 +136,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(disabled && 'pointer-events-none', settingsClasses.root, classes.root, $$props.class)}
   on:click={onClick}
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
index 4bbee0306..b44646393 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TOption, TValue extends string | number">
   import type { ComponentProps } from 'svelte';
   import type { Placement } from '@floating-ui/dom';
 
@@ -9,11 +9,9 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
-  type Option = $$Generic;
-
-  export let options: Option[];
-  export let value: string[] = [];
-  export let indeterminateSelected: string[] = [];
+  export let options: TOption[];
+  export let value: TValue[] = [];
+  export let indeterminateSelected: typeof value = [];
   export let open = false;
   export let duration = 200;
   export let placement: Placement = 'bottom-start';
@@ -32,7 +30,7 @@
   export let classes: {
     root?: string;
     menu?: string;
-    multiSelect?: ComponentProps<MultiSelect<Option>>['classes'];
+    multiSelect?: ComponentProps<MultiSelect<TOption, TValue>>['classes'];
   } = {};
   const settingsClasses = getComponentClasses('MultiSelectMenu');
 
diff --git a/packages/svelte-ux/src/lib/components/Notification.svelte b/packages/svelte-ux/src/lib/components/Notification.svelte
index 91c1b4dd1..7313dfb9f 100644
--- a/packages/svelte-ux/src/lib/components/Notification.svelte
+++ b/packages/svelte-ux/src/lib/components/Notification.svelte
@@ -40,6 +40,7 @@
 </script>
 
 {#if open}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="Notification rounded-lg border bg-surface-100 shadow-lg z-10"
     transition:fly={{ duration: 200, easing: quadIn, x: 100 }}
diff --git a/packages/svelte-ux/src/lib/components/Popover.svelte b/packages/svelte-ux/src/lib/components/Popover.svelte
index 7f6ef48a4..ee52590d4 100644
--- a/packages/svelte-ux/src/lib/components/Popover.svelte
+++ b/packages/svelte-ux/src/lib/components/Popover.svelte
@@ -64,6 +64,7 @@
 <svelte:window on:keydown={onKeydown} />
 
 {#if open}
+  <!-- @ts-ignore -->
   <div
     class={cls('Popover absolute z-50 outline-none', settingsClasses.root, className)}
     {style}
diff --git a/packages/svelte-ux/src/lib/components/RangeField.svelte b/packages/svelte-ux/src/lib/components/RangeField.svelte
index 5bdbf4726..8cc0c7b40 100644
--- a/packages/svelte-ux/src/lib/components/RangeField.svelte
+++ b/packages/svelte-ux/src/lib/components/RangeField.svelte
@@ -4,7 +4,7 @@
   import Field from './Field.svelte';
   import Button from './Button.svelte';
   import { getComponentSettings, getSettings } from './settings.js';
-  import type { FormatType } from '../utils/format.js';
+  import type { FormatNumberStyle } from '../utils/format.js';
 
   const { classes: settingsClasses, defaults } = getComponentSettings('RangeField');
 
@@ -14,7 +14,7 @@
   export let min = 0;
   export let max = 100;
   export let step = 1;
-  export let format: FormatType = 'none';
+  export let format: FormatNumberStyle = 'none';
 
   $: restProps = { ...defaults, ...$$restProps };
 </script>
diff --git a/packages/svelte-ux/src/lib/components/RangeSlider.svelte b/packages/svelte-ux/src/lib/components/RangeSlider.svelte
index afb7876bb..1fc3dac92 100644
--- a/packages/svelte-ux/src/lib/components/RangeSlider.svelte
+++ b/packages/svelte-ux/src/lib/components/RangeSlider.svelte
@@ -66,7 +66,7 @@
   $: end.set(scale(value[1]));
 
   function onMoveStart(which: 'start' | 'range' | 'end') {
-    return function (e: MouseEvent) {
+    return function () {
       ignoreClickEvents = true;
 
       isMoving = true;
@@ -91,10 +91,12 @@
   }
 
   function onMove(which: 'start' | 'range' | 'end') {
-    return function (e: MouseEvent) {
+    return function (e: CustomEvent<{ dx: number }>) {
+      // @ts-ignore
       const parentEl = e.target.parentElement;
       const parentRect = parentEl.getBoundingClientRect();
 
+      // @ts-ignore
       const deltaPercent = e.detail.dx / parentRect.width;
       const deltaValue = (max - min) * deltaPercent;
 
@@ -136,7 +138,7 @@
   }
 
   function onMoveEnd(which: 'start' | 'range' | 'end') {
-    return function (e: MouseEvent) {
+    return function () {
       // Ignore immediate click events after a drag (also fired on mouse up)
       setTimeout(() => {
         ignoreClickEvents = false;
@@ -149,7 +151,7 @@
   }
 
   function onMouseEnter(which: 'start' | 'range' | 'end') {
-    return function (e: MouseEvent) {
+    return function () {
       if (isMoving === false) {
         switch (which) {
           case 'start':
@@ -191,19 +193,20 @@
 
   function onClick(e: MouseEvent) {
     // Focus for keyboard input
-    e.target.focus();
+    const target = e.target as HTMLDivElement;
+    target.focus();
 
     if (ignoreClickEvents) {
       return;
     }
 
     let sliderRect: DOMRect;
-    if (e.target.classList.contains('RangeSlider')) {
+    if (target.classList.contains('RangeSlider')) {
       // Root / track
-      sliderRect = e.target.getBoundingClientRect();
-    } else if (e.target.classList.contains('range')) {
+      sliderRect = target.getBoundingClientRect();
+    } else if (target.classList.contains('range')) {
       // Range selection
-      sliderRect = e.target.parentElement.getBoundingClientRect();
+      sliderRect = target.parentElement!.getBoundingClientRect();
     } else {
       // Ignore clicks on thumbs, etc
       return;
@@ -225,6 +228,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-role-has-required-aria-props -->
 <div
   class={cls(
     'RangeSlider',
@@ -234,12 +238,13 @@
     className
   )}
   style="--start: {$start}; --end: {$end};"
-  {disabled}
   tabindex={disabled ? -1 : 0}
   on:click={onClick}
   on:keydown={onKeyDown}
   {...$$restProps}
+  role="slider"
 >
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     on:mouseenter={onMouseEnter('range')}
     on:mouseleave={onMouseLeave('range')}
@@ -250,6 +255,7 @@
     class="range absolute top-0 bottom-0 bg-primary"
   />
 
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     use:movable={{ axis: 'x', stepPercent }}
     on:movestart={onMoveStart('range')}
@@ -271,6 +277,7 @@
     <Icon data={mdiDragHorizontal} class="text-primary-content" />
   </div>
 
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     use:movable={{ axis: 'x', stepPercent }}
     on:movestart={onMoveStart('start')}
@@ -290,6 +297,7 @@
     )}
   />
 
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     use:movable={{ axis: 'x', stepPercent }}
     on:movestart={onMoveStart('end')}
diff --git a/packages/svelte-ux/src/lib/components/ScrollContainer.svelte b/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
index b64c320ef..e80a9ac6e 100644
--- a/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
+++ b/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
   let node: HTMLElement;
+
+  // function scrollIntoView(options: Parameters<typeof node.scrollIntoView>['0']) {
+  //   return (node: HTMLElement) => node.scrollIntoView(options);
+  // }
+  function scrollIntoView(node: HTMLElement) {
+    return (options?: Parameters<typeof node.scrollIntoView>['0']) => node.scrollIntoView(options);
+  }
 </script>
 
 <div bind:this={node} class={$$props.class} style={$$props.style}>
-  <slot scrollIntoView={(options) => node.scrollIntoView(options)} />
+  <slot scrollIntoView={scrollIntoView(node)} />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index d47356d1a..2f14c00ad 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -20,7 +20,7 @@
   import type { ScrollIntoViewOptions } from '../actions/scroll.js';
 
   const dispatch = createEventDispatcher<{
-    change: { value: any; option: MenuOption };
+    change: { value: any; option: MenuOption | null };
     inputChange: string;
   }>();
   const { classes: settingsClasses, defaults } = getComponentSettings('SelectField');
@@ -49,7 +49,6 @@
   export let rounded = false;
   export let dense = false;
   export let clearSearchOnOpen = true;
-  export let tabindex = 0;
   export let autofocus: ComponentProps<TextField>['autofocus'] = undefined;
   export let fieldActions: ComponentProps<TextField>['actions'] = autofocus
     ? (node) => [
@@ -334,14 +333,14 @@
   function selectValue(value: any) {
     logger.debug('selectValue', { value, options, filteredOptions });
 
-    const option = options?.find((option) => optionValue(option) === value);
+    const option = options?.find((option) => optionValue(option) === value) ?? null;
     return selectOption(option);
   }
 
   /**
    * Select option by object
    */
-  function selectOption(option: MenuOption) {
+  function selectOption(option: MenuOption | null) {
     logger.info('selectOption', { option });
 
     const previousValue = value;
@@ -522,17 +521,14 @@
           bind:menuOptionsEl
           {open}
           {loading}
-          {highlightIndex}
           {searchText}
           {filteredOptions}
           classes={{
             ...classes,
             root: cls(classes.options, inlineOptions ? 'border-t mt-1 px-1' : ''),
           }}
-          {optionText}
           {optionValue}
           {selectIndex}
-          {selectOption}
           {onKeyPress}
           {onKeyDown}
         >
@@ -583,17 +579,14 @@
         bind:menuOptionsEl
         {open}
         {loading}
-        {highlightIndex}
         {searchText}
         {filteredOptions}
         classes={{
           ...classes,
           root: cls(classes.options, inlineOptions ? 'border-t mt-1 px-1' : ''),
         }}
-        {optionText}
         {optionValue}
         {selectIndex}
-        {selectOption}
         {onKeyPress}
         {onKeyDown}
       >
diff --git a/packages/svelte-ux/src/lib/components/SpringValue.svelte b/packages/svelte-ux/src/lib/components/SpringValue.svelte
index dc411a48a..e2f37bc24 100644
--- a/packages/svelte-ux/src/lib/components/SpringValue.svelte
+++ b/packages/svelte-ux/src/lib/components/SpringValue.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { spring } from 'svelte/motion';
-  import type { FormatType } from '../utils/format.js';
+  import type { FormatNumberStyle } from '../utils/format.js';
   import { getSettings } from './settings.js';
 
-  type T = $$Generic;
-  type SpringOptions = Parameters<typeof spring<T>>[1];
+  type SpringOptions = Parameters<typeof spring<number | null>>[1];
 
-  export let value: T | 0;
-  export let format: FormatType = 'none';
+  export let value: number | null;
+  export let format: FormatNumberStyle = 'none';
   export let options: SpringOptions = undefined;
   export let disabled = false;
 
diff --git a/packages/svelte-ux/src/lib/components/Switch.svelte b/packages/svelte-ux/src/lib/components/Switch.svelte
index 15c317e58..24f0628a0 100644
--- a/packages/svelte-ux/src/lib/components/Switch.svelte
+++ b/packages/svelte-ux/src/lib/components/Switch.svelte
@@ -24,6 +24,7 @@
 </script>
 
 <div class={cls('Switch', 'inline-block', settingsClasses.root, classes.root)}>
+  <!-- TODO: Consider dispatch custom event for `change` so `e.target.checked` is guaranteed downstream -->
   <input
     {id}
     {name}
diff --git a/packages/svelte-ux/src/lib/components/Table.svelte b/packages/svelte-ux/src/lib/components/Table.svelte
index 4fd3f060e..d0823a94f 100644
--- a/packages/svelte-ux/src/lib/components/Table.svelte
+++ b/packages/svelte-ux/src/lib/components/Table.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TData">
   import { createEventDispatcher } from 'svelte';
 
   import { tableCell } from '../actions/table.js';
@@ -12,15 +12,13 @@
   import { getSettings } from './settings.js';
   import tableOrderStore from '../stores/tableOrderStore.js';
 
-  type T = $$Generic;
-
   const dispatch = createEventDispatcher<{
-    headerClick: { column: ColumnDef };
-    cellClick: { column: ColumnDef; rowData: T };
+    headerClick: { column: ColumnDef<TData> };
+    cellClick: { column: ColumnDef<TData>; rowData: TData };
   }>();
 
-  export let columns: ColumnDef[] = [];
-  export let data: T[] | null = [];
+  export let columns: ColumnDef<TData>[] = [];
+  export let data: TData[] | null = [];
 
   export let order: ReturnType<typeof tableOrderStore> | undefined = undefined;
 
@@ -38,6 +36,8 @@
   // const settingsClasses = getComponentClasses('Table');
   const settingsClasses: typeof classes = {};
 
+  const { format } = getSettings();
+
   export let styles: {
     container?: string;
     wrapper?: string;
@@ -60,6 +60,7 @@
       };
     });
   });
+
   $: rowColumns = getRowColumns(columns).map((column) => {
     return {
       ...column,
@@ -70,13 +71,13 @@
     };
   });
 
-  const { format } = getSettings();
-  $: getCellContent = (column: ColumnDef, rowData: T, rowIndex: number) => {
+  $: getCellContent = (column: ColumnDef<TData>, rowData: TData, rowIndex: number) => {
     let value = getCellValue(column, rowData, rowIndex);
     if (column.format) {
       if (typeof column.format === 'function') {
         return column.format(value, rowData, rowIndex);
       } else {
+        // @ts-ignore
         return $format(value, column.format);
       }
     } else {
diff --git a/packages/svelte-ux/src/lib/components/TableOfContents.svelte b/packages/svelte-ux/src/lib/components/TableOfContents.svelte
index fdaaba8ce..288953215 100644
--- a/packages/svelte-ux/src/lib/components/TableOfContents.svelte
+++ b/packages/svelte-ux/src/lib/components/TableOfContents.svelte
@@ -2,7 +2,7 @@
   import { onDestroy, onMount } from 'svelte';
   import { mdiCircleSmall } from '@mdi/js';
 
-  import { buildTree } from '../utils/array.js';
+  import { buildTree, type TreeNode } from '../utils/array.js';
   import { cls } from '../utils/styles.js';
   import TreeList from './TreeList.svelte';
   import Icon from './Icon.svelte';
@@ -16,23 +16,25 @@
   let className: string | undefined = undefined;
   export { className as class };
 
+  type HeadingNode = { id: string; name: string; level: number; element: HTMLElement };
+
   let activeHeadingId = '';
-  let headings = [];
-  let nodes = [];
+  let headings: HeadingNode[] = [];
+  let nodes: TreeNode[] = [];
 
   const settingsClasses = getComponentClasses('TableOfContents');
 
-  function onScroll(e) {
-    activeHeadingId = headings?.find(
-      (heading) => heading.element.offsetTop >= window.scrollY + scrollOffset
-    )?.id;
+  function onScroll(e: Event) {
+    activeHeadingId =
+      headings?.find((heading) => heading.element.offsetTop >= window.scrollY + scrollOffset)?.id ??
+      '';
   }
 
   onMount(() => {
     const el = document.querySelector(element);
 
     const selector = Array.from({ length: maxDepth }, (_, i) => 'h' + ++i).join(','); // h1,h2,...
-    headings = Array.from(el?.querySelectorAll(selector) ?? [], (el) => {
+    headings = Array.from(el?.querySelectorAll<HTMLElement>(selector) ?? [], (el) => {
       if (!el.hasAttribute('id')) {
         el.setAttribute('id', el.innerHTML.toLowerCase().replaceAll(' ', '-'));
       }
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 815830e73..d277b591d 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -21,7 +21,7 @@
 
   const dispatch = createEventDispatcher<{
     clear: null;
-    change: { value: typeof value; inputValue: InputValue; operator?: string };
+    change: { value: typeof value; inputValue: InputValue | null; operator?: string };
   }>();
 
   const { classes: settingsClasses, defaults } = getComponentSettings('TextField');
@@ -31,7 +31,7 @@
   export let label = '';
   export let labelPlacement: LabelPlacement =
     defaults.labelPlacement ?? fieldDefaults.labelPlacement ?? DEFAULT_LABEL_PLACEMENT;
-  export let value: InputValue | { [operator: string]: InputValue } = ''; // TODO: Can also include operator: { "operator": "value" }
+  export let value: InputValue | { [operator: string]: InputValue | null } | null = ''; // TODO: Can also include operator: { "operator": "value" }
   export let type:
     | 'text'
     | 'password'
@@ -138,7 +138,7 @@
       inputMode = 'text';
   }
 
-  let inputValue: InputValue = value == null ? '' : String(value);
+  let inputValue: InputValue | null = value == null ? '' : String(value);
   $: potentialInputValue = isLiteralObject(value) ? Object.values(value)[0] : value ?? null;
   $: if (inputType !== 'number' || inputValue != potentialInputValue) {
     // Update the inputValue, but when the input type is number only do it if the values are actually different.
@@ -151,7 +151,7 @@
 
   let lastTimeoutId: ReturnType<typeof setTimeout>;
   function updateValue() {
-    let newValue;
+    let newValue: typeof value;
     const valueAsType = inputType === 'number' ? Number(inputValue) : inputValue;
     if (inputValue && operator) {
       // Add with operator if used
@@ -357,7 +357,7 @@
                 {autocomplete}
                 type={inputType}
                 inputmode={inputMode}
-                value={inputValue}
+                value={String(inputValue ?? '')}
                 {mask}
                 {replace}
                 {accept}
diff --git a/packages/svelte-ux/src/lib/components/ThemeSelect.svelte b/packages/svelte-ux/src/lib/components/ThemeSelect.svelte
index a5df55225..b1a09c260 100644
--- a/packages/svelte-ux/src/lib/components/ThemeSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/ThemeSelect.svelte
@@ -89,6 +89,7 @@
           id="switch-color-scheme"
           checked={$currentTheme.dark}
           on:change={(e) => {
+            // @ts-ignore: <input type="checkbox"> has `checked`, but difficult to type without dispatching custom event
             let newTheme = e.target?.checked ? 'dark' : 'light';
             currentTheme.setTheme(newTheme);
           }}
diff --git a/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte b/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
index 42e3f3c90..4bdd1beef 100644
--- a/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
+++ b/packages/svelte-ux/src/lib/components/ThemeSwitch.svelte
@@ -12,6 +12,7 @@
 <Switch
   checked={$currentTheme.dark}
   on:change={(e) => {
+    // @ts-ignore: <input type="checkbox"> has `checked`, but difficult to type without dispatching custom event
     let newTheme = e.target?.checked ? 'dark' : 'light';
     currentTheme.setTheme(newTheme);
   }}
diff --git a/packages/svelte-ux/src/lib/components/Tilt.svelte b/packages/svelte-ux/src/lib/components/Tilt.svelte
index 209da3e65..52e81dd76 100644
--- a/packages/svelte-ux/src/lib/components/Tilt.svelte
+++ b/packages/svelte-ux/src/lib/components/Tilt.svelte
@@ -39,6 +39,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   style:--rotateX="{rotateX}deg"
   style:--rotateY="{rotateY}deg"
diff --git a/packages/svelte-ux/src/lib/components/Timeline.svelte b/packages/svelte-ux/src/lib/components/Timeline.svelte
index 6a87f9618..2a8233765 100644
--- a/packages/svelte-ux/src/lib/components/Timeline.svelte
+++ b/packages/svelte-ux/src/lib/components/Timeline.svelte
@@ -27,8 +27,8 @@
   import Icon from './Icon.svelte';
 
   type TimelineEventData = {
-    start?: string | boolean;
-    end?: string | boolean;
+    start?: string | number | boolean;
+    end?: string | number | boolean;
     icon?: ComponentProps<Icon>['data'];
     completed?: boolean;
   };
diff --git a/packages/svelte-ux/src/lib/components/TimelineEvent.svelte b/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
index ff5330ef3..7f2bcfe60 100644
--- a/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
+++ b/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
@@ -7,10 +7,10 @@
   import { mdiCircle, mdiCircleMedium } from '@mdi/js';
 
   /** Value shown above (horizontal) or left (vertical).  If true, sets location of default slot */
-  export let start: string | boolean = false;
+  export let start: string | number | boolean = false;
 
   /** Value shown below (horizontal) or right (vertical).  If true, sets location of default slot */
-  export let end: string | boolean = false;
+  export let end: string | number | boolean = false;
 
   /** Icon to show on timeline */
   export let icon: ComponentProps<Icon>['data'] = undefined;
diff --git a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
index 18a6b6808..31c11c494 100644
--- a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
@@ -97,7 +97,7 @@
       ),
     },
     none: {},
-  } satisfies Record<typeof variant, typeof classes>;
+  } as Record<typeof variant, typeof classes>;
 
   // Toss classes into a store so it can be reactively read from context
   const classesStore = writable(classes);
@@ -171,8 +171,9 @@
   const options: HTMLElement[] = [];
   const optionsByValue: Map<any, HTMLElement> = new Map();
   const panels: HTMLElement[] = [];
-  const selectedOption = writable(undefined);
-  const selectedPanel = writable(undefined);
+  const selectedOption = writable<HTMLElement | undefined>(undefined);
+  const selectedPanel = writable<HTMLElement | undefined>(undefined);
+  // @ts-ignore - not sure why `fade` is not type compatible for `fallback`
   const [send, receive] = crossfade({ fallback: fade });
   const dispatch = createEventDispatcher();
 
diff --git a/packages/svelte-ux/src/lib/components/ToggleOption.svelte b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
index b011733bb..05bac0895 100644
--- a/packages/svelte-ux/src/lib/components/ToggleOption.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
@@ -24,10 +24,10 @@
     crossfade,
     classes: classesContext,
     autoscroll,
-  } = getContext(groupKey);
+  } = getContext<any>(groupKey);
   const [send, receive] = crossfade;
 
-  let optionElement: HTMLElement = null;
+  let optionElement: HTMLElement | null = null;
   $: selected = $selectedOption === optionElement;
 
   onMount(() => {
@@ -38,7 +38,7 @@
     unregisterOption(optionElement, value);
   });
 
-  $: if (autoscroll && selected) {
+  $: if (autoscroll && selected && optionElement) {
     // TODO: Only scroll if needed / out of view
     scrollIntoView(optionElement);
   }
diff --git a/packages/svelte-ux/src/lib/components/TogglePanel.svelte b/packages/svelte-ux/src/lib/components/TogglePanel.svelte
index a0052e76b..34524ac35 100644
--- a/packages/svelte-ux/src/lib/components/TogglePanel.svelte
+++ b/packages/svelte-ux/src/lib/components/TogglePanel.svelte
@@ -4,7 +4,7 @@
   import { groupKey } from './ToggleGroup.svelte';
 
   const panel = {};
-  const { registerPanel, unregisterPanel, selectedPanel } = getContext(groupKey);
+  const { registerPanel, unregisterPanel, selectedPanel } = getContext<any>(groupKey);
 
   registerPanel(panel);
 
diff --git a/packages/svelte-ux/src/lib/components/Tooltip.svelte b/packages/svelte-ux/src/lib/components/Tooltip.svelte
index 65575d29e..d69a885bd 100644
--- a/packages/svelte-ux/src/lib/components/Tooltip.svelte
+++ b/packages/svelte-ux/src/lib/components/Tooltip.svelte
@@ -105,6 +105,7 @@
 {/if}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls('contents', settingsClasses.content, classes.content)}
   on:mouseenter={showTooltip}
diff --git a/packages/svelte-ux/src/lib/components/TreeList.svelte b/packages/svelte-ux/src/lib/components/TreeList.svelte
index e466089cf..602748d2c 100644
--- a/packages/svelte-ux/src/lib/components/TreeList.svelte
+++ b/packages/svelte-ux/src/lib/components/TreeList.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
+  import type { TreeNode } from '../utils/array.js';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
-  type Node = { id: number; name: string; level: number; children: Node[] };
-
-  export let nodes: Node[];
+  export let nodes: TreeNode[];
 
   export let classes: {
-    ul?: string | ((nodes: Node[]) => string);
-    li?: string | ((node: Node) => string);
+    ul?: string | ((nodes: TreeNode[]) => string);
+    li?: string | ((node: TreeNode) => string);
   } = {};
   const settingsClasses = getComponentClasses('TreeList');
 </script>
diff --git a/packages/svelte-ux/src/lib/components/TweenedValue.svelte b/packages/svelte-ux/src/lib/components/TweenedValue.svelte
index 6adf46a2a..ba2ac7ac4 100644
--- a/packages/svelte-ux/src/lib/components/TweenedValue.svelte
+++ b/packages/svelte-ux/src/lib/components/TweenedValue.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { tweened } from 'svelte/motion';
-  import type { FormatType } from '../utils/format.js';
+  import type { FormatNumberStyle } from '../utils/format.js';
   import { getSettings } from './settings.js';
 
-  type T = $$Generic;
-  type TweenedOptions = Parameters<typeof tweened<T>>[1];
+  type TweenedOptions = Parameters<typeof tweened<number | null>>[1];
 
-  export let value: T | 0;
-  export let format: FormatType = 'none';
+  export let value: number | null;
+  export let format: FormatNumberStyle = 'none';
   export let options: TweenedOptions = undefined;
   export let disabled = false;
 
diff --git a/packages/svelte-ux/src/lib/components/YearList.svelte b/packages/svelte-ux/src/lib/components/YearList.svelte
index da06ab4aa..a77254736 100644
--- a/packages/svelte-ux/src/lib/components/YearList.svelte
+++ b/packages/svelte-ux/src/lib/components/YearList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import {
     addYears,
     subYears,
@@ -14,22 +15,24 @@
   import { getMinSelectedDate, getMaxSelectedDate, PeriodType } from '../utils/date.js';
   import type { DisabledDate, SelectedDate } from '../utils/date.js';
 
-  export let selected: SelectedDate | undefined = undefined;
+  export let selected: SelectedDate = undefined;
   export let minDate: Date | undefined = undefined;
   export let maxDate: Date | undefined = undefined;
-  export let format: string | undefined = undefined;
+  export let format: ComponentProps<DateButton>['format'] = undefined;
 
   /**
    * Dates to disable (not selectable)
    */
   export let disabledDates: DisabledDate | undefined = undefined;
 
+  let minYear: number;
   $: minYear =
     minYear ??
     (minDate
       ? minDate.getFullYear()
       : subYears(getMinSelectedDate(selected) || new Date(), 2).getFullYear());
 
+  let maxYear: number;
   $: maxYear =
     maxYear ??
     (maxDate
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
index ed76ba6fa..b16902dee 100644
--- a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
+++ b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -5,10 +5,8 @@
 
   const logger = new Logger('SelectListOptions');
 
-  export let optionText: (option: any) => string;
   export let optionValue: (option: any) => any;
   export let selectIndex: (index: number) => any;
-  export let selectOption: (x: any) => any;
   export let onKeyDown: (x: KeyboardEvent) => void;
   export let onKeyPress: (x: KeyboardEvent) => void;
 
@@ -16,10 +14,6 @@
   export let loading: boolean;
   export let filteredOptions: any[];
 
-  export let value: any = undefined;
-  export let selected: any = undefined;
-
-  export let highlightIndex: number;
   export let searchText: string;
 
   export let classes: {
diff --git a/packages/svelte-ux/src/lib/plugins/svelte.js b/packages/svelte-ux/src/lib/plugins/svelte.js
index 1bf6e09a0..bac691100 100644
--- a/packages/svelte-ux/src/lib/plugins/svelte.js
+++ b/packages/svelte-ux/src/lib/plugins/svelte.js
@@ -9,6 +9,11 @@ import 'prism-svelte';
  */
 export function codePreview() {
   return {
+    /**
+     * @param {Object} options
+     * @param {string} options.content
+     * @param {string} options.filename
+     */
     async markup({ content, filename }) {
       let code = content;
 
@@ -16,7 +21,7 @@ export function codePreview() {
       const previewMatches = content.match(/<Preview[\s\S]*?<\/Preview>/g) ?? [];
 
       for await (const previewMatch of previewMatches) {
-        const previewContent = previewMatch.match(/<Preview.*>([^]*)<\/Preview>/)[1];
+        const previewContent = previewMatch.match(/<Preview.*>([^]*)<\/Preview>/)?.[1] ?? '';
 
         const formattedCode = await format(previewContent, {
           parser: 'svelte',
diff --git a/packages/svelte-ux/src/lib/plugins/vite.js b/packages/svelte-ux/src/lib/plugins/vite.js
index dab558936..976ab7b3f 100644
--- a/packages/svelte-ux/src/lib/plugins/vite.js
+++ b/packages/svelte-ux/src/lib/plugins/vite.js
@@ -6,6 +6,10 @@ import qs from 'node:querystring';
 export function sveld() {
   return {
     name: 'vite-plugin-sveld',
+    /**
+     * @param {string} src
+     * @param {string} id
+     */
     async transform(src, id) {
       const query = qs.parse(id.split('?')[1]);
 
diff --git a/packages/svelte-ux/src/lib/stores/debounceStore.ts b/packages/svelte-ux/src/lib/stores/debounceStore.ts
index 6853b1bb5..94d73fcc9 100644
--- a/packages/svelte-ux/src/lib/stores/debounceStore.ts
+++ b/packages/svelte-ux/src/lib/stores/debounceStore.ts
@@ -1,5 +1,4 @@
-import { derived, get } from 'svelte/store';
-import type { Stores } from '../types/typeHelpers.js';
+import { derived, get, type Stores } from 'svelte/store';
 
 function debounceStore<T extends Stores>(original: T, timeout = 300) {
   return derived(
@@ -11,6 +10,7 @@ function debounceStore<T extends Stores>(original: T, timeout = 300) {
         clearTimeout(timer);
       };
     },
+    // @ts-ignore
     get(original)
   );
 }
diff --git a/packages/svelte-ux/src/lib/stores/fetchStore.ts b/packages/svelte-ux/src/lib/stores/fetchStore.ts
index c4bb37644..295986b2a 100644
--- a/packages/svelte-ux/src/lib/stores/fetchStore.ts
+++ b/packages/svelte-ux/src/lib/stores/fetchStore.ts
@@ -36,7 +36,7 @@ export type FetchState = {
   loading: boolean | undefined;
   data: any;
   error: any;
-  request: { url: string; options: RequestInit };
+  request: { url: string; options: RequestInit } | undefined;
   response: any;
 };
 
@@ -47,7 +47,7 @@ export const defaultOptions: RequestInit = {
 };
 
 const DEFAULT_STATE = {
-  loading: null,
+  loading: undefined,
   data: undefined,
   error: undefined,
   request: undefined,
@@ -68,7 +68,7 @@ export default function fetchStore() {
   // Track first data load for `once`
   let loaded = false;
 
-  const promises = [];
+  const promises: Promise<any>[] = [];
 
   const fetchConfigStore = writable<{ url: string; config?: FetchConfig }>({
     url: '',
@@ -173,7 +173,7 @@ export default function fetchStore() {
   function doUpdate(
     currentState: FetchState,
     nextState: Partial<FetchState>,
-    currentPromise: Promise<any>,
+    currentPromise: Promise<any> | null,
     config?: FetchConfig
   ) {
     if (currentPromise) {
@@ -256,7 +256,7 @@ export default function fetchStore() {
   };
 }
 
-function addError(store: Writable<any[]>, error: any) {
+function addError(store: Writable<any[]> | undefined, error: any) {
   if (store) {
     store.update((current) => {
       const result = [...current];
diff --git a/packages/svelte-ux/src/lib/stores/graphStore.ts b/packages/svelte-ux/src/lib/stores/graphStore.ts
index 7fc40f898..859b9930a 100644
--- a/packages/svelte-ux/src/lib/stores/graphStore.ts
+++ b/packages/svelte-ux/src/lib/stores/graphStore.ts
@@ -20,7 +20,7 @@ const CONTEXT_KEY = Symbol();
 
 export function initGraphClient(config: ClientConfig) {
   setContext(CONTEXT_KEY, config);
-  initFetchClient(config.config);
+  initFetchClient(config.config ?? {});
 }
 
 export type QueryConfig = {
diff --git a/packages/svelte-ux/src/lib/stores/localStore.ts b/packages/svelte-ux/src/lib/stores/localStore.ts
index b90e525dc..4dbb59d2d 100644
--- a/packages/svelte-ux/src/lib/stores/localStore.ts
+++ b/packages/svelte-ux/src/lib/stores/localStore.ts
@@ -23,6 +23,7 @@ function localStore<Value>(key: string, initialValue: Value, options?: LocalStor
       const decodedValue = parse(storedValue);
       if (options?.expiry) {
         // TODO: If object returned, merge with initialValue (sub-properties)?
+        // @ts-ignore
         value = expireObject<Value>(decodedValue.value, decodedValue.expiry) ?? initialValue;
         previousExpiry = decodedValue.expiry;
       } else {
@@ -42,7 +43,8 @@ function localStore<Value>(key: string, initialValue: Value, options?: LocalStor
           : previousExpiry;
 
         const expiry = isFunction(options?.expiry)
-          ? options?.expiry(prunedPreviousExpiry) // Update expiry on write
+          ? // @ts-ignore
+            options?.expiry(prunedPreviousExpiry) // Update expiry on write
           : options?.expiry;
         previousExpiry = expiry;
 
diff --git a/packages/svelte-ux/src/lib/types/index.ts b/packages/svelte-ux/src/lib/types/index.ts
index c217bd156..e4bc3b356 100644
--- a/packages/svelte-ux/src/lib/types/index.ts
+++ b/packages/svelte-ux/src/lib/types/index.ts
@@ -4,9 +4,9 @@ export * from './table.js';
 export * from './typeHelpers.js';
 export * from './typeGuards.js';
 
-export type MenuOption = {
+export type MenuOption<T = any> = {
   label: string;
-  value: any;
+  value: T;
   icon?: string;
   group?: string;
 };
diff --git a/packages/svelte-ux/src/lib/types/table.ts b/packages/svelte-ux/src/lib/types/table.ts
index 226403d12..edbe6336d 100644
--- a/packages/svelte-ux/src/lib/types/table.ts
+++ b/packages/svelte-ux/src/lib/types/table.ts
@@ -18,7 +18,7 @@ export type ColumnDef<TData = any> = {
   name: string;
   header?: string;
   value?: string | ((rowData: TData, rowIndex?: number) => any);
-  format?: FormatType | ((value: any, rowData: any, rowIndex: number) => string);
+  format?: FormatType | ((value: any, rowData: TData, rowIndex: number) => string);
   /** Render as HTML.  Only enable if value from trusted source (else exposing to XSS vulnerability) */
   html?: boolean;
   orderBy?: string | boolean | ((a: any, b: any) => number);
diff --git a/packages/svelte-ux/src/lib/types/typeHelpers.ts b/packages/svelte-ux/src/lib/types/typeHelpers.ts
index ff7957966..f3dc3dd5a 100644
--- a/packages/svelte-ux/src/lib/types/typeHelpers.ts
+++ b/packages/svelte-ux/src/lib/types/typeHelpers.ts
@@ -43,6 +43,7 @@ export type ObjectKey = string | number | symbol;
 // Get entries (array of [key, value] arrays) of object (strongly-typed)
 export function entries<K extends ObjectKey, V>(o: Record<K, V>): [K, V][];
 export function entries<K, V>(o: Map<K, V>): [K, V][];
+// @ts-ignore
 export function entries<K extends ObjectKey | unknown, V>(o: Record<K, V> | Map<K, V>): [K, V][] {
   if (o instanceof Map) return Array.from(o.entries()) as unknown as [K, V][];
   return Object.entries(o) as unknown as [K, V][]; // TODO: Improve based on key/value pair - https://stackoverflow.com/questions/60141960/typescript-key-value-relation-preserving-object-entries-type
diff --git a/packages/svelte-ux/src/lib/utils/array.ts b/packages/svelte-ux/src/lib/utils/array.ts
index ce604e742..d64c15a24 100644
--- a/packages/svelte-ux/src/lib/utils/array.ts
+++ b/packages/svelte-ux/src/lib/utils/array.ts
@@ -188,10 +188,12 @@ export function nestedFindByPredicate(
   return undefined;
 }
 
+export type TreeNode = { id: string; name: string; level: number; children: Node[] };
+
 /**
  * Given a flat array of objects with a `level` property, build a nested object with `children`
  */
-export function buildTree<T extends { level: number }>(arr: T[]) {
+export function buildTree<T extends Omit<TreeNode, 'children'>>(arr: T[]): TreeNode[] {
   var levels = [{}] as Array<T & { children?: any[] }>;
   arr.forEach((o) => {
     levels.length = o.level;
@@ -199,7 +201,7 @@ export function buildTree<T extends { level: number }>(arr: T[]) {
     levels[o.level - 1].children?.push(o);
     levels[o.level] = o;
   });
-  return levels[0].children;
+  return levels[0].children ?? [];
 }
 
 /**
diff --git a/packages/svelte-ux/src/lib/utils/date_types.ts b/packages/svelte-ux/src/lib/utils/date_types.ts
index 02a3a10f6..f10cfce06 100644
--- a/packages/svelte-ux/src/lib/utils/date_types.ts
+++ b/packages/svelte-ux/src/lib/utils/date_types.ts
@@ -1,6 +1,6 @@
 import type { DateRange } from './dateRange.js';
 
-export type SelectedDate = Date | Date[] | DateRange | null;
+export type SelectedDate = Date | Date[] | DateRange | null | undefined;
 
 export type DisabledDate = ((date: Date) => boolean) | Date | Date[] | { from: Date; to: Date };
 
diff --git a/packages/svelte-ux/src/lib/utils/icons.ts b/packages/svelte-ux/src/lib/utils/icons.ts
index c62b4cf7c..a6aa1e899 100644
--- a/packages/svelte-ux/src/lib/utils/icons.ts
+++ b/packages/svelte-ux/src/lib/utils/icons.ts
@@ -9,7 +9,7 @@ export function asIconData(v: IconInput): IconData {
   return isIconComponentProps(v) ? v.data : v;
 }
 
-function isIconComponentProps(v: any): v is ComponentProps<Icon> {
+function isIconComponentProps(v: IconInput): v is ComponentProps<Icon> {
   // `iconName` is a required property of `IconDefinition`, the only other object that `IconInput` supports.
   // If it is undefined, then only ComponentProps<Icon> is viable.
   return isLiteralObject(v) && typeof v['iconName'] === 'undefined';
diff --git a/packages/svelte-ux/src/lib/utils/index.ts b/packages/svelte-ux/src/lib/utils/index.ts
index 97fff6a5f..ae8398741 100644
--- a/packages/svelte-ux/src/lib/utils/index.ts
+++ b/packages/svelte-ux/src/lib/utils/index.ts
@@ -11,6 +11,7 @@ export {
   type FormatFunction,
   type FormatFunctionProperties,
   type FormatFunctions,
+  type FormatNumberStyle,
 } from './format.js';
 export * from './json.js';
 export * from './logger.js';
diff --git a/packages/svelte-ux/src/lib/utils/object.ts b/packages/svelte-ux/src/lib/utils/object.ts
index 101408b7b..1dc6c0b65 100644
--- a/packages/svelte-ux/src/lib/utils/object.ts
+++ b/packages/svelte-ux/src/lib/utils/object.ts
@@ -89,13 +89,10 @@ export type Expiry = Date | { [prop: string]: Date | { [prop: string]: Date } };
 /**
  * Remove properties from object based on expiration
  */
-export function expireObject<TObject extends object>(
-  object: TObject,
-  expiry: Expiry
-): Partial<TObject> | null {
+export function expireObject<TObject>(object: TObject, expiry: Expiry): Partial<TObject> | null {
   const now = new Date();
 
-  if (expiry instanceof Date) {
+  if (expiry instanceof Date || typeof object !== 'object' || object == null) {
     // Expired
     if (expiry < now) {
       return null;
diff --git a/packages/svelte-ux/src/lib/utils/styles.ts b/packages/svelte-ux/src/lib/utils/styles.ts
index dfe976e42..10c20ea61 100644
--- a/packages/svelte-ux/src/lib/utils/styles.ts
+++ b/packages/svelte-ux/src/lib/utils/styles.ts
@@ -11,6 +11,7 @@ export function objectToString(styleObj: { [key: string]: string }) {
     .map(([key, value]) => {
       if (value) {
         // Convert camelCase into kaboob-case (ex.  (transformOrigin => transform-origin))
+        // @ts-ignore
         const propertyName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
         return `${propertyName}: ${value};`;
       } else {
diff --git a/packages/svelte-ux/src/routes/+error.svelte b/packages/svelte-ux/src/routes/+error.svelte
index a22af0888..88be5d114 100644
--- a/packages/svelte-ux/src/routes/+error.svelte
+++ b/packages/svelte-ux/src/routes/+error.svelte
@@ -11,28 +11,10 @@
     {#if $page.error}
       <div>
         <h2 class="text-lg font-bold mb-1">Message:</h2>
-        <pre class="ml-2 p-4 border rounded-md text-xs bg-surface-content/80 text-surface-100">
-        {$page.error.message}
-      </pre>
+        <pre
+          class="ml-2 p-4 border border-danger-300 rounded-md text-xs bg-danger-50 text-danger-content">{$page
+            .error.message}</pre>
       </div>
-
-      {#if $page.error.frame}
-        <div>
-          <h2 class="text-lg font-bold mb-1">Frame:</h2>
-          <pre class="ml-2 p-4 border rounded-md text-xs bg-surface-content/80 text-surface-100">
-          {$page.error.frame}
-        </pre>
-        </div>
-      {/if}
-
-      {#if $page.error.stack}
-        <div>
-          <h2 class="text-lg font-bold mb-1">Stack:</h2>
-          <pre class="ml-2 p-4 border rounded-md text-xs bg-surface-content/80 text-surface-100">
-          {$page.error.stack}
-        </pre>
-        </div>
-      {/if}
     {/if}
   </div>
 </div>
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
index 59bad5feb..32fd39d7d 100644
--- a/packages/svelte-ux/src/routes/+layout.svelte
+++ b/packages/svelte-ux/src/routes/+layout.svelte
@@ -169,16 +169,19 @@
       const unsubscribePage = page.subscribe(($page) => {
         if (currentPath && currentPath !== $page.url.pathname) {
           // Page navigated away
+          // @ts-ignore - .capture() exists
           posthog.capture('$pageleave');
         }
 
         // Page entered
         currentPath = $page.url.pathname;
+        // @ts-ignore - .capture() exists
         posthog.capture('$pageview');
       });
 
       const handleBeforeUnload = () => {
         // Hard reloads or browser exit
+        // @ts-ignore - .capture() exists
         posthog.capture('$pageleave');
       };
       window.addEventListener('beforeunload', handleBeforeUnload);
diff --git a/packages/svelte-ux/src/routes/+layout.ts b/packages/svelte-ux/src/routes/+layout.ts
index bf67ffeae..7551b4d84 100644
--- a/packages/svelte-ux/src/routes/+layout.ts
+++ b/packages/svelte-ux/src/routes/+layout.ts
@@ -8,6 +8,7 @@ export const ssr = false;
 export const load = async ({ data }) => {
   // Setup Posthog
   if (browser && !dev) {
+    // @ts-ignore: `posthog.init()` is valid - https://posthog.com/docs/product-analytics/installation
     posthog.init('phc_F78mUWQpKPpsXS1mamJFzDWM8bivZrwIx4Nm1cI8BSb', {
       api_host: 'https://app.posthog.com',
       capture_pageview: false,
diff --git a/packages/svelte-ux/src/routes/+page.svelte b/packages/svelte-ux/src/routes/+page.svelte
index 68b353876..499910824 100644
--- a/packages/svelte-ux/src/routes/+page.svelte
+++ b/packages/svelte-ux/src/routes/+page.svelte
@@ -157,7 +157,8 @@ module.exports = {
   </p>
 
   <Code
-    source={`<script>
+    source={'<' +
+      `script>
   import { Button } from 'svelte-ux';
 </script>
 
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
index 9eb29850b..f1773c36c 100644
--- a/packages/svelte-ux/src/routes/docs/+layout.svelte
+++ b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -215,7 +215,7 @@
                             ? mdiGithub
                             : mdiLink}
                   <ListItem
-                    title={item.name}
+                    title={item.name.toString()}
                     {icon}
                     avatar={{ size: 'sm', class: 'text-xs text-white bg-primary' }}
                     on:click={() => {
diff --git a/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte
index a4d50cb93..2b13277b6 100644
--- a/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte
@@ -44,6 +44,7 @@
     use:debounceEvent={{
       type: 'input',
       listener: (e) => {
+        // @ts-ignore
         console.log(e.target.value);
       },
       timeout: 1000,
diff --git a/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte
index 77cf09c49..fb9073acc 100644
--- a/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/actions/observer/+page.svelte
@@ -20,6 +20,7 @@
     use:resize
     on:resize={(e) => {
       console.log(e.detail);
+      // @ts-ignore
       e.target.innerText = JSON.stringify(e.detail.contentRect, null, 2);
     }}
     class="resize overflow-auto whitespace-pre outline rounded"
@@ -32,6 +33,7 @@
   <div
     use:resize
     on:resize={(e) => {
+      // @ts-ignore
       e.target.innerText = JSON.stringify(e.target.getBoundingClientRect(), null, 2);
     }}
     class="resize overflow-auto whitespace-pre outline rounded"
@@ -44,6 +46,7 @@
   <div
     use:resize
     on:resize={(e) => {
+      // @ts-ignore
       e.target.style.setProperty('--color', e.detail.contentRect.width % 255);
     }}
     style:background-color="hsl(var(--color), 100%, 70%)"
@@ -66,8 +69,10 @@
       use:intersection={{ threshold: 1 }}
       on:intersecting={(e) => {
         if (e.detail.isIntersecting) {
+          // @ts-ignore
           e.target.classList.add('bg-danger');
         } else {
+          // @ts-ignore
           e.target.classList.remove('bg-danger');
         }
       }}
diff --git a/packages/svelte-ux/src/routes/docs/components/BarStack/+page.svelte b/packages/svelte-ux/src/routes/docs/components/BarStack/+page.svelte
index 89d23b599..18218fc01 100644
--- a/packages/svelte-ux/src/routes/docs/components/BarStack/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/BarStack/+page.svelte
@@ -122,13 +122,13 @@
       <div class="flex items-center gap-1 truncate py-1 px-2">
         <span class="text-sm font-semibold text-gray-900">
           <TweenedValue value={item.value / total} let:value options={{ duration }}>
-            {format(value, 'percent')}
+            {format(value ?? 0, 'percent')}
           </TweenedValue>
         </span>
 
         <span class="truncate text-xs text-gray-900">
           <TweenedValue value={item.value} let:value options={{ duration }}>
-            ({format(value, 'integer')})
+            ({format(value ?? 0, 'integer')})
           </TweenedValue>
         </span>
       </div>
diff --git a/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte
index 726ac610d..634f615f5 100644
--- a/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Collapse/+page.svelte
@@ -5,7 +5,7 @@
   import { Button, Card, Collapse } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
-  let group = undefined;
+  let group: any = undefined;
 
   let controlledOpen = [false, true, false, false, false];
 </script>
diff --git a/packages/svelte-ux/src/routes/docs/components/Month/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Month/+page.svelte
index f6200d20b..016358cd9 100644
--- a/packages/svelte-ux/src/routes/docs/components/Month/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Month/+page.svelte
@@ -22,8 +22,6 @@
 
 <h1>Examples</h1>
 
-<!-- TODO: Add playground -->
-
 <h2>Default</h2>
 
 <Preview>
@@ -118,11 +116,11 @@
     on:dateChange={(e) => {
       const date = e.detail;
       const newSelectedRange = { ...selectedRange };
-      if (selectedRange.from === undefined) {
+      if (selectedRange.from === null) {
         newSelectedRange.from = date;
       } else if (isSameDay(date, selectedRange.from)) {
-        newSelectedRange.from = undefined;
-      } else if (selectedRange.to === undefined) {
+        newSelectedRange.from = null;
+      } else if (selectedRange.to === null) {
         if (isAfter(date, selectedRange.from)) {
           newSelectedRange.to = date;
         } else {
@@ -130,10 +128,10 @@
           newSelectedRange.from = date;
         }
       } else if (isSameDay(date, selectedRange.to)) {
-        newSelectedRange.to = undefined;
+        newSelectedRange.to = null;
       } else {
         newSelectedRange.from = date;
-        newSelectedRange.to = undefined;
+        newSelectedRange.to = null;
       }
       selectedRange = newSelectedRange;
     }}
@@ -162,11 +160,11 @@
         on:dateChange={(e) => {
           const date = e.detail;
           const newSelectedRange = { ...selectedMultiMonth };
-          if (selectedMultiMonth.from === undefined) {
+          if (selectedMultiMonth.from === null) {
             newSelectedRange.from = date;
           } else if (isSameDay(date, selectedMultiMonth.from)) {
-            newSelectedRange.from = undefined;
-          } else if (selectedMultiMonth.to === undefined) {
+            newSelectedRange.from = null;
+          } else if (selectedMultiMonth.to === null) {
             if (isAfter(date, selectedMultiMonth.from)) {
               newSelectedRange.to = date;
             } else {
@@ -174,10 +172,10 @@
               newSelectedRange.from = date;
             }
           } else if (isSameDay(date, selectedMultiMonth.to)) {
-            newSelectedRange.to = undefined;
+            newSelectedRange.to = null;
           } else {
             newSelectedRange.from = date;
-            newSelectedRange.to = undefined;
+            newSelectedRange.to = null;
           }
           selectedMultiMonth = newSelectedRange;
         }}
@@ -190,11 +188,11 @@
         on:dateChange={(e) => {
           const date = e.detail;
           const newSelectedRange = { ...selectedMultiMonth };
-          if (selectedMultiMonth.from === undefined) {
+          if (selectedMultiMonth.from === null) {
             newSelectedRange.from = date;
           } else if (isSameDay(date, selectedMultiMonth.from)) {
-            newSelectedRange.from = undefined;
-          } else if (selectedMultiMonth.to === undefined) {
+            newSelectedRange.from = null;
+          } else if (selectedMultiMonth.to === null) {
             if (isAfter(date, selectedMultiMonth.from)) {
               newSelectedRange.to = date;
             } else {
@@ -202,10 +200,10 @@
               newSelectedRange.from = date;
             }
           } else if (isSameDay(date, selectedMultiMonth.to)) {
-            newSelectedRange.to = undefined;
+            newSelectedRange.to = null;
           } else {
             newSelectedRange.from = date;
-            newSelectedRange.to = undefined;
+            newSelectedRange.to = null;
           }
           selectedMultiMonth = newSelectedRange;
         }}
diff --git a/packages/svelte-ux/src/routes/docs/components/MonthList/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MonthList/+page.svelte
index 1a0fccbfc..79d19497c 100644
--- a/packages/svelte-ux/src/routes/docs/components/MonthList/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MonthList/+page.svelte
@@ -8,11 +8,11 @@
     endOfQuarter,
   } from 'date-fns';
 
-  import { MonthList } from 'svelte-ux';
+  import { MonthList, type SelectedDate } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
-  let selected = null;
-  let selectedArr = [];
+  let selected: SelectedDate = null;
+  let selectedArr: Date[] = [];
   let selectedRange = { from: null, to: null };
   let selectedQuarter = { from: null, to: null };
 </script>
@@ -158,11 +158,11 @@
     on:dateChange={(e) => {
       const date = e.detail;
       const newSelectedRange = { ...selectedRange };
-      if (selectedRange.from === undefined) {
+      if (selectedRange.from === null) {
         newSelectedRange.from = date;
       } else if (isSameMonth(date, selectedRange.from)) {
-        newSelectedRange.from = undefined;
-      } else if (selectedRange.to === undefined) {
+        newSelectedRange.from = null;
+      } else if (selectedRange.to === null) {
         if (isAfter(date, selectedRange.from)) {
           newSelectedRange.to = date;
         } else {
@@ -170,10 +170,10 @@
           newSelectedRange.from = date;
         }
       } else if (isSameMonth(date, selectedRange.to)) {
-        newSelectedRange.to = undefined;
+        newSelectedRange.to = null;
       } else {
         newSelectedRange.from = date;
-        newSelectedRange.to = undefined;
+        newSelectedRange.to = null;
       }
       selectedRange = newSelectedRange;
     }}
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
index 546f2c62f..af5573732 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
@@ -30,7 +30,10 @@
       <MultiSelectMenu
         {options}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
       />
@@ -47,7 +50,10 @@
       <MultiSelectMenu
         {options}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         inlineSearch
@@ -66,7 +72,10 @@
       <MultiSelectMenu
         options={manyOptions}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         classes={{ menu: 'max-h-[360px] w-[360px]' }}
@@ -84,7 +93,10 @@
       <MultiSelectMenu
         options={manyOptions}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         classes={{ menu: 'max-h-[360px] w-[360px]' }}
@@ -103,7 +115,10 @@
       <MultiSelectMenu
         options={manyOptions}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         classes={{ menu: 'max-h-[360px] w-[360px]' }}
@@ -123,7 +138,10 @@
       <MultiSelectMenu
         {options}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         classes={{ menu: 'w-[360px]' }}
@@ -146,7 +164,10 @@
       <MultiSelectMenu
         {options}
         {value}
-        on:change={(e) => (value = e.detail.value)}
+        on:change={(e) => {
+          // @ts-ignore
+          value = e.detail.value;
+        }}
         {open}
         on:close={toggleOff}
         classes={{ menu: 'w-[360px]' }}
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index ecba98bb8..f20ee42ac 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -248,7 +248,7 @@
             <div>{option.label}</div>
             <div class="text-sm text-surface-content/50">{option.value}</div>
           </div>
-          <div on:click|stopPropagation>
+          <div on:click|stopPropagation role="none">
             <Toggle let:on={open} let:toggle let:toggleOff>
               <Button
                 icon={mdiPencil}
@@ -276,7 +276,7 @@
 <Preview>
   <Toggle let:on={open} let:toggle>
     <SelectField {options}>
-      <div slot="prepend" on:click|stopPropagation class="flex items-center">
+      <div slot="prepend" on:click|stopPropagation class="flex items-center" role="none">
         <select
           class="appearance-none bg-surface-content/5 border rounded-full mr-2 px-4"
           style="text-align-last: center;"
@@ -299,7 +299,7 @@
 <Preview>
   <Toggle let:on={open} let:toggle let:toggleOff>
     <SelectField {options}>
-      <span slot="append" on:click|stopPropagation>
+      <span slot="append" on:click|stopPropagation role="none">
         <Button icon={mdiPlus} class="text-surface-content/50 p-2" on:click={toggle} />
       </span>
     </SelectField>
@@ -344,7 +344,7 @@
 
 <Preview>
   <SelectField {options} bind:value>
-    <div slot="actions" class="p-2 border-t" on:click|stopPropagation let:hide>
+    <div slot="actions" class="p-2 border-t" on:click|stopPropagation let:hide role="none">
       <Toggle let:on={open} let:toggle>
         <Button icon={mdiPlus} color="primary" on:click={toggle}>New item</Button>
         <Form
@@ -415,7 +415,7 @@
 
 <Preview>
   <SelectField {options} icon={mdiMagnify} rounded>
-    <span slot="prepend" on:click|stopPropagation>
+    <span slot="prepend" on:click|stopPropagation role="none">
       <select
         class="appearance-none bg-surface-content/5 border rounded-full mr-2 px-4"
         style="text-align-last: center;"
@@ -480,6 +480,7 @@
   <form
     on:submit={(e) => {
       e.preventDefault();
+      // @ts-ignore
       const formData = new FormData(e.target);
       alert(formData.get('test'));
     }}
diff --git a/packages/svelte-ux/src/routes/docs/components/Shine/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Shine/+page.svelte
index 1885ad659..d97bc0078 100644
--- a/packages/svelte-ux/src/routes/docs/components/Shine/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Shine/+page.svelte
@@ -66,9 +66,9 @@
 <Preview>
   <Shine>
     <div class="flex items-center justify-center content-center gap-6">
-      {#each images as image}
+      {#each images as image, i}
         <Tilt class="hover:scale-110 transition duration-500">
-          <img src={image} width="180px" class="transition ease-out" />
+          <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
         </Tilt>
       {/each}
     </div>
diff --git a/packages/svelte-ux/src/routes/docs/components/Switch/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Switch/+page.svelte
index a8aef0c24..ff3ec919f 100644
--- a/packages/svelte-ux/src/routes/docs/components/Switch/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Switch/+page.svelte
@@ -21,6 +21,7 @@
 <h2>Label</h2>
 
 <Preview>
+  <!-- svelte-ignore a11y-label-has-associated-control -->
   <div class="grid gap-2">
     <label class="flex gap-2 items-center text-sm">
       Click me
diff --git a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
index 04af02277..7d29ab398 100644
--- a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
@@ -12,6 +12,8 @@
     TweenedValue,
     tableOrderStore,
     tableCell,
+    type ColumnDef,
+    type FormatNumberStyle,
   } from 'svelte-ux';
 
   import Preview from '$lib/components/Preview.svelte';
@@ -47,6 +49,11 @@
     });
   }
   let randomData = randomDataGen();
+
+  // Workaround to make Typescript happy
+  function columnFormatAsNumberFormat(format: ColumnDef['format']) {
+    return format as FormatNumberStyle;
+  }
 </script>
 
 <h1>Examples</h1>
@@ -289,6 +296,7 @@
       {
         name: 'name',
         align: 'left',
+        // @ts-ignore
         format: (value) => {
           // TODO: Docs currently do not support backticks (template literals)
           return (
@@ -405,8 +413,10 @@
               {:else}
                 <TweenedValue
                   {value}
-                  format={column.format}
-                  options={column.dataBackground?.tweened}
+                  format={columnFormatAsNumberFormat(column.format)}
+                  options={typeof column.dataBackground === 'object'
+                    ? column.dataBackground.tweened
+                    : undefined}
                 />
               {/if}
             </td>{/each}
diff --git a/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
index 3449ab140..46882b16c 100644
--- a/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/TextField/+page.svelte
@@ -215,6 +215,7 @@
       debounceEvent(node, {
         type: 'input',
         listener: (e) => {
+          // @ts-ignore
           console.log(e.target.value);
         },
         timeout: 500,
@@ -411,7 +412,14 @@
 <h2>Multiline with autoHeight</h2>
 
 <Preview>
-  <TextField label="Comment" multiline actions={(node) => [autoHeight(node)]} />
+  <TextField
+    label="Comment"
+    multiline
+    actions={(node) => {
+      // @ts-ignore
+      return [autoHeight(node)];
+    }}
+  />
 </Preview>
 
 <SectionDivider>Mask & Accept</SectionDivider>
diff --git a/packages/svelte-ux/src/routes/docs/components/Tilt/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Tilt/+page.svelte
index aeefbd121..869e223b8 100644
--- a/packages/svelte-ux/src/routes/docs/components/Tilt/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/Tilt/+page.svelte
@@ -19,9 +19,9 @@
 
 <Preview>
   <div class="flex items-center justify-center content-center gap-6">
-    {#each images as image}
+    {#each images as image, i}
       <Tilt class="hover:scale-110 transition duration-500">
-        <img src={image} width="180px" class="transition ease-out" />
+        <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
       </Tilt>
     {/each}
   </div>
@@ -31,9 +31,9 @@
 
 <Preview>
   <div class="flex items-center justify-center content-center gap-6">
-    {#each images as image}
+    {#each images as image, i}
       <Tilt class="hover:scale-110 transition duration-500" setBrightness>
-        <img src={image} width="180px" class="transition ease-out" />
+        <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
       </Tilt>
     {/each}
   </div>
@@ -44,9 +44,9 @@
 <Preview>
   <Shine>
     <div class="flex items-center justify-center content-center gap-6">
-      {#each images as image}
+      {#each images as image, i}
         <Tilt class="hover:scale-110 transition duration-500">
-          <img src={image} width="180px" class="transition ease-out" />
+          <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
         </Tilt>
       {/each}
     </div>
@@ -57,9 +57,9 @@
 
 <Preview>
   <div class="flex items-center justify-center content-center gap-6">
-    {#each images as image}
+    {#each images as image, i}
       <Tilt class="hover:scale-110 transition duration-500 [perspective:300px]">
-        <img src={image} width="180px" class="transition ease-out" />
+        <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
       </Tilt>
     {/each}
   </div>
@@ -69,9 +69,9 @@
 
 <Preview>
   <div class="flex items-center justify-center content-center gap-6">
-    {#each images as image}
+    {#each images as image, i}
       <Tilt class="hover:scale-110 transition duration-500" maxRotation={40}>
-        <img src={image} width="180px" class="transition ease-out" />
+        <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
       </Tilt>
     {/each}
   </div>
@@ -81,9 +81,9 @@
 
 <Preview>
   <div class="flex flex-wrap items-center justify-center content-center gap-6">
-    {#each images as image}
+    {#each images as image, i}
       <Tilt class="hover:scale-110 transition duration-500">
-        <img src={image} width="180px" class="transition ease-out" />
+        <img src={image} width="180px" class="transition ease-out" alt="example {i}" />
       </Tilt>
     {/each}
   </div>
diff --git a/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte b/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte
index d4ddf5561..72f6b412e 100644
--- a/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/utils/format/+page.svelte
@@ -4,7 +4,7 @@
     DatePickerField,
     MenuField,
     DateToken,
-    FormatNumberStyle,
+    type FormatNumberStyle,
     PeriodType,
     settings,
   } from 'svelte-ux';
@@ -16,7 +16,7 @@
 
   let value = 1234.56;
   let style: FormatNumberStyle = 'decimal';
-  let currency: Intl.NumberFormatOptions['currency'] | null = 'USD';
+  let currency: Intl.NumberFormatOptions['currency'] | undefined = 'USD';
   let notation: Intl.NumberFormatOptions['notation'] = 'standard';
 
   let myDate = new Date('1982-03-30T07:11:00');
@@ -55,7 +55,7 @@
   <MenuField
     label="currency"
     bind:value={currency}
-    options={[null, 'USD', 'EUR', 'GBP', 'JPY', 'CNY', 'MXN'].map((value) => ({
+    options={[undefined, 'USD', 'EUR', 'GBP', 'JPY', 'CNY', 'MXN'].map((value) => ({
       label: value ?? 'None',
       value,
     }))}
diff --git a/packages/svelte-ux/src/routes/theme/+page.svelte b/packages/svelte-ux/src/routes/theme/+page.svelte
index 8409e61a7..445844c8d 100644
--- a/packages/svelte-ux/src/routes/theme/+page.svelte
+++ b/packages/svelte-ux/src/routes/theme/+page.svelte
@@ -121,8 +121,8 @@
   }
 
   $: showDarkTheme = $currentTheme.dark;
-  $: selectedLightTheme = lightThemes.find((d) => d.value === selectedLightThemeValue)?.theme;
-  $: selectedDarkTheme = darkThemes.find((d) => d.value === selectedDarkThemeValue)?.theme;
+  $: selectedLightTheme = lightThemes.find((d) => d.value === selectedLightThemeValue)!.theme;
+  $: selectedDarkTheme = darkThemes.find((d) => d.value === selectedDarkThemeValue)!.theme;
   $: previewTheme = (showDarkTheme ? selectedDarkTheme : selectedLightTheme) as NestedColors;
 
   // Update site dark/light mode with preview for better experience (previewing and applying)
@@ -209,7 +209,7 @@
     {
       light: { 'color-scheme': 'light' },
       dark: { 'color-scheme': 'dark' },
-    }
+    } as Record<'light' | 'dark', Record<string, string | undefined>>
   );
 </script>
 
@@ -365,7 +365,10 @@
 
       <Switch
         checked={showDarkTheme}
-        on:change={(e) => (showDarkTheme = e.target.checked)}
+        on:change={(e) => {
+          // @ts-ignore
+          showDarkTheme = e.target?.checked;
+        }}
         let:checked
       >
         {#if checked}
diff --git a/packages/svelte-ux/src/routes/theme/ColorField.svelte b/packages/svelte-ux/src/routes/theme/ColorField.svelte
index d9410e1e8..810e87614 100644
--- a/packages/svelte-ux/src/routes/theme/ColorField.svelte
+++ b/packages/svelte-ux/src/routes/theme/ColorField.svelte
@@ -19,6 +19,7 @@
 <TextField
   value={formatColor(value, colorSpace)}
   on:change={(e) => {
+    // @ts-ignore
     value = formatColor(e.detail.inputValue, colorSpace);
     dispatch('change', { value });
   }}
@@ -30,6 +31,7 @@
       type="color"
       value={formatHex(value)}
       on:input={(e) => {
+        // @ts-ignore
         value = formatColor(e.target.value, colorSpace);
         dispatch('change', { value });
       }}
diff --git a/packages/svelte-ux/src/vite-plugin-sveld.d.ts b/packages/svelte-ux/src/vite-plugin-sveld.d.ts
index 64c441a44..7cfeace4d 100644
--- a/packages/svelte-ux/src/vite-plugin-sveld.d.ts
+++ b/packages/svelte-ux/src/vite-plugin-sveld.d.ts
@@ -16,60 +16,59 @@ declare module 'vite-plugin-sveld' {
 declare module '*.svelte?raw&sveld' {
   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;