xmlui 0.11.4 → 0.11.7

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

@@ -1,118 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltipComponentRenderer = exports.TooltipMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const TooltipNative_1 = require("./TooltipNative");
-const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
-const COMP = "Tooltip";
-exports.TooltipMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "A tooltip component that displays text when hovering over trigger content.",
-    props: {
-        text: {
-            description: "The text content to display in the tooltip",
-            type: "string",
-            isRequired: false,
-        },
-        markdown: {
-            description: "The markdown content to display in the tooltip",
-            type: "string",
-            isRequired: false,
-        },
-        tooltipTemplate: {
-            description: "The template for the tooltip content",
-            type: "Component",
-            isRequired: false,
-        },
-        delayDuration: {
-            description: "The duration from when the mouse enters a tooltip trigger until the tooltip opens (in ms)",
-            type: "number",
-            defaultValue: 700,
-        },
-        skipDelayDuration: {
-            description: "How much time a user has to enter another trigger without incurring a delay again (in ms)",
-            type: "number",
-            defaultValue: 300,
-        },
-        defaultOpen: {
-            description: "The open state of the tooltip when it is initially rendered",
-            type: "boolean",
-            defaultValue: false,
-        },
-        showArrow: {
-            description: "Whether to show the arrow pointing to the trigger element",
-            type: "boolean",
-            defaultValue: false,
-        },
-        side: {
-            description: "The preferred side of the trigger to render against when open",
-            type: "string",
-            availableValues: ["top", "right", "bottom", "left"],
-            defaultValue: "top",
-        },
-        align: {
-            description: "The preferred alignment against the trigger",
-            type: "string",
-            availableValues: ["start", "center", "end"],
-            defaultValue: "center",
-        },
-        sideOffset: {
-            description: "The distance in pixels from the trigger",
-            type: "number",
-            defaultValue: 4,
-        },
-        alignOffset: {
-            description: "An offset in pixels from the 'start' or 'end' alignment options",
-            type: "number",
-            defaultValue: 0,
-        },
-        avoidCollisions: {
-            description: "When true, overrides the side and align preferences to prevent collisions with boundary edges",
-            type: "boolean",
-            defaultValue: true,
-        },
-    },
-    events: {},
-    apis: {},
-    contextVars: {},
-    themeVars: (0, themeVars_1.parseScssVar)(Tooltip_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$color-surface-0",
-        [`border-${COMP}`]: "none",
-        [`textColor-${COMP}`]: "$textcolor-primary",
-        [`borderRadius-${COMP}`]: "4px",
-        [`fontSize-${COMP}`]: "15px",
-        [`lineHeight-${COMP}`]: "1",
-        [`paddingTop-${COMP}`]: "10px",
-        [`paddingBottom-${COMP}`]: "10px",
-        [`paddingLeft-${COMP}`]: "15px",
-        [`paddingRight-${COMP}`]: "15px",
-        [`boxShadow-${COMP}`]: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-        [`fill-arrow-${COMP}`]: "$color-surface-200",
-        [`stroke-arrow-${COMP}`]: "$color-surface-200",
-        [`strokeWidth-arrow-${COMP}`]: "0",
-        [`animationDuration-${COMP}`]: "400ms",
-        [`animation-${COMP}`]: "cubic-bezier(0.16, 1, 0.3, 1)",
-        dark: {
-            [`backgroundColor-${COMP}`]: "$color-surface-200",
-        },
-    },
-});
-exports.tooltipComponentRenderer = (0, renderers_1.createComponentRenderer)("Tooltip", exports.TooltipMd, ({ node, extractValue, renderChild, layoutContext }) => {
-    // If there are no children, do not render anything
-    if (!node.children || node.children.length === 0) {
-        return null;
-    }
-    // If text is not provided, do not render anything
-    const text = extractValue.asOptionalString(node.props.text);
-    const markdown = extractValue.asOptionalString(node.props.markdown);
-    const tooltipTemplate = node.props.tooltipTemplate;
-    return ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { text: text, markdown: markdown, tooltipTemplate: renderChild(tooltipTemplate), delayDuration: extractValue.asOptionalNumber(node.props.delayDuration), skipDelayDuration: extractValue.asOptionalNumber(node.props.skipDelayDuration), defaultOpen: extractValue.asOptionalBoolean(node.props.defaultOpen), showArrow: extractValue.asOptionalBoolean(node.props.showArrow), side: extractValue.asOptionalString(node.props.side), align: extractValue.asOptionalString(node.props.align), sideOffset: extractValue.asOptionalNumber(node.props.sideOffset), alignOffset: extractValue.asOptionalNumber(node.props.alignOffset), avoidCollisions: extractValue.asOptionalBoolean(node.props.avoidCollisions), children: renderChild(node.children, layoutContext) }));
-});

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

@@ -1,418 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-// Use low delay duration for faster tests as suggested
-const LOW_DELAY = 10;
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
-        <Button label="Hover me!" testId="tooltip-button" />
-      </Tooltip>
-    `);
-        const button = page.getByTestId("tooltip-button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Hover over the button to trigger tooltip
-        yield button.hover();
-        // Wait for tooltip to appear with low delay
-        yield (0, fixtures_1.expect)(page.locator("[data-tooltip-container]")).toBeVisible();
-    }));
-    // Note: This test is mainly to verify that the tooltip has the correct role for accessibility but
-    // is placed here since we use getByRole for the content.
-    // Fetching by data attribute is for the dimension tests below.
-    (0, fixtures_1.test)("has correct 'role' attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="Tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `);
-        const tooltip = page.getByRole("tooltip");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        yield (0, fixtures_1.expect)(tooltip).toContainText("Tooltip");
-    }));
-    (0, fixtures_1.test)("renders with tooltip property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
-        <Button label="Hover me!" testId="tooltip-button" />
-      </Tooltip>
-    `);
-        const button = page.getByTestId("tooltip-button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Hover over the button to trigger tooltip
-        yield button.hover();
-        // Wait for tooltip to appear with low delay
-        yield (0, fixtures_1.expect)(page.getByRole("tooltip")).toHaveText("I'm a tooltip!");
-        // Note: We skip testing tooltip hiding as it's dependent on implementation details
-        // and the main functionality test is that it appears correctly on hover
-    }));
-    (0, fixtures_1.test)("renders with markdown content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip delayDuration="${LOW_DELAY}" markdown="This *example* uses \`tooltipMarkdown\`">
-        <Card title="Tooltip with markdown" testId="markdown-card" />
-      </Tooltip>
-    `);
-        const card = page.getByTestId("markdown-card");
-        yield (0, fixtures_1.expect)(card).toBeVisible();
-        // Hover to show tooltip
-        yield card.hover();
-        // Check that markdown is rendered (looking for emphasis and code elements)
-        const tooltip = page.getByRole("tooltip");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
-        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("tooltipMarkdown");
-    }));
-    (0, fixtures_1.test)("renders with 'side' property set to right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned right" side="right">
-          <Button label="Hover me!" testId="right-tooltip-button" />
-        </Tooltip>
-      </CVStack>
-    `);
-        const button = page.getByTestId("right-tooltip-button");
-        yield button.hover();
-        const tooltip = page.getByText("I'm positioned right");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        // Verify tooltip is positioned to the right of the button
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.left).toBeGreaterThan(buttonBox.right);
-    }));
-    (0, fixtures_1.test)("renders with 'side' property set to left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned left" side="left">
-          <Button label="Hover me!" testId="left-tooltip-button" />
-        </Tooltip>
-      </CVStack>
-    `);
-        const button = page.getByTestId("left-tooltip-button");
-        yield button.hover();
-        const tooltip = page.getByText("I'm positioned left");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        // Verify tooltip is positioned to the right of the button
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.right).toBeLessThan(buttonBox.left);
-    }));
-    (0, fixtures_1.test)("renders with 'side' property set to top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned top" side="top">
-          <Button label="Hover me!" testId="top-tooltip-button" />
-        </Tooltip>
-      </CVStack>
-    `);
-        const button = page.getByTestId("top-tooltip-button");
-        yield button.hover();
-        const tooltip = page.getByText("I'm positioned top");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        // Verify tooltip is positioned above the button
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.bottom).toBeLessThan(buttonBox.top);
-    }));
-    (0, fixtures_1.test)("renders with 'side' property set to bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned bottom" side="bottom">
-          <Button label="Hover me!" testId="bottom-tooltip-button" />
-        </Tooltip>
-      </CVStack>
-    `);
-        const button = page.getByTestId("bottom-tooltip-button");
-        yield button.hover();
-        const tooltip = page.getByText("I'm positioned bottom");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        // Verify tooltip is positioned below the button
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.top).toBeGreaterThan(buttonBox.bottom);
-    }));
-    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is top`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip side="top" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
-          <Icon name="email" testId="tooltip-icon" />
-        </Tooltip>
-      </CVStack>
-    `);
-        const icon = page.getByTestId("tooltip-icon");
-        yield icon.hover();
-        const tooltip = page.locator("[data-tooltip-container]");
-        // Verify tooltip is positioned above the icon with the correct offset
-        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(iconBox.top - tooltipBox.bottom).toEqualWithTolerance(28, 4);
-    }));
-    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is bottom`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip side="bottom" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
-          <Icon name="email" testId="tooltip-icon" />
-        </Tooltip>
-      </Stack>
-    `);
-        const icon = page.getByTestId("tooltip-icon");
-        yield icon.hover();
-        const tooltip = page.locator("[data-tooltip-container]");
-        // Verify tooltip is positioned below the icon with the correct offset
-        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.top - iconBox.bottom).toBeGreaterThanOrEqual(28);
-    }));
-    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is left`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip side="left" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
-          <Icon name="email" testId="tooltip-icon-left" />
-        </Tooltip>
-      </Stack>
-    `);
-        const icon = page.getByTestId("tooltip-icon-left");
-        yield icon.hover();
-        const tooltip = page.getByRole("tooltip");
-        // Verify tooltip is positioned to the left of the icon with the correct offset
-        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(iconBox.left - tooltipBox.right).toBeGreaterThanOrEqual(28);
-    }));
-    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is right`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
-        <Tooltip side="right" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
-          <Icon name="email" testId="tooltip-icon-right" />
-        </Tooltip>
-      </Stack>
-    `);
-        const icon = page.getByTestId("tooltip-icon-right");
-        yield icon.hover();
-        const tooltip = page.getByRole("tooltip");
-        // Verify tooltip is positioned to the right of the icon with the correct offset
-        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
-        (0, fixtures_1.expect)(tooltipBox.left - iconBox.right).toBeGreaterThanOrEqual(28);
-    }));
-    (0, fixtures_1.test)("Tooltip is shown for all wrapped children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip side="bottom" markdown="This *example* uses a \`Tooltip\` component" delayDuration="${LOW_DELAY}">
-        <VStack horizontalAlignment="center">
-          <Card title="Card 1: within a Tooltip" testId="tooltip-card-1" />
-          <Card title="Card 2: within the same Tooltip" testId="tooltip-card-2" />
-        </VStack>
-      </Tooltip>
-    `);
-        const card1 = page.getByTestId("tooltip-card-1");
-        const card2 = page.getByTestId("tooltip-card-2");
-        yield (0, fixtures_1.expect)(card1).toBeVisible();
-        yield (0, fixtures_1.expect)(card2).toBeVisible();
-        // Hover over first card
-        yield card1.hover();
-        const tooltip = page.getByRole("tooltip");
-        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
-        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("Tooltip");
-        // Move to second card - tooltip should still be visible
-        yield card2.hover();
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders with 'tooltipTemplate' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <VStack height="100px" horizontalAlignment="center">
-        <Tooltip side="bottom" delayDuration="${LOW_DELAY}">
-          <property name="tooltipTemplate">
-            <HStack>
-              <Stack width="24px" height="24px" backgroundColor="purple" testId="purple-square" />
-              <H2>This is a tooltip</H2>
-            </HStack>
-          </property>
-          <Card title="I have a templated Tooltip!" testId="template-card" />
-        </Tooltip>
-      </VStack>
-    `);
-        const card = page.getByTestId("template-card");
-        yield card.hover();
-        // Check that custom template elements are present
-        const tooltip = page.locator('[role="tooltip"]');
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        yield (0, fixtures_1.expect)(tooltip.getByTestId("purple-square")).toBeVisible();
-        yield (0, fixtures_1.expect)(tooltip.getByRole("heading", { level: 2 })).toContainText("This is a tooltip");
-    }));
-    (0, fixtures_1.test)("renders with start 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <HStack horizontalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="Start aligned" side="bottom" align="start">
-          <Button label="Start aligned Start aligned" testId="start-button" />
-        </Tooltip>
-      </HStack>
-    `);
-        const startButton = page.getByTestId("start-button");
-        yield startButton.hover();
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(startButton);
-        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeLessThan(buttonBox.left + buttonBox.width / 2);
-    }));
-    (0, fixtures_1.test)("renders with center 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <HStack horizontalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="Center aligned" side="bottom" align="center">
-          <Button label="Center aligned Center aligned" testId="center-button" />
-        </Tooltip>
-      </HStack>
-    `);
-        const centerButton = page.getByTestId("center-button");
-        yield centerButton.hover();
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(centerButton);
-        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toEqualWithTolerance(buttonBox.left + buttonBox.width / 2, 10);
-    }));
-    (0, fixtures_1.test)("renders with end 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <HStack horizontalAlignment="center">
-        <Tooltip delayDuration="${LOW_DELAY}" text="End aligned" side="bottom" align="end">
-          <Button label="End aligned End aligned" testId="end-button" />
-        </Tooltip>
-      </HStack>
-    `);
-        const endButton = page.getByTestId("end-button");
-        yield endButton.hover();
-        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
-        const buttonBox = yield (0, component_test_helpers_1.getBounds)(endButton);
-        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeGreaterThan(buttonBox.left + buttonBox.width / 2);
-    }));
-    (0, fixtures_1.test)("renders with 'defaultOpen' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="Always visible tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" testId="default-open-button" />
-      </Tooltip>
-    `);
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("default-open-button")).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("tooltip content is accessible via screen reader", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `);
-        // Check that tooltip has proper accessibility attributes
-        const tooltip = page.getByRole("tooltip");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        // Verify tooltip content is properly exposed
-        yield (0, fixtures_1.expect)(tooltip).toHaveText("This tooltip is accessible");
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies 'backgroundColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `, {
-            testThemeVars: { "backgroundColor-Tooltip": "rgb(255, 0, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    }));
-    (0, fixtures_1.test)("applies 'textColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `, {
-            testThemeVars: { "textColor-Tooltip": "rgb(0, 255, 0)" },
-        });
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("color", "rgb(0, 255, 0)");
-    }));
-    (0, fixtures_1.test)("applies 'borderRadius-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `, {
-            testThemeVars: { "borderRadius-Tooltip": "12px" },
-        });
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("border-radius", "12px");
-    }));
-    (0, fixtures_1.test)("applies 'fontSize-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `, {
-            testThemeVars: { "fontSize-Tooltip": "20px" },
-        });
-        const tooltip = page.getByRole("tooltip");
-        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
-        yield (0, fixtures_1.expect)(tooltip).toHaveCSS("font-size", "20px");
-    }));
-    (0, fixtures_1.test)("applies 'paddingLeft-Tooltip' and 'paddingRight-Tooltip' theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-        yield initTestBed(`
-      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with default open tooltip" />
-      </Tooltip>
-    `, {
-            testThemeVars: {
-                "paddingLeft-Tooltip": "20px",
-                "paddingRight-Tooltip": "25px",
-            },
-        });
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-left", "20px");
-        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-right", "25px");
-    }));
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    (0, fixtures_1.test)("handles empty tooltip text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip text="" defaultOpen="true" delayDuration="${LOW_DELAY}">
-        <Button label="Button with empty tooltip" />
-      </Tooltip>
-    `);
-        // There should be no visible tooltip with meaningful content
-        const tooltips = page.getByRole("tooltip");
-        const count = yield tooltips.count();
-        if (count > 0) {
-            // If tooltip exists, it should be empty or not visible
-            const tooltip = tooltips.first();
-            const text = yield tooltip.textContent();
-            (0, fixtures_1.expect)(text === null || text === void 0 ? void 0 : text.trim()).toBe("");
-        }
-    }));
-    (0, fixtures_1.test)("handles tooltip without any content properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Tooltip>
-        <Button label="Button in tooltip without content" testId="no-content-button" />
-      </Tooltip>
-    `);
-        const button = page.getByTestId("no-content-button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Hover should not show tooltip since there's no content
-        yield button.hover();
-        // Should not find any tooltip with content
-        const tooltips = page.getByRole("tooltip");
-        const count = yield tooltips.count();
-        (0, fixtures_1.expect)(count).toBe(0);
-    }));
-});