xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,527 @@
+"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");
+(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.locator("select")).toHaveValue("opt1");
+    yield driver.toggleOptionsVisibility();
+    yield driver.selectLabel("second");
+    yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt2");
+}));
+(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");
+}));
+(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();
+}));
+(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)(page.getByText("Two")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+    yield driver.toggleOptionsVisibility();
+    yield driver.selectLabel("Two");
+    yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+    // 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();
+}));
+(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();
+}));
+(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();
+}));
+(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).toBeGreaterThan(selectWidth);
+}));
+(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");
+}));
+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");
+    }));
+});
+(0, fixtures_1.test)('labelWidth applies with labelPosition="start"', (_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" 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);
+}));
+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, createButtonDriver, }) {
+        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).toBeGreaterThan(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();
+    }));
+});
+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");
+    }));
+});
+//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");
+}));

package/dist/scripts/src/components/Slider/Slider.js

@@ -88,6 +88,8 @@ exports.SliderMd = (0, metadata_helpers_1.createMetadata)({
         [`borderStyle-thumb-${COMP}`]: "solid",
         [`borderColor-thumb-${COMP}`]: "$color-surface-50",
         [`backgroundColor-thumb-${COMP}`]: "$color-primary",
+        [`backgroundColor-thumb-${COMP}--focus`]: "$color-primary",
+        [`boxShadow-thumb-${COMP}--focus`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
         [`backgroundColor-thumb-${COMP}--hover`]: "$color-primary",
         [`boxShadow-thumb-${COMP}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
         [`backgroundColor-thumb-${COMP}--active`]: "$color-primary-400",