xmlui 0.9.77 → 0.9.79

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

@@ -1,145 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.editorComponentRenderer = exports.TableEditorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@tiptap/react");
-const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
-const extension_table_1 = __importDefault(require("@tiptap/extension-table"));
-const extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
-const extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
-const extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
-const ButtonNative_1 = require("../Button/ButtonNative");
-const StackNative_1 = require("../Stack/StackNative");
-const TableEditorNative_1 = require("./TableEditorNative");
-const turndown_1 = __importDefault(require("turndown"));
 const metadata_helpers_1 = require("../metadata-helpers");
 const renderers_1 = require("../../components-core/renderers");
 const abstractions_1 = require("../abstractions");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const TableEditor_module_scss_1 = __importDefault(require("./TableEditor.module.scss"));
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const TableEditor = (0, react_1.forwardRef)(function TableEditor({ registerComponentApi, themeColor = "primary", variant = "solid", size = "sm", onDidChange = () => { }, }, ref) {
-    const editor = (0, react_2.useEditor)({
-        extensions: [
-            starter_kit_1.default,
-            extension_table_1.default.configure({ resizable: true }),
-            extension_table_row_1.default,
-            extension_table_header_1.default,
-            extension_table_cell_1.default,
-        ],
-        content: `
-      <table>
-        <thead>
-          <tr>
-            <th>Fruit</th>
-            <th>Color</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Apple</td>
-            <td>Red</td>
-          </tr>
-          <tr>
-            <td>Banana</td>
-            <td>Yellow</td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-    });
-    const turndownService = new turndown_1.default();
-    turndownService.addRule("table", {
-        filter: "table",
-        replacement: function (content, node) {
-            let rows = [];
-            for (let row of node.querySelectorAll("tr")) {
-                let cells = Array.from(row.children).map((cell) => { var _a, _b; return (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ""; });
-                rows.push("| " + cells.join(" | ") + " |");
-            }
-            if (rows.length > 1) {
-                // Add a separator after the header row
-                const headerSep = "| " +
-                    rows[0]
-                        .split("|")
-                        .slice(1, -1)
-                        .map(() => "---")
-                        .join(" | ") +
-                    " |";
-                rows.splice(1, 0, headerSep);
-            }
-            return rows.join("\n") + "\n";
-        },
-    });
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        getMarkdownSource: () => { var _a, _b; return turndownService.turndown((_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""); },
-        getHtmlSource: () => { var _a, _b; return (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""; },
-    }), [editor]);
-    react_1.default.useEffect(() => {
-        if (registerComponentApi && editor) {
-            registerComponentApi({
-                getHtmlSource: () => editor.getHTML(),
-                getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
-            });
-        }
-    }, [registerComponentApi, editor]);
-    // Emit onDidChange whenever the editor content changes
-    react_1.default.useEffect(() => {
-        if (!editor)
-            return;
-        const handler = () => {
-            const html = editor.getHTML();
-            const markdown = turndownService.turndown(html);
-            //console.log("[TableEditor] onDidChange about to fire", { html, markdown, onDidChange });
-            onDidChange({ html, markdown });
-        };
-        editor.on("update", handler);
-        // Emit once on mount
-        handler();
-        return () => {
-            editor.off("update", handler);
-        };
-    }, [editor, onDidChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "table-editor-root", children: [(0, jsx_runtime_1.jsx)("div", { className: "button-stack", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addRowAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-row", "aria-hidden": true }), children: "Insert Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteRow(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-row", "aria-hidden": true }), children: "Delete Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addColumnAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-column", "aria-hidden": true }), children: "Insert Column" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteColumn(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-column", "aria-hidden": true }), children: "Delete Column" })] }) }), (0, jsx_runtime_1.jsx)(TableEditorNative_1.TableEditorNative, { editor: editor, className: TableEditor_module_scss_1.default.editor })] }));
-});
-exports.default = TableEditor;
+const TableEditorNative_1 = require("./TableEditorNative");
 // Create metadata for TableEditor that defines allowed props
 exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -178,6 +49,5 @@ exports.TableEditorMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.editorComponentRenderer = (0, renderers_1.createComponentRenderer)("TableEditor", exports.TableEditorMd, ({ node, extractValue, registerComponentApi, lookupEventHandler }) => {
     const handler = lookupEventHandler === null || lookupEventHandler === void 0 ? void 0 : lookupEventHandler("didChange");
-    //console.log("[TableEditor renderer] didChange handler:", handler);
-    return ((0, jsx_runtime_1.jsx)(TableEditor, { themeColor: extractValue.asOptionalString(node.props.themeColor), variant: extractValue.asOptionalString(node.props.variant), size: extractValue.asOptionalString(node.props.size), registerComponentApi: registerComponentApi, onDidChange: handler }));
+    return ((0, jsx_runtime_1.jsx)(TableEditorNative_1.TableEditor, { themeColor: extractValue.asOptionalString(node.props.themeColor), variant: extractValue.asOptionalString(node.props.variant), size: extractValue.asOptionalString(node.props.size), registerComponentApi: registerComponentApi, onDidChange: handler }));
 });

package/dist/scripts/src/components/TableEditor/TableEditorNative.js

@@ -1,8 +1,136 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableEditorNative = TableEditorNative;
+exports.TableEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@tiptap/react");
-function TableEditorNative({ editor, className }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(react_1.EditorContent, { editor: editor }) }));
-}
+const react_1 = __importStar(require("react"));
+const react_2 = require("@tiptap/react");
+const starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
+const extension_table_1 = __importDefault(require("@tiptap/extension-table"));
+const extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
+const extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
+const extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
+const ButtonNative_1 = require("../Button/ButtonNative");
+const StackNative_1 = require("../Stack/StackNative");
+const turndown_1 = __importDefault(require("turndown"));
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const TableEditor_module_scss_1 = __importDefault(require("./TableEditor.module.scss"));
+exports.TableEditor = (0, react_1.forwardRef)(function TableEditor({ registerComponentApi, themeColor = "primary", variant = "solid", size = "sm", onDidChange = () => { }, }, ref) {
+    const editor = (0, react_2.useEditor)({
+        extensions: [
+            starter_kit_1.default,
+            extension_table_1.default.configure({ resizable: true }),
+            extension_table_row_1.default,
+            extension_table_header_1.default,
+            extension_table_cell_1.default,
+        ],
+        content: `
+      <table>
+        <thead>
+          <tr>
+            <th>Fruit</th>
+            <th>Color</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Apple</td>
+            <td>Red</td>
+          </tr>
+          <tr>
+            <td>Banana</td>
+            <td>Yellow</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+    });
+    const turndownService = new turndown_1.default();
+    turndownService.addRule("table", {
+        filter: "table",
+        replacement: function (content, node) {
+            let rows = [];
+            for (let row of node.querySelectorAll("tr")) {
+                let cells = Array.from(row.children).map((cell) => { var _a, _b; return (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ""; });
+                rows.push("| " + cells.join(" | ") + " |");
+            }
+            if (rows.length > 1) {
+                // Add a separator after the header row
+                const headerSep = "| " +
+                    rows[0]
+                        .split("|")
+                        .slice(1, -1)
+                        .map(() => "---")
+                        .join(" | ") +
+                    " |";
+                rows.splice(1, 0, headerSep);
+            }
+            return rows.join("\n") + "\n";
+        },
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getMarkdownSource: () => { var _a, _b; return turndownService.turndown((_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""); },
+        getHtmlSource: () => { var _a, _b; return (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML) === null || _a === void 0 ? void 0 : _a.call(editor)) !== null && _b !== void 0 ? _b : ""; },
+    }), [editor]);
+    react_1.default.useEffect(() => {
+        if (registerComponentApi && editor) {
+            registerComponentApi({
+                getHtmlSource: () => editor.getHTML(),
+                getMarkdownSource: () => turndownService.turndown(editor.getHTML()),
+            });
+        }
+    }, [registerComponentApi, editor]);
+    // Emit onDidChange whenever the editor content changes
+    react_1.default.useEffect(() => {
+        if (!editor)
+            return;
+        const handler = () => {
+            const html = editor.getHTML();
+            const markdown = turndownService.turndown(html);
+            //console.log("[TableEditor] onDidChange about to fire", { html, markdown, onDidChange });
+            onDidChange({ html, markdown });
+        };
+        editor.on("update", handler);
+        // Emit once on mount
+        handler();
+        return () => {
+            editor.off("update", handler);
+        };
+    }, [editor, onDidChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "table-editor-root", children: [(0, jsx_runtime_1.jsx)("div", { className: "button-stack", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addRowAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-row", "aria-hidden": true }), children: "Insert Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteRow(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-row", "aria-hidden": true }), children: "Delete Row" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.addColumnAfter(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-insert-column", "aria-hidden": true }), children: "Insert Column" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => editor && editor.commands.deleteColumn(), disabled: !editor, themeColor: themeColor, variant: variant, size: size, orientation: "horizontal", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "table-delete-column", "aria-hidden": true }), children: "Delete Column" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: TableEditor_module_scss_1.default.editor, children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) })] }));
+});

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 })) }) }));
+            } }) }));
+}

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -90,7 +90,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
                     observer.current.unobserve(root);
                 }
                 if (trackContainerHeight === "auto") {
-                    root.style.setProperty("--containerHeight", 'auto');
+                    root.style.setProperty("--containerHeight", "auto");
                 }
                 else {
                     observer.current = new ResizeObserver((entries) => {
@@ -191,14 +191,28 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         if (lastHash.current !== hash) {
             lastHash.current = hash;
             if (!((_a = location.state) === null || _a === void 0 ? void 0 : _a.preventHashScroll)) {
+                const rootNode = root === null || root === void 0 ? void 0 : root.getRootNode();
+                const scrollBehavior = "instant";
                 requestAnimationFrame(() => {
                     var _a;
-                    (_a = document
-                        .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
+                    if (!rootNode)
+                        return;
+                    // --- If element is in shadow DOM
+                    if (rootNode instanceof ShadowRoot) {
+                        const el = rootNode.getElementById(lastHash.current);
+                        if (!el)
+                            return;
+                        scrollAncestorsToView(el, scrollBehavior);
+                    }
+                    else {
+                        // --- If element is in light DOM
+                        (_a = document
+                            .getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: scrollBehavior, block: "start" });
+                    }
                 });
             }
         }
-    }, [location, scrollForceRefresh]);
+    }, [location, scrollForceRefresh, root]);
     const forceRefreshAnchorScroll = (0, react_1.useCallback)(() => {
         lastHash.current = "";
         setScrollForceRefresh((prev) => prev + 1);
@@ -345,7 +359,7 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
         cleanup: constants_1.noop,
         memoedVarsRef,
     });
-    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: (!!children && (0, react_1.isValidElement)(renderedRoot))
+    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: !!children && (0, react_1.isValidElement)(renderedRoot)
                 ? (0, react_1.cloneElement)(renderedRoot, null, children)
                 : renderedRoot }) }));
 }
@@ -353,3 +367,49 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
 function signError(error) {
     react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
 }
+/**
+ * Scrolls all ancestors of the specified element into view up to the first shadow root the element is in.
+ * @param target The element to scroll to, can be in the light or shadow DOM
+ * @param scrollBehavior The scroll behavior
+ */
+function scrollAncestorsToView(target, scrollBehavior) {
+    const scrollables = getScrollableAncestors(target);
+    // It's important to start from the outermost and work inwards.
+    scrollables.reverse().forEach((container) => {
+        // Compute the position of target relative to container
+        const targetRect = target.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        // Scroll so that the target is visible in this container
+        if (targetRect.top < containerRect.top || targetRect.bottom > containerRect.bottom) {
+            // Only scroll vertically, add more logic for horizontal if needed
+            const offset = targetRect.top - containerRect.top + container.scrollTop;
+            container.scrollTo({ top: offset, behavior: scrollBehavior });
+        }
+        // Optionally handle horizontal scrolling similarly
+    });
+    function getScrollableAncestors(el) {
+        const scrollables = [];
+        let current = el;
+        while (current) {
+            let parent = current.parentElement;
+            // If no parentElement, might be in shadow DOM
+            if (!parent && current.getRootNode) {
+                break;
+                // NOTE: Disregard shadow DOM, because we will scroll everything otherwise
+                /* const root = current.getRootNode();
+                if (root && root instanceof ShadowRoot && root.host) {
+                  parent = root.host as (HTMLElement | null);
+                } */
+            }
+            if (!parent)
+                break;
+            // Check if this parent is scrollable
+            const style = getComputedStyle(parent);
+            if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
+                scrollables.push(parent);
+            }
+            current = parent;
+        }
+        return scrollables;
+    }
+}

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -1061,6 +1061,14 @@ declare type Props_3 = {
     distributeEvenly?: boolean;
 };
 
+/**
+ * TextBox component that supports text input with various configurations.
+ * Features:
+ * - Standard text, password, and search input types
+ * - Input validation states
+ * - Start/end adornments (icons and text)
+ * - Password visibility toggle option
+ */
 declare type Props_4 = {
     id?: string;
     type?: "text" | "password" | "search";
@@ -1090,6 +1098,21 @@ declare type Props_4 = {
     labelWidth?: string;
     labelBreak?: boolean;
     required?: boolean;
+    /**
+     * When true and type is "password", displays a toggle icon to show/hide password text
+     * Default: false
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * The icon to show when the password is visible
+     * Default: "eye"
+     */
+    passwordVisibleIcon?: string;
+    /**
+     * The icon to show when the password is hidden
+     * Default: "eye-off"
+     */
+    passwordHiddenIcon?: string;
 };
 
 declare type REACTIVE_VAR_DECLARATION = typeof T_REACTIVE_VAR_DECLARATION;
@@ -1370,6 +1393,9 @@ declare const standaloneExports: {
         labelWidth?: string;
         labelBreak?: boolean;
         required?: boolean;
+        showPasswordToggle?: boolean;
+        passwordVisibleIcon?: string;
+        passwordHiddenIcon?: string;
     } & default_2.RefAttributes<HTMLDivElement>>;
     NestedApp: typeof xmluiExports.NestedApp;
     VisuallyHidden: ({ children, ...props }: {