@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/transfer-list/index.js

@@ -4,6 +4,7 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/transfer-list/transfer-list.svelte
 import * as $2 from "svelte/internal/server";
+import { tick } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
 
 // src/utilities/class-names.ts
@@ -88,7 +89,7 @@ function Transfer_list($$renderer, $$props) {
       value = [],
       leftLabel = "Available",
       rightLabel = "Selected",
-      onChange,
+      onchange,
       class: customClassName,
       $$slots,
       $$events,
@@ -98,6 +99,9 @@ function Transfer_list($$renderer, $$props) {
     let rightSelectedIds = [];
     let leftActiveId = null;
     let rightActiveId = null;
+    let focusedSide = null;
+    let leftListElement = undefined;
+    let rightListElement = undefined;
     const announcer = useAnnouncer({ clearDelay: 5000 });
     const uniqueItems = $2.derived(() => {
       const seenIds = new SvelteSet;
@@ -172,37 +176,50 @@ function Transfer_list($$renderer, $$props) {
     function commitValue(nextValue, announcement) {
       const dedupedKnownValue = [...new Set(nextValue)].filter((id) => itemById().has(id));
       value = dedupedKnownValue;
-      onChange?.(dedupedKnownValue);
+      onchange?.(dedupedKnownValue);
       announcer.announce(announcement);
     }
     function pluralize(count) {
       return count === 1 ? "item" : "items";
     }
-    function moveSelectedRight() {
+    function focusList(side) {
+      const listElement = side === "left" ? leftListElement : rightListElement;
+      listElement?.focus();
+      focusedSide = side;
+    }
+    async function moveSelectedRight() {
       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() {
+    async function moveAllRight() {
       if (movableLeftItemIds().length === 0)
         return;
       commitValue([...knownValue(), ...movableLeftItemIds()], `${movableLeftItemIds().length} ${pluralize(movableLeftItemIds().length)} moved to ${rightLabel}.`);
       leftSelectedIds = [];
+      await tick();
+      focusList("right");
     }
-    function moveSelectedLeft() {
+    async function moveSelectedLeft() {
       if (movableRightSelectedIds().length === 0)
         return;
       const removing = new Set(movableRightSelectedIds());
       commitValue(knownValue().filter((id) => !removing.has(id)), `${movableRightSelectedIds().length} ${pluralize(movableRightSelectedIds().length)} moved to ${leftLabel}.`);
       rightSelectedIds = [];
+      await tick();
+      focusList(rightItems().length > 0 ? "right" : "left");
     }
-    function moveAllLeft() {
+    async function moveAllLeft() {
       if (movableRightItemIds().length === 0)
         return;
       const removing = new Set(movableRightItemIds());
       commitValue(knownValue().filter((id) => !removing.has(id)), `${movableRightItemIds().length} ${pluralize(movableRightItemIds().length)} moved to ${leftLabel}.`);
       rightSelectedIds = [];
+      await tick();
+      focusList("left");
     }
     function toggleId(side, id) {
       const item = itemById().get(id);
@@ -244,12 +261,21 @@ function Transfer_list($$renderer, $$props) {
       handleOptionClick(side, item);
     }
     function handleListFocus(side) {
+      focusedSide = side;
       if (side === "left") {
         leftActiveId = resolvedLeftActiveId();
       } else {
         rightActiveId = resolvedRightActiveId();
       }
     }
+    function handleListBlur(event, side) {
+      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, side) {
       const sideItems = side === "left" ? leftItems() : rightItems();
       const activeId = side === "left" ? resolvedLeftActiveId() : resolvedRightActiveId();
@@ -287,25 +313,25 @@ function Transfer_list($$renderer, $$props) {
     $$renderer2.push(`<div${$2.attributes({
       ...rest,
       class: $2.clsx(classNames("cinder-transfer-list", customClassName))
-    })}><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"${$2.attr("aria-labelledby", `${baseId}-left-label`)}><h3${$2.attr("id", `${baseId}-left-label`)} class="cinder-transfer-list__label">${$2.escape(leftLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$2.attr("aria-labelledby", `${baseId}-left-label`)}${$2.attr("aria-activedescendant", leftActiveOptionId())} tabindex="0">`);
+    })}><div class="cinder-transfer-list__layout"><section class="cinder-transfer-list__panel"${$2.attr("aria-labelledby", `${baseId}-left-label`)}><h3${$2.attr("id", `${baseId}-left-label`)} class="cinder-transfer-list__label">${$2.escape(leftLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$2.attr("aria-labelledby", `${baseId}-left-label`)}${$2.attr("aria-activedescendant", focusedSide === "left" ? leftActiveOptionId() : undefined)} tabindex="0">`);
     const each_array = $2.ensure_array_like(leftItems());
     if (each_array.length !== 0) {
       $$renderer2.push("<!--[-->");
       for (let index = 0, $$length = each_array.length;index < $$length; index++) {
         let item = each_array[index];
-        $$renderer2.push(`<li${$2.attr("id", optionId("left", index))} class="cinder-transfer-list__option" role="option"${$2.attr("aria-selected", leftSelectedSet().has(item.id) ? "true" : "false")}${$2.attr("aria-disabled", item.disabled ? "true" : undefined)}${$2.attr("data-cinder-active", resolvedLeftActiveId() === item.id ? "true" : undefined)}${$2.attr("data-cinder-transfer-list-item-id", item.id)}>${$2.escape(item.label)}</li>`);
+        $$renderer2.push(`<li${$2.attr("id", optionId("left", index))} class="cinder-transfer-list__option" role="option"${$2.attr("aria-selected", leftSelectedSet().has(item.id) ? "true" : "false")}${$2.attr("aria-disabled", item.disabled ? "true" : undefined)}${$2.attr("data-cinder-active", focusedSide === "left" && resolvedLeftActiveId() === item.id ? "true" : undefined)}${$2.attr("data-cinder-transfer-list-item-id", item.id)}>${$2.escape(item.label)}</li>`);
       }
     } else {
       $$renderer2.push("<!--[!-->");
       $$renderer2.push(`<li class="cinder-transfer-list__empty" role="presentation">No available items</li>`);
     }
-    $$renderer2.push(`<!--]--></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move selected items to ${rightLabel}`)}${$2.attr("disabled", movableLeftSelectedIds().length === 0, true)}>Add</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move all items to ${rightLabel}`)}${$2.attr("disabled", movableLeftItemIds().length === 0, true)}>Add all</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move selected items to ${leftLabel}`)}${$2.attr("disabled", movableRightSelectedIds().length === 0, true)}>Remove</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move all items to ${leftLabel}`)}${$2.attr("disabled", movableRightItemIds().length === 0, true)}>Remove all</button></div> <section class="cinder-transfer-list__panel"${$2.attr("aria-labelledby", `${baseId}-right-label`)}><h3${$2.attr("id", `${baseId}-right-label`)} class="cinder-transfer-list__label">${$2.escape(rightLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$2.attr("aria-labelledby", `${baseId}-right-label`)}${$2.attr("aria-activedescendant", rightActiveOptionId())} tabindex="0">`);
+    $$renderer2.push(`<!--]--></ul></section> <div class="cinder-transfer-list__controls" role="group" aria-label="Transfer controls"><button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move selected items to ${rightLabel}`)}${$2.attr("disabled", movableLeftSelectedIds().length === 0, true)}>Add</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move all items to ${rightLabel}`)}${$2.attr("disabled", movableLeftItemIds().length === 0, true)}>Add all</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move selected items to ${leftLabel}`)}${$2.attr("disabled", movableRightSelectedIds().length === 0, true)}>Remove</button> <button type="button" class="cinder-transfer-list__control"${$2.attr("aria-label", `Move all items to ${leftLabel}`)}${$2.attr("disabled", movableRightItemIds().length === 0, true)}>Remove all</button></div> <section class="cinder-transfer-list__panel"${$2.attr("aria-labelledby", `${baseId}-right-label`)}><h3${$2.attr("id", `${baseId}-right-label`)} class="cinder-transfer-list__label">${$2.escape(rightLabel)}</h3> <ul class="cinder-transfer-list__list" role="listbox" aria-multiselectable="true"${$2.attr("aria-labelledby", `${baseId}-right-label`)}${$2.attr("aria-activedescendant", focusedSide === "right" ? rightActiveOptionId() : undefined)} tabindex="0">`);
     const each_array_1 = $2.ensure_array_like(rightItems());
     if (each_array_1.length !== 0) {
       $$renderer2.push("<!--[-->");
       for (let index = 0, $$length = each_array_1.length;index < $$length; index++) {
         let item = each_array_1[index];
-        $$renderer2.push(`<li${$2.attr("id", optionId("right", index))} class="cinder-transfer-list__option" role="option"${$2.attr("aria-selected", rightSelectedSet().has(item.id) ? "true" : "false")}${$2.attr("data-cinder-active", resolvedRightActiveId() === item.id ? "true" : undefined)}${$2.attr("data-cinder-transfer-list-item-id", item.id)}>${$2.escape(item.label)}</li>`);
+        $$renderer2.push(`<li${$2.attr("id", optionId("right", index))} class="cinder-transfer-list__option" role="option"${$2.attr("aria-selected", rightSelectedSet().has(item.id) ? "true" : "false")}${$2.attr("data-cinder-active", focusedSide === "right" && resolvedRightActiveId() === item.id ? "true" : undefined)}${$2.attr("data-cinder-transfer-list-item-id", item.id)}>${$2.escape(item.label)}</li>`);
       }
     } else {
       $$renderer2.push("<!--[!-->");
@@ -323,4 +349,4 @@ export {
   Transfer_list as TransferList
 };
 
-//# debugId=90B83B880614DAC364756E2164756E21
+//# debugId=AE33C82761133F2864756E2164756E21

package/dist/server/components/transfer-list/transfer-list.schema.js

@@ -57,7 +57,7 @@ var schema = {
   metadata: {
     unsupportedProps: [
       {
-        name: "onChange",
+        name: "onchange",
         reason: "function-or-snippet",
         description: "Called with the next right-side value after a transfer."
       }
@@ -69,4 +69,4 @@ export {
   transfer_list_schema_default as default
 };
 
-//# debugId=5199AD57833B25CF64756E2164756E21
+//# debugId=B955F423558E1B5864756E2164756E21

package/dist/server/components/tree/index.css

@@ -49,6 +49,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;
     gap: var(--cinder-space-2, .5rem);
@@ -129,6 +137,50 @@
     min-block-size: 2.25rem;
   }
 
+  .cinder-tree-item__disclosure, .cinder-tree-item__disclosure-spacer {
+    flex: none;
+    block-size: 1rem;
+    inline-size: 1rem;
+  }
+
+  .cinder-tree-item__disclosure {
+    display: inline-flex;
+    border-radius: var(--cinder-radius-sm);
+    color: currentColor;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    justify-content: center;
+    align-items:  center;
+    padding: 0;
+  }
+
+  .cinder-tree-item__disclosure > span {
+    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
+    border-block-end: 1.5px solid;
+    border-inline-end: 1.5px solid;
+    block-size: .45rem;
+    inline-size: .45rem;
+    transform: rotate(-45deg);
+  }
+
+  .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 {
     accent-color: var(--cinder-accent, currentColor);
     pointer-events: auto;
@@ -163,6 +215,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;
+    }
+  }
+
   .cinder-tree-item__label {
     flex: auto;
     min-inline-size: 0;
@@ -242,6 +302,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/server/components/tree/index.js

@@ -127,8 +127,8 @@ function Tree_item($$renderer, $$props) {
       draggable = false,
       branch = false,
       loadChildren,
-      onLoadError,
-      onRename,
+      onloaderror,
+      onrename,
       selectionScopeIds,
       row,
       children,
@@ -165,16 +165,19 @@ function Tree_item($$renderer, $$props) {
     const isExpanded = $4.derived(() => context.expandedIds.includes(id));
     const isSelected = $4.derived(() => context.selectedIds.includes(id));
     const isFocused = $4.derived(() => context.focusedId === id);
+    const positionInSet = $4.derived(() => context.positionInSet(id));
+    const setSize = $4.derived(() => context.setSize(id));
     const isFiltering = $4.derived(() => context.filtering);
     const isVisible = $4.derived(() => !isFiltering() || context.isVisible(id) || !context.hasRegisteredItems && (isBranch() || context.matchesFilter(label, id)));
     const hasVisibleDescendant = $4.derived(() => context.hasVisibleDescendant(id));
     const renderedExpanded = $4.derived(() => isExpanded() || isFiltering() && hasVisibleDescendant());
+    const filterForcedOpen = $4.derived(() => isBranch() && isFiltering() && hasVisibleDescendant() && !isExpanded());
     const shouldProbeFilterChildren = $4.derived(() => isBranch() && isFiltering() && !isExpanded() && probedFilterValue !== context.filterValue);
     const shouldRenderChildren = $4.derived(() => isBranch() && (isExpanded() || hasVisibleDescendant() || shouldProbeFilterChildren()));
     const checkboxSelectionActive = $4.derived(() => context.checkboxSelectionActive());
     const selectionState = $4.derived(() => context.selectionStateFor(id));
     const labelSegments = $4.derived(() => splitLabelForHighlight(label, context.filterValue));
-    const canRename = $4.derived(() => !disabled && onRename != null);
+    const canRename = $4.derived(() => !disabled && onrename != null);
     const editingLabel = $4.derived(() => `Editing: ${label}`);
     const dragController = $4.derived(() => context.dragController);
     const canDrag = $4.derived(() => draggable && !disabled && dragController() != null);
@@ -244,8 +247,8 @@ function Tree_item($$renderer, $$props) {
         busy = false;
         loaded = false;
         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);
         }
@@ -317,7 +320,7 @@ function Tree_item($$renderer, $$props) {
       editing = true;
       announceRename(`Editing ${label}. Press Enter to confirm, Escape to cancel.`);
     }
-    function finishEdit(afterFocus) {
+    function finishEdit(afterFocus = undefined) {
       editing = false;
       renameError = "";
       renamePending = false;
@@ -331,7 +334,7 @@ function Tree_item($$renderer, $$props) {
       announceRename("Rename cancelled.");
       finishEdit();
     }
-    async function commitEdit(afterFocus) {
+    async function commitEdit(afterFocus = undefined) {
       if (!editing || renamePending)
         return false;
       if (editValue.trim().length === 0) {
@@ -340,14 +343,14 @@ function Tree_item($$renderer, $$props) {
         queueMicrotask(() => renameInputElement?.focus());
         return false;
       }
-      if (!onRename) {
+      if (!onrename) {
         finishEdit(afterFocus);
         return true;
       }
       renamePending = true;
       renameError = "";
       try {
-        await onRename(id, editValue);
+        await onrename(id, editValue);
         announceRename(`${editValue}, renamed.`);
         finishEdit(afterFocus);
         return true;
@@ -600,12 +603,22 @@ function Tree_item($$renderer, $$props) {
       outerElement?.focus();
       if (event.detail > 1)
         return;
-      if (!disabled && !checkboxSelectionActive())
+      if (disabled) {
+        if (isBranch())
+          context.setExpanded(id, !isExpanded());
+        return;
+      }
+      if (!checkboxSelectionActive())
         context.toggleSelected(id, event);
       if (isBranch() && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
         context.setExpanded(id, !isExpanded());
       }
     }
+    function handleDisclosureClick(event) {
+      event.stopPropagation();
+      outerElement?.focus();
+      context.setExpanded(id, !isExpanded());
+    }
     function handleLabelDoubleClick(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -670,7 +683,15 @@ function Tree_item($$renderer, $$props) {
       }
       $$renderer3.push(`<!--]-->`);
     }
-    $$renderer2.push(`<div role="treeitem"${$4.attr("id", treeItemElementId)}${$4.attr_class($4.clsx(classNames("cinder-tree-item", className)))}${$4.attr("aria-label", editing ? editingLabel() : undefined)}${$4.attr("aria-labelledby", editing ? undefined : `${treeItemElementId}-label`)}${$4.attr("aria-level", level)}${$4.attr("aria-expanded", isBranch() ? renderedExpanded() : undefined)}${$4.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$4.attr("aria-checked", ariaChecked())}${$4.attr("aria-busy", busy || undefined)}${$4.attr("aria-disabled", disabled || undefined)}${$4.attr("aria-describedby", canDrag() ? context.dragInstructionsId : undefined)}${$4.attr("tabindex", isFocused() ? 0 : -1)}${$4.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$4.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$4.attr("data-cinder-disabled", disabled ? "" : undefined)}${$4.attr("data-cinder-busy", busy ? "" : undefined)}${$4.attr("data-cinder-hidden", !isVisible() ? "" : undefined)}${$4.attr("data-cinder-editing", editing ? "" : undefined)}${$4.attr("data-cinder-tree-item-id", id)}${$4.attr("data-cinder-dragging", isDraggingItem() ? "" : undefined)}${$4.attr("data-cinder-drop-target", isDropBefore() ? "before" : isDropAfter() ? "after" : undefined)}${$4.attr("data-cinder-drop-into", isDropInto() ? "" : undefined)}><span${$4.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$4.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    $$renderer2.push(`<div role="treeitem"${$4.attr("id", treeItemElementId)}${$4.attr_class($4.clsx(classNames("cinder-tree-item", className)))}${$4.attr("aria-label", editing ? editingLabel() : undefined)}${$4.attr("aria-labelledby", editing ? undefined : `${treeItemElementId}-label`)}${$4.attr("aria-level", level)}${$4.attr("aria-expanded", isBranch() ? renderedExpanded() : undefined)}${$4.attr("aria-posinset", positionInSet())}${$4.attr("aria-setsize", setSize())}${$4.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$4.attr("aria-checked", ariaChecked())}${$4.attr("aria-busy", busy || undefined)}${$4.attr("aria-disabled", disabled || undefined)}${$4.attr("aria-describedby", canDrag() ? context.dragInstructionsId : undefined)}${$4.attr("tabindex", isFocused() ? 0 : -1)}${$4.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$4.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$4.attr("data-cinder-disabled", disabled ? "" : undefined)}${$4.attr("data-cinder-busy", busy ? "" : undefined)}${$4.attr("data-cinder-hidden", !isVisible() ? "" : undefined)}${$4.attr("data-cinder-editing", editing ? "" : undefined)}${$4.attr("data-cinder-tree-item-id", id)}${$4.attr("data-cinder-dragging", isDraggingItem() ? "" : undefined)}${$4.attr("data-cinder-drop-target", isDropBefore() ? "before" : isDropAfter() ? "after" : undefined)}${$4.attr("data-cinder-drop-into", isDropInto() ? "" : undefined)}><span${$4.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$4.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    if (isBranch() && !filterForcedOpen()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-tree-item__disclosure"${$4.attr("aria-label", `${renderedExpanded() ? "Collapse" : "Expand"} ${label}`)}${$4.attr("aria-expanded", renderedExpanded())} tabindex="-1"><span aria-hidden="true"></span></button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+    }
+    $$renderer2.push(`<!--]--> `);
     if (canDrag()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<button type="button" class="cinder-tree-item__drag-handle"${$4.attr("aria-label", dragHandleLabel())}${$4.attr("aria-pressed", isDraggingItem())}${$4.attr("aria-describedby", context.dragInstructionsId)} tabindex="-1"><span aria-hidden="true">::</span></button>`);
@@ -723,7 +744,7 @@ function Tree_item($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]--> `);
-    if (onRename) {
+    if (onrename) {
       $$renderer2.push("<!--[0-->");
       _visually_hidden_live_region($$renderer2, {
         message: renameAnnouncement,
@@ -2359,11 +2380,11 @@ function Tree($$renderer, $$props) {
       style: styleAttribute,
       selectionControls,
       filterValue,
-      onFilterChange,
+      onfilterchange,
       filterPlaceholder = "Search tree",
       showSearch = false,
       filterPredicate = defaultFilterPredicate,
-      onReorder,
+      onreorder,
       children,
       $$slots,
       $$events,
@@ -2413,7 +2434,7 @@ function Tree($$renderer, $$props) {
     const isVirtualizedTree = $7.derived(() => virtualized && items != null);
     const flattenedDataItems = $7.derived(() => flattenTreeDataItems(items ?? []));
     const flattenedDataItemById = $7.derived(() => new Map(flattenedDataItems().map((item) => [item.id, item])));
-    const hasTreeChrome = $7.derived(() => selectionControls != null || showSearch || filtering() || onReorder != null);
+    const hasTreeChrome = $7.derived(() => selectionControls != null || showSearch || filtering() || onreorder != null);
     const hasRegisteredItems = $7.derived(() => isVirtualizedTree() ? flattenedDataItems().length > 0 : registry.size > 0);
     const activeVisibilityPredicate = $7.derived(() => {
       if (!filtering())
@@ -2518,6 +2539,9 @@ function Tree($$renderer, $$props) {
     function virtualizedItemExpanded(item) {
       return expandedIds.includes(item.id) || filtering() && item.branch && visibleDataItems().some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
     }
+    function virtualizedFilterForcedOpen(item) {
+      return item.branch && filtering() && !expandedIds.includes(item.id) && visibleDataItems().some((visibleItem) => visibleItem.id !== item.id && visibleItem.ancestorIds.includes(item.id));
+    }
     function firstVisibleVirtualizedChildIndex(parentId) {
       return visibleDataItems().findIndex((item) => item.parentId === parentId);
     }
@@ -2647,7 +2671,7 @@ function Tree($$renderer, $$props) {
       }
       focusItem(id);
     }
-    function scrollToRow(id, options) {
+    function scrollToRow(id, options = undefined) {
       if (isVirtualizedTree()) {
         const index = visibleIds().indexOf(id);
         if (index !== -1) {
@@ -2850,6 +2874,15 @@ function Tree($$renderer, $$props) {
       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);
       },
@@ -3079,7 +3112,7 @@ function Tree($$renderer, $$props) {
     function updateFilterValue(next) {
       if (!isFilterControlled())
         uncontrolledFilterValue = next;
-      onFilterChange?.(next);
+      onfilterchange?.(next);
     }
     function handleFilterInput(event) {
       const target = event.currentTarget;
@@ -3179,6 +3212,12 @@ function Tree($$renderer, $$props) {
         setExpandedInternal(item.id, !expandedIds.includes(item.id));
       }
     }
+    function handleVirtualizedDisclosureClick(item, event) {
+      event.stopPropagation();
+      focusedId = item.id;
+      treeElement?.focus();
+      setExpandedInternal(item.id, !expandedIds.includes(item.id));
+    }
     function syncVirtualizedCheckboxElement(element, id) {
       const state = selectionStateForId(id);
       element.checked = state.checked;
@@ -3224,6 +3263,14 @@ function Tree($$renderer, $$props) {
         const item = row.item;
         const itemSelectionState = selectionStateForId(item.id);
         $$renderer3.push(`<div${$7.attr("id", virtualItemElementId(item))} role="treeitem" class="cinder-tree-item cinder-tree-item--virtual"${$7.attr("aria-level", item.level)}${$7.attr("aria-expanded", item.branch ? virtualizedItemExpanded(item) : undefined)}${$7.attr("aria-selected", selectionMode === "none" || checkboxSelectionActive() ? undefined : selectedIds.includes(item.id))}${$7.attr("aria-checked", ariaCheckedForSelectionState(itemSelectionState))}${$7.attr("aria-disabled", item.disabled || undefined)}${$7.attr("aria-setsize", item.setSize)}${$7.attr("aria-posinset", item.posInSet)}${$7.attr("aria-label", item.label)} tabindex="-1"${$7.attr("data-cinder-tree-item-id", item.id)}${$7.attr("data-cinder-expanded", item.branch && virtualizedItemExpanded(item) ? "" : undefined)}${$7.attr("data-cinder-selected", selectedIds.includes(item.id) ? "" : undefined)}${$7.attr("data-cinder-disabled", item.disabled ? "" : undefined)}${$7.attr("data-cinder-focused", effectiveFocusedId() === item.id ? "" : undefined)}${$7.attr("data-cinder-virtual-index", virtualItem.index)}${$7.attr_style(virtualizedRowStyle(virtualItem.start, virtualItem.size))}><div class="cinder-tree-item__row"${$7.attr_style(`padding-inline-start: ${item.level * 1.25}rem;`)}>`);
+        if (item.branch && !virtualizedFilterForcedOpen(item)) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<button type="button" class="cinder-tree-item__disclosure"${$7.attr("aria-label", `${virtualizedItemExpanded(item) ? "Collapse" : "Expand"} ${item.label}`)}${$7.attr("aria-expanded", virtualizedItemExpanded(item))} tabindex="-1"><span aria-hidden="true"></span></button>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+        }
+        $$renderer3.push(`<!--]--> `);
         if (checkboxSelectionActive()) {
           $$renderer3.push("<!--[0-->");
           $$renderer3.push(`<input type="checkbox" class="cinder-tree-item__checkbox"${$7.attr("checked", itemSelectionState.checked, true)}${$7.attr("disabled", item.disabled, true)} tabindex="-1" aria-hidden="true"/>`);
@@ -3293,7 +3340,7 @@ function Tree($$renderer, $$props) {
         $$renderer2.push("<!--[-1-->");
       }
       $$renderer2.push(`<!--]--> `);
-      if (onReorder) {
+      if (onreorder) {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<div${$7.attr("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.</div>`);
@@ -3316,7 +3363,7 @@ function Tree($$renderer, $$props) {
         priority: "polite"
       });
       $$renderer2.push(`<!----> `);
-      if (onReorder) {
+      if (onreorder) {
         $$renderer2.push("<!--[0-->");
         _visually_hidden_live_region($$renderer2, {
           message: dragAnnouncement,
@@ -3354,4 +3401,4 @@ export {
   Tree2 as Tree
 };
 
-//# debugId=3D1583A37F0759C664756E2164756E21
+//# debugId=63581A63BDEDAD8964756E2164756E21

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

@@ -104,12 +104,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."
       },
@@ -136,4 +136,4 @@ export {
   tree_schema_default as default
 };
 
-//# debugId=BCA83DE8E374999064756E2164756E21
+//# debugId=19A1BC6BA7AA890C64756E2164756E21