@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/tree/tree.css

@@ -52,6 +52,14 @@
     box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-tree__filter-input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-tree__selection-controls {
     display: flex;
     flex-wrap: wrap;
@@ -151,6 +159,51 @@
     user-select: none;
   }
 
+  .cinder-tree-item__disclosure,
+  .cinder-tree-item__disclosure-spacer {
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+  .cinder-tree-item__disclosure {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--cinder-radius-sm);
+    background: transparent;
+    color: currentcolor;
+    cursor: pointer;
+  }
+
+  .cinder-tree-item__disclosure > span {
+    inline-size: 0.45rem;
+    block-size: 0.45rem;
+    border-inline-end: 1.5px solid currentcolor;
+    border-block-end: 1.5px solid currentcolor;
+    transform: rotate(-45deg);
+    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-tree-item__disclosure[aria-expanded='true'] > span {
+    transform: rotate(45deg);
+  }
+
+  .cinder-tree-item__disclosure:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-tree-item__disclosure:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-tree-item__checkbox {
     flex: 0 0 auto;
     width: 1rem;
@@ -186,6 +239,14 @@
     box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-tree-item__drag-handle:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   /* Long labels must not force the tree wider than its container or overlap the
    * checkbox at narrow (mobile) widths. The element also carries `cinder-_truncate`
    * (the shared utility), which supplies overflow:hidden / text-overflow:ellipsis /
@@ -273,6 +334,14 @@
     box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-tree-item__rename-input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-tree-item__rename-input[aria-invalid='true'] {
     border-color: var(--cinder-danger);
   }

package/dist/components/tree/tree.schema.js

@@ -123,12 +123,12 @@ var schema = {
         description: "Data-driven Tree items. Required when virtualized is true; mutually exclusive with children."
       },
       {
-        name: "onFilterChange",
+        name: "onfilterchange",
         reason: "function-or-snippet",
         description: "Fires whenever the built-in search input changes the filter query."
       },
       {
-        name: "onReorder",
+        name: "onreorder",
         reason: "function-or-snippet",
         description: "Called when a draggable item is dropped before, after, or into another tree item."
       },
@@ -155,4 +155,4 @@ export {
   tree_schema_default as default
 };
 
-//# debugId=E34C48DCE13D2BB664756E2164756E21
+//# debugId=D3AC3D502D70516E64756E2164756E21

package/dist/components/tree/tree.types.d.ts

@@ -60,7 +60,7 @@ type TreeSharedProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'
     /** Controlled filter query. When provided, matching is driven by this value. */
     filterValue?: string;
     /** Fires whenever the built-in search input changes the filter query. */
-    onFilterChange?: (value: string) => void;
+    onfilterchange?: (value: string) => void;
     /** Placeholder and accessible label for the built-in search input. Default: 'Search tree'. */
     filterPlaceholder?: string;
     /** Render the built-in search input before the role="tree" element. Default: false. */
@@ -68,7 +68,7 @@ type TreeSharedProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'
     /** Custom filter predicate. Default: case-insensitive label substring matching. */
     filterPredicate?: TreeFilterPredicate;
     /** Called when a draggable item is dropped before, after, or into another tree item. */
-    onReorder?: (draggedId: string, target: TreeReorderTarget) => void;
+    onreorder?: (draggedId: string, target: TreeReorderTarget) => void;
     /** Additional CSS class merged with `.cinder-tree`. */
     class?: string;
     /** Optional selection controls rendered before the role="tree" element. */

package/dist/components/tree-item/index.js

@@ -104,13 +104,15 @@ function _visually_hidden_live_region($$anchor, $$props) {
 
 // src/components/tree-item/tree-item.svelte
 var root_4 = $2.from_html(`<mark aria-hidden="true" class="cinder-tree-item__highlight"> </mark>`);
-var root_6 = $2.from_html(`<button type="button" class="cinder-tree-item__drag-handle" tabindex="-1"><span aria-hidden="true">::</span></button>`);
-var root_8 = $2.from_html(`<input type="text" class="cinder-tree-item__rename-input"/>`);
-var root_9 = $2.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 = $2.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`);
-var root_11 = $2.from_html(`<span class="cinder-sr-only"> </span>`);
-var root_12 = $2.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
-var root_1 = $2.from_html(`<div role="treeitem"><span class="cinder-sr-only"> </span> <div class="cinder-tree-item__row"><!> <!></div> <!> <!> <!></div>`);
+var root_6 = $2.from_html(`<button type="button" class="cinder-tree-item__disclosure" tabindex="-1"><span aria-hidden="true"></span></button>`);
+var root_7 = $2.from_html(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+var root_8 = $2.from_html(`<button type="button" class="cinder-tree-item__drag-handle" tabindex="-1"><span aria-hidden="true">::</span></button>`);
+var root_10 = $2.from_html(`<input type="text" class="cinder-tree-item__rename-input"/>`);
+var root_11 = $2.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 = $2.from_html(`<span aria-hidden="true" class="cinder-tree-item__label cinder-_truncate"><!></span>`);
+var root_13 = $2.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_14 = $2.from_html(`<div role="group" class="cinder-tree-item__children"><!></div>`);
+var root_1 = $2.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 = $2.props_id();
   $2.push($$props, true);
@@ -176,16 +178,19 @@ function Tree_item($$anchor, $$props) {
   const isExpanded = $2.derived(() => context.expandedIds.includes($$props.id));
   const isSelected = $2.derived(() => context.selectedIds.includes($$props.id));
   const isFocused = $2.derived(() => context.focusedId === $$props.id);
+  const positionInSet = $2.derived(() => context.positionInSet($$props.id));
+  const setSize = $2.derived(() => context.setSize($$props.id));
   const isFiltering = $2.derived(() => context.filtering);
   const isVisible = $2.derived(() => !$2.get(isFiltering) || context.isVisible($$props.id) || !context.hasRegisteredItems && ($2.get(isBranch) || context.matchesFilter($$props.label, $$props.id)));
   const hasVisibleDescendant = $2.derived(() => context.hasVisibleDescendant($$props.id));
   const renderedExpanded = $2.derived(() => $2.get(isExpanded) || $2.get(isFiltering) && $2.get(hasVisibleDescendant));
+  const filterForcedOpen = $2.derived(() => $2.get(isBranch) && $2.get(isFiltering) && $2.get(hasVisibleDescendant) && !$2.get(isExpanded));
   const shouldProbeFilterChildren = $2.derived(() => $2.get(isBranch) && $2.get(isFiltering) && !$2.get(isExpanded) && $2.get(probedFilterValue) !== context.filterValue);
   const shouldRenderChildren = $2.derived(() => $2.get(isBranch) && ($2.get(isExpanded) || $2.get(hasVisibleDescendant) || $2.get(shouldProbeFilterChildren)));
   const checkboxSelectionActive = $2.derived(() => context.checkboxSelectionActive());
   const selectionState = $2.derived(() => context.selectionStateFor($$props.id));
   const labelSegments = $2.derived(() => splitLabelForHighlight($$props.label, context.filterValue));
-  const canRename = $2.derived(() => !disabled() && $$props.onRename != null);
+  const canRename = $2.derived(() => !disabled() && $$props.onrename != null);
   const editingLabel = $2.derived(() => `Editing: ${$$props.label}`);
   const dragController = $2.derived(() => context.dragController);
   const canDrag = $2.derived(() => draggable() && !disabled() && $2.get(dragController) != null);
@@ -270,8 +275,8 @@ function Tree_item($$anchor, $$props) {
       $2.set(busy, false);
       $2.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);
       }
@@ -355,7 +360,7 @@ function Tree_item($$anchor, $$props) {
     $2.set(editing, true);
     announceRename(`Editing ${$$props.label}. Press Enter to confirm, Escape to cancel.`);
   }
-  function finishEdit(afterFocus) {
+  function finishEdit(afterFocus = undefined) {
     $2.set(editing, false);
     $2.set(renameError, "");
     $2.set(renamePending, false);
@@ -369,7 +374,7 @@ function Tree_item($$anchor, $$props) {
     announceRename("Rename cancelled.");
     finishEdit();
   }
-  async function commitEdit(afterFocus) {
+  async function commitEdit(afterFocus = undefined) {
     if (!$2.get(editing) || $2.get(renamePending))
       return false;
     if ($2.get(editValue).trim().length === 0) {
@@ -378,14 +383,14 @@ function Tree_item($$anchor, $$props) {
       queueMicrotask(() => $2.get(renameInputElement)?.focus());
       return false;
     }
-    if (!$$props.onRename) {
+    if (!$$props.onrename) {
       finishEdit(afterFocus);
       return true;
     }
     $2.set(renamePending, true);
     $2.set(renameError, "");
     try {
-      await $$props.onRename($$props.id, $2.get(editValue));
+      await $$props.onrename($$props.id, $2.get(editValue));
       announceRename(`${$2.get(editValue)}, renamed.`);
       finishEdit(afterFocus);
       return true;
@@ -638,12 +643,22 @@ function Tree_item($$anchor, $$props) {
     $2.get(outerElement)?.focus();
     if (event2.detail > 1)
       return;
-    if (!disabled() && !$2.get(checkboxSelectionActive))
+    if (disabled()) {
+      if ($2.get(isBranch))
+        context.setExpanded($$props.id, !$2.get(isExpanded));
+      return;
+    }
+    if (!$2.get(checkboxSelectionActive))
       context.toggleSelected($$props.id, event2);
     if ($2.get(isBranch) && !event2.shiftKey && !event2.metaKey && !event2.ctrlKey) {
       context.setExpanded($$props.id, !$2.get(isExpanded));
     }
   }
+  function handleDisclosureClick(event2) {
+    event2.stopPropagation();
+    $2.get(outerElement)?.focus();
+    context.setExpanded($$props.id, !$2.get(isExpanded));
+  }
   function handleLabelDoubleClick(event2) {
     event2.preventDefault();
     event2.stopPropagation();
@@ -701,28 +716,50 @@ function Tree_item($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor2) => {
       var button = root_6();
-      $2.bind_this(button, ($$value) => $2.set(dragHandleElement, $$value), () => $2.get(dragHandleElement));
       $2.template_effect(() => {
-        $2.set_attribute(button, "aria-label", $2.get(dragHandleLabel));
-        $2.set_attribute(button, "aria-pressed", $2.get(isDraggingItem));
-        $2.set_attribute(button, "aria-describedby", context.dragInstructionsId);
+        $2.set_attribute(button, "aria-label", `${$2.get(renderedExpanded) ? "Collapse" : "Expand"} ${$$props.label}`);
+        $2.set_attribute(button, "aria-expanded", $2.get(renderedExpanded));
       });
-      $2.delegated("pointerdown", button, handleDragPointerDown);
-      $2.event("click", button, handleDragClick, true);
-      $2.delegated("keydown", button, handleDragKeyboard);
+      $2.delegated("click", button, handleDisclosureClick);
       $2.append($$anchor2, button);
     };
+    var alternate_1 = ($$anchor2) => {
+      var span_1 = root_7();
+      $2.append($$anchor2, span_1);
+    };
     $2.if(node_3, ($$render) => {
-      if ($2.get(canDrag))
+      if ($2.get(isBranch) && !$2.get(filterForcedOpen))
         $$render(consequent_1);
+      else
+        $$render(alternate_1, -1);
     });
   }
   var node_4 = $2.sibling(node_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
+      var button_1 = root_8();
+      $2.bind_this(button_1, ($$value) => $2.set(dragHandleElement, $$value), () => $2.get(dragHandleElement));
+      $2.template_effect(() => {
+        $2.set_attribute(button_1, "aria-label", $2.get(dragHandleLabel));
+        $2.set_attribute(button_1, "aria-pressed", $2.get(isDraggingItem));
+        $2.set_attribute(button_1, "aria-describedby", context.dragInstructionsId);
+      });
+      $2.delegated("pointerdown", button_1, handleDragPointerDown);
+      $2.event("click", button_1, handleDragClick, true);
+      $2.delegated("keydown", button_1, handleDragKeyboard);
+      $2.append($$anchor2, button_1);
+    };
+    $2.if(node_4, ($$render) => {
+      if ($2.get(canDrag))
+        $$render(consequent_2);
+    });
+  }
+  var node_5 = $2.sibling(node_4, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
       var fragment_3 = $2.comment();
-      var node_5 = $2.first_child(fragment_3);
-      $2.snippet(node_5, () => $$props.row, () => ({
+      var node_6 = $2.first_child(fragment_3);
+      $2.snippet(node_6, () => $$props.row, () => ({
         expanded: $2.get(isExpanded),
         selected: $2.get(isSelected),
         busy: $2.get(busy),
@@ -735,8 +772,8 @@ function Tree_item($$anchor, $$props) {
       }));
       $2.append($$anchor2, fragment_3);
     };
-    var consequent_3 = ($$anchor2) => {
-      var input = root_8();
+    var consequent_4 = ($$anchor2) => {
+      var input = root_10();
       $2.remove_input_defaults(input);
       $2.attach(input, () => focusRenameInput);
       $2.template_effect(() => {
@@ -750,78 +787,78 @@ function Tree_item($$anchor, $$props) {
       $2.bind_value(input, () => $2.get(editValue), ($$value) => $2.set(editValue, $$value));
       $2.append($$anchor2, input);
     };
-    var consequent_4 = ($$anchor2) => {
-      var fragment_4 = root_9();
+    var consequent_5 = ($$anchor2) => {
+      var fragment_4 = root_11();
       var input_1 = $2.first_child(fragment_4);
       $2.remove_input_defaults(input_1);
       $2.bind_this(input_1, ($$value) => $2.set(checkboxElement, $$value), () => $2.get(checkboxElement));
-      var span_1 = $2.sibling(input_1, 2);
-      var node_6 = $2.child(span_1);
-      visibleLabel(node_6);
-      $2.reset(span_1);
+      var span_2 = $2.sibling(input_1, 2);
+      var node_7 = $2.child(span_2);
+      visibleLabel(node_7);
+      $2.reset(span_2);
       $2.template_effect(() => {
         $2.set_checked(input_1, $2.get(selectionState).checked);
         input_1.disabled = disabled();
       });
       $2.delegated("click", input_1, handleCheckboxActivation);
-      $2.delegated("dblclick", span_1, handleLabelDoubleClick);
+      $2.delegated("dblclick", span_2, handleLabelDoubleClick);
       $2.append($$anchor2, fragment_4);
     };
-    var alternate_1 = ($$anchor2) => {
-      var span_2 = root_10();
-      var node_7 = $2.child(span_2);
-      visibleLabel(node_7);
-      $2.reset(span_2);
-      $2.delegated("dblclick", span_2, handleLabelDoubleClick);
-      $2.append($$anchor2, span_2);
+    var alternate_2 = ($$anchor2) => {
+      var span_3 = root_12();
+      var node_8 = $2.child(span_3);
+      visibleLabel(node_8);
+      $2.reset(span_3);
+      $2.delegated("dblclick", span_3, handleLabelDoubleClick);
+      $2.append($$anchor2, span_3);
     };
-    $2.if(node_4, ($$render) => {
+    $2.if(node_5, ($$render) => {
       if ($$props.row)
-        $$render(consequent_2);
+        $$render(consequent_3);
       else if ($2.get(editing))
-        $$render(consequent_3, 1);
+        $$render(consequent_4, 1);
       else if ($2.get(checkboxSelectionActive))
-        $$render(consequent_4, 2);
+        $$render(consequent_5, 2);
       else
-        $$render(alternate_1, -1);
+        $$render(alternate_2, -1);
     });
   }
   $2.reset(div_1);
-  var node_8 = $2.sibling(div_1, 2);
+  var node_9 = $2.sibling(div_1, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var span_3 = root_11();
-      var text_3 = $2.child(span_3, true);
-      $2.reset(span_3);
+    var consequent_6 = ($$anchor2) => {
+      var span_4 = root_13();
+      var text_3 = $2.child(span_4, true);
+      $2.reset(span_4);
       $2.template_effect(() => {
-        $2.set_attribute(span_3, "id", $2.get(renameMessageId));
+        $2.set_attribute(span_4, "id", $2.get(renameMessageId));
         $2.set_text(text_3, $2.get(renameError));
       });
-      $2.append($$anchor2, span_3);
+      $2.append($$anchor2, span_4);
     };
-    $2.if(node_8, ($$render) => {
+    $2.if(node_9, ($$render) => {
       if ($2.get(renameError))
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $2.sibling(node_8, 2);
+  var node_10 = $2.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var div_2 = root_12();
-      var node_10 = $2.child(div_2);
-      $2.snippet(node_10, () => $$props.children ?? $2.noop);
+    var consequent_7 = ($$anchor2) => {
+      var div_2 = root_14();
+      var node_11 = $2.child(div_2);
+      $2.snippet(node_11, () => $$props.children ?? $2.noop);
       $2.reset(div_2);
       $2.template_effect(() => $2.set_attribute(div_2, "aria-labelledby", treeItemElementId));
       $2.append($$anchor2, div_2);
     };
-    $2.if(node_9, ($$render) => {
+    $2.if(node_10, ($$render) => {
       if ($2.get(shouldRenderChildren))
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
-  var node_11 = $2.sibling(node_9, 2);
+  var node_12 = $2.sibling(node_10, 2);
   {
-    var consequent_7 = ($$anchor2) => {
+    var consequent_8 = ($$anchor2) => {
       _visually_hidden_live_region($$anchor2, {
         get message() {
           return $2.get(renameAnnouncement);
@@ -832,9 +869,9 @@ function Tree_item($$anchor, $$props) {
         priority: "assertive"
       });
     };
-    $2.if(node_11, ($$render) => {
-      if ($$props.onRename)
-        $$render(consequent_7);
+    $2.if(node_12, ($$render) => {
+      if ($$props.onrename)
+        $$render(consequent_8);
     });
   }
   $2.reset(div);
@@ -847,6 +884,8 @@ function Tree_item($$anchor, $$props) {
     $2.set_attribute(div, "aria-labelledby", $2.get(editing) ? undefined : `${treeItemElementId}-label`);
     $2.set_attribute(div, "aria-level", level);
     $2.set_attribute(div, "aria-expanded", $2.get(isBranch) ? $2.get(renderedExpanded) : undefined);
+    $2.set_attribute(div, "aria-posinset", $2.get(positionInSet));
+    $2.set_attribute(div, "aria-setsize", $2.get(setSize));
     $2.set_attribute(div, "aria-selected", context.selectionMode === "none" || $2.get(checkboxSelectionActive) ? undefined : $2.get(isSelected));
     $2.set_attribute(div, "aria-checked", $2.get(ariaChecked));
     $2.set_attribute(div, "aria-busy", $2.get(busy) || undefined);
@@ -881,4 +920,4 @@ export {
   Tree_item as TreeItem
 };
 
-//# debugId=ABD54841E050879164756E2164756E21
+//# debugId=0D6BADC824AE351164756E2164756E21

package/dist/components/tree-item/tree-item.schema.js

@@ -40,7 +40,7 @@ var schema = {
     },
     draggable: {
       type: "boolean",
-      description: "Render a reorder handle when the parent Tree provides onReorder."
+      description: "Render a reorder handle when the parent Tree provides onreorder."
     },
     branch: {
       type: "boolean",
@@ -70,15 +70,15 @@ var schema = {
       {
         name: "loadChildren",
         reason: "function-or-snippet",
-        description: "Async loader called the first time the item is expanded. Implies `branch=true`.\nThe loader mutates consumer-owned reactive state; it returns no data.\nErrors are forwarded to `onLoadError` if provided, otherwise logged via\n`console.error` with a `[cinder-tree]` prefix."
+        description: "Async loader called the first time the item is expanded. Implies `branch=true`.\nThe loader mutates consumer-owned reactive state; it returns no data.\nErrors are forwarded to `onloaderror` if provided, otherwise logged via\n`console.error` with a `[cinder-tree]` prefix."
       },
       {
-        name: "onLoadError",
+        name: "onloaderror",
         reason: "function-or-snippet",
         description: "Called when `loadChildren` rejects with a non-abort error."
       },
       {
-        name: "onRename",
+        name: "onrename",
         reason: "function-or-snippet",
         description: "Called when inline label editing commits a new label."
       },
@@ -95,4 +95,4 @@ export {
   tree_item_schema_default as default
 };
 
-//# debugId=162FD0BF9B9E15EB64756E2164756E21
+//# debugId=A171E0CA032378D064756E2164756E21

package/dist/components/tree-item/tree-item.types.d.ts

@@ -19,7 +19,7 @@ export type TreeItemProps = {
     label: string;
     /** When true, the item cannot be selected or actioned. Still keyboard-reachable. */
     disabled?: boolean;
-    /** Render a reorder handle when the parent Tree provides onReorder. */
+    /** Render a reorder handle when the parent Tree provides onreorder. */
     draggable?: boolean;
     /**
      * Marks the node as an expandable branch. A node is a leaf unless it sets `branch`
@@ -32,7 +32,7 @@ export type TreeItemProps = {
     /**
      * Async loader called the first time the item is expanded. Implies `branch=true`.
      * The loader mutates consumer-owned reactive state; it returns no data.
-     * Errors are forwarded to `onLoadError` if provided, otherwise logged via
+     * Errors are forwarded to `onloaderror` if provided, otherwise logged via
      * `console.error` with a `[cinder-tree]` prefix.
      */
     loadChildren?: (context: {
@@ -40,9 +40,9 @@ export type TreeItemProps = {
         signal: AbortSignal;
     }) => void | Promise<void>;
     /** Called when `loadChildren` rejects with a non-abort error. */
-    onLoadError?: (error: unknown, itemId: string) => void;
+    onloaderror?: (error: unknown, itemId: string) => void;
     /** Called when inline label editing commits a new label. */
-    onRename?: (itemId: string, nextLabel: string) => void | Promise<void>;
+    onrename?: (itemId: string, nextLabel: string) => void | Promise<void>;
     /** Explicit selectable ids controlled by this item in cascade checkbox-selection mode. */
     selectionScopeIds?: string[];
     /** Optional row content snippet override. Default renders `label`. */