@lyeve-labs/ui-kit 0.11.2 → 0.13.0

package/dist/components/Tooltip.svelte

@@ -13,6 +13,9 @@
   let { text, position = 'top', class: cls = '', children }: Props = $props();
 
   let visible = $state(false);
+  let wrapper = $state<HTMLElement>();
+
+  const id = $props.id();
 
   const pos: Record<Position, string> = {
     top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
@@ -20,25 +23,58 @@
     left: 'right-full top-1/2 -translate-y-1/2 mr-2',
     right: 'left-full top-1/2 -translate-y-1/2 ml-2',
   };
+
+  /**
+   * `role="tooltip"` on its own is inert: assistive technology reads a tooltip
+   * only because the element it describes points at it. The trigger arrives as
+   * a snippet, so the component cannot put the attribute on it at compile time
+   * and wires it to the first focusable descendant instead. Without this the
+   * text was visible to a sighted mouse user and to nobody else.
+   */
+  $effect(() => {
+    const trigger = wrapper?.querySelector<HTMLElement>(
+      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    if (!trigger) return;
+    trigger.setAttribute('aria-describedby', id);
+    return () => trigger.removeAttribute('aria-describedby');
+  });
+
+  function onkeydown(e: KeyboardEvent) {
+    // SC 1.4.13 requires content shown on hover or focus to be dismissible
+    // without moving the pointer or the focus.
+    if (e.key === 'Escape' && visible) {
+      e.stopPropagation();
+      visible = false;
+    }
+  }
 </script>
 
+<!-- focusin and focusout, not focus and blur. focus and blur do not bubble, so
+     bound to this wrapper they never fired for the trigger inside it and the
+     tooltip was unreachable by keyboard. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
+  bind:this={wrapper}
   class="relative inline-flex {cls}"
   onmouseenter={() => (visible = true)}
   onmouseleave={() => (visible = false)}
-  onfocus={() => (visible = true)}
-  onblur={() => (visible = false)}
+  onfocusin={() => (visible = true)}
+  onfocusout={() => (visible = false)}
+  {onkeydown}
 >
   {@render children()}
-  {#if visible}
-    <span
-      role="tooltip"
-      class="pointer-events-none absolute {pos[position]} z-50
-        whitespace-nowrap rounded-lg border border-line bg-surface-2
-        px-2.5 py-1.5 text-xs text-fg shadow-xl"
-    >
-      {text}
-    </span>
-  {/if}
+  <!-- Always rendered, hidden by the `hidden` attribute rather than removed:
+       aria-describedby resolves the text of a hidden element, so the trigger
+       keeps a stable target. Left hoverable rather than pointer-events-none, so
+       moving onto it does not dismiss it, which SC 1.4.13 also requires. -->
+  <span
+    {id}
+    role="tooltip"
+    hidden={!visible}
+    class="absolute {pos[position]} z-50 max-w-[min(16rem,calc(100vw-2rem))]
+      rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-xl"
+  >
+    {text}
+  </span>
 </span>

package/dist/components/TreeView.svelte

@@ -0,0 +1,339 @@
+<script lang="ts" generics="T = unknown">
+  import { ChevronRight } from '@lucide/svelte';
+  import { CHOICE_MARK, choiceBox } from '../internal/choice.js';
+  import {
+    branchState,
+    flattenTree,
+    isBranch,
+    toggleSubtree,
+    type TreeNode,
+    type TriState,
+  } from '../internal/tree.js';
+
+  interface Props {
+    nodes: TreeNode<T>[];
+    /** Required. An unnamed tree announces as just "tree". */
+    label: string;
+    expanded?: string[];
+    selected?: string;
+    /** Checked LEAF ids only. A branch's state is always derived, never stored, so the two cannot disagree. */
+    checked?: string[];
+    checkable?: boolean;
+    class?: string;
+    onactivate?: (node: TreeNode<T>) => void;
+    oncheck?: (checked: string[]) => void;
+  }
+
+  let {
+    nodes,
+    label,
+    expanded = $bindable([]),
+    selected = $bindable(undefined),
+    checked = $bindable([]),
+    checkable = false,
+    class: klass = '',
+    onactivate,
+    oncheck,
+  }: Props = $props();
+
+  let rootEl: HTMLUListElement | undefined = $state();
+
+  /** The row the roving tabindex sits on. Undefined until the user lands somewhere. */
+  let activeId: string | undefined = $state(undefined);
+
+  const expandedSet = $derived(new Set(expanded));
+  const checkedSet = $derived(new Set(checked));
+
+  /**
+   * The visible rows, which is both the paint order and the arrow-key order.
+   * A collapsed branch contributes no children here, so ArrowDown cannot land
+   * on a row the user cannot see.
+   */
+  const rows = $derived(flattenTree(nodes, expandedSet));
+
+  /**
+   * Exactly one row is in the tab sequence, and the arrows move it.
+   *
+   * A tree is one stop, not one stop per row: a hundred-node tree with a
+   * tabbable row each is a hundred presses to get past. The fallback chain
+   * matters as much as the rule. The active row can be gone after a collapse
+   * or a data change, so the tabbable row falls back to the selected row and
+   * then to the first, and a tree with no row the keyboard can reach is a tree
+   * nobody can enter.
+   */
+  const tabbableId = $derived(
+    rows.find((r) => r.node.id === activeId)?.node.id ??
+      rows.find((r) => r.node.id === selected)?.node.id ??
+      rows[0]?.node.id,
+  );
+
+  /** Typeahead buffer. Not state: nothing renders it, and it clears on a timer. */
+  let typed = '';
+  let typedTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => () => clearTimeout(typedTimer));
+
+  function ariaChecked(state: TriState): 'true' | 'false' | 'mixed' {
+    if (state === 'all') return 'true';
+    return state === 'some' ? 'mixed' : 'false';
+  }
+
+  function rowPaint(isSelected: boolean, disabled: boolean): string {
+    // One utility per property in each branch. A resting `hover:bg-surface-2`
+    // that a selected row overrides with `bg-surface-2` resolves by the order
+    // Tailwind emits the two, not by the order they are written here.
+    if (disabled) return 'cursor-not-allowed opacity-50';
+    return isSelected
+      ? 'cursor-pointer bg-surface-2 font-medium text-brand'
+      : 'cursor-pointer hover:bg-surface-2';
+  }
+
+  function rowElement(id: string): HTMLElement | undefined {
+    if (!rootEl) return undefined;
+    return [...rootEl.querySelectorAll<HTMLElement>('[role="treeitem"]')].find(
+      (el) => el.dataset.treeId === id,
+    );
+  }
+
+  function focusRow(id: string | undefined): void {
+    if (id === undefined) return;
+    activeId = id;
+    rowElement(id)?.focus();
+  }
+
+  function setOpen(node: TreeNode<T>, open: boolean): void {
+    if (!isBranch(node)) return;
+    const next = new Set(expanded);
+    if (open) next.add(node.id);
+    else next.delete(node.id);
+    expanded = [...next];
+  }
+
+  function toggleOpen(node: TreeNode<T>): void {
+    setOpen(node, !expandedSet.has(node.id));
+  }
+
+  function activate(node: TreeNode<T>): void {
+    if (node.disabled) return;
+    selected = node.id;
+    onactivate?.(node);
+  }
+
+  function toggleCheck(node: TreeNode<T>): void {
+    if (!checkable || node.disabled) return;
+    const next = new Set(checked);
+    const { add, remove } = toggleSubtree(node, next);
+    // A branch with no enabled leaf has nothing to write, and reporting a
+    // change that did not happen is how a consumer ends up saving a list it was
+    // never given.
+    if (add.length === 0 && remove.length === 0) return;
+    for (const id of add) next.add(id);
+    for (const id of remove) next.delete(id);
+    checked = [...next];
+    oncheck?.(checked);
+  }
+
+  function typeahead(key: string, fromId: string): void {
+    clearTimeout(typedTimer);
+    typedTimer = setTimeout(() => {
+      typed = '';
+    }, 500);
+    typed += key.toLowerCase();
+
+    const start = rows.findIndex((r) => r.node.id === fromId);
+    // A single character looks past the current row, so pressing it again walks
+    // the matches. A longer buffer includes the current row, or refining a
+    // search on the row it already found would jump off it.
+    const from = typed.length === 1 ? start + 1 : start;
+    for (let step = 0; step < rows.length; step++) {
+      const candidate = rows[(from + step + rows.length) % rows.length];
+      if (candidate.node.label.toLowerCase().startsWith(typed)) {
+        focusRow(candidate.node.id);
+        return;
+      }
+    }
+  }
+
+  function onRowClick(e: MouseEvent, node: TreeNode<T>): void {
+    const target = e.target as Element | null;
+    // Every row is nested inside its ancestors, so a click on a child bubbles
+    // through all of them. A row answers only for a target that is its own.
+    if (!target || target.closest('[role="treeitem"]') !== e.currentTarget) return;
+
+    activeId = node.id;
+    if (target.closest('[data-tree-toggle]')) {
+      toggleOpen(node);
+      return;
+    }
+    if (checkable && target.closest('[data-tree-check]')) {
+      toggleCheck(node);
+      return;
+    }
+    // A branch that does not open when its row is clicked reads as broken, so
+    // the row body opens it as well as activating it.
+    if (isBranch(node)) toggleOpen(node);
+    activate(node);
+  }
+
+  function onRowKeydown(e: KeyboardEvent, node: TreeNode<T>, parentId: string | undefined): void {
+    // Keydown bubbles the same way a click does, and only the focused row is
+    // the target.
+    if (e.target !== e.currentTarget) return;
+
+    const index = rows.findIndex((r) => r.node.id === node.id);
+    const open = expandedSet.has(node.id);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        focusRow(rows[index + 1]?.node.id);
+        return;
+      case 'ArrowUp':
+        e.preventDefault();
+        focusRow(rows[index - 1]?.node.id);
+        return;
+      case 'Home':
+        e.preventDefault();
+        focusRow(rows[0]?.node.id);
+        return;
+      case 'End':
+        e.preventDefault();
+        focusRow(rows[rows.length - 1]?.node.id);
+        return;
+      case 'ArrowRight':
+        e.preventDefault();
+        // Opening and descending are two presses. The first press has to leave
+        // focus where it is, or a screen reader announces the child before its
+        // parent has said it is now open.
+        if (!isBranch(node)) return;
+        if (!open) setOpen(node, true);
+        else focusRow(node.children?.[0]?.id);
+        return;
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (isBranch(node) && open) setOpen(node, false);
+        else focusRow(parentId);
+        return;
+      case 'Enter':
+        e.preventDefault();
+        activate(node);
+        return;
+      case ' ':
+        // Space never reaches the typeahead below. One key that both toggles a
+        // check and activates a row leaves the user unable to do either on
+        // purpose, so a checkable tree gives Space to the check and keeps
+        // Enter for activation.
+        e.preventDefault();
+        if (checkable) toggleCheck(node);
+        else activate(node);
+        return;
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          e.preventDefault();
+          typeahead(e.key, node.id);
+        }
+    }
+  }
+</script>
+
+{#snippet branch(list: TreeNode<T>[], depth: number, parentId: string | undefined)}
+  {#each list as node, i (node.id)}
+    {@const open = expandedSet.has(node.id)}
+    {@const state = branchState(node, checkedSet)}
+    <!--
+      The focus ring is stated once, on the element that holds the role and the
+      focus, and outside every selected and checked branch. A ring inside the
+      selected ternary disappears in the state it was meant to mark, and a
+      selected row already carries a brand text colour that a border-only focus
+      state would have nothing to add to. Inset, because a tree of any size
+      lives in a scrolling container that would crop an outset ring.
+    -->
+    <li
+      role="treeitem"
+      data-tree-id={node.id}
+      tabindex={node.id === tabbableId ? 0 : -1}
+      aria-level={depth + 1}
+      aria-setsize={list.length}
+      aria-posinset={i + 1}
+      aria-expanded={isBranch(node) ? open : undefined}
+      aria-selected={selected === node.id}
+      aria-checked={checkable ? ariaChecked(state) : undefined}
+      aria-disabled={node.disabled ? 'true' : undefined}
+      class="rounded-md outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+      onclick={(e) => onRowClick(e, node)}
+      onkeydown={(e) => onRowKeydown(e, node, parentId)}
+      onfocus={() => (activeId = node.id)}
+    >
+      <!--
+        Indentation is a style attribute reading the spacing tokens. A class
+        built by interpolating the depth matches no candidate in Tailwind's
+        scan, so no rule is generated and every row draws flush left.
+      -->
+      <div
+        class="flex w-full items-center gap-2 rounded-md py-1.5 pr-2 text-sm transition-colors duration-150 {rowPaint(
+          selected === node.id,
+          !!node.disabled,
+        )}"
+        style="padding-left: calc(var(--spacing-inline) + {depth} * var(--spacing-stack))"
+      >
+        {#if isBranch(node)}
+          <span
+            data-tree-toggle
+            class="flex h-4 w-4 shrink-0 items-center justify-center text-faint"
+          >
+            <ChevronRight
+              size={14}
+              class="transition-transform duration-150 {open ? 'rotate-90' : ''}"
+            />
+          </span>
+        {:else}
+          <span class="h-4 w-4 shrink-0"></span>
+        {/if}
+
+        {#if checkable}
+          <!--
+            A painted box rather than an input: the treeitem itself carries
+            aria-checked, and a focusable control inside the row would put a
+            second tab stop in a widget whose whole point is that it has one.
+          -->
+          <span data-tree-check class="flex shrink-0 items-center">
+            <span class={choiceBox('checkbox', 'sm', state === 'all', state === 'some')}>
+              {#if state !== 'none'}
+                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
+                  <path
+                    d={state === 'all' ? CHOICE_MARK.check : CHOICE_MARK.mixed}
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              {/if}
+            </span>
+          </span>
+        {/if}
+
+        {#if node.icon}
+          {@const Icon = node.icon}
+          <Icon size={14} class="shrink-0 text-faint" />
+        {/if}
+
+        <span class="truncate">{node.label}</span>
+
+        {#if node.badge !== undefined}
+          <span class="ml-auto shrink-0 pl-2 text-xs text-faint">{node.badge}</span>
+        {/if}
+      </div>
+
+      {#if isBranch(node) && open}
+        <ul role="group">
+          {@render branch(node.children ?? [], depth + 1, node.id)}
+        </ul>
+      {/if}
+    </li>
+  {/each}
+{/snippet}
+
+<ul bind:this={rootEl} role="tree" aria-label={label} class="text-fg select-none {klass}">
+  {@render branch(nodes, 0, undefined)}
+</ul>

package/dist/components/TreeView.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type TreeNode } from '../internal/tree.js';
+declare function $$render<T = unknown>(): {
+    props: {
+        nodes: TreeNode<T>[];
+        /** Required. An unnamed tree announces as just "tree". */
+        label: string;
+        expanded?: string[];
+        selected?: string;
+        /** Checked LEAF ids only. A branch's state is always derived, never stored, so the two cannot disagree. */
+        checked?: string[];
+        checkable?: boolean;
+        class?: string;
+        onactivate?: (node: TreeNode<T>) => void;
+        oncheck?: (checked: string[]) => void;
+    };
+    exports: {};
+    bindings: "expanded" | "selected" | "checked";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "expanded" | "selected" | "checked";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeView: $$IsomorphicComponent;
+type TreeView<T = unknown> = InstanceType<typeof TreeView<T>>;
+export default TreeView;

package/dist/components/dialog/Dialog.svelte

@@ -9,15 +9,14 @@
    * Not meant to be used directly - use openDialog() from dialog-manager.
    */
   import { X } from '@lucide/svelte';
-  import { onMount, tick } from 'svelte';
+  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { DialogEntry } from './types.js';
   import { sizeClass } from './types.js';
+  import { overlay } from '../../internal/overlay.js';
   import {
     closeDialog,
     dismissDialog,
-    _lockBodyScroll,
-    _unlockBodyScroll,
   } from './dialog-manager.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
 
@@ -45,45 +44,18 @@
   // ──────────────────────────────────────────────────────
 
   let dialogEl = $state<HTMLDivElement>();
-  let previousFocus = $state<HTMLElement | null>(null);
-  let focusableSelector =
-    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
   // ──────────────────────────────────────────────────────
   // Lifecycle
   // ──────────────────────────────────────────────────────
 
+  // Focus entry, the Tab trap, the body scroll lock and focus restore all come
+  // from `use:overlay` on the panel below, which is the same implementation
+  // Modal and Drawer use. This is only the enter animation.
   onMount(() => {
-    // Save previously focused element for restore on unmount
-    const el = document.activeElement;
-    previousFocus = el instanceof HTMLElement ? el : null;
-
-    // Trigger enter animation on next frame
     requestAnimationFrame(() => {
       visible = true;
     });
-
-    // Focus trap: focus first focusable element, or the dialog itself
-    tick().then(() => {
-      if (dialogEl) {
-        const focusable = dialogEl.querySelectorAll(focusableSelector);
-        if (focusable.length > 0) {
-          (focusable[0] as HTMLElement).focus();
-        } else {
-          dialogEl.focus();
-        }
-      }
-    });
-
-    // Lock body scroll (counter-based: only unlock when no dialogs remain)
-    _lockBodyScroll();
-    const unlock = () => _unlockBodyScroll();
-
-    return () => {
-      unlock();
-      // Restore focus
-      previousFocus?.focus?.();
-    };
   });
 
   // ──────────────────────────────────────────────────────
@@ -104,30 +76,6 @@
         handleDismiss();
       }
     }
-
-    // Focus trap
-    if (e.key === 'Tab' && dialogEl) {
-      const focusable = dialogEl.querySelectorAll(focusableSelector);
-      if (focusable.length === 0) {
-        e.preventDefault();
-        return;
-      }
-
-      const first = focusable[0] as HTMLElement;
-      const last = focusable[focusable.length - 1] as HTMLElement;
-
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    }
   }
 
   async function handleDismiss(): Promise<void> {
@@ -145,7 +93,15 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="fixed inset-0 z-[{zIndex}] flex items-center justify-center" role="presentation">
+<!-- z-index is an inline style, not a `z-[...]` class. Tailwind scans source text
+     for complete class names, so a class built from a runtime value matches no
+     candidate and no rule is ever generated: every stacked dialog rendered at
+     `z-index: auto` and the stacking order came down to DOM order. -->
+<div
+  class="fixed inset-0 flex items-center justify-center"
+  style="z-index: {zIndex}"
+  role="presentation"
+>
   <!-- Backdrop -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -163,6 +119,7 @@
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <div
     bind:this={dialogEl}
+    use:overlay
     class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
 			bg-surface border border-line rounded-xl shadow-2xl
 			transition-all duration-200 ease-out

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

@@ -15,8 +15,8 @@
  *   if (ok) { /* ... *\/ }
  */
 import type { DialogOptions, DialogEntry } from './types.js';
-export declare function _lockBodyScroll(): void;
-export declare function _unlockBodyScroll(): void;
+import { lockBodyScroll, unlockBodyScroll } from '../../internal/overlay.js';
+export { lockBodyScroll as _lockBodyScroll, unlockBodyScroll as _unlockBodyScroll };
 /** Readonly snapshot for components */
 export declare function getDialogStack(): readonly DialogEntry<any>[];
 /**

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

@@ -14,6 +14,7 @@
  *   const ok = await confirm('Delete this item?', 'This action cannot be undone.');
  *   if (ok) { /* ... *\/ }
  */
+import { lockBodyScroll, unlockBodyScroll } from '../../internal/overlay.js';
 // ──────────────────────────────────────────────────────────
 // Module-level reactive state
 // ──────────────────────────────────────────────────────────
@@ -23,22 +24,13 @@ let stack = $state([]);
 // ──────────────────────────────────────────────────────────
 // Body scroll lock (counter-based - handles stacked dialogs)
 // ──────────────────────────────────────────────────────────
-let bodyLockCount = 0;
-export function _lockBodyScroll() {
-    bodyLockCount++;
-    if (typeof document !== 'undefined') {
-        document.body.style.overflow = 'hidden';
-    }
-}
-export function _unlockBodyScroll() {
-    bodyLockCount--;
-    if (bodyLockCount <= 0) {
-        bodyLockCount = 0;
-        if (typeof document !== 'undefined') {
-            document.body.style.overflow = '';
-        }
-    }
-}
+/*
+ * The count lives in internal/overlay.ts, which is also what Modal and Drawer
+ * lock through. Two counters meant a Dialog opened over a Drawer restored
+ * scrolling to the page as soon as either one closed, because each believed it
+ * held the only lock.
+ */
+export { lockBodyScroll as _lockBodyScroll, unlockBodyScroll as _unlockBodyScroll };
 /** Readonly snapshot for components */
 export function getDialogStack() {
     return stack;
@@ -132,10 +124,9 @@ export function dismissDialog(id) {
 export function dismissAllDialogs() {
     const copy = [...stack];
     stack = [];
-    bodyLockCount = 0;
-    if (typeof document !== 'undefined') {
-        document.body.style.overflow = '';
-    }
+    // The manager never locks. Each overlay takes one lock on mount and releases
+    // it on unmount, so clearing the stack unmounts the dialogs and the count
+    // unwinds itself. Zeroing it here released locks a Modal or Drawer still held.
     for (const entry of copy) {
         entry.reject(new DOMException('All dialogs dismissed', 'AbortError'));
     }
@@ -150,7 +141,16 @@ export function confirm(title, message) {
     const id = `confirm-${++idCounter}`;
     const promise = openDialog({ id, size: 'sm', title });
     setDialogMeta(id, { confirmTitle: title, confirmMessage: message ?? '' });
-    return promise;
+    // Cancelling a dialog dismisses it, and dismissal rejects. Callers write
+    // `if (await confirm(...))`, so a rejection on Cancel is an unhandled
+    // rejection on the ordinary path rather than an error anyone meant to
+    // handle. Cancel is an answer, not a failure: it resolves false, which is
+    // what this function has always documented.
+    return promise.catch((err) => {
+        if (err instanceof DOMException && err.name === 'AbortError')
+            return false;
+        throw err;
+    });
 }
 /**
  * Set metadata on a dialog entry after it's opened.