xmlui 0.11.3 → 0.11.6

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

@@ -1,414 +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
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneChangerButton />`);
-        yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("displays light-to-dark icon in light mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        // Verify we're in light mode
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        const button = page.getByRole("button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Check that the icon exists within the button
-        const icon = button.locator("svg, img, [data-testid*='icon']").first();
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("displays dark-to-light icon in dark mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        // Switch to dark mode first
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        // Verify the icon changes (should be different from light mode)
-        const icon = button.locator("svg, img, [data-testid*='icon']").first();
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("switches from light to dark mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        // Initially in light mode
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // Click to switch to dark mode
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-    (0, fixtures_1.test)("switches from dark to light mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        // Switch to dark mode first
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        // Click again to switch back to light mode
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-    }));
-    (0, fixtures_1.test)("toggles between modes multiple times", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        // Initial state: light
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // First toggle: light -> dark
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        // Second toggle: dark -> light
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // Third toggle: light -> dark
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-    // =============================================================================
-    // CLICK EVENT TESTS
-    // =============================================================================
-    fixtures_1.test.describe("click event", () => {
-        (0, fixtures_1.test)("fires click event with 'dark' when switching to dark mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <App>
-          <ToneChangerButton onClick="arg => testState = arg" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            // Initially in light mode
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-            // Click to switch to dark mode
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("dark");
-        }));
-        (0, fixtures_1.test)("fires click event with 'light' when switching to light mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            const { testStateDriver } = yield initTestBed(`
-        <App>
-          <ToneChangerButton onClick="arg => testState = arg" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            // Switch to dark mode first
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-            // Click again to switch to light mode
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("light");
-        }));
-        (0, fixtures_1.test)("fires click event on each toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            // TODO: Investigate why the onClick event handler is not being called
-            const { testStateDriver } = yield initTestBed(`
-        <App>
-          <ToneChangerButton onClick="testState = testState == null ? 1 : testState + 1" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            // First click
-            yield button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
-            // Second click
-            yield button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-            // Third click
-            yield button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(3);
-        }));
-    });
-    // =============================================================================
-    // ICON PROPERTY TESTS
-    // =============================================================================
-    fixtures_1.test.describe("icon properties", () => {
-        (0, fixtures_1.test)("uses custom lightToDarkIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton lightToDarkIcon="custom-light-icon" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            // Verify we're in light mode and icon is visible
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-            const button = page.getByRole("button");
-            const icon = button.locator("svg, img, [data-testid*='icon']").first();
-            yield (0, fixtures_1.expect)(icon).toBeVisible();
-        }));
-        (0, fixtures_1.test)("uses custom darkToLightIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton darkToLightIcon="custom-dark-icon" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            // Switch to dark mode to see dark-to-light icon
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-            const icon = button.locator("svg, img, [data-testid*='icon']").first();
-            yield (0, fixtures_1.expect)(icon).toBeVisible();
-        }));
-        (0, fixtures_1.test)("handles null lightToDarkIcon gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton lightToDarkIcon="{null}" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            // Should still render and be functional
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-            const button = page.getByRole("button");
-            yield (0, fixtures_1.expect)(button).toBeVisible();
-            // Should still be able to toggle
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        }));
-        (0, fixtures_1.test)("handles null darkToLightIcon gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton darkToLightIcon="{null}" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            // Switch to dark mode
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-            // Should still render and be functional
-            yield (0, fixtures_1.expect)(button).toBeVisible();
-            // Should still be able to toggle back
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        }));
-        (0, fixtures_1.test)("handles undefined icon properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton lightToDarkIcon="{undefined}" darkToLightIcon="{undefined}" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            yield (0, fixtures_1.expect)(button).toBeVisible();
-            // Should still function for toggling
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        }));
-        (0, fixtures_1.test)("handles non-string icon properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton lightToDarkIcon="{123}" darkToLightIcon="{true}" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            yield (0, fixtures_1.expect)(button).toBeVisible();
-            // Should still function for toggling despite invalid icon values
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        }));
-        (0, fixtures_1.test)("handles very long unicode characters in icon names", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <App>
-          <ToneChangerButton lightToDarkIcon="👨‍👩‍👧‍👦🌟✨" darkToLightIcon="中文图标名称" />
-          <Text testId="theme-state">{activeThemeTone}</Text>
-        </App>
-      `);
-            const button = page.getByRole("button");
-            yield (0, fixtures_1.expect)(button).toBeVisible();
-            // Should still function despite unusual icon names
-            yield button.click();
-            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        }));
-    });
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has button role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneChangerButton />`);
-        const button = page.getByRole("button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-    }));
-    (0, fixtures_1.test)("is keyboard accessible with Enter key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        yield button.focus();
-        yield (0, fixtures_1.expect)(button).toBeFocused();
-        // Initially in light mode
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // Press Enter to toggle
-        yield page.keyboard.press("Enter");
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-    (0, fixtures_1.test)("is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        yield button.focus();
-        yield (0, fixtures_1.expect)(button).toBeFocused();
-        // Initially in light mode
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // Press Space to toggle
-        yield page.keyboard.press("Space");
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-    (0, fixtures_1.test)("maintains focus during interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        yield button.focus();
-        yield button.click();
-        // Focus should be maintained after click
-        yield (0, fixtures_1.expect)(button).toBeFocused();
-    }));
-    (0, fixtures_1.test)("is focusable via Tab navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <Button>Before</Button>
-        <ToneChangerButton />
-        <Button>After</Button>
-      </App>
-    `);
-        // Focus the first button
-        yield page.getByRole("button", { name: "Before" }).focus();
-        // Tab to ToneChangerButton
-        yield page.keyboard.press("Tab");
-        const toneButton = page.getByRole("button").nth(1); // ToneChangerButton is the second button
-        yield (0, fixtures_1.expect)(toneButton).toBeFocused();
-        // Tab to the next button
-        yield page.keyboard.press("Tab");
-        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "After" })).toBeFocused();
-    }));
-    (0, fixtures_1.test)("has appropriate ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneChangerButton />`);
-        const button = page.getByRole("button");
-        // Should be focusable (not disabled)
-        yield (0, fixtures_1.expect)(button).not.toBeDisabled();
-        // Should have role button (implicit from getByRole test above)
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-    }));
-});
-// =============================================================================
-// 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(`<ToneChangerButton/>`);
-        const button = page.getByRole("button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works within different container components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <Card>
-          <ToneChangerButton />
-        </Card>
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Should still function normally
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-    (0, fixtures_1.test)("maintains state consistency across multiple instances", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton testId="button1" />
-        <ToneChangerButton testId="button2" />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button1 = page.getByTestId("button1");
-        const button2 = page.getByTestId("button2");
-        // Initially in light mode
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-        // Click first button to switch to dark
-        yield button1.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-        // Click second button to switch back to light
-        yield button2.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-    }));
-    (0, fixtures_1.test)("handles rapid successive clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        // Perform rapid clicks
-        yield button.click();
-        yield button.click();
-        yield button.click();
-        yield button.click();
-        // Should end up in light mode (even number of clicks)
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
-    }));
-    (0, fixtures_1.test)("handles empty string icon properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneChangerButton lightToDarkIcon="" darkToLightIcon="" />
-        <Text testId="theme-state">{activeThemeTone}</Text>
-      </App>
-    `);
-        const button = page.getByRole("button");
-        yield (0, fixtures_1.expect)(button).toBeVisible();
-        // Should still function despite empty icon names
-        yield button.click();
-        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
-    }));
-});

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

@@ -1,51 +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.toneSwitchComponentRenderer = exports.ToneSwitchMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const ToneSwitch_module_scss_1 = __importDefault(require("./ToneSwitch.module.scss"));
-const ToneSwitchNative_1 = require("./ToneSwitchNative");
-const COMP = "ToneSwitch";
-exports.ToneSwitchMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`ToneSwitch` enables the user to switch between light and dark modes using a switch control.",
-    props: {
-        iconLight: {
-            type: "string",
-            description: "Icon to display for light mode",
-            defaultValue: "sun",
-        },
-        iconDark: {
-            type: "string",
-            description: "Icon to display for dark mode",
-            defaultValue: "moon",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ToneSwitch_module_scss_1.default.themeVars),
-    limitThemeVarsToComponent: true,
-    defaultThemeVars: {
-        [`backgroundColor-${COMP}-light`]: "$color-surface-200",
-        [`color-${COMP}-light`]: "$color-text-primary",
-        [`backgroundColor-${COMP}-dark`]: "$color-primary-500",
-        [`color-${COMP}-dark`]: "$color-surface-0",
-        [`borderColor-${COMP}`]: "$color-surface-200",
-        [`borderColor-${COMP}--hover`]: "$color-surface-300",
-        dark: {
-            [`backgroundColor-${COMP}-light`]: "$color-surface-700",
-            [`color-${COMP}-light`]: "$color-text-primary",
-            [`borderColor-${COMP}`]: "$color-surface-600",
-            [`borderColor-${COMP}--hover`]: "$color-surface-500",
-        },
-    },
-});
-/**
- * Define the renderer for the ToneSwitch component
- */
-exports.toneSwitchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ToneSwitchMd, ({ node, extractValue, className }) => {
-    return (0, jsx_runtime_1.jsx)(ToneSwitchNative_1.ToneSwitch, { className: className, iconLight: extractValue(node.props.iconLight), iconDark: extractValue(node.props.iconDark) });
-});

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

@@ -1,89 +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
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("renders in light mode by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneSwitch />
-        <Text>{activeThemeTone}</Text>
-      </App>
-    `);
-        const toggle = page.getByRole("switch");
-        yield (0, fixtures_1.expect)(toggle).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("light")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("toggles to dark mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneSwitch />
-        <Text>{activeThemeTone}</Text>
-      </App>
-    `);
-        const toggle = page.getByRole("switch");
-        yield (0, fixtures_1.expect)(toggle).toBeVisible();
-        yield toggle.click({ force: true });
-        yield (0, fixtures_1.expect)(page.getByText("dark")).toBeVisible();
-        yield (0, fixtures_1.expect)(toggle).toBeChecked();
-    }));
-    (0, fixtures_1.test)("toggles back to light mode when clicked again", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <App>
-        <ToneSwitch />
-        <Text>{activeThemeTone}</Text>
-      </App>
-    `);
-        const toggle = page.getByRole("switch");
-        yield (0, fixtures_1.expect)(toggle).toBeVisible();
-        yield toggle.click({ force: true });
-        yield (0, fixtures_1.expect)(page.getByText("dark")).toBeVisible();
-        yield (0, fixtures_1.expect)(toggle).toBeChecked();
-        yield toggle.click({ force: true });
-        yield (0, fixtures_1.expect)(page.getByText("light")).toBeVisible();
-        yield (0, fixtures_1.expect)(toggle).not.toBeChecked();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("has switch role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneSwitch />`);
-        const toggle = page.getByRole("switch");
-        yield (0, fixtures_1.expect)(toggle).toBeVisible();
-    }));
-    (0, fixtures_1.test)("is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneSwitch />`);
-        const toggle = page.getByRole("switch");
-        yield toggle.focus();
-        yield (0, fixtures_1.expect)(toggle).toBeFocused();
-        yield page.keyboard.press("Space");
-        yield (0, fixtures_1.expect)(toggle).toBeChecked();
-    }));
-    (0, fixtures_1.test)("maintains focus during interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneSwitch />`);
-        const toggle = page.getByRole("switch");
-        yield toggle.focus();
-        yield toggle.click({ force: true });
-        yield (0, fixtures_1.expect)(toggle).toBeFocused();
-    }));
-    (0, fixtures_1.test)("has appropriate aria-checked state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<ToneSwitch />`);
-        const toggle = page.getByRole("switch");
-        yield (0, fixtures_1.expect)(toggle).toHaveAttribute("aria-checked", "false");
-        yield toggle.click({ force: true });
-        yield (0, fixtures_1.expect)(toggle).toHaveAttribute("aria-checked", "true");
-    }));
-});

package/dist/scripts/src/components/ToneSwitch/ToneSwitchNative.js

@@ -1,42 +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.ToneSwitch = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const Toggle_1 = require("../Toggle/Toggle");
-const ToneSwitch_module_scss_1 = __importDefault(require("./ToneSwitch.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-// Default icons for light and dark modes
-const DEFAULT_LIGHT_ICON = "sun";
-const DEFAULT_DARK_ICON = "moon";
-exports.ToneSwitch = (0, react_1.forwardRef)(function ToneSwitch(_a, ref) {
-    var { iconLight = DEFAULT_LIGHT_ICON, iconDark = DEFAULT_DARK_ICON, className } = _a, rest = __rest(_a, ["iconLight", "iconDark", "className"]);
-    const { activeThemeTone, setActiveThemeTone } = (0, ThemeContext_1.useThemes)();
-    //console.log('ToneSwitch render - activeThemeTone:', activeThemeTone); // Debug log
-    const handleChange = (isDark) => {
-        setActiveThemeTone(isDark ? "dark" : "light");
-    };
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, style: { width: "fit-content", display: "inline-block" }, className: className, children: (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { value: activeThemeTone === "dark", onDidChange: handleChange, variant: "switch", style: { width: "fit-content" }, inputRenderer: (contextVars) => {
-                //console.log('ToneSwitch contextVars:', contextVars); // Debug log
-                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(ToneSwitch_module_scss_1.default.iconSwitch, {
-                        [ToneSwitch_module_scss_1.default.light]: !contextVars.$checked,
-                        [ToneSwitch_module_scss_1.default.dark]: contextVars.$checked,
-                    }), children: (0, jsx_runtime_1.jsx)("div", { className: ToneSwitch_module_scss_1.default.iconThumb, children: !contextVars.$checked ? ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: iconLight, fallback: "sun", className: ToneSwitch_module_scss_1.default.icon })) : ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: iconDark, fallback: "moon", className: ToneSwitch_module_scss_1.default.icon })) }) }));
-            } }) })));
-});