xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,472 @@
+"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 fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with both label and value properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Display Text" value="stored_value" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Display Text" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with only label property (uses label as value)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Display Text" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Display Text" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with only value property (uses value as label)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option value="display_value" />
+        <Option label="Control Option" value="control" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // The option with only value should render (may display as empty)
+        yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(2);
+        yield (0, fixtures_1.expect)(page.getByRole("option").first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Control Option" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("does not render when neither label nor value is provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option />
+        <Option label="Visible Option" value="visible" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // Should only see the valid option
+        yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(1);
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Visible Option" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("enabled property defaults to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Default Option" value="default" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Default Option" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+        yield (0, fixtures_1.expect)(option).not.toHaveAttribute("aria-disabled", "true");
+    }));
+    (0, fixtures_1.test)("enabled set to true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Enabled Option" value="enabled" enabled="{true}" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Enabled Option" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+        yield (0, fixtures_1.expect)(option).not.toHaveAttribute("aria-disabled", "true");
+    }));
+    (0, fixtures_1.test)("enabled set to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Disabled Option" value="disabled" enabled="{false}" />
+        <Option label="Enabled Option" value="enabled" enabled="{true}" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const disabledOption = page.getByRole("option", { name: "Disabled Option" });
+        const enabledOption = page.getByRole("option", { name: "Enabled Option" });
+        yield (0, fixtures_1.expect)(disabledOption).toBeVisible();
+        yield (0, fixtures_1.expect)(disabledOption).toHaveAttribute("aria-disabled", "true");
+        yield (0, fixtures_1.expect)(enabledOption).toBeVisible();
+        yield (0, fixtures_1.expect)(enabledOption).not.toHaveAttribute("aria-disabled", "true");
+    }));
+    (0, fixtures_1.test)("supports text node children as label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option value="text_node">Text Node Label</Option>
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Text Node Label" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+    }));
+    (0, fixtures_1.test)("supports rich content as children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select>
+        <Option value="rich_content">
+          <HStack gap="$space-small">
+            <Icon name="user" />
+            <Text>Rich Content</Text>
+          </HStack>
+        </Option>
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option");
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+        yield (0, fixtures_1.expect)(option.locator("text=Rich Content")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("label property takes precedence over text node children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Label Property" value="precedence">Text Node Content</Option>
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Label Property" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+        // Text node should not be visible since label takes precedence
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Text Node Content" })).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("works within Select component for selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="testSelect" onDidChange="arg => testState = arg">
+          <Option label="First" value="1" />
+          <Option label="Second" value="2" />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("testSelect");
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Second");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("2");
+    }));
+    (0, fixtures_1.test)("works within AutoComplete component for selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <AutoComplete id="testAutoComplete" onDidChange="arg => testState = arg">
+          <Option label="Apple" value="apple" />
+          <Option label="Banana" value="banana" />
+        </AutoComplete>
+      </Fragment>
+    `);
+        const autocomplete = page.getByRole("combobox");
+        yield autocomplete.click();
+        const appleOption = page.getByRole("option", { name: "Apple" });
+        yield appleOption.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("apple");
+    }));
+    (0, fixtures_1.test)("works within RadioGroup component for selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <RadioGroup id="testRadioGroup" onDidChange="arg => testState = arg">
+          <VStack>
+            <Option label="Option A" value="a" />
+            <Option label="Option B" value="b" />
+          </VStack>
+        </RadioGroup>
+      </Fragment>
+    `);
+        const optionB = page.getByRole("radio", { name: "Option B" });
+        yield optionB.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("b");
+    }));
+    (0, fixtures_1.test)("handles numeric values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="numericSelect" onDidChange="arg => testState = arg">
+          <Option label="Zero" value="{0}" />
+          <Option label="Forty Two" value="{42}" />
+          <Option label="Negative" value="{-1}" />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("numericSelect");
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Forty Two");
+        // Values from Select are returned as strings
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(42);
+    }));
+    (0, fixtures_1.test)("handles boolean values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="booleanSelect" onDidChange="arg => testState = arg">
+          <Option label="True" value="{true}" />
+          <Option label="False" value="{false}" />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("booleanSelect");
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("False");
+        // Values from Select are returned as strings
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
+    }));
+    (0, fixtures_1.test)("works with dynamic data through Items component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="dynamicSelect" onDidChange="arg => testState = arg">
+          <Items data="{['apple', 'banana', 'cherry']}">
+            <Option label="{$item}" value="{$itemIndex}" />
+          </Items>
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("dynamicSelect");
+        yield driver.toggleOptionsVisibility();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "apple" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "banana" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "cherry" })).toBeVisible();
+        yield driver.selectLabel("banana");
+        // Values from Select are returned as strings
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
+    }));
+    (0, fixtures_1.test)("handles empty string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="emptySelect" onDidChange="arg => testState = arg">
+          <Option label="Empty String" value="" />
+          <Option label="Space" value=" " />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("emptySelect");
+        yield driver.toggleOptionsVisibility();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Empty String" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Space" })).toBeVisible();
+        yield driver.selectLabel("Empty String");
+        // When value is empty string, Select may return the label instead
+        const result = yield testStateDriver.testState();
+        (0, fixtures_1.expect)(result === "Empty String").toBe(true);
+    }));
+    (0, fixtures_1.test)("handles null values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="emptySelect" onDidChange="arg => testState = arg">
+          <Option label="Empty String" value="{null}" />
+          <Option label="Space" value=" " />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("emptySelect");
+        yield driver.toggleOptionsVisibility();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Empty String" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Space" })).toBeVisible();
+        yield driver.selectLabel("Empty String");
+        // When value is empty string, Select may return the label instead
+        const result = yield testStateDriver.testState();
+        (0, fixtures_1.expect)(result).toBe(null);
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has correct option role within Select", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Test Option" value="test" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Test Option" });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+    }));
+    (0, fixtures_1.test)("has correct radio role within RadioGroup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Option label="Test Option" value="test" />
+      </RadioGroup>
+    `);
+        const radio = page.getByRole("radio", { name: "Test Option" });
+        yield (0, fixtures_1.expect)(radio).toBeVisible();
+    }));
+    (0, fixtures_1.test)("disabled option has correct aria-disabled attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Disabled Option" value="disabled" enabled="{false}" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Disabled Option" });
+        yield (0, fixtures_1.expect)(option).toHaveAttribute("aria-disabled", "true");
+    }));
+    (0, fixtures_1.test)("enabled option does not have aria-disabled attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Enabled Option" value="enabled" enabled="{true}" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: "Enabled Option" });
+        yield (0, fixtures_1.expect)(option).not.toHaveAttribute("aria-disabled", "true");
+    }));
+    (0, fixtures_1.test)("supports keyboard navigation within Select", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="keyboardSelect" onDidChange="arg => testState = arg">
+          <Option label="First Option" value="1" />
+          <Option label="Second Option" value="2" />
+          <Option label="Third Option" value="3" />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("keyboardSelect");
+        // Start by clicking to open the dropdown and focus on first option
+        yield driver.component.click();
+        yield page.waitForTimeout(200);
+        // Navigate down to third option step by step with longer waits
+        yield page.keyboard.press("ArrowDown");
+        yield page.waitForTimeout(200);
+        yield page.keyboard.press("ArrowDown");
+        yield page.waitForTimeout(200);
+        // Select with Enter
+        yield page.keyboard.press("Enter");
+        yield page.waitForTimeout(200);
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("3");
+    }));
+    (0, fixtures_1.test)("supports keyboard navigation within RadioGroup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <RadioGroup id="keyboardRadio" onDidChange="arg => testState = arg">
+          <VStack>
+            <Option label="First Option" value="1" />
+            <Option label="Second Option" value="2" />
+            <Option label="Third Option" value="3" />
+          </VStack>
+        </RadioGroup>
+      </Fragment>
+    `);
+        const firstRadio = page.getByRole("radio", { name: "First Option" });
+        yield firstRadio.focus();
+        yield firstRadio.click(); // Start with a selection
+        yield page.waitForTimeout(100);
+        // Navigate with arrow keys
+        yield page.keyboard.press("ArrowDown");
+        yield page.waitForTimeout(100);
+        yield page.keyboard.press("ArrowDown");
+        yield page.waitForTimeout(100);
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("3");
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles long unicode characters in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="Family: 👨‍👩‍👧‍👦" value="family" />
+        <Option label="Chinese: 你好世界" value="chinese" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Family: 👨‍👩‍👧‍👦" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Chinese: 你好世界" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles very long label text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        const longText = "A".repeat(100); // Reduced from 500 to be more reasonable
+        yield initTestBed(`
+      <Select>
+        <Option label="${longText}" value="long" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        const option = page.getByRole("option", { name: longText });
+        yield (0, fixtures_1.expect)(option).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles enabled as string value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="String False" value="string" enabled="false" />
+        <Option label="String True" value="string2" enabled="true" />
+        <Option label="Valid Option" value="valid" enabled="{true}" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // All options should be visible
+        yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(3);
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "String False" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "String True" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Valid Option" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("disabled option cannot be selected in Select", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Select id="disabledSelect" onDidChange="arg => testState = arg" initialValue="enabled">
+          <Option label="Enabled Option" value="enabled" />
+          <Option label="Disabled Option" value="disabled" enabled="{false}" />
+        </Select>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("disabledSelect");
+        yield driver.toggleOptionsVisibility();
+        // Try to select the disabled option (driver should not succeed)
+        const initialValue = yield testStateDriver.testState();
+        yield driver.selectLabel("Disabled Option");
+        // Value should not change since option is disabled
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(initialValue);
+    }));
+    (0, fixtures_1.test)("handles object as label (converts to string)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="{{}}" value="object" />
+        <Option label="Valid Option" value="valid" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // Should see both options - object will be converted to string representation
+        yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(2);
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Valid Option" })).toBeVisible();
+        // The object label should be visible with some string representation
+        yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("null values are handled gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="{null}" value="null_label" />
+        <Option label="Valid Option" value="valid" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // The actual behavior might vary - this needs investigation
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Valid Option" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("undefined values are handled gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
+      <Select>
+        <Option label="{undefined}" value="undefined_label" />
+        <Option label="Valid Option" value="valid" />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        // The actual behavior might vary - this needs investigation
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Valid Option" })).toBeVisible();
+    }));
+});

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

@@ -0,0 +1,80 @@
+"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 fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// 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, page }) {
+        yield initTestBed(`<PageMetaTitle />`);
+        // PageMetaTitle doesn't render visible DOM elements, it only affects page title
+        // Default title should be set in browser with test bed suffix
+        yield (0, fixtures_1.expect)(page).toHaveTitle("XMLUI Application | test bed app");
+    }));
+    (0, fixtures_1.test)("component renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<PageMetaTitle value="Custom Page Title" />`);
+        // Custom title should be set in browser with test bed suffix
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Custom Page Title | test bed app");
+    }));
+    (0, fixtures_1.test)("component handles dynamic value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <VStack>
+        <PageMetaTitle value="{testState || 'Initial Title'}" />
+        <Button onClick="testState = 'Updated Title'">Update Title</Button>
+      </VStack>
+    `);
+        // Initial title should be set
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Initial Title | test bed app");
+        // Click button to update title
+        yield page.getByRole("button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("Updated Title");
+        // Title should be updated in browser
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Updated Title | test bed app");
+    }));
+    (0, fixtures_1.test)("component handles child content as title", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PageMetaTitle>
+        Child Content Title
+      </PageMetaTitle>
+    `);
+        // Child content should be used as title
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Child Content Title | test bed app");
+    }));
+    (0, fixtures_1.test)("value property takes precedence over child content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PageMetaTitle value="Value Property Title">
+        Child Content That Should Be Ignored
+      </PageMetaTitle>
+    `);
+        // Value property should take precedence
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Value Property Title | test bed app");
+    }));
+    (0, fixtures_1.test)("multiple PageMetaTitle components - last one wins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <VStack>
+        <PageMetaTitle value="First Title" />
+        <PageMetaTitle value="Second Title" />
+        <PageMetaTitle value="Final Title" />
+      </VStack>
+    `);
+        // Last component should set the final title
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Final Title | test bed app");
+    }));
+    (0, fixtures_1.test)("component updates existing page title", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        // Set initial title
+        yield initTestBed(`<PageMetaTitle value="Initial Title" />`);
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Initial Title | test bed app");
+        // Update with new component
+        yield initTestBed(`<PageMetaTitle value="Updated Title" />`);
+        yield (0, fixtures_1.expect)(page).toHaveTitle("Updated Title | test bed app");
+    }));
+});