xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/Tree/Tree.spec.js

@@ -1,2839 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-const testData_1 = require("./testData");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("displays flat data format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" dataFormat="flat" defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("displays hierarchy data format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text id="{$item.id}" value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("uses flat as default data format when dataFormat is not specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text id="{$item.id}" value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom idField, nameField, and parentIdField mapping", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            idField="nodeId"
-            nameField="title"
-            parentIdField="parent"
-            data='{${JSON.stringify(testData_1.customFieldsData1)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.title}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles alternative field names (id, displayName, parentId)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            idField="id"
-            nameField="displayName"
-            parentIdField="parentId"
-            data='{${JSON.stringify(testData_1.customFieldsData2)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.displayName}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("100:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("101:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("102:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("103:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles database-style field names (pk, label, parent_id)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            idField="pk"
-            nameField="label"
-            parentIdField="parent_id"
-            data='{${JSON.stringify(testData_1.databaseStyleData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.label}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("root-1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("child-1:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("child-2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("grandchild-1:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles API-style field names (key, text, parentKey)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            idField="key"
-            nameField="text"
-            parentIdField="parentKey"
-            data='{${JSON.stringify(testData_1.apiStyleData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.text}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles iconField mapping with default icon field name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatDataWithIcons)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center">
-                <Text testId="icon:{$item.icon}" value="[{$item.icon}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:icon:file-image")).toBeVisible();
-        // Verify individual icon markers
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon:file-pdf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon:file-image")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom iconField mapping", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            idField="nodeId"
-            nameField="title"
-            iconField="iconType"
-            parentIdField="parent"
-            data='{${JSON.stringify(testData_1.customIconFieldData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center">
-                <Text testId="icon-type:{$item.iconType}" value="[{$item.iconType}]" />
-                <Text value="{$item.title}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:icon:project-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:icon:code-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:icon:typescript-file")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A4:icon:typescript-file")).toBeVisible();
-        // Verify individual icon type markers
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon-type:project-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon-type:code-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("icon-type:typescript-file")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles iconExpandedField and iconCollapsedField mapping", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            iconField="icon"
-            iconExpandedField="iconExpanded"
-            iconCollapsedField="iconCollapsed"
-            data='{${JSON.stringify(testData_1.dataWithStateIcons)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center">
-                <Text testId="state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed")).not.toBeVisible(); // Should be collapsed initially
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined")).not.toBeVisible(); // Should be nested and collapsed
-        // Verify collapsed state icons are shown initially (since defaultExpanded is not set)
-        yield (0, fixtures_1.expect)(tree.getByTestId("state-icon:folder-closed")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles missing icon fields gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            iconField="nonExistentIcon"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center">
-                <Text testId="fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:icon:no-icon")).toBeVisible();
-        // Verify fallback icons
-        yield (0, fixtures_1.expect)(tree.getByTestId("fallback-icon:default")).toBeVisible();
-    }));
-    // Selectable Field Mapping Tests
-    (0, fixtures_1.test)("handles default selectableField mapping (all nodes selectable by default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
-                <Text value="{$item.name} (Selectable: {$item.selectable})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // All nodes should be selectable by default (true)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:selectable:true")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom selectableField mapping with mixed selectable states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const customSelectableData = [
-            { id: "1", name: "Root Item 1", parentId: null, isSelectable: true },
-            { id: "2", name: "Child Item 1.1", parentId: "1", isSelectable: false },
-            { id: "3", name: "Child Item 1.2", parentId: "1", isSelectable: true },
-            { id: "4", name: "Grandchild Item 1.1.1", parentId: "2", isSelectable: false },
-            { id: "5", name: "Another Child", parentId: "1", isSelectable: true },
-        ];
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            selectableField="isSelectable"
-            data='{${JSON.stringify(customSelectableData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
-                <Text value="{$item.name} - Selectable: {$item.selectable}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify mapped selectable states
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:selectable:true")).toBeVisible(); // Root selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:selectable:false")).toBeVisible(); // Child not selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:selectable:true")).toBeVisible(); // Child selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:selectable:false")).toBeVisible(); // Grandchild not selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("5:selectable:true")).toBeVisible(); // Another child selectable
-    }));
-    (0, fixtures_1.test)("handles selectableField with fallback to true when field is missing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const partialSelectableData = [
-            { id: "1", name: "Root Item 1", parentId: null, canSelect: true },
-            { id: "2", name: "Child Item 1.1", parentId: "1" }, // Missing canSelect field
-            { id: "3", name: "Child Item 1.2", parentId: "1", canSelect: false },
-            { id: "4", name: "Grandchild Item 1.1.1", parentId: "2" }, // Missing canSelect field
-        ];
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            selectableField="canSelect"
-            data='{${JSON.stringify(partialSelectableData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
-                <Text value="{$item.name} - Selectable: {$item.selectable}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify fallback behavior: missing field defaults to true
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:selectable:true")).toBeVisible(); // Explicitly true
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:selectable:true")).toBeVisible(); // Missing field, defaults to true
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:selectable:false")).toBeVisible(); // Explicitly false
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:selectable:true")).toBeVisible(); // Missing field, defaults to true
-    }));
-    (0, fixtures_1.test)("handles selectableField in hierarchy data format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const hierarchySelectableData = [
-            {
-                id: "A1",
-                title: "Project",
-                allowSelection: true,
-                children: [
-                    {
-                        id: "A2",
-                        title: "Source",
-                        allowSelection: false,
-                        children: [{ id: "A3", title: "App.tsx", allowSelection: true }],
-                    },
-                    { id: "A4", title: "Tests", allowSelection: true },
-                ],
-            },
-        ];
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="id"
-            nameField="title"
-            selectableField="allowSelection"
-            childrenField="children"
-            data='{${JSON.stringify(hierarchySelectableData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
-                <Text value="{$item.title} - Selectable: {$item.selectable}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify hierarchy with selectableField mapping
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:selectable:true")).toBeVisible(); // Project selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:selectable:false")).toBeVisible(); // Source not selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:selectable:true")).toBeVisible(); // App.tsx selectable
-        yield (0, fixtures_1.expect)(tree.getByTestId("A4:selectable:true")).toBeVisible(); // Tests selectable
-    }));
-    (0, fixtures_1.test)("validates selectableField affects actual selection behavior", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const selectableBehaviorData = [
-            { id: "1", name: "Selectable Root", parentId: null, canClick: true },
-            { id: "2", name: "Non-Selectable Child", parentId: "1", canClick: false },
-            { id: "3", name: "Selectable Child", parentId: "1", canClick: true },
-        ];
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            selectableField="canClick"
-            data='{${JSON.stringify(selectableBehaviorData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name} ({$item.selectable ? 'Clickable' : 'Not Clickable'})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify all nodes are visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible();
-        // Test selection behavior: selectable nodes should be clickable for selection
-        // This verifies that the selectable property is correctly mapped and used internally
-        const selectableNode = tree.getByTestId("1");
-        const nonSelectableNode = tree.getByTestId("2");
-        const anotherSelectableNode = tree.getByTestId("3");
-        // Click on selectable nodes - should work
-        yield selectableNode.click();
-        // Note: Detailed selection behavior testing would require checking internal state
-        // which might be tested in other selection-focused test cases
-        yield anotherSelectableNode.click();
-        // The actual selection assertion would depend on visible selection styling
-        // or other indicators that would be tested in selection-specific tests
-    }));
-    // Hierarchical Data Format Field Mapping Tests
-    (0, fixtures_1.test)("handles custom idField, nameField, and childrenField mapping for hierarchy data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="nodeId"
-            nameField="title"
-            childrenField="items"
-            data='{${JSON.stringify(testData_1.customFieldsHierarchy1)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.title}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles alternative hierarchy field names (id, displayName, subNodes)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="id"
-            nameField="displayName"
-            childrenField="subNodes"
-            data='{${JSON.stringify(testData_1.customFieldsHierarchy2)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.displayName}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("100:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("101:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("102:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("103:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles database-style hierarchy field names (pk, label, nested_items)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="pk"
-            nameField="label"
-            childrenField="nested_items"
-            data='{${JSON.stringify(testData_1.databaseStyleHierarchy)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.label}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("root-1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("child-1:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("child-2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("grandchild-1:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles API-style hierarchy field names (key, text, nodes)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="key"
-            nameField="text"
-            childrenField="nodes"
-            data='{${JSON.stringify(testData_1.apiStyleHierarchy)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center">
-                <Icon name="folder" />
-                <Text value="{$item.text}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item2:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item3:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("item4:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles iconField mapping in hierarchy data with default field name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.hierarchyDataWithIcons)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center">
-                <Text testId="hierarchy-icon:{$item.icon}" value="[{$item.icon}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:icon:file-image")).toBeVisible();
-        // Verify individual icon markers
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon:file-pdf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon:file-image")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom iconField mapping in hierarchy data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="nodeId"
-            nameField="title"
-            iconField="iconType"
-            childrenField="items"
-            data='{${JSON.stringify(testData_1.customIconFieldHierarchy)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center">
-                <Text testId="hierarchy-icon-type:{$item.iconType}" value="[{$item.iconType}]" />
-                <Text value="{$item.title}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:icon:project-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:icon:code-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:icon:typescript-file")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A4:icon:typescript-file")).toBeVisible();
-        // Verify individual icon type markers
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon-type:project-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon-type:code-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-icon-type:typescript-file")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles iconExpandedField and iconCollapsedField in hierarchy data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            iconField="icon"
-            iconExpandedField="iconExpanded"
-            iconCollapsedField="iconCollapsed"
-            data='{${JSON.stringify(testData_1.hierarchyWithStateIcons)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center">
-                <Text testId="hierarchy-state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed")).not.toBeVisible(); // Should be collapsed initially
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined")).not.toBeVisible(); // Should be nested and collapsed
-        // Verify collapsed state icons are shown initially (since defaultExpanded is not set)
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-state-icon:folder-closed")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles missing icon fields gracefully in hierarchy data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            iconField="nonExistentIcon"
-            data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center">
-                <Text testId="hierarchy-fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" />
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:no-icon")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:icon:no-icon")).toBeVisible();
-        // Verify fallback icons
-        yield (0, fixtures_1.expect)(tree.getByTestId("hierarchy-fallback-icon:default")).toBeVisible();
-    }));
-    // =============================================================================
-    // $ITEM CONTEXT PROPERTIES TESTS
-    // =============================================================================
-    (0, fixtures_1.test)("passes all core $item properties correctly to item template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:props:name:{$item.name}|depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (ID: {$item.id}, Key: {$item.key}, Depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify core properties for different items
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:props:name:Root Item 1|depth:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:props:name:Child Item 1.1|depth:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:props:name:Child Item 1.2|depth:1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:props:name:Grandchild Item 1.1.1|depth:2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("passes original source data properties via $item spread", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const dataWithExtraProps = [
-            {
-                id: 1,
-                name: "Root",
-                category: "folder",
-                size: "large",
-                customField: "value1",
-                parentId: null,
-            },
-            { id: 2, name: "Child", category: "file", size: "small", customField: "value2", parentId: 1 },
-        ];
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(dataWithExtraProps)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:extra:{$item.category}:{$item.size}:{$item.customField}" verticalAlignment="center">
-                <Text value="{$item.name} - {$item.category} ({$item.size}) [{$item.customField}]" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:extra:folder:large:value1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:extra:file:small:value2")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("passes icon properties correctly via $item", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatDataWithIcons)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:icon:{$item.icon}" verticalAlignment="center">
-                <Text value="{$item.name} [{$item.icon}]" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:icon:folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:icon:file-image")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("passes TreeNode internal properties via $item spread", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:internal:selectable:{$item.selectable}" verticalAlignment="center">
-                <Text value="{$item.name} (Selectable: {$item.selectable})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:internal:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:internal:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:internal:selectable:true")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:internal:selectable:true")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("passes custom field mapped properties correctly in hierarchy format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            defaultExpanded="all"
-            idField="nodeId"
-            nameField="title"
-            iconField="iconType"
-            childrenField="items"
-            data='{${JSON.stringify(testData_1.customIconFieldHierarchy)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.nodeId}:mapped:name:{$item.name}|title:{$item.title}|iconType:{$item.iconType}" verticalAlignment="center">
-                <Text value="Mapped: {$item.name} | Original: {$item.title} | Icon: {$item.iconType}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A1:mapped:name:Project|title:Project|iconType:project-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A2:mapped:name:Source|title:Source|iconType:code-folder")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("A3:mapped:name:App.tsx|title:App.tsx|iconType:typescript-file")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("validates $item properties maintain referential integrity across re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.key}:integrity:name:{$item.name}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // Verify that basic properties are accessible and consistent
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:integrity:name:Root Item 1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:integrity:name:Child Item 1.1")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:integrity:name:Child Item 1.2")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:integrity:name:Grandchild Item 1.1.1")).toBeVisible();
-    }));
-    // =============================================================================
-    // SELECTION MANAGEMENT TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Selection Management", () => {
-        (0, fixtures_1.test)("handles selectedValue property with visual feedback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(255, 100, 100)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{2}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers directly using getNodeWrapperByMarker
-            const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
-            const item1RowWrapper = tree.getNodeWrapperByTestId("1");
-            const item3RowWrapper = tree.getNodeWrapperByTestId("3");
-            const item4RowWrapper = tree.getNodeWrapperByTestId("4");
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toBeVisible();
-            // Test selected item has correct styling
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveClass(/selected/);
-            // Test non-selected items don't have selected styling
-            yield (0, fixtures_1.expect)(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item3RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item1RowWrapper).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(item3RowWrapper).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(item4RowWrapper).not.toHaveClass(/selected/);
-        }));
-        (0, fixtures_1.test)("handles selection with different selectedValue types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(200, 100, 255)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{3}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers directly using getNodeWrapperByMarker
-            const item1RowWrapper = tree.getNodeWrapperByTestId("1");
-            const item2RowWrapper = tree.getNodeWrapperByTestId("2");
-            const item3RowWrapper = tree.getNodeWrapperByTestId("3");
-            const item4RowWrapper = tree.getNodeWrapperByTestId("4");
-            yield (0, fixtures_1.expect)(item1RowWrapper).toBeVisible();
-            // Item 3 should be selected (with proper string comparison handling)
-            yield (0, fixtures_1.expect)(item3RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item3RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(item3RowWrapper).toHaveClass(/selected/);
-            // Other items should not be selected
-            yield (0, fixtures_1.expect)(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            // Verify class names are correctly applied
-            yield (0, fixtures_1.expect)(item1RowWrapper).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(item2RowWrapper).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(item4RowWrapper).not.toHaveClass(/selected/);
-        }));
-        (0, fixtures_1.test)("handles selection with type mismatch tolerance", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(100, 200, 50)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{2}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrapper directly using getNodeWrapperByMarker
-            const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toBeVisible();
-            // Verify selection styling is applied correctly despite type mismatch (selectedValue: number vs itemKey: number)
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveClass(/selected/);
-        }));
-        (0, fixtures_1.test)("selection state overrides hover state styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(200, 0, 0)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            const HOVER_BG_COLOR = "rgb(0, 0, 200)";
-            const HOVER_TEXT_COLOR = "rgb(255, 255, 0)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{2}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                    "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
-                    "textColor-Tree--hover": HOVER_TEXT_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers directly using getNodeWrapperByMarker
-            const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
-            const item1RowWrapper = tree.getNodeWrapperByTestId("1");
-            const item3RowWrapper = tree.getNodeWrapperByTestId("3");
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toBeVisible();
-            // Hover over the selected item - selection should override hover
-            yield selectedRowWrapper.hover();
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            // Hover over non-selected items - should show hover state
-            yield item1RowWrapper.hover();
-            yield (0, fixtures_1.expect)(item1RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
-            yield (0, fixtures_1.expect)(item1RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);
-            yield item3RowWrapper.hover();
-            yield (0, fixtures_1.expect)(item3RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
-            yield (0, fixtures_1.expect)(item3RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);
-            // Verify selected item maintains selection styling even after hovering other items
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-        }));
-        (0, fixtures_1.test)("supports interactive selection changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            const SELECTED_BG_COLOR = "rgb(200, 100, 255)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            const FOCUS_OUTLINE_COLOR = "rgb(255, 100, 100)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{2}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                    "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            yield tree.component.focus();
-            // Get row wrappers directly using getNodeWrapperByMarker
-            const item1RowWrapper = tree.getNodeWrapperByTestId("1");
-            const item2RowWrapper = tree.getNodeWrapperByTestId("2");
-            yield (0, fixtures_1.expect)(item1RowWrapper).toBeVisible();
-            // Item 2 should be initially selected
-            yield (0, fixtures_1.expect)(item2RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item2RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(item2RowWrapper).toHaveClass(/selected/);
-            // Click on item 1 to change selection
-            yield tree.getByTestId("1").click();
-            // Item 1 should now be selected
-            yield (0, fixtures_1.expect)(item1RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item1RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(item1RowWrapper).toHaveClass(/selected/);
-            // Item 2 should no longer be selected
-            yield (0, fixtures_1.expect)(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(item2RowWrapper).not.toHaveClass(/selected/);
-            // Verify the tree container maintains focus
-            yield (0, fixtures_1.expect)(tree.component).toBeFocused();
-        }));
-        (0, fixtures_1.test)("handles null/undefined selection gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(255, 0, 0)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{null}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers to test no selection highlighting
-            const rowWrapper1 = tree.getNodeWrapperByTestId("1");
-            const rowWrapper2 = tree.getNodeWrapperByTestId("2");
-            const rowWrapper3 = tree.getNodeWrapperByTestId("3");
-            const rowWrapper4 = tree.getNodeWrapperByTestId("4");
-            yield (0, fixtures_1.expect)(rowWrapper1).toBeVisible();
-            // Verify no items are selected when selectedValue is null
-            yield (0, fixtures_1.expect)(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            // Verify no items have selected class
-            yield (0, fixtures_1.expect)(rowWrapper1).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper2).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper3).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper4).not.toHaveClass(/selected/);
-            // Verify tree is still functional - can select items by clicking
-            yield tree.getByTestId("2").click();
-            yield (0, fixtures_1.expect)(rowWrapper2).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper2).toHaveClass(/selected/);
-        }));
-        (0, fixtures_1.test)("handles invalid selection values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const SELECTED_BG_COLOR = "rgb(0, 255, 0)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="999"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers to test no selection highlighting
-            const rowWrapper1 = tree.getNodeWrapperByTestId("1");
-            const rowWrapper2 = tree.getNodeWrapperByTestId("2");
-            const rowWrapper3 = tree.getNodeWrapperByTestId("3");
-            const rowWrapper4 = tree.getNodeWrapperByTestId("4");
-            yield (0, fixtures_1.expect)(rowWrapper1).toBeVisible();
-            // Verify component doesn't crash with invalid selectedValue and no items are selected
-            yield (0, fixtures_1.expect)(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
-            // Verify no items have selected class
-            yield (0, fixtures_1.expect)(rowWrapper1).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper2).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper3).not.toHaveClass(/selected/);
-            yield (0, fixtures_1.expect)(rowWrapper4).not.toHaveClass(/selected/);
-            // Verify tree is still functional - can select valid items by clicking
-            yield tree.getByTestId("3").click();
-            yield (0, fixtures_1.expect)(rowWrapper3).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(rowWrapper3).toHaveClass(/selected/);
-        }));
-        // =============================================================================
-        // FOCUS MANAGEMENT SUB-TESTS
-        // =============================================================================
-        (0, fixtures_1.test)("supports keyboard focus navigation with visual feedback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page, }) {
-            const FOCUS_OUTLINE_COLOR = "rgb(255, 0, 255)";
-            const FOCUS_OUTLINE_WIDTH = "3px";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
-                    "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible();
-            // Focus the tree to trigger focus styling
-            yield tree.component.focus();
-            // Use keyboard navigation to trigger focus on an item
-            yield page.keyboard.press("ArrowDown");
-            // The second item should be focused now
-            const focusedItem = tree.getNodeWrapperByTestId("2");
-            yield (0, fixtures_1.expect)(focusedItem).toBeVisible();
-            // Check that focus outline uses custom theme variables
-            // Focus styling uses inset box-shadow with the outline color
-            yield (0, fixtures_1.expect)(focusedItem).toHaveCSS("box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`);
-            // Also verify the focused item has the correct CSS class
-            yield (0, fixtures_1.expect)(focusedItem).toHaveClass(/focused/);
-            // Verify box-shadow contains the custom focus outline color
-            const boxShadowValue = yield focusedItem.evaluate((el) => getComputedStyle(el).boxShadow);
-            (0, fixtures_1.expect)(boxShadowValue).toContain(FOCUS_OUTLINE_COLOR);
-            // Test that focus can move to different items
-            yield page.keyboard.press("ArrowDown");
-            const nextFocusedItem = tree.getNodeWrapperByTestId("4"); // Should be the grandchild
-            yield (0, fixtures_1.expect)(nextFocusedItem).toHaveClass(/focused/);
-            yield (0, fixtures_1.expect)(nextFocusedItem).toHaveCSS("box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`);
-            // Previous item should no longer be focused
-            yield (0, fixtures_1.expect)(focusedItem).not.toHaveClass(/focused/);
-            // Navigate back up
-            yield page.keyboard.press("ArrowUp");
-            yield (0, fixtures_1.expect)(focusedItem).toHaveClass(/focused/);
-            yield (0, fixtures_1.expect)(nextFocusedItem).not.toHaveClass(/focused/);
-        }));
-        (0, fixtures_1.test)("focus styling supports comprehensive theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page, }) {
-            const FOCUS_OUTLINE_COLOR = "rgb(0, 255, 0)";
-            const FOCUS_OUTLINE_WIDTH = "4px";
-            const FOCUS_OUTLINE_STYLE = "solid";
-            const FOCUS_OUTLINE_OFFSET = "2px";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
-                    "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH,
-                    "outlineStyle-Tree--focus": FOCUS_OUTLINE_STYLE,
-                    "outlineOffset-Tree--focus": FOCUS_OUTLINE_OFFSET,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.getNodeWrapperByTestId("1")).toBeVisible();
-            // Focus the tree and navigate to an item
-            yield tree.component.focus();
-            yield page.keyboard.press("ArrowDown", { delay: 100 });
-            // Test focused item has all custom theme variables applied
-            const focusedItem = tree.getNodeWrapperByTestId("2");
-            yield (0, fixtures_1.expect)(focusedItem).toHaveClass(/focused/);
-            // Verify the focus outline uses all custom theme variables
-            // Note: In the current implementation, focus uses inset box-shadow rather than outline
-            // but the theme variables should still be available for potential outline styling
-            const boxShadowValue = yield focusedItem.evaluate((el) => getComputedStyle(el).boxShadow);
-            (0, fixtures_1.expect)(boxShadowValue).toContain("0, 255, 0"); // Check for green color components
-        }));
-        (0, fixtures_1.test)("combined selection and focus states work together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page, }) {
-            const SELECTED_BG_COLOR = "rgb(255, 50, 50)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            const HOVER_BG_COLOR = "rgb(50, 255, 50)";
-            const HOVER_TEXT_COLOR = "rgb(0, 0, 0)";
-            const DEFAULT_TEXT_COLOR = "rgb(100, 100, 100)";
-            const FOCUS_OUTLINE_COLOR = "rgb(50, 50, 255)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{3}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                    "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
-                    "textColor-Tree--hover": HOVER_TEXT_COLOR,
-                    "textColor-Tree": DEFAULT_TEXT_COLOR,
-                    "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Test all theme variables work correctly in isolation and combination
-            const selectedRowWrapper = tree.getNodeWrapperByTestId("3");
-            const normalRowWrapper = tree.getNodeWrapperByTestId("1");
-            const hoverRowWrapper = tree.getNodeWrapperByTestId("2");
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toBeVisible();
-            // Test selected item styling
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveClass(/selected/);
-            // Test default text color on normal items
-            yield (0, fixtures_1.expect)(normalRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR);
-            yield (0, fixtures_1.expect)(normalRowWrapper).not.toHaveClass(/selected/);
-            // Test hover styling on non-selected item
-            yield hoverRowWrapper.hover();
-            yield (0, fixtures_1.expect)(hoverRowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
-            yield (0, fixtures_1.expect)(hoverRowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);
-            // Test hover on selected item (selection should override)
-            yield selectedRowWrapper.hover();
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            // Test focus styling - ensure we can detect focus
-            yield tree.component.focus();
-            // Give some time for focus to be applied
-            yield page.waitForTimeout(100);
-            // Check if any item has focus, or skip focus-specific checks for this comprehensive test
-            // The focus behavior is already tested in the dedicated focus tests
-            const anyFocusedElement = page.locator('[data-test-id="tree"] .focused');
-            const hasFocusedElement = (yield anyFocusedElement.count()) > 0;
-            if (hasFocusedElement) {
-                // If we have focused elements, verify the color
-                const focusedElement = anyFocusedElement.first();
-                const finalBoxShadowValue = yield focusedElement.evaluate((el) => getComputedStyle(el).boxShadow);
-                (0, fixtures_1.expect)(finalBoxShadowValue).toContain("50, 50, 255");
-            }
-            // If no focused element, skip focus-specific validation since focus behavior varies
-            // Verify all theme variables are working simultaneously
-            // Selected item maintains selection while tree has focus
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-        }));
-        (0, fixtures_1.test)("applies selection and focus with multiple theme configurations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page, }) {
-            const SELECTED_BG_COLOR = "rgb(50, 100, 200)";
-            const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
-            const FOCUS_OUTLINE_COLOR = "rgb(255, 165, 0)";
-            const DEFAULT_TEXT_COLOR = "rgb(64, 64, 64)";
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat"
-            defaultExpanded="all"
-            selectedValue="{2}"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}" verticalAlignment="center">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-        `, {
-                testThemeVars: {
-                    "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
-                    "textColor-Tree--selected": SELECTED_TEXT_COLOR,
-                    "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
-                    "textColor-Tree": DEFAULT_TEXT_COLOR,
-                },
-            });
-            const tree = yield createTreeDriver("tree");
-            // Get row wrappers directly using getNodeWrapperByMarker
-            const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
-            const nonSelectedRowWrapper = tree.getNodeWrapperByTestId("1");
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toBeVisible();
-            // Test selection theme variables
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
-            yield (0, fixtures_1.expect)(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
-            // Test default text color on non-selected items
-            yield (0, fixtures_1.expect)(nonSelectedRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR);
-            // Focus the tree and navigate to trigger focus styling
-            yield tree.component.focus();
-            yield page.keyboard.press("ArrowDown");
-            // Check if any item received focus (focus behavior can be timing-dependent in tests)
-            const focusedItem = page.locator('[data-test-id="tree"] .focused');
-            const focusedItemCount = yield focusedItem.count();
-            if (focusedItemCount > 0) {
-                // If we have focused elements, verify the focus styling uses custom theme variables
-                yield (0, fixtures_1.expect)(focusedItem.first()).toBeVisible();
-                yield (0, fixtures_1.expect)(focusedItem.first()).toHaveCSS("box-shadow", `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`);
-            }
-            // If no focused element found, skip focus-specific validation as focus behavior is tested elsewhere
-        }));
-    });
-    // =============================================================================
-    // EXPANSION STATE TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Expansion States", () => {
-        (0, fixtures_1.test)("handles defaultExpanded none", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="none"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // Only root level (depth 0) should be visible with defaultExpanded="none"
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();
-            // Child nodes (depth 1+) should NOT be visible initially
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:Child Item 1.1:depth:1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:Child Item 1.2:depth:1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles defaultExpanded all", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // All nodes at all depths should be visible with defaultExpanded="all"
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles defaultExpanded first-level", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="first-level"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // Root level (depth 0) and first level (depth 1) should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible();
-            // Second level and deeper (depth 2+) should NOT be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles defaultExpanded with array of string IDs - expands specific nodes making all children visible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            idField="pk"
-            nameField="label"
-            parentIdField="parent_id"
-            defaultExpanded='{["root-1", "child-1"]}'
-            data='{${JSON.stringify(testData_1.databaseStyleData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.pk}:{$item.label}:depth:{$item.depth}:expanded" verticalAlignment="center">
-                <Text value="{$item.label} (ID: {$item.pk}, Depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // When defaultExpanded=["root-1", "child-1"], these specific nodes should be expanded:
-            // 1. Root node "root-1" is expanded → its direct children become visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("root-1:Root Item 1:depth:0:expanded")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("child-1:Child Item 1.1:depth:1:expanded")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("child-2:Child Item 1.2:depth:1:expanded")).toBeVisible();
-            // 2. Child node "child-1" is also expanded → its children become visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("grandchild-1:Grandchild Item 1.1.1:depth:2:expanded")).toBeVisible();
-            // Verify expansion behavior: each ID in the array expands that specific node,
-            // making its direct children visible. If a child is also in the expansion array,
-            // it will also be expanded, showing its children recursively.
-        }));
-        (0, fixtures_1.test)("handles defaultExpanded array with nodes from different parent branches", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded='{["doc-root", "proj-web", "media-images"]}'
-            data='{${JSON.stringify(testData_1.multiBranchTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // Branch A: "doc-root" is expanded → its direct children are visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible();
-            // But grandchildren of doc-root should NOT be visible (doc-reports not expanded)
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible();
-            // Branch B: "proj-root" is auto-expanded because "proj-web" is in defaultExpanded
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Now visible due to auto-expansion
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Also visible due to parent expansion
-            // proj-web is expanded → its children are visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
-            // proj-mobile is NOT expanded → its children remain hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();
-            // Branch C: "media-root" is auto-expanded because "media-images" is in defaultExpanded
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Now visible due to auto-expansion
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Also visible due to parent expansion
-            // media-images is expanded → its children are visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible();
-            // This test validates that defaultExpanded array automatically expands parent paths:
-            // 1. Each ID in defaultExpanded array is expanded AND its full parent path is auto-expanded
-            // 2. Auto-expansion ensures target nodes are visible by expanding their parents
-            // 3. Multiple independent branches can have different expansion states
-            // 4. Only specifically targeted nodes (plus necessary parents) are expanded
-        }));
-        (0, fixtures_1.test)("handles defaultExpanded array expanding multiple independent root branches", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded='{["doc-root", "proj-root", "doc-reports", "proj-web"]}'
-            data='{${JSON.stringify(testData_1.multiBranchTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // Branch A: "doc-root" expanded → children visible, "doc-reports" also expanded → grandchildren visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible();
-            // doc-reports is expanded → its children are visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-q2-report:Q2 Report.pdf:depth:2")).toBeVisible();
-            // doc-invoices is NOT expanded → its children are hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible();
-            // Branch B: "proj-root" expanded → children visible, "proj-web" also expanded → grandchildren visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible();
-            // proj-web is expanded → its children are visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
-            // proj-mobile is NOT expanded → its children are hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();
-            // Branch C: "media-root" is NOT in defaultExpanded → children remain hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-images:Images:depth:1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-videos:Videos:depth:1")).not.toBeVisible();
-            // This test validates complete multi-branch expansion:
-            // 1. Multiple root branches can be independently expanded
-            // 2. Sub-nodes within expanded branches can also be selectively expanded
-            // 3. Each expansion is isolated - expanding one branch doesn't affect others
-            // 4. Deep nesting works correctly with selective expansion at each level
-        }));
-        (0, fixtures_1.test)("auto-expands parent paths for defaultExpanded array to ensure target nodes are visible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded='{["proj-web", "media-images"]}'
-            data='{${JSON.stringify(testData_1.multiBranchTreeData)}}'>
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
-                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-            // The key behavior: even though we only specified "proj-web" and "media-images" in defaultExpanded,
-            // their parent paths should be automatically expanded to make them visible
-            // Branch A: "doc-root" is NOT in defaultExpanded → should remain collapsed
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-reports:Reports:depth:1")).not.toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("doc-invoices:Invoices:depth:1")).not.toBeVisible();
-            // Branch B: "proj-web" is in defaultExpanded → parent "proj-root" should auto-expand to make it visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Target node should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Sibling visible due to parent expansion
-            // proj-web is expanded → its children should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
-            // proj-mobile is NOT expanded → its children remain hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();
-            // Branch C: "media-images" is in defaultExpanded → parent "media-root" should auto-expand
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Target node should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Sibling visible due to parent expansion
-            // media-images is expanded → its children should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible();
-            yield (0, fixtures_1.expect)(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible();
-            // This test validates the auto-expansion behavior:
-            // 1. When a node ID is in defaultExpanded, all its parent nodes are automatically expanded
-            // 2. This ensures the target node is visible and can display its expanded state
-            // 3. Parent expansion makes sibling nodes visible but doesn't expand them
-            // 4. Only the specifically targeted nodes (plus their parents) are expanded
-        }));
-        fixtures_1.test.skip("handles expandedValues property", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED(), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // TODO: Test controlled expansion state with expandedValues prop
-            // TODO: Verify expansion state synchronization with external control
-            yield initTestBed(`
-        <Tree 
-          testId="tree" 
-          data="{flatTreeData}" 
-          dataFormat="flat"
-          expandedValues="{[1]}"
-        />
-      `);
-        }));
-        fixtures_1.test.skip("supports expansion toggle by chevron click", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED(), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // TODO: Test clicking expand/collapse chevron toggles node expansion
-            // TODO: Verify child nodes become visible/hidden appropriately
-            yield initTestBed(`
-        <Tree 
-          testId="tree" 
-          data="{flatTreeData}" 
-          dataFormat="flat"
-        />
-      `);
-        }));
-        fixtures_1.test.skip("supports expansion toggle by item click when enabled", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED(), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // TODO: Test itemClickExpands prop enables expansion on full item click
-            // TODO: Verify clicking anywhere on item (not just chevron) toggles expansion
-            yield initTestBed(`
-        <Tree 
-          testId="tree" 
-          data="{flatTreeData}" 
-          dataFormat="flat"
-          itemClickExpands="true"
-        />
-      `);
-        }));
-        fixtures_1.test.skip("handles autoExpandToSelection", component_test_helpers_1.SKIP_REASON.TO_BE_IMPLEMENTED(), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // TODO: Test automatic expansion of path to selected item
-            // TODO: Verify all parent nodes of selected item are expanded
-            yield initTestBed(`
-        <Tree 
-          testId="tree" 
-          data="{flatTreeData}" 
-          dataFormat="flat"
-          selectedValue="4"
-          autoExpandToSelection="true"
-        />
-      `);
-        }));
-    });
-});
-// =============================================================================
-// EVENTS TESTS
-// =============================================================================
-fixtures_1.test.describe("Events", () => {
-    fixtures_1.test.describe("selectionDidChange Event", () => {
-        (0, fixtures_1.test)("fires when user clicks on a selectable node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'
-            onSelectionDidChange="event => testState = event">
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            // Click on the first item
-            yield tree.getByTestId("1").click();
-            // Verify selectionDidChange event was fired with correct data
-            yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBeDefined();
-            const event = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(event.newNode).toBeDefined();
-            (0, fixtures_1.expect)(event.newNode.id).toBe(1);
-            (0, fixtures_1.expect)(event.newNode.displayName).toBe("Root Item 1");
-            (0, fixtures_1.expect)(event.previousNode).toBeNull();
-        }));
-        (0, fixtures_1.test)("fires with previous node when selection changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="flat" 
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.flatTreeData)}}'
-            onSelectionDidChange="event => testState = event">
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            // First selection
-            yield tree.getByTestId("1").click();
-            // Second selection
-            yield tree.getByTestId("2").click();
-            // Verify event has both previous and new node
-            yield fixtures_1.expect.poll(() => { var _a; return (_a = testStateDriver.testState()) === null || _a === void 0 ? void 0 : _a.then((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.newNode) === null || _a === void 0 ? void 0 : _a.id; }); }).toBe(2);
-            const event = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(event.previousNode.id).toBe(1);
-        }));
-    });
-    fixtures_1.test.describe("nodeDidExpand Event", () => {
-        (0, fixtures_1.test)("fires after successful node expansion", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            const { testStateDriver } = yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy"
-            itemClickExpands="true"
-            data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-            onNodeDidExpand="node => testState = node">
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            // Click to expand first node
-            yield tree.getByTestId("1").click();
-            // Verify nodeDidExpand event fired
-            yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-            // Verify child is now visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-        }));
-    });
-    fixtures_1.test.describe("nodeDidCollapse Event", () => {
-        (0, fixtures_1.test)("fires after successful node collapse", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-            const { testStateDriver } = yield initTestBed(`
-        <VStack height="400px">
-          <Tree testId="tree" 
-            dataFormat="hierarchy" 
-            itemClickExpands="true"
-            defaultExpanded="all"
-            data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-            onNodeDidCollapse="node => testState = node">
-            <property name="itemTemplate">
-              <HStack testId="{$item.id}">
-                <Text value="{$item.name}" />
-              </HStack>
-            </property>
-          </Tree>
-        </VStack>
-      `);
-            const tree = yield createTreeDriver("tree");
-            // First, verify child is visible (node starts expanded)
-            yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-            // Click to collapse expanded node
-            yield tree.getByTestId("1").click();
-            // Verify nodeDidCollapse fired with correct node
-            yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-            // Verify child is no longer visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-        }));
-        // Note: Additional collapse tests can be added when TreeDriver supports programmatic collapse operations
-    });
-    // =============================================================================
-    // KEYBOARD EVENT TESTS
-    // =============================================================================
-    fixtures_1.test.describe("Keyboard Events", () => {
-        fixtures_1.test.describe("selectionDidChange Event via Keyboard", () => {
-            (0, fixtures_1.test)("fires when Enter key is pressed on a selectable node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="flat" 
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'
-              onSelectionDidChange="event => testState = event">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Focus the tree and navigate to first item
-                yield tree.component.focus();
-                // Press Enter to select the focused node
-                yield tree.component.press("Enter");
-                // Verify selectionDidChange event was fired with correct data
-                yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBeDefined();
-                const event = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(event.newNode).toBeDefined();
-                (0, fixtures_1.expect)(event.newNode.id).toBe(1);
-                (0, fixtures_1.expect)(event.newNode.displayName).toBe("Root Item 1");
-                (0, fixtures_1.expect)(event.previousNode).toBeNull();
-            }));
-            (0, fixtures_1.test)("fires when Space key is pressed on a selectable node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="flat" 
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'
-              onSelectionDidChange="event => testState = event">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Focus the tree (this starts focus on first item)
-                yield tree.component.focus();
-                // Press Space to select the currently focused node (should be first node)
-                yield tree.component.press("Space");
-                // Verify selectionDidChange event was fired with correct data
-                yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBeDefined();
-                const event = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(event.newNode).toBeDefined();
-                (0, fixtures_1.expect)(event.newNode.id).toBe(1); // Should be first node since we didn't navigate
-                (0, fixtures_1.expect)(event.newNode.displayName).toBe("Root Item 1");
-                (0, fixtures_1.expect)(event.previousNode).toBeNull();
-            }));
-            (0, fixtures_1.test)("fires with previous node when selection changes via keyboard", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="flat" 
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'
-              onSelectionDidChange="event => testState = event">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Click to select first node (using mouse to establish baseline)
-                yield tree.getByTestId("1").click();
-                // Now use keyboard to navigate and select second node
-                yield tree.component.focus();
-                yield tree.component.press("ArrowDown"); // Navigate to second node
-                yield tree.component.press("Enter"); // Select it
-                // Verify event has both previous and new node
-                yield fixtures_1.expect.poll(() => { var _a; return (_a = testStateDriver.testState()) === null || _a === void 0 ? void 0 : _a.then((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.newNode) === null || _a === void 0 ? void 0 : _a.id; }); }).toBe(2);
-                const event = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(event.previousNode.id).toBe(1);
-                (0, fixtures_1.expect)(event.newNode.id).toBe(2);
-            }));
-        });
-        fixtures_1.test.describe("nodeDidExpand Event via Keyboard", () => {
-            (0, fixtures_1.test)("fires when Right arrow key expands a collapsed node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidExpand="node => testState = node">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Focus the tree (first node should be focused)
-                yield tree.component.focus();
-                // Press Right arrow to expand the first node
-                yield tree.component.press("ArrowRight");
-                // Verify nodeDidExpand event fired
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is now visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-            }));
-            (0, fixtures_1.test)("fires when Enter key expands a collapsed node with children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidExpand="node => testState = node">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Focus the tree and press Enter to expand first node
-                yield tree.component.focus();
-                yield tree.component.press("Enter");
-                // Verify nodeDidExpand event fired
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is now visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-            }));
-            (0, fixtures_1.test)("only Enter key expands nodes - Space only selects", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px" var.selectionFired="false">
-            <Tree testId="tree" 
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidExpand="node => testState = node"
-              onSelectionDidChange="event => selectionFired = true">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Focus the tree and press Space - should only trigger selection, not expansion
-                yield tree.component.focus();
-                yield tree.component.press("Space");
-                // Wait a bit to ensure no expansion event fires
-                yield tree.component.waitFor({ timeout: 1000 });
-                // Verify no expansion event fired (testState should remain null)
-                const expandState = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(expandState).toBeNull();
-                // Verify children are still not visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-            }));
-        });
-        fixtures_1.test.describe("nodeDidCollapse Event via Keyboard", () => {
-            (0, fixtures_1.test)("fires when Left arrow key collapses an expanded node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="hierarchy" 
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidCollapse="node => testState = node">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Verify child is initially visible (node starts expanded)
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-                // Focus the tree and press Left arrow to collapse the first node
-                yield tree.component.focus();
-                yield tree.component.press("ArrowLeft");
-                // Verify nodeDidCollapse fired with correct node
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is no longer visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-            }));
-            (0, fixtures_1.test)("fires when Left arrow navigates from child to parent and collapses parent", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px">
-            <Tree testId="tree" 
-              dataFormat="hierarchy" 
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidCollapse="node => testState = node">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Verify child is initially visible (node starts expanded)
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-                yield tree.component.focus();
-                yield tree.component.press("ArrowDown"); // Move to child node
-                yield tree.component.press("ArrowLeft"); // Navigate to parent
-                // Then collapse the parent by pressing Left again
-                yield tree.component.press("ArrowLeft");
-                // Verify nodeDidCollapse fired with correct node
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is no longer visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-            }));
-        });
-        fixtures_1.test.describe("Complex Keyboard Event Scenarios", () => {
-            (0, fixtures_1.test)("fires multiple events during keyboard navigation session", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px" var.eventCount="0" var.lastEvent="">
-            <Tree testId="tree" 
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onSelectionDidChange="event => { eventCount++; lastEvent = 'selection:' + event.newNode?.id; testState = { count: eventCount, last: lastEvent }; }"
-              onNodeDidExpand="node => { eventCount++; lastEvent = 'expand:' + node.id; testState = { count: eventCount, last: lastEvent }; }"
-              onNodeDidCollapse="node => { eventCount++; lastEvent = 'collapse:' + node.id; testState = { count: eventCount, last: lastEvent }; }">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                // Simple keyboard interaction sequence
-                yield tree.component.focus();
-                // 1. Select and expand first node (Enter does both)
-                yield tree.component.press("Enter");
-                // 2. Navigate to child and select it
-                yield tree.component.press("ArrowDown");
-                yield tree.component.press("Space"); // Select child (Space only selects)
-                // Verify we have multiple events (using poll for async events)
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.count)).toBe(2);
-                const result = yield testStateDriver.testState();
-                // Check that we captured events (last event should be selection)
-                (0, fixtures_1.expect)(result.last).toMatch(/selection:\d+/);
-            }));
-            (0, fixtures_1.test)("handles rapid keyboard interactions without missing events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <VStack height="400px" var.expandCount="0">
-            <Tree testId="tree" 
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-              onNodeDidExpand="node => { expandCount++; testState = expandCount; }">
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-        `);
-                const tree = yield createTreeDriver("tree");
-                yield tree.component.focus();
-                // Rapid expand/collapse sequence
-                yield tree.component.press("ArrowRight"); // Expand
-                yield tree.component.press("ArrowLeft"); // Collapse
-                yield tree.component.press("ArrowRight"); // Expand again
-                yield tree.component.press("ArrowLeft"); // Collapse again
-                yield tree.component.press("ArrowRight"); // Expand third time
-                // Verify all expansion events were captured
-                yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBe(3);
-            }));
-        });
-    });
-    // =============================================================================
-    // API EVENT TESTS
-    // =============================================================================
-    fixtures_1.test.describe("API Events", () => {
-        fixtures_1.test.describe("nodeDidExpand Event via API", () => {
-            (0, fixtures_1.test)("fires when expandNode() API method is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="none"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-                onNodeDidExpand="node => testState = node">
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-btn" label="Expand Node 1" onClick="
-              treeApi.expandNode(1);
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const expandButton = yield createButtonDriver("expand-btn");
-                // Initially, child should not be visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-                // Trigger API expansion
-                yield expandButton.click();
-                // Verify nodeDidExpand event fired
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is now visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-            }));
-            (0, fixtures_1.test)("fires for expandAll() API method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, createButtonDriver, }) {
-                yield initTestBed(`
-          <Fragment>
-            <VStack height="400px" var.expandEvents="[]">
-              <Text testId="eventsText">{expandEvents}</Text>
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="none"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-                onNodeDidExpand="node => {expandEvents.push(node.id)}"
-              >
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-all-btn" label="Expand All" onClick="
-              treeApi.expandAll();
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const expandAllButton = yield createButtonDriver("expand-all-btn");
-                // Trigger API expand all
-                yield expandAllButton.click();
-                const eventsText = page.getByTestId("eventsText");
-                // expandAll() does not fire individual nodeDidExpand events
-                // This is the correct behavior - mass operations should not fire individual events
-                yield (0, fixtures_1.expect)(eventsText).toHaveText("[]");
-                // But verify the visual result is correct - all nodes should be visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-                yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible();
-            }));
-            (0, fixtures_1.test)("fires for expandToLevel() API method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, createButtonDriver, }) {
-                yield initTestBed(`
-          <Fragment>
-            <VStack height="400px" var.expandEvents="[]">
-              <Text testId="eventsText">{expandEvents}</Text>
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="none"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-                onNodeDidExpand="node => {expandEvents.push(node.id)}"
-              >
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-level-btn" label="Expand to Level 1" onClick="
-              treeApi.expandToLevel(1);
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const expandLevelButton = yield createButtonDriver("expand-level-btn");
-                // Trigger API expand to level
-                yield expandLevelButton.click();
-                const eventsText = page.getByTestId("eventsText");
-                // expandToLevel() does not fire individual nodeDidExpand events
-                // This is the correct behavior - mass operations should not fire individual events
-                yield (0, fixtures_1.expect)(eventsText).toHaveText("[]");
-                // But verify the visual result is correct - level 1 nodes should be visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-            }));
-        });
-        fixtures_1.test.describe("nodeDidCollapse Event via API", () => {
-            (0, fixtures_1.test)("fires when collapseNode() API method is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-                onNodeDidCollapse="node => testState = node">
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapse-btn" label="Collapse Node 1" onClick="
-              treeApi.collapseNode(1);
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const collapseButton = yield createButtonDriver("collapse-btn");
-                // Initially, child should be visible (starts expanded)
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-                // Trigger API collapse
-                yield collapseButton.click();
-                // Verify nodeDidCollapse event fired
-                yield fixtures_1.expect.poll(() => testStateDriver.testState().then((s) => s === null || s === void 0 ? void 0 : s.id)).toBe(1);
-                // Verify child is no longer visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-            }));
-            (0, fixtures_1.test)("fires for collapseAll() API method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, createButtonDriver, }) {
-                yield initTestBed(`
-          <Fragment>
-            <VStack height="400px" var.collapseEvents="[]">
-              <Text testId="eventsText">{collapseEvents}</Text>
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'
-                onNodeDidCollapse="node => {collapseEvents.push(node.id)}"
-              >
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapse-all-btn" label="Collapse All" onClick="
-              treeApi.collapseAll();
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const collapseAllButton = yield createButtonDriver("collapse-all-btn");
-                // Initially, children should be visible (starts expanded)
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible();
-                // Trigger API collapse all
-                yield collapseAllButton.click();
-                const eventsText = page.getByTestId("eventsText");
-                // collapseAll() does not fire individual nodeDidCollapse events
-                // This is the correct behavior - mass operations should not fire individual events
-                yield (0, fixtures_1.expect)(eventsText).toHaveText("[]");
-                // But verify the visual result is correct - children should no longer be visible
-                yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible();
-            }));
-        });
-        fixtures_1.test.describe("selectionDidChange Event via API", () => {
-            (0, fixtures_1.test)("fires when selectNode() API method is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="flat"
-                data='{${JSON.stringify(testData_1.flatTreeData)}}'
-                onSelectionDidChange="event => testState = event">
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="select-btn" label="Select Node 2" onClick="
-              treeApi.selectNode(2);
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const selectButton = yield createButtonDriver("select-btn");
-                // Trigger API selection
-                yield selectButton.click();
-                // Verify selectionDidChange event fired
-                yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBeDefined();
-                const event = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(event.newNode).toBeDefined();
-                (0, fixtures_1.expect)(event.newNode.id).toBe(2);
-                (0, fixtures_1.expect)(event.newNode.displayName).toBe("Child Item 1.1");
-                (0, fixtures_1.expect)(event.previousNode).toBeNull();
-            }));
-            (0, fixtures_1.test)("fires with previous node when changing selection via API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, createButtonDriver, }) {
-                yield initTestBed(`
-          <Fragment>
-            <VStack height="400px" var.selectionEvents="{[]}">
-              <Text testId="eventsText">{JSON.stringify(selectionEvents)}</Text>
-              <Tree id="treeApi" testId="tree"
-                dataFormat="flat"
-                defaultExpanded="all"
-                data='{${JSON.stringify(testData_1.flatTreeData)}}'
-                onSelectionDidChange="event => {selectionEvents.push({prev: event.previousNode?.id || null, new: event.newNode?.id || null});}"
-              >
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="select-first-btn" label="Select First" onClick="treeApi.selectNode(1);" />
-            <Button testId="select-second-btn" label="Select Second" onClick="treeApi.selectNode(2);" />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const selectFirstButton = yield createButtonDriver("select-first-btn");
-                const selectSecondButton = yield createButtonDriver("select-second-btn");
-                // First selection
-                yield selectFirstButton.click();
-                // Second selection
-                yield selectSecondButton.click();
-                const eventsText = page.getByTestId("eventsText");
-                // Verify we have both selection events with correct previous/new node IDs
-                yield (0, fixtures_1.expect)(eventsText).toHaveText('[{"prev":null,"new":1},{"prev":1,"new":2}]');
-            }));
-            (0, fixtures_1.test)("fires when clearSelection() API method is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-                const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="flat"
-                selectedValue="1"
-                data='{${JSON.stringify(testData_1.flatTreeData)}}'
-                onSelectionDidChange="event => testState = event">
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="clear-btn" label="Clear Selection" onClick="
-              treeApi.clearSelection();
-            " />
-          </Fragment>
-        `);
-                const tree = yield createTreeDriver("tree");
-                const clearButton = yield createButtonDriver("clear-btn");
-                // Trigger API clear selection
-                yield clearButton.click();
-                // Verify selectionDidChange event fired with null newNode
-                yield fixtures_1.expect.poll(() => testStateDriver.testState()).toBeDefined();
-                const event = yield testStateDriver.testState();
-                (0, fixtures_1.expect)(event.newNode).toBeNull();
-                (0, fixtures_1.expect)(event.previousNode).toBeDefined();
-                (0, fixtures_1.expect)(event.previousNode.id).toBe(1);
-            }));
-        });
-    });
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat" 
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:aria" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        // Test main tree container ARIA attributes
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("role", "tree");
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("aria-label", "Tree navigation");
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("aria-multiselectable", "false");
-        // Test tree items have proper ARIA attributes
-        // Find treeitems by their role attribute
-        const treeItems = tree.component.locator('[role="treeitem"]');
-        // Test first tree item (should be expanded due to defaultExpanded="all")
-        const firstTreeItem = treeItems.first();
-        yield (0, fixtures_1.expect)(firstTreeItem).toHaveAttribute("role", "treeitem");
-        yield (0, fixtures_1.expect)(firstTreeItem).toHaveAttribute("aria-level", "1");
-        yield (0, fixtures_1.expect)(firstTreeItem).toHaveAttribute("aria-expanded", "true");
-        yield (0, fixtures_1.expect)(firstTreeItem).toHaveAttribute("aria-selected", "false");
-        yield (0, fixtures_1.expect)(firstTreeItem).toHaveAttribute("aria-label", "Root Item 1");
-        // Test that we have the expected number of tree items (4 total in flatTreeData)
-        yield (0, fixtures_1.expect)(treeItems).toHaveCount(4);
-        // Test second tree item (Child Item 1.1)
-        const secondTreeItem = treeItems.nth(1);
-        yield (0, fixtures_1.expect)(secondTreeItem).toHaveAttribute("aria-level", "2");
-        yield (0, fixtures_1.expect)(secondTreeItem).toHaveAttribute("aria-label", "Child Item 1.1");
-        // Test third tree item (Grandchild Item 1.1.1)
-        const thirdTreeItem = treeItems.nth(2);
-        yield (0, fixtures_1.expect)(thirdTreeItem).toHaveAttribute("aria-level", "3");
-        yield (0, fixtures_1.expect)(thirdTreeItem).toHaveAttribute("aria-label", "Grandchild Item 1.1.1");
-        // Test fourth tree item (Child Item 1.2)
-        const fourthTreeItem = treeItems.nth(3);
-        yield (0, fixtures_1.expect)(fourthTreeItem).toHaveAttribute("aria-level", "2");
-        yield (0, fixtures_1.expect)(fourthTreeItem).toHaveAttribute("aria-label", "Child Item 1.2");
-    }));
-    (0, fixtures_1.test)("supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat" 
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:keyboard" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        // Focus the tree
-        yield tree.component.focus();
-        // Test Arrow Down navigation
-        yield tree.component.press("ArrowDown");
-        // First item should be focused after initial focus + ArrowDown
-        // Test Arrow Up navigation
-        yield tree.component.press("ArrowUp");
-        // Should stay at first item (can't go up from first)
-        // Navigate down to second item
-        yield tree.component.press("ArrowDown");
-        // Test Enter for selection/expansion
-        yield tree.component.press("Enter");
-        // Test Arrow Right for expansion (if has children)
-        yield tree.component.press("ArrowRight");
-        // Test Arrow Left for collapse/parent navigation
-        yield tree.component.press("ArrowLeft");
-        // Test Home key
-        yield tree.component.press("Home");
-        // Test End key
-        yield tree.component.press("End");
-        // Test Space for selection
-        yield tree.component.press(" ");
-        // Verify tree is still visible and functional after keyboard interactions
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:keyboard")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("supports itemClickExpands behavior", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat" 
-          itemClickExpands="true"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:expand-click" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        // Initially, only root item should be visible (tree starts collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expand-click")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand-click")).not.toBeVisible();
-        // Click on the root item (not the expand/collapse icon) to expand it
-        yield tree.getByTestId("1:expand-click").click();
-        // After clicking, children should be visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand-click")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expand-click")).toBeVisible();
-        // Click on child item that has its own children
-        yield tree.getByTestId("2:expand-click").click();
-        // Grandchild should become visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expand-click")).toBeVisible();
-        // Click again to collapse
-        yield tree.getByTestId("2:expand-click").click();
-        // Grandchild should be hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expand-click")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat" 
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:screen-reader" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        // Test semantic structure that screen readers depend on
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("role", "tree");
-        // Verify all tree items have proper semantic markup
-        const treeItems = tree.component.locator('[role="treeitem"]');
-        yield (0, fixtures_1.expect)(treeItems).toHaveCount(4);
-        // Test each item has required accessibility information
-        for (let i = 0; i < 4; i++) {
-            const item = treeItems.nth(i);
-            // Each item must have a level for screen reader navigation
-            yield (0, fixtures_1.expect)(item).toHaveAttribute("aria-level");
-            // Each item must have a label for screen reader announcement
-            yield (0, fixtures_1.expect)(item).toHaveAttribute("aria-label");
-            // Each item must have selection state
-            yield (0, fixtures_1.expect)(item).toHaveAttribute("aria-selected");
-        }
-        // Test hierarchical relationships are properly communicated
-        const rootItem = treeItems.first();
-        yield (0, fixtures_1.expect)(rootItem).toHaveAttribute("aria-level", "1");
-        yield (0, fixtures_1.expect)(rootItem).toHaveAttribute("aria-expanded", "true");
-        // Test child items have correct level hierarchy
-        const childItem = treeItems.nth(1);
-        yield (0, fixtures_1.expect)(childItem).toHaveAttribute("aria-level", "2");
-        // Test grandchild has deeper level
-        const grandchildItem = treeItems.nth(2);
-        yield (0, fixtures_1.expect)(grandchildItem).toHaveAttribute("aria-level", "3");
-        // Test that all items have selection state (even if not selected)
-        const allItems = tree.component.locator('[aria-selected="false"]');
-        yield (0, fixtures_1.expect)(allItems).toHaveCount(4); // All items should be unselected initially
-        // Test expansion states are properly communicated
-        const expandedItems = tree.component.locator('[aria-expanded="true"]');
-        yield (0, fixtures_1.expect)(expandedItems).toHaveCount(2); // Root and Child Item 1.1 (which has a grandchild)
-        // Test that tree is focusable for keyboard navigation
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("tabindex", "0");
-        // Verify semantic structure is maintained for screen reader navigation
-        yield (0, fixtures_1.expect)(tree.component).toHaveAttribute("role", "tree");
-        yield (0, fixtures_1.expect)(treeItems.first()).toHaveAttribute("role", "treeitem");
-        // Test that all required accessibility information is present
-        // This ensures screen readers can properly announce tree structure
-        const firstItem = treeItems.first();
-        yield (0, fixtures_1.expect)(firstItem).toHaveAttribute("aria-level");
-        yield (0, fixtures_1.expect)(firstItem).toHaveAttribute("aria-label");
-        yield (0, fixtures_1.expect)(firstItem).toHaveAttribute("aria-expanded");
-        yield (0, fixtures_1.expect)(firstItem).toHaveAttribute("aria-selected");
-    }));
-});
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-fixtures_1.test.describe("Performance", () => {
-    (0, fixtures_1.test)("handles large datasets efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        // Generate a large dataset with 1000+ items in a hierarchical structure
-        const generateLargeDataset = (numItems = 1000) => {
-            const data = [];
-            let id = 1;
-            // Create root items (10% of total)
-            const numRoots = Math.ceil(numItems * 0.1);
-            for (let i = 0; i < numRoots; i++) {
-                data.push({
-                    id: id++,
-                    name: `Root Item ${i + 1}`,
-                    parentId: null,
-                });
-            }
-            // Create child items distributed under roots
-            const itemsPerRoot = Math.floor((numItems - numRoots) / numRoots);
-            for (let rootIndex = 0; rootIndex < numRoots; rootIndex++) {
-                const rootId = rootIndex + 1;
-                for (let j = 0; j < itemsPerRoot && id <= numItems; j++) {
-                    data.push({
-                        id: id++,
-                        name: `Child Item ${rootId}.${j + 1}`,
-                        parentId: rootId,
-                    });
-                }
-            }
-            return data;
-        };
-        const largeDataset = generateLargeDataset(1000);
-        const startTime = performance.now();
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat" 
-          data='{${JSON.stringify(largeDataset)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:perf" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        // Verify tree renders
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        const renderTime = performance.now() - startTime;
-        // Should render large dataset within reasonable time (< 5 seconds)
-        (0, fixtures_1.expect)(renderTime).toBeLessThan(5000);
-        // Test that only root items are initially visible (virtualization working)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:perf")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:perf")).toBeVisible();
-        // Verify scrolling performance - scroll to end of visible items
-        const scrollStartTime = performance.now();
-        yield tree.component.press("End"); // Scroll to last visible item
-        const scrollTime = performance.now() - scrollStartTime;
-        // Scrolling should be fast (< 1 second)
-        (0, fixtures_1.expect)(scrollTime).toBeLessThan(1000);
-        // Test expansion performance
-        const expandStartTime = performance.now();
-        yield tree.getByTestId("1:perf").click(); // Expand first root item
-        const expandTime = performance.now() - expandStartTime;
-        // Expansion should be fast (< 500ms)
-        (0, fixtures_1.expect)(expandTime).toBeLessThan(500);
-    }));
-    (0, fixtures_1.test)("maintains smooth scrolling with virtualization", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        // Create a dataset specifically for scroll testing
-        const scrollTestData = [];
-        for (let i = 1; i <= 500; i++) {
-            scrollTestData.push({
-                id: i,
-                name: `Scroll Item ${i}`,
-                parentId: null,
-            });
-        }
-        yield initTestBed(`
-      <VStack height="300px">
-        <Tree testId="scroll-tree" 
-          dataFormat="flat" 
-          data='{${JSON.stringify(scrollTestData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:scroll">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("scroll-tree");
-        // Verify tree is visible
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:scroll")).toBeVisible();
-        // Test keyboard scrolling performance
-        yield tree.component.focus();
-        // Scroll down 50 times rapidly
-        const rapidScrollStartTime = performance.now();
-        for (let i = 0; i < 50; i++) {
-            yield tree.component.press("ArrowDown");
-        }
-        const rapidScrollTime = performance.now() - rapidScrollStartTime;
-        // Rapid keyboard scrolling should remain responsive (< 2 seconds)
-        (0, fixtures_1.expect)(rapidScrollTime).toBeLessThan(2000);
-        // Verify we can reach different parts of the large list
-        yield tree.component.press("Home"); // Go to start
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:scroll")).toBeVisible();
-        yield tree.component.press("End"); // Go to end
-        // Should be able to navigate to end without timeout
-    }));
-});
-// =============================================================================
-// THEME VARIABLES TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies custom tree text color theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const TEXT_COLOR = "rgb(128, 0, 128)";
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat"
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-      `, {
-            testThemeVars: {
-                "textColor-Tree": TEXT_COLOR,
-            },
-        });
-        const tree = yield createTreeDriver("tree");
-        // Get row wrappers directly using getNodeWrapperByMarker
-        const rowWrapper1 = tree.getNodeWrapperByTestId("1");
-        const rowWrapper2 = tree.getNodeWrapperByTestId("2");
-        const rowWrapper3 = tree.getNodeWrapperByTestId("3");
-        const rowWrapper4 = tree.getNodeWrapperByTestId("4");
-        yield (0, fixtures_1.expect)(rowWrapper1).toBeVisible();
-        // Test all items have correct default text color
-        yield (0, fixtures_1.expect)(rowWrapper1).toHaveCSS("color", TEXT_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper2).toHaveCSS("color", TEXT_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper3).toHaveCSS("color", TEXT_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper4).toHaveCSS("color", TEXT_COLOR);
-    }));
-    (0, fixtures_1.test)("applies custom hover state theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, page, }) {
-        const HOVER_BG_COLOR = "rgb(255, 255, 0)";
-        const HOVER_TEXT_COLOR = "rgb(0, 0, 255)";
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree" 
-          dataFormat="flat"
-          defaultExpanded="all"
-          data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}" verticalAlignment="center">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-      `, {
-            testThemeVars: {
-                "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
-                "textColor-Tree--hover": HOVER_TEXT_COLOR,
-            },
-        });
-        const tree = yield createTreeDriver("tree");
-        // Get row wrappers directly using getNodeWrapperByMarker
-        const rowWrapper1 = tree.getNodeWrapperByTestId("1");
-        const rowWrapper2 = tree.getNodeWrapperByTestId("2");
-        const rowWrapper3 = tree.getNodeWrapperByTestId("3");
-        yield (0, fixtures_1.expect)(rowWrapper1).toBeVisible();
-        // Test hover on first item
-        yield rowWrapper1.hover();
-        yield (0, fixtures_1.expect)(rowWrapper1).toHaveCSS("background-color", HOVER_BG_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper1).toHaveCSS("color", HOVER_TEXT_COLOR);
-        // Test hover on second item
-        yield rowWrapper2.hover();
-        yield (0, fixtures_1.expect)(rowWrapper2).toHaveCSS("background-color", HOVER_BG_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper2).toHaveCSS("color", HOVER_TEXT_COLOR);
-        // Test hover on third item
-        yield rowWrapper3.hover();
-        yield (0, fixtures_1.expect)(rowWrapper3).toHaveCSS("background-color", HOVER_BG_COLOR);
-        yield (0, fixtures_1.expect)(rowWrapper3).toHaveCSS("color", HOVER_TEXT_COLOR);
-    }));
-});
-// =============================================================================
-// EDGE CASES TESTS
-// =============================================================================
-fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handles null/undefined data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data="{null}" 
-          dataFormat="flat"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles malformed data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        const malformedData = [
-            { id: 1, name: "Valid Item" },
-            { /* missing id */ name: "Invalid Item" },
-            null,
-            undefined,
-        ];
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(malformedData)}}' 
-          dataFormat="flat"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles circular references in hierarchy data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, }) {
-        const circularData = [
-            { id: 1, name: "Item 1", parentId: 2 },
-            { id: 2, name: "Item 2", parentId: 1 },
-        ];
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(circularData)}}' 
-          dataFormat="flat"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles duplicate IDs gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        const duplicateIdData = [
-            { id: 1, name: "Item 1" },
-            { id: 1, name: "Duplicate Item 1" },
-            { id: 2, name: "Item 2" },
-        ];
-        yield initTestBed(`
-      <VStack height="200px">
-      <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(duplicateIdData)}}' 
-          dataFormat="flat"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles orphaned nodes in flat data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        const orphanedData = [
-            { id: 1, name: "Root Item" },
-            { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent
-        ];
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(orphanedData)}}' 
-          dataFormat="flat"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles deeply nested data structures", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        const deepData = Array.from({ length: 100 }, (_, i) => ({
-            id: i + 1,
-            name: `Level ${i + 1}`,
-            parentId: i === 0 ? null : i,
-        }));
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(deepData)}}' 
-          dataFormat="flat"
-          selectedValue="{100}"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles invalid dataFormat values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver }) {
-        const orphanedData = [
-            { id: 1, name: "Root Item" },
-            { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent
-        ];
-        yield initTestBed(`
-      <VStack height="200px">
-        <Tree 
-          testId="tree" 
-          data='{${JSON.stringify(orphanedData)}}' 
-          dataFormat="invalid-format"
-        />
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-    }));
-});