@classic-homes/theme-svelte 1.37.0 → 1.38.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/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/Select.svelte

@@ -51,6 +51,8 @@
      * renders one once there are at least that many options.
      */
     searchable?: boolean | number;
+    /** With `searchable`: render at most this many matches (see Combobox) */
+    maxResults?: number;
   }
 
   let {
@@ -69,6 +71,7 @@
     'aria-label': ariaLabelProp,
     'aria-labelledby': ariaLabelledby,
     searchable = false,
+    maxResults,
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
@@ -291,6 +294,7 @@
     {id}
     {error}
     {hint}
+    {maxResults}
     aria-label={ariaLabelProp}
     aria-labelledby={ariaLabelledby}
     class={className}

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

@@ -41,6 +41,8 @@ interface Props {
      * renders one once there are at least that many options.
      */
     searchable?: boolean | number;
+    /** With `searchable`: render at most this many matches (see Combobox) */
+    maxResults?: number;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/lib/index.d.ts

@@ -41,6 +41,7 @@ export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as AppLauncher, type AppLauncherItem } from './components/AppLauncher.svelte';
 export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
 export { default as DataPanel } from './components/DataPanel.svelte';

package/dist/lib/index.js

@@ -49,6 +49,7 @@ export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as AppLauncher } from './components/AppLauncher.svelte';
 export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
 // DataPanel Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",