From 672031f7c6d4289b28271b37d6d3093cee4a3311 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 24 Jun 2025 11:34:54 -0400
Subject: [PATCH 1/3] Remove use of `$$props` (class, style)

---
 .../svelte-ux/src/lib/components/AppLayout.svelte     |  5 ++++-
 packages/svelte-ux/src/lib/components/BarStack.svelte |  5 ++++-
 packages/svelte-ux/src/lib/components/Button.svelte   |  6 ++++--
 packages/svelte-ux/src/lib/components/Checkbox.svelte |  5 ++++-
 packages/svelte-ux/src/lib/components/Code.svelte     |  5 ++++-
 packages/svelte-ux/src/lib/components/Collapse.svelte |  5 ++++-
 .../svelte-ux/src/lib/components/DateField.svelte     |  5 ++++-
 packages/svelte-ux/src/lib/components/Dialog.svelte   |  7 +++++--
 .../svelte-ux/src/lib/components/DividerDot.svelte    |  5 ++++-
 packages/svelte-ux/src/lib/components/Drawer.svelte   |  7 +++++--
 .../svelte-ux/src/lib/components/EmptyMessage.svelte  |  5 ++++-
 .../src/lib/components/ExpansionPanel.svelte          |  5 ++++-
 packages/svelte-ux/src/lib/components/Field.svelte    |  6 +++++-
 packages/svelte-ux/src/lib/components/Gooey.svelte    |  5 ++++-
 packages/svelte-ux/src/lib/components/Icon.svelte     | 11 +++++++----
 packages/svelte-ux/src/lib/components/Kbd.svelte      |  5 ++++-
 packages/svelte-ux/src/lib/components/ListItem.svelte |  5 ++++-
 packages/svelte-ux/src/lib/components/Menu.svelte     |  7 +++++--
 .../svelte-ux/src/lib/components/MenuButton.svelte    |  5 ++++-
 .../svelte-ux/src/lib/components/MenuField.svelte     |  2 +-
 packages/svelte-ux/src/lib/components/MenuItem.svelte |  5 ++++-
 .../src/lib/components/MultiSelectField.svelte        |  5 ++++-
 .../src/lib/components/MultiSelectOption.svelte       |  5 ++++-
 packages/svelte-ux/src/lib/components/NavItem.svelte  |  5 ++++-
 .../svelte-ux/src/lib/components/Notification.svelte  |  5 ++++-
 packages/svelte-ux/src/lib/components/Overflow.svelte |  5 ++++-
 .../svelte-ux/src/lib/components/Pagination.svelte    |  5 ++++-
 packages/svelte-ux/src/lib/components/Preview.svelte  |  5 ++++-
 .../src/lib/components/ProgressCircle.svelte          |  5 +++--
 .../svelte-ux/src/lib/components/QuickSearch.svelte   |  5 ++++-
 packages/svelte-ux/src/lib/components/Radio.svelte    |  5 ++++-
 .../src/lib/components/ResponsiveMenu.svelte          |  7 +++++--
 .../src/lib/components/ScrollContainer.svelte         |  5 ++++-
 .../src/lib/components/ScrollingValue.svelte          |  5 ++++-
 .../src/lib/components/SectionDivider.svelte          |  7 +++++--
 .../svelte-ux/src/lib/components/SelectField.svelte   |  5 ++++-
 packages/svelte-ux/src/lib/components/Shine.svelte    |  5 ++++-
 packages/svelte-ux/src/lib/components/Stack.svelte    |  2 +-
 packages/svelte-ux/src/lib/components/Step.svelte     |  5 ++++-
 packages/svelte-ux/src/lib/components/Steps.svelte    |  5 ++++-
 packages/svelte-ux/src/lib/components/Switch.svelte   |  5 ++++-
 packages/svelte-ux/src/lib/components/Tab.svelte      |  5 ++++-
 packages/svelte-ux/src/lib/components/Table.svelte    | 11 ++++-------
 packages/svelte-ux/src/lib/components/Tabs.svelte     |  5 ++++-
 .../svelte-ux/src/lib/components/TextField.svelte     |  6 +++++-
 packages/svelte-ux/src/lib/components/Timeline.svelte |  8 +++++++-
 .../svelte-ux/src/lib/components/TimelineEvent.svelte |  5 ++++-
 .../svelte-ux/src/lib/components/ToggleGroup.svelte   |  5 ++++-
 .../svelte-ux/src/lib/components/ToggleOption.svelte  |  5 ++++-
 packages/svelte-ux/src/lib/components/Tooltip.svelte  |  7 +++++--
 packages/svelte-ux/src/lib/components/TreeList.svelte |  5 ++++-
 51 files changed, 211 insertions(+), 68 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
index c1b8f7a0..e2a5fef0 100644
--- a/packages/svelte-ux/src/lib/components/AppLayout.svelte
+++ b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -13,6 +13,9 @@
   /** Control whether header should be full width (deafult) or nav should be full height */
   export let headerPosition: 'full' | 'inset' = 'full';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     aside?: string;
@@ -39,7 +42,7 @@
     '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <slot />
diff --git a/packages/svelte-ux/src/lib/components/BarStack.svelte b/packages/svelte-ux/src/lib/components/BarStack.svelte
index eeecc356..1f9ae748 100644
--- a/packages/svelte-ux/src/lib/components/BarStack.svelte
+++ b/packages/svelte-ux/src/lib/components/BarStack.svelte
@@ -17,6 +17,9 @@
   }[];
   export let total: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     item?: string;
@@ -28,7 +31,7 @@
   }>();
 </script>
 
-<div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, $$props.class)}>
+<div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, className)}>
   {#each data as item}
     {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))}
     <!-- Hide empty -->
diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte
index 20878e90..b61caafb 100644
--- a/packages/svelte-ux/src/lib/components/Button.svelte
+++ b/packages/svelte-ux/src/lib/components/Button.svelte
@@ -27,6 +27,9 @@
   export let size: ButtonSize | undefined = undefined; // default in reactive groupContext below
   export let color: ButtonColor | undefined = undefined; // default in reactive groupContext below
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** @type {{root?: string, icon?: string, loading?: string}} */
   export let classes: {
     root?: string;
@@ -437,7 +440,7 @@
 
     settingsClasses.root,
     classes?.root,
-    $$props.class
+    className
   );
 </script>
 
@@ -449,7 +452,6 @@
   {type}
   {...$$restProps}
   class={_class}
-  style={$$props.style ?? ''}
   {disabled}
   aria-disabled={disabled ? 'true' : 'false'}
   use:multi={actions}
diff --git a/packages/svelte-ux/src/lib/components/Checkbox.svelte b/packages/svelte-ux/src/lib/components/Checkbox.svelte
index eac19167..c4a16cb9 100644
--- a/packages/svelte-ux/src/lib/components/Checkbox.svelte
+++ b/packages/svelte-ux/src/lib/components/Checkbox.svelte
@@ -18,6 +18,9 @@
   export let size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';
   export let circle = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     input?: string;
@@ -57,7 +60,7 @@
     'items-center',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <input
diff --git a/packages/svelte-ux/src/lib/components/Code.svelte b/packages/svelte-ux/src/lib/components/Code.svelte
index 2a686da6..dd8eaf80 100644
--- a/packages/svelte-ux/src/lib/components/Code.svelte
+++ b/packages/svelte-ux/src/lib/components/Code.svelte
@@ -11,6 +11,9 @@
     ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     pre?: string;
@@ -18,7 +21,7 @@
   } = {};
 </script>
 
-<div class={cls('Code', 'rounded-sm', 'overflow-auto', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', 'overflow-auto', classes.root, className)}>
   {#if source}
     <div class="relative">
       <pre
diff --git a/packages/svelte-ux/src/lib/components/Collapse.svelte b/packages/svelte-ux/src/lib/components/Collapse.svelte
index ca269960..7c591e7a 100644
--- a/packages/svelte-ux/src/lib/components/Collapse.svelte
+++ b/packages/svelte-ux/src/lib/components/Collapse.svelte
@@ -25,6 +25,9 @@
   export let transition = slide;
   export let transitionParams: TransitionParams = {};
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     trigger?: string;
@@ -56,7 +59,7 @@
     popout && list === 'group' && 'group-first:mt-0 group-last:mb-0',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   aria-expanded={open}
 >
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 142f7cf5..d20af311 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -46,6 +46,9 @@
   export let dense = false;
   export let icon: string | null = null;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   let inputValue: string | undefined = '';
 
   const dispatch = createEventDispatcher();
@@ -82,7 +85,7 @@
     dispatch('change', { value });
   }}
   classes={classes.field}
-  class={cls('DateField', settingsClasses.root, classes.root, $$props.class)}
+  class={cls('DateField', settingsClasses.root, classes.root, className)}
   let:id
 >
   <Input
diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte
index 69154cff..354778a8 100644
--- a/packages/svelte-ux/src/lib/components/Dialog.svelte
+++ b/packages/svelte-ux/src/lib/components/Dialog.svelte
@@ -25,6 +25,9 @@
   export let persistent = false;
   export let loading: boolean | null = null;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     dialog?: string;
@@ -114,9 +117,8 @@
         'dialog rounded-sm bg-surface-100 elevation-4 overflow-y-auto pointer-events-auto relative outline-hidden',
         settingsClasses.dialog,
         classes.dialog,
-        $$props.class
+        className
       )}
-      style={$$props.style}
       in:scale|global={{ duration: 150, easing: quadIn }}
       out:scale={{ duration: 150, easing: quadIn }}
       on:introstart
@@ -126,6 +128,7 @@
       bind:this={dialogEl}
       use:focusMove={{ restoreFocus: true }}
       role="dialog"
+      {...$$restProps}
     >
       {#if loading}
         <Overlay center class="rounded-sm">
diff --git a/packages/svelte-ux/src/lib/components/DividerDot.svelte b/packages/svelte-ux/src/lib/components/DividerDot.svelte
index dc5e3c52..f09469ac 100644
--- a/packages/svelte-ux/src/lib/components/DividerDot.svelte
+++ b/packages/svelte-ux/src/lib/components/DividerDot.svelte
@@ -2,7 +2,10 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const settingsClasses = getComponentClasses('DividerDot');
 </script>
 
-<span class={cls('DividerDot mx-1', settingsClasses.root, $$props.class)}> • </span>
+<span class={cls('DividerDot mx-1', settingsClasses.root, className)}> • </span>
diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte
index 13965884..62831ebd 100644
--- a/packages/svelte-ux/src/lib/components/Drawer.svelte
+++ b/packages/svelte-ux/src/lib/components/Drawer.svelte
@@ -24,6 +24,9 @@
   export let loading: boolean | null = null;
   export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     backdrop?: string;
@@ -83,9 +86,8 @@
       },
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     in:fly|global={{
       x: placement === 'left' ? '-100%' : placement === 'right' ? '100%' : 0,
       y: placement === 'top' ? '-100%' : placement === 'bottom' ? '100%' : 0,
@@ -110,6 +112,7 @@
     use:focusMove={{ restoreFocus: true }}
     role="dialog"
     tabindex="-1"
+    {...$$restProps}
   >
     {#if loading}
       <Overlay center class="rounded-sm">
diff --git a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
index 2c7e8ca5..ca96a0d9 100644
--- a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
+++ b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
@@ -2,6 +2,9 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const settingsClasses = getComponentClasses('EmptyMessage');
 </script>
 
@@ -14,7 +17,7 @@
     'text-surface-content/50 text-xs tracking-wider',
     'border border-surface-100/80 rounded-sm',
     settingsClasses.root,
-    $$props.class
+    className
   )}
 >
   <slot />
diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
index 594dcbfd..2c853c7c 100644
--- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
+++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
@@ -17,6 +17,9 @@
   export let disabled = false;
   $: enabled = $$slots.default && !disabled;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     toggle?: string;
@@ -36,7 +39,7 @@
       list === 'group' && 'group-first:border-t-0 group-first:rounded-t group-last:rounded-b',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     ),
     icon: cls('text-surface-content/30 px-2', !enabled && 'hidden'),
   }}
diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
index 2adbdf4f..f5408c23 100644
--- a/packages/svelte-ux/src/lib/components/Field.svelte
+++ b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -35,6 +35,10 @@
   // export let actions: Actions = undefined;
   // export let inputEl: HTMLInputElement | null = null;
   export let center = false;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     container?: string;
@@ -69,7 +73,7 @@
     !base && (rounded ? 'rounded-full' : 'rounded-sm'),
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   bind:this={labelEl}
 >
diff --git a/packages/svelte-ux/src/lib/components/Gooey.svelte b/packages/svelte-ux/src/lib/components/Gooey.svelte
index 3765e95b..286726c6 100644
--- a/packages/svelte-ux/src/lib/components/Gooey.svelte
+++ b/packages/svelte-ux/src/lib/components/Gooey.svelte
@@ -16,6 +16,9 @@
 
   export let composite: SVGAttributes<SVGFECompositeElement>['operator'] = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** @type {{root?: string, icon?: string, loading?: string}} */
   export let classes: {
     root?: string;
@@ -51,7 +54,7 @@
 <div
   style:filter="url(#{filterId})"
   {...$$restProps}
-  class={cls('inline-block', settingsClasses.root, classes?.root, $$props.class)}
+  class={cls('inline-block', settingsClasses.root, classes?.root, className)}
 >
   <slot />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/Icon.svelte b/packages/svelte-ux/src/lib/components/Icon.svelte
index 9d16ec32..a9d52d7a 100644
--- a/packages/svelte-ux/src/lib/components/Icon.svelte
+++ b/packages/svelte-ux/src/lib/components/Icon.svelte
@@ -25,6 +25,9 @@
   export let descId: string | undefined = desc ? uniqueId('desc-') : '';
   $: isLabelled = title || desc;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     path?: string | string[];
@@ -87,9 +90,8 @@
       'icon-container inline-block shrink-0 align-middle fill-current',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     style:width
     style:height
     style:--width={width}
@@ -97,6 +99,7 @@
     role={isLabelled ? 'img' : 'presentation'}
     aria-labelledby={isLabelled ? `${titleId} ${descId}` : undefined}
     on:click
+    {...$$restProps}
   >
     <slot>
       {@html svg ?? ''}
@@ -112,12 +115,12 @@
       'inline-block shrink-0 fill-current',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
-    style={$$props.style}
     role={isLabelled ? 'img' : 'presentation'}
     aria-labelledby={isLabelled ? `${titleId} ${descId}` : undefined}
     on:click
+    {...$$restProps}
   >
     {#if title}
       <title id={titleId}>{title}</title>
diff --git a/packages/svelte-ux/src/lib/components/Kbd.svelte b/packages/svelte-ux/src/lib/components/Kbd.svelte
index e8603891..832f8f25 100644
--- a/packages/svelte-ux/src/lib/components/Kbd.svelte
+++ b/packages/svelte-ux/src/lib/components/Kbd.svelte
@@ -8,6 +8,9 @@
   export let command = false;
 
   export let variant: 'filled' | 'none' = 'filled';
+
+  let className: string | undefined = undefined;
+  export { className as class };
 </script>
 
 <kbd
@@ -15,7 +18,7 @@
     'font-sans inline-flex gap-1',
     variant === 'filled' &&
       'border border-b-2 text-surface-content bg-surface-200 rounded-sm py-1 px-1',
-    $$props.class
+    className
   )}
 >
   {#if control}
diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte
index 9a299c26..97116100 100644
--- a/packages/svelte-ux/src/lib/components/ListItem.svelte
+++ b/packages/svelte-ux/src/lib/components/ListItem.svelte
@@ -35,6 +35,9 @@
    */
   export let noBackground = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     avatar?: string;
@@ -64,7 +67,7 @@
     noBackground !== true && 'bg-surface-100',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   on:click
   role="listitem"
diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte
index 192e09f5..9b54e609 100644
--- a/packages/svelte-ux/src/lib/components/Menu.svelte
+++ b/packages/svelte-ux/src/lib/components/Menu.svelte
@@ -28,6 +28,9 @@
   export let explicitClose = false;
   export let moveFocus = true;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     menu?: string;
@@ -70,11 +73,11 @@
     'bg-surface-100 rounded-sm shadow-sm border overflow-auto',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
-  style={$$props.style}
   on:close
   let:close
+  {...$$restProps}
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
index f7bca412..d2c0fced 100644
--- a/packages/svelte-ux/src/lib/components/MenuButton.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -20,6 +20,9 @@
   export let menuIcon: string | null = mdiMenuDown;
   $: selected = options?.find((x) => x.value === value);
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     label?: string;
@@ -38,7 +41,7 @@
 <Button
   on:click={() => (open = !open)}
   {...restProps}
-  class={cls('MenuButton', settingsClasses.root, classes.root, $$props.class)}
+  class={cls('MenuButton', settingsClasses.root, classes.root, className)}
 >
   <slot name="selection" value={selected}>
     <span class={cls('truncate', settingsClasses.label, classes.label)}>
diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte
index 9b85f3dc..9af64e52 100644
--- a/packages/svelte-ux/src/lib/components/MenuField.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuField.svelte
@@ -70,7 +70,7 @@
 <Field
   class="cursor-pointer"
   {...restProps}
-  classes={{ input: 'overflow-hidden', ...$$props.classes }}
+  classes={{ input: 'overflow-hidden', ...classes }}
   on:click={() => (open = !open)}
 >
   <slot name="selection">
diff --git a/packages/svelte-ux/src/lib/components/MenuItem.svelte b/packages/svelte-ux/src/lib/components/MenuItem.svelte
index 54eeda7f..e3922736 100644
--- a/packages/svelte-ux/src/lib/components/MenuItem.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuItem.svelte
@@ -18,6 +18,9 @@
   export let disabled = false;
   export let selected = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: ButtonProps['classes'] & { selected?: string } = {
     root: 'text-sm gap-3',
     icon: 'text-surface-content/50',
@@ -55,7 +58,7 @@
     selected && classes?.selected,
     settingsClasses.root,
     classes?.root,
-    $$props.class
+    className
   )}
   on:click
   on:mouseover
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 6746f059..fa8fe3a8 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -46,6 +46,9 @@
     value,
   }) => `${value?.length} selected`;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     multiSelectMenu?: MultiSelectMenuProps['classes'];
@@ -142,7 +145,7 @@
 <!-- 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)}
+  class={cls(disabled && 'pointer-events-none', settingsClasses.root, classes.root, className)}
   on:click={onClick}
 >
   <!-- TODO: Setup blur without jank on open or issues when clicking within menu -->
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
index eac9f767..3abb377a 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
@@ -12,6 +12,9 @@
   export let disabled = false;
   export let variant: 'checkbox' | 'checkmark' | 'fill' = 'checkbox';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     checkbox?: ComponentProps<Checkbox>['classes'];
@@ -28,7 +31,7 @@
     'grid grid-cols-[1fr_auto]',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   role="option"
   aria-selected={checked}
diff --git a/packages/svelte-ux/src/lib/components/NavItem.svelte b/packages/svelte-ux/src/lib/components/NavItem.svelte
index 74b9262c..29eaf929 100644
--- a/packages/svelte-ux/src/lib/components/NavItem.svelte
+++ b/packages/svelte-ux/src/lib/components/NavItem.svelte
@@ -14,6 +14,9 @@
   export let text: string = '';
   export let icon: string | null = null;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     active?: string;
@@ -34,7 +37,7 @@
     'flex items-center',
     settingsClasses.root,
     classes.root,
-    $$props.class,
+    className,
     isPathActive && ['is-active', settingsClasses.active, classes.active]
   )}
   use:scrollIntoView={{
diff --git a/packages/svelte-ux/src/lib/components/Notification.svelte b/packages/svelte-ux/src/lib/components/Notification.svelte
index f6193bd9..db0f101b 100644
--- a/packages/svelte-ux/src/lib/components/Notification.svelte
+++ b/packages/svelte-ux/src/lib/components/Notification.svelte
@@ -23,6 +23,9 @@
   export let open: boolean = true;
   export let closeIcon: boolean = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     title?: string;
@@ -71,7 +74,7 @@
         default: {},
       }[variant],
       classes.root,
-      $$props.class
+      className
     )}
     transition:fly={{ duration: 200, easing: quadIn, x: 100 }}
     on:outroend={() => dispatch('close')}
diff --git a/packages/svelte-ux/src/lib/components/Overflow.svelte b/packages/svelte-ux/src/lib/components/Overflow.svelte
index a7f9b6db..9d87564f 100644
--- a/packages/svelte-ux/src/lib/components/Overflow.svelte
+++ b/packages/svelte-ux/src/lib/components/Overflow.svelte
@@ -4,6 +4,9 @@
 
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const settingsClasses = getComponentClasses('Overflow');
 
   let overflowX = 0;
@@ -17,7 +20,7 @@
     overflowY = e.detail.overflowY;
   }}
   {...$$restProps}
-  class={cls('Overflow', settingsClasses.root, $$props.class)}
+  class={cls('Overflow', settingsClasses.root, className)}
 >
   <slot {overflowX} {overflowY} />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte
index 981e2ddd..fa0126cc 100644
--- a/packages/svelte-ux/src/lib/components/Pagination.svelte
+++ b/packages/svelte-ux/src/lib/components/Pagination.svelte
@@ -35,6 +35,9 @@
   /** Determine which actions to show and order */
   export let show: ShowComponent[] = ['prevPage', 'pagination', 'nextPage'];
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     buttons?: string;
@@ -52,7 +55,7 @@
       'flex items-center gap-1',
       settingsClasses.root,
       classes.root,
-      $$props.class
+      className
     )}
   >
     {#each show as component}
diff --git a/packages/svelte-ux/src/lib/components/Preview.svelte b/packages/svelte-ux/src/lib/components/Preview.svelte
index dda787b2..33a74a1b 100644
--- a/packages/svelte-ux/src/lib/components/Preview.svelte
+++ b/packages/svelte-ux/src/lib/components/Preview.svelte
@@ -13,9 +13,12 @@
   export let language = 'svelte';
   export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
   export let showCode = false;
+
+  let className: string | undefined = undefined;
+  export { className as class };
 </script>
 
-<div class={cls('Preview border rounded-sm bg-surface-100', $$props.class)}>
+<div class={cls('Preview border rounded-sm bg-surface-100', className)}>
   <div class="p-4">
     <slot />
   </div>
diff --git a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
index 41804ffe..b0a911cb 100644
--- a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
+++ b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div
-  {...$$props}
+  {...$$restProps}
   class={cls(
     'ProgressCircular',
     'relative inline-flex justify-center items-center align-middle',
@@ -31,7 +31,8 @@
     className
   )}
   class:indeterminate
-  style="height: {size}px; width: {size}px; {$$props.style}"
+  style:height="{size}px"
+  style:width="{size}px"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/svelte-ux/src/lib/components/QuickSearch.svelte b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
index 49d11837..c62984a1 100644
--- a/packages/svelte-ux/src/lib/components/QuickSearch.svelte
+++ b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
@@ -13,6 +13,9 @@
 
   export let options: MenuOption<string>[] = [];
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     button?: string;
@@ -58,7 +61,7 @@
 <Dialog
   bind:open
   classes={{
-    root: cls('items-start mt-8 sm:mt-24', settingsClasses.root, classes.root, $$props.class),
+    root: cls('items-start mt-8 sm:mt-24', settingsClasses.root, classes.root, className),
     backdrop: 'backdrop-blur-xs',
   }}
 >
diff --git a/packages/svelte-ux/src/lib/components/Radio.svelte b/packages/svelte-ux/src/lib/components/Radio.svelte
index 411ac518..7bdff970 100644
--- a/packages/svelte-ux/src/lib/components/Radio.svelte
+++ b/packages/svelte-ux/src/lib/components/Radio.svelte
@@ -16,6 +16,9 @@
   export let fullWidth = false;
   export let size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     input?: string;
@@ -35,7 +38,7 @@
     'items-center',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <input
diff --git a/packages/svelte-ux/src/lib/components/ResponsiveMenu.svelte b/packages/svelte-ux/src/lib/components/ResponsiveMenu.svelte
index 0ebbb12b..d67987cf 100644
--- a/packages/svelte-ux/src/lib/components/ResponsiveMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/ResponsiveMenu.svelte
@@ -13,6 +13,9 @@
   export let menuProps: ComponentProps<Menu> | undefined = undefined;
   export let drawerProps: ComponentProps<Drawer> | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const isLargeScreen = matchMediaWidth(screenWidth);
 </script>
 
@@ -23,7 +26,7 @@
     on:close
     explicitClose
     {...menuProps}
-    class={cls('ResponsiveMenu', $$props.class, menuProps?.class)}
+    class={cls('ResponsiveMenu', className, menuProps?.class)}
   >
     <slot {open} />
   </Menu>
@@ -33,7 +36,7 @@
     placement="bottom"
     on:close
     {...drawerProps}
-    class={cls('ResponsiveMenu', $$props.class, drawerProps?.class)}
+    class={cls('ResponsiveMenu', className, drawerProps?.class)}
   >
     <slot {open} />
   </Drawer>
diff --git a/packages/svelte-ux/src/lib/components/ScrollContainer.svelte b/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
index e80a9ac6..b604a357 100644
--- a/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
+++ b/packages/svelte-ux/src/lib/components/ScrollContainer.svelte
@@ -7,8 +7,11 @@
   function scrollIntoView(node: HTMLElement) {
     return (options?: Parameters<typeof node.scrollIntoView>['0']) => node.scrollIntoView(options);
   }
+
+  let className: string | undefined = undefined;
+  export { className as class };
 </script>
 
-<div bind:this={node} class={$$props.class} style={$$props.style}>
+<div bind:this={node} class={className} {...$$restProps}>
   <slot scrollIntoView={scrollIntoView(node)} />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
index f6a6b115..cbeae65b 100644
--- a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
+++ b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
@@ -10,6 +10,9 @@
   export let format: (value: number) => string | number = (value) => value;
   export let axis: 'x' | 'y' = 'y';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     value?: string;
@@ -31,7 +34,7 @@
     'inline-grid overflow-hidden',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <div
diff --git a/packages/svelte-ux/src/lib/components/SectionDivider.svelte b/packages/svelte-ux/src/lib/components/SectionDivider.svelte
index 27c01bfa..a878b171 100644
--- a/packages/svelte-ux/src/lib/components/SectionDivider.svelte
+++ b/packages/svelte-ux/src/lib/components/SectionDivider.svelte
@@ -2,12 +2,15 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const settingsClasses = getComponentClasses('SectionDivider');
 </script>
 
 <div
-  {...$$props}
-  class={cls('SectionDivider', 'flex items-center my-2', settingsClasses.root, $$props.class)}
+  {...$$restProps}
+  class={cls('SectionDivider', 'flex items-center my-2', settingsClasses.root, className)}
 >
   <div class="flex-1 border h-px rounded-full mr-2"></div>
   <div class="font-medium text-surface-content border px-4 rounded-full bg-surface-100 shadow-sm">
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index 148901ca..f9e730b3 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -60,6 +60,9 @@
 
   export let scrollIntoView: Partial<ScrollIntoViewOptions> = {};
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     field?: string | ComponentProps<TextField>['classes'];
@@ -428,7 +431,7 @@
     'SelectField block w-full cursor-default text-left',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   bind:this={selectFieldEl}
   on:click={onClick}
diff --git a/packages/svelte-ux/src/lib/components/Shine.svelte b/packages/svelte-ux/src/lib/components/Shine.svelte
index dd2307ae..4f1fb321 100644
--- a/packages/svelte-ux/src/lib/components/Shine.svelte
+++ b/packages/svelte-ux/src/lib/components/Shine.svelte
@@ -22,6 +22,9 @@
   /** controls the focus for the light source. The bigger the value the brighter the light */
   export let specularExponent = 120;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   /** @type {{root?: string, icon?: string, loading?: string}} */
   export let classes: {
     root?: string;
@@ -78,7 +81,7 @@
 <div
   style:filter="url(#{filterId})"
   {...$$restProps}
-  class={cls('inline-block', settingsClasses.root, classes?.root, $$props.class)}
+  class={cls('inline-block', settingsClasses.root, classes?.root, className)}
   bind:this={wrapperEl}
 >
   <slot />
diff --git a/packages/svelte-ux/src/lib/components/Stack.svelte b/packages/svelte-ux/src/lib/components/Stack.svelte
index efdbf79b..70f25cfa 100644
--- a/packages/svelte-ux/src/lib/components/Stack.svelte
+++ b/packages/svelte-ux/src/lib/components/Stack.svelte
@@ -29,7 +29,7 @@
     templateColumns="initial"
     templateRows="initial"
     on:click
-    {...$$props}
+    {...$$restProps}
   >
     <slot />
   </Grid>
diff --git a/packages/svelte-ux/src/lib/components/Step.svelte b/packages/svelte-ux/src/lib/components/Step.svelte
index 3ef06038..9e2a9412 100644
--- a/packages/svelte-ux/src/lib/components/Step.svelte
+++ b/packages/svelte-ux/src/lib/components/Step.svelte
@@ -15,6 +15,9 @@
   /** If completed, will color content and line leading up to item */
   export let completed = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     label?: string;
@@ -38,7 +41,7 @@
       : 'grid-rows-[40px_1fr] min-w-16',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <div
diff --git a/packages/svelte-ux/src/lib/components/Steps.svelte b/packages/svelte-ux/src/lib/components/Steps.svelte
index 5956d971..858de58b 100644
--- a/packages/svelte-ux/src/lib/components/Steps.svelte
+++ b/packages/svelte-ux/src/lib/components/Steps.svelte
@@ -35,6 +35,9 @@
   /** Align vertically (default: horizontal) */
   export let vertical: boolean = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     item?: ComponentProps<Step>['classes'];
@@ -53,7 +56,7 @@
     vertical ? 'grid-flow-row' : 'grid-flow-col',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <slot {data}>
diff --git a/packages/svelte-ux/src/lib/components/Switch.svelte b/packages/svelte-ux/src/lib/components/Switch.svelte
index c1cb874b..f46817dc 100644
--- a/packages/svelte-ux/src/lib/components/Switch.svelte
+++ b/packages/svelte-ux/src/lib/components/Switch.svelte
@@ -13,6 +13,9 @@
 
   export let color: ThemeColors = 'primary';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     input?: string;
@@ -72,7 +75,7 @@
       disabled ? 'opacity-50' : 'cursor-pointer peer-focus-visible:ring-2 ring-offset-1',
       settingsClasses.switch,
       classes.switch,
-      $$props.class
+      className
     )}
   >
     <div
diff --git a/packages/svelte-ux/src/lib/components/Tab.svelte b/packages/svelte-ux/src/lib/components/Tab.svelte
index 3f3902c1..53d69973 100644
--- a/packages/svelte-ux/src/lib/components/Tab.svelte
+++ b/packages/svelte-ux/src/lib/components/Tab.svelte
@@ -8,6 +8,9 @@
 
   $: vertical = placement === 'left' || placement === 'right';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
   } = {};
@@ -31,7 +34,7 @@
       : 'bg-surface-200 text-surface-content/50 hover:text-surface-content hover:bg-surface-100',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   on:click
   transition:slide={{ axis: vertical ? 'y' : 'x' }}
diff --git a/packages/svelte-ux/src/lib/components/Table.svelte b/packages/svelte-ux/src/lib/components/Table.svelte
index 0ceacd8a..dee67303 100644
--- a/packages/svelte-ux/src/lib/components/Table.svelte
+++ b/packages/svelte-ux/src/lib/components/Table.svelte
@@ -26,6 +26,9 @@
 
   export let order: ReturnType<typeof tableOrderStore> | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     container?: string;
     wrapper?: string;
@@ -92,13 +95,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={cls(
-    'Table',
-    'table-container',
-    settingsClasses.container,
-    classes.container,
-    $$props.class
-  )}
+  class={cls('Table', 'table-container', settingsClasses.container, classes.container, className)}
   style={styles.container}
 >
   <div
diff --git a/packages/svelte-ux/src/lib/components/Tabs.svelte b/packages/svelte-ux/src/lib/components/Tabs.svelte
index 7fffc99b..55fcf373 100644
--- a/packages/svelte-ux/src/lib/components/Tabs.svelte
+++ b/packages/svelte-ux/src/lib/components/Tabs.svelte
@@ -11,6 +11,9 @@
 
   export let options: { label: string; value: any }[] = [];
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     tabs?: string;
@@ -33,7 +36,7 @@
     }[placement],
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <div
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index bc21db7b..6c92e4c2 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -61,6 +61,10 @@
   export let operators: { label: string; value: string }[] | undefined = undefined;
   export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;
   export let debounceChange: boolean | number = false;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     container?: string;
@@ -222,7 +226,7 @@
     !base && (rounded ? 'rounded-full' : 'rounded-sm'),
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
   bind:this={labelEl}
 >
diff --git a/packages/svelte-ux/src/lib/components/Timeline.svelte b/packages/svelte-ux/src/lib/components/Timeline.svelte
index 317f121d..b4f57d56 100644
--- a/packages/svelte-ux/src/lib/components/Timeline.svelte
+++ b/packages/svelte-ux/src/lib/components/Timeline.svelte
@@ -17,6 +17,9 @@
   export function getTimeline() {
     return getContext<TimelineContext | undefined>(timelineKey);
   }
+
+  let className: string | undefined = undefined;
+  export { className as class };
 </script>
 
 <script lang="ts">
@@ -47,6 +50,9 @@
   /** Snap point to start */
   export let snapPoint = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     event?: ComponentProps<TimelineEvent>['classes'];
@@ -68,7 +74,7 @@
     vertical && 'flex-col timeline-vertical',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <slot {data}>
diff --git a/packages/svelte-ux/src/lib/components/TimelineEvent.svelte b/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
index b8b0c379..43b0dab7 100644
--- a/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
+++ b/packages/svelte-ux/src/lib/components/TimelineEvent.svelte
@@ -18,6 +18,9 @@
   /** If completed, will color icon and line leading up to event */
   export let completed = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     start?: string;
@@ -53,7 +56,7 @@
       'timelineevent-completed has-[~li.timelineevent-completed]:[&_hr:last-child]:bg-(--color-completed)',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <hr
diff --git a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
index da5c718e..f5da5e27 100644
--- a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
@@ -30,6 +30,9 @@
   export let inset: boolean = false;
   export let vertical: boolean = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     options?: string;
@@ -247,7 +250,7 @@
 </script>
 
 <div
-  class={cls('ToggleGroup', `variant-${variant}`, $classesStore.root, $$props.class)}
+  class={cls('ToggleGroup', `variant-${variant}`, $classesStore.root, className)}
   {...$$restProps}
 >
   <!-- TODO: Figure out why fieldset and class="overflow-auto" doesn't work  -->
diff --git a/packages/svelte-ux/src/lib/components/ToggleOption.svelte b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
index 0a5c3ecb..ad2ee28c 100644
--- a/packages/svelte-ux/src/lib/components/ToggleOption.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
@@ -8,6 +8,9 @@
 
   export let value: any;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     option?: string;
@@ -55,7 +58,7 @@
     $classesContext.label,
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <!-- Stack indicator under option -->
diff --git a/packages/svelte-ux/src/lib/components/Tooltip.svelte b/packages/svelte-ux/src/lib/components/Tooltip.svelte
index 47a624ba..db2f5c11 100644
--- a/packages/svelte-ux/src/lib/components/Tooltip.svelte
+++ b/packages/svelte-ux/src/lib/components/Tooltip.svelte
@@ -23,6 +23,9 @@
   export let autoPlacement = false;
   export let matchWidth: boolean = false;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     popover?: string;
@@ -115,14 +118,14 @@
   on:click={hideTooltip}
   bind:this={containerEl}
 >
-  {#if $$props.class || underline || cursor}
+  {#if className || underline || cursor}
     <span
       class={cls(
         hasTitle && underline && 'border-b border-dotted',
         hasTitle && cursor && 'cursor-help',
         settingsClasses.root,
         classes.root,
-        $$props.class
+        className
       )}
     >
       <slot />
diff --git a/packages/svelte-ux/src/lib/components/TreeList.svelte b/packages/svelte-ux/src/lib/components/TreeList.svelte
index b3e28337..e4caaeb1 100644
--- a/packages/svelte-ux/src/lib/components/TreeList.svelte
+++ b/packages/svelte-ux/src/lib/components/TreeList.svelte
@@ -14,6 +14,9 @@
     li?: HTMLAttributes<HTMLLIElement> | ((node: TreeNode) => HTMLAttributes<HTMLLIElement>);
   } = {};
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     ul?: string | ((nodes: TreeNode[]) => string);
     li?: string | ((node: TreeNode) => string);
@@ -27,7 +30,7 @@
     'TreeList',
     typeof settingsClasses.ul === 'string' ? settingsClasses.ul : settingsClasses.ul?.(nodes),
     typeof classes.ul === 'string' ? classes.ul : classes.ul?.(nodes),
-    $$props.class
+    className
   )}
 >
   {#each nodes ?? [] as node}

From d4ce706150c2bba9eaf17c2a850475225a909d79 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 24 Jun 2025 11:41:57 -0400
Subject: [PATCH 2/3] Fix CI

---
 packages/svelte-ux/src/lib/components/TextField.svelte          | 1 +
 .../svelte-ux/src/routes/docs/components/ListItem/+page.svelte  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 6c92e4c2..999b02db 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -229,6 +229,7 @@
     className
   )}
   bind:this={labelEl}
+  {...$$restProps}
 >
   {#if label && ['top', 'left'].includes(labelPlacement)}
     <span
diff --git a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte
index 1a4667f5..f23c5b46 100644
--- a/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ListItem/+page.svelte
@@ -167,7 +167,7 @@
           noShadow
         >
           <div slot="actions">
-            <Checkbox circle dense checked={selectedId == choice.id} />
+            <Checkbox circle checked={selectedId == choice.id} />
           </div>
         </ListItem>
       </div>

From 78925ad9a2436bd3cc9e4234fc0db7854313d619 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 12 Aug 2025 13:53:47 -0400
Subject: [PATCH 3/3] Fix bad merge

---
 packages/svelte-ux/src/lib/components/DateField.svelte | 3 ---
 packages/svelte-ux/src/lib/components/NavItem.svelte   | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 6964f356..8d0d4817 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -50,9 +50,6 @@
   let className: string | undefined = undefined;
   export { className as class };
 
-  let className: string | undefined = undefined;
-  export { className as class };
-
   let inputValue: string | undefined = '';
 
   const dispatch = createEventDispatcher();
diff --git a/packages/svelte-ux/src/lib/components/NavItem.svelte b/packages/svelte-ux/src/lib/components/NavItem.svelte
index 2449c595..9ad47797 100644
--- a/packages/svelte-ux/src/lib/components/NavItem.svelte
+++ b/packages/svelte-ux/src/lib/components/NavItem.svelte
@@ -19,9 +19,6 @@
   let className: string | undefined = undefined;
   export { className as class };
 
-  let className: string | undefined = undefined;
-  export { className as class };
-
   export let classes: {
     root?: string;
     active?: string;