@classic-homes/theme-svelte 1.35.0 → 1.37.0

package/dist/lib/components/AppLauncher.svelte

@@ -21,6 +21,7 @@
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
   import Icon from './Icon.svelte';
+  import AppLauncherGrid from './AppLauncherGrid.svelte';
   import { buttonVariants } from './button-variants.js';
 
   /**
@@ -69,29 +70,6 @@
     open = next;
     onOpenChange?.(next);
   }
-
-  /** Arrow keys walk the grid by row and column; Home/End go to the ends. */
-  function handleKeydown(event: KeyboardEvent) {
-    const tiles = Array.from(
-      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-app-launcher-tile]')
-    );
-    const current = tiles.indexOf(document.activeElement as HTMLElement);
-    if (current === -1) return;
-    const last = tiles.length - 1;
-    const step: Record<string, number> = {
-      ArrowRight: 1,
-      ArrowLeft: -1,
-      ArrowDown: columns,
-      ArrowUp: -columns,
-    };
-    let next: number;
-    if (event.key === 'Home') next = 0;
-    else if (event.key === 'End') next = last;
-    else if (event.key in step) next = current + step[event.key];
-    else return;
-    event.preventDefault();
-    tiles[Math.min(Math.max(next, 0), last)].focus();
-  }
 </script>
 
 <Popover.Root bind:open onOpenChange={handleOpenChange}>
@@ -111,46 +89,14 @@
         className
       )}
     >
-      <nav aria-label={title ?? triggerLabel}>
-        {#if title}
-          <p class="px-2 pb-2 pt-1 text-sm font-semibold">{title}</p>
-        {/if}
-        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-        <ul
-          class="grid gap-1"
-          style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
-          onkeydown={handleKeydown}
-        >
-          {#each apps as app (app.id)}
-            <li>
-              <a
-                href={app.href}
-                target={app.external ? '_blank' : undefined}
-                rel={app.external ? 'noopener noreferrer' : undefined}
-                title={app.description}
-                data-app-launcher-tile={app.id}
-                class="flex h-full flex-col items-center gap-1.5 rounded-md px-1 py-3 text-center text-xs font-medium text-foreground hover:bg-muted-hover focus-visible:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                onclick={() => handleOpenChange(false)}
-              >
-                <span
-                  class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
-                  aria-hidden="true"
-                >
-                  {#if icon}
-                    {@render icon(app)}
-                  {:else}
-                    <Icon name={app.icon ?? 'external-link'} size={22} />
-                  {/if}
-                </span>
-                <span class="line-clamp-2 break-words">{app.label}</span>
-                {#if app.external}
-                  <span class="sr-only">(opens in a new tab)</span>
-                {/if}
-              </a>
-            </li>
-          {/each}
-        </ul>
-      </nav>
+      <AppLauncherGrid
+        {apps}
+        label={title ?? triggerLabel}
+        {title}
+        {columns}
+        {icon}
+        onSelect={() => handleOpenChange(false)}
+      />
     </Popover.Content>
   </Popover.Portal>
 </Popover.Root>

package/dist/lib/components/AppLauncherGrid.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { AppLauncherItem } from './AppLauncher.svelte';
+  import Icon from './Icon.svelte';
+
+  /**
+   * AppLauncherGrid - AppLauncher's tile grid on its own, for showing the apps
+   * somewhere other than the header popover (a phone's bottom Sheet, a home
+   * page). Tiles are links; arrow keys walk the grid, Home/End go to the ends.
+   */
+  interface Props {
+    apps: AppLauncherItem[];
+    /** Accessible name of the grid's `nav` */
+    label: string;
+    /** Visible heading above the tiles; none when unset */
+    title?: string;
+    /** Tiles per row (default: 3) */
+    columns?: number;
+    /** Called when a tile is picked, e.g. to close the surface around it */
+    onSelect?: (app: AppLauncherItem) => void;
+    /** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
+    icon?: Snippet<[AppLauncherItem]>;
+    class?: string;
+  }
+
+  let { apps, label, title, columns = 3, onSelect, icon, class: className }: Props = $props();
+
+  /** Arrow keys walk the grid by row and column; Home/End go to the ends. */
+  function handleKeydown(event: KeyboardEvent) {
+    const tiles = Array.from(
+      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-app-launcher-tile]')
+    );
+    const current = tiles.indexOf(document.activeElement as HTMLElement);
+    if (current === -1) return;
+    const last = tiles.length - 1;
+    const step: Record<string, number> = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: columns,
+      ArrowUp: -columns,
+    };
+    let next: number;
+    if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = last;
+    else if (event.key in step) next = current + step[event.key];
+    else return;
+    event.preventDefault();
+    tiles[Math.min(Math.max(next, 0), last)].focus();
+  }
+</script>
+
+<nav aria-label={label} class={className}>
+  {#if title}
+    <p class="px-2 pb-2 pt-1 text-sm font-semibold">{title}</p>
+  {/if}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <ul
+    class="grid gap-1"
+    style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
+    onkeydown={handleKeydown}
+  >
+    {#each apps as app (app.id)}
+      <li>
+        <a
+          href={app.href}
+          target={app.external ? '_blank' : undefined}
+          rel={app.external ? 'noopener noreferrer' : undefined}
+          title={app.description}
+          data-app-launcher-tile={app.id}
+          class="flex h-full flex-col items-center gap-1.5 rounded-md px-1 py-3 text-center text-xs font-medium text-foreground hover:bg-muted-hover focus-visible:bg-muted-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onclick={() => onSelect?.(app)}
+        >
+          <span
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
+            aria-hidden="true"
+          >
+            {#if icon}
+              {@render icon(app)}
+            {:else}
+              <Icon name={app.icon ?? 'external-link'} size={22} />
+            {/if}
+          </span>
+          <span class="line-clamp-2 break-words">{app.label}</span>
+          {#if app.external}
+            <span class="sr-only">(opens in a new tab)</span>
+          {/if}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { AppLauncherItem } from './AppLauncher.svelte';
+/**
+ * AppLauncherGrid - AppLauncher's tile grid on its own, for showing the apps
+ * somewhere other than the header popover (a phone's bottom Sheet, a home
+ * page). Tiles are links; arrow keys walk the grid, Home/End go to the ends.
+ */
+interface Props {
+    apps: AppLauncherItem[];
+    /** Accessible name of the grid's `nav` */
+    label: string;
+    /** Visible heading above the tiles; none when unset */
+    title?: string;
+    /** Tiles per row (default: 3) */
+    columns?: number;
+    /** Called when a tile is picked, e.g. to close the surface around it */
+    onSelect?: (app: AppLauncherItem) => void;
+    /** Draws a tile's icon instead of `item.icon`, e.g. an app's own mark */
+    icon?: Snippet<[AppLauncherItem]>;
+    class?: string;
+}
+declare const AppLauncherGrid: import("svelte").Component<Props, {}, "">;
+type AppLauncherGrid = ReturnType<typeof AppLauncherGrid>;
+export default AppLauncherGrid;

package/dist/lib/components/Dialog.svelte

@@ -41,6 +41,12 @@
      * keeps focus where the caller put it (e.g. a field it just revealed).
      */
     onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Called as the dialog opens, before focus moves to its first focusable
+     * element (often the close button); `preventDefault()` and focus a field
+     * yourself to start somewhere else, e.g. a form's first input.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
     /**
      * Unsaved work inside. When true, an overlay click, Escape or the close
      * button asks "Discard unsaved changes?" instead of closing. Left unset,
@@ -77,6 +83,7 @@
     headerActions,
     showClose = true,
     onCloseAutoFocus,
+    onOpenAutoFocus,
     dirty,
   }: Props = $props();
 
@@ -123,6 +130,7 @@
     <DialogPrimitive.Content
       bind:ref={contentEl}
       {onCloseAutoFocus}
+      {onOpenAutoFocus}
       onInteractOutside={guard.dismiss}
       onEscapeKeydown={guard.escape}
       oninput={guard.track}

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

@@ -35,6 +35,12 @@ interface Props {
      * keeps focus where the caller put it (e.g. a field it just revealed).
      */
     onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Called as the dialog opens, before focus moves to its first focusable
+     * element (often the close button); `preventDefault()` and focus a field
+     * yourself to start somewhere else, e.g. a form's first input.
+     */
+    onOpenAutoFocus?: (event: Event) => void;
     /**
      * Unsaved work inside. When true, an overlay click, Escape or the close
      * button asks "Discard unsaved changes?" instead of closing. Left unset,

package/dist/lib/index.d.ts

@@ -42,6 +42,7 @@ 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 AppLauncher, type AppLauncherItem } from './components/AppLauncher.svelte';
+export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';
 export { default as DataPanelContent } from './components/DataPanelContent.svelte';

package/dist/lib/index.js

@@ -50,6 +50,7 @@ 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 AppLauncher } from './components/AppLauncher.svelte';
+export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
 // DataPanel Components
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';

package/package.json

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