xmlui 0.11.3 → 0.11.6

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

@@ -1,101 +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.expandableItemComponentRenderer = exports.ExpandableItemMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ExpandableItem_module_scss_1 = __importDefault(require("./ExpandableItem.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const abstractions_1 = require("../abstractions");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-const ExpandableItemNative_1 = require("./ExpandableItemNative");
-const COMP = "ExpandableItem";
-exports.ExpandableItemMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`ExpandableItem` creates expandable/collapsible section, similar to the HTML " +
-        "details disclosure element. When the user clicks on the `summary` the content " +
-        "expands or collapses.",
-    props: {
-        summary: (0, metadata_helpers_1.dComponent)("The summary content that is always visible and acts as the trigger."),
-        initiallyExpanded: {
-            description: "Determines if the component is initially expanded when rendered.",
-            valueType: "boolean",
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.initiallyExpanded,
-        },
-        enabled: {
-            description: "When true, the expandable item can be opened and closed. When false, it cannot be toggled.",
-            valueType: "boolean",
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.enabled,
-        },
-        iconCollapsed: {
-            description: "The icon to display when the item is collapsed.",
-            valueType: "string",
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.iconCollapsed,
-        },
-        iconExpanded: {
-            description: "The icon to display when the item is expanded.",
-            valueType: "string",
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.iconExpanded,
-        },
-        iconPosition: {
-            description: "Determines the position of the icon (start or end).",
-            valueType: "string",
-            availableValues: abstractions_1.iconPositionMd,
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.iconPosition,
-        },
-        withSwitch: {
-            description: "When true, a switch is used instead of an icon to toggle the expanded state.",
-            valueType: "boolean",
-            defaultValue: ExpandableItemNative_1.defaultExpandableItemProps.withSwitch,
-        },
-    },
-    events: {
-        expandedChange: (0, metadata_helpers_1.d)(`This event fires when the expandable item is expanded or collapsed. It provides a boolean value indicating the new state.`),
-    },
-    apis: {
-        expand: {
-            description: `This method expands the item.`,
-            signature: "expand(): void",
-        },
-        collapse: {
-            description: `This method collapses the item.`,
-            signature: "collapse(): void",
-        },
-        toggle: {
-            description: `This method toggles the item's expanded state.`,
-            signature: "toggle(): void",
-        },
-        isExpanded: {
-            description: `This method returns a boolean indicating whether the item is currently expanded.`,
-            signature: "isExpanded(): boolean",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ExpandableItem_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "transparent",
-        [`color-${COMP}`]: "$textColor-primary",
-        [`color-${COMP}--disabled`]: "$textColor--disabled",
-        [`fontFamily-${COMP}`]: "$fontFamily",
-        [`borderColor-${COMP}`]: "$borderColor",
-        [`borderWidth-${COMP}`]: "0",
-        [`borderBottomWidth-${COMP}`]: "1px",
-        [`borderStyle-${COMP}`]: "solid",
-        [`borderRadius-${COMP}`]: "0",
-        [`paddingTop-${COMP}`]: "$space-2",
-        [`paddingBottom-${COMP}`]: "$space-2",
-        [`paddingLeft-${COMP}`]: "$space-0",
-        [`paddingRight-${COMP}`]: "$space-0",
-        [`gap-${COMP}`]: "$space-2",
-        [`paddingLeft-content-${COMP}`]: "$space-3",
-        [`paddingRight-content-${COMP}`]: "$space-3",
-        [`paddingVertical-content-${COMP}`]: "$space-2",
-        [`transition-${COMP}`]: "0.2s ease",
-    },
-});
-exports.expandableItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ExpandableItemMd, ({ node, renderChild, lookupEventHandler, registerComponentApi, extractValue, className }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ((0, jsx_runtime_1.jsx)(ExpandableItemNative_1.ExpandableItem, { summary: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.summary), initiallyExpanded: extractValue.asOptionalBoolean(node.props.initiallyExpanded, ExpandableItemNative_1.defaultExpandableItemProps.initiallyExpanded), enabled: extractValue.asOptionalBoolean(node.props.enabled, ExpandableItemNative_1.defaultExpandableItemProps.enabled), iconExpanded: (_c = extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.iconExpanded)) !== null && _c !== void 0 ? _c : ExpandableItemNative_1.defaultExpandableItemProps.iconExpanded, iconCollapsed: (_e = extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconCollapsed)) !== null && _e !== void 0 ? _e : ExpandableItemNative_1.defaultExpandableItemProps.iconCollapsed, iconPosition: (_f = extractValue.asOptionalString(node.props.iconPosition)) !== null && _f !== void 0 ? _f : ExpandableItemNative_1.defaultExpandableItemProps.iconPosition, withSwitch: extractValue.asOptionalBoolean(node.props.withSwitch, ExpandableItemNative_1.defaultExpandableItemProps.withSwitch), onExpandedChange: lookupEventHandler("expandedChange"), className: className, registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
-});

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

@@ -1,435 +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 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, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Test Summary");
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible(); // Initially collapsed
-}));
-(0, fixtures_1.test)("component displays summary content correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="My Summary">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("My Summary");
-    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles initiallyExpanded prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" initiallyExpanded="true">Content here</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Content here");
-}));
-(0, fixtures_1.test)("component toggles on summary click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Click me">Hidden content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Initially collapsed
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-    // Click to expand
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Click to collapse
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component displays correct icons for collapsed and expanded states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Initially collapsed - should show chevronright icon
-    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
-    // Expand and check icon changes
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles custom icons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`
-    <ExpandableItem 
-      summary="Test" 
-      iconCollapsed="plus" 
-      iconExpanded="minus">
-      Content
-    </ExpandableItem>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
-    // Expand to see expanded icon
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
-}));
-(0, fixtures_1.test)("component supports iconPosition prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" iconPosition="start">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const className = yield driver.getSummary().getAttribute('class');
-    (0, fixtures_1.expect)(className).toMatch(/iconStart/);
-    yield (0, fixtures_1.expect)(driver.getIcon()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles withSwitch prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Check that the switch container (aria-hidden div) is present
-    const switchContainer = driver.getSummary().locator('[aria-hidden="true"]');
-    yield (0, fixtures_1.expect)(switchContainer).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getIcon()).not.toBeVisible();
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Summary should have proper button role and ARIA attributes
-    yield (0, fixtures_1.expect)(summary).toHaveRole("button");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-disabled", "false");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("tabindex", "0");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-controls");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("id");
-}));
-(0, fixtures_1.test)("component ARIA attributes update with expansion state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test Summary">Content here</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Initially collapsed
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
-    // Expand
-    yield summary.click();
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "true");
-    // Collapse
-    yield summary.click();
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-expanded", "false");
-}));
-(0, fixtures_1.test)("component content region has correct ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test Summary" initiallyExpanded="true">Content here</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    const content = driver.getContent();
-    // Content should have region role and proper labeling
-    yield (0, fixtures_1.expect)(content).toHaveRole("region");
-    yield (0, fixtures_1.expect)(content).toHaveAttribute("aria-labelledby");
-    yield (0, fixtures_1.expect)(content).toHaveAttribute("id");
-    // Verify ARIA relationship between summary and content
-    const summaryId = yield summary.getAttribute("id");
-    const contentAriaLabelledBy = yield content.getAttribute("aria-labelledby");
-    const summaryAriaControls = yield summary.getAttribute("aria-controls");
-    const contentId = yield content.getAttribute("id");
-    (0, fixtures_1.expect)(contentAriaLabelledBy).toBe(summaryId);
-    (0, fixtures_1.expect)(summaryAriaControls).toBe(contentId);
-}));
-(0, fixtures_1.test)("component is keyboard accessible with Enter key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Focus the summary button
-    yield summary.focus();
-    yield (0, fixtures_1.expect)(summary).toBeFocused();
-    // Press Enter to toggle
-    yield summary.press("Enter");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Press Enter again to collapse
-    yield summary.press("Enter");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Focus the summary button
-    yield summary.focus();
-    yield (0, fixtures_1.expect)(summary).toBeFocused();
-    // Press Space to toggle
-    yield summary.press(" ");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Press Space again to collapse
-    yield summary.press(" ");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component maintains focus after keyboard toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Focus and expand with keyboard
-    yield summary.focus();
-    yield (0, fixtures_1.expect)(summary).toBeFocused();
-    yield summary.press("Enter");
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    yield (0, fixtures_1.expect)(summary).toBeFocused(); // Focus should remain
-    // Collapse with keyboard
-    yield summary.press("Space");
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-    yield (0, fixtures_1.expect)(summary).toBeFocused(); // Focus should still remain
-}));
-(0, fixtures_1.test)("component is focusable only when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Disabled component should not be focusable (no tabindex attribute)
-    yield (0, fixtures_1.expect)(summary).not.toHaveAttribute("tabindex");
-    yield (0, fixtures_1.expect)(summary).toHaveAttribute("aria-disabled", "true");
-}));
-(0, fixtures_1.test)("component keyboard interaction works with switch variant", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    const { testStateDriver } = yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true" onExpandedChange="arg => testState = arg">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const summary = driver.getSummary();
-    // Focus and activate with Enter
-    yield summary.focus();
-    yield summary.press("Enter");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Deactivate with Space
-    yield summary.press(" ");
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component icon/switch container is hidden from screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Icon container should be aria-hidden
-    const iconContainer = driver.getSummary().locator('[class*="icon"]');
-    yield (0, fixtures_1.expect)(iconContainer).toHaveAttribute("aria-hidden", "true");
-}));
-(0, fixtures_1.test)("component supports screen reader navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Accessible Summary">Screen reader content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Summary should be properly announced as a button
-    const summary = driver.getSummary();
-    yield (0, fixtures_1.expect)(summary).toHaveRole("button");
-    yield summary.click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component applies theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {
-        testThemeVars: { "backgroundColor-ExpandableItem": "rgb(255, 0, 0)" }
-    });
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 0, 0)");
-}));
-(0, fixtures_1.test)("component applies disabled visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const className = yield driver.component.getAttribute('class');
-    (0, fixtures_1.expect)(className).toMatch(/disabled/);
-}));
-(0, fixtures_1.test)("component applies expanded visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" initiallyExpanded="true">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Instead of checking for CSS class, check that content is visible when initially expanded
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Content");
-}));
-(0, fixtures_1.test)("component applies withSwitch visual state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const className = yield driver.component.getAttribute('class');
-    (0, fixtures_1.expect)(className).toMatch(/withSwitch/);
-}));
-(0, fixtures_1.test)("component handles icon position styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" iconPosition="end">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    const className = yield driver.getSummary().getAttribute('class');
-    (0, fixtures_1.expect)(className).toMatch(/iconEnd/);
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem>Content without summary</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles empty summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test"></ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles special characters in summary", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test with émojis 🚀 & quotes">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Test with émojis 🚀 & quotes");
-}));
-(0, fixtures_1.test)("component handles complex summary content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`
-    <ExpandableItem summary="Complex Summary">
-      Content here
-    </ExpandableItem>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.getSummary()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getSummaryContent()).toContainText("Complex Summary");
-}));
-(0, fixtures_1.test)("component handles disabled state interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test" enabled="false">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Should not expand when disabled - use force click since the element is aria-disabled
-    yield driver.getSummary().click({ force: true });
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    const { testStateDriver } = yield initTestBed(`
-    <ExpandableItem 
-      summary="Test" 
-      onExpandedChange="testState = (testState || 0) + 1">
-      Content
-    </ExpandableItem>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    // Expand
-    yield driver.getSummary().click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
-    // Collapse
-    yield driver.getSummary().click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-}));
-(0, fixtures_1.test)("component handles rapid toggling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`<ExpandableItem summary="Test">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // Rapid clicks
-    yield driver.getSummary().click();
-    yield driver.getSummary().click();
-    yield driver.getSummary().click();
-    // Should end up collapsed (odd number of clicks)
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles large content efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    const largeContent = "Very long content ".repeat(100);
-    yield initTestBed(`<ExpandableItem summary="Test">${largeContent}</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Very long content");
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works in layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`
-    <VStack gap="2">
-      <ExpandableItem summary="First Item">First content</ExpandableItem>
-      <ExpandableItem summary="Second Item">Second content</ExpandableItem>
-    </VStack>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // Use first() to get the first ExpandableItem's summary content
-    yield (0, fixtures_1.expect)(driver.getSummaryContent().first()).toContainText("First Item");
-}));
-(0, fixtures_1.test)("component API methods work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <ExpandableItem id="expandable" summary="Test">Content</ExpandableItem>
-      <Button testId="expandBtn" onClick="expandable.expand()">Expand</Button>
-      <Button testId="collapseBtn" onClick="expandable.collapse()">Collapse</Button>
-      <Button testId="toggleBtn" onClick="expandable.toggle()">Toggle</Button>
-      <Button testId="checkBtn" onClick="testState = expandable.isExpanded()">Check</Button>
-    </Fragment>
-  `, {});
-    const { testStateDriver } = yield initTestBed(`
-    <Fragment>
-      <ExpandableItem id="expandable" summary="Test">Content</ExpandableItem>
-      <Button testId="expandBtn" onClick="expandable.expand()">Expand</Button>
-      <Button testId="collapseBtn" onClick="expandable.collapse()">Collapse</Button>
-      <Button testId="toggleBtn" onClick="expandable.toggle()">Toggle</Button>
-      <Button testId="checkBtn" onClick="testState = expandable.isExpanded()">Check</Button>
-    </Fragment>
-  `, {});
-    // Test expand API
-    yield page.getByTestId("expandBtn").click();
-    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).toBeVisible();
-    // Test isExpanded API
-    yield page.getByTestId("checkBtn").click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    // Test collapse API
-    yield page.getByTestId("collapseBtn").click();
-    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).not.toBeVisible();
-    // Test toggle API
-    yield page.getByTestId("toggleBtn").click();
-    yield (0, fixtures_1.expect)(page.locator('[class*="_content_"]')).toBeVisible();
-}));
-(0, fixtures_1.test)("component works with forms", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`
-    <Form>
-      <ExpandableItem summary="Advanced Options">
-        <FormItem label="Advanced Setting">
-          <TextBox name="advanced" />
-        </FormItem>
-      </ExpandableItem>
-    </Form>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Advanced Setting");
-}));
-(0, fixtures_1.test)("component event handlers work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    const { testStateDriver } = yield initTestBed(`
-    <ExpandableItem 
-      summary="Test" 
-      onExpandedChange="arg =>testState = arg">
-      Content
-    </ExpandableItem>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    // Click to expand - should set testState to true
-    yield driver.getSummary().click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    // Click to collapse - should set testState to false
-    yield driver.getSummary().click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(false);
-}));
-(0, fixtures_1.test)("component works with switch variant", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver, page }) {
-    yield initTestBed(`<ExpandableItem summary="Test" withSwitch="true">Content</ExpandableItem>`, {});
-    const driver = yield createExpandableItemDriver();
-    // With switch variant, users should click the summary (button) to toggle
-    // The switch itself is decorative and aria-hidden
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Click the summary again to toggle back
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component works in nested scenarios", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createExpandableItemDriver }) {
-    yield initTestBed(`
-    <ExpandableItem summary="Parent">
-      <ExpandableItem summary="Child">
-        Nested content
-      </ExpandableItem>
-    </ExpandableItem>
-  `, {});
-    const driver = yield createExpandableItemDriver();
-    // Expand parent
-    yield driver.getSummary().click();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-    // Should see nested expandable item
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("Child");
-}));

package/dist/scripts/src/components/ExpandableItem/ExpandableItemNative.js

@@ -1,109 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandableItem = exports.defaultExpandableItemProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const ExpandableItem_module_scss_1 = __importDefault(require("./ExpandableItem.module.scss"));
-const IconNative_1 = require("../Icon/IconNative");
-const Toggle_1 = require("../Toggle/Toggle");
-exports.defaultExpandableItemProps = {
-    initiallyExpanded: false,
-    enabled: true,
-    iconExpanded: "chevrondown",
-    iconCollapsed: "chevronright",
-    iconPosition: "end",
-    withSwitch: false,
-};
-exports.ExpandableItem = (0, react_1.forwardRef)(function ExpandableItem(_a, ref) {
-    var { summary, children, className, style, initiallyExpanded = exports.defaultExpandableItemProps.initiallyExpanded, enabled = exports.defaultExpandableItemProps.enabled, iconExpanded = exports.defaultExpandableItemProps.iconExpanded, iconCollapsed = exports.defaultExpandableItemProps.iconCollapsed, iconPosition = exports.defaultExpandableItemProps.iconPosition, withSwitch = exports.defaultExpandableItemProps.withSwitch, onExpandedChange, registerComponentApi } = _a, rest = __rest(_a, ["summary", "children", "className", "style", "initiallyExpanded", "enabled", "iconExpanded", "iconCollapsed", "iconPosition", "withSwitch", "onExpandedChange", "registerComponentApi"]);
-    const [isOpen, setIsOpen] = (0, react_2.useState)(initiallyExpanded);
-    const generatedId = (0, react_1.useId)();
-    const summaryId = `${generatedId}-summary`;
-    const contentId = `${generatedId}-content`;
-    const toggleOpen = (0, react_1.useCallback)(() => {
-        if (!enabled)
-            return;
-        const newValue = !isOpen;
-        setIsOpen(newValue);
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newValue);
-    }, [enabled, isOpen, onExpandedChange]);
-    // Register component API
-    const expand = (0, react_1.useCallback)(() => {
-        if (!isOpen && enabled) {
-            setIsOpen(true);
-            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(true);
-        }
-    }, [enabled, isOpen, onExpandedChange]);
-    const collapse = (0, react_1.useCallback)(() => {
-        if (isOpen && enabled) {
-            setIsOpen(false);
-            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(false);
-        }
-    }, [enabled, isOpen, onExpandedChange]);
-    const toggle = (0, react_1.useCallback)(() => {
-        toggleOpen();
-    }, [toggleOpen]);
-    const getIsExpanded = (0, react_1.useCallback)(() => isOpen, [isOpen]);
-    // Handle switch value change
-    const handleSwitchChange = (0, react_1.useCallback)((value) => {
-        if (!enabled)
-            return;
-        setIsOpen(value);
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(value);
-    }, [enabled, onExpandedChange]);
-    // Register these functions with the component API using useEffect
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            expand,
-            collapse,
-            toggle,
-            isExpanded: getIsExpanded,
-        });
-    }, [registerComponentApi, expand, collapse, toggle, getIsExpanded]);
-    // Handler for clicking on the summary when using a switch
-    const handleSummaryClick = (0, react_1.useCallback)(() => {
-        if (!enabled || !withSwitch)
-            return;
-        const newValue = !isOpen;
-        setIsOpen(newValue);
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(newValue);
-    }, [enabled, withSwitch, isOpen, onExpandedChange]);
-    // Handle keyboard events for accessibility
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (!enabled)
-            return;
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            if (withSwitch) {
-                handleSwitchChange(!isOpen);
-            }
-            else {
-                toggleOpen();
-            }
-        }
-    }, [enabled, withSwitch, isOpen, handleSwitchChange, toggleOpen]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.expandableItem, className, {
-            [ExpandableItem_module_scss_1.default.open]: isOpen,
-            [ExpandableItem_module_scss_1.default.disabled]: !enabled,
-            [ExpandableItem_module_scss_1.default.withSwitch]: withSwitch,
-        }), style: style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ExpandableItem_module_scss_1.default.summary, {
-                    [ExpandableItem_module_scss_1.default.iconStart]: iconPosition === "start",
-                    [ExpandableItem_module_scss_1.default.iconEnd]: iconPosition === "end",
-                }), onClick: enabled ? (withSwitch ? handleSummaryClick : toggleOpen) : undefined, onKeyDown: handleKeyDown, tabIndex: enabled ? 0 : undefined, role: "button", "aria-expanded": isOpen, "aria-controls": contentId, "aria-disabled": !enabled, id: summaryId, children: [(0, jsx_runtime_1.jsx)("div", { className: withSwitch ? ExpandableItem_module_scss_1.default.switch : ExpandableItem_module_scss_1.default.icon, "aria-hidden": "true", children: withSwitch ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "switch", value: isOpen, enabled: enabled, onDidChange: handleSwitchChange })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: isOpen ? iconExpanded : iconCollapsed, fallback: isOpen ? "chevrondown" : "chevronright" })) }), (0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.summaryContent, children: summary })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: ExpandableItem_module_scss_1.default.content, role: "region", "aria-labelledby": summaryId, id: contentId, children: children }))] })));
-});