xmlui 0.9.76 → 0.9.78

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.76",
+    "version": "0.9.78",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -117,10 +117,11 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     const [tickAnchor, setTickAnchor] = (0, react_1.useState)("middle");
     const [miniMode, setMiniMode] = (0, react_1.useState)(false);
     const [yAxisWidth, setYAxisWidth] = (0, react_1.useState)(40);
+    const wrapperRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const calc = () => {
             var _a, _b, _c, _d, _e;
-            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
+            const width = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 800;
             const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
             const yTicks = Array.from(document.querySelectorAll(".recharts-y-axis .recharts-layer tspan"));
             const maxYTickWidth = yTicks.length > 0 ? Math.max(...yTicks.map((t) => t.getBBox().width)) : 40;
@@ -159,12 +160,12 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
                 bottomMargin = Math.max(xAxisH, maxXTickHeight);
             }
             setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: bottomMargin });
-            const chartHeight = ((_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 300;
+            const chartHeight = ((_c = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 300;
             const maxYTicks = Math.max(2, Math.floor(chartHeight / (fontSize * 3)));
             setYTickCount(maxYTicks);
             setXAxisHeight(Math.ceil(fontSize));
-            const containerHeight = ((_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
-            const containerWidth = ((_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.offsetWidth) || 0;
+            const containerHeight = ((_d = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+            const containerWidth = ((_e = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _e === void 0 ? void 0 : _e.offsetWidth) || 0;
             const neededHeight = 10 + xAxisHeight + 10 + 32;
             const neededWidth = chartMargin.left + chartMargin.right + yAxisWidth + 32;
             setMiniMode(neededHeight > containerHeight || neededWidth > containerWidth);
@@ -172,21 +173,64 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
         calc();
         window.addEventListener("resize", calc);
         return () => window.removeEventListener("resize", calc);
-    }, [data, xAxisHeight]);
+    }, [data]);
+    const containerSize = (0, react_2.useMemo)(() => {
+        const parseSize = (value) => {
+            if (!value)
+                return "100%";
+            if (value.endsWith("px")) {
+                return parseInt(value, 10);
+            }
+            return value;
+        };
+        const width = parseSize(style === null || style === void 0 ? void 0 : style.width);
+        const height = parseSize(style === null || style === void 0 ? void 0 : style.height);
+        return {
+            width,
+            height,
+        };
+    }, [style === null || style === void 0 ? void 0 : style.width, style === null || style === void 0 ? void 0 : style.height]);
+    const content = (0, react_2.useMemo)(() => {
+        const auto = (style === null || style === void 0 ? void 0 : style.width) === "*" || (style === null || style === void 0 ? void 0 : style.height) === "*";
+        const chart = ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, minWidth: 60, minHeight: 60, debounce: 100, width: auto ? "100%" : containerSize.width, height: auto ? "100%" : containerSize.height, children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { style: style, accessibilityLayer: true, data: data, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tickFormatter: miniMode ? undefined : tickFormatterX, tick: miniMode ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, tickFormatter: miniMode ? undefined : tickFormatterY, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            margin: "0 auto",
+                            width: "100%",
+                            textAlign: "center",
+                        } }))] }) }));
+        return auto ? ((0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, style: {
+                flexGrow: 1,
+                width: containerSize.width,
+                height: containerSize.height,
+                padding: 0,
+                margin: 0,
+            }, children: chart })) : (chart);
+    }, [
+        data,
+        layout,
+        nameKey,
+        stacked,
+        dataKeys,
+        style,
+        miniMode,
+        chartMargin,
+        interval,
+        tickAngle,
+        tickAnchor,
+        xAxisHeight,
+        hideX,
+        hideY,
+        hideTickX,
+        hideTickY,
+        tickFormatterX,
+        tickFormatterY,
+        yTickCount,
+        showLegend,
+        config,
+    ]);
     return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: data
                     .map((d) => d[nameKey])
-                    .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx))) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    flexGrow: 1,
-                    width: style.width || "100%",
-                    height: style.height || "100%",
-                    padding: 0,
-                    margin: 0,
-                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, ref: containerRef, width: "100%", height: "100%", debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: data, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tickFormatter: miniMode ? undefined : tickFormatterX, tick: miniMode ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, tickFormatter: miniMode ? undefined : tickFormatterY, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
-                                    bottom: 0,
-                                    left: 0,
-                                    right: 0,
-                                    margin: "0 auto",
-                                    width: "100%",
-                                    textAlign: "center",
-                                } }))] }) }) })] }));
+                    .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx))) }), content] }));
 }

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

@@ -93,6 +93,7 @@ const CarouselItem_1 = require("./Carousel/CarouselItem");
 const renderers_1 = require("../components-core/renderers");
 const Breakout_1 = require("./Breakout/Breakout");
 const ToneChangerButton_1 = require("./ToneChangerButton/ToneChangerButton");
+const ToneSwitch_1 = require("./ToneSwitch/ToneSwitch");
 const APICall_2 = require("./APICall/APICall");
 const Option_1 = require("./Option/Option");
 const AutoComplete_1 = require("./AutoComplete/AutoComplete");
@@ -401,6 +402,7 @@ class ComponentRegistry {
             this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
             this.registerCoreComponent(ToneChangerButton_1.toneChangerButtonComponentRenderer);
+            this.registerCoreComponent(ToneSwitch_1.toneSwitchComponentRenderer);
             this.registerCoreComponent(InspectButton_1.inspectButtonComponentRenderer);
             this.registerCoreComponent(FormSection_1.formSectionRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);

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

@@ -224,10 +224,10 @@ registerIconRenderer("trending-level", (props) => (0, jsx_runtime_1.jsx)(Trendin
 registerIconRenderer("sortasc", (props) => (0, jsx_runtime_1.jsx)(SortAscendingIcon_1.SortAscendingIcon, Object.assign({}, props)));
 registerIconRenderer("sortdesc", (props) => (0, jsx_runtime_1.jsx)(SortDescendingIcon_1.SortDescendingIcon, Object.assign({}, props)));
 registerIconRenderer("nosort", (props) => (0, jsx_runtime_1.jsx)(NoSortIcon_1.NoSortIcon, Object.assign({}, props)));
-registerIconRenderer("admonition_info", (props) => (0, jsx_runtime_1.jsx)(AdmonitionInfo_1.AdmonitionInfoIcon, Object.assign({}, props)));
-registerIconRenderer("admonition_warning", (props) => (0, jsx_runtime_1.jsx)(AdmonitionWarning_1.AdmonitionWarningIcon, Object.assign({}, props)));
-registerIconRenderer("admonition_danger", (props) => (0, jsx_runtime_1.jsx)(AdmonitionDanger_1.AdmonitionDangerIcon, Object.assign({}, props)));
-registerIconRenderer("admonition_note", (props) => (0, jsx_runtime_1.jsx)(AdmonitionNote_1.AdmonitionNoteIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_info", (props) => ((0, jsx_runtime_1.jsx)(AdmonitionInfo_1.AdmonitionInfoIcon, Object.assign({}, props))));
+registerIconRenderer("admonition_warning", (props) => ((0, jsx_runtime_1.jsx)(AdmonitionWarning_1.AdmonitionWarningIcon, Object.assign({}, props))));
+registerIconRenderer("admonition_danger", (props) => ((0, jsx_runtime_1.jsx)(AdmonitionDanger_1.AdmonitionDangerIcon, Object.assign({}, props))));
+registerIconRenderer("admonition_note", (props) => ((0, jsx_runtime_1.jsx)(AdmonitionNote_1.AdmonitionNoteIcon, Object.assign({}, props))));
 registerIconRenderer("admonition_tip", (props) => (0, jsx_runtime_1.jsx)(AdmonitionTip_1.AdmonitionTipIcon, Object.assign({}, props)));
 // --- IDE extras (temporary)
 registerIconRenderer("arrowdown", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowDownShort, Object.assign({}, props)));
@@ -238,6 +238,8 @@ registerIconRenderer("table-insert-row", (props) => (0, jsx_runtime_1.jsx)(Table
 registerIconRenderer("table-delete-row", (props) => (0, jsx_runtime_1.jsx)(TableDeleteRowIcon_1.default, Object.assign({}, props)));
 registerIconRenderer("table-insert-column", (props) => (0, jsx_runtime_1.jsx)(TableInsertColumnIcon_1.default, Object.assign({}, props)));
 registerIconRenderer("table-delete-column", (props) => (0, jsx_runtime_1.jsx)(TableDeleteColumnIcon_1.default, Object.assign({}, props)));
+registerIconRenderer("eye", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoEyeOutline, Object.assign({}, props)));
+registerIconRenderer("eye-off", (props) => (0, jsx_runtime_1.jsx)(io5_1.IoEyeOffOutline, Object.assign({}, props)));
 function IconProvider({ children }) {
     const getRegisteredIconNames = (0, react_1.useCallback)(() => {
         return Array.from(pool.keys());

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -9,6 +9,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.module.scss"));
 const IconNative_1 = require("../Icon/IconNative");
 const TextNative_1 = require("../Text/TextNative");
-function Adornment({ iconName, text, className }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), role: "presentation", children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
+function Adornment({ iconName, text, className, onClick }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className, {
+                [InputAdornment_module_scss_1.default.clickable]: !!onClick
+            }), role: onClick ? "button" : "presentation", onClick: onClick, tabIndex: onClick ? 0 : undefined, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
 }

package/dist/scripts/src/components/Link/LinkNative.js

@@ -32,53 +32,8 @@ exports.LinkNative = (0, react_1.forwardRef)(function LinkNative(props, forwarde
     const smartTo = (0, react_1.useMemo)(() => {
         return (0, component_utils_1.createUrlWithQueryParams)(to);
     }, [to]);
-    const Node = !to ? "div" : react_2.Link;
-    // For hash links, we'll use a regular anchor tag to avoid React Router interference
-    const isHashLink = typeof to === 'string' && to.startsWith('#');
-    const FinalNode = isHashLink ? "a" : Node;
-    // Handle hash navigation for same-page scrolling
-    const handleClick = (0, react_1.useCallback)((event) => {
-        const toUrl = typeof to === 'string' ? to : to === null || to === void 0 ? void 0 : to.pathname;
-        // Check if this is a hash link (starts with #)
-        if (toUrl && toUrl.startsWith('#')) {
-            const targetId = toUrl.substring(1);
-            const currentHash = window.location.hash;
-            // Always prevent default for hash links and handle manually
-            event.preventDefault();
-            const targetElement = document.getElementById(targetId);
-            if (targetElement) {
-                targetElement.scrollIntoView();
-                // Build the new URL with existing hash route + fragment
-                const currentUrl = window.location.href;
-                const baseUrl = currentUrl.split('#')[0]; // Get everything before the first #
-                const existingHash = window.location.hash; // Current hash (e.g., #/about)
-                let newUrl;
-                if (existingHash && existingHash !== toUrl) {
-                    // If there's an existing hash route, append the fragment to it
-                    if (existingHash.includes('/#')) {
-                        // Remove any existing fragment and add the new one
-                        const hashRoute = existingHash.split('/#')[0];
-                        newUrl = `${baseUrl}${hashRoute}/${toUrl}`;
-                    }
-                    else {
-                        // Just append the fragment to the existing hash
-                        newUrl = `${baseUrl}${existingHash}/${toUrl}`;
-                    }
-                }
-                else {
-                    // No existing hash or same fragment, just use the fragment
-                    newUrl = `${baseUrl}${toUrl}`;
-                }
-                window.history.pushState(null, '', newUrl);
-            }
-            // Call the original onClick if provided
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-            return;
-        }
-        // For all other cases, call the original onClick
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [to, onClick]);
-    return ((0, jsx_runtime_1.jsxs)(FinalNode, Object.assign({ ref: forwardedRef, to: isHashLink ? undefined : smartTo, href: isHashLink ? to : undefined, style: style, target: target, onClick: handleClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+    const Node = to ? react_2.Link : "div";
+    return ((0, jsx_runtime_1.jsxs)(Node, Object.assign({ ref: forwardedRef, to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
             [Link_module_scss_1.default.iconLink]: iconLink,
             [Link_module_scss_1.default.active]: active,
             [Link_module_scss_1.default.disabled]: disabled,

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -358,56 +358,103 @@ const Blockquote = ({ children, style }) => {
     }
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.blockquoteContainer, children: children }) }));
 };
-function LinkAwareHeading({ children, level, showHeadingAnchors }) {
-    var _a, _b;
-    const appContext = (0, AppContext_1.useAppContext)();
-    if (showHeadingAnchors === undefined) {
-        showHeadingAnchors = (_b = (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.showHeadingAnchors) !== null && _b !== void 0 ? _b : false;
+function removeSuffixFromReactNodes(node, suffix) {
+    if (!suffix) {
+        return node;
     }
-    let headingLabel = "";
-    let anchorId = "";
-    if (!children)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    if (typeof children === "string") {
-        [headingLabel, anchorId] = getCustomAnchor(children);
-        // At this point, the anchorId might still be empty
-    }
-    else if (Array.isArray(children)) {
-        if (children.length === 0)
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        if (children.length === 1) {
-            headingLabel = children[0];
+    if (typeof node === "string") {
+        if (node.endsWith(suffix)) {
+            const result = node.slice(0, -suffix.length);
+            return result || null;
         }
-        else {
-            headingLabel = children.slice(0, -1);
-            const last = children[children.length - 1];
-            // Check for explicit anchor at the end
-            if (typeof last === "string") {
-                const match = last.trim().match(/^\[#([^\]]+)\]$/);
-                if (match && match.length > 0) {
-                    anchorId = match[1];
-                }
-                else {
-                    // --- Generate a valid anchor ID from the last element
-                    anchorId = headingToAnchorLink(extractTextNodes(last));
-                }
+        return node;
+    }
+    if (Array.isArray(node)) {
+        const newChildren = [...node];
+        let suffixRemaining = suffix;
+        for (let i = newChildren.length - 1; i >= 0 && suffixRemaining.length > 0; i--) {
+            const child = newChildren[i];
+            const childText = getHeadingText(child);
+            if (suffixRemaining.endsWith(childText)) {
+                newChildren[i] = null;
+                suffixRemaining = suffixRemaining.slice(0, -childText.length);
+            }
+            else {
+                newChildren[i] = removeSuffixFromReactNodes(child, suffixRemaining);
+                // After this call, the suffix should have been removed from the child, so we are done.
+                suffixRemaining = "";
             }
         }
+        return newChildren.filter(Boolean);
     }
-    else {
-        // Provided children are not a string or array but still valid React elements
-        // if it contains text, use it as the heading label
-        const headingContent = extractTextNodes(children);
-        if (!headingContent)
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        headingLabel = children;
+    if (react_1.default.isValidElement(node) && node.props.children) {
+        const newChildren = removeSuffixFromReactNodes(node.props.children, suffix);
+        return react_1.default.cloneElement(node, Object.assign(Object.assign({}, node.props), { children: newChildren }));
     }
-    // Generate implicit anchor if not provided
-    if (!anchorId) {
-        anchorId = headingToAnchorLink(extractTextNodes(headingLabel));
+    return node;
+}
+const LinkAwareHeading = ({ level, children, showHeadingAnchors }) => {
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const headingRef = (0, react_1.useRef)(null);
+    // --- Extract the optional anchor
+    let anchor = undefined;
+    let label = children;
+    const textContent = getHeadingText(children);
+    const match = textContent.match(/^(.*)\[#([a-zA-Z0-9-]+)\]\s*$/);
+    if (match) {
+        anchor = match[2];
+        const anchorText = `[#${anchor}]`;
+        label = removeSuffixFromReactNodes(children, anchorText);
     }
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: level, id: anchorId, showAnchor: showHeadingAnchors, children: headingLabel }));
+    const headingId = anchor !== null && anchor !== void 0 ? anchor : getHeadingId(children);
+    return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: headingId, className: Markdown_module_scss_1.default.linkAwareHeading, headingRef: headingRef, children: [label, showHeadingAnchors && ((0, jsx_runtime_1.jsx)("a", { href: `#${headingId}`, className: Markdown_module_scss_1.default.headingLink, onClick: (e) => {
+                    var _a;
+                    e.preventDefault();
+                    (_a = appGlobals.events) === null || _a === void 0 ? void 0 : _a.emit("scroll-to-anchor", { anchor: headingId });
+                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "link" }) }))] }));
+};
+function getHeadingId(children) {
+    const text = getHeadingText(children);
+    return text
+        .toLowerCase()
+        .replace(/[^\w]+/g, "-")
+        .replace(/^-+|-+$/g, "");
 }
+function getHeadingText(children) {
+    if (typeof children === "string") {
+        return children;
+    }
+    if (Array.isArray(children)) {
+        return children.map(getHeadingText).join("");
+    }
+    if (react_1.default.isValidElement(children) && children.props.children) {
+        return getHeadingText(children.props.children);
+    }
+    return "";
+}
+const getLabelContent = (node, labelText) => {
+    if (typeof node === "string") {
+        return labelText.includes(node) ? node : null;
+    }
+    if (Array.isArray(node)) {
+        const children = node.map((n) => getLabelContent(n, labelText)).filter(Boolean);
+        return children.length > 0 ? children : null;
+    }
+    if (react_1.default.isValidElement(node)) {
+        const nodeText = getHeadingText(node);
+        if (labelText.trim() === nodeText.trim()) {
+            return node;
+        }
+        if (labelText.includes(nodeText)) {
+            return node;
+        }
+        const newChildren = getLabelContent(node.props.children, labelText);
+        if (newChildren) {
+            return react_1.default.cloneElement(node, node.props, newChildren);
+        }
+    }
+    return null;
+};
 // --- Helper functions
 function removeTextIndents(input) {
     if (!input) {

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

@@ -58,9 +58,11 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`borderRadius-viewControls-${COMP}`]: "5px",
         [`padding-viewControls-${COMP}`]: "$space-0_5",
         [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
+        [`color-loadingText-${COMP}`]: "$color-surface-600",
         // --- Split view styles
         [`padding-button-splitView-${COMP}`]: "1px 6px",
         [`width-button-splitView-${COMP}`]: "60px",
+        [`height-button-splitView-${COMP}`]: "19px",
         [`width-logo-splitView-${COMP}`]: "1.5rem",
         [`height-logo-splitView-${COMP}`]: "2rem",
         [`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-0",

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -42,7 +42,7 @@ const hooks_1 = require("../../components-core/utils/hooks");
 const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
 function AnimatedLogo() {
-    return ((0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.logoWrapper, children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.04674 19.3954C8.2739 19.3954 7.60226 19.2265 7.03199 18.8887C6.47443 18.5384 6.0435 18.0505 5.73938 17.425C5.43526 16.7869 5.2832 16.0362 5.2832 15.173V9.89961C5.2832 9.7745 5.32771 9.66815 5.41637 9.58059C5.50502 9.493 5.61275 9.44922 5.73938 9.44922H7.41222C7.55157 9.44922 7.6593 9.493 7.73524 9.58059C7.8239 9.66815 7.86841 9.7745 7.86841 9.89961V15.0604C7.86841 16.6117 8.55895 17.3874 9.94021 17.3874C10.5991 17.3874 11.1187 17.181 11.4988 16.7681C11.8917 16.3553 12.0881 15.786 12.0881 15.0604V9.89961C12.0881 9.7745 12.1325 9.66815 12.2211 9.58059C12.3098 9.493 12.4175 9.44922 12.5443 9.44922H14.217C14.3436 9.44922 14.4513 9.493 14.54 9.58059C14.6288 9.66815 14.6732 9.7745 14.6732 9.89961V18.7574C14.6732 18.8825 14.6288 18.9888 14.54 19.0764C14.4513 19.164 14.3436 19.2078 14.217 19.2078H12.6773C12.538 19.2078 12.4239 19.164 12.3352 19.0764C12.2591 18.9888 12.2211 18.8825 12.2211 18.7574V17.988C11.879 18.4258 11.4545 18.7699 10.9476 19.0201C10.4407 19.2703 9.80704 19.3954 9.04674 19.3954Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.6397 19.2104C17.5129 19.2104 17.4052 19.1666 17.3165 19.079C17.2279 18.9914 17.1835 18.8851 17.1835 18.76V9.90221C17.1835 9.7771 17.2279 9.67075 17.3165 9.58319C17.4052 9.4956 17.5129 9.45182 17.6397 9.45182H19.2174C19.3567 9.45182 19.4644 9.4956 19.5404 9.58319C19.6292 9.67075 19.6736 9.7771 19.6736 9.90221V18.76C19.6736 18.8851 19.6292 18.9914 19.5404 19.079C19.4644 19.1666 19.3567 19.2104 19.2174 19.2104H17.6397ZM17.5636 7.8379C17.4243 7.8379 17.3102 7.80038 17.2215 7.72531C17.1454 7.63773 17.1074 7.52514 17.1074 7.38751V6.03633C17.1074 5.91122 17.1454 5.80487 17.2215 5.71731C17.3102 5.62972 17.4243 5.58594 17.5636 5.58594H19.2933C19.4327 5.58594 19.5467 5.62972 19.6354 5.71731C19.7242 5.80487 19.7686 5.91122 19.7686 6.03633V7.38751C19.7686 7.52514 19.7242 7.63773 19.6354 7.72531C19.5467 7.80038 19.4327 7.8379 19.2933 7.8379H17.5636Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { className: NestedApp_module_scss_1.default.animatedLogoPath, d: "M23.0215 2.81748H2.53486V23.044H23.0215V2.81748Z", fill: "none", stroke: "#3367CC", strokeWidth: "0.75" })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.loadingContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.loadingText, children: "Loading XMLUI App..." }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.logoWrapper, children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.04674 19.3954C8.2739 19.3954 7.60226 19.2265 7.03199 18.8887C6.47443 18.5384 6.0435 18.0505 5.73938 17.425C5.43526 16.7869 5.2832 16.0362 5.2832 15.173V9.89961C5.2832 9.7745 5.32771 9.66815 5.41637 9.58059C5.50502 9.493 5.61275 9.44922 5.73938 9.44922H7.41222C7.55157 9.44922 7.6593 9.493 7.73524 9.58059C7.8239 9.66815 7.86841 9.7745 7.86841 9.89961V15.0604C7.86841 16.6117 8.55895 17.3874 9.94021 17.3874C10.5991 17.3874 11.1187 17.181 11.4988 16.7681C11.8917 16.3553 12.0881 15.786 12.0881 15.0604V9.89961C12.0881 9.7745 12.1325 9.66815 12.2211 9.58059C12.3098 9.493 12.4175 9.44922 12.5443 9.44922H14.217C14.3436 9.44922 14.4513 9.493 14.54 9.58059C14.6288 9.66815 14.6732 9.7745 14.6732 9.89961V18.7574C14.6732 18.8825 14.6288 18.9888 14.54 19.0764C14.4513 19.164 14.3436 19.2078 14.217 19.2078H12.6773C12.538 19.2078 12.4239 19.164 12.3352 19.0764C12.2591 18.9888 12.2211 18.8825 12.2211 18.7574V17.988C11.879 18.4258 11.4545 18.7699 10.9476 19.0201C10.4407 19.2703 9.80704 19.3954 9.04674 19.3954Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.6397 19.2104C17.5129 19.2104 17.4052 19.1666 17.3165 19.079C17.2279 18.9914 17.1835 18.8851 17.1835 18.76V9.90221C17.1835 9.7771 17.2279 9.67075 17.3165 9.58319C17.4052 9.4956 17.5129 9.45182 17.6397 9.45182H19.2174C19.3567 9.45182 19.4644 9.4956 19.5404 9.58319C19.6292 9.67075 19.6736 9.7771 19.6736 9.90221V18.76C19.6736 18.8851 19.6292 18.9914 19.5404 19.079C19.4644 19.1666 19.3567 19.2104 19.2174 19.2104H17.6397ZM17.5636 7.8379C17.4243 7.8379 17.3102 7.80038 17.2215 7.72531C17.1454 7.63773 17.1074 7.52514 17.1074 7.38751V6.03633C17.1074 5.91122 17.1454 5.80487 17.2215 5.71731C17.3102 5.62972 17.4243 5.58594 17.5636 5.58594H19.2933C19.4327 5.58594 19.5467 5.62972 19.6354 5.71731C19.7242 5.80487 19.7686 5.91122 19.7686 6.03633V7.38751C19.7686 7.52514 19.7242 7.63773 19.6354 7.72531C19.5467 7.80038 19.4327 7.8379 19.2933 7.8379H17.5636Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { className: NestedApp_module_scss_1.default.animatedLogoPath, d: "M23.0215 2.81748H2.53486V23.044H23.0215V2.81748Z", fill: "none", stroke: "#3367CC", strokeWidth: "0.75" })] }) })] }));
 }
 function LazyNestedApp(_a) {
     var { immediate } = _a, restProps = __rest(_a, ["immediate"]);

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

@@ -36,6 +36,20 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
             description: "This property defines the gap between the adornments and the input area. If not " +
                 "set, the gap declared by the current theme is used.",
         },
+        showPasswordToggle: {
+            description: "If `true`, a toggle button is displayed to switch between showing and hiding the password input.",
+            defaultValue: false,
+        },
+        passwordVisibleIcon: {
+            description: "The icon to display when the password is visible (when showPasswordToggle is true).",
+            valueType: "string",
+            defaultValue: "eye",
+        },
+        passwordHiddenIcon: {
+            description: "The icon to display when the password is hidden (when showPasswordToggle is true).",
+            valueType: "string",
+            defaultValue: "eye-off",
+        }
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
@@ -69,6 +83,7 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
         "outlineWidth-Input--focus": "$outlineWidth--focus",
         "outlineStyle-Input--focus": "$outlineStyle--focus",
         "outlineOffset-Input--focus": "$outlineOffset--focus",
+        "color-passwordToggle-Input": "$textColor-subtitle",
         light: {
         // --- No light-specific theme vars
         },
@@ -79,7 +94,7 @@ exports.TextBoxMd = (0, metadata_helpers_1.createMetadata)({
 });
 function renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi, type = "text") {
     delete layoutCss.gap;
-    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    return ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { type: type, style: layoutCss, value: state.value, updateState: updateState, initialValue: extractValue(node.props.initialValue), maxLength: extractValue(node.props.maxLength), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), showPasswordToggle: extractValue.asOptionalBoolean(node.props.showPasswordToggle, false), passwordVisibleIcon: extractValue.asOptionalString(node.props.passwordVisibleIcon), passwordHiddenIcon: extractValue.asOptionalString(node.props.passwordHiddenIcon) }));
 }
 exports.textBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
     return renderTextBox(layoutCss, state, updateState, extractValue, node, lookupEventHandler, registerComponentApi);

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -57,11 +57,21 @@ exports.defaultProps = {
     onBlur: constants_1.noop,
     onKeyDown: constants_1.noop,
     updateState: constants_1.noop,
+    passwordVisibleIcon: "eye",
+    passwordHiddenIcon: "eye-off",
 };
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.defaultProps.type, value = exports.defaultProps.value, updateState = exports.defaultProps.updateState, initialValue = exports.defaultProps.initialValue, style, maxLength, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onKeyDown = exports.defaultProps.onKeyDown, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, showPasswordToggle, passwordVisibleIcon = exports.defaultProps.passwordVisibleIcon, passwordHiddenIcon = exports.defaultProps.passwordHiddenIcon, }, ref) {
     const _id = (0, react_1.useId)();
     id = id || _id;
     const inputRef = (0, react_2.useRef)(null);
+    // State to control password visibility
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    // Determine the actual input type based on the password visibility toggle
+    const actualType = (type === "password" && showPassword) ? "text" : type;
+    // Toggle password visibility
+    const togglePasswordVisibility = (0, react_2.useCallback)(() => {
+        setShowPassword(prev => !prev);
+    }, []);
     (0, react_2.useEffect)(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -116,5 +126,5 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] }) }));
 });

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

@@ -0,0 +1,51 @@
+"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 }) => {
+    return (0, jsx_runtime_1.jsx)(ToneSwitchNative_1.ToneSwitch, { iconLight: extractValue(node.props.iconLight), iconDark: extractValue(node.props.iconDark) });
+});

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToneSwitch = ToneSwitch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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";
+function ToneSwitch({ iconLight = DEFAULT_LIGHT_ICON, iconDark = DEFAULT_DARK_ICON }) {
+    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", { style: { width: 'fit-content', display: 'inline-block' }, className: "toneSwitchContainer", 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 })) }) }));
+            } }) }));
+}