@lostgradient/cinder 0.4.0 → 0.5.0

package/src/components/toast-region/toast-region.examples.json

@@ -7,73 +7,73 @@
       "id": "action-button",
       "title": "Action button",
       "description": "Default action dismisses after firing; keepOpen: true keeps the toast visible after the action runs.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let undoCount = $state(0);\n  let pauseCount = $state(0);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Dismiss-after-action\"\n        onclick={() =>\n          toast.show('Item moved to trash.', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Undo',\n              onAction: () => (undoCount += 1),\n            },\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Keep open after action\"\n        onclick={() =>\n          toast.show('Syncing in the background…', {\n            variant: 'info',\n            duration: 0,\n            action: {\n              label: 'Pause',\n              keepOpen: true,\n              onAction: () => (pauseCount += 1),\n            },\n          })}\n      />\n    </div>\n    <p style=\"margin-top: 0.75rem; font-size: 0.875rem;\">\n      Undo fired: {undoCount} · Pause fired: {pauseCount}\n    </p>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "basic",
       "title": "Basic toast region",
       "description": "Click the trigger to dispatch a transient toast into the live region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Show info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "dismissible",
       "title": "Dismissible sticky toast",
       "description": "duration: 0 keeps the toast until the user dismisses it.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky warning\"\n        variant=\"secondary\"\n        onclick={() =>\n          toast.show('Your session expires in 5 minutes.', {\n            variant: 'warning',\n            duration: 0,\n            dismissible: true,\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "keyboard",
       "title": "Keyboard dismiss",
       "description": "Focus a toast control and press Escape to dismiss the active notification.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show keyboard toast\"\n      onclick={() =>\n        toast.show('Tab to this toast, then press Escape.', {\n          duration: 0,\n          action: {\n            label: 'Action',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "modal-scoped",
       "title": "Modal-scoped region",
       "description": "Nest <ToastRegion> inside a Modal to scope toasts to the modal content. When the modal body unmounts on close, the region tears down with it and pending timers are cleared.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { Modal } from '@lostgradient/cinder/modal';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let open = $state(false);\n  let triggerRef: HTMLElement | null = $state(null);\n</script>\n\n<Button\n  label=\"Open modal\"\n  onclick={(event) => {\n    triggerRef = event.currentTarget;\n    open = true;\n  }}\n/>\n\n<Modal bind:open title=\"Modal-scoped toasts\" {triggerRef}>\n  <ToastRegion>\n    {#snippet children()}\n      {@const toast = useToast()}\n      <p>\n        Toasts dispatched here belong to this modal's region. When the modal closes, its region\n        unmounts and any active toasts are torn down.\n      </p>\n      <div class=\"example-preview-row\">\n        <Button\n          label=\"Show success\"\n          onclick={() => toast.show('Saved inside the modal.', { variant: 'success' })}\n        />\n        <Button\n          variant=\"danger\"\n          label=\"Show danger\"\n          onclick={() => toast.show('Something went wrong.', { variant: 'danger' })}\n        />\n      </div>\n    {/snippet}\n  </ToastRegion>\n  {#snippet footer()}\n    <div style=\"display: flex; gap: 0.5rem; justify-content: flex-end;\">\n      <Button variant=\"secondary\" label=\"Close\" onclick={() => (open = false)} />\n    </div>\n  {/snippet}\n</Modal>\n"
     },
     {
       "id": "pause-on-hover",
       "title": "Pause on hover",
       "description": "Pointer hover and keyboard focus pause auto-dismiss for the whole stack.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion defaultDuration={2500}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show timed toast\"\n      onclick={() =>\n        toast.show('Hover or focus the stack to pause this countdown.', {\n          action: {\n            label: 'Keep',\n            keepOpen: true,\n            onAction: () => {},\n          },\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "positions",
       "title": "Positions",
       "description": "Anchor the toast region to any viewport corner or horizontal center.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  import type { ToastPosition } from '@lostgradient/cinder/toast-region';\n\n  const positions: ToastPosition[] = [\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-left',\n    'bottom-center',\n    'bottom-right',\n  ];\n\n  let position: ToastPosition = $state('bottom-right');\n</script>\n\n<ToastRegion {position}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      {#each positions as nextPosition}\n        <Button\n          size=\"sm\"\n          variant={position === nextPosition ? 'primary' : 'secondary'}\n          label={nextPosition}\n          onclick={() => {\n            position = nextPosition;\n            toast.show(`Position: ${nextPosition}`, { id: 'position-demo' });\n          }}\n        />\n      {/each}\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "programmatic-dismiss",
       "title": "Programmatic dismiss",
       "description": "show() returns the toast id. Capture it to dismiss a specific toast, or call dismissAll() to clear both stacks.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n  let lastId: string | null = $state(null);\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Show sticky\"\n        onclick={() => {\n          lastId = toast.show('Sticky toast — dismiss me programmatically.', {\n            variant: 'info',\n            duration: 0,\n          });\n        }}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Dismiss last\"\n        onclick={() => {\n          if (lastId) {\n            toast.dismiss(lastId);\n            lastId = null;\n          }\n        }}\n      />\n      <Button variant=\"secondary\" label=\"Dismiss all\" onclick={() => toast.dismissAll()} />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "promise",
       "title": "Promise",
       "description": "Show a sticky loading toast that resolves into success or danger output.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  function waitThen<T>(value: T, reject = false) {\n    return new Promise<T>((resolve, rejectPromise) => {\n      setTimeout(() => {\n        if (reject) {\n          rejectPromise(new Error('Sync failed.'));\n        } else {\n          resolve(value);\n        }\n      }, 900);\n    });\n  }\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Resolve\"\n        onclick={() =>\n          toast.promise(waitThen('profile'), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: (value) => `Saved ${value}.`,\n            error: 'Save failed.',\n          })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Reject\"\n        onclick={() =>\n          toast.promise(waitThen('profile', true), {\n            id: 'profile-sync',\n            loading: 'Saving profile...',\n            success: 'Saved profile.',\n            error: (error) => (error instanceof Error ? error.message : 'Save failed.'),\n          })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "stacking",
       "title": "Stacking",
       "description": "Rapid notifications stack with bounded overflow and visual depth.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n\n  let count = $state(0);\n</script>\n\n<ToastRegion maxStack={5} defaultDuration={0}>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Add five toasts\"\n      onclick={() => {\n        for (let index = 0; index < 5; index += 1) {\n          count += 1;\n          toast.show(`Stacked notification ${count}`, {\n            variant: index % 2 === 0 ? 'info' : 'success',\n          });\n        }\n      }}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "swipe-to-dismiss",
       "title": "Swipe to dismiss",
       "description": "Dismiss a toast by dragging it horizontally past the threshold.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <Button\n      label=\"Show swipe toast\"\n      onclick={() =>\n        toast.show('Drag this notification left or right to dismiss it.', {\n          duration: 0,\n        })}\n    />\n  {/snippet}\n</ToastRegion>\n"
     },
     {
       "id": "variants",
       "title": "All four variants",
       "description": "info and success route to the polite (status) region; warning and danger route to the assertive (alert) region.",
-      "code": "<script lang=\"ts\">\n  import { useToast } from '@lostgradient/cinder';\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
+      "code": "<script lang=\"ts\">\n  import { Button } from '@lostgradient/cinder/button';\n  import { ToastRegion, useToast } from '@lostgradient/cinder/toast-region';\n</script>\n\n<ToastRegion>\n  {#snippet children()}\n    {@const toast = useToast()}\n    <div class=\"example-preview-row\">\n      <Button\n        label=\"Info\"\n        onclick={() => toast.show('A new version is available.', { variant: 'info' })}\n      />\n      <Button\n        label=\"Success\"\n        onclick={() => toast.show('Saved your changes.', { variant: 'success' })}\n      />\n      <Button\n        variant=\"secondary\"\n        label=\"Warning\"\n        onclick={() => toast.show('Your session expires in 5 minutes.', { variant: 'warning' })}\n      />\n      <Button\n        variant=\"danger\"\n        label=\"Danger\"\n        onclick={() => toast.show('Failed to save your changes.', { variant: 'danger' })}\n      />\n    </div>\n  {/snippet}\n</ToastRegion>\n"
     }
   ]
 }

package/src/components/tooltip/tooltip.svelte

@@ -20,6 +20,7 @@
   import type { Attachment } from 'svelte/attachments';
   import type { Placement } from '@floating-ui/dom';
   import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+  import { pushEscapeHandler } from '../../_internal/overlay.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { createPortalAttachment } from '../portal/index.ts';
 
@@ -51,25 +52,47 @@
 
   let visible = $state(false);
   let showTimer: ReturnType<typeof setTimeout> | undefined;
-  let hasPendingShow = $state(false);
+  let releasePendingEscapeListener: (() => void) | undefined;
   let wrapperElement: HTMLSpanElement | undefined = $state();
   let tooltipElement: HTMLSpanElement | undefined = $state();
   let anchorElement = $state<HTMLElement | null>(null);
 
-  function show() {
+  function releasePendingEscape() {
+    releasePendingEscapeListener?.();
+    releasePendingEscapeListener = undefined;
+  }
+
+  function clearPendingShow() {
     clearTimeout(showTimer);
-    hasPendingShow = true;
+    showTimer = undefined;
+    releasePendingEscape();
+  }
+
+  function handlePendingEscapeKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return;
+    clearPendingShow();
+  }
+
+  function registerPendingEscape() {
+    releasePendingEscape();
+    document.addEventListener('keydown', handlePendingEscapeKeydown, { capture: true });
+    releasePendingEscapeListener = () => {
+      document.removeEventListener('keydown', handlePendingEscapeKeydown, { capture: true });
+    };
+  }
+
+  function show() {
+    clearPendingShow();
+    registerPendingEscape();
     showTimer = setTimeout(() => {
       showTimer = undefined;
-      hasPendingShow = false;
+      releasePendingEscape();
       visible = true;
     }, 100);
   }
 
   function hide() {
-    clearTimeout(showTimer);
-    showTimer = undefined;
-    hasPendingShow = false;
+    clearPendingShow();
     visible = false;
   }
 
@@ -92,10 +115,9 @@
   // WAI-ARIA APG: tooltips must be dismissible via Escape without losing
   // pointer or focus on the trigger. Hide the tooltip but don't blur — the
   // user keeps interacting with the trigger.
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      hide();
-    }
+  function handleEscape(event: KeyboardEvent | undefined = undefined) {
+    hide();
+    event?.preventDefault();
   }
 
   function isFocusableCandidate(element: HTMLElement): boolean {
@@ -163,12 +185,15 @@
   const isTooltipExposed = $derived(visible && anchoredOverlay.positionReady);
 
   $effect(() => {
-    if (!visible && !hasPendingShow) return;
-    document.addEventListener('keydown', handleKeydown);
     return () => {
-      document.removeEventListener('keydown', handleKeydown);
+      clearPendingShow();
     };
   });
+
+  $effect(() => {
+    if (!visible) return;
+    return pushEscapeHandler(handleEscape);
+  });
 </script>
 
 <!--

package/src/components/tree/tree.svelte

@@ -42,6 +42,11 @@
   import type { VirtualItem } from '../../_internal/virtual-item.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { devWarn } from '../../utilities/dev-warn.ts';
+  import {
+    findTypeaheadMatch,
+    isTypeaheadKey,
+    TypeaheadBuffer,
+  } from '../../utilities/typeahead.ts';
   import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
   import {
     deselectIds,
@@ -122,9 +127,7 @@
   // Anchor for shift-select range
   let selectionAnchorId = $state<string | null>(null);
 
-  // Typeahead buffer
-  let typeaheadBuffer = $state('');
-  let typeaheadTimer: ReturnType<typeof setTimeout> | null = null;
+  const typeaheadBuffer = new TypeaheadBuffer();
 
   // Warn once when no accessible label is provided
   let hasWarnedNoLabel = false;
@@ -161,10 +164,7 @@
   // Clear typeahead timer on unmount
   $effect(() => {
     return () => {
-      if (typeaheadTimer !== null) {
-        clearTimeout(typeaheadTimer);
-        typeaheadTimer = null;
-      }
+      typeaheadBuffer.reset();
       if (filterStatusTimer !== null) {
         clearTimeout(filterStatusTimer);
         filterStatusTimer = null;
@@ -900,21 +900,13 @@
     handleTypeahead(char, currentId) {
       if (disableTypeahead) return;
 
-      if (typeaheadTimer !== null) clearTimeout(typeaheadTimer);
-      typeaheadBuffer += char;
-
       const match = registry.typeaheadMatch(
-        typeaheadBuffer,
+        typeaheadBuffer.push(char),
         currentId,
         expandedIds,
         activeVisibilityPredicate,
       );
       if (match) focusNode(match);
-
-      typeaheadTimer = setTimeout(() => {
-        typeaheadBuffer = '';
-        typeaheadTimer = null;
-      }, 500);
     },
     expandSiblings(currentId) {
       const siblings = registry.siblingsOf(currentId);
@@ -1040,34 +1032,22 @@
   }
 
   function handleVirtualizedTypeahead(event: KeyboardEvent): boolean {
-    if (
-      disableTypeahead ||
-      event.key.length !== 1 ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.altKey
-    ) {
+    if (disableTypeahead || !isTypeaheadKey(event)) {
       return false;
     }
 
     event.preventDefault();
-    if (typeaheadTimer !== null) clearTimeout(typeaheadTimer);
-    typeaheadBuffer += event.key.toLowerCase();
-
     const startIndex = currentVirtualIndex();
-    for (let offset = 1; offset <= visibleDataItems.length; offset++) {
-      const index = (startIndex + offset) % visibleDataItems.length;
-      const item = visibleDataItems[index];
-      if (item?.label.toLowerCase().startsWith(typeaheadBuffer)) {
-        void focusVirtualIndex(index);
-        break;
-      }
-    }
-
-    typeaheadTimer = setTimeout(() => {
-      typeaheadBuffer = '';
-      typeaheadTimer = null;
-    }, 500);
+    const match = findTypeaheadMatch(
+      visibleDataItems.map((item, index) => ({
+        value: index,
+        label: item.label,
+        disabled: item.disabled,
+      })),
+      typeaheadBuffer.push(event.key),
+      startIndex,
+    );
+    if (match !== undefined) void focusVirtualIndex(match);
     return true;
   }
 

package/src/highlighters/shiki/index.ts

@@ -47,6 +47,7 @@
 
 import type { Highlighter } from '../../utilities/highlighter.ts';
 import { createRetryingLoaderCache } from '../../utilities/retrying-loader-cache.ts';
+import { stripRootPreTabIndex } from './strip-root-pre-tab-index.ts';
 
 /**
  * Re-exported for backwards compatibility on the public
@@ -108,15 +109,6 @@ function plaintextBlock(code: string): string {
   return `<pre class="shiki shiki-plaintext"><code>${escapeHtml(code)}</code></pre>`;
 }
 
-function stripRootPreTabIndex(html: string): string {
-  const openingPre = /^<pre\b[^>]*>/i.exec(html);
-  if (openingPre === null) return html;
-  return (
-    openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '') +
-    html.slice(openingPre[0].length)
-  );
-}
-
 type CodeToHtmlFunction = typeof import('shiki').codeToHtml;
 type BundledLanguages = typeof import('shiki').bundledLanguages;
 
@@ -125,12 +117,17 @@ type ShikiModule = {
   bundledLanguages: BundledLanguages;
 };
 
+type ShikiModuleLoader = () => Promise<ShikiModule>;
+
 /**
  * Create a Shiki-backed {@link Highlighter} suitable for
  * `<CodeBlock highlighter={...} />`. See module-level JSDoc for the
  * full behavior contract.
  */
-export function shikiHighlighter(options: ShikiHighlighterOptions = {}): Highlighter {
+export function shikiHighlighter(
+  options: ShikiHighlighterOptions = {},
+  moduleLoader?: ShikiModuleLoader,
+): Highlighter {
   const { theme = DEFAULT_THEME, langs } = options;
   const warnedLanguages = new Set<string>();
 
@@ -138,27 +135,30 @@ export function shikiHighlighter(options: ShikiHighlighterOptions = {}): Highlig
   // de-duplicates concurrent loads and evicts rejected promises so a
   // transient import failure does not lock the adapter into the plaintext
   // fallback for the lifetime of this `shikiHighlighter()` instance.
-  const loadShiki = createRetryingLoaderCache(async (): Promise<ShikiModule> => {
-    const module_ = await import('shiki');
-    // Optional preload — if the consumer named specific languages,
-    // force them through `codeToHtml` once so Shiki resolves and
-    // caches them before the first real call. Failures here are
-    // non-fatal; per-call language lookup will still try (and fall
-    // back to plaintext on its own miss).
-    if (langs !== undefined) {
-      for (const lang of langs) {
-        try {
-          await module_.codeToHtml('', { lang, ...buildThemeOption(theme) });
-        } catch {
-          // Swallow — the per-call path below logs and falls back.
+  const loadShiki = createRetryingLoaderCache(
+    moduleLoader ??
+      (async (): Promise<ShikiModule> => {
+        const module_ = await import('shiki');
+        // Optional preload — if the consumer named specific languages,
+        // force them through `codeToHtml` once so Shiki resolves and
+        // caches them before the first real call. Failures here are
+        // non-fatal; per-call language lookup will still try (and fall
+        // back to plaintext on its own miss).
+        if (langs !== undefined) {
+          for (const lang of langs) {
+            try {
+              await module_.codeToHtml('', { lang, ...buildThemeOption(theme) });
+            } catch {
+              // Swallow — the per-call path below logs and falls back.
+            }
+          }
         }
-      }
-    }
-    return {
-      codeToHtml: module_.codeToHtml,
-      bundledLanguages: module_.bundledLanguages,
-    };
-  });
+        return {
+          codeToHtml: module_.codeToHtml,
+          bundledLanguages: module_.bundledLanguages,
+        };
+      }),
+  );
 
   return async function highlight(code: string, lang: string): Promise<string> {
     // Normalize defensively: the documented contract is "empty or missing

package/src/highlighters/shiki/strip-root-pre-tab-index.ts

@@ -0,0 +1,8 @@
+export function stripRootPreTabIndex(html: string): string {
+  const openingPre = /^<pre\b[^>]*>/i.exec(html);
+  if (openingPre === null) return html;
+  return (
+    openingPre[0].replace(/\s+tabindex=(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '') +
+    html.slice(openingPre[0].length)
+  );
+}