@lyeve-labs/ui-kit 0.22.1 → 0.22.2

package/dist/components/dialog/ConfirmDialog.svelte

@@ -42,6 +42,9 @@
   let confirmLabel = $derived(
     typeof entry.meta?.confirmLabel === 'string' ? entry.meta.confirmLabel : 'Confirm',
   );
+  // An identifier the message refers to. Set apart in monospace on its own
+  // line rather than inside the sentence, where a UUID wraps mid-string.
+  let detail = $derived(typeof entry.meta?.confirmDetail === 'string' ? entry.meta.confirmDetail : '');
 
   async function handleConfirm() {
     if (loading) return;
@@ -80,12 +83,16 @@
       {#if message}
         <p class="text-sm text-muted mt-1">{message}</p>
       {/if}
+      {#if detail}
+        <p class="mt-2 break-all font-mono text-xs text-faint">{detail}</p>
+      {/if}
     </div>
   </div>
 
-  <!-- Actions -->
+  <!-- Actions. Cancel takes focus first: a destructive dialog must not
+       accept an Enter pressed before it was read. -->
   <div class="flex items-center justify-end gap-3 pt-2">
-    <Button variant="secondary" size="sm" onclick={handleCancel}>
+    <Button variant="secondary" size="sm" onclick={handleCancel} data-initial-focus>
       {cancelLabel}
     </Button>
     <Button variant="danger" size="sm" onclick={handleConfirm} {loading}>

package/dist/components/dialog/Dialog.svelte

@@ -137,34 +137,39 @@
     tabindex="-1"
     onkeydown={handleKeydown}
   >
-    <!-- Header -->
-    <div class="flex items-center justify-between px-6 pt-6 pb-2">
-      <div class="flex-1 min-w-0">
-        {#if entry.options.title && entry.meta?.confirmTitle === undefined}
-          {#if typeof entry.options.title === 'string'}
-            <h2 class="text-lg font-semibold text-fg truncate">
-              {entry.options.title}
-            </h2>
-          {:else}
-            {@render entry.options.title()}
+    <!-- Header. A confirm dialog has none: it renders its own title beside
+         the warning icon and offers Cancel, so a header here was an empty row
+         with a close control in it, and that control was the first thing
+         focused. Escape still dismisses. -->
+    {#if entry.meta?.confirmTitle === undefined}
+      <div class="flex items-center justify-between px-6 pt-6 pb-2">
+        <div class="flex-1 min-w-0">
+          {#if entry.options.title}
+            {#if typeof entry.options.title === 'string'}
+              <h2 class="text-lg font-semibold text-fg truncate">
+                {entry.options.title}
+              </h2>
+            {:else}
+              {@render entry.options.title()}
+            {/if}
           {/if}
-        {/if}
-      </div>
+        </div>
 
-      {#if !entry.options.persistent}
-        <button
-          class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
+        {#if !entry.options.persistent}
+          <button
+            class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
 						text-muted hover:text-fg hover:bg-surface-2 transition-colors duration-150 shrink-0"
-          onclick={() => handleClose()}
-          aria-label="Close"
-        >
-          <X class="w-4 h-4" />
-        </button>
-      {/if}
-    </div>
+            onclick={() => handleClose()}
+            aria-label="Close"
+          >
+            <X class="w-4 h-4" />
+          </button>
+        {/if}
+      </div>
+    {/if}
 
     <!-- Body -->
-    <div class="px-6 py-2">
+    <div class={entry.meta?.confirmTitle === undefined ? 'px-6 py-2' : 'px-6 pt-6 pb-2'}>
       {#if entry.options.body}
         {@render entry.options.body()}
       {:else if entry.meta?.confirmTitle !== undefined}

package/dist/components/dialog/dialog-manager.svelte.d.ts

@@ -55,6 +55,12 @@ export interface ConfirmOptions {
     confirmLabel?: string;
     /** The verb on the dismissing button. Defaults to `Cancel`. */
     cancelLabel?: string;
+    /**
+     * An identifier the message refers to, such as the id of the record about
+     * to be deleted. Rendered on its own line in monospace, so a UUID never
+     * wraps inside the sentence.
+     */
+    detail?: string;
 }
 /**
  * Convenience: confirm dialog.

package/dist/components/dialog/dialog-manager.svelte.js

@@ -151,6 +151,7 @@ export function confirm(title, message, options) {
         // would be indistinguishable from an override to the empty case.
         ...(options?.confirmLabel !== undefined ? { confirmLabel: options.confirmLabel } : {}),
         ...(options?.cancelLabel !== undefined ? { cancelLabel: options.cancelLabel } : {}),
+        ...(options?.detail !== undefined ? { confirmDetail: options.detail } : {}),
     });
     // Cancelling a dialog dismisses it, and dismissal rejects. Callers write
     // `if (await confirm(...))`, so a rejection on Cancel is an unhandled

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.22.1";
+export declare const VERSION = "0.22.2";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.22.1';
+export const VERSION = '0.22.2';

package/dist/internal/overlay.js

@@ -50,9 +50,13 @@ function focusable(node) {
 export function overlay(node) {
     const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     lockBodyScroll();
-    // A panel with nothing focusable still has to receive focus, or the screen
-    // reader stays on the element behind the overlay and reads the wrong thing.
-    const first = focusable(node)[0];
+    // A panel may name where focus lands with data-initial-focus: a confirm
+    // dialog puts it on Cancel, so that Enter on a dialog a person has not read
+    // yet does nothing, and the close control is never the first thing focused.
+    // Otherwise the first focusable element takes it. A panel with nothing
+    // focusable still has to receive focus, or the screen reader stays on the
+    // element behind the overlay and reads the wrong thing.
+    const first = node.querySelector('[data-initial-focus]') ?? focusable(node)[0];
     if (first) {
         first.focus();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",