@lostgradient/cinder 0.4.0 → 0.4.1

package/src/components/menu-bar/menu-bar.svelte

@@ -32,6 +32,11 @@
   import { getLocaleContext } from '../../_internal/locale-context.ts';
   import { observeTextDirection, resolveTextDirection } from '../../_internal/text-direction.ts';
   import { classNames } from '../../utilities/class-names.ts';
+  import {
+    findTypeaheadMatch,
+    isTypeaheadKey,
+    TypeaheadBuffer,
+  } from '../../utilities/typeahead.ts';
   import type { DropdownContext } from '../dropdown/dropdown.types.ts';
   import DropdownItem from '../dropdown-item/dropdown-item.svelte';
   import DropdownLabel from '../dropdown-label/dropdown-label.svelte';
@@ -80,8 +85,14 @@
   let initialFocus = $state<'first' | 'last' | 'none' | undefined>(undefined);
   let directionRevision = $state(0);
   let suppressSubmenuFocusOpen = false;
+  let submenuCloseTimer: ReturnType<typeof setTimeout> | null = null;
+  let pendingSubmenuCloseKey: string | null = null;
+  let pendingSubmenuTriggerId: string | null = null;
+  let submenuLeavePoint: { x: number; y: number } | null = null;
+  let latestPointerPoint: { x: number; y: number } | null = null;
   const localeContext = getLocaleContext();
   const menuElements = new Map<string, HTMLElement>();
+  const typeaheadBuffer = new TypeaheadBuffer();
   const directionElement = $derived(
     providedDirection === 'auto' ? rootElement : (rootElement?.parentElement ?? rootElement),
   );
@@ -110,6 +121,13 @@
     });
   });
 
+  $effect(() => {
+    return () => {
+      clearSubmenuCloseTimer();
+      typeaheadBuffer.reset();
+    };
+  });
+
   const enabledIndexes = $derived(
     menus.map((menu, index) => ({ menu, index })).filter(({ menu }) => !menu.disabled),
   );
@@ -202,6 +220,7 @@
   function openMenu(index: number, focus: 'first' | 'last' = 'first'): void {
     const menu = menus[index];
     if (!menu || menu.disabled) return;
+    typeaheadBuffer.reset();
     activeMenuIndex = index;
     openMenuIndex = index;
     openSubmenuKey = null;
@@ -214,6 +233,8 @@
   }
 
   function closeAll(): void {
+    clearSubmenuCloseTimer();
+    typeaheadBuffer.reset();
     openMenuIndex = null;
     openSubmenuKey = null;
     initialFocus = undefined;
@@ -311,6 +332,195 @@
     return Array.from(menuElements.values()).some((element) => element.contains(target));
   }
 
+  function isPointerStillInsideCurrentTarget(event: MouseEvent | PointerEvent): boolean {
+    return event.relatedTarget instanceof Node && event.currentTarget instanceof HTMLElement
+      ? event.currentTarget.contains(event.relatedTarget)
+      : false;
+  }
+
+  function handleSubmenuPointerOut(
+    event: MouseEvent | PointerEvent,
+    submenuKey: string,
+    triggerId: string,
+  ): void {
+    if (isPointerStillInsideCurrentTarget(event)) return;
+    if (openSubmenuKey === submenuKey) scheduleSubmenuClose(submenuKey, triggerId, event);
+  }
+
+  function clearSubmenuCloseTimer(): void {
+    if (submenuCloseTimer !== null) {
+      clearTimeout(submenuCloseTimer);
+      submenuCloseTimer = null;
+    }
+    pendingSubmenuCloseKey = null;
+    pendingSubmenuTriggerId = null;
+    submenuLeavePoint = null;
+    latestPointerPoint = null;
+  }
+
+  function pointInTriangle(
+    point: { x: number; y: number },
+    first: { x: number; y: number },
+    second: { x: number; y: number },
+    third: { x: number; y: number },
+  ): boolean {
+    const area =
+      0.5 *
+      (-second.y * third.x +
+        first.y * (-second.x + third.x) +
+        first.x * (second.y - third.y) +
+        second.x * third.y);
+    if (area === 0) return false;
+    const sign = area < 0 ? -1 : 1;
+    const firstWeight =
+      (sign *
+        (second.y * third.x -
+          second.x * third.y +
+          (third.y - second.y) * point.x +
+          (second.x - third.x) * point.y)) /
+      (2 * Math.abs(area));
+    const secondWeight =
+      (sign *
+        (first.x * third.y -
+          first.y * third.x +
+          (first.y - third.y) * point.x +
+          (third.x - first.x) * point.y)) /
+      (2 * Math.abs(area));
+    const thirdWeight = 1 - firstWeight - secondWeight;
+    return firstWeight >= 0 && secondWeight >= 0 && thirdWeight >= 0;
+  }
+
+  function pointInRect(point: { x: number; y: number }, rect: DOMRect): boolean {
+    return (
+      point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom
+    );
+  }
+
+  function isPointerInsideSubmenu(submenuKey: string): boolean {
+    if (!latestPointerPoint) return false;
+    const submenu = menuElements.get(submenuKey);
+    if (!submenu) return false;
+
+    const submenuRect = submenu.getBoundingClientRect();
+    if (submenuRect.width === 0 && submenuRect.height === 0) return false;
+    return pointInRect(latestPointerPoint, submenuRect);
+  }
+
+  function isPointerMovingTowardSubmenu(triggerId: string): boolean {
+    if (!submenuLeavePoint || !latestPointerPoint) return false;
+    if (
+      submenuLeavePoint.x === latestPointerPoint.x &&
+      submenuLeavePoint.y === latestPointerPoint.y
+    ) {
+      return false;
+    }
+    const submenu = openSubmenuKey ? menuElements.get(openSubmenuKey) : undefined;
+    const trigger = findElementById(triggerId);
+    if (!submenu || !trigger) return false;
+
+    const submenuRect = submenu.getBoundingClientRect();
+    const triggerRect = trigger.getBoundingClientRect();
+    if (submenuRect.width === 0 && submenuRect.height === 0) return false;
+
+    const submenuIsInlineStart = submenuRect.right <= triggerRect.left;
+    const nearX = submenuIsInlineStart ? submenuRect.right : submenuRect.left;
+    return pointInTriangle(
+      latestPointerPoint,
+      submenuLeavePoint,
+      { x: nearX, y: submenuRect.top },
+      { x: nearX, y: submenuRect.bottom },
+    );
+  }
+
+  function clearSubmenuCloseState(): void {
+    pendingSubmenuCloseKey = null;
+    pendingSubmenuTriggerId = null;
+    submenuLeavePoint = null;
+    latestPointerPoint = null;
+  }
+
+  function armSubmenuCloseTimer(): void {
+    submenuCloseTimer = setTimeout(() => {
+      submenuCloseTimer = null;
+      const submenuKey = pendingSubmenuCloseKey;
+      const triggerId = pendingSubmenuTriggerId;
+      if (!submenuKey || !triggerId || openSubmenuKey !== submenuKey) {
+        clearSubmenuCloseState();
+        return;
+      }
+      if (isPointerInsideSubmenu(submenuKey)) {
+        clearSubmenuCloseState();
+        return;
+      }
+      if (isPointerMovingTowardSubmenu(triggerId)) {
+        submenuLeavePoint = latestPointerPoint;
+        armSubmenuCloseTimer();
+        return;
+      }
+      openSubmenuKey = null;
+      clearSubmenuCloseState();
+    }, 150);
+  }
+
+  function scheduleSubmenuClose(
+    submenuKey: string,
+    triggerId: string,
+    event: MouseEvent | PointerEvent | undefined = undefined,
+  ): void {
+    clearSubmenuCloseTimer();
+    pendingSubmenuCloseKey = submenuKey;
+    pendingSubmenuTriggerId = triggerId;
+    if (event) {
+      submenuLeavePoint = { x: event.clientX, y: event.clientY };
+      latestPointerPoint = submenuLeavePoint;
+    }
+    armSubmenuCloseTimer();
+  }
+
+  function handleDocumentPointermove(event: PointerEvent): void {
+    if (submenuCloseTimer === null) return;
+    latestPointerPoint = { x: event.clientX, y: event.clientY };
+    const submenuKey = pendingSubmenuCloseKey;
+    const triggerId = pendingSubmenuTriggerId;
+    if (!submenuKey || !triggerId || openSubmenuKey !== submenuKey) return;
+    if (isPointerInsideSubmenu(submenuKey) || isPointerMovingTowardSubmenu(triggerId)) return;
+
+    clearSubmenuCloseTimer();
+    openSubmenuKey = null;
+  }
+
+  function handleMenuTypeahead(event: KeyboardEvent, menu: HTMLElement): boolean {
+    if (!isTypeaheadKey(event)) return false;
+    const items = Array.from(
+      menu.querySelectorAll<HTMLElement>(
+        [
+          '[role="menuitem"]:not([data-disabled])',
+          '[role="menuitemcheckbox"]:not([data-disabled])',
+          '[role="menuitemradio"]:not([data-disabled])',
+        ].join(', '),
+      ),
+    ).filter((item) => item.closest('[role="menu"]') === menu);
+    if (!items.length) return false;
+
+    const currentIndex = items.findIndex((item) => item === document.activeElement);
+    const prefix = typeaheadBuffer.push(event.key);
+    const match = findTypeaheadMatch(
+      items.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? '',
+        disabled: item.hasAttribute('data-disabled'),
+      })),
+      prefix,
+      currentIndex,
+    );
+    if (match !== undefined) {
+      event.preventDefault();
+      items[match]?.focus();
+      return true;
+    }
+    return false;
+  }
+
   function handleTriggerKeydown(event: KeyboardEvent, index: number): void {
     if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
       event.preventDefault();
@@ -404,10 +614,17 @@
       }
 
       if (target?.closest('[role="menu"]')) {
+        const menu = target.closest<HTMLElement>('[role="menu"]');
+        if (menu && handleMenuTypeahead(event, menu)) return;
+
         event.preventDefault();
         const nextIndex = nextEnabledMenuIndex(openMenuIndex, horizontalArrowDirection(event.key));
         if (nextIndex !== -1) openMenu(nextIndex, 'first');
       }
+    } else {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      const menu = target?.closest<HTMLElement>('[role="menu"]');
+      if (menu) handleMenuTypeahead(event, menu);
     }
   }
 
@@ -436,6 +653,7 @@
 
 <svelte:document
   onpointerdown={handleDocumentPointerdown}
+  onpointermove={handleDocumentPointermove}
   onfocusin={handleDocumentFocusin}
   onkeydown={handleDocumentKeydown}
 />
@@ -515,6 +733,7 @@
                     openSubmenuKey = null;
                   }}
                   onpointerenter={() => {
+                    clearSubmenuCloseTimer();
                     openSubmenuKey = null;
                   }}
                 >
@@ -528,7 +747,20 @@
               {:else if isSubmenu(entry)}
                 {@const submenuKey = submenuMenuId(menuIndex, menu, entryIndex, entry)}
                 {@const submenuTrigger = submenuTriggerId(menuIndex, menu, entryIndex, entry)}
-                <div class="cinder-menu-bar__submenu">
+                <div
+                  class="cinder-menu-bar__submenu"
+                  role="presentation"
+                  onpointerenter={() => {
+                    if (openSubmenuKey === submenuKey) clearSubmenuCloseTimer();
+                  }}
+                  onfocusin={() => {
+                    if (openSubmenuKey === submenuKey) clearSubmenuCloseTimer();
+                  }}
+                  onpointerout={(event) =>
+                    handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
+                  onmouseleave={(event) =>
+                    handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
+                >
                   <DropdownItem
                     id={submenuTrigger}
                     class="cinder-menu-bar__submenu-trigger"
@@ -546,9 +778,14 @@
                         openSubmenu(submenuKey, 'none');
                     }}
                     onpointerenter={() => {
+                      clearSubmenuCloseTimer();
                       if (openMenuIndex === menuIndex && !entry.disabled)
                         openSubmenu(submenuKey, 'none');
                     }}
+                    onpointerout={(event) =>
+                      handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
+                    onmouseleave={(event) =>
+                      handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
                     onkeydown={(event) => {
                       if (entry.disabled) return;
                       if (
@@ -587,6 +824,16 @@
                       dir={submenuDirection(submenuTrigger)}
                       data-cinder-menu-bar-submenu-trigger-id={submenuTrigger}
                       aria-labelledby={submenuTrigger}
+                      onfocusin={() => {
+                        clearSubmenuCloseTimer();
+                      }}
+                      onpointerenter={() => {
+                        clearSubmenuCloseTimer();
+                      }}
+                      onpointerout={(event) =>
+                        handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
+                      onmouseleave={(event) =>
+                        handleSubmenuPointerOut(event, submenuKey, submenuTrigger)}
                     >
                       {#each entry.items as submenuEntry, submenuEntryIndex (ancestryKey('submenu', submenuKey, submenuEntryIndex, submenuEntry.id))}
                         {#if isItem(submenuEntry)}

package/src/components/segmented-control/README.md

@@ -27,6 +27,7 @@ Toggle button row for switching between a small set of mutually exclusive option
 | `hideLabel`              | `boolean`                      | no       | —       | Visually hide the label while keeping it available to assistive technology.                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `id`                     | `string`                       | yes      | —       | Unique identifier for the control.                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `label`                  | `string`                       | yes      | —       | Accessible label for the group.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `name`                   | `string`                       | no       | —       | Native form field name. Renders hidden input(s) carrying the selected value(s).                                                                                                                                                                                                                                                                                                                                                                                                |
 | `orientation`            | `"horizontal"` \| `"vertical"` | no       | —       | Layout orientation.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `selectionMode`          | `"single"` \| `"multiple"`     | no       | —       | Selection mode. `"single"` allows exactly one segment to be selected at a time; `"multiple"` allows any number of segments to be selected simultaneously. Default `"single"`.                                                                                                                                                                                                                                                                                                  |
 | `size`                   | `"sm"` \| `"md"` \| `"lg"`     | no       | —       | Requested visual size of the control. Defaults to `"md"`. The resolved size is reflected as `data-cinder-size` on the root; when `density="toolbar"` is set, the resolved size is forced to `"sm"` and any explicit `size` value is ignored. `size="md"` option text uses `--cinder-text-sm`; `size="sm"` and `density="toolbar"` use `--cinder-text-xs`; `size="lg"` uses `--cinder-text-sm`.                                                                                 |

package/src/components/segmented-control/segmented-control.svelte

@@ -16,7 +16,8 @@
 </script>
 
 <script lang="ts" generics="T extends string = string">
-  import type { SvelteSet } from 'svelte/reactivity';
+  import { untrack } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
 
   import { classNames } from '../../utilities/class-names.ts';
 
@@ -31,6 +32,7 @@
     id,
     value = $bindable<T | SvelteSet<T> | undefined>(),
     label,
+    name,
     hideLabel = false,
     disabled = false,
     size = 'md',
@@ -46,6 +48,12 @@
     children,
     ...rest
   }: SegmentedControlProps<T> = $props();
+  let resetInputElement = $state<HTMLInputElement | null>(null);
+  let resetSyncTimeout: ReturnType<typeof setTimeout> | undefined;
+  const initialSingleValue = untrack(() => (typeof value === 'string' ? value : undefined));
+  const initialMultipleValues = untrack(() =>
+    selectionMode === 'multiple' && value instanceof SvelteSet ? Array.from(value) : undefined,
+  );
 
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode,
@@ -88,6 +96,45 @@
   // toolbars line up with sibling toolbar controls. `data-cinder-size` reflects
   // this resolved size; raw requested `size` is not surfaced through the DOM.
   const effectiveSize = $derived(density === 'toolbar' ? 'sm' : size);
+  const selectedValues = $derived(
+    selectionMode === 'multiple'
+      ? value instanceof SvelteSet
+        ? Array.from(value as SvelteSet<T>)
+        : []
+      : typeof value === 'string'
+        ? [value]
+        : [],
+  );
+
+  function resetToInitialValue(event: Event): void {
+    if (resetSyncTimeout !== undefined) clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented) return;
+      if (selectionMode === 'multiple') {
+        value =
+          initialMultipleValues === undefined
+            ? undefined
+            : new SvelteSet(initialMultipleValues as T[]);
+        return;
+      }
+      value = initialSingleValue as T | undefined;
+    }, 0);
+  }
+
+  $effect(() => {
+    const input = resetInputElement;
+    if (input === null) return;
+    const form = input.form;
+    form?.addEventListener('reset', resetToInitialValue);
+    return () => {
+      form?.removeEventListener('reset', resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
 </script>
 
 <div class="cinder-segmented-control-container">
@@ -116,4 +163,10 @@
   >
     {@render children()}
   </div>
+  {#if name}
+    <input bind:this={resetInputElement} type="hidden" disabled />
+    {#each selectedValues as selectedValue (selectedValue)}
+      <input type="hidden" {name} value={selectedValue} {disabled} />
+    {/each}
+  {/if}
 </div>

package/src/components/segmented-control/segmented-control.types.ts

@@ -22,6 +22,8 @@ type CommonProps<T extends string> = Omit<
   id: string;
   /** Accessible label for the group. */
   label: string;
+  /** Native form field name. Renders hidden input(s) carrying the selected value(s). */
+  name?: string | undefined;
   /** Visually hide the label while keeping it available to assistive technology. */
   hideLabel?: boolean | undefined;
   /** Disable the whole control. */

package/src/components/sortable-list/sortable-list.types.ts

@@ -3,7 +3,7 @@ export type {
   SortableAnnouncements,
   SortableItemContext,
   SortableReorderChange,
-} from '../../utilities/sortable-controller.svelte.ts';
+} from '../../utilities/sortable-controller.types.ts';
 /** Props for the SortableList component. */
 export type SortableListProps<Item> = {
   /** The list of items to render. */
@@ -24,15 +24,15 @@ export type SortableListProps<Item> = {
   /** Fires with the full reordered array and change metadata on drop. */
   onreorder: (
     nextItems: Item[],
-    change: import('../../utilities/sortable-controller.svelte.ts').SortableReorderChange,
+    change: import('../../utilities/sortable-controller.types.ts').SortableReorderChange,
   ) => void;
   /** Optional overrides for announcement strings. */
   announcements?: Partial<
-    import('../../utilities/sortable-controller.svelte.ts').SortableAnnouncements
+    import('../../utilities/sortable-controller.types.ts').SortableAnnouncements
   >;
   /** Row content snippet. Receives the item and a per-row context. */
   children: Snippet<
-    [Item, import('../../utilities/sortable-controller.svelte.ts').SortableItemContext]
+    [Item, import('../../utilities/sortable-controller.types.ts').SortableItemContext]
   >;
   /** Accessible name for the list (applied as aria-label on the list root). */
   label?: string;

package/src/components/tag-input/index.ts

@@ -1,3 +1,6 @@
 import './tag-input.css';
-export { default as TagInput, default } from './tag-input.svelte';
+import TagInput from './tag-input.svelte';
+
+export default TagInput;
 export type { TagInputProps } from './tag-input.types.ts';
+export { TagInput };

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;
   }