@classic-homes/theme-svelte 1.37.0 → 1.39.0

package/dist/lib/components/AlertDialog.svelte

@@ -51,6 +51,12 @@
     trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional custom content */
     children?: Snippet;
+    /**
+     * Called before focus returns to the trigger (or the previously focused
+     * element) on close; `preventDefault()` keeps focus where you put it, e.g.
+     * when the confirmed action removed that element.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
   }
 
   let {
@@ -66,6 +72,7 @@
     class: className,
     trigger,
     children,
+    onCloseAutoFocus,
   }: Props = $props();
 
   const uid = $props.id();
@@ -121,6 +128,7 @@
       class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogPrimitive.Content
+      {onCloseAutoFocus}
       class={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100vw-2rem)] sm:max-w-lg max-h-[calc(100dvh-2rem)] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-black bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className

package/dist/lib/components/AlertDialog.svelte.d.ts

@@ -80,6 +80,12 @@ declare const AlertDialog: import("svelte").Component<{
     trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional custom content */
     children?: Snippet;
+    /**
+     * Called before focus returns to the trigger (or the previously focused
+     * element) on close; `preventDefault()` keeps focus where you put it, e.g.
+     * when the confirmed action removed that element.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
 }, {}, "open">;
 type AlertDialog = ReturnType<typeof AlertDialog>;
 export default AlertDialog;

package/dist/lib/components/Collapsible.svelte

@@ -0,0 +1,68 @@
+<!--
+  @component
+  A region that opens and closes from a trigger button (Bits UI Collapsible).
+  Pass `label` for a plain trigger with a chevron, or a `trigger` snippet for
+  custom trigger content (it receives `{ open }`; the button wraps it).
+-->
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  interface Props {
+    /** Whether the content is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Trigger text; ignored when `trigger` is given */
+    label?: string;
+    /** Custom trigger content, rendered inside the trigger button */
+    trigger?: Snippet<[{ open: boolean }]>;
+    /** Show the chevron before the trigger content (default true) */
+    chevron?: boolean;
+    class?: string;
+    triggerClass?: string;
+    contentClass?: string;
+    children: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    disabled = false,
+    label,
+    trigger,
+    chevron = true,
+    class: className,
+    triggerClass,
+    contentClass,
+    children,
+  }: Props = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:open {onOpenChange} {disabled} class={className}>
+  <CollapsiblePrimitive.Trigger
+    class={cn(
+      'group inline-flex items-center gap-1.5 rounded-md text-sm font-medium text-foreground hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      triggerClass
+    )}
+  >
+    {#if chevron}
+      <Icon
+        name="chevron-right"
+        size={14}
+        class="shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 motion-reduce:transition-none"
+      />
+    {/if}
+    {#if trigger}{@render trigger({ open })}{:else}{label}{/if}
+  </CollapsiblePrimitive.Trigger>
+  <CollapsiblePrimitive.Content
+    class={cn(
+      'overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up motion-reduce:animate-none',
+      contentClass
+    )}
+  >
+    {@render children()}
+  </CollapsiblePrimitive.Content>
+</CollapsiblePrimitive.Root>

package/dist/lib/components/Collapsible.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the content is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Trigger text; ignored when `trigger` is given */
+    label?: string;
+    /** Custom trigger content, rendered inside the trigger button */
+    trigger?: Snippet<[{
+        open: boolean;
+    }]>;
+    /** Show the chevron before the trigger content (default true) */
+    chevron?: boolean;
+    class?: string;
+    triggerClass?: string;
+    contentClass?: string;
+    children: Snippet;
+}
+/**
+ * A region that opens and closes from a trigger button (Bits UI Collapsible).
+ * Pass `label` for a plain trigger with a chevron, or a `trigger` snippet for
+ * custom trigger content (it receives `{ open }`; the button wraps it).
+ */
+declare const Collapsible: import("svelte").Component<Props, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/lib/components/Combobox.svelte

@@ -25,6 +25,12 @@
     placeholder?: string;
     /** Message to display when no results found */
     emptyMessage?: string;
+    /**
+     * Render at most this many matching options, with a note to type to
+     * narrow the rest. Filtering still searches every option. Keeps long
+     * lists (thousands of options) quick to open.
+     */
+    maxResults?: number;
     /** Whether the combobox is disabled */
     disabled?: boolean;
     /** Whether selection is required */
@@ -69,6 +75,7 @@
     loading = false,
     onSearch,
     debounceMs = 300,
+    maxResults,
     class: className,
     'aria-label': ariaLabelProp,
     'aria-labelledby': ariaLabelledby,
@@ -129,6 +136,28 @@
     filteredOptions.reduce((n: number, item) => n + (isGroup(item) ? item.options.length : 1), 0)
   );
 
+  // The first `maxResults` matches, keeping their groups.
+  const shownOptions = $derived.by((): (ComboboxOption | SelectGroup)[] => {
+    if (maxResults === undefined || filteredCount <= maxResults) return filteredOptions;
+    let left = maxResults;
+    const out: (ComboboxOption | SelectGroup)[] = [];
+    for (const item of filteredOptions) {
+      if (left <= 0) break;
+      if (isGroup(item)) {
+        const opts = item.options.slice(0, left);
+        out.push({ ...item, options: opts });
+        left -= opts.length;
+      } else {
+        out.push(item);
+        left--;
+      }
+    }
+    return out;
+  });
+  const hiddenCount = $derived(
+    maxResults === undefined ? 0 : Math.max(0, filteredCount - maxResults)
+  );
+
   // Closed, the input shows the selected label; open, it holds what the user
   // types, with the selected label as the placeholder so the full list shows.
   const inputValue = $derived(open ? searchQuery : (selectedLabel ?? ''));
@@ -174,7 +203,8 @@
     if (!open) return '';
     if (filteredCount === 0) return emptyMessage;
     const count = filteredCount;
-    return `${count} ${count === 1 ? 'option' : 'options'} available`;
+    const shown = hiddenCount ? `, showing the first ${count - hiddenCount}` : '';
+    return `${count} ${count === 1 ? 'option' : 'options'} available${shown}`;
   });
 </script>
 
@@ -276,7 +306,7 @@
               {emptyMessage}
             </div>
           {:else}
-            {#each filteredOptions as item}
+            {#each shownOptions as item}
               {#if isGroup(item)}
                 <ComboboxPrimitive.Group>
                   <ComboboxPrimitive.GroupHeading class="py-1.5 pl-8 pr-2 text-sm font-semibold">
@@ -290,6 +320,11 @@
                 {@render comboboxItem(item)}
               {/if}
             {/each}
+            {#if hiddenCount}
+              <div class="px-2 py-1.5 text-xs text-muted-foreground" data-combobox-more>
+                {hiddenCount} more. Type to narrow the list.
+              </div>
+            {/if}
           {/if}
         </div>
       </ComboboxPrimitive.Content>

package/dist/lib/components/Combobox.svelte.d.ts

@@ -15,6 +15,12 @@ interface Props {
     placeholder?: string;
     /** Message to display when no results found */
     emptyMessage?: string;
+    /**
+     * Render at most this many matching options, with a note to type to
+     * narrow the rest. Filtering still searches every option. Keeps long
+     * lists (thousands of options) quick to open.
+     */
+    maxResults?: number;
     /** Whether the combobox is disabled */
     disabled?: boolean;
     /** Whether selection is required */

package/dist/lib/components/ContextMenu.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+  import type { DropdownMenuGroup, DropdownMenuItem } from './DropdownMenu.svelte';
+
+  interface Props {
+    /** Menu items, the same shape as DropdownMenu's */
+    items: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** The area that opens the menu on right-click (or long-press) */
+    children: Snippet;
+    /** Whether the menu is open (bindable) */
+    open?: boolean;
+    /** Called when the menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Leave the browser's own menu in place */
+    disabled?: boolean;
+    /** Classes for the trigger area */
+    triggerClass?: string;
+    /** Classes for the menu */
+    class?: string;
+    /**
+     * Called as the menu closes, before focus returns to where it was;
+     * `preventDefault()` keeps focus where a chosen item put it.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+  }
+
+  let {
+    items,
+    children,
+    open = $bindable(false),
+    onOpenChange,
+    disabled = false,
+    triggerClass,
+    class: className,
+    onCloseAutoFocus,
+  }: Props = $props();
+
+  function isGroup(item: DropdownMenuItem | DropdownMenuGroup): item is DropdownMenuGroup {
+    return 'items' in item && Array.isArray(item.items);
+  }
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  const itemClass =
+    'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default';
+</script>
+
+{#snippet itemContent(item: DropdownMenuItem)}
+  {#if item.icon}
+    <Icon name={item.icon} size={16} class="mr-2 shrink-0" aria-hidden="true" />
+  {/if}
+  {item.label}
+  {#if item.shortcut}
+    <span class="ml-auto pl-4 text-xs tracking-widest opacity-60" aria-hidden="true">
+      {item.shortcut}
+    </span>
+    <span class="sr-only">, keyboard shortcut {item.shortcut}</span>
+  {/if}
+{/snippet}
+
+{#snippet entry(item: DropdownMenuItem)}
+  {#if item.type === 'separator'}
+    <ContextMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+  {:else if item.type === 'label'}
+    <div role="presentation" class="px-2 py-1.5 text-sm font-semibold">{item.label}</div>
+  {:else if item.checked !== undefined}
+    <ContextMenuPrimitive.CheckboxItem
+      checked={item.checked}
+      disabled={item.disabled}
+      closeOnSelect={false}
+      onSelect={() => item.onSelect?.()}
+      class={cn(itemClass, 'pl-8')}
+    >
+      {#if item.checked}
+        <Icon name="check" size={16} class="absolute left-2 shrink-0" aria-hidden="true" />
+      {/if}
+      {@render itemContent(item)}
+    </ContextMenuPrimitive.CheckboxItem>
+  {:else}
+    <ContextMenuPrimitive.Item
+      disabled={item.disabled}
+      onSelect={() => item.onSelect?.()}
+      class={cn(
+        itemClass,
+        item.destructive && 'text-destructive data-[highlighted]:text-destructive'
+      )}
+      aria-keyshortcuts={item.shortcut || undefined}
+    >
+      {@render itemContent(item)}
+    </ContextMenuPrimitive.Item>
+  {/if}
+{/snippet}
+
+<ContextMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <ContextMenuPrimitive.Trigger {disabled} class={triggerClass}>
+    {@render children()}
+  </ContextMenuPrimitive.Trigger>
+
+  <!-- Portal so the menu is not clipped by an overflow/transformed ancestor. -->
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      collisionPadding={8}
+      {onCloseAutoFocus}
+      class={cn(
+        'isolate z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className
+      )}
+    >
+      <div class="max-h-80 overflow-y-auto overflow-x-hidden">
+        {#each items as item, i (i)}
+          {#if isGroup(item)}
+            <ContextMenuPrimitive.Group>
+              {#if item.label}
+                <ContextMenuPrimitive.GroupHeading class="px-2 py-1.5 text-sm font-semibold">
+                  {item.label}
+                </ContextMenuPrimitive.GroupHeading>
+              {/if}
+              {#each item.items as sub, j (j)}
+                {@render entry(sub)}
+              {/each}
+            </ContextMenuPrimitive.Group>
+          {:else}
+            {@render entry(item)}
+          {/if}
+        {/each}
+      </div>
+    </ContextMenuPrimitive.Content>
+  </ContextMenuPrimitive.Portal>
+</ContextMenuPrimitive.Root>

package/dist/lib/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenuGroup, DropdownMenuItem } from './DropdownMenu.svelte';
+interface Props {
+    /** Menu items, the same shape as DropdownMenu's */
+    items: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** The area that opens the menu on right-click (or long-press) */
+    children: Snippet;
+    /** Whether the menu is open (bindable) */
+    open?: boolean;
+    /** Called when the menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Leave the browser's own menu in place */
+    disabled?: boolean;
+    /** Classes for the trigger area */
+    triggerClass?: string;
+    /** Classes for the menu */
+    class?: string;
+    /**
+     * Called as the menu closes, before focus returns to where it was;
+     * `preventDefault()` keeps focus where a chosen item put it.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/lib/components/CopyButton.svelte

@@ -0,0 +1,101 @@
+<!--
+  @component
+  Copies text to the clipboard and confirms it: the icon turns into a check
+  and screen readers hear "Copied" for `timeout` ms. Icon-only by default
+  (with a tooltip); pass `children` for a labelled button.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+  import Tooltip from './Tooltip.svelte';
+  import type { ButtonVariants } from './button-variants.js';
+
+  interface Props {
+    /** Text to copy, or a function returning it (read when clicked) */
+    value: string | (() => string | Promise<string>);
+    /** Accessible name and tooltip before copying (default "Copy") */
+    label?: string;
+    /** Accessible name, tooltip and announcement after copying (default "Copied") */
+    copiedLabel?: string;
+    /** How long the copied state lasts, in ms (default 2000) */
+    timeout?: number;
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    /** Show a tooltip on the icon-only button (default true) */
+    tooltip?: boolean;
+    disabled?: boolean;
+    class?: string;
+    /** Called after the text was written to the clipboard */
+    oncopy?: (text: string) => void;
+    /** Called when the clipboard is unavailable or the write was refused */
+    onerror?: (error: unknown) => void;
+    /** Visible label; omit for an icon-only button */
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    label = 'Copy',
+    copiedLabel = 'Copied',
+    timeout = 2000,
+    variant = 'ghost',
+    size,
+    tooltip = true,
+    disabled = false,
+    class: className,
+    oncopy,
+    onerror,
+    children,
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  $effect(() => () => clearTimeout(timer));
+
+  async function copy() {
+    try {
+      const text = typeof value === 'function' ? await value() : value;
+      if (!navigator.clipboard?.writeText) throw new Error('Clipboard is not available');
+      await navigator.clipboard.writeText(text);
+      copied = true;
+      clearTimeout(timer);
+      timer = setTimeout(() => (copied = false), timeout);
+      oncopy?.(text);
+    } catch (error) {
+      onerror?.(error);
+    }
+  }
+
+  const name = $derived(copied ? copiedLabel : label);
+  const iconSize = $derived(size === 'sm' ? 14 : 16);
+</script>
+
+{#snippet button(props: Record<string, unknown> = {})}
+  <Button
+    {...props}
+    type="button"
+    {variant}
+    size={size ?? (children ? 'sm' : 'icon')}
+    {disabled}
+    class={className}
+    aria-label={children ? undefined : name}
+    data-copied={copied || undefined}
+    onclick={(e: MouseEvent) => {
+      (props.onclick as ((e: MouseEvent) => void) | undefined)?.(e);
+      void copy();
+    }}
+  >
+    <Icon name={copied ? 'check' : 'copy'} size={iconSize} />
+    {#if children}{@render children()}{/if}
+  </Button>
+{/snippet}
+
+{#if tooltip && !children}
+  <Tooltip content={name}>
+    {#snippet children({ props })}{@render button(props)}{/snippet}
+  </Tooltip>
+{:else}
+  {@render button()}
+{/if}
+<span class="sr-only" role="status">{copied ? copiedLabel : ''}</span>

package/dist/lib/components/CopyButton.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariants } from './button-variants.js';
+interface Props {
+    /** Text to copy, or a function returning it (read when clicked) */
+    value: string | (() => string | Promise<string>);
+    /** Accessible name and tooltip before copying (default "Copy") */
+    label?: string;
+    /** Accessible name, tooltip and announcement after copying (default "Copied") */
+    copiedLabel?: string;
+    /** How long the copied state lasts, in ms (default 2000) */
+    timeout?: number;
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    /** Show a tooltip on the icon-only button (default true) */
+    tooltip?: boolean;
+    disabled?: boolean;
+    class?: string;
+    /** Called after the text was written to the clipboard */
+    oncopy?: (text: string) => void;
+    /** Called when the clipboard is unavailable or the write was refused */
+    onerror?: (error: unknown) => void;
+    /** Visible label; omit for an icon-only button */
+    children?: Snippet;
+}
+/**
+ * Copies text to the clipboard and confirms it: the icon turns into a check
+ * and screen readers hear "Copied" for `timeout` ms. Icon-only by default
+ * (with a tooltip); pass `children` for a labelled button.
+ */
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/lib/components/EmptyState.svelte

@@ -0,0 +1,72 @@
+<!--
+  @component
+  A centred placeholder for a view with nothing to show yet: an icon, a
+  title, an optional description and actions (e.g. a "Create" button).
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon, { type IconName } from './Icon.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    /** Icon shown above the title in a muted circle */
+    icon?: IconName;
+    /** `sm` for panels and lists, `md` for pages (default) */
+    size?: 'sm' | 'md';
+    /** Heading element for the title (default h3) */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'p';
+    class?: string;
+    /** Buttons or links under the description */
+    actions?: Snippet;
+    /** Extra content between the description and the actions */
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    icon,
+    size = 'md',
+    headingLevel = 'h3',
+    class: className,
+    actions,
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class={cn(
+    'mx-auto flex w-full flex-col items-center text-center',
+    size === 'sm' ? 'max-w-xs gap-2 px-4 py-6' : 'max-w-md gap-3 px-6 py-12',
+    className
+  )}
+>
+  {#if icon}
+    <div
+      class={cn(
+        'flex items-center justify-center rounded-full bg-muted text-muted-foreground',
+        size === 'sm' ? 'mb-1 h-10 w-10' : 'mb-2 h-12 w-12'
+      )}
+      aria-hidden="true"
+    >
+      <Icon name={icon} size={size === 'sm' ? 20 : 24} />
+    </div>
+  {/if}
+  <svelte:element
+    this={headingLevel}
+    class={cn('font-semibold text-foreground', size === 'sm' ? 'text-sm' : 'text-base')}
+  >
+    {title}
+  </svelte:element>
+  {#if description}
+    <p class={cn('text-muted-foreground', size === 'sm' ? 'text-xs' : 'text-sm')}>
+      {description}
+    </p>
+  {/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}
+    <div class="mt-2 flex flex-wrap items-center justify-center gap-2">{@render actions()}</div>
+  {/if}
+</div>

package/dist/lib/components/EmptyState.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from './Icon.svelte';
+interface Props {
+    title: string;
+    description?: string;
+    /** Icon shown above the title in a muted circle */
+    icon?: IconName;
+    /** `sm` for panels and lists, `md` for pages (default) */
+    size?: 'sm' | 'md';
+    /** Heading element for the title (default h3) */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'p';
+    class?: string;
+    /** Buttons or links under the description */
+    actions?: Snippet;
+    /** Extra content between the description and the actions */
+    children?: Snippet;
+}
+/**
+ * A centred placeholder for a view with nothing to show yet: an icon, a
+ * title, an optional description and actions (e.g. a "Create" button).
+ */
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/lib/components/Input.svelte

@@ -24,6 +24,8 @@
     /** Whether the input has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & { currentTarget: HTMLInputElement }) => void;
     [key: string]: unknown;
   }
 
@@ -44,6 +46,7 @@
     'aria-describedby': ariaDescribedby,
     'aria-invalid': ariaInvalid,
     onValueChange,
+    oninput,
     ...restProps
   }: Props = $props();
 
@@ -62,6 +65,7 @@
     const target = e.target as HTMLInputElement;
     value = target.value;
     onValueChange?.(target.value);
+    oninput?.(e as Event & { currentTarget: HTMLInputElement });
   }
 </script>
 

package/dist/lib/components/Input.svelte.d.ts

@@ -20,6 +20,10 @@ interface Props {
     /** Whether the input has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
     [key: string]: unknown;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;