@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/transfer-list/transfer-list.svelte

@@ -15,6 +15,7 @@
 </script>
 
 <script lang="ts">
+  import { tick } from 'svelte';
   import { SvelteSet } from 'svelte/reactivity';
 
   import { classNames } from '../../utilities/class-names.ts';
@@ -28,7 +29,7 @@
     value = $bindable([]),
     leftLabel = 'Available',
     rightLabel = 'Selected',
-    onChange,
+    onchange,
     class: customClassName,
     ...rest
   }: TransferListProps = $props();
@@ -37,6 +38,9 @@
   let rightSelectedIds = $state<string[]>([]);
   let leftActiveId = $state<string | null>(null);
   let rightActiveId = $state<string | null>(null);
+  let focusedSide = $state<'left' | 'right' | null>(null);
+  let leftListElement: HTMLUListElement | undefined = $state();
+  let rightListElement: HTMLUListElement | undefined = $state();
 
   const announcer = useAnnouncer({ clearDelay: 5000 });
 
@@ -146,7 +150,7 @@
   function commitValue(nextValue: string[], announcement: string): void {
     const dedupedKnownValue = [...new Set(nextValue)].filter((id) => itemById.has(id));
     value = dedupedKnownValue;
-    onChange?.(dedupedKnownValue);
+    onchange?.(dedupedKnownValue);
     announcer.announce(announcement);
   }
 
@@ -154,25 +158,35 @@
     return count === 1 ? 'item' : 'items';
   }
 
-  function moveSelectedRight(): void {
+  function focusList(side: 'left' | 'right'): void {
+    const listElement = side === 'left' ? leftListElement : rightListElement;
+    listElement?.focus();
+    focusedSide = side;
+  }
+
+  async function moveSelectedRight(): Promise<void> {
     if (movableLeftSelectedIds.length === 0) return;
     commitValue(
       [...knownValue, ...movableLeftSelectedIds],
       `${movableLeftSelectedIds.length} ${pluralize(movableLeftSelectedIds.length)} moved to ${rightLabel}.`,
     );
     leftSelectedIds = [];
+    await tick();
+    focusList(leftItems.some((item) => canMoveItem('left', item)) ? 'left' : 'right');
   }
 
-  function moveAllRight(): void {
+  async function moveAllRight(): Promise<void> {
     if (movableLeftItemIds.length === 0) return;
     commitValue(
       [...knownValue, ...movableLeftItemIds],
       `${movableLeftItemIds.length} ${pluralize(movableLeftItemIds.length)} moved to ${rightLabel}.`,
     );
     leftSelectedIds = [];
+    await tick();
+    focusList('right');
   }
 
-  function moveSelectedLeft(): void {
+  async function moveSelectedLeft(): Promise<void> {
     if (movableRightSelectedIds.length === 0) return;
     const removing = new Set(movableRightSelectedIds);
     commitValue(
@@ -180,9 +194,11 @@
       `${movableRightSelectedIds.length} ${pluralize(movableRightSelectedIds.length)} moved to ${leftLabel}.`,
     );
     rightSelectedIds = [];
+    await tick();
+    focusList(rightItems.length > 0 ? 'right' : 'left');
   }
 
-  function moveAllLeft(): void {
+  async function moveAllLeft(): Promise<void> {
     if (movableRightItemIds.length === 0) return;
     const removing = new Set(movableRightItemIds);
     commitValue(
@@ -190,6 +206,8 @@
       `${movableRightItemIds.length} ${pluralize(movableRightItemIds.length)} moved to ${leftLabel}.`,
     );
     rightSelectedIds = [];
+    await tick();
+    focusList('left');
   }
 
   function toggleId(side: 'left' | 'right', id: string): void {
@@ -238,6 +256,7 @@
   }
 
   function handleListFocus(side: 'left' | 'right'): void {
+    focusedSide = side;
     if (side === 'left') {
       leftActiveId = resolvedLeftActiveId;
     } else {
@@ -245,6 +264,13 @@
     }
   }
 
+  function handleListBlur(event: FocusEvent, side: 'left' | 'right'): void {
+    const nextTarget = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+    const currentTarget = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+    if (currentTarget && nextTarget && currentTarget.contains(nextTarget)) return;
+    if (focusedSide === side) focusedSide = null;
+  }
+
   function handleListKeydown(event: KeyboardEvent, side: 'left' | 'right'): void {
     const sideItems = side === 'left' ? leftItems : rightItems;
     const activeId = side === 'left' ? resolvedLeftActiveId : resolvedRightActiveId;
@@ -292,13 +318,15 @@
     <section class="cinder-transfer-list__panel" aria-labelledby={`${baseId}-left-label`}>
       <h3 id={`${baseId}-left-label`} class="cinder-transfer-list__label">{leftLabel}</h3>
       <ul
+        bind:this={leftListElement}
         class="cinder-transfer-list__list"
         role="listbox"
         aria-multiselectable="true"
         aria-labelledby={`${baseId}-left-label`}
-        aria-activedescendant={leftActiveOptionId}
+        aria-activedescendant={focusedSide === 'left' ? leftActiveOptionId : undefined}
         tabindex="0"
         onfocus={() => handleListFocus('left')}
+        onblur={(event) => handleListBlur(event, 'left')}
         onclick={(event) => handleListClick(event, 'left')}
         onkeydown={(event) => handleListKeydown(event, 'left')}
       >
@@ -309,7 +337,9 @@
             role="option"
             aria-selected={leftSelectedSet.has(item.id) ? 'true' : 'false'}
             aria-disabled={item.disabled ? 'true' : undefined}
-            data-cinder-active={resolvedLeftActiveId === item.id ? 'true' : undefined}
+            data-cinder-active={focusedSide === 'left' && resolvedLeftActiveId === item.id
+              ? 'true'
+              : undefined}
             data-cinder-transfer-list-item-id={item.id}
           >
             {item.label}
@@ -362,13 +392,15 @@
     <section class="cinder-transfer-list__panel" aria-labelledby={`${baseId}-right-label`}>
       <h3 id={`${baseId}-right-label`} class="cinder-transfer-list__label">{rightLabel}</h3>
       <ul
+        bind:this={rightListElement}
         class="cinder-transfer-list__list"
         role="listbox"
         aria-multiselectable="true"
         aria-labelledby={`${baseId}-right-label`}
-        aria-activedescendant={rightActiveOptionId}
+        aria-activedescendant={focusedSide === 'right' ? rightActiveOptionId : undefined}
         tabindex="0"
         onfocus={() => handleListFocus('right')}
+        onblur={(event) => handleListBlur(event, 'right')}
         onclick={(event) => handleListClick(event, 'right')}
         onkeydown={(event) => handleListKeydown(event, 'right')}
       >
@@ -378,7 +410,9 @@
             class="cinder-transfer-list__option"
             role="option"
             aria-selected={rightSelectedSet.has(item.id) ? 'true' : 'false'}
-            data-cinder-active={resolvedRightActiveId === item.id ? 'true' : undefined}
+            data-cinder-active={focusedSide === 'right' && resolvedRightActiveId === item.id
+              ? 'true'
+              : undefined}
             data-cinder-transfer-list-item-id={item.id}
           >
             {item.label}

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

@@ -13,7 +13,10 @@ export type TransferListItem = {
 };
 
 /** Props for the TransferList component. */
-export type TransferListProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+export type TransferListProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children' | 'class' | 'onchange'
+> & {
   /** Full item pool. Item IDs must be unique; duplicate IDs after the first are ignored. The component never mutates this array. */
   items: TransferListItem[];
   /** Unique IDs currently assigned to the right-side selected list. Supports `bind:value`. Unknown IDs are ignored and dropped on the next transfer. */
@@ -29,7 +32,7 @@ export type TransferListProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'
    */
   rightLabel?: string;
   /** Called with the next right-side value after a transfer. */
-  onChange?: (value: string[]) => void;
+  onchange?: (value: string[]) => void;
   /** Custom class merged with `.cinder-transfer-list`. */
   class?: string;
 };

package/src/components/tree/README.md

@@ -53,8 +53,8 @@ The leaf remains importable individually for à-la-carte builds — see
 | `children`                         | `(opaque)`                             | no       | —       | Tree items (snippet). Required when virtualized is false or omitted; mutually exclusive with items. Not expressible in JSON Schema; see the component types for the signature. |
 | `filterPredicate`                  | `(opaque)`                             | no       | —       | Custom filter predicate. Default: case-insensitive label substring matching. Not expressible in JSON Schema; see the component types for the signature.                        |
 | `items`                            | `(opaque)`                             | no       | —       | Data-driven Tree items. Required when virtualized is true; mutually exclusive with children. Not expressible in JSON Schema; see the component types for the signature.        |
-| `onFilterChange`                   | `(opaque)`                             | no       | —       | Fires whenever the built-in search input changes the filter query. Not expressible in JSON Schema; see the component types for the signature.                                  |
-| `onReorder`                        | `(opaque)`                             | no       | —       | Called when a draggable item is dropped before, after, or into another tree item. Not expressible in JSON Schema; see the component types for the signature.                   |
+| `onfilterchange`                   | `(opaque)`                             | no       | —       | Fires whenever the built-in search input changes the filter query. Not expressible in JSON Schema; see the component types for the signature.                                  |
+| `onreorder`                        | `(opaque)`                             | no       | —       | Called when a draggable item is dropped before, after, or into another tree item. Not expressible in JSON Schema; see the component types for the signature.                   |
 | `ref`                              | `(opaque)`                             | no       | —       | Typed programmatic handle. Use `bind:ref` to receive it. Not expressible in JSON Schema; see the component types for the signature.                                            |
 | `selectionControls`                | `(opaque)`                             | no       | —       | Optional selection controls rendered before the role="tree" element. Not expressible in JSON Schema; see the component types for the signature.                                |
 | `virtualizedItem`                  | `(opaque)`                             | no       | —       | Optional custom virtualized row renderer. Not expressible in JSON Schema; see the component types for the signature.                                                           |

package/src/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/src/components/tree/tree.examples.json

@@ -37,7 +37,7 @@
       "id": "reorder",
       "title": "Drag reorder",
       "description": "Draggable tree items emit a consumer-owned reorder target. The example records the last drop so pointer behavior can be verified.",
-      "code": "<script lang=\"ts\">\n  import { Tree } from '@lostgradient/cinder/tree';\n\n  type ReorderTarget = {\n    id: string;\n    position: 'before' | 'after' | 'child';\n  };\n\n  const items = [\n    { id: 'alpha', label: 'Alpha' },\n    { id: 'beta', label: 'Beta', branch: true },\n    { id: 'gamma', label: 'Gamma' },\n    { id: 'delta', label: 'Delta' },\n    { id: 'epsilon', label: 'Epsilon' },\n    { id: 'zeta', label: 'Zeta' },\n  ];\n\n  let lastDrop = $state('none');\n\n  function handleReorder(draggedId: string, target: ReorderTarget): void {\n    lastDrop = `${draggedId}:${target.position}:${target.id}`;\n  }\n</script>\n\n<Tree\n  class=\"reorder-tree\"\n  aria-label=\"Reorder files\"\n  onReorder={handleReorder}\n  style=\"max-block-size: 7rem; overflow: auto; border: 1px solid var(--cinder-border); border-radius: var(--cinder-radius-md);\"\n>\n  {#each items as item (item.id)}\n    {#if item.branch}\n      <Tree.Item id={item.id} label={item.label} branch draggable />\n    {:else}\n      <Tree.Item id={item.id} label={item.label} draggable />\n    {/if}\n  {/each}\n</Tree>\n\n<p data-testid=\"last-drop\" style=\"margin-block-start: 0.75rem;\">\n  {lastDrop}\n</p>\n"
+      "code": "<script lang=\"ts\">\n  import { Tree } from '@lostgradient/cinder/tree';\n\n  type ReorderTarget = {\n    id: string;\n    position: 'before' | 'after' | 'child';\n  };\n\n  const items = [\n    { id: 'alpha', label: 'Alpha' },\n    { id: 'beta', label: 'Beta', branch: true },\n    { id: 'gamma', label: 'Gamma' },\n    { id: 'delta', label: 'Delta' },\n    { id: 'epsilon', label: 'Epsilon' },\n    { id: 'zeta', label: 'Zeta' },\n  ];\n\n  let lastDrop = $state('none');\n\n  function handleReorder(draggedId: string, target: ReorderTarget): void {\n    lastDrop = `${draggedId}:${target.position}:${target.id}`;\n  }\n</script>\n\n<Tree\n  class=\"reorder-tree\"\n  aria-label=\"Reorder files\"\n  onreorder={handleReorder}\n  style=\"max-block-size: 7rem; overflow: auto; border: 1px solid var(--cinder-border); border-radius: var(--cinder-radius-md);\"\n>\n  {#each items as item (item.id)}\n    {#if item.branch}\n      <Tree.Item id={item.id} label={item.label} branch draggable />\n    {:else}\n      <Tree.Item id={item.id} label={item.label} draggable />\n    {/if}\n  {/each}\n</Tree>\n\n<p data-testid=\"last-drop\" style=\"margin-block-start: 0.75rem;\">\n  {lastDrop}\n</p>\n"
     },
     {
       "id": "virtualized",

package/src/components/tree/tree.svelte

@@ -76,11 +76,11 @@
     style: styleAttribute,
     selectionControls,
     filterValue,
-    onFilterChange,
+    onfilterchange,
     filterPlaceholder = 'Search tree',
     showSearch = false,
     filterPredicate = defaultFilterPredicate,
-    onReorder,
+    onreorder,
     children,
     ...rest
   }: TreeProps = $props();
@@ -192,7 +192,7 @@
     () => new Map(flattenedDataItems.map((item) => [item.id, item])),
   );
   const hasTreeChrome = $derived(
-    selectionControls != null || showSearch || filtering || onReorder != null,
+    selectionControls != null || showSearch || filtering || onreorder != null,
   );
   const hasRegisteredItems = $derived(
     isVirtualizedTree ? flattenedDataItems.length > 0 : registry.size > 0,
@@ -386,6 +386,17 @@
     );
   }
 
+  function virtualizedFilterForcedOpen(item: FlattenedTreeDataItem): boolean {
+    return (
+      item.branch &&
+      filtering &&
+      !expandedIds.includes(item.id) &&
+      visibleDataItems.some(
+        (visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id),
+      )
+    );
+  }
+
   function firstVisibleVirtualizedChildIndex(parentId: string): number {
     return visibleDataItems.findIndex((item) => item.parentId === parentId);
   }
@@ -430,7 +441,7 @@
   }
 
   $effect(() => {
-    if (!onReorder) {
+    if (!onreorder) {
       dragController = null;
       return;
     }
@@ -443,7 +454,7 @@
         isBranch: (id) => registry.getNode(id)?.isBranch() ?? false,
         focus: focusNode,
         announce: announceDrag,
-        commit: (draggedId, target) => onReorder?.(draggedId, target),
+        commit: (draggedId, target) => onreorder?.(draggedId, target),
       })),
     );
   });
@@ -561,7 +572,7 @@
     focusItem(id);
   }
 
-  function scrollToRow(id: string, options?: ScrollIntoViewOptions): void {
+  function scrollToRow(id: string, options: ScrollIntoViewOptions | undefined = undefined): void {
     if (isVirtualizedTree) {
       const index = visibleIds.indexOf(id);
       if (index !== -1) {
@@ -805,6 +816,15 @@
     isFocused(id) {
       return effectiveFocusedId === id;
     },
+    positionInSet(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
+      const index = siblings.indexOf(id);
+      return index === -1 ? undefined : index + 1;
+    },
+    setSize(id) {
+      const siblings = registry.siblingsOf(id).filter((siblingId) => visibleIdSet.has(siblingId));
+      return siblings.length || undefined;
+    },
     isVisible(id) {
       return visibleIdSet.has(id);
     },
@@ -1053,7 +1073,7 @@
 
   function updateFilterValue(next: string): void {
     if (!isFilterControlled) uncontrolledFilterValue = next;
-    onFilterChange?.(next);
+    onfilterchange?.(next);
   }
 
   function handleFilterInput(event: Event): void {
@@ -1165,12 +1185,21 @@
     focusedId = item.id;
     treeElement?.focus();
     if (event.detail > 1) return;
+
     if (!item.disabled) toggleSelectedInternal(item.id, event);
+
     if (item.branch && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
       setExpandedInternal(item.id, !expandedIds.includes(item.id));
     }
   }
 
+  function handleVirtualizedDisclosureClick(item: FlattenedTreeDataItem, event: MouseEvent): void {
+    event.stopPropagation();
+    focusedId = item.id;
+    treeElement?.focus();
+    setExpandedInternal(item.id, !expandedIds.includes(item.id));
+  }
+
   function syncVirtualizedCheckboxElement(element: HTMLInputElement, id: string): void {
     const state = selectionStateForId(id);
     element.checked = state.checked;
@@ -1248,6 +1277,20 @@
         onkeydown={(event) => handleVirtualizedItemKeydown(item, event)}
       >
         <div class="cinder-tree-item__row" style={`padding-inline-start: ${item.level * 1.25}rem;`}>
+          {#if item.branch && !virtualizedFilterForcedOpen(item)}
+            <button
+              type="button"
+              class="cinder-tree-item__disclosure"
+              aria-label={`${virtualizedItemExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`}
+              aria-expanded={virtualizedItemExpanded(item)}
+              tabindex="-1"
+              onclick={(event) => handleVirtualizedDisclosureClick(item, event)}
+            >
+              <span aria-hidden="true"></span>
+            </button>
+          {:else}
+            <span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>
+          {/if}
           {#if checkboxSelectionActive()}
             <input
               type="checkbox"
@@ -1339,7 +1382,7 @@
       </div>
     {/if}
 
-    {#if onReorder}
+    {#if onreorder}
       <div id={dragInstructionsId} 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.
@@ -1358,7 +1401,7 @@
       priority="polite"
     />
 
-    {#if onReorder}
+    {#if onreorder}
       <VisuallyHiddenLiveRegion
         message={dragAnnouncement}
         announcementSequence={dragAnnouncementSequence}

package/src/components/tree/tree.types.ts

@@ -69,7 +69,7 @@ type TreeSharedProps = Omit<
   /** 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. */
@@ -77,7 +77,7 @@ type TreeSharedProps = Omit<
   /** 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/src/components/tree-item/README.md

@@ -19,14 +19,14 @@ snippet. The flat `@lostgradient/cinder/tree-item` subpath remains exported for
 | `branch`            | `boolean`  | no       | —       | Marks the node as an expandable branch. A node is a leaf unless it sets `branch` or `loadChildren`; supplying a `children` snippet alone is not enough. Marking the node as a branch lets the tree render the correct expand affordance and `aria-expanded` state before any children exist (for example, before an async `loadChildren` resolves).     |
 | `class`             | `string`   | no       | —       | Additional CSS class merged with `.cinder-tree-item`.                                                                                                                                                                                                                                                                                                   |
 | `disabled`          | `boolean`  | no       | —       | When true, the item cannot be selected or actioned. Still keyboard-reachable.                                                                                                                                                                                                                                                                           |
-| `draggable`         | `boolean`  | no       | —       | Render a reorder handle when the parent Tree provides onReorder.                                                                                                                                                                                                                                                                                        |
+| `draggable`         | `boolean`  | no       | —       | Render a reorder handle when the parent Tree provides onreorder.                                                                                                                                                                                                                                                                                        |
 | `id`                | `string`   | yes      | —       | Stable unique id within the tree.                                                                                                                                                                                                                                                                                                                       |
 | `label`             | `string`   | yes      | —       | Accessible name for the item. Also used as the typeahead key.                                                                                                                                                                                                                                                                                           |
 | `selectionScopeIds` | `string`[] | no       | —       | Explicit selectable ids controlled by this item in cascade checkbox-selection mode.                                                                                                                                                                                                                                                                     |
 | `children`          | `(opaque)` | no       | —       | Nested TreeItem children for branch nodes. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                   |
-| `loadChildren`      | `(opaque)` | no       | —       | 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 `console.error` with a `[cinder-tree]` prefix. Not expressible in JSON Schema; see the component types for the signature. |
-| `onLoadError`       | `(opaque)` | no       | —       | Called when `loadChildren` rejects with a non-abort error. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                   |
-| `onRename`          | `(opaque)` | no       | —       | Called when inline label editing commits a new label. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                        |
+| `loadChildren`      | `(opaque)` | no       | —       | 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 `console.error` with a `[cinder-tree]` prefix. Not expressible in JSON Schema; see the component types for the signature. |
+| `onloaderror`       | `(opaque)` | no       | —       | Called when `loadChildren` rejects with a non-abort error. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                   |
+| `onrename`          | `(opaque)` | no       | —       | Called when inline label editing commits a new label. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                        |
 | `row`               | `(opaque)` | no       | —       | Optional row content snippet override. Default renders `label`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                              |
 
 <!-- generated:props:end -->

package/src/components/tree-item/tree-item.svelte

@@ -45,8 +45,8 @@
     draggable = false,
     branch = false,
     loadChildren,
-    onLoadError,
-    onRename,
+    onloaderror,
+    onrename,
     selectionScopeIds,
     row,
     children,
@@ -105,6 +105,8 @@
   const isExpanded = $derived(context.expandedIds.includes(id));
   const isSelected = $derived(context.selectedIds.includes(id));
   const isFocused = $derived(context.focusedId === id);
+  const positionInSet = $derived(context.positionInSet(id));
+  const setSize = $derived(context.setSize(id));
   const isFiltering = $derived(context.filtering);
   const isVisible = $derived(
     !isFiltering ||
@@ -113,6 +115,7 @@
   );
   const hasVisibleDescendant = $derived(context.hasVisibleDescendant(id));
   const renderedExpanded = $derived(isExpanded || (isFiltering && hasVisibleDescendant));
+  const filterForcedOpen = $derived(isBranch && isFiltering && hasVisibleDescendant && !isExpanded);
   const shouldProbeFilterChildren = $derived(
     isBranch && isFiltering && !isExpanded && probedFilterValue !== context.filterValue,
   );
@@ -122,7 +125,7 @@
   const checkboxSelectionActive = $derived(context.checkboxSelectionActive());
   const selectionState = $derived(context.selectionStateFor(id));
   const labelSegments = $derived.by(() => splitLabelForHighlight(label, context.filterValue));
-  const canRename = $derived(!disabled && onRename != null);
+  const canRename = $derived(!disabled && onrename != null);
   const editingLabel = $derived(`Editing: ${label}`);
   const dragController = $derived(context.dragController);
   const canDrag = $derived(draggable && !disabled && dragController != null);
@@ -248,8 +251,8 @@
       loaded = false;
       // Collapse the branch on error
       context.setExpanded(id, false);
-      if (onLoadError) {
-        onLoadError(error, id);
+      if (onloaderror) {
+        onloaderror(error, id);
       } else {
         console.error('[cinder-tree] loadChildren failed for item', id, error);
       }
@@ -352,7 +355,7 @@
     announceRename(`Editing ${label}. Press Enter to confirm, Escape to cancel.`);
   }
 
-  function finishEdit(afterFocus?: () => void): void {
+  function finishEdit(afterFocus: (() => void) | undefined = undefined): void {
     editing = false;
     renameError = '';
     renamePending = false;
@@ -368,7 +371,7 @@
     finishEdit();
   }
 
-  async function commitEdit(afterFocus?: () => void): Promise<boolean> {
+  async function commitEdit(afterFocus: (() => void) | undefined = undefined): Promise<boolean> {
     if (!editing || renamePending) return false;
 
     if (editValue.trim().length === 0) {
@@ -378,7 +381,7 @@
       return false;
     }
 
-    if (!onRename) {
+    if (!onrename) {
       finishEdit(afterFocus);
       return true;
     }
@@ -386,7 +389,7 @@
     renamePending = true;
     renameError = '';
     try {
-      await onRename(id, editValue);
+      await onrename(id, editValue);
       announceRename(`${editValue}, renamed.`);
       finishEdit(afterFocus);
       return true;
@@ -671,14 +674,24 @@
 
     if (event.detail > 1) return;
 
-    if (!disabled && !checkboxSelectionActive) context.toggleSelected(id, event);
+    if (disabled) {
+      if (isBranch) context.setExpanded(id, !isExpanded);
+      return;
+    }
+
+    if (!checkboxSelectionActive) context.toggleSelected(id, event);
 
     if (isBranch && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
-      // Plain click on a branch row toggles expand, including disabled branches.
       context.setExpanded(id, !isExpanded);
     }
   }
 
+  function handleDisclosureClick(event: MouseEvent): void {
+    event.stopPropagation();
+    outerElement?.focus();
+    context.setExpanded(id, !isExpanded);
+  }
+
   function handleLabelDoubleClick(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
@@ -754,6 +767,8 @@
   aria-labelledby={editing ? undefined : `${treeItemElementId}-label`}
   aria-level={level}
   aria-expanded={isBranch ? renderedExpanded : undefined}
+  aria-posinset={positionInSet}
+  aria-setsize={setSize}
   aria-selected={context.selectionMode === 'none' || checkboxSelectionActive
     ? undefined
     : isSelected}
@@ -778,6 +793,21 @@
 >
   <span id={`${treeItemElementId}-label`} class="cinder-sr-only">{label}</span>
   <div class="cinder-tree-item__row">
+    {#if isBranch && !filterForcedOpen}
+      <button
+        type="button"
+        class="cinder-tree-item__disclosure"
+        aria-label={`${renderedExpanded ? 'Collapse' : 'Expand'} ${label}`}
+        aria-expanded={renderedExpanded}
+        tabindex="-1"
+        onclick={handleDisclosureClick}
+      >
+        <span aria-hidden="true"></span>
+      </button>
+    {:else}
+      <span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>
+    {/if}
+
     {#if canDrag}
       <button
         bind:this={dragHandleElement}
@@ -885,7 +915,7 @@
       {@render children?.()}
     </div>
   {/if}
-  {#if onRename}
+  {#if onrename}
     <VisuallyHiddenLiveRegion
       message={renameAnnouncement}
       announcementSequence={renameAnnouncementSequence}