xmlui 0.9.25 → 0.9.31

package/dist/scripts/package.json

@@ -1,25 +1,21 @@
 {
     "name": "xmlui",
-    "version": "0.9.25",
+    "version": "0.9.31",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
-        "build:test-bed": "cd src/testing/infrastructure && xmlui build --build-mode=INLINE_ALL --withHostingMetaFiles --withMock",
+        "build:xmlui-test-bed": "cd src/testing/infrastructure && xmlui build --build-mode=INLINE_ALL --withHostingMetaFiles --withMock",
         "build:bin": "tsc -p tsconfig.bin.json",
         "build:xmlui": "vite build --mode lib",
         "build:xmlui-standalone": "vite build --mode standalone",
         "build:xmlui-metadata": "vite build --mode metadata",
         "build:ext-meta": "node scripts/build-extension-packages/build-extension-packages.mjs",
-        "build": "rimraf dist && tsc && npm run build:bin && npm run build:xmlui-metadata && npm run build:xmlui && npm run build:xmlui-standalone",
-        "build:extensions": "cd ../packages/xmlui-animations && npm run build && cd ../xmlui-charts && npm run build && cd ../xmlui-pdf && npm run build && cd ../xmlui-spreadsheet && cd ../xmlui-devtools && npm run build && npm run build",
-        "test": "npm run test:unit",
         "test:unit": "vitest run",
-        "test:e2e": "playwright test",
+        "test:e2e-non-smoke": "playwright test --project non-smoke",
         "test:e2e-smoke": "playwright test --project smoke",
         "test:e2e-ui": "npm run test:e2e -- --ui",
         "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-        "prepublishOnly": "clean-package && npm run build",
-        "cleanPackage": "clean-package",
+        "prepublishOnly": "clean-package",
         "postpublish": "clean-package restore",
         "generate-docs": "node scripts/generate-docs/get-docs.mjs",
         "prepare-docs-data": "npm run build:xmlui-metadata",
@@ -156,36 +152,36 @@
         "src/styles"
     ],
     "bin": {
-        "xmlui": "dist/scripts/bin/bootstrap.js"
+        "xmlui": "./bin/bootstrap.js"
     },
     "clean-package": {
         "replace": {
             "bin": {
                 "xmlui": "dist/scripts/bin/bootstrap.js"
             },
-            "main": "./dist/xmlui.umd.js",
-            "module": "./dist/xmlui.mjs",
-            "types": "./dist/xmlui.d.ts",
+            "main": "./dist/standalone/xmlui-standalone.umd.js",
+            "module": "./dist/lib/xmlui.mjs",
+            "types": "./dist/lib/xmlui.d.ts",
             "exports": {
                 ".": {
-                    "import": "./dist/xmlui.mjs",
-                    "require": "./dist/xmlui.umd.js"
+                    "import": "./dist/lib/xmlui.mjs",
+                    "require": "./dist/standalone/xmlui-standalone.umd.js"
                 },
                 "./language-server": {
-                    "import": "./dist/language-server.mjs",
-                    "require": "./dist/language-server.mjs"
+                    "import": "./dist/lib/language-server.mjs",
+                    "require": "./dist/lib/language-server.mjs"
                 },
                 "./language-server-web-worker": {
-                    "import": "./dist/language-server-web-worker.mjs",
-                    "require": "./dist/language-server-web-worker.mjs"
+                    "import": "./dist/lib/language-server-web-worker.mjs",
+                    "require": "./dist/lib/language-server-web-worker.mjs"
                 },
                 "./parser": {
-                    "import": "./dist/xmlui-parser.mjs",
-                    "require": "./dist/xmlui-parser.mjs"
+                    "import": "./dist/lib/xmlui-parser.mjs",
+                    "require": "./dist/lib/xmlui-parser.mjs"
                 },
                 "./*.css": {
-                    "import": "./dist/*.css",
-                    "require": "./dist/*.css"
+                    "import": "./dist/lib/*.css",
+                    "require": "./dist/lib/*.css"
                 },
                 "./index.scss": {
                     "import": "./src/index.scss",
@@ -198,35 +194,34 @@
             }
         }
     },
-    "main": "./dist/xmlui.umd.js",
+    "main": "./src/index.ts",
     "exports": {
         ".": {
-            "import": "./dist/xmlui.mjs",
-            "require": "./dist/xmlui.umd.js"
-        },
-        "./language-server": {
-            "import": "./dist/language-server.mjs",
-            "require": "./dist/language-server.mjs"
-        },
-        "./language-server-web-worker": {
-            "import": "./dist/language-server-web-worker.mjs",
-            "require": "./dist/language-server-web-worker.mjs"
+            "import": "./src/index.ts",
+            "require": "./src/index.ts"
         },
         "./parser": {
-            "import": "./dist/xmlui-parser.mjs",
-            "require": "./dist/xmlui-parser.mjs"
-        },
-        "./*.css": {
-            "import": "./dist/*.css",
-            "require": "./dist/*.css"
+            "import": "./src/parsers/xmlui-parser/index.ts",
+            "require": "./src/parsers/xmlui-parser/index.ts"
         },
         "./index.scss": {
             "import": "./src/index.scss",
             "require": "./src/index.scss"
         },
+        "./themes.scss": {
+            "import": "./src/components-core/theming/_themes.scss"
+        },
         "./vite-xmlui-plugin": {
-            "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
-            "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+            "import": "./bin/vite-xmlui-plugin.ts",
+            "require": "./bin/vite-xmlui-plugin.ts"
+        },
+        "./language-server": {
+            "import": "./src/language-server/server.ts",
+            "require": "./src/language-server/server.ts"
+        },
+        "./language-server-web-worker": {
+            "import": "./src/language-server/server-web-worker.ts",
+            "require": "./src/language-server/server-web-worker.ts"
         }
     },
     "browserslist": {
@@ -246,7 +241,5 @@
     },
     "msw": {
         "workerDirectory": "src/testing/infrastructure/public"
-    },
-    "module": "./dist/xmlui.mjs",
-    "types": "./dist/xmlui.d.ts"
+    }
 }

package/dist/scripts/src/components/Bookmark/BookmarkNative.js

@@ -18,12 +18,12 @@ const Bookmark = ({ uid, level = exports.defaultProps.level, children, title, om
     const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
     const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.hasTableOfContents;
     (0, react_1.useLayoutEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (observeIntersection && elementRef.current && uid && !omitFromToc) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: uid,
                 level,
-                text: title || ((_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || uid,
+                text: title || ((_c = (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.replace(/#$/, "")) || uid,
                 anchor: elementRef.current,
             });
         }

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

@@ -13,19 +13,24 @@ const CodeBlockNative_1 = require("./CodeBlockNative");
 const COMP = "CodeBlock";
 exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
+    status: "in progress",
     props: {},
     themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        "backgroundColor-CodeBlock": "$color-surface-100",
+        "backgroundColor-CodeBlock": "#f2f7fc", // "$color-surface-100"
         "backgroundColor-CodeBlock-header": "$color-primary-100",
-        //"borderLeft-CodeBlock": "$color-surface-300 2px solid",
         "marginTop-CodeBlock": "$space-5",
         "marginBottom-CodeBlock": "$space-5",
+        "backgroundColor-CodeBlock-highlightRow": "$color-surface-200",
+        "backgroundColor-CodeBlock-highlightString": "$color-surface-300",
+        "borderRadius-CodeBlock": "$space-2",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-primary-200",
+            "backgroundColor-CodeBlock": "#112033",
+            "backgroundColor-CodeBlock-highlightRow": "$color-surface-100",
         }
     },
 });
-exports.codeBlockComponentRenderer = (0, renderers_1.createComponentRenderer)("CodeBlock", exports.CodeBlockMd, ({ node, extractValue, renderChild, layoutCss }) => {
+exports.codeBlockComponentRenderer = (0, renderers_1.createComponentRenderer)("CodeBlock", exports.CodeBlockMd, ({ node, renderChild, layoutCss }) => {
     return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { style: layoutCss, children: renderChild(node.children) }));
 });

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

@@ -8,14 +8,14 @@ exports.markdownCodeBlockParser = markdownCodeBlockParser;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
 const TextNative_1 = require("../Text/TextNative");
-const highlight_code_1 = require("../Markdown/highlight-code");
+const highlight_code_1 = require("./highlight-code");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const unist_util_visit_1 = require("unist-util-visit");
 function CodeBlock({ children, meta, textToCopy, style }) {
     if (!meta) {
-        return (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: children });
+        return ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: children }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyWrapper, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "outlined", themeColor: "primary", size: "sm", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
                                 if (!textToCopy)
@@ -28,6 +28,10 @@ function markdownCodeBlockParser() {
     return function transformer(tree) {
         (0, unist_util_visit_1.visit)(tree, "code", visitor);
     };
+    /**
+     * This visitor visits each node in the mdast tree and adds all meta information to the code block html element
+     * that we use later in the Markdown component.
+     */
     function visitor(node, _, parent) {
         var _a;
         const { lang, meta } = node;
@@ -51,10 +55,25 @@ function markdownCodeBlockParser() {
                 return acc;
             if (item.indexOf("=") === -1) {
                 if (item.startsWith("/") && item.endsWith("/")) {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = item.substring(1, item.length - 1);
+                    const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
+                    const newItemBase64 = window.btoa(item.substring(1, item.length - 1));
+                    if (!unparsedSubstrings) {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
+                    }
+                    else {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] =
+                            `${unparsedSubstrings} ${newItemBase64}`;
+                    }
                 }
                 if (item.startsWith("{") && item.endsWith("}")) {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = item.substring(1, item.length - 1);
+                    const unparsedRows = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data];
+                    const newItem = item.substring(1, item.length - 1);
+                    if (!unparsedRows) {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = newItem;
+                    }
+                    else {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = `${unparsedRows}, ${newItem}`;
+                    }
                 }
                 if (item === "copy") {
                     acc[highlight_code_1.CodeHighlighterMetaKeys.copy.data] = "true";

package/dist/scripts/src/components/{Markdown → CodeBlock}/highlight-code.js

@@ -14,6 +14,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeHighlighterMetaKeysData = exports.CodeHighlighterMetaKeys = void 0;
 exports.parseMetaAndHighlightCode = parseMetaAndHighlightCode;
 const react_1 = require("react");
+const highlightRowsClass = "codeBlockHighlightRow";
+const highlightSubstringsClass = "codeBlockHighlightString";
 /**
  * This function handles two things:
  * 1. The extraction of meta information from code blocks and exposing them as data-meta attributes
@@ -24,7 +26,7 @@ const react_1 = require("react");
  */
 function parseMetaAndHighlightCode(node, codeHighlighter, themeTone) {
     const codeStr = mapTextContent(node);
-    const meta = extractMetaFromChildren(node, exports.CodeHighlighterMetaKeysData, codeStr.split("\n").length);
+    const meta = extractMetaFromChildren(node, exports.CodeHighlighterMetaKeysData, codeStr);
     const { language } = meta, restMeta = __rest(meta, ["language"]);
     if (language && codeHighlighter.availableLangs.includes(language)) {
         // NOTE: Keep in mind, at this point, we are working with the markdown text
@@ -82,7 +84,7 @@ function mapTextContent(node) {
         return splitNode.join("\n");
     }
 }
-function extractMetaFromChildren(node, keys, codeLength = 0) {
+function extractMetaFromChildren(node, keys, code = "") {
     if (!node)
         return {};
     if (typeof node === "string")
@@ -108,10 +110,8 @@ function extractMetaFromChildren(node, keys, codeLength = 0) {
             [exports.CodeHighlighterMetaKeys.copy.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.copy.data]),
             [exports.CodeHighlighterMetaKeys.filename.prop]: meta[exports.CodeHighlighterMetaKeys.filename.data],
             [exports.CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.rowNumbers.data]),
-            [exports.CodeHighlighterMetaKeys.highlightRows.prop]: meta[exports.CodeHighlighterMetaKeys.highlightRows.data]
-                ? parseRowHighlights(meta[exports.CodeHighlighterMetaKeys.highlightRows.data], codeLength)
-                : [],
-            [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: [], // TODO
+            [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code.split("\n").length, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
+            [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
         };
     }
     return {};
@@ -123,23 +123,29 @@ function parseBoolean(str) {
         return false;
     return false;
 }
-function parseRowHighlights(str, codeLines) {
+function parseRowHighlights(codeLines, str) {
+    if (!str)
+        return [];
     if (str === "")
         return [];
     return str
         .split(",")
         .map((item) => {
         item = item.trim();
-        const splitted = item.split("-");
-        const start = Number.isNaN(parseInt(splitted[0], 10)) ? -1 : parseInt(splitted[0], 10);
+        const split = item.split("-");
+        let start = 0;
         let end = 0;
-        if (splitted.length === 1) {
-            end = Number.isNaN(start + 1) ? -1 : start + 1;
+        if (split.length === 0)
+            return { start, end, properties: { class: highlightRowsClass } };
+        const val = parseAndRemoveIfInvalid(split[0]);
+        start = val - 1;
+        if (split.length === 1) {
+            end = val;
         }
         else {
-            end = Number.isNaN(parseInt(splitted[1], 10)) ? -1 : parseInt(splitted[1], 10);
+            end = parseAndRemoveIfInvalid(split[1]);
         }
-        return { start, end };
+        return { start, end, properties: { class: highlightRowsClass } };
     })
         .filter((item) => {
         if (item.start === -1 || item.end === -1)
@@ -148,6 +154,43 @@ function parseRowHighlights(str, codeLines) {
             return false;
         return true;
     });
+    function parseAndRemoveIfInvalid(value) {
+        const parsed = parseInt(value, 10);
+        if (Number.isNaN(parsed))
+            return -1;
+        if (parsed < 0)
+            return -1;
+        if (parsed > codeLines)
+            return -1;
+        return parsed;
+    }
+}
+function parseSubstringHighlights(code, str) {
+    if (!str)
+        return [];
+    if (!code)
+        return [];
+    return str
+        .split(" ")
+        .map((item) => window.atob(item))
+        .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
+    function findAllNonOverlappingSubstrings(str, code) {
+        const result = [];
+        let startIndex = 0;
+        const searchLength = code.length;
+        while (startIndex <= str.length - searchLength) {
+            const index = str.indexOf(code, startIndex);
+            if (index === -1)
+                break;
+            result.push({
+                start: index,
+                end: index + searchLength,
+                properties: { class: highlightSubstringsClass },
+            });
+            startIndex = index + searchLength; // Jump past this match
+        }
+        return result;
+    }
 }
 exports.CodeHighlighterMetaKeys = {
     language: { data: "data-language", prop: "language" },

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -164,7 +164,6 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             break;
         }
         case "text": {
-            console.log("gap", gap);
             formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }

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

@@ -62,6 +62,9 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
         [`textColor-${COMP}`]: "inherit",
         [`fontWeight-${COMP}`]: "$fontWeight-bold",
         [`letterSpacing-${COMP} `]: "0",
+        [`color-anchor-${COMP} `]: "$color-surface-400",
+        [`gap-anchor-${COMP} `]: "$space-2",
+        [`textDecorationLine-anchor-${COMP} `]: "underline",
         light: {
         // --- No light-specific theme vars
         },

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -50,7 +50,7 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,
                 level: parseInt(level.replace("h", "")),
-                text: elementRef.current.textContent.trim(),
+                text: elementRef.current.textContent.trim().replace(/#$/, ""), // Remove trailing #
                 anchor: anchorRef.current,
             });
         }

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

@@ -860,8 +860,8 @@ exports.HtmlOlMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsList), // Use only themeVarsList
     defaultThemeVars: {
-        "marginTop-HtmlOl": "$space-4",
-        "marginBottom-HtmlOl": "$space-4",
+        "marginTop-HtmlOl": "$space-5",
+        "marginBottom-HtmlOl": "$space-5",
     },
 });
 exports.htmlOlTagRenderer = (0, renderers_1.createComponentRenderer)("ol", exports.HtmlOlMd, // Use HtmlOlMd instead of HtmlListMd
@@ -1278,7 +1278,7 @@ exports.HtmlThMd = (0, ComponentDefs_1.createMetadata)({
         "padding-HtmlTh": "$space-2",
         "fontSize-HtmlTh": "$fontSize-tiny",
         "fontWeight-HtmlTh": "$fontWeight-bold",
-        "backgroundColor-HtmlTh--hover": "$color-surface-200",
+        //"backgroundColor-HtmlTh--hover": "$color-surface-200",
     },
 });
 exports.htmlThTagRenderer = (0, renderers_1.createComponentRenderer)("th", exports.HtmlThMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
@@ -1323,7 +1323,7 @@ exports.HtmlTrMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "fontSize-HtmlTr": "$fontSize-small",
         "backgroundColor-row-HtmlTr": "inherit",
-        "backgroundColor-HtmlTr--hover": "$color-primary-50",
+        //"backgroundColor-HtmlTr--hover": "$color-primary-50",
     },
 });
 exports.htmlTrTagRenderer = (0, renderers_1.createComponentRenderer)("tr", exports.HtmlTrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
@@ -1366,8 +1366,8 @@ exports.HtmlUlMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsList), // Use only themeVarsList
     defaultThemeVars: {
-        "marginTop-HtmlUl": "$space-2",
-        "marginBottom-HtmlUl": "$space-2",
+        "marginTop-HtmlUl": "$space-5",
+        "marginBottom-HtmlUl": "$space-5",
     },
 });
 exports.htmlUlTagRenderer = (0, renderers_1.createComponentRenderer)("ul", exports.HtmlUlMd, // Use HtmlOlMd instead of HtmlListMd

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

@@ -34,8 +34,12 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         "backgroundColor-Admonition": "$color-primary-100",
-        "borderRadius-Admonition": "$space-2",
         "border-Admonition": "1px solid $color-primary-300",
+        "backgroundColor-Admonition-warning": "$color-warn-100",
+        "borderColor-Admonition-warning": "$color-warn-300",
+        "backgroundColor-Admonition-danger": "$color-danger-100",
+        "borderColor-Admonition-danger": "$color-danger-300",
+        "borderRadius-Admonition": "$space-2",
         "iconSize-Admonition": "$space-5",
         "paddingLeft-Admonition": "$space-2",
         "paddingRight-Admonition": "$space-6",

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

@@ -28,9 +28,10 @@ const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const Toggle_1 = require("../Toggle/Toggle");
 const NestedAppNative_1 = require("../NestedApp/NestedAppNative");
-const highlight_code_1 = require("./highlight-code");
+const highlight_code_1 = require("../CodeBlock/highlight-code");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const CodeBlockNative_1 = require("../CodeBlock/CodeBlockNative");
+const classnames_1 = __importDefault(require("classnames"));
 function PreTagComponent({ id, children, codeHighlighter }) {
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -49,6 +50,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
+    const renderHeading = (level, children) => {
+        if (typeof children === "string") {
+            const [headingLabel, anchorId] = getCustomAnchor(children);
+            if (anchorId) {
+                const currentPath = window.location.href.replace(/(?<!\/)#.*$/, "");
+                const href = `${currentPath}#${anchorId}`;
+                return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: anchorId, children: [headingLabel, (0, jsx_runtime_1.jsx)("a", { href: href, id: anchorId, "aria-label": "Permalink for this section", children: "#" })] }));
+            }
+        }
+        return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: level, children: children });
+    };
     return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: Object.assign({}, style), children: (0, jsx_runtime_1.jsx)(react_markdown_1.MarkdownHooks, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser], rehypePlugins: [rehype_raw_1.default], components: {
                 details(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
@@ -70,22 +82,22 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     }
                 },
                 h1({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h1", children: children });
+                    return renderHeading("h1", children);
                 },
                 h2({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h2", children: children });
+                    return renderHeading("h2", children);
                 },
                 h3({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h3", children: children });
+                    return renderHeading("h3", children);
                 },
                 h4({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h4", children: children });
+                    return renderHeading("h4", children);
                 },
                 h5({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h5", children: children });
+                    return renderHeading("h5", children);
                 },
                 h6({ children }) {
-                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h6", children: children });
+                    return renderHeading("h6", children);
                 },
                 p({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "markdown", children: children }));
@@ -94,7 +106,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "code", children: children }));
                 },
                 pre({ id, children }) {
-                    return (0, jsx_runtime_1.jsx)(PreTagComponent, { id: id, codeHighlighter: codeHighlighter, children: children });
+                    return ((0, jsx_runtime_1.jsx)(PreTagComponent, { id: id, codeHighlighter: codeHighlighter, children: children }));
                 },
                 strong({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "strong", children: children }));
@@ -180,6 +192,20 @@ function removeTextIndents(input) {
     const trimmedLines = lines.map((line) => line.startsWith(" ".repeat(minIndent)) ? line.slice(minIndent) : line);
     return trimmedLines.join("\n");
 }
+function getCustomAnchor(value) {
+    if (!value) {
+        return ["", ""];
+    }
+    // --- Match the pattern: "Heading text [#anchor]"
+    const match = value.match(/^(.*?)\s*\[#([^\]]+)\]$/);
+    if (match) {
+        const headingLabel = match[1].trim(); // Extract the heading text
+        const anchorId = match[2].trim(); // Extract the anchor ID
+        return [headingLabel, anchorId];
+    }
+    // If no match, return the full value as the heading label and an empty anchor ID
+    return [value.trim(), ""];
+}
 const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
@@ -237,7 +263,13 @@ const Blockquote = ({ children, style }) => {
         };
         const processedChildren = react_2.default.Children.map(children, processNode);
         // Render admonition blockquote with the updated structure
-        return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.admonitionBlockquote, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ""}`, children: emojiMap[type] || "💡" }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
+        return ((0, jsx_runtime_1.jsx)("blockquote", { className: (0, classnames_1.default)(Markdown_module_scss_1.default.admonitionBlockquote, {
+                [Markdown_module_scss_1.default.info]: type === "info",
+                [Markdown_module_scss_1.default.warning]: type === "warning",
+                [Markdown_module_scss_1.default.danger]: type === "danger",
+                [Markdown_module_scss_1.default.note]: type === "note",
+                [Markdown_module_scss_1.default.tip]: type === "tip",
+            }), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ""}`, children: emojiMap[type] || "💡" }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
     }
     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 }) }));
 };

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

@@ -39,7 +39,8 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
-        [`borderWidth-${RGOption}`]: "2px",
+        [`borderWidth-${RGOption}`]: "1px",
+        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
         [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
         [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
         [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupOption = exports.RadioGroup = void 0;
+exports.useRadioGroupValue = useRadioGroupValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
@@ -89,16 +90,31 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = "
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
+function useRadioGroupValue() {
+    const context = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    if (!context) {
+        throw new Error("useRadioGroupValue must be used within a RadioGroup");
+    }
+    const { value } = context;
+    const isChecked = (0, react_1.useCallback)((optionValue) => value === optionValue, [value]);
+    return {
+        value,
+        isChecked,
+    };
+}
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
     const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
+    const { isChecked } = useRadioGroupValue();
     const statusStyles = (0, react_1.useMemo)(() => ({
         [RadioGroup_module_scss_1.default.disabled]: !enabled,
         [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
         [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
         [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
     }), [enabled, validationContext.status, validationContext.value, value]);
-    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
+    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, {
+                    [RadioGroup_module_scss_1.default.checked]: isChecked(value),
+                }), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
     return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, style: style, children: optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
                     $checked: value === validationContext.value,
                 })] })) : (item) }, id));

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

@@ -48,9 +48,11 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-${COMP}`]: "$color-surface-400",
-        [`borderColor-${COMP}`]: "$color-surface-400",
-        [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        [`borderColor-${COMP}`]: "$color-surface-200",
+        [`borderWidth-${COMP}`]: "1px",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",