xmlui 0.10.26 → 0.11.1

package/dist/lib/testing.js

@@ -0,0 +1,2386 @@
+var _a;
+import { expect as expect$1, test as test$1 } from "@playwright/test";
+import { x as xmlUiMarkupToComponent, P as PART_START_ADORNMENT, a as PART_END_ADORNMENT, b as PART_INPUT } from "./xmlui-parser-BZZ430Wm.js";
+import chroma from "chroma-js";
+function mapObject(obj, valFn = (val) => val, keyFn = (val) => val) {
+  const newObject = {};
+  Object.entries(obj).forEach(([key, value]) => {
+    newObject[keyFn(key)] = valFn(value);
+  });
+  return newObject;
+}
+function getComponentTagName(locator) {
+  return locator.evaluate((el) => el.tagName.toLowerCase());
+}
+function parseComponentIfNecessary(rawComponent) {
+  if (typeof rawComponent === "string") {
+    return xmlUiMarkupToComponent(rawComponent);
+  }
+  return {
+    component: rawComponent,
+    errors: [],
+    erroneousCompoundComponentName: void 0
+  };
+}
+function scaleByPercent(scalarOf100Percent, percentage) {
+  const parsed = parseAsNumericCss(percentage);
+  if (parsed.unit !== "%") {
+    throw new Error(`Expected percentage unit (%), got: ${parsed.unit}`);
+  }
+  return scalarOf100Percent / 100 * parsed.value;
+}
+function getBoundingRect$1(locator) {
+  return locator.evaluate((element) => element.getBoundingClientRect());
+}
+function getElementStyle$1(specifier, style) {
+  return specifier.evaluate(
+    (element, style2) => window.getComputedStyle(element).getPropertyValue(style2),
+    style
+  );
+}
+function getElementStyles$1(locator, styles = []) {
+  return locator.evaluate(
+    (element, styles2) => Object.fromEntries(
+      styles2.map((styleName) => [
+        styleName,
+        window.getComputedStyle(element).getPropertyValue(styleName)
+      ])
+    ),
+    styles
+  );
+}
+function isIndeterminate(specifier) {
+  if (specifier instanceof ComponentDriver) specifier = specifier.component;
+  return specifier.evaluate((el) => el.indeterminate);
+}
+async function overflows(locator, direction = "both") {
+  const [width, height, scrollWidth, scrollHeight] = await locator.evaluate((element) => [
+    element.clientWidth,
+    element.clientHeight,
+    element.scrollWidth,
+    element.scrollHeight
+  ]);
+  if (direction === "x") return scrollWidth > width;
+  if (direction === "y") return scrollHeight > height;
+  return scrollWidth > width && scrollHeight > height;
+}
+function getStyles(specifier, style) {
+  if (specifier instanceof ComponentDriver) specifier = specifier.component;
+  style = Array.isArray(style) ? style : [style];
+  return specifier.evaluate(
+    (element, styles) => Object.fromEntries(
+      styles.map((styleName) => [
+        styleName.trim().split("-").map((n, idx) => idx === 0 ? n : n[0].toUpperCase() + n.slice(1)).join(""),
+        window.getComputedStyle(element).getPropertyValue(styleName)
+      ])
+    ),
+    style
+  );
+}
+function getPseudoStyles(specifier, pseudoElement, style) {
+  if (specifier instanceof ComponentDriver) specifier = specifier.component;
+  style = Array.isArray(style) ? style : [style];
+  return specifier.evaluate(
+    (element, obj) => Object.fromEntries(
+      obj.style.map((styleName) => [
+        styleName.trim().split("-").map((n, idx) => idx === 0 ? n : n[0].toUpperCase() + n.slice(1)).join(""),
+        window.getComputedStyle(element, obj.pseudoElement).getPropertyValue(styleName)
+      ])
+    ),
+    { style, pseudoElement }
+  );
+}
+async function getHtmlAttributes(specifier, attributes) {
+  if (specifier instanceof ComponentDriver) specifier = specifier.component;
+  attributes = Array.isArray(attributes) ? attributes : [attributes];
+  const mapped = await Promise.all(
+    attributes.map(async (attr) => {
+      return [attr, await specifier.getAttribute(attr)];
+    })
+  );
+  return Object.fromEntries(mapped);
+}
+async function getPaddings(specifier) {
+  const paddings = mapObject(
+    await getStyles(specifier, ["padding-left", "padding-right", "padding-top", "padding-bottom"]),
+    parseAsNumericCss
+  );
+  return {
+    left: paddings.paddingLeft,
+    right: paddings.paddingRight,
+    top: paddings.paddingTop,
+    bottom: paddings.paddingBottom
+  };
+}
+async function getBorders(specifier) {
+  const borders = mapObject(
+    await getStyles(specifier, ["border-left", "border-right", "border-top", "border-bottom"]),
+    parseAsCssBorder
+  );
+  return {
+    left: borders.borderLeft,
+    right: borders.borderRight,
+    top: borders.borderTop,
+    bottom: borders.borderBottom
+  };
+}
+function getMargins(specifier) {
+  return getStyles(specifier, ["margin-left", "margin-right", "margin-top", "margin-bottom"]);
+}
+async function getBounds(specifier) {
+  if (specifier instanceof ComponentDriver) specifier = specifier.component;
+  const boundingRect = await specifier.evaluate((element) => element.getBoundingClientRect());
+  const m = mapObject(await getMargins(specifier), parseFloat);
+  const width = boundingRect.width + m.marginLeft + m.marginRight;
+  const height = boundingRect.height + m.marginTop + m.marginBottom;
+  const left = boundingRect.left - m.marginLeft;
+  const right = boundingRect.right + m.marginRight;
+  const top = boundingRect.top - m.marginTop;
+  const bottom = boundingRect.bottom + m.marginBottom;
+  return {
+    width,
+    height,
+    left,
+    right,
+    top,
+    bottom
+  };
+}
+class TestSkipReason {
+  addAnnotation(type, description) {
+    return {
+      annotation: {
+        type,
+        description: description ?? ""
+      }
+    };
+  }
+  NOT_IMPLEMENTED_XMLUI(description) {
+    return this.addAnnotation("not implemented in xmlui", description);
+  }
+  TO_BE_IMPLEMENTED(description) {
+    return this.addAnnotation("to be implemented", description);
+  }
+  XMLUI_BUG(description) {
+    return this.addAnnotation("xmlui bug", description);
+  }
+  TEST_INFRA_BUG(description) {
+    return this.addAnnotation("test infra bug", description);
+  }
+  TEST_NOT_WORKING(description) {
+    return this.addAnnotation("test not working", description);
+  }
+  TEST_INFRA_NOT_IMPLEMENTED(description) {
+    return this.addAnnotation("test infra not implemented", description);
+  }
+  REFACTOR(description) {
+    return this.addAnnotation("refactor", description);
+  }
+  // Need to specify a reason here!
+  UNSURE(description) {
+    return this.addAnnotation("unsure", description);
+  }
+}
+const SKIP_REASON = new TestSkipReason();
+function pixelStrToNum$1(pixelStr) {
+  return Number(pixelStr.replace("px", ""));
+}
+function parseAsCssBorder(str) {
+  const parts = str.split(/\s+(?=[a-z]+|\()/i);
+  if (parts.length > 3) {
+    throw new Error(`Provided value ${str} cannot be parsed as a CSS border`);
+  }
+  const style = parts.filter(isCSSBorderStyle);
+  if (style.length > 1) {
+    throw new Error(`Too many border styles provided in ${str}`);
+  }
+  const width = parts.filter(isNumericCSS);
+  if (width.length > 1) {
+    throw new Error(`Too many border widths provided in ${str}`);
+  }
+  const color = parts.filter((p) => chroma.valid(p));
+  if (color.length > 1) {
+    throw new Error(`Too many border colors provided in ${str}`);
+  }
+  const result = {
+    width: !!width[0] ? parseAsNumericCss(width[0]) : void 0,
+    style: style[0],
+    color: chroma(color[0])
+  };
+  return result;
+}
+const numericCSSRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
+function isNumericCSS(str) {
+  const parts = str.match(numericCSSRegex);
+  if (!parts) return false;
+  if (parts.length < 3) return false;
+  if (isNaN(parseFloat(parts[1]))) return false;
+  if (!isCSSUnit(parts[2])) return false;
+  return true;
+}
+function parseAsNumericCss(str) {
+  const parts = str.match(numericCSSRegex);
+  if (!parts) {
+    throw new Error(`Provided value ${str} cannot be parsed as a numeric CSS value`);
+  }
+  if (parts.length < 3) {
+    throw new Error(`${parts[0]} is not a correct numeric CSS value`);
+  }
+  const value = parseFloat(parts[1]);
+  if (isNaN(value)) {
+    throw new Error(`${value} is not a valid number in ${str}`);
+  }
+  const unit = parts[2];
+  if (!isCSSUnit(unit)) {
+    throw new Error(`${unit} is not have a valid CSS unit in ${str}`);
+  }
+  const result = { value, unit };
+  return result;
+}
+function numericCSSToString(cssValue) {
+  return `${cssValue.value}${cssValue.unit}`;
+}
+function parseAsCSSColor(str) {
+  return chroma(str);
+}
+const CSSUnitValues = [
+  "px",
+  "em",
+  "rem",
+  "vh",
+  "vw",
+  "%",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  "ex",
+  "ch",
+  "vmin",
+  "vmax"
+];
+function isCSSUnit(str) {
+  return CSSUnitValues.includes(str);
+}
+const CSSBorderStyleValues = [
+  "solid",
+  "dotted",
+  "dashed",
+  "double",
+  "none",
+  "hidden",
+  "groove",
+  "ridge",
+  "inset",
+  "outset"
+];
+function isCSSBorderStyle(str) {
+  return CSSBorderStyleValues.includes(str);
+}
+function parseAsCSSBorderStyle(str) {
+  if (!isCSSBorderStyle(str)) {
+    throw new Error(`Provided value ${str} cannot be parsed as a CSS border style`);
+  }
+  return str;
+}
+const BorderSideValues = ["top", "bottom", "left", "right"];
+function isBorderSide(str) {
+  return BorderSideValues.includes(str);
+}
+class ComponentDriver {
+  constructor({ locator, page }) {
+    this.click = async (options) => {
+      await this.locator.click(options);
+    };
+    this.dblclick = async (options) => {
+      await this.locator.dblclick(options);
+    };
+    this.focus = async (options) => {
+      await this.locator.focus(options);
+    };
+    this.blur = async (options) => {
+      await this.locator.blur(options);
+    };
+    this.hover = async (options) => {
+      await this.locator.hover(options);
+    };
+    this.locator = locator;
+    this.page = page;
+  }
+  get component() {
+    return this.locator;
+  }
+  getByTestId(testId) {
+    return this.component.getByTestId(testId).first();
+  }
+  getByPartName(part) {
+    return this.component.locator(`[data-part-id="${part}"]`).first();
+  }
+  getIcons() {
+    return this.component.locator('[data-icon-name="*"]');
+  }
+  getIconsByName(name) {
+    return this.component.locator(`[data-icon-name="${name}"]`);
+  }
+  getIconByName(name) {
+    return this.component.locator(`[data-icon-name="${name}"]`).first();
+  }
+  /**
+   * Gets the html tag name of the final rendered component
+   */
+  getComponentTagName() {
+    return this.component.evaluate((el) => el.tagName.toLowerCase());
+  }
+}
+class InputComponentDriver extends ComponentDriver {
+  get field() {
+    return this.getByPartName("input");
+  }
+  get label() {
+    return this.getByPartName("label");
+  }
+  get placeholder() {
+    return this.field.getAttribute("placeholder");
+  }
+  get requiredIndicator() {
+    return this.component.getByText("*");
+  }
+}
+class TestStateDriver {
+  constructor(testStateLocator) {
+    this.testStateLocator = testStateLocator;
+  }
+  /** returns an async function that can query the test state */
+  get testState() {
+    return async () => {
+      const text = await this.testStateLocator.textContent();
+      const testState = text === "undefined" ? void 0 : JSON.parse(text);
+      return testState;
+    };
+  }
+}
+class ButtonDriver extends ComponentDriver {
+  // Ensure we either get rtl or ltr strings
+  /* async getWritingDirection() {
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+    const attribute = await this.locator.getAttribute("dir");
+    if (attribute && attribute !== "auto") return attribute as "rtl" | "ltr";
+    const style = await this.locator.evaluate(
+      (element) => window.getComputedStyle(element).direction,
+    );
+    // Default is ltr: https://developer.mozilla.org/en-US/docs/Web/CSS/direction#values
+    return style === "rtl" ? "rtl" : "ltr";
+  } */
+  // Unused as of yet
+  /* async getTextNodes() {
+     return await this.locator.evaluate((element) =>
+       [...element.childNodes]
+         .filter((e) => e.nodeType === Node.TEXT_NODE && e.textContent.trim())
+         .map((e) => e.textContent.trim()),
+     );
+   }
+  */
+  getFirstNonTextNode() {
+    return this.locator.locator("> *").first();
+  }
+  // NOTE: Accounts for icons being passed as children as well
+  getIcons() {
+    return this.locator.locator("> svg").or(this.locator.locator("> img"));
+  }
+}
+class ContentSeparatorDriver extends ComponentDriver {
+  get separator() {
+    return this.component;
+  }
+  async getOrientation() {
+    const classList = await this.separator.evaluate((el) => el.className);
+    if (classList.includes("horizontal")) return "horizontal";
+    if (classList.includes("vertical")) return "vertical";
+    return "unknown";
+  }
+  async getComputedHeight() {
+    return await this.separator.evaluate((el) => {
+      return window.getComputedStyle(el).height;
+    });
+  }
+  async getComputedWidth() {
+    return await this.separator.evaluate((el) => {
+      return window.getComputedStyle(el).width;
+    });
+  }
+  async getBackgroundColor() {
+    return await this.separator.evaluate((el) => {
+      return window.getComputedStyle(el).backgroundColor;
+    });
+  }
+}
+class AvatarDriver extends ComponentDriver {
+}
+class SplitterDriver extends ComponentDriver {
+  /**
+   * Gets the resizer element (non-floating)
+   */
+  async getResizer() {
+    const allResizerCandidates = this.locator.locator('[class*="resizer"]');
+    const resizerCount = await allResizerCandidates.count();
+    for (let i = 0; i < resizerCount; i++) {
+      const candidate = allResizerCandidates.nth(i);
+      const className = await candidate.getAttribute("class");
+      if (className && className.includes("resizer") && !className.includes("floating")) {
+        return candidate;
+      }
+    }
+    return allResizerCandidates.first();
+  }
+  /**
+   * Gets the floating resizer element
+   */
+  async getFloatingResizer() {
+    const allResizerCandidates = this.locator.locator('[class*="resizer"]');
+    const resizerCount = await allResizerCandidates.count();
+    for (let i = 0; i < resizerCount; i++) {
+      const candidate = allResizerCandidates.nth(i);
+      const className = await candidate.getAttribute("class");
+      if (className && className.includes("floating")) {
+        return candidate;
+      }
+    }
+    return this.locator.locator('[class*="floating"][class*="resizer"]').first();
+  }
+  /**
+   * Hovers near the resizer area to trigger floating resizer visibility
+   */
+  async hoverNearResizer() {
+    const bounds = await this.locator.boundingBox();
+    if (bounds) {
+      await this.page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+      await this.page.waitForTimeout(200);
+    }
+  }
+  /**
+   * Drags the resizer by the specified offset
+   * @param deltaX - Horizontal offset in pixels
+   * @param deltaY - Vertical offset in pixels
+   */
+  async dragResizer(deltaX, deltaY) {
+    const resizer = await this.getResizer();
+    const floatingResizer = await this.getFloatingResizer();
+    let targetResizer = resizer;
+    try {
+      const isResizerVisible = await resizer.isVisible();
+      const isFloatingResizerVisible = await floatingResizer.isVisible();
+      if (!isResizerVisible && isFloatingResizerVisible) {
+        targetResizer = floatingResizer;
+      } else if (!isResizerVisible) {
+        await this.hoverNearResizer();
+        targetResizer = floatingResizer;
+      }
+    } catch (error) {
+      targetResizer = resizer;
+    }
+    const resizerBounds = await targetResizer.boundingBox();
+    if (!resizerBounds) {
+      throw new Error("Could not get resizer bounds for drag operation");
+    }
+    const startX = resizerBounds.x + resizerBounds.width / 2;
+    const startY = resizerBounds.y + resizerBounds.height / 2;
+    const endX = startX + deltaX;
+    const endY = startY + deltaY;
+    await this.page.mouse.move(startX, startY);
+    await this.page.mouse.down();
+    await this.page.mouse.move(endX, endY, { steps: 5 });
+    await this.page.mouse.up();
+    await this.page.waitForTimeout(100);
+  }
+  /**
+   * Gets the primary panel element
+   */
+  getPrimaryPanel() {
+    return this.locator.locator('[class*="primaryPanel"]').first();
+  }
+  /**
+   * Gets the secondary panel element
+   */
+  getSecondaryPanel() {
+    return this.locator.locator('[class*="secondaryPanel"]').first();
+  }
+}
+class ExpandableItemDriver extends ComponentDriver {
+  getSummary() {
+    return this.component.locator('[class*="_summary_"]');
+  }
+  getSummaryContent() {
+    return this.component.locator('[class*="_summaryContent_"]');
+  }
+  getContent() {
+    return this.component.locator('[class*="_content_"]');
+  }
+  getIcon() {
+    return this.component.locator('[class*="_icon_"] svg');
+  }
+  getSwitch() {
+    return this.component.getByRole("switch");
+  }
+  async isExpanded() {
+    return await this.component.locator('[class*="_content_"]').isVisible();
+  }
+  async isDisabled() {
+    return await this.component.evaluate((el) => el.className.includes("disabled"));
+  }
+  async expand() {
+    if (!await this.isExpanded()) {
+      await this.getSummary().click();
+    }
+  }
+  async collapse() {
+    if (await this.isExpanded()) {
+      await this.getSummary().click();
+    }
+  }
+  async toggle() {
+    await this.getSummary().click();
+  }
+}
+class FileInputDriver extends ComponentDriver {
+  getTextBox() {
+    return this.component.locator("input[readonly]");
+  }
+  getHiddenInput() {
+    return this.component.locator('input[type="file"]');
+  }
+  getBrowseButton() {
+    return this.component.locator('[class*="_button_"]');
+  }
+  getContainer() {
+    return this.component;
+  }
+  async isEnabled() {
+    const browseButton = this.getBrowseButton();
+    return !await browseButton.isDisabled();
+  }
+  async getSelectedFiles() {
+    const textBox = this.getTextBox();
+    const value = await textBox.inputValue();
+    return value || "";
+  }
+  async openFileDialog() {
+    await this.getBrowseButton().click();
+  }
+  async getPlaceholder() {
+    const textBox = this.getTextBox();
+    return await textBox.getAttribute("placeholder") || "";
+  }
+  async focusButton() {
+    await this.getBrowseButton().focus();
+  }
+  async hasReadOnlyAttribute() {
+    const textBox = this.getTextBox();
+    return await textBox.getAttribute("readonly") !== null;
+  }
+  async getAcceptedFileTypes() {
+    const hiddenInput = this.getHiddenInput();
+    return await hiddenInput.getAttribute("accept") || "";
+  }
+  async isMultiple() {
+    const hiddenInput = this.getHiddenInput();
+    return await hiddenInput.getAttribute("multiple") !== null;
+  }
+  async isDirectory() {
+    const hiddenInput = this.getHiddenInput();
+    return await hiddenInput.getAttribute("webkitdirectory") !== null;
+  }
+}
+class FileUploadDropZoneDriver extends ComponentDriver {
+  getWrapper() {
+    return this.component.locator('[class*="_wrapper_"]');
+  }
+  getHiddenInput() {
+    return this.component.locator('input[type="file"]');
+  }
+  getDropPlaceholder() {
+    return this.component.locator('[class*="_dropPlaceholder_"]');
+  }
+  getDropIcon() {
+    return this.getDropPlaceholder().locator("svg");
+  }
+  async isDropPlaceholderVisible() {
+    return await this.getDropPlaceholder().isVisible();
+  }
+  async isEnabled() {
+    const input = this.getHiddenInput();
+    const isDisabled = await input.isDisabled();
+    return !isDisabled;
+  }
+  async getDropText() {
+    return await this.getDropPlaceholder().textContent() || "";
+  }
+  async triggerDragEnter() {
+    await this.component.dispatchEvent("dragenter");
+  }
+  async triggerDragLeave() {
+    await this.component.dispatchEvent("dragleave");
+  }
+  async triggerDrop(files = ["test.txt"]) {
+    const hiddenInput = this.getHiddenInput();
+    const fileObjects = files.map((name) => {
+      return {
+        name,
+        mimeType: "text/plain",
+        buffer: Buffer.from("test content")
+      };
+    });
+    await hiddenInput.setInputFiles(fileObjects);
+    await this.component.evaluate((element, fileNames) => {
+      const event = new DragEvent("drop", {
+        bubbles: true,
+        cancelable: true,
+        dataTransfer: new DataTransfer()
+      });
+      fileNames.forEach((fileName) => {
+        var _a2;
+        const file = new File(["test content"], fileName, { type: "text/plain" });
+        (_a2 = event.dataTransfer) == null ? void 0 : _a2.items.add(file);
+      });
+      element.dispatchEvent(event);
+    }, files);
+  }
+  async triggerPaste() {
+    await this.component.dispatchEvent("paste", {
+      clipboardData: {
+        files: [{ name: "pasted.txt", type: "text/plain", size: 50 }],
+        items: [{ kind: "file", getAsFile: () => ({ name: "pasted.txt" }) }]
+      }
+    });
+  }
+  async hasChildren() {
+    const childrenCount = await this.component.locator('> *:not(input):not([class*="_dropPlaceholder_"])').count();
+    return childrenCount > 0;
+  }
+}
+class BackdropDriver extends ComponentDriver {
+  getBackdrop() {
+    return this.component.locator("> *").first();
+  }
+  getOverlay() {
+    return this.component.locator("> *").nth(1);
+  }
+  getDefaultBackgroundColor() {
+    return "rgb(0, 0, 0)";
+  }
+  getDefaultOpacity() {
+    return "0.1";
+  }
+}
+class FormDriver extends ComponentDriver {
+  async mockExternalApi(url, apiOptions) {
+    const { status = 200, headers = {}, body = {} } = apiOptions;
+    await this.page.route(
+      url,
+      (route) => route.fulfill({ status, headers, body: JSON.stringify(body) })
+    );
+  }
+  get submitButton() {
+    return this.getByPartName("submitButton");
+  }
+  get cancelButton() {
+    return this.getByPartName("cancelButton");
+  }
+  async hasSubmitButton() {
+    return await this.submitButton.count() > 0;
+  }
+  async submitForm(trigger = "click") {
+    if (trigger === "keypress") {
+      if (await this.hasSubmitButton() && await this.submitButton.isEnabled()) {
+        await this.submitButton.focus();
+      }
+      await this.locator.locator("input").waitFor();
+      const firstInputChild = this.locator.locator("input");
+      if (await firstInputChild.count() > 0) {
+        await firstInputChild.first().focus();
+      }
+      await this.page.keyboard.press("Enter");
+    } else if (trigger === "click") {
+      await this.submitButton.click();
+    }
+  }
+  async getSubmitRequest(endpoint = "/entities", requestMethod = "POST", trigger = "click", timeout = 5e3) {
+    const requestPromise = this.page.waitForRequest(
+      (request) => request.url().includes(endpoint) && request.method().toLowerCase() === requestMethod.toLowerCase(),
+      { timeout }
+    );
+    await this.submitForm(trigger);
+    return requestPromise;
+  }
+  getSubmitResponse(endpoint = "/entities", responseStatus = 200, timeout = 5e3) {
+    const responsePromise = this.page.waitForResponse(
+      (response) => response.url().includes(endpoint) && response.status() === responseStatus,
+      { timeout }
+    );
+    return responsePromise;
+  }
+  /**
+   * Gets the validation summary component inside the Form.
+   * Uses the 'data-validation-summary' attribute to find the component
+   */
+  getValidationSummary() {
+    return this.component.locator("[data-validation-summary='true']");
+  }
+  /**
+   * Gets the validation display components inside the Form.
+   * Uses the 'data-validation-display-severity' attribute to find the components.
+   * The attribute contains the severity of the validation.
+   */
+  getValidationDisplays() {
+    return this.component.locator("[data-validation-summary='true']").locator("[data-validation-display-severity]");
+  }
+  getValidationDisplaysBySeverity(severity) {
+    return this.component.locator("[data-validation-summary='true']").locator(`[data-validation-display-severity="${severity}"]`);
+  }
+  // TODO: it would be a nice to have features to get validation displays and map them automatically
+  /* async getValidationDisplaysAsDriver() {
+      const displays = await this.getValidationDisplays();
+      const displayList: ValidationDisplayDriver[] = [];
+  
+      const displayNum = await displays.count();
+      for (let i = 0; i < displayNum; i++) {
+        const element = displays.nth(i);
+        displayList.push(new ValidationDisplayDriver({ locator: element, page: this.page }));
+      }
+      return displayList;
+    } */
+}
+class ValidationSummaryDriver extends ComponentDriver {
+  /**
+   * Gets the validation display components inside the Form.
+   * Uses the 'data-validation-display-severity' attribute to find the components.
+   * The attribute contains the severity of the validation.
+   */
+  getValidationDisplays() {
+    return this.component.locator("[data-validation-summary='true']").locator("[data-validation-display-severity]");
+  }
+}
+class ValidationDisplayDriver extends ComponentDriver {
+  getSeverity() {
+    return this.component.getAttribute("data-validation-display-severity");
+  }
+  getText() {
+    return this.component.locator("li").textContent();
+  }
+}
+class MarkdownDriver extends ComponentDriver {
+  async hasHtmlElement(elements) {
+    const contents = await this.component.innerHTML();
+    elements = typeof elements === "string" ? [elements] : elements;
+    return elements.map((e) => `<${e}`).reduce((acc, curr) => acc && contents.includes(curr), true);
+  }
+}
+class ItemsDriver extends ComponentDriver {
+}
+class RangeDriver extends ComponentDriver {
+}
+class DatePickerDriver extends ComponentDriver {
+  async toggleDropdownVisibility() {
+    await this.component.click();
+  }
+  async pickADay(value) {
+    await this.component.getByRole("gridcell", { name: value }).or(this.page.getByRole("gridcell", { name: value })).first().click({ force: true });
+  }
+}
+class AutoCompleteDriver extends ComponentDriver {
+  async toggleOptionsVisibility() {
+    await this.component.click();
+  }
+  async selectLabel(value) {
+    await this.component.getByRole("option", { name: value }).or(this.page.getByRole("option", { name: value })).first().click({ force: true });
+  }
+  async searchFor(value) {
+    await this.page.getByRole("combobox").fill(value);
+  }
+  async chooseIndex(index) {
+    await this.locator.getByRole("option").nth(index).or(this.page.getByRole("option").nth(index)).first().click();
+  }
+}
+class SelectDriver extends ComponentDriver {
+  async toggleOptionsVisibility() {
+    await this.component.click();
+  }
+  async selectLabel(value) {
+    await this.component.getByRole("option", { name: value }).or(this.page.getByRole("option", { name: value })).first().click({ force: true });
+  }
+  async selectFirstLabelPostSearh(label) {
+    await this.searchFor(label);
+    await this.chooseIndex(0);
+  }
+  async searchFor(value) {
+    await this.page.getByRole("searchbox").fill(value);
+  }
+  async chooseIndex(index) {
+    await this.locator.getByRole("option").nth(index).or(this.page.getByRole("option").nth(index)).first().click();
+  }
+  async selectMultipleLabels(values) {
+    for (const value of values) {
+      await this.component.getByRole("option", { name: value }).or(this.page.getByRole("option", { name: value })).first().click();
+    }
+  }
+}
+class RadioGroupDriver extends ComponentDriver {
+}
+class TextAreaDriver extends InputComponentDriver {
+}
+class ProgressBarDriver extends ComponentDriver {
+  get bar() {
+    return this.component.locator("> div");
+  }
+  async getProgressRatio() {
+    const style = await this.bar.getAttribute("style");
+    if (!style) return 0;
+    const widthMatch = style.match(/width:\s*(\d+(?:\.\d+)?)%/);
+    return widthMatch ? parseFloat(widthMatch[1]) / 100 : 0;
+  }
+}
+class ListDriver extends ComponentDriver {
+  /**
+   * Gets all list item elements
+   */
+  get items() {
+    return this.component.locator("[data-list-item]").or(this.component.locator("div").filter({ hasText: /^(?!.*Loading).*/ }));
+  }
+  /**
+   * Gets the loading spinner element
+   */
+  get loadingSpinner() {
+    return this.component.locator('[class*="loadingWrapper"]');
+  }
+  /**
+   * Checks if the loading state is visible
+   */
+  async isLoading() {
+    return await this.loadingSpinner.isVisible().catch(() => false);
+  }
+  /**
+   * Gets group header elements
+   */
+  get groupHeaders() {
+    return this.component.locator("[data-group-header]").or(this.component.locator("div").filter({ hasText: /^Category:|^Header:/ }));
+  }
+  /**
+   * Gets group footer elements
+   */
+  get groupFooters() {
+    return this.component.locator("[data-group-footer]").or(this.component.locator("div").filter({ hasText: /^End of/ }));
+  }
+  /**
+   * Gets the empty state element
+   */
+  get emptyState() {
+    return this.component.locator("[data-empty-state]").or(this.component.getByText("No items found!"));
+  }
+  /**
+   * Scrolls the list to a specific position
+   */
+  async scrollTo(position) {
+    if (position === "top") {
+      await this.component.evaluate((el) => el.scrollTo({ top: 0 }));
+    } else if (position === "bottom") {
+      await this.component.evaluate((el) => el.scrollTo({ top: el.scrollHeight }));
+    } else {
+      await this.component.evaluate((el, pos) => el.scrollTo({ top: pos }), position);
+    }
+  }
+  /**
+   * Gets the number of visible items (for virtualization testing)
+   */
+  async getVisibleItemCount() {
+    return await this.items.count();
+  }
+  /**
+   * Gets item at specific index
+   */
+  getItemAt(index) {
+    return this.items.nth(index);
+  }
+  /**
+   * Gets item by text content
+   */
+  getItemByText(text) {
+    return this.component.getByText(text);
+  }
+  /**
+   * Checks if list is empty
+   */
+  async isEmpty() {
+    const noDataText = await this.component.textContent();
+    const hasNoDataMessage = (noDataText == null ? void 0 : noDataText.includes("No data available")) || (noDataText == null ? void 0 : noDataText.includes("No items found"));
+    const itemCount = await this.items.count();
+    const hasDataItems = itemCount > 0 && !hasNoDataMessage;
+    return hasNoDataMessage || !hasDataItems;
+  }
+  /**
+   * Gets all text content from visible items
+   */
+  async getVisibleItemTexts() {
+    const items = await this.items.all();
+    const texts = await Promise.all(items.map((item) => item.textContent()));
+    return texts.filter((text) => text !== null);
+  }
+}
+class TextDriver extends ComponentDriver {
+}
+class HeadingDriver extends ComponentDriver {
+}
+class IconDriver extends ComponentDriver {
+  get svgIcon() {
+    return this.component.locator("svg");
+  }
+}
+class StackDriver extends ComponentDriver {
+}
+class HStackDriver extends StackDriver {
+}
+class VStackDriver extends StackDriver {
+}
+class LinkDriver extends ComponentDriver {
+}
+class NavLinkDriver extends ComponentDriver {
+}
+class NavGroupDriver extends ComponentDriver {
+  getIcons() {
+    return this.locator.locator("> svg").or(this.locator.locator("> img"));
+  }
+}
+class NavPanelDriver extends ComponentDriver {
+}
+class CardDriver extends ComponentDriver {
+  get avatar() {
+    return this.component.getByRole("img", { name: "avatar" });
+  }
+}
+class AccordionDriver extends ComponentDriver {
+}
+class AppHeaderDriver extends ComponentDriver {
+}
+class AppFooterDriver extends ComponentDriver {
+}
+class BadgeDriver extends ComponentDriver {
+}
+class NoResultDriver extends ComponentDriver {
+}
+class OptionDriver extends ComponentDriver {
+}
+class FormItemDriver extends ComponentDriver {
+  get input() {
+    return this.component.locator(">input").or(this.component).first();
+  }
+  get textBox() {
+    return this.input.getByRole("textbox");
+  }
+  get checkbox() {
+    return this.input.getByRole("checkbox");
+  }
+  get label() {
+    return this.component.locator("label");
+  }
+  get validationStatusTag() {
+    return "data-validation-status";
+  }
+  get validationStatusIndicator() {
+    return this.component.locator(`[${this.validationStatusTag}]`);
+  }
+}
+class HtmlTagDriver extends ComponentDriver {
+}
+class CodeBlockDriver extends ComponentDriver {
+  getHeader() {
+    return this.component.locator('[class*="codeBlockHeader"]');
+  }
+  getContent() {
+    return this.component.locator('[class*="codeBlockContent"]');
+  }
+  getCopyButton() {
+    return this.component.locator('[class*="codeBlockCopyButton"] button');
+  }
+  getFilename() {
+    return this.getHeader().locator("span");
+  }
+  async isCopyButtonVisible() {
+    return await this.getCopyButton().isVisible();
+  }
+  async hasHeader() {
+    return await this.getHeader().isVisible();
+  }
+  async getCodeText() {
+    return await this.getContent().textContent();
+  }
+  async clickCopyButton() {
+    await this.getCopyButton().click();
+  }
+  async hoverContent() {
+    await this.getContent().hover();
+  }
+}
+class CheckboxDriver extends InputComponentDriver {
+  async getIndicatorColor() {
+    const specifier = this.component.getByRole("checkbox").or(this.component).last();
+    const { boxShadow } = await getPseudoStyles(specifier, "::before", "box-shadow");
+    const colorMatch = boxShadow.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[a-fA-F0-9]{3,8})/);
+    return colorMatch ? colorMatch[1] : null;
+  }
+}
+class LabelDriver extends ComponentDriver {
+}
+class SpinnerDriver extends ComponentDriver {
+  /**
+   * Gets the main spinner element (the one with the ring animation)
+   */
+  get spinnerElement() {
+    return this.page.locator('[data-testid="test-id-component"]').filter({ has: this.page.locator("div") }).first();
+  }
+  /**
+   * Gets a specific spinner element by index (for multiple spinners)
+   */
+  getSpinnerByIndex(index) {
+    return this.page.locator('[data-testid="test-id-component"]').filter({ has: this.page.locator("div") }).nth(index);
+  }
+  /**
+   * Gets the fullscreen wrapper element (only exists when fullScreen=true)
+   */
+  get fullScreenWrapper() {
+    return this.page.locator('div[class*="_fullScreenSpinnerWrapper_"]');
+  }
+  /**
+   * Checks if the spinner is in fullscreen mode
+   */
+  async isFullScreen() {
+    try {
+      const wrapper = this.fullScreenWrapper;
+      return await wrapper.isVisible();
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Gets the computed style of the spinner element
+   */
+  async getSpinnerStyle() {
+    const element = this.spinnerElement;
+    return await element.evaluate((el) => {
+      const styles = window.getComputedStyle(el);
+      return {
+        display: styles.display,
+        position: styles.position,
+        width: styles.width,
+        height: styles.height,
+        animationDuration: styles.animationDuration,
+        className: el.className
+      };
+    });
+  }
+  /**
+   * Gets the animation duration from the child elements (where the actual animation occurs)
+   */
+  async getAnimationDuration() {
+    const element = this.spinnerElement;
+    return await element.evaluate((el) => {
+      const firstChild = el.querySelector("div");
+      if (firstChild) {
+        const styles = window.getComputedStyle(firstChild);
+        return styles.animationDuration;
+      }
+      return "0s";
+    });
+  }
+  /**
+   * Waits for the spinner to appear
+   */
+  async waitForSpinner(timeout = 5e3) {
+    await this.spinnerElement.waitFor({ state: "visible", timeout });
+  }
+  /**
+   * Waits for the spinner to disappear
+   */
+  async waitForSpinnerToDisappear(timeout = 5e3) {
+    await this.spinnerElement.waitFor({ state: "hidden", timeout });
+  }
+  /**
+   * Checks if the spinner is visible
+   */
+  async isVisible() {
+    return await this.spinnerElement.isVisible();
+  }
+  /**
+   * Gets the CSS class name to verify CSS modules are working
+   */
+  async getClassName() {
+    return await this.spinnerElement.getAttribute("class") || "";
+  }
+  /**
+   * Gets the number of child div elements (should be 4 for the ring animation)
+   */
+  async getChildCount() {
+    return await this.spinnerElement.evaluate((el) => {
+      return el.querySelectorAll("div").length;
+    });
+  }
+  /**
+   * Gets the total number of spinner components on the page
+   */
+  async getSpinnerCount() {
+    return await this.page.locator('[data-testid="test-id-component"]').count();
+  }
+  /**
+   * Gets a spinner by specific test ID
+   */
+  getSpinnerByTestId(testId) {
+    return this.page.locator(`[data-testid="${testId}"]`);
+  }
+  /**
+   * Checks if fullscreen mode has the correct wrapper structure
+   */
+  async getFullScreenWrapperInfo() {
+    const wrapper = this.fullScreenWrapper;
+    if (!await wrapper.isVisible()) {
+      return null;
+    }
+    return await wrapper.evaluate((el) => {
+      const parent = el.parentElement;
+      const styles = window.getComputedStyle(el);
+      return {
+        position: styles.position,
+        inset: styles.inset,
+        parentClassName: (parent == null ? void 0 : parent.className) || "",
+        hasSpinnerChild: !!el.querySelector('[class*="_lds-ring_"]')
+      };
+    });
+  }
+}
+class DropdownMenuDriver extends ComponentDriver {
+  /**
+   * Get the trigger button element
+   * For DropdownMenu, we'll look for the button on the page level since Radix UI may render it separately
+   */
+  getTrigger() {
+    return this.page.getByRole("button").first();
+  }
+  /**
+   * Open the dropdown menu
+   */
+  async open() {
+    const trigger = this.getTrigger();
+    await trigger.click();
+  }
+  /**
+   * Close the dropdown menu by clicking outside
+   */
+  async close() {
+    try {
+      await this.page.keyboard.press("Escape");
+    } catch {
+      await this.page.click("html");
+    }
+  }
+  /**
+   * Get all menu items
+   */
+  getMenuItems() {
+    return this.page.getByRole("menuitem");
+  }
+  /**
+   * Get a specific menu item by text
+   */
+  getMenuItem(text) {
+    return this.page.getByRole("menuitem", { name: text });
+  }
+  /**
+   * Click a menu item by text
+   */
+  async clickMenuItem(text) {
+    await this.getMenuItem(text).click();
+  }
+  /**
+   * Get submenu items
+   */
+  getSubMenuItems(parentText) {
+    return this.page.getByText(parentText);
+  }
+  /**
+   * Open a submenu by hovering over it
+   */
+  async openSubMenu(submenuText) {
+    await this.page.getByText(submenuText).hover();
+  }
+  /**
+   * Get menu separators
+   */
+  getMenuSeparators() {
+    return this.page.locator('[class*="DropdownMenuSeparator"]');
+  }
+  /**
+   * Get the menu content container
+   */
+  getMenuContent() {
+    return this.page.locator('[class*="DropdownMenuContent"]');
+  }
+  /**
+   * Check if the menu is open
+   */
+  async isOpen() {
+    try {
+      const content = this.getMenuContent();
+      return await content.isVisible();
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Wait for menu to open
+   */
+  async waitForOpen() {
+    await this.getMenuContent().waitFor({ state: "visible" });
+  }
+  /**
+   * Wait for menu to close
+   */
+  async waitForClose() {
+    await this.getMenuContent().waitFor({ state: "hidden" });
+  }
+}
+class SliderDriver extends ComponentDriver {
+  async getActiveThumb(thumbNumber = 0) {
+    const thumbs = this.page.getByRole("slider");
+    const thumbCount = await thumbs.count();
+    if (thumbCount === 0) {
+      throw new Error("No slider thumb found to drag");
+    }
+    if (thumbNumber < 0) {
+      thumbNumber = 0;
+    } else if (thumbNumber >= thumbCount) {
+      thumbNumber = thumbCount - 1;
+    }
+    return thumbs.nth(thumbNumber);
+  }
+  async dragThumbByMouse(location, thumbNumber = 0) {
+    const track = this.page.locator("[data-track]");
+    await track.waitFor({ state: "visible" });
+    const activeThumb = await this.getActiveThumb(thumbNumber);
+    await activeThumb.waitFor({ state: "visible" });
+    const thumbBox = await activeThumb.boundingBox();
+    if (!thumbBox) {
+      throw new Error("Could not get thumb bounding box");
+    }
+    const trackBox = await track.boundingBox();
+    if (!trackBox) {
+      throw new Error("Could not get track bounding box");
+    }
+    let targetX;
+    if (location === "start") {
+      targetX = trackBox.x;
+    } else if (location === "end") {
+      targetX = trackBox.x + trackBox.width;
+    } else {
+      targetX = trackBox.x + trackBox.width / 2;
+    }
+    const targetY = trackBox.y + trackBox.height / 2;
+    await activeThumb.hover();
+    await this.page.mouse.down({ button: "left" });
+    await this.page.mouse.move(targetX, targetY);
+    await this.page.mouse.up();
+  }
+  async stepThumbByKeyboard(key, thumbNumber = 0, repeat = 1) {
+    const activeThumb = await this.getActiveThumb(thumbNumber);
+    await activeThumb.focus();
+    for (let i = 0; i < repeat; i++) {
+      await this.page.keyboard.press(key);
+    }
+  }
+}
+class TimeInputDriver extends InputComponentDriver {
+  get hourInput() {
+    return this.getByPartName("hour");
+  }
+  get minuteInput() {
+    return this.getByPartName("minute");
+  }
+  get secondInput() {
+    return this.getByPartName("second");
+  }
+  get amPmInput() {
+    return this.getByPartName("ampm");
+  }
+  get clearButton() {
+    return this.getByPartName("clearButton");
+  }
+}
+class TimerDriver extends ComponentDriver {
+  async isEnabled() {
+    const enabled = await this.component.getAttribute("data-timer-enabled");
+    return enabled === "true";
+  }
+  async isRunning() {
+    const running = await this.component.getAttribute("data-timer-running");
+    return running === "true";
+  }
+  async isPaused() {
+    const paused = await this.component.getAttribute("data-timer-paused");
+    return paused === "true";
+  }
+  async isInInitialDelay() {
+    const inDelay = await this.component.getAttribute("data-timer-in-initial-delay");
+    return inDelay === "true";
+  }
+  async getInterval() {
+    const interval = await this.component.getAttribute("data-timer-interval");
+    return parseInt(interval || "0", 10);
+  }
+  async getInitialDelay() {
+    const delay = await this.component.getAttribute("data-timer-initial-delay");
+    return parseInt(delay || "0", 10);
+  }
+  async isOnce() {
+    const once = await this.component.getAttribute("data-timer-once");
+    return once === "true";
+  }
+  async hasExecuted() {
+    const executed = await this.component.getAttribute("data-timer-has-executed");
+    return executed === "true";
+  }
+}
+class DateInputDriver extends InputComponentDriver {
+  get dayInput() {
+    return this.getByPartName("day");
+  }
+  get monthInput() {
+    return this.getByPartName("month");
+  }
+  get yearInput() {
+    return this.getByPartName("year");
+  }
+  get clearButton() {
+    return this.getByPartName("clearButton");
+  }
+}
+class ModalDialogDriver extends ComponentDriver {
+  get titlePart() {
+    return this.getByPartName("title");
+  }
+}
+class TextBoxDriver extends InputComponentDriver {
+  get input() {
+    return this.getByPartName("input");
+  }
+  get startAdornment() {
+    return this.getByPartName(PART_START_ADORNMENT);
+  }
+  get endAdornment() {
+    return this.getByPartName(PART_END_ADORNMENT);
+  }
+  get button() {
+    return this.getByPartName(PART_END_ADORNMENT);
+  }
+}
+const PART_SPINNER_UP = "spinnerUp";
+const PART_SPINNER_DOWN = "spinnerDown";
+class NumberBoxDriver extends InputComponentDriver {
+  get input() {
+    return this.getByPartName(PART_INPUT);
+  }
+  get startAdornment() {
+    return this.getByPartName(PART_START_ADORNMENT);
+  }
+  get endAdornment() {
+    return this.getByPartName(PART_END_ADORNMENT);
+  }
+  get spinnerUp() {
+    return this.getByPartName(PART_SPINNER_UP);
+  }
+  get spinnerDown() {
+    return this.getByPartName(PART_SPINNER_DOWN);
+  }
+  async increment() {
+    await this.spinnerUp.click({ force: true });
+  }
+  async decrement() {
+    await this.spinnerDown.click({ force: true });
+  }
+}
+class TreeDriver extends ComponentDriver {
+  getNodeById(nodeId) {
+    return this.component.locator(`[data-tree-node-id="${nodeId}"]`).first();
+  }
+  getNodeWrapperByTestId(marker) {
+    return this.getByTestId(marker).locator("../..");
+  }
+}
+const expect = expect$1.extend({
+  /**
+   * Asserts whether the Button component has the expected label either through the `label` property
+   * or as a text node child.
+   *
+   * **Usage**
+   *
+   * ```js
+   * await initTestBed(`<Button label="hello" />`);
+   * const driver = await createButtonDriver();
+   * await expect(driver.component).toHaveLabel("hello"); // <- resolves to true
+   * ```
+   *
+   * @param expected Expected string label
+   */
+  async toHaveExplicitLabel(locator, expected) {
+    const assertionName = "toHaveExplicitLabel";
+    let pass = false;
+    const label = await locator.evaluate(
+      (element) => {
+        var _a2;
+        return (_a2 = [...element.childNodes].filter((e) => e.nodeType === Node.TEXT_NODE && e.textContent.trim()).map((e) => e.textContent.trim())) == null ? void 0 : _a2[0];
+      }
+    );
+    if (label === expected) {
+      pass = true;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + `
+
+Expected: ${this.isNot ? "not" : ""}${this.utils.printExpected(expected)}
+Received: ${this.utils.printReceived(label)}` : () => this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+Received: ${this.utils.printReceived(label)}`;
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: void 0
+    };
+  },
+  /**
+   * Compares two numbers with an optional tolerance value. If the tolerance is set to 0 the comparator acts as `toEqual`.
+   * Used to compare element dimensions on different platforms because of half pixel rendering.
+   *
+   * **Usage**
+   *
+   * ```js
+   * const value = 8;
+   * expect(value).toEqualWithTolerance(10, 2); // true
+   * ```
+   *
+   * @param expected Expected value
+   * @param tolerance Tolerance value, **default is 1**
+   */
+  toEqualWithTolerance(provided, expected, tolerance = 1) {
+    const assertionName = "toEqualWithTolerance";
+    let pass = false;
+    if (provided >= expected - (tolerance || 0) && provided <= expected + (tolerance || 0)) {
+      pass = true;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, provided, expected, { isNot: this.isNot }) + `
+
+Expected: ${this.isNot ? "not" : ""}${this.utils.printExpected(expected)}
+Received: ${this.utils.printReceived(provided)}` : () => this.utils.matcherHint(assertionName, provided, expected, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+Received: ${this.utils.printReceived(provided)}`;
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: void 0
+    };
+  },
+  // ---
+  // --- NOTE: Assertations below this line are experimental and are reserved for future test cases (ex. comparison tests)
+  // ---
+  /**
+   * Asserts whether a component has the correct CSS `border-color` styling.
+   *
+   * @param expected Expected CSS color
+   * @param border Border side(s), Default: **"all"**
+   *
+   * ---
+   * **Usage**
+   *
+   * ```js
+   * await initTestBed(`<Button label="hello" />`, {
+   *    testThemeVars: { "borderLeftColor-Button": "rgb(0, 0, 0)" },
+   * });
+   * const driver = await createButtonDriver();
+   * await expect(driver.component).toHaveBorderColor("rgb(0, 0, 0)", "left");
+   * ```
+   */
+  async toHaveBorderColor(locator, expected, border = "all") {
+    const assertionName = "toHaveBorder";
+    let expectedBorderColor;
+    try {
+      expectedBorderColor = parseAsCSSColor(expected);
+      if (Object.values(expectedBorderColor).length === 0) {
+        throw new Error("Empty color!");
+      }
+    } catch (e) {
+      return {
+        message: () => "In " + this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + ":\n" + (e instanceof Error ? e.message : String(e)) + `
+
+Expected: Correct CSS border color to expect (e.g. "red", "rgb(0, 0, 0)", "#AA0011")
+Received: ${this.utils.printReceived(expected)}`,
+        pass: false,
+        name: assertionName,
+        expected,
+        actual: void 0
+      };
+    }
+    let _border = [];
+    if (typeof border === "string") {
+      if (border === "all") {
+        _border = ["top", "bottom", "left", "right"];
+      } else {
+        _border = [border];
+      }
+    } else {
+      _border = Array.from(new Set(border)).filter(isBorderSide);
+    }
+    let pass = true;
+    let matcherResult;
+    const colorStr = `rgb(${expectedBorderColor.rgb().join(", ")})`;
+    try {
+      for (let b of _border) {
+        await expect$1(locator).toHaveCSS(`border-${b}-color`, colorStr);
+      }
+    } catch (e) {
+      matcherResult = e.matcherResult;
+      pass = false;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: not ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "") : () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: matcherResult == null ? void 0 : matcherResult.actual
+    };
+  },
+  /**
+   * Asserts whether a component has the correct CSS `border-width` styling.
+   *
+   * @param expected Expected CSS size
+   * @param border Border side(s), Default: **"all"**
+   *
+   * ---
+   * **Usage**
+   *
+   * ```js
+   * await initTestBed(`<Button label="hello" />`, {
+   *    testThemeVars: { "borderLeftWidth-Button": "12px" },
+   * });
+   * const driver = await createButtonDriver();
+   * await expect(driver.component).toHaveBorderWidth("12px", "left");
+   * ```
+   */
+  async toHaveBorderWidth(locator, expected, border = "all") {
+    const assertionName = "toHaveBorder";
+    let expectedBorderWidth;
+    try {
+      expectedBorderWidth = parseAsNumericCss(expected);
+      if (Object.values(expectedBorderWidth).length === 0) {
+        throw new Error("Empty width!");
+      }
+    } catch (e) {
+      return {
+        message: () => "In " + this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + ":\n" + (e instanceof Error ? e.message : String(e)) + `
+
+Expected: Correct CSS border width to expect (e.g. "1px", "2rem")
+Received: ${this.utils.printReceived(expected)}`,
+        pass: false,
+        name: assertionName,
+        expected,
+        actual: void 0
+      };
+    }
+    let _border = [];
+    if (typeof border === "string") {
+      if (border === "all") {
+        _border = ["top", "bottom", "left", "right"];
+      } else {
+        _border = [border];
+      }
+    } else {
+      _border = Array.from(new Set(border)).filter(isBorderSide);
+    }
+    let pass = true;
+    let matcherResult;
+    const widthStr = numericCSSToString(expectedBorderWidth);
+    try {
+      for (let b of _border) {
+        await expect$1(locator).toHaveCSS(`border-${b}-width`, widthStr);
+      }
+    } catch (e) {
+      matcherResult = e.matcherResult;
+      pass = false;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: not ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "") : () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: matcherResult == null ? void 0 : matcherResult.actual
+    };
+  },
+  /**
+   * Asserts whether a component has the correct CSS `border-style` styling.
+   *
+   * @param expected Expected CSS border style
+   * @param border Border side(s), default: **"all"**
+   *
+   * ---
+   * **Usage**
+   *
+   * ```js
+   * await initTestBed(`<Button label="hello" />`, {
+   *    testThemeVars: { "borderLeftStyle-Button": "dotted" },
+   * });
+   * const driver = await createButtonDriver();
+   * await expect(driver.component).toHaveBorderStyle("dotted", "left");
+   * ```
+   */
+  async toHaveBorderStyle(locator, expected, border = "all") {
+    const assertionName = "toHaveBorder";
+    let expectedBorderStyle;
+    try {
+      expectedBorderStyle = parseAsCSSBorderStyle(expected);
+      if (Object.values(expectedBorderStyle).length === 0) {
+        throw new Error("Empty border style!");
+      }
+    } catch (e) {
+      return {
+        message: () => "In " + this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + ":\n" + (e instanceof Error ? e.message : String(e)) + `
+
+Expected: Correct CSS border style to expect (e.g. "1px solid black")
+Received: ${this.utils.printReceived(expected)}`,
+        pass: false,
+        name: assertionName,
+        expected,
+        actual: void 0
+      };
+    }
+    let _border = [];
+    if (typeof border === "string") {
+      if (border === "all") {
+        _border = ["top", "bottom", "left", "right"];
+      } else {
+        _border = [border];
+      }
+    } else {
+      _border = Array.from(new Set(border)).filter(isBorderSide);
+    }
+    let pass = true;
+    let matcherResult;
+    try {
+      for (let b of _border) {
+        await expect$1(locator).toHaveCSS(`border-${b}-style`, expectedBorderStyle);
+      }
+    } catch (e) {
+      matcherResult = e.matcherResult;
+      pass = false;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: not ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "") : () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: matcherResult == null ? void 0 : matcherResult.actual
+    };
+  },
+  /**
+   * Asserts whether a component has the correct CSS `border` shorthand set:
+   * `color`, `width`, `style`.
+   *
+   * @param expected Expected string label
+   * @param border Border side(s), Default: **"all"**
+   *
+   * ---
+   * **Usage**
+   *
+   * ```js
+   * await initTestBed(`<Button label="hello" />`, {
+   *    testThemeVars: { "borderLeft-Button": "1px solid black" },
+   * });
+   * const driver = await createButtonDriver();
+   * await expect(driver.component).toHaveBorder("1px solid black", "left");
+   * ```
+   */
+  async toHaveBorder(locator, expected, border = "all") {
+    const assertionName = "toHaveBorder";
+    let expectedBorder;
+    try {
+      expectedBorder = parseAsCssBorder(expected);
+      if (Object.values(expectedBorder).length === 0) {
+        throw new Error("Empty style!");
+      }
+    } catch (e) {
+      return {
+        message: () => "In " + this.utils.matcherHint(assertionName, locator, expected, { isNot: this.isNot }) + ":\n" + (e instanceof Error ? e.message : String(e)) + `
+
+Expected: Correct CSS border style to expect (e.g. "1px solid black")
+Received: ${this.utils.printReceived(expected)}`,
+        pass: false,
+        name: assertionName,
+        expected,
+        actual: void 0
+      };
+    }
+    let _border = [];
+    if (typeof border === "string") {
+      if (border === "all") {
+        _border = ["top", "bottom", "left", "right"];
+      } else {
+        _border = [border];
+      }
+    } else {
+      _border = Array.from(new Set(border)).filter(isBorderSide);
+    }
+    let pass = true;
+    let matcherResult;
+    try {
+      if (expectedBorder == null ? void 0 : expectedBorder.color) {
+        const colorStr = `rgb(${expectedBorder.color.rgb().join(", ")})`;
+        await expect(locator).toHaveBorderColor(colorStr, _border);
+      }
+      if (expectedBorder == null ? void 0 : expectedBorder.width) {
+        await expect(locator).toHaveBorderWidth(numericCSSToString(expectedBorder.width), _border);
+      }
+      if (expectedBorder == null ? void 0 : expectedBorder.style) {
+        await expect(locator).toHaveBorderStyle(expectedBorder.style, _border);
+      }
+    } catch (e) {
+      matcherResult = e.matcherResult;
+      pass = false;
+    }
+    const message = pass ? () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: not ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "") : () => this.utils.matcherHint(assertionName, void 0, void 0, { isNot: this.isNot }) + `
+
+Expected: ${this.utils.printExpected(expected)}
+` + (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : "");
+    return {
+      message,
+      pass,
+      name: assertionName,
+      expected,
+      actual: matcherResult == null ? void 0 : matcherResult.actual
+    };
+  }
+});
+const isCI = ((_a = process == null ? void 0 : process.env) == null ? void 0 : _a.CI) === "true";
+async function getOnlyFirstLocator(page, testId) {
+  const locators = page.getByTestId(testId);
+  if (await locators.count() > 1) {
+    return locators.first();
+  }
+  return locators;
+}
+class Clipboard {
+  constructor(page) {
+    this.content = "";
+    this.page = page;
+  }
+  init() {
+    return () => {
+      window.navigator.clipboard.readText = () => Promise.resolve(this.content);
+      window.navigator.clipboard.read = () => {
+        throw new Error("Clipboard read not implemented in mocked environment");
+      };
+      window.navigator.clipboard.writeText = (text) => {
+        this.content = text;
+        return Promise.resolve(void 0);
+      };
+      window.navigator.clipboard.write = (items) => {
+        throw new Error("Clipboard write not implemented in mocked environment");
+      };
+    };
+  }
+  /**
+   * Reads the text from the clipboard.
+   *
+   * @returns The text from the clipboard.
+   */
+  async read() {
+    const handle = await this.page.evaluateHandle(() => navigator.clipboard.readText());
+    return handle.jsonValue();
+  }
+  /**
+   * Writes the text to the clipboard.
+   *
+   * @param text - The text to write to the clipboard.
+   */
+  async write(text) {
+    await this.page.evaluate((text2) => navigator.clipboard.writeText(text2), text);
+  }
+  async clear() {
+    await this.page.evaluate(() => navigator.clipboard.writeText(""));
+  }
+  /**
+   * Copies the text from the given locator to the clipboard.
+   *
+   * Steps:
+   * 1. Focus the locator.
+   * 2. Select the text.
+   * 3. Copy the text to the clipboard. (ControlOrMeta+C)
+   *
+   * @param locator - a Locator to focus and copy from
+   */
+  async copy(locator) {
+    await locator.focus();
+    await locator.selectText();
+    await this.page.keyboard.press("ControlOrMeta+C");
+  }
+  /**
+   * Pastes the text from the clipboard to the given locator.
+   *
+   * Steps:
+   * 1. Focus the locator.
+   * 2. Paste the text from the clipboard. (ControlOrMeta+V)
+   *
+   * @param locator - a Locator to focus and paste to
+   */
+  async paste(locator) {
+    await locator.focus();
+    await this.page.keyboard.press("ControlOrMeta+V");
+  }
+}
+function mapThemeRelatedVars(description) {
+  const { themes, defaultTheme, testThemeVars, ...rest } = description ?? {};
+  if (themes) {
+    return { themes, defaultTheme: defaultTheme ?? "xmlui", ...rest };
+  }
+  const testTheme = {
+    id: "test",
+    name: "Test",
+    extends: "xmlui",
+    themeVars: testThemeVars
+  };
+  return { themes: [testTheme], defaultTheme: "test", ...rest };
+}
+const test = test$1.extend({
+  // NOTE: the base Playwright test can be extended with fixture methods
+  // as well as any other language constructs we deem useful
+  baseComponentTestId: "test-id-component",
+  testStateViewTestId: "test-state-view-testid",
+  initTestBed: async ({ page, baseComponentTestId, testStateViewTestId }, use) => {
+    await use(async (source, description) => {
+      var _a2, _b, _c;
+      const defaultTestResources = {
+        "icon.box": "/resources/box.svg",
+        "icon.doc": "/resources/doc.svg",
+        "icon.sun": "/resources/sun.svg",
+        "icon.eye": "/resources/eye.svg",
+        "icon.txt": "/resources/txt.svg",
+        "icon.bell": "/resources/bell.svg"
+      };
+      const { errors, component } = xmlUiMarkupToComponent(`
+          <Fragment var.testState="{null}">
+            ${source}
+            <Stack width="0" height="0">
+              <Text
+                testId="${testStateViewTestId}"
+                value="{ typeof testState === 'undefined' ? 'undefined' : JSON.stringify(testState) }"/>
+            </Stack>
+          </Fragment>
+        `);
+      if (errors.length > 0) {
+        throw { errors };
+      }
+      const entryPoint = component;
+      const components = (_a2 = description == null ? void 0 : description.components) == null ? void 0 : _a2.map((c) => {
+        const { component: component2, errors: errors2, erroneousCompoundComponentName } = parseComponentIfNecessary(c);
+        if (erroneousCompoundComponentName) {
+          throw new Error(
+            `Error parsing component "${erroneousCompoundComponentName}": ${errors2.join("\n")}`
+          );
+        }
+        return component2;
+      });
+      if (source !== "" && entryPoint.children) {
+        const sourceBaseComponent = entryPoint.children[0];
+        const isCompoundComponentRoot = components && (components == null ? void 0 : components.length) > 0 && (components == null ? void 0 : components.map((c) => c.name).includes(sourceBaseComponent.type));
+        if (!isCompoundComponentRoot && !sourceBaseComponent.testId) {
+          sourceBaseComponent.testId = baseComponentTestId;
+        } else if (isCompoundComponentRoot && ((_b = sourceBaseComponent.children) == null ? void 0 : _b.length) === 1 && !((_c = sourceBaseComponent.children) == null ? void 0 : _c[0].testId)) {
+          sourceBaseComponent.children[0].testId = baseComponentTestId;
+        }
+      }
+      const themedDescription = mapThemeRelatedVars(description);
+      const mergedResources = {
+        ...defaultTestResources,
+        ...themedDescription.resources
+      };
+      const _appDescription = {
+        name: "test bed app",
+        ...themedDescription,
+        resources: mergedResources,
+        components,
+        entryPoint
+      };
+      const clipboard = new Clipboard(page);
+      if (isCI) {
+        await page.addInitScript(clipboard.init);
+      }
+      await page.addInitScript((app) => {
+        window.TEST_ENV = app;
+      }, _appDescription);
+      const { width, height } = page.viewportSize();
+      await page.goto("/");
+      const testIcons = {
+        boxIcon: page.getByTestId("box-svg"),
+        docIcon: page.getByTestId("doc-svg"),
+        sunIcon: page.getByTestId("sun-svg"),
+        eyeIcon: page.getByTestId("eye-svg"),
+        txtIcon: page.getByTestId("txt-svg"),
+        bellIcon: page.getByTestId("bell-svg")
+      };
+      return {
+        testStateDriver: new TestStateDriver(page.getByTestId(testStateViewTestId)),
+        clipboard,
+        width: width ?? 0,
+        height: height ?? 0,
+        testIcons
+      };
+    });
+  },
+  createDriver: async ({ page, baseComponentTestId }, use) => {
+    await use(async (driverClass, testIdOrLocator) => {
+      let locator = void 0;
+      if (testIdOrLocator === void 0 || typeof testIdOrLocator === "string") {
+        locator = await getOnlyFirstLocator(page, testIdOrLocator ?? baseComponentTestId);
+      } else if (typeof testIdOrLocator === "object") {
+        locator = testIdOrLocator;
+      }
+      return new driverClass({
+        locator,
+        page
+      });
+    });
+  },
+  createButtonDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ButtonDriver, testIdOrLocator);
+    });
+  },
+  createBackdropDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(BackdropDriver, testIdOrLocator);
+    });
+  },
+  createContentSeparatorDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ContentSeparatorDriver, testIdOrLocator);
+    });
+  },
+  createAvatarDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(AvatarDriver, testIdOrLocator);
+    });
+  },
+  createFormDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(FormDriver, testIdOrLocator);
+    });
+  },
+  createFormItemDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(FormItemDriver, testIdOrLocator);
+    });
+  },
+  createValidationSummaryDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ValidationSummaryDriver, testIdOrLocator);
+    });
+  },
+  createValidationDisplayDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ValidationDisplayDriver, testIdOrLocator);
+    });
+  },
+  createSplitterDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(SplitterDriver, testIdOrLocator);
+    });
+  },
+  createMarkdownDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(MarkdownDriver, testIdOrLocator);
+    });
+  },
+  createItemsDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ItemsDriver, testIdOrLocator);
+    });
+  },
+  createRangeDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(RangeDriver, testIdOrLocator);
+    });
+  },
+  createDatePickerDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(DatePickerDriver, testIdOrLocator);
+    });
+  },
+  createExpandableItemDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ExpandableItemDriver, testIdOrLocator);
+    });
+  },
+  createFileInputDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(FileInputDriver, testIdOrLocator);
+    });
+  },
+  createFileUploadDropZoneDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(FileUploadDropZoneDriver, testIdOrLocator);
+    });
+  },
+  createAutoCompleteDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(AutoCompleteDriver, testIdOrLocator);
+    });
+  },
+  createSelectDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(SelectDriver, testIdOrLocator);
+    });
+  },
+  createRadioGroupDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(RadioGroupDriver, testIdOrLocator);
+    });
+  },
+  createNumberBoxDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(NumberBoxDriver, testIdOrLocator);
+    });
+  },
+  createTextBoxDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TextBoxDriver, testIdOrLocator);
+    });
+  },
+  createSliderDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(SliderDriver, testIdOrLocator);
+    });
+  },
+  createTextAreaDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TextAreaDriver, testIdOrLocator);
+    });
+  },
+  createProgressBarDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ProgressBarDriver, testIdOrLocator);
+    });
+  },
+  createListDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ListDriver, testIdOrLocator);
+    });
+  },
+  createTextDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TextDriver, testIdOrLocator);
+    });
+  },
+  createHeadingDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(HeadingDriver, testIdOrLocator);
+    });
+  },
+  createIconDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(IconDriver, testIdOrLocator);
+    });
+  },
+  createStackDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(StackDriver, testIdOrLocator);
+    });
+  },
+  createHStackDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(HStackDriver, testIdOrLocator);
+    });
+  },
+  createVStackDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(VStackDriver, testIdOrLocator);
+    });
+  },
+  createLinkDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(LinkDriver, testIdOrLocator);
+    });
+  },
+  createNavLinkDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(NavLinkDriver, testIdOrLocator);
+    });
+  },
+  createNavGroupDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(NavGroupDriver, testIdOrLocator);
+    });
+  },
+  createNavPanelDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(NavPanelDriver, testIdOrLocator);
+    });
+  },
+  createCardDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(CardDriver, testIdOrLocator);
+    });
+  },
+  createAccordionDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(AccordionDriver, testIdOrLocator);
+    });
+  },
+  createAppHeaderDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(AppHeaderDriver, testIdOrLocator);
+    });
+  },
+  createAppFooterDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(AppFooterDriver, testIdOrLocator);
+    });
+  },
+  createBadgeDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(BadgeDriver, testIdOrLocator);
+    });
+  },
+  createNoResultDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(NoResultDriver, testIdOrLocator);
+    });
+  },
+  createOptionDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(OptionDriver, testIdOrLocator);
+    });
+  },
+  createHtmlTagDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(HtmlTagDriver, testIdOrLocator);
+    });
+  },
+  createCodeBlockDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(CodeBlockDriver, testIdOrLocator);
+    });
+  },
+  createCheckboxDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(CheckboxDriver, testIdOrLocator);
+    });
+  },
+  createLabelDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(LabelDriver, testIdOrLocator);
+    });
+  },
+  createSpinnerDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(SpinnerDriver, testIdOrLocator);
+    });
+  },
+  createDropdownMenuDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(DropdownMenuDriver, testIdOrLocator);
+    });
+  },
+  createTimeInputDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TimeInputDriver, testIdOrLocator);
+    });
+  },
+  createTimerDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TimerDriver, testIdOrLocator);
+    });
+  },
+  createDateInputDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(DateInputDriver, testIdOrLocator);
+    });
+  },
+  createModalDialogDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(ModalDialogDriver, testIdOrLocator);
+    });
+  },
+  createTreeDriver: async ({ createDriver }, use) => {
+    await use((testIdOrLocator) => {
+      return createDriver(TreeDriver, testIdOrLocator);
+    });
+  }
+});
+function parseComponent(entryPoint) {
+  if (typeof entryPoint === "string") {
+    return xmlUiMarkupToComponent(entryPoint).component;
+  }
+  return entryPoint;
+}
+async function initApp(page, appDescription, url = "/", resources = {}) {
+  const { entryPoint, components } = appDescription;
+  const _appDescription = {
+    ...appDescription,
+    name: appDescription.name || "Test App",
+    entryPoint: parseComponent(entryPoint),
+    resources,
+    components: !components ? void 0 : Array.isArray(components) ? components.map((comp) => parseComponent(comp)) : [parseComponent(components)]
+  };
+  await page.addInitScript((app) => {
+    window.TEST_ENV = app;
+  }, _appDescription);
+  await page.goto(url);
+}
+async function prepPage(co, appDesc, url = "/") {
+  const context = co;
+  const page = await context.newPage();
+  await initApp(page, appDesc, url);
+  return page;
+}
+async function initThemedApp(page, entryPoint, theme) {
+  theme.id ?? (theme.id = "testTheme");
+  theme.name ?? (theme.name = "Custom Test theme");
+  await initApp(page, { entryPoint, defaultTheme: theme.id, themes: [theme] });
+}
+function scalePercentBy(scalarOf100Percent, percentage) {
+  if (!percentage.endsWith("%")) {
+    throw new Error("argument doesn't end with % sign");
+  }
+  const percentageNum = Number(percentage.slice(0, -1));
+  return scalarOf100Percent / 100 * percentageNum;
+}
+function getBoundingRect(locator) {
+  return locator.evaluate((element) => element.getBoundingClientRect());
+}
+async function getFullRectangle(locator) {
+  const boundingRect = await locator.evaluate((element) => element.getBoundingClientRect());
+  const margins = await getElementStyles(locator, [
+    "margin-left",
+    "margin-right",
+    "margin-top",
+    "margin-bottom"
+  ]);
+  const marginLeft = parseFloat(margins["margin-left"]);
+  const marginRight = parseFloat(margins["margin-right"]);
+  const marginTop = parseFloat(margins["margin-top"]);
+  const marginBottom = parseFloat(margins["margin-bottom"]);
+  const width = boundingRect.width + marginLeft + marginRight;
+  const height = boundingRect.height + marginTop + marginBottom;
+  const left = boundingRect.left - marginLeft;
+  const right = boundingRect.right + marginRight;
+  const top = boundingRect.top - marginTop;
+  const bottom = boundingRect.bottom + marginBottom;
+  return { width, height, left, right, top, bottom };
+}
+async function isElementOverflown(locator, direction = "both") {
+  const [width, height, scrollWidth, scrollHeight] = await locator.evaluate((element) => [
+    element.clientWidth,
+    element.clientHeight,
+    element.scrollWidth,
+    element.scrollHeight
+  ]);
+  if (direction === "x") return scrollWidth > width;
+  if (direction === "y") return scrollHeight > height;
+  return scrollWidth > width && scrollHeight > height;
+}
+function pixelStrToNum(pixelStr) {
+  return Number(pixelStr.replace("px", ""));
+}
+function getElementStyle(locator, style) {
+  return locator.evaluate(
+    (element, style2) => window.getComputedStyle(element).getPropertyValue(style2),
+    style
+  );
+}
+function getElementStyles(locator, styles = []) {
+  return locator.evaluate(
+    (element, styles2) => Object.fromEntries(
+      styles2.map((styleName) => [
+        styleName,
+        window.getComputedStyle(element).getPropertyValue(styleName)
+      ])
+    ),
+    styles
+  );
+}
+async function getStyle(page, testId, style) {
+  const locator = page.getByTestId(testId);
+  return await getElementStyle(locator, style);
+}
+export {
+  ComponentDriver,
+  DateInputDriver,
+  SKIP_REASON,
+  TimeInputDriver,
+  TimerDriver,
+  expect,
+  getBorders,
+  getBoundingRect$1 as getBoundingRect,
+  getBounds,
+  getComponentTagName,
+  getElementStyle$1 as getElementStyle,
+  getElementStyles$1 as getElementStyles,
+  getFullRectangle,
+  getHtmlAttributes,
+  getMargins,
+  getPaddings,
+  getPseudoStyles,
+  getStyles,
+  getBoundingRect as getThemedBoundingRect,
+  getElementStyle as getThemedElementStyle,
+  getElementStyles as getThemedElementStyles,
+  getStyle as getThemedStyle,
+  initApp,
+  initThemedApp,
+  isIndeterminate,
+  mapObject,
+  numericCSSToString,
+  overflows,
+  parseAsCSSBorderStyle,
+  parseAsCSSColor,
+  parseAsCssBorder,
+  parseAsNumericCss,
+  parseComponentIfNecessary,
+  pixelStrToNum$1 as pixelStrToNum,
+  prepPage,
+  scaleByPercent,
+  scalePercentBy,
+  test,
+  isElementOverflown as themedOverflows,
+  pixelStrToNum as themedPixelStrToNum
+};