xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,69 @@
+"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");
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("htmlTable is rendered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHtmlTagDriver }) {
+        yield initTestBed(`<table />`);
+        const driver = yield createHtmlTagDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeAttached();
+    }));
+});
+const tableCode = `
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Person</th>
+      <th scope="col">Most interest in</th>
+      <th scope="col">Age</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Chris</th>
+      <td>HTML tables</td>
+      <td>22</td>
+    </tr>
+    <tr>
+      <th scope="row">Dennis</th>
+      <td>Web accessibility</td>
+      <td>45</td>
+    </tr>
+    <tr>
+      <th scope="row">Sarah</th>
+      <td>JavaScript frameworks</td>
+      <td>29</td>
+    </tr>
+    <tr>
+      <th scope="row">Karen</th>
+      <td>Web performance</td>
+      <td>36</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colSpan="2">Average age</th>
+      <td>33</td>
+    </tr>
+  </tfoot>
+</table>
+`;
+(0, fixtures_1.test)("htmlTable width using themes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHtmlTagDriver }) {
+    const { width } = yield initTestBed(tableCode, {
+        testThemeVars: {
+            "width-HtmlTable": "100%",
+        },
+    });
+    const driver = yield createHtmlTagDriver();
+    const compWidth = (yield (0, component_test_helpers_1.getBounds)(driver)).width;
+    (0, fixtures_1.expect)(compWidth).toEqual(width);
+}));

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

@@ -0,0 +1,527 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`);
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component renders with 'src' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame src="https://example.com" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("src", "https://example.com");
+    }));
+    (0, fixtures_1.test)("component renders with 'srcdoc' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const htmlContent = "<h1>Test Content</h1><p>This is embedded HTML.</p>";
+        yield initTestBed(`<IFrame srcdoc="${htmlContent}" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("srcdoc", htmlContent);
+    }));
+    fixtures_1.test.describe("allow property", () => {
+        (0, fixtures_1.test)("sets permissions policy", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const allowValue = "camera; microphone; geolocation";
+            yield initTestBed(`<IFrame allow="${allowValue}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("allow", allowValue);
+        }));
+        (0, fixtures_1.test)("handles empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame allow="" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("allow", "");
+        }));
+        (0, fixtures_1.test)("handles null gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame allow="{null}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("allow");
+        }));
+        (0, fixtures_1.test)("handles undefined gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame allow="{undefined}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("allow");
+        }));
+    });
+    fixtures_1.test.describe("name property", () => {
+        (0, fixtures_1.test)("sets iframe name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame name="myFrame" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("name", "myFrame");
+        }));
+        (0, fixtures_1.test)("handles empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame name="" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("name", "");
+        }));
+        (0, fixtures_1.test)("handles null gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame name="{null}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("name");
+        }));
+        (0, fixtures_1.test)("handles undefined gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame name="{undefined}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("name");
+        }));
+        (0, fixtures_1.test)("handles unicode characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const unicodeName = "测试框架👨‍👩‍👧‍👦";
+            yield initTestBed(`<IFrame name="${unicodeName}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("name", unicodeName);
+        }));
+    });
+    fixtures_1.test.describe("referrerPolicy property", () => {
+        [
+            "no-referrer",
+            "no-referrer-when-downgrade",
+            "origin",
+            "origin-when-cross-origin",
+            "same-origin",
+            "strict-origin",
+            "strict-origin-when-cross-origin",
+            "unsafe-url"
+        ].forEach(policy => {
+            (0, fixtures_1.test)(`sets referrerPolicy to '${policy}'`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+                yield initTestBed(`<IFrame referrerPolicy="${policy}" testId="iframe" />`);
+                const iframe = page.getByTestId("iframe");
+                yield (0, fixtures_1.expect)(iframe).toHaveAttribute("referrerpolicy", policy);
+            }));
+        });
+        (0, fixtures_1.test)("handles invalid value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame referrerPolicy="invalid-policy" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("referrerpolicy", "invalid-policy");
+        }));
+        (0, fixtures_1.test)("handles null gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame referrerPolicy="{null}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("referrerpolicy");
+        }));
+    });
+    fixtures_1.test.describe("sandbox property", () => {
+        (0, fixtures_1.test)("sets sandbox restrictions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const sandboxValue = "allow-scripts allow-same-origin";
+            yield initTestBed(`<IFrame sandbox="${sandboxValue}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", sandboxValue);
+        }));
+        (0, fixtures_1.test)("handles empty string for strict sandboxing", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame sandbox="" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", "");
+        }));
+        (0, fixtures_1.test)("handles single sandbox flag", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame sandbox="allow-scripts" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", "allow-scripts");
+        }));
+        (0, fixtures_1.test)("handles null gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`<IFrame sandbox="{null}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("sandbox");
+        }));
+    });
+    fixtures_1.test.describe("event handlers", () => {
+        (0, fixtures_1.test)("'load' event fires when content loads", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <IFrame 
+          srcdoc="<h1>Test</h1>" 
+          onLoad="testState = 'loaded'" 
+          testId="iframe" 
+        />
+      `);
+            // Wait for the load event to fire
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("loaded");
+        }));
+        (0, fixtures_1.test)("'load' event receives event object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <IFrame 
+          srcdoc="<h1>Test</h1>" 
+          onLoad="event => testState = event.type" 
+          testId="iframe" 
+        />
+      `);
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("load");
+        }));
+    });
+    fixtures_1.test.describe("edge case combinations", () => {
+        (0, fixtures_1.test)("handles both src and srcdoc (srcdoc should take precedence)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const htmlContent = "<h1>Srcdoc Content</h1>";
+            yield initTestBed(`<IFrame src="https://example.com" srcdoc="${htmlContent}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("src", "https://example.com");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("srcdoc", htmlContent);
+        }));
+        (0, fixtures_1.test)("handles all security properties together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <IFrame 
+          src="https://example.com"
+          sandbox="allow-scripts allow-same-origin"
+          allow="camera; microphone"
+          referrerPolicy="no-referrer"
+          testId="iframe" 
+        />
+      `);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", "allow-scripts allow-same-origin");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("allow", "camera; microphone");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("referrerpolicy", "no-referrer");
+        }));
+        (0, fixtures_1.test)("handles extremely long URL", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const longUrl = "https://example.com/" + "a".repeat(2000);
+            yield initTestBed(`<IFrame src="${longUrl}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("src", longUrl);
+        }));
+        (0, fixtures_1.test)("handles complex HTML in srcdoc with special characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const complexHtml = "&lt;h1&gt;测试&lt;/h1&gt;&lt;p&gt;Special chars: &amp;lt;&amp;gt;&amp;amp;&lt;/p&gt;";
+            yield initTestBed(`<IFrame srcdoc="${complexHtml}" testId="iframe" />`);
+            const iframe = page.getByTestId("iframe");
+            yield (0, fixtures_1.expect)(iframe).toBeVisible();
+            // HTML entities get decoded by the browser, so we expect the decoded version
+            yield (0, fixtures_1.expect)(iframe).toHaveAttribute("srcdoc", "<h1>测试</h1><p>Special chars: &lt;&gt;&amp;</p>");
+        }));
+    });
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has correct element type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`);
+        // Note: iframe elements don't have an implicit role, they are identified by tag name
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        // Check that it's actually an iframe element
+        const tagName = yield iframe.evaluate(el => el.tagName);
+        (0, fixtures_1.expect)(tagName).toBe("IFRAME");
+    }));
+    (0, fixtures_1.test)("maintains focus management", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        // IFrame should be focusable by default
+        yield iframe.focus();
+        yield (0, fixtures_1.expect)(iframe).toBeFocused();
+    }));
+    (0, fixtures_1.test)("can be identified by name for accessibility tools", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame name="mainContent" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("name", "mainContent");
+        // Name attribute can be used by accessibility tools to identify the frame
+    }));
+    (0, fixtures_1.test)("supports sandbox for secure content embedding", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame sandbox="allow-scripts" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", "allow-scripts");
+        // Sandbox provides security restrictions which can help with accessibility concerns
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies 'width-IFrame' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`, {
+            testThemeVars: { "width-IFrame": "500px" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe")).toHaveCSS("width", "500px");
+    }));
+    (0, fixtures_1.test)("applies 'height-IFrame' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`, {
+            testThemeVars: { "height-IFrame": "400px" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe")).toHaveCSS("height", "400px");
+    }));
+    (0, fixtures_1.test)("applies 'borderRadius-IFrame' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`, {
+            testThemeVars: { "borderRadius-IFrame": "10px" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe")).toHaveCSS("border-radius", "10px");
+    }));
+    (0, fixtures_1.test)("applies 'border-IFrame' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`, {
+            testThemeVars: { "border-IFrame": "2px solid rgb(255, 0, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe")).toHaveCSS("border", "2px solid rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("applies multiple theme variables together", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`, {
+            testThemeVars: {
+                "width-IFrame": "600px",
+                "height-IFrame": "400px",
+                "borderRadius-IFrame": "8px",
+                "border-IFrame": "3px dashed rgb(0, 255, 0)"
+            },
+        });
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toHaveCSS("width", "600px");
+        yield (0, fixtures_1.expect)(iframe).toHaveCSS("height", "400px");
+        yield (0, fixtures_1.expect)(iframe).toHaveCSS("border-radius", "8px");
+        yield (0, fixtures_1.expect)(iframe).toHaveCSS("border", "3px dashed rgb(0, 255, 0)");
+    }));
+    (0, fixtures_1.test)("falls back to default theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        // Default height should be 300px  
+        yield (0, fixtures_1.expect)(iframe).toHaveCSS("height", "300px");
+        // Should have some border (exact value depends on theme)
+        const borderStyle = yield iframe.evaluate(el => getComputedStyle(el).border);
+        (0, fixtures_1.expect)(borderStyle).toBeTruthy();
+        // Width might not be 100% in test environment but should have a computed value
+        const widthStyle = yield iframe.evaluate(el => getComputedStyle(el).width);
+        (0, fixtures_1.expect)(widthStyle).toBeTruthy();
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles no props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        // Should not have src or srcdoc attributes
+        yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("src");
+        yield (0, fixtures_1.expect)(iframe).not.toHaveAttribute("srcdoc");
+    }));
+    (0, fixtures_1.test)("handles invalid URL in src", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame src="not-a-valid-url" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        // The src attribute might be transformed by XMLUI's resource URL handling
+        const srcValue = yield iframe.getAttribute("src");
+        (0, fixtures_1.expect)(srcValue).toContain("not-a-valid-url");
+    }));
+    (0, fixtures_1.test)("handles empty srcdoc", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<IFrame srcdoc="" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("srcdoc", "");
+    }));
+    (0, fixtures_1.test)("handles malformed HTML in srcdoc", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const malformedHtml = "<div><p>Unclosed tags<span>More content";
+        yield initTestBed(`<IFrame srcdoc="${malformedHtml}" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("srcdoc", malformedHtml);
+    }));
+    (0, fixtures_1.test)("handles very long sandbox value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const longSandbox = Array(100).fill("allow-scripts").join(" ");
+        yield initTestBed(`<IFrame sandbox="${longSandbox}" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toHaveAttribute("sandbox", longSandbox);
+    }));
+    (0, fixtures_1.test)("maintains performance with multiple iframes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Fragment>
+        <IFrame srcdoc="<h1>Frame 1</h1>" testId="iframe1" />
+        <IFrame srcdoc="<h1>Frame 2</h1>" testId="iframe2" />
+        <IFrame srcdoc="<h1>Frame 3</h1>" testId="iframe3" />
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe2")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("iframe3")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles data URLs in src", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const dataUrl = "data:text/html,<h1>Data URL Content</h1>";
+        yield initTestBed(`<IFrame src="${dataUrl}" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        // The URL might be transformed by XMLUI's resource URL handling
+        const srcValue = yield iframe.getAttribute("src");
+        (0, fixtures_1.expect)(srcValue).toContain("data:text/html");
+    }));
+    (0, fixtures_1.test)("handles blob URLs in src", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        // Blob URLs are typically generated by JavaScript, so we test with a mock
+        const blobUrl = "blob:https://example.com/12345678-1234-1234-1234-123456789abc";
+        yield initTestBed(`<IFrame src="${blobUrl}" testId="iframe" />`);
+        const iframe = page.getByTestId("iframe");
+        yield (0, fixtures_1.expect)(iframe).toBeVisible();
+        // The URL might be transformed by XMLUI's resource URL handling
+        const srcValue = yield iframe.getAttribute("src");
+        (0, fixtures_1.expect)(srcValue).toContain("blob:https://example.com");
+    }));
+});
+// =============================================================================
+// API TESTS
+// =============================================================================
+fixtures_1.test.describe("APIs", () => {
+    (0, fixtures_1.test)("postMessage sends message to iframe content window", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          srcdoc="
+            <script>
+              window.addEventListener('message', (event) => {
+                window.parent.postMessage({ received: event.data }, '*');
+              });
+            </script>
+            <h1>Test IFrame</h1>
+          "
+          testId="iframe" />
+        <Button 
+          onClick="
+            testIframe.postMessage({ type: 'test', message: 'Hello IFrame' }, '*');
+            testState = 'message-sent';
+          " 
+          label="Send Message" 
+          testId="sendButton" />
+      </Fragment>
+    `);
+        yield page.getByTestId("sendButton").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("message-sent");
+    }));
+    (0, fixtures_1.test)("postMessage with custom target origin", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          srcdoc="<h1>Test IFrame</h1>"
+          testId="iframe" />
+        <Button 
+          onClick="
+            testIframe.postMessage('test-message', 'https://example.com');
+            testState = 'message-with-origin-sent';
+          " 
+          label="Send Message with Origin" 
+          testId="sendButton" />
+      </Fragment>
+    `);
+        yield page.getByTestId("sendButton").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("message-with-origin-sent");
+    }));
+    (0, fixtures_1.test)("getContentWindow returns content window object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          srcdoc="<h1>Test Content</h1>"
+          testId="iframe" />
+        <Button 
+          onClick="
+            const contentWindow = testIframe.getContentWindow();
+            testState = {
+              hasContentWindow: contentWindow !== null,
+              isWindow: contentWindow && typeof contentWindow.postMessage === 'function'
+            };
+          " 
+          label="Get Content Window" 
+          testId="getWindowButton" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getWindowButton").click();
+        const result = yield testStateDriver.testState();
+        (0, fixtures_1.expect)(result.hasContentWindow).toBe(true);
+        (0, fixtures_1.expect)(result.isWindow).toBe(true);
+    }));
+    (0, fixtures_1.test)("getContentWindow returns null when iframe not loaded", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          src="about:blank"
+          testId="iframe" />
+        <Button 
+          onClick="
+            const contentWindow = testIframe.getContentWindow();
+            testState = { isNull: contentWindow === null };
+          " 
+          label="Get Content Window" 
+          testId="getWindowButton" />
+      </Fragment>
+    `);
+        // Click immediately before iframe might be fully loaded
+        yield page.getByTestId("getWindowButton").click();
+        const result = yield testStateDriver.testState();
+        // Content window should exist even for about:blank
+        (0, fixtures_1.expect)(result.isNull).toBe(false);
+    }));
+    (0, fixtures_1.test)("getContentDocument returns content document object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          srcdoc="<html><head><title>Test Document</title></head><body><h1>Test Content</h1></body></html>"
+          testId="iframe" />
+        <Button 
+          onClick="
+            const contentDoc = testIframe.getContentDocument();
+            testState = {
+              hasContentDocument: contentDoc !== null,
+              documentTitle: contentDoc ? contentDoc.title : null,
+              isDocument: contentDoc && typeof contentDoc.querySelector === 'function'
+            };
+          " 
+          label="Get Content Document" 
+          testId="getDocButton" />
+      </Fragment>
+    `);
+        // Wait for iframe to load
+        yield page.waitForTimeout(100);
+        yield page.getByTestId("getDocButton").click();
+        const result = yield testStateDriver.testState();
+        (0, fixtures_1.expect)(result.hasContentDocument).toBe(true);
+        (0, fixtures_1.expect)(result.documentTitle).toBe("Test Document");
+        (0, fixtures_1.expect)(result.isDocument).toBe(true);
+    }));
+    (0, fixtures_1.test)("APIs work with same-origin srcdoc content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <IFrame 
+          id="testIframe"
+          srcdoc="
+            <html>
+              <head><title>API Test Document</title></head>
+              <body>
+                <h1>API Test Content</h1>
+                <script>
+                  window.addEventListener('message', (event) => \\{
+                    if (event.data.type === 'ping') \\{
+                      window.parent.postMessage(\\{ type: 'pong', data: event.data.data }, '*');
+                    }
+                  });
+                </script>
+              </body>
+            </html>
+          "
+          testId="iframe" />
+        <Button 
+          onClick="
+            const contentWindow = testIframe.getContentWindow();
+            const contentDoc = testIframe.getContentDocument();
+            testIframe.postMessage({ type: 'ping', data: 'test-data' }, '*');
+            testState = {
+              hasWindow: contentWindow !== null,
+              hasDocument: contentDoc !== null,
+              documentTitle: contentDoc ? contentDoc.title : null,
+              messageSent: true
+            };
+          " 
+          label="Test All APIs" 
+          testId="testAllButton" />
+      </Fragment>
+    `);
+        // Wait for iframe to load
+        yield page.waitForTimeout(100);
+        yield page.getByTestId("testAllButton").click();
+        const result = yield testStateDriver.testState();
+        (0, fixtures_1.expect)(result.hasWindow).toBe(true);
+        (0, fixtures_1.expect)(result.hasDocument).toBe(true);
+        (0, fixtures_1.expect)(result.documentTitle).toBe("API Test Document");
+        (0, fixtures_1.expect)(result.messageSent).toBe(true);
+    }));
+});

package/dist/scripts/src/components/Icon/ArrowDropDown.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowDropDown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowDropDown_module_scss_1 = __importDefault(require("./ArrowDropDown.module.scss"));
+const arrow_dropdown_svg_react_1 = __importDefault(require("./svg/arrow-dropdown.svg?react"));
+const ArrowDropDown = (props) => ((0, jsx_runtime_1.jsx)(arrow_dropdown_svg_react_1.default, Object.assign({ className: ArrowDropDown_module_scss_1.default.arrowDropDown }, props)));
+exports.ArrowDropDown = ArrowDropDown;

package/dist/scripts/src/components/Icon/ArrowDropUp.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowDropUp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowDropUp_module_scss_1 = __importDefault(require("./ArrowDropUp.module.scss"));
+const arrow_up_svg_react_1 = __importDefault(require("./svg/arrow-up.svg?react"));
+const ArrowDropUp = (props) => ((0, jsx_runtime_1.jsx)(arrow_up_svg_react_1.default, Object.assign({ className: ArrowDropUp_module_scss_1.default.arrowDropUp }, props)));
+exports.ArrowDropUp = ArrowDropUp;

package/dist/scripts/src/components/Icon/ArrowLeft.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowLeft = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowLeft_module_scss_1 = __importDefault(require("./ArrowLeft.module.scss"));
+const arrow_left_svg_react_1 = __importDefault(require("./svg/arrow-left.svg?react"));
+const ArrowLeft = (props) => ((0, jsx_runtime_1.jsx)(arrow_left_svg_react_1.default, Object.assign({ className: ArrowLeft_module_scss_1.default.arrowLeft }, props)));
+exports.ArrowLeft = ArrowLeft;

package/dist/scripts/src/components/Icon/ArrowRight.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowRight_module_scss_1 = __importDefault(require("./ArrowRight.module.scss"));
+const arrow_right_svg_react_1 = __importDefault(require("./svg/arrow-right.svg?react"));
+const ArrowRight = (props) => ((0, jsx_runtime_1.jsx)(arrow_right_svg_react_1.default, Object.assign({ className: ArrowRight_module_scss_1.default.arrowRight }, props)));
+exports.ArrowRight = ArrowRight;

package/dist/scripts/src/components/Icon/ChevronDownIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronDownIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fi_1 = require("react-icons/fi");
+const ChevronDownIcon = (props) => (0, jsx_runtime_1.jsx)(fi_1.FiChevronDown, Object.assign({}, props));
+exports.ChevronDownIcon = ChevronDownIcon;