xmlui 0.11.4 → 0.11.6

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

@@ -1,763 +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 fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    // --- Component rendering
-    (0, fixtures_1.test)("dynamic options displayed with Items component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page, }) {
-        yield initTestBed(`
-      <Select>
-        <Items data="{['One', 'Two', 'Three']}" >
-          <Option value="{$itemIndex}" label="{$item}" />
-        </Items>
-      </Select>`);
-        const driver = yield createSelectDriver();
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Three" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("changing selected option in form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver }) {
-        yield initTestBed(`
-    <Form data="{{sel: 'opt1'}}">
-      <FormItem testId="mySelect" type="select" bindTo="sel">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </FormItem>
-    </Form>`);
-        const driver = yield createSelectDriver("mySelect");
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("first");
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("second");
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("second");
-    }));
-    // --- initialValue prop
-    (0, fixtures_1.test)("initialValue set to first valid value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-    <Fragment>
-      <Select id="mySelect" initialValue="{0}">
-        <Option value="{0}" label="Zero"/>
-        <Option value="{1}" label="One"/>
-        <Option value="{2}" label="Two"/>
-      </Select>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Fragment>
-  `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
-        yield (0, fixtures_1.expect)(page.getByText("Zero", { exact: true })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One", { exact: true })).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue set to non-existant option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-    <Fragment>
-      <Select id="mySelect" initialValue="{42}">
-        <Option value="{0}" label="Zero"/>
-        <Option value="{1}" label="One"/>
-        <Option value="{2}" label="Two"/>
-      </Select>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Fragment>
-  `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 42");
-    }));
-    (0, fixtures_1.test)("reset works with initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
-        yield initTestBed(`
-    <Fragment>
-      <Select id="mySelect" initialValue="{0}">
-        <Option value="{0}" label="Zero"/>
-        <Option value="{1}" label="One"/>
-        <Option value="{2}" label="Two"/>
-      </Select>
-      <Button id="resetBtn" label="reset" onClick="mySelect.reset()"/>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Fragment>
-    `);
-        const selectDrv = yield createSelectDriver("mySelect");
-        yield selectDrv.toggleOptionsVisibility();
-        yield selectDrv.selectLabel("One");
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
-        const btnDriver = yield createButtonDriver("resetBtn");
-        yield btnDriver.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
-    }));
-    (0, fixtures_1.test)("reset works with no intialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
-        yield initTestBed(`
-    <Fragment>
-      <Select id="mySelect">
-        <Option value="{0}" label="Zero"/>
-        <Option value="{1}" label="One"/>
-        <Option value="{2}" label="Two"/>
-      </Select>
-      <Button id="resetBtn" label="reset" onClick="mySelect.reset()"/>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Fragment>
-    `);
-        const selectDrv = yield createSelectDriver("mySelect");
-        yield selectDrv.toggleOptionsVisibility();
-        yield selectDrv.selectLabel("One");
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
-        const btnDriver = yield createButtonDriver("resetBtn");
-        yield btnDriver.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).not.toContainText("1");
-    }));
-    // --- enabled prop
-    (0, fixtures_1.test)("disabled Select cannot be opened", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, createSelectDriver, initTestBed }) {
-        yield initTestBed(`
-    <Select enabled="{false}">
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.click({ force: true });
-        yield (0, fixtures_1.expect)(page.getByText("One")).not.toBeVisible();
-    }));
-    // --- readOnly prop
-    (0, fixtures_1.test)("readOnly Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-        yield initTestBed(`
-    <Select readOnly initialValue="1">
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("Two");
-        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
-        // verify dropdown is not visible but value is shown
-    }));
-    (0, fixtures_1.test)("readOnly multi-Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-        yield initTestBed(`
-    <Select readOnly initialValue="{[1, 2]}" multiSelect>
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-      <Option value="3" label="Three"/>
-    </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("Three");
-        yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("disabled Option cannot be selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page }) {
-        yield initTestBed(`
-    <Select>
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two" enabled="{false}"/>
-    </Select>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).not.toBeVisible();
-        const driver = yield createSelectDriver();
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("Two");
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("clicking label brings up the options", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-    <Select label="Choose an option">
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-  `);
-        yield page.getByLabel("Choose an option").click();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("label displayed for selected numeric value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-    <Fragment>
-      <Select initialValue="{0}" >
-        <Option value="{0}" label="Zero"/>
-        <Option value="{1}" label="One"/>
-        <Option value="{2}" label="Two"/>
-      </Select>
-    </Fragment>
-  `);
-        yield (0, fixtures_1.expect)(page.getByText("Zero")).toBeVisible();
-    }));
-    // --- autoFocus prop
-    (0, fixtures_1.test)("autoFocus brings the focus to component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-    <Select>
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-    <Select testId="focused-select" autoFocus>
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-    `);
-        const driver = yield createSelectDriver("focused-select");
-        yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-    }));
-    // --- Templates
-    (0, fixtures_1.test)("emptyListTemplate shown when wrapped inside an App component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-    <App>
-      <Select testId="mySelect">
-        <property name="emptyListTemplate">
-          <Text value="Nothing to see here!" />
-        </property>
-      </Select>
-    </App>
-    `);
-        const driver = yield createSelectDriver("mySelect");
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByText("Nothing to see here!", { exact: true })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("optionTemplate is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-    <Select>
-      <Items items="{[
-        { value: 'opt1', label: 'first' },
-        { value: 'opt2', label: 'second' },
-        { value: 'opt3', label: 'third' },
-      ]}">
-        <Option value="{$item.value}" label="{$item.label}">
-          <Text>Template for value {$item.value}</Text>
-        </Option>
-      </Items>
-    </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByText("Template for value opt1")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Template for value opt2")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Template for value opt3")).toBeVisible();
-    }));
-    // --- placeholder prop
-    (0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Select placeholder="Please select an item">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Please select an item")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Option without label and value is not rendered", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Select placeholder="Please select an item">
-        <Option />
-        <Option />
-        <Option />
-      </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByRole("option")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("Option value defaults to label", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Select id="mySelect">
-          <Option label="Zero"/>
-          <Option label="One"/>
-          <Option label="Two"/>
-        </Select>
-        <Text testId="text">Selected value: {mySelect.value}</Text>
-      </Fragment>
-    `);
-        const driver = yield createSelectDriver("mySelect");
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("Zero");
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: Zero");
-    }));
-});
-// =============================================================================
-// LABEL POSITIONING TESTS
-// =============================================================================
-fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("labelBreak prop defaults to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield page.setViewportSize({ width: 300, height: 720 });
-        yield initTestBed(`
-    <Select
-      label="Dignissimos esse quasi esse cupiditate qui qui. Ut provident ad voluptatem tenetur sit consequuntur. Aliquam nisi fugit ut temporibus itaque ducimus rerum. Dolorem reprehenderit qui adipisci. Ullam harum atque ipsa."
-      >
-      <Option value="1" label="One"/>
-      <Option value="2" label="Two"/>
-    </Select>
-    `);
-        const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
-        const select = page.getByRole("button").or(page.getByRole("combobox")).first();
-        const { width: selectWidth } = yield select.boundingBox();
-        (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
-    }));
-    (0, fixtures_1.test)('labelWidth applies with labelPosition="start"', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield page.setViewportSize({ width: 300, height: 720 });
-        yield initTestBed(`
-      <Select label="Dignissimos esse quasi" labelWidth="200px" labelPosition="start" >
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-        <Option value="opt4" label="fourth"/>
-        <Option value="opt5" label="fifth"/>
-      </Select>
-    `);
-        const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
-        (0, fixtures_1.expect)(labelWidth).toBeGreaterThanOrEqual(200);
-    }));
-});
-// =============================================================================
-// SEARCHABLE SELECT TESTS
-// =============================================================================
-fixtures_1.test.describe("searchable select", () => {
-    (0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Select searchable placeholder="Please select an item">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("Please select an item")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("inProgressNotificationMessage shown when inProgress is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-      <Select searchable inProgress inProgressNotificationMessage="in-progress-msg">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByText("in-progress-msg")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("inProgressNotificationMessage not shown when inProgress is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-      <Select searchable inProgress="false" inProgressNotificationMessage="in-progress-msg">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.click();
-        yield (0, fixtures_1.expect)(page.getByText("in-progress-msg")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("search filters option labels", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Select searchable>
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.toggleOptionsVisibility();
-        yield driver.searchFor("econd");
-        const options = yield page.getByRole("option").all();
-        (0, fixtures_1.expect)(options).toHaveLength(1);
-        yield (0, fixtures_1.expect)(options[0]).toHaveText("second");
-    }));
-});
-// =============================================================================
-// MULTISELECT TESTS
-// =============================================================================
-fixtures_1.test.describe("multiSelect", () => {
-    (0, fixtures_1.test)("initialValue='{[0]}' works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Fragment>
-        <Select id="mySelect" initialValue="{[0]}" multiSelect>
-          <Option value="{0}" label="Zero"/>
-          <Option value="{1}" label="One"/>
-          <Option value="{2}" label="Two"/>
-        </Select>
-        <Text testId="text">Selected value: {mySelect.value}</Text>
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
-    }));
-    (0, fixtures_1.test)("initialValue='{[0,1]}' works", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Fragment>
-        <Select id="mySelect" initialValue="{[0,1]}" multiSelect>
-          <Option value="{0}" label="Zero"/>
-          <Option value="{1}" label="One"/>
-          <Option value="{2}" label="Two"/>
-        </Select>
-        <Text testId="text">Selected value: {mySelect.value}</Text>
-      </Fragment>
-    `);
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0,1");
-    }));
-    (0, fixtures_1.test)("select multiple items without closing listbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Fragment>
-        <Select id="mySelect" multiSelect>
-          <Option value="{0}" label="Zero"/>
-          <Option value="{1}" label="One"/>
-          <Option value="{2}" label="Two"/>
-        </Select>
-        <Text testId="text">Selected value: {mySelect.value}</Text>
-      </Fragment>
-    `);
-        const selectDrv = yield createSelectDriver("mySelect");
-        yield selectDrv.toggleOptionsVisibility();
-        yield selectDrv.selectMultipleLabels(["Zero", "One"]);
-        /* problem is that the listbox closes after the 1st selection is made */
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0,1");
-    }));
-    (0, fixtures_1.test)("clicking label brings up the options", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield initTestBed(`
-      <Select label="Choose an option" multiSelect>
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        yield page.getByLabel("Choose an option").click();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-    }));
-    (0, fixtures_1.test)("labelBreak prop defaults to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-        yield page.setViewportSize({ width: 300, height: 720 });
-        yield initTestBed(`
-      <Select
-        label="Dignissimos esse quasi esse cupiditate qui qui. Ut provident ad voluptatem tenetur sit consequuntur. Aliquam nisi fugit ut temporibus itaque ducimus rerum. Dolorem reprehenderit qui adipisci. Ullam harum atque ipsa."
-        multiSelect>
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
-        const select = page.getByRole("button").or(page.getByRole("combobox")).first();
-        const { width: selectWidth } = yield select.boundingBox();
-        (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
-    }));
-    (0, fixtures_1.test)('labelPosition="start" is left in ltr language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <Select multiSelect label="hi there" labelPosition="start" labelBreak="false">
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-      `);
-        const { x: labelX } = yield page.getByText("hi there").boundingBox();
-        const select = page.getByRole("button").or(page.getByRole("combobox")).first();
-        const { x: selectX } = yield select.boundingBox();
-        (0, fixtures_1.expect)(labelX).toBeLessThan(selectX);
-    }));
-    (0, fixtures_1.test)('labelPosition="start" is right in rtl language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <VStack direction="rtl">
-        <Select multiSelect label="hi there" labelPosition="start" labelBreak="false">
-          <Option value="1" label="One" />
-          <Option value="2" label="Two" />
-        </Select>
-      </VStack>
-    `);
-        const { x: labelX } = yield page.getByText("hi there").boundingBox();
-        const select = page.getByRole("button").or(page.getByRole("combobox")).first();
-        const { x: selectX } = yield select.boundingBox();
-        (0, fixtures_1.expect)(labelX).toBeGreaterThan(selectX);
-    }));
-    (0, fixtures_1.test)("multiSelect autoFocus brings the focus to component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-      <Select multiSelect>
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-      <Select testId="focused-select" multmultiSelect autoFocus>
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        const driver = yield createSelectDriver("focused-select");
-        yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus brings the focus to component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-      <Select initialValue="opt1" placeholder="Select..." multiSelect>
-          <property name="valueTemplate">
-              <HStack>
-              <Text>{$item.value}={$item.label}</Text>
-              <Button
-                  variant="ghost"
-                  icon="close"
-                  size="xs"
-                  testId="remove-item-btn"
-                  onClick="$itemContext.removeItem()"/>
-              </HStack>
-          </property>
-          <Option value="opt1" label="first"/>
-          <Option value="opt2" label="second"/>
-          <Option value="opt3" label="third"/>
-      </Select>
-    `);
-        const driver = yield createSelectDriver();
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectLabel("first");
-        yield (0, fixtures_1.expect)(page.getByText("opt1=first", { exact: true })).toBeVisible();
-        yield page.getByTestId("remove-item-btn").click();
-        yield (0, fixtures_1.expect)(page.getByText("opt1=first", { exact: true })).not.toBeVisible();
-    }));
-});
-// =============================================================================
-// SEARCHABLE MULTISELECT TESTS
-// =============================================================================
-fixtures_1.test.describe("searchable multiselect", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("searching for and selecting 2 items works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-        yield initTestBed(`
-      <Fragment>
-        <Select id="mySelect" testId="mySelect" multiSelect searchable>
-          <Option value="{0}" label="Zero"/>
-          <Option value="{1}" label="One"/>
-          <Option value="{2}" label="Two"/>
-        </Select>
-        <Text testId="text">Selected value: {mySelect.value}</Text>
-      </Fragment>
-    `);
-        const driver = yield createSelectDriver("mySelect");
-        yield driver.toggleOptionsVisibility();
-        yield driver.selectFirstLabelPostSearh("One");
-        yield driver.selectFirstLabelPostSearh("Two");
-        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1,2");
-    }));
-});
-// =============================================================================
-// EVENT HANDLING TESTS
-// =============================================================================
-fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Select onGotFocus="testState = 'focused'">
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        const selectButton = page.getByRole("combobox");
-        yield selectButton.focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Select label="Choose" onGotFocus="testState = 'focused'">
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        yield page.getByText("Choose").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Select onLostFocus="testState = 'blurred'">
-        <Option value="1" label="One"/>
-        <Option value="2" label="Two"/>
-      </Select>
-    `);
-        const selectButton = page.getByRole("combobox");
-        yield selectButton.focus();
-        yield selectButton.blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
-    }));
-});
-// =============================================================================
-// FORM INTEGRATION TESTS
-// =============================================================================
-//this is an upstream issue: https://github.com/radix-ui/primitives/issues/3135
-(0, fixtures_1.test)("initialValue honored when used within Form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Form>
-      <Select id="mySelect" initialValue="opt3">
-        <Option value="opt1" label="first"/>
-        <Option value="opt2" label="second"/>
-        <Option value="opt3" label="third"/>
-      </Select>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Form>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: opt3");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Visual State", () => {
-    (0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Select width="200px" testId="test"/>`, {});
-        const input = page.getByTestId("test");
-        const { width } = yield input.boundingBox();
-        (0, fixtures_1.expect)(width).toBe(200);
-    }));
-    (0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`<Select width="200px" label="test" testId="test"/>`, {});
-        const input = page.getByTestId("test");
-        const { width } = yield input.boundingBox();
-        (0, fixtures_1.expect)(width).toBe(200);
-    }));
-    (0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield page.setViewportSize({ width: 400, height: 300 });
-        yield initTestBed(`<Select width="50%" testId="test"/>`, {});
-        const input = page.getByTestId("test");
-        const { width } = yield input.boundingBox();
-        (0, fixtures_1.expect)(width).toBe(200);
-    }));
-    (0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield page.setViewportSize({ width: 400, height: 300 });
-        yield initTestBed(`<Select width="50%" label="test" testId="test"/>`, {});
-        const input = page.getByTestId("test");
-        const { width } = yield input.boundingBox();
-        (0, fixtures_1.expect)(width).toBe(200);
-    }));
-});
-// =============================================================================
-// Z-INDEX AND MODAL LAYERING TESTS
-// =============================================================================
-fixtures_1.test.describe("Z-Index and Modal Layering", () => {
-    (0, fixtures_1.test)("Select dropdown in modal is visible and not covered by modal overlay", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-        yield initTestBed(`
-      <Fragment>
-        <Select testId="select">
-          <Option value="stuff1">option 1</Option>
-          <Option value="stuff2">option 2</Option>
-          <Button onClick="modal.open()">BLOW UP</Button>
-        </Select>
-        <ModalDialog id="modal" title="Example Dialog">
-          <Form data="{{ firstName: 'Billy', lastName: 'Bob' }}">
-            <FormItem bindTo="firstName" required="true" />
-            <FormItem bindTo="lastName" required="true" />
-            <FormItem
-              label="Field to Update"
-              type="select"
-              width="200px"
-              bindTo="fieldToUpdate"
-              required
-              initialValue="rate"
-              testId="modal-select"
-            >
-              <Option value="rate">Price</Option>
-              <Option value="description">Item Description</Option>
-              <Option value="account_id">Account</Option>
-            </FormItem>
-          </Form>
-        </ModalDialog>
-      </Fragment>
-    `);
-        const selectDriver = yield createSelectDriver("select");
-        yield selectDriver.click();
-        // Click button to open modal
-        const blowUpButton = page.getByText("BLOW UP");
-        yield blowUpButton.click();
-        // Wait for modal to be visible
-        yield (0, fixtures_1.expect)(page.getByRole("dialog", { name: "Example Dialog" })).toBeVisible();
-        // Open the select in the modal
-        const modalSelectDriver = yield createSelectDriver("modal-select");
-        yield modalSelectDriver.click();
-        // Check that all options are visible
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Price" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Item Description" })).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Account" })).toBeVisible();
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-Select${variant.value}`]: "12px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-Select${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-Select${variant.value}`]: "1px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-Select${variant.value}`]: "dashed" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`fontSize-Select${variant.value}`]: "14px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-Select${variant.value}`]: "rgb(240, 240, 240)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-Select${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-Select${variant.value}`]: "rgb(0, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-Select${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<Select testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-Select${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-    });
-});