xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,196 @@
+"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
+// =============================================================================
+(0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`<CodeBlock />`);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+}));
+(0, fixtures_1.test)("component renders with Text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">const hello = "world";</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("const hello = \"world\";");
+}));
+(0, fixtures_1.test)("component renders with children content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <pre><code>function test() { return 42; }</code></pre>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("function test() { return 42; }");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component has proper semantic structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">const x = 1;</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    // CodeBlock should be identifiable as a code container
+    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/codeBlock/);
+}));
+(0, fixtures_1.test)("component content is accessible to screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">function accessible() { return true; }</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    // Code content should be readable
+    const codeText = yield driver.getCodeText();
+    (0, fixtures_1.expect)(codeText).toContain("function accessible() { return true; }");
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`<CodeBlock />`, {
+        testThemeVars: {
+            "backgroundColor-CodeBlock": "rgb(255, 0, 0)",
+            "borderRadius-CodeBlock": "8px",
+        },
+    });
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", "8px");
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`<CodeBlock/>`);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`<CodeBlock></CodeBlock>`);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles special characters in code", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">const emoji = "🚀"; const unicode = "émojis"; const quotes = '"test"';</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText('const emoji = "🚀"');
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("émojis");
+}));
+(0, fixtures_1.test)("component handles very long code content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    const longCode = "const veryLongVariableName = ".repeat(100) + '"end";';
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">${longCode}</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("end");
+}));
+(0, fixtures_1.test)("component handles invalid meta prop gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock meta="invalid">
+      <Text variant="codefence">test code</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <VStack>
+      <Text>Code example:</Text>
+      <CodeBlock>
+        <Text variant="codefence">const layout = 'test';</Text>
+      </CodeBlock>
+      <Text>End of example</Text>
+    </VStack>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("const layout = 'test';");
+}));
+(0, fixtures_1.test)("component handles multiline code content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">function example() {
+  return "multiline test";
+}</Text>
+    </CodeBlock>
+  `);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("function example()");
+    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("return \"multiline test\"");
+}));
+(0, fixtures_1.test)("component applies global CSS class correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    yield initTestBed(`<CodeBlock />`);
+    const driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/global-codeBlock/);
+}));
+(0, fixtures_1.test)("component maintains consistent styling across themes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+    // Test light theme
+    yield initTestBed(`<CodeBlock />`, {
+        testThemeVars: {
+            "backgroundColor-CodeBlock": "rgb(248, 249, 250)",
+            "border-CodeBlock": "1px solid rgb(208, 215, 222)",
+        },
+    });
+    let driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(248, 249, 250)");
+    // Test dark theme
+    yield initTestBed(`<CodeBlock />`, {
+        testThemeVars: {
+            "backgroundColor-CodeBlock": "rgb(22, 27, 34)",
+            "border-CodeBlock": "1px solid rgb(48, 54, 61)",
+        },
+    });
+    driver = yield createCodeBlockDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(22, 27, 34)");
+}));
+// --- Smoke Tests (maintaining existing)
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+        yield initTestBed(`<CodeBlock />`);
+        yield (0, fixtures_1.expect)((yield createCodeBlockDriver()).component).toBeAttached();
+    }));
+    (0, fixtures_1.test)("component with Text codefence renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
+        yield initTestBed(`
+    <CodeBlock>
+      <Text variant="codefence">
+        This is a test
+      </Text>
+    </CodeBlock>
+    `);
+        yield (0, fixtures_1.expect)((yield createCodeBlockDriver()).component).toBeAttached();
+    }));
+});

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

@@ -52,7 +52,7 @@ exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.colorPickerComponentRenderer = (0, renderers_1.createComponentRenderer)("ColorPicker", exports.ColorPickerMd, ({ node, extractValue, className, state, lookupEventHandler, registerComponentApi, updateState, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const enabled = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.enabled, true);
-    const readonly = extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.readOnly, false);
-    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readonly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus), label: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.label), labelPosition: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.labelPosition), labelBreak: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.labelBreak), labelWidth: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.labelWidth) }));
+    const readOnly = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.readOnly, false);
+    const enabled = extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.enabled, true);
+    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readOnly, readOnly: readOnly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus), label: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.label), labelPosition: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.labelPosition), labelBreak: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.labelBreak), labelWidth: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.labelWidth) }));
 });

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

@@ -0,0 +1,283 @@
+"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
+// =============================================================================
+(0, fixtures_1.test)("component renders with default value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {});
+    // Check that the component is visible
+    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toBeVisible();
+    // Check default color (#000000 - black)
+    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toHaveValue("#000000");
+}));
+(0, fixtures_1.test)("component updates when value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const COLOR_1 = "#ff0000"; // Red
+    const COLOR_2 = "#00ff00"; // Green
+    yield initTestBed(`<ColorPicker initialValue="${COLOR_1}" />`, {});
+    // Check that the initial color is set correctly
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveValue(COLOR_1);
+    // Change the color
+    yield colorInput.fill(COLOR_2); // Green
+    yield (0, fixtures_1.expect)(colorInput).toHaveValue(COLOR_2);
+}));
+(0, fixtures_1.test)("component renders label correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker label="Select Color" />`);
+    // Check that the label is displayed
+    const label = page.locator("label");
+    yield (0, fixtures_1.expect)(label).toBeVisible();
+    yield (0, fixtures_1.expect)(label).toContainText("Select Color");
+}));
+(0, fixtures_1.test)("component handles disabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker enabled="false" />`, {});
+    // Check that the input is disabled
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toBeDisabled();
+}));
+(0, fixtures_1.test)("component handles enabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker enabled="true" />`, {});
+    // Check that the input is disabled
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toBeEnabled();
+}));
+(0, fixtures_1.test)("component fires didChange event when color is selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const COLOR_1 = "#ff0000"; // Red
+    const COLOR_2 = "#00ff00"; // Green
+    const { testStateDriver } = yield initTestBed(`
+    <ColorPicker initialValue="${COLOR_1}" onDidChange="(value) => testState = value" />
+  `);
+    // Change the color
+    yield page.locator("input[type='color']").fill(COLOR_2);
+    // Check that the event fired with the new color value
+    yield fixtures_1.expect.poll(() => testStateDriver.testState()).toEqual(COLOR_2);
+}));
+(0, fixtures_1.test)("component's gotFocus event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <ColorPicker initialValue="#FF0000" onGotFocus="testState = 'focused'" />
+  `);
+    const colorInput = page.locator("input[type='color']");
+    // Focus the input
+    yield colorInput.focus();
+    // Verify the input is focused
+    yield (0, fixtures_1.expect)(colorInput).toBeFocused();
+    // Verify the focus event fired
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker label="Select Color" />`, {});
+    // Check that the input has a valid label association
+    const colorInput = page.locator("input[type='color']");
+    const inputId = yield colorInput.getAttribute("id");
+    const label = page.locator("label");
+    (0, fixtures_1.expect)(inputId).toBeTruthy();
+    yield (0, fixtures_1.expect)(label).toHaveAttribute("for", inputId);
+}));
+(0, fixtures_1.test)("component is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <ColorPicker initialValue="#FF0000" onGotFocus="testState = 'focused'" />
+  `);
+    const colorInput = page.locator("input[type='color']");
+    // Focus the input
+    yield page.keyboard.press("Tab");
+    // Verify the input is focused
+    yield (0, fixtures_1.expect)(colorInput).toBeFocused();
+    // Verify the focus event fired
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component shows different validation states correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // Error state
+    yield initTestBed(`<ColorPicker validationStatus="error" />`, {});
+    let colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/error/);
+    // Warning state
+    yield initTestBed(`<ColorPicker validationStatus="warning" />`, {});
+    colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/warning/);
+    // Valid state
+    yield initTestBed(`<ColorPicker validationStatus="valid" />`, {});
+    colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveClass(/valid/);
+}));
+(0, fixtures_1.test)("component applies backgroundColor-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "backgroundColor-ColorPicker": "rgb(240, 240, 240)",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("background-color", "rgb(240, 240, 240)");
+}));
+(0, fixtures_1.test)("component applies borderColor-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderColor-ColorPicker": "rgb(255, 0, 0)",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(255, 0, 0)");
+}));
+(0, fixtures_1.test)("component applies borderColor-ColorPicker--hover theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderColor-ColorPicker": "rgb(0, 0, 0)",
+            "borderColor-ColorPicker--hover": "rgb(255, 0, 0)",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 0, 0)");
+    yield colorInput.hover();
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(255, 0, 0)");
+}));
+(0, fixtures_1.test)("component applies borderColor-ColorPicker--focus theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderColor-ColorPicker": "rgb(0, 0, 0)",
+            "borderColor-ColorPicker--focus": "rgb(0, 255, 0)",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 0, 0)");
+    yield colorInput.focus();
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 255, 0)");
+}));
+(0, fixtures_1.test)("component applies borderRadius-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderRadius-ColorPicker": "4px",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-radius", "4px");
+}));
+(0, fixtures_1.test)("component applies borderWidth-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderWidth-ColorPicker": "2px",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-width", "2px");
+}));
+(0, fixtures_1.test)("component applies borderStyle-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "borderStyle-ColorPicker": "solid",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-style", "solid");
+}));
+(0, fixtures_1.test)("component applies boxShadow-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker />`, {
+        testThemeVars: {
+            "boxShadow-ColorPicker": "0 2px 4px rgba(0, 0, 0, 0.1)",
+        },
+    });
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 4px 0px");
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles invalid color values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker initialValue="not-a-color" />`);
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveValue("#000000");
+}));
+(0, fixtures_1.test)("component handles required attribute correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker required="true" />`);
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveAttribute("required", "");
+}));
+(0, fixtures_1.test)("component handles readOnly mode correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<ColorPicker readOnly="true" />`);
+    const colorInput = page.locator("input[type='color']");
+    // For ColorPickers the readOnly attribute typically makes the input disabled
+    yield (0, fixtures_1.expect)(colorInput).toBeDisabled();
+}));
+// =============================================================================
+// PERFORMANCE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles rapid value changes efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // Test with initial color
+    yield initTestBed(`
+    <Fragment>
+      <ColorPicker id="colorPicker" initialValue="#ff0000" />
+      <Button testId="toGreen" onClick="colorPicker.setValue('#00ff00')">Change to Green</Button>
+      <Button testId="toBlue" onClick="colorPicker.setValue('#0000ff')">Change to Blue</Button>
+    </Fragment>
+    `);
+    yield page.getByTestId("toGreen").click();
+    yield page.getByTestId("toBlue").click();
+    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toHaveValue("#0000ff", { timeout: 3000 });
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("component works correctly in a form context", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <Form onSubmit="(data) => testState = data.testField" data="{{ testField: '#0000ff' }}">
+      <FormItem type="colorpicker" label="Choose Color" bindTo="testField" />
+    </Form>
+  `);
+    // Check that the color picker is inside the form
+    const formElement = page.locator("form");
+    const colorInput = formElement.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toBeVisible();
+    // Submit the form
+    yield page.locator("[type=submit]").click();
+    // Check that the form was submitted
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("#0000ff");
+}));
+(0, fixtures_1.test)("component value API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <Fragment>
+      <ColorPicker id="colorPicker" initialValue="#ff0000" />
+      <Text testId="colorPickerValue" value="{colorPicker.value}" />
+    </Fragment>
+  `);
+    yield (0, fixtures_1.expect)(page.getByTestId("colorPickerValue")).toHaveText("#ff0000");
+}));
+(0, fixtures_1.test)("component setValue API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <Fragment>
+      <ColorPicker id="colorPicker" initialValue="#ff0000" />
+      <Button onClick="colorPicker.setValue('#00ff00')">Change Color</Button>
+    </Fragment>
+  `);
+    // Test setValue API
+    yield page.getByRole("button", { name: "Change Color" }).click();
+    const colorInput = page.locator("input[type='color']");
+    yield (0, fixtures_1.expect)(colorInput).toHaveValue("#00ff00");
+}));
+(0, fixtures_1.test)("component focus API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <Fragment>
+      <ColorPicker id="colorPicker" onGotFocus="testState = 'focused'" />
+      <Button onClick="colorPicker.focus()">Focus Color Picker</Button>
+    </Fragment>
+  `);
+    const button = page.getByRole("button", { name: "Focus Color Picker" });
+    // Focus the input
+    yield button.click();
+    // Verify the input is focused
+    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toBeFocused();
+    // Verify the focus event fired
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+}));

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.js

@@ -30,15 +30,26 @@ exports.defaultProps = {
     validationStatus: "none",
 };
 exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value = exports.defaultProps.value, autoFocus, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue"]);
+    var { style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue"]);
     const inputRef = (0, react_2.useRef)(null);
+    const [isPending, startTransition] = (0, react_1.useTransition)();
     const updateValue = (0, react_2.useCallback)((value) => {
         updateState({ value });
         onDidChange(value);
     }, [onDidChange, updateState]);
+    const updateValueWithTransition = (0, react_2.useCallback)((value, immediate = false) => {
+        if (immediate) {
+            updateValue(value);
+        }
+        else {
+            startTransition(() => {
+                updateValue(value);
+            });
+        }
+    }, [updateValue, startTransition]);
     const onInputChange = (0, react_2.useCallback)((event) => {
-        updateValue(event.target.value);
-    }, [updateValue]);
+        updateValueWithTransition(event.target.value);
+    }, [updateValueWithTransition]);
     (0, react_1.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
@@ -54,7 +65,7 @@ exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateValue(newValue);
+        updateValueWithTransition(newValue, true); // Immediate update for programmatic changes
     });
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
@@ -67,6 +78,6 @@ exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
                 [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
                 [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
                 [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
-            }), disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, autoFocus: autoFocus, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: inputRef, value: value, tabIndex: tabIndex }) })));
+            }), disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: inputRef, value: value }) })));
 });
 exports.ColorPicker.displayName = "ColorPicker";

package/dist/scripts/src/components/Column/doc-resources/list-component-data.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const data = [
+    {
+        id: 0,
+        name: "Apples",
+        quantity: 5,
+        unit: "pieces",
+        category: "fruits",
+        key: 5,
+    },
+    {
+        id: 1,
+        name: "Bananas",
+        quantity: 6,
+        unit: "pieces",
+        category: "fruits",
+        key: 4,
+    },
+    {
+        id: 2,
+        name: "Carrots",
+        quantity: 100,
+        unit: "grams",
+        category: "vegetables",
+        key: 3,
+    },
+    {
+        id: 3,
+        name: "Spinach",
+        quantity: 1,
+        unit: "bunch",
+        category: "vegetables",
+        key: 2,
+    },
+    {
+        id: 4,
+        name: "Milk",
+        quantity: 10,
+        unit: "liter",
+        category: "dairy",
+        key: 1,
+    },
+    {
+        id: 5,
+        name: "Cheese",
+        quantity: 200,
+        unit: "grams",
+        category: "dairy",
+        key: 0,
+    },
+];
+exports.default = data;

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

@@ -102,7 +102,6 @@ const AutoComplete_1 = require("./AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
-const RadioItem_1 = require("./RadioGroup/RadioItem");
 const InspectButton_1 = require("./InspectButton/InspectButton");
 const NestedApp_1 = require("./NestedApp/NestedApp");
 const AppWithCodeView_1 = require("./NestedApp/AppWithCodeView");
@@ -166,9 +165,13 @@ class ComponentRegistry {
             var _a;
             (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
                 if ("type" in c) {
-                    //we handle just the js components for now
+                    // --- This is a regular component
                     this.registerComponentRenderer(c, extension.namespace);
                 }
+                else if ("compoundComponentDef" in c) {
+                    // --- This is a user defined component
+                    this.registerCompoundComponentRenderer(c, extension.namespace);
+                }
             });
         };
         // --- Registers a renderable component using its renderer function
@@ -350,9 +353,6 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
             this.registerCoreComponent(CarouselItem_1.carouselItemComponentRenderer);
         }
-        if (process.env.VITE_USED_COMPONENTS_RadioItem !== "false") {
-            this.registerCoreComponent(RadioItem_1.radioItemComponentRenderer);
-        }
         if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
             this.registerCoreComponent(FileUploadDropZone_1.fileUploadDropZoneComponentRenderer);
         }
@@ -748,7 +748,7 @@ class ComponentRegistry {
         const component = {
             type: compoundComponentDef.name,
             renderer: (rendererContext) => {
-                return ((0, jsx_runtime_1.jsx)(CompoundComponent_1.CompoundComponent, Object.assign({ api: compoundComponentDef.api, scriptCollected: compoundComponentDef.scriptCollected, compound: compoundComponentDef.component }, rendererContext)));
+                return ((0, jsx_runtime_1.jsx)(CompoundComponent_1.CompoundComponent, Object.assign({ api: compoundComponentDef.api, scriptCollected: compoundComponentDef.component.scriptCollected, compound: compoundComponentDef.component }, rendererContext)));
             },
             isCompoundComponent: true,
             metadata,