@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/tree/index.js

@@ -229,13 +229,15 @@ function _visually_hidden_live_region($$anchor, $$props) {
 
 // src/components/tree-item/tree-item.svelte
 var root_4 = $4.from_html(`<mark aria-hidden="true" class="cinder-tree-item__highlight"> </mark>`);
-var root_6 = $4.from_html(`<button type="button" class="cinder-tree-item__drag-handle" tabindex="-1"><span aria-hidden="true">::</span></button>`);
-var root_8 = $4.from_html(`<input type="text" class="cinder-tree-item__rename-input"/>`);
-var root_9 = $4.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`, 1);
-var root_10 = $4.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`);
-var root_11 = $4.from_html(`<span class="cinder-sr-only"> </span>`);
-var root_12 = $4.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
-var root_13 = $4.from_html(`<div role="treeitem"><span class="cinder-sr-only"> </span> <div class="cinder-tree-item__row"><!> <!></div> <!> <!> <!></div>`);
+var root_6 = $4.from_html(`<button type="button" class="cinder-tree-item__disclosure" tabindex="-1"><span aria-hidden="true"></span></button>`);
+var root_7 = $4.from_html(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+var root_8 = $4.from_html(`<button type="button" class="cinder-tree-item__drag-handle" tabindex="-1"><span aria-hidden="true">::</span></button>`);
+var root_10 = $4.from_html(`<input type="text" class="cinder-tree-item__rename-input"/>`);
+var root_11 = $4.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/> <span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`, 1);
+var root_12 = $4.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`);
+var root_13 = $4.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_14 = $4.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
+var root_15 = $4.from_html(`<div role="treeitem"><span class="cinder-sr-only"> </span> <div class="cinder-tree-item__row"><!> <!> <!></div> <!> <!> <!></div>`);
 function Tree_item($$anchor, $$props) {
   const treeItemElementId = $4.props_id();
   $4.push($$props, true);
@@ -301,16 +303,19 @@ function Tree_item($$anchor, $$props) {
   const isExpanded = $4.derived(() => context.expandedIds.includes($$props.id));
   const isSelected = $4.derived(() => context.selectedIds.includes($$props.id));
   const isFocused = $4.derived(() => context.focusedId === $$props.id);
+  const positionInSet = $4.derived(() => context.positionInSet($$props.id));
+  const setSize = $4.derived(() => context.setSize($$props.id));
   const isFiltering = $4.derived(() => context.filtering);
   const isVisible = $4.derived(() => !$4.get(isFiltering) || context.isVisible($$props.id) || !context.hasRegisteredItems && ($4.get(isBranch) || context.matchesFilter($$props.label, $$props.id)));
   const hasVisibleDescendant = $4.derived(() => context.hasVisibleDescendant($$props.id));
   const renderedExpanded = $4.derived(() => $4.get(isExpanded) || $4.get(isFiltering) && $4.get(hasVisibleDescendant));
+  const filterForcedOpen = $4.derived(() => $4.get(isBranch) && $4.get(isFiltering) && $4.get(hasVisibleDescendant) && !$4.get(isExpanded));
   const shouldProbeFilterChildren = $4.derived(() => $4.get(isBranch) && $4.get(isFiltering) && !$4.get(isExpanded) && $4.get(probedFilterValue) !== context.filterValue);
   const shouldRenderChildren = $4.derived(() => $4.get(isBranch) && ($4.get(isExpanded) || $4.get(hasVisibleDescendant) || $4.get(shouldProbeFilterChildren)));
   const checkboxSelectionActive = $4.derived(() => context.checkboxSelectionActive());
   const selectionState = $4.derived(() => context.selectionStateFor($$props.id));
   const labelSegments = $4.derived(() => splitLabelForHighlight($$props.label, context.filterValue));
-  const canRename = $4.derived(() => !disabled() && $$props.onRename != null);
+  const canRename = $4.derived(() => !disabled() && $$props.onrename != null);
   const editingLabel = $4.derived(() => `Editing: ${$$props.label}`);
   const dragController = $4.derived(() => context.dragController);
   const canDrag = $4.derived(() => draggable() && !disabled() && $4.get(dragController) != null);
@@ -395,8 +400,8 @@ function Tree_item($$anchor, $$props) {
       $4.set(busy, false);
       $4.set(loaded, false);
       context.setExpanded($$props.id, false);
-      if ($$props.onLoadError) {
-        $$props.onLoadError(error, $$props.id);
+      if ($$props.onloaderror) {
+        $$props.onloaderror(error, $$props.id);
       } else {
         console.error("[cinder-tree] loadChildren failed for item", $$props.id, error);
       }
@@ -480,7 +485,7 @@ function Tree_item($$anchor, $$props) {
     $4.set(editing, true);
     announceRename(`Editing ${$$props.label}. Press Enter to confirm, Escape to cancel.`);
   }
-  function finishEdit(afterFocus) {
+  function finishEdit(afterFocus = undefined) {
     $4.set(editing, false);
     $4.set(renameError, "");
     $4.set(renamePending, false);
@@ -494,7 +499,7 @@ function Tree_item($$anchor, $$props) {
     announceRename("Rename cancelled.");
     finishEdit();
   }
-  async function commitEdit(afterFocus) {
+  async function commitEdit(afterFocus = undefined) {
     if (!$4.get(editing) || $4.get(renamePending))
       return false;
     if ($4.get(editValue).trim().length === 0) {
@@ -503,14 +508,14 @@ function Tree_item($$anchor, $$props) {
       queueMicrotask(() => $4.get(renameInputElement)?.focus());
       return false;
     }
-    if (!$$props.onRename) {
+    if (!$$props.onrename) {
       finishEdit(afterFocus);
       return true;
     }
     $4.set(renamePending, true);
     $4.set(renameError, "");
     try {
-      await $$props.onRename($$props.id, $4.get(editValue));
+      await $$props.onrename($$props.id, $4.get(editValue));
       announceRename(`${$4.get(editValue)}, renamed.`);
       finishEdit(afterFocus);
       return true;
@@ -763,12 +768,22 @@ function Tree_item($$anchor, $$props) {
     $4.get(outerElement)?.focus();
     if (event2.detail > 1)
       return;
-    if (!disabled() && !$4.get(checkboxSelectionActive))
+    if (disabled()) {
+      if ($4.get(isBranch))
+        context.setExpanded($$props.id, !$4.get(isExpanded));
+      return;
+    }
+    if (!$4.get(checkboxSelectionActive))
       context.toggleSelected($$props.id, event2);
     if ($4.get(isBranch) && !event2.shiftKey && !event2.metaKey && !event2.ctrlKey) {
       context.setExpanded($$props.id, !$4.get(isExpanded));
     }
   }
+  function handleDisclosureClick(event2) {
+    event2.stopPropagation();
+    $4.get(outerElement)?.focus();
+    context.setExpanded($$props.id, !$4.get(isExpanded));
+  }
   function handleLabelDoubleClick(event2) {
     event2.preventDefault();
     event2.stopPropagation();
@@ -817,7 +832,7 @@ function Tree_item($$anchor, $$props) {
     }
     return segments;
   }
-  var div = root_13();
+  var div = root_15();
   var span = $4.child(div);
   var text_2 = $4.child(span, true);
   $4.reset(span);
@@ -826,28 +841,50 @@ function Tree_item($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor2) => {
       var button = root_6();
-      $4.bind_this(button, ($$value) => $4.set(dragHandleElement, $$value), () => $4.get(dragHandleElement));
       $4.template_effect(() => {
-        $4.set_attribute(button, "aria-label", $4.get(dragHandleLabel));
-        $4.set_attribute(button, "aria-pressed", $4.get(isDraggingItem));
-        $4.set_attribute(button, "aria-describedby", context.dragInstructionsId);
+        $4.set_attribute(button, "aria-label", `${$4.get(renderedExpanded) ? "Collapse" : "Expand"} ${$$props.label}`);
+        $4.set_attribute(button, "aria-expanded", $4.get(renderedExpanded));
       });
-      $4.delegated("pointerdown", button, handleDragPointerDown);
-      $4.event("click", button, handleDragClick, true);
-      $4.delegated("keydown", button, handleDragKeyboard);
+      $4.delegated("click", button, handleDisclosureClick);
       $4.append($$anchor2, button);
     };
+    var alternate_1 = ($$anchor2) => {
+      var span_1 = root_7();
+      $4.append($$anchor2, span_1);
+    };
     $4.if(node_3, ($$render) => {
-      if ($4.get(canDrag))
+      if ($4.get(isBranch) && !$4.get(filterForcedOpen))
         $$render(consequent_1);
+      else
+        $$render(alternate_1, -1);
     });
   }
   var node_4 = $4.sibling(node_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
+      var button_1 = root_8();
+      $4.bind_this(button_1, ($$value) => $4.set(dragHandleElement, $$value), () => $4.get(dragHandleElement));
+      $4.template_effect(() => {
+        $4.set_attribute(button_1, "aria-label", $4.get(dragHandleLabel));
+        $4.set_attribute(button_1, "aria-pressed", $4.get(isDraggingItem));
+        $4.set_attribute(button_1, "aria-describedby", context.dragInstructionsId);
+      });
+      $4.delegated("pointerdown", button_1, handleDragPointerDown);
+      $4.event("click", button_1, handleDragClick, true);
+      $4.delegated("keydown", button_1, handleDragKeyboard);
+      $4.append($$anchor2, button_1);
+    };
+    $4.if(node_4, ($$render) => {
+      if ($4.get(canDrag))
+        $$render(consequent_2);
+    });
+  }
+  var node_5 = $4.sibling(node_4, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
       var fragment_3 = $4.comment();
-      var node_5 = $4.first_child(fragment_3);
-      $4.snippet(node_5, () => $$props.row, () => ({
+      var node_6 = $4.first_child(fragment_3);
+      $4.snippet(node_6, () => $$props.row, () => ({
         expanded: $4.get(isExpanded),
         selected: $4.get(isSelected),
         busy: $4.get(busy),
@@ -860,8 +897,8 @@ function Tree_item($$anchor, $$props) {
       }));
       $4.append($$anchor2, fragment_3);
     };
-    var consequent_3 = ($$anchor2) => {
-      var input = root_8();
+    var consequent_4 = ($$anchor2) => {
+      var input = root_10();
       $4.remove_input_defaults(input);
       $4.attach(input, () => focusRenameInput);
       $4.template_effect(() => {
@@ -875,78 +912,78 @@ function Tree_item($$anchor, $$props) {
       $4.bind_value(input, () => $4.get(editValue), ($$value) => $4.set(editValue, $$value));
       $4.append($$anchor2, input);
     };
-    var consequent_4 = ($$anchor2) => {
-      var fragment_4 = root_9();
+    var consequent_5 = ($$anchor2) => {
+      var fragment_4 = root_11();
       var input_1 = $4.first_child(fragment_4);
       $4.remove_input_defaults(input_1);
       $4.bind_this(input_1, ($$value) => $4.set(checkboxElement, $$value), () => $4.get(checkboxElement));
-      var span_1 = $4.sibling(input_1, 2);
-      var node_6 = $4.child(span_1);
-      visibleLabel(node_6);
-      $4.reset(span_1);
+      var span_2 = $4.sibling(input_1, 2);
+      var node_7 = $4.child(span_2);
+      visibleLabel(node_7);
+      $4.reset(span_2);
       $4.template_effect(() => {
         $4.set_checked(input_1, $4.get(selectionState).checked);
         input_1.disabled = disabled();
       });
       $4.delegated("click", input_1, handleCheckboxActivation);
-      $4.delegated("dblclick", span_1, handleLabelDoubleClick);
+      $4.delegated("dblclick", span_2, handleLabelDoubleClick);
       $4.append($$anchor2, fragment_4);
     };
-    var alternate_1 = ($$anchor2) => {
-      var span_2 = root_10();
-      var node_7 = $4.child(span_2);
-      visibleLabel(node_7);
-      $4.reset(span_2);
-      $4.delegated("dblclick", span_2, handleLabelDoubleClick);
-      $4.append($$anchor2, span_2);
+    var alternate_2 = ($$anchor2) => {
+      var span_3 = root_12();
+      var node_8 = $4.child(span_3);
+      visibleLabel(node_8);
+      $4.reset(span_3);
+      $4.delegated("dblclick", span_3, handleLabelDoubleClick);
+      $4.append($$anchor2, span_3);
     };
-    $4.if(node_4, ($$render) => {
+    $4.if(node_5, ($$render) => {
       if ($$props.row)
-        $$render(consequent_2);
+        $$render(consequent_3);
       else if ($4.get(editing))
-        $$render(consequent_3, 1);
+        $$render(consequent_4, 1);
       else if ($4.get(checkboxSelectionActive))
-        $$render(consequent_4, 2);
+        $$render(consequent_5, 2);
       else
-        $$render(alternate_1, -1);
+        $$render(alternate_2, -1);
     });
   }
   $4.reset(div_1);
-  var node_8 = $4.sibling(div_1, 2);
+  var node_9 = $4.sibling(div_1, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var span_3 = root_11();
-      var text_3 = $4.child(span_3, true);
-      $4.reset(span_3);
+    var consequent_6 = ($$anchor2) => {
+      var span_4 = root_13();
+      var text_3 = $4.child(span_4, true);
+      $4.reset(span_4);
       $4.template_effect(() => {
-        $4.set_attribute(span_3, "id", $4.get(renameMessageId));
+        $4.set_attribute(span_4, "id", $4.get(renameMessageId));
         $4.set_text(text_3, $4.get(renameError));
       });
-      $4.append($$anchor2, span_3);
+      $4.append($$anchor2, span_4);
     };
-    $4.if(node_8, ($$render) => {
+    $4.if(node_9, ($$render) => {
       if ($4.get(renameError))
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $4.sibling(node_8, 2);
+  var node_10 = $4.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var div_2 = root_12();
-      var node_10 = $4.child(div_2);
-      $4.snippet(node_10, () => $$props.children ?? $4.noop);
+    var consequent_7 = ($$anchor2) => {
+      var div_2 = root_14();
+      var node_11 = $4.child(div_2);
+      $4.snippet(node_11, () => $$props.children ?? $4.noop);
       $4.reset(div_2);
       $4.template_effect(() => $4.set_attribute(div_2, "aria-labelledby", treeItemElementId));
       $4.append($$anchor2, div_2);
     };
-    $4.if(node_9, ($$render) => {
+    $4.if(node_10, ($$render) => {
       if ($4.get(shouldRenderChildren))
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
-  var node_11 = $4.sibling(node_9, 2);
+  var node_12 = $4.sibling(node_10, 2);
   {
-    var consequent_7 = ($$anchor2) => {
+    var consequent_8 = ($$anchor2) => {
       _visually_hidden_live_region($$anchor2, {
         get message() {
           return $4.get(renameAnnouncement);
@@ -957,9 +994,9 @@ function Tree_item($$anchor, $$props) {
         priority: "assertive"
       });
     };
-    $4.if(node_11, ($$render) => {
-      if ($$props.onRename)
-        $$render(consequent_7);
+    $4.if(node_12, ($$render) => {
+      if ($$props.onrename)
+        $$render(consequent_8);
     });
   }
   $4.reset(div);
@@ -972,6 +1009,8 @@ function Tree_item($$anchor, $$props) {
     $4.set_attribute(div, "aria-labelledby", $4.get(editing) ? undefined : `${treeItemElementId}-label`);
     $4.set_attribute(div, "aria-level", level);
     $4.set_attribute(div, "aria-expanded", $4.get(isBranch) ? $4.get(renderedExpanded) : undefined);
+    $4.set_attribute(div, "aria-posinset", $4.get(positionInSet));
+    $4.set_attribute(div, "aria-setsize", $4.get(setSize));
     $4.set_attribute(div, "aria-selected", context.selectionMode === "none" || $4.get(checkboxSelectionActive) ? undefined : $4.get(isSelected));
     $4.set_attribute(div, "aria-checked", $4.get(ariaChecked));
     $4.set_attribute(div, "aria-busy", $4.get(busy) || undefined);
@@ -1292,17 +1331,65 @@ import * as $6 from "svelte/internal/client";
 import { SvelteMap } from "svelte/reactivity";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
+}
+
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event2) {
+  return event2.key.length === 1 && event2.key !== " " && !event2.ctrlKey && !event2.metaKey && !event2.altKey && !event2.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset = 1;offset <= candidates.length; offset += 1) {
+    const index = (startIndex + offset) % candidates.length;
+    const candidate = candidates[index];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
 }
 
 // src/_internal/tree-registry.svelte.ts
@@ -1435,17 +1522,14 @@ class TreeRegistry {
   }
   typeaheadMatch(prefix, currentId, expandedIds, visibilityPredicate) {
     const visible = this.getVisible(expandedIds, visibilityPredicate);
-    const lower = prefix.toLowerCase();
-    const startIndex = visible.indexOf(currentId);
-    for (let offset = 1;offset <= visible.length; offset++) {
-      const index = (startIndex + offset) % visible.length;
-      const id = visible[index];
+    return findTypeaheadMatch(visible.map((id) => {
       const node = this.#nodes.get(id);
-      if (node && node.label().toLowerCase().startsWith(lower)) {
-        return id;
-      }
-    }
-    return;
+      return {
+        value: id,
+        label: node?.label() ?? "",
+        disabled: node?.disabled
+      };
+    }), prefix, visible.indexOf(currentId));
   }
 }
 
@@ -2825,23 +2909,25 @@ function toggleSelectionScope(selectedIds, targetIds, disabledIds = new Set) {
 }
 
 // src/components/tree/tree.svelte
-var root_3 = $8.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/>`);
-var root_5 = $8.from_html(`<span class="cinder-tree-item__label cinder-_truncate"> </span>`);
-var root_2 = $8.from_html(`<div role="treeitem" class="cinder-tree-item cinder-tree-item--virtual" tabindex="-1"><div class="cinder-tree-item__row"><!> <!></div></div>`);
-var root_15 = $8.from_html(`<div class="cinder-tree__virtual-spacer"></div>`);
-var root_62 = $8.from_html(`<div><!></div>`);
-var root_102 = $8.from_html(`<div class="cinder-tree__filter"><label class="cinder-sr-only"> </label> <input class="cinder-tree__filter-input" type="search" autocomplete="off" autocorrect="off"/></div>`);
-var root_112 = $8.from_html(`<div class="cinder-tree__selection-controls"><!></div>`);
-var root_122 = $8.from_html(`<div class="cinder-sr-only">Press Control Shift Space to lift the focused item, or Space from the reorder handle. Use
+var root_3 = $8.from_html(`<button type="button" class="cinder-tree-item__disclosure" tabindex="-1"><span aria-hidden="true"></span></button>`);
+var root_42 = $8.from_html(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+var root_5 = $8.from_html(`<input type="checkbox" class="cinder-tree-item__checkbox" tabindex="-1" aria-hidden="true"/>`);
+var root_72 = $8.from_html(`<span class="cinder-tree-item__label cinder-_truncate"> </span>`);
+var root_2 = $8.from_html(`<div role="treeitem" class="cinder-tree-item cinder-tree-item--virtual" tabindex="-1"><div class="cinder-tree-item__row"><!> <!> <!></div></div>`);
+var root_17 = $8.from_html(`<div class="cinder-tree__virtual-spacer"></div>`);
+var root_82 = $8.from_html(`<div><!></div>`);
+var root_122 = $8.from_html(`<div class="cinder-tree__filter"><label class="cinder-sr-only"> </label> <input class="cinder-tree__filter-input" type="search" autocomplete="off" autocorrect="off"/></div>`);
+var root_132 = $8.from_html(`<div class="cinder-tree__selection-controls"><!></div>`);
+var root_142 = $8.from_html(`<div class="cinder-sr-only">Press Control Shift Space to lift the focused item, or Space from the reorder handle. Use
         arrow keys to move. Press Space to drop, Escape to cancel.</div>`);
-var root_132 = $8.from_html(`<div class="cinder-tree__empty" role="none">No results</div>`);
-var root_92 = $8.from_html(`<div class="cinder-tree-root"><!> <!> <!> <!> <!> <!> <!></div>`);
+var root_152 = $8.from_html(`<div class="cinder-tree__empty" role="none">No results</div>`);
+var root_112 = $8.from_html(`<div class="cinder-tree-root"><!> <!> <!> <!> <!> <!> <!></div>`);
 var root4 = $8.from_html(`<!> <!>`, 1);
 function Tree($$anchor, $$props) {
   const generatedId = $8.props_id();
   $8.push($$props, true);
   const virtualizedRows = ($$anchor2) => {
-    var div = root_15();
+    var div = root_17();
     $8.each(div, 21, () => $8.get(virtualRows), (row) => row.item.id, ($$anchor3, row) => {
       const virtualItem = $8.derived(() => $8.get(row).virtualItem);
       const item = $8.derived(() => $8.get(row).item);
@@ -2851,7 +2937,33 @@ function Tree($$anchor, $$props) {
       var node_1 = $8.child(div_2);
       {
         var consequent = ($$anchor4) => {
-          var input = root_3();
+          var button = root_3();
+          $8.template_effect(($0, $1) => {
+            $8.set_attribute(button, "aria-label", $0);
+            $8.set_attribute(button, "aria-expanded", $1);
+          }, [
+            () => `${virtualizedItemExpanded($8.get(item)) ? "Collapse" : "Expand"} ${$8.get(item).label}`,
+            () => virtualizedItemExpanded($8.get(item))
+          ]);
+          $8.delegated("click", button, (event2) => handleVirtualizedDisclosureClick($8.get(item), event2));
+          $8.append($$anchor4, button);
+        };
+        var d = $8.derived(() => $8.get(item).branch && !virtualizedFilterForcedOpen($8.get(item)));
+        var alternate = ($$anchor4) => {
+          var span = root_42();
+          $8.append($$anchor4, span);
+        };
+        $8.if(node_1, ($$render) => {
+          if ($8.get(d))
+            $$render(consequent);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      var node_2 = $8.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor4) => {
+          var input = root_5();
           $8.remove_input_defaults(input);
           $8.attach(input, () => (node) => {
             $8.user_effect(() => {
@@ -2865,17 +2977,17 @@ function Tree($$anchor, $$props) {
           $8.delegated("click", input, (event2) => handleVirtualizedCheckboxClick($8.get(item), event2));
           $8.append($$anchor4, input);
         };
-        var d = $8.derived(() => checkboxSelectionActive());
-        $8.if(node_1, ($$render) => {
-          if ($8.get(d))
-            $$render(consequent);
+        var d_1 = $8.derived(() => checkboxSelectionActive());
+        $8.if(node_2, ($$render) => {
+          if ($8.get(d_1))
+            $$render(consequent_1);
         });
       }
-      var node_2 = $8.sibling(node_1, 2);
+      var node_3 = $8.sibling(node_2, 2);
       {
-        var consequent_1 = ($$anchor4) => {
+        var consequent_2 = ($$anchor4) => {
           var fragment = $8.comment();
-          var node_3 = $8.first_child(fragment);
+          var node_4 = $8.first_child(fragment);
           {
             let $0 = $8.derived(() => ({
               item: $8.get(item),
@@ -2883,22 +2995,22 @@ function Tree($$anchor, $$props) {
               selected: selectedIds().includes($8.get(item).id),
               focused: $8.get(effectiveFocusedId) === $8.get(item).id
             }));
-            $8.snippet(node_3, () => $$props.virtualizedItem, () => $8.get($0));
+            $8.snippet(node_4, () => $$props.virtualizedItem, () => $8.get($0));
           }
           $8.append($$anchor4, fragment);
         };
-        var alternate = ($$anchor4) => {
-          var span = root_5();
-          var text2 = $8.child(span, true);
-          $8.reset(span);
+        var alternate_1 = ($$anchor4) => {
+          var span_1 = root_72();
+          var text2 = $8.child(span_1, true);
+          $8.reset(span_1);
           $8.template_effect(() => $8.set_text(text2, $8.get(item).label));
-          $8.append($$anchor4, span);
+          $8.append($$anchor4, span_1);
         };
-        $8.if(node_2, ($$render) => {
+        $8.if(node_3, ($$render) => {
           if ($$props.virtualizedItem)
-            $$render(consequent_1);
+            $$render(consequent_2);
           else
-            $$render(alternate, -1);
+            $$render(alternate_1, -1);
         });
       }
       $8.reset(div_2);
@@ -2940,7 +3052,7 @@ function Tree($$anchor, $$props) {
     $8.append($$anchor2, div);
   };
   const treeBody = ($$anchor2) => {
-    var div_3 = root_62();
+    var div_3 = root_82();
     $8.attribute_effect(div_3, ($0, $1, $22) => ({
       ...rest,
       id: $8.get(treeId),
@@ -2964,22 +3076,22 @@ function Tree($$anchor, $$props) {
       () => treeStyle(),
       () => checkboxSelectionActive() ? "" : undefined
     ]);
-    var node_4 = $8.child(div_3);
+    var node_5 = $8.child(div_3);
     {
-      var consequent_2 = ($$anchor3) => {
+      var consequent_3 = ($$anchor3) => {
         virtualizedRows($$anchor3);
       };
-      var alternate_1 = ($$anchor3) => {
+      var alternate_2 = ($$anchor3) => {
         var fragment_2 = $8.comment();
-        var node_5 = $8.first_child(fragment_2);
-        $8.snippet(node_5, () => $$props.children ?? $8.noop);
+        var node_6 = $8.first_child(fragment_2);
+        $8.snippet(node_6, () => $$props.children ?? $8.noop);
         $8.append($$anchor3, fragment_2);
       };
-      $8.if(node_4, ($$render) => {
+      $8.if(node_5, ($$render) => {
         if ($8.get(isVirtualizedTree))
-          $$render(consequent_2);
+          $$render(consequent_3);
         else
-          $$render(alternate_1, -1);
+          $$render(alternate_2, -1);
       });
     }
     $8.reset(div_3);
@@ -3011,11 +3123,11 @@ function Tree($$anchor, $$props) {
     "style",
     "selectionControls",
     "filterValue",
-    "onFilterChange",
+    "onfilterchange",
     "filterPlaceholder",
     "showSearch",
     "filterPredicate",
-    "onReorder",
+    "onreorder",
     "children"
   ]);
   function normalizeOptionalText(value) {
@@ -3044,8 +3156,7 @@ function Tree($$anchor, $$props) {
   let dragScrollElement = null;
   let dragScrollAnimationFrame = null;
   let selectionAnchorId = $8.state(null);
-  let typeaheadBuffer = $8.state("");
-  let typeaheadTimer = null;
+  const typeaheadBuffer = new TypeaheadBuffer;
   let hasWarnedNoLabel = false;
   let hasWarnedVirtualizedChildren = false;
   let hasWarnedVirtualizedWithoutItems = false;
@@ -3070,10 +3181,7 @@ function Tree($$anchor, $$props) {
   });
   $8.user_effect(() => {
     return () => {
-      if (typeaheadTimer !== null) {
-        clearTimeout(typeaheadTimer);
-        typeaheadTimer = null;
-      }
+      typeaheadBuffer.reset();
       if (filterStatusTimer !== null) {
         clearTimeout(filterStatusTimer);
         filterStatusTimer = null;
@@ -3091,7 +3199,7 @@ function Tree($$anchor, $$props) {
   const isVirtualizedTree = $8.derived(() => virtualized() && $$props.items != null);
   const flattenedDataItems = $8.derived(() => flattenTreeDataItems($$props.items ?? []));
   const flattenedDataItemById = $8.derived(() => new Map($8.get(flattenedDataItems).map((item) => [item.id, item])));
-  const hasTreeChrome = $8.derived(() => $$props.selectionControls != null || showSearch() || $8.get(filtering) || $$props.onReorder != null);
+  const hasTreeChrome = $8.derived(() => $$props.selectionControls != null || showSearch() || $8.get(filtering) || $$props.onreorder != null);
   const hasRegisteredItems = $8.derived(() => $8.get(isVirtualizedTree) ? $8.get(flattenedDataItems).length > 0 : registry.size > 0);
   const activeVisibilityPredicate = $8.derived(() => {
     if (!$8.get(filtering))
@@ -3224,6 +3332,9 @@ function Tree($$anchor, $$props) {
   function virtualizedItemExpanded(item) {
     return expandedIds().includes(item.id) || $8.get(filtering) && item.branch && $8.get(visibleDataItems).some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
   }
+  function virtualizedFilterForcedOpen(item) {
+    return item.branch && $8.get(filtering) && !expandedIds().includes(item.id) && $8.get(visibleDataItems).some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
+  }
   function firstVisibleVirtualizedChildIndex(parentId) {
     return $8.get(visibleDataItems).findIndex((item) => item.parentId === parentId);
   }
@@ -3260,7 +3371,7 @@ function Tree($$anchor, $$props) {
     $8.set(dragAnnouncementSequence, $8.get(dragAnnouncementSequence) + 1);
   }
   $8.user_effect(() => {
-    if (!$$props.onReorder) {
+    if (!$$props.onreorder) {
       $8.set(dragController, null);
       return;
     }
@@ -3271,7 +3382,7 @@ function Tree($$anchor, $$props) {
       isBranch: (id) => registry.getNode(id)?.isBranch() ?? false,
       focus: focusNode,
       announce: announceDrag,
-      commit: (draggedId, target) => $$props.onReorder?.(draggedId, target)
+      commit: (draggedId, target) => $$props.onreorder?.(draggedId, target)
     }))), true);
   });
   function focusFallbackAfterUnregister(parentId) {
@@ -3368,7 +3479,7 @@ function Tree($$anchor, $$props) {
     }
     focusItem(id);
   }
-  function scrollToRow(id, options) {
+  function scrollToRow(id, options = undefined) {
     if ($8.get(isVirtualizedTree)) {
       const index = $8.get(visibleIds).indexOf(id);
       if (index !== -1) {
@@ -3577,6 +3688,15 @@ function Tree($$anchor, $$props) {
     isFocused(id) {
       return $8.get(effectiveFocusedId) === id;
     },
+    positionInSet(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => $8.get(visibleIdSet).has(siblingId));
+      const index = siblings.indexOf(id);
+      return index === -1 ? undefined : index + 1;
+    },
+    setSize(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => $8.get(visibleIdSet).has(siblingId));
+      return siblings.length || undefined;
+    },
     isVisible(id) {
       return $8.get(visibleIdSet).has(id);
     },
@@ -3657,16 +3777,9 @@ function Tree($$anchor, $$props) {
     handleTypeahead(char, currentId) {
       if (disableTypeahead())
         return;
-      if (typeaheadTimer !== null)
-        clearTimeout(typeaheadTimer);
-      $8.set(typeaheadBuffer, $8.get(typeaheadBuffer) + char);
-      const match = registry.typeaheadMatch($8.get(typeaheadBuffer), currentId, expandedIds(), $8.get(activeVisibilityPredicate));
+      const match = registry.typeaheadMatch(typeaheadBuffer.push(char), currentId, expandedIds(), $8.get(activeVisibilityPredicate));
       if (match)
         focusNode(match);
-      typeaheadTimer = setTimeout(() => {
-        $8.set(typeaheadBuffer, "");
-        typeaheadTimer = null;
-      }, 500);
     },
     expandSiblings(currentId) {
       const siblings = registry.siblingsOf(currentId);
@@ -3781,32 +3894,20 @@ function Tree($$anchor, $$props) {
     }
   }
   function handleVirtualizedTypeahead(event2) {
-    if (disableTypeahead() || event2.key.length !== 1 || event2.ctrlKey || event2.metaKey || event2.altKey) {
+    if (disableTypeahead() || !isTypeaheadKey(event2)) {
       return false;
     }
     event2.preventDefault();
-    if (typeaheadTimer !== null)
-      clearTimeout(typeaheadTimer);
-    $8.set(typeaheadBuffer, $8.get(typeaheadBuffer) + event2.key.toLowerCase());
     const startIndex = currentVirtualIndex();
-    for (let offset = 1;offset <= $8.get(visibleDataItems).length; offset++) {
-      const index = (startIndex + offset) % $8.get(visibleDataItems).length;
-      const item = $8.get(visibleDataItems)[index];
-      if (item?.label.toLowerCase().startsWith($8.get(typeaheadBuffer))) {
-        focusVirtualIndex(index);
-        break;
-      }
-    }
-    typeaheadTimer = setTimeout(() => {
-      $8.set(typeaheadBuffer, "");
-      typeaheadTimer = null;
-    }, 500);
+    const match = findTypeaheadMatch($8.get(visibleDataItems).map((item, index) => ({ value: index, label: item.label, disabled: item.disabled })), typeaheadBuffer.push(event2.key), startIndex);
+    if (match !== undefined)
+      focusVirtualIndex(match);
     return true;
   }
   function updateFilterValue(next) {
     if (!$8.get(isFilterControlled))
       $8.set(uncontrolledFilterValue, next, true);
-    $$props.onFilterChange?.(next);
+    $$props.onfilterchange?.(next);
   }
   function handleFilterInput(event2) {
     const target = event2.currentTarget;
@@ -3906,6 +4007,12 @@ function Tree($$anchor, $$props) {
       setExpandedInternal(item.id, !expandedIds().includes(item.id));
     }
   }
+  function handleVirtualizedDisclosureClick(item, event2) {
+    event2.stopPropagation();
+    $8.set(focusedId, item.id, true);
+    $8.get(treeElement)?.focus();
+    setExpandedInternal(item.id, !expandedIds().includes(item.id));
+  }
   function syncVirtualizedCheckboxElement(element, id) {
     const state5 = selectionStateForId(id);
     element.checked = state5.checked;
@@ -3943,14 +4050,14 @@ function Tree($$anchor, $$props) {
     activateVirtualizedItemFromKeyboard(item, event2);
   }
   var fragment_3 = root4();
-  var node_6 = $8.first_child(fragment_3);
+  var node_7 = $8.first_child(fragment_3);
   {
-    var consequent_8 = ($$anchor2) => {
-      var div_4 = root_92();
-      var node_7 = $8.child(div_4);
+    var consequent_9 = ($$anchor2) => {
+      var div_4 = root_112();
+      var node_8 = $8.child(div_4);
       {
-        var consequent_3 = ($$anchor3) => {
-          var div_5 = root_102();
+        var consequent_4 = ($$anchor3) => {
+          var div_5 = root_122();
           var label_1 = $8.child(div_5);
           var text_1 = $8.child(label_1, true);
           $8.reset(label_1);
@@ -3972,52 +4079,52 @@ function Tree($$anchor, $$props) {
           $8.delegated("keydown", input_1, handleFilterKeydown);
           $8.append($$anchor3, div_5);
         };
-        $8.if(node_7, ($$render) => {
+        $8.if(node_8, ($$render) => {
           if (showSearch())
-            $$render(consequent_3);
+            $$render(consequent_4);
         });
       }
-      var node_8 = $8.sibling(node_7, 2);
+      var node_9 = $8.sibling(node_8, 2);
       {
-        var consequent_4 = ($$anchor3) => {
-          var div_6 = root_112();
-          var node_9 = $8.child(div_6);
-          $8.snippet(node_9, () => $$props.selectionControls);
+        var consequent_5 = ($$anchor3) => {
+          var div_6 = root_132();
+          var node_10 = $8.child(div_6);
+          $8.snippet(node_10, () => $$props.selectionControls);
           $8.reset(div_6);
           $8.append($$anchor3, div_6);
         };
-        $8.if(node_8, ($$render) => {
+        $8.if(node_9, ($$render) => {
           if ($$props.selectionControls)
-            $$render(consequent_4);
+            $$render(consequent_5);
         });
       }
-      var node_10 = $8.sibling(node_8, 2);
+      var node_11 = $8.sibling(node_9, 2);
       {
-        var consequent_5 = ($$anchor3) => {
-          var div_7 = root_122();
+        var consequent_6 = ($$anchor3) => {
+          var div_7 = root_142();
           $8.template_effect(() => $8.set_attribute(div_7, "id", $8.get(dragInstructionsId)));
           $8.append($$anchor3, div_7);
         };
-        $8.if(node_10, ($$render) => {
-          if ($$props.onReorder)
-            $$render(consequent_5);
+        $8.if(node_11, ($$render) => {
+          if ($$props.onreorder)
+            $$render(consequent_6);
         });
       }
-      var node_11 = $8.sibling(node_10, 2);
-      treeBody(node_11);
       var node_12 = $8.sibling(node_11, 2);
+      treeBody(node_12);
+      var node_13 = $8.sibling(node_12, 2);
       {
-        var consequent_6 = ($$anchor3) => {
-          var div_8 = root_132();
+        var consequent_7 = ($$anchor3) => {
+          var div_8 = root_152();
           $8.append($$anchor3, div_8);
         };
-        $8.if(node_12, ($$render) => {
+        $8.if(node_13, ($$render) => {
           if ($8.get(hasNoFilterResults))
-            $$render(consequent_6);
+            $$render(consequent_7);
         });
       }
-      var node_13 = $8.sibling(node_12, 2);
-      _visually_hidden_live_region(node_13, {
+      var node_14 = $8.sibling(node_13, 2);
+      _visually_hidden_live_region(node_14, {
         get message() {
           return $8.get(filterStatusAnnouncement);
         },
@@ -4026,9 +4133,9 @@ function Tree($$anchor, $$props) {
         },
         priority: "polite"
       });
-      var node_14 = $8.sibling(node_13, 2);
+      var node_15 = $8.sibling(node_14, 2);
       {
-        var consequent_7 = ($$anchor3) => {
+        var consequent_8 = ($$anchor3) => {
           _visually_hidden_live_region($$anchor3, {
             get message() {
               return $8.get(dragAnnouncement);
@@ -4039,26 +4146,26 @@ function Tree($$anchor, $$props) {
             priority: "assertive"
           });
         };
-        $8.if(node_14, ($$render) => {
-          if ($$props.onReorder)
-            $$render(consequent_7);
+        $8.if(node_15, ($$render) => {
+          if ($$props.onreorder)
+            $$render(consequent_8);
         });
       }
       $8.reset(div_4);
       $8.append($$anchor2, div_4);
     };
-    var alternate_2 = ($$anchor2) => {
+    var alternate_3 = ($$anchor2) => {
       treeBody($$anchor2);
     };
-    $8.if(node_6, ($$render) => {
+    $8.if(node_7, ($$render) => {
       if ($8.get(hasTreeChrome))
-        $$render(consequent_8);
+        $$render(consequent_9);
       else
-        $$render(alternate_2, -1);
+        $$render(alternate_3, -1);
     });
   }
-  var node_15 = $8.sibling(node_6, 2);
-  _visually_hidden_live_region(node_15, {
+  var node_16 = $8.sibling(node_7, 2);
+  _visually_hidden_live_region(node_16, {
     get message() {
       return $8.get(expansionAnnouncement);
     },
@@ -4084,4 +4191,4 @@ export {
   Tree2 as Tree
 };
 
-//# debugId=9F27635FB502261164756E2164756E21
+//# debugId=D0EB323FE883176E64756E2164756E21