xmlui 0.9.87 → 0.9.90

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.87",
+    "version": "0.9.90",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -104,7 +104,6 @@
         "remark-gfm": "^4.0.1",
         "sass": "1.55.0",
         "scroll-into-view-if-needed": "^3.1.0",
-        "shiki": "^1.14.1",
         "ts-node": "10.9.1",
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",

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

@@ -22,17 +22,19 @@ exports.BackdropMd = (0, metadata_helpers_1.createMetadata)({
         backgroundColor: {
             description: "The background color of the backdrop.",
             valueType: "string",
-            defaultValue: BackdropNative_1.defaultProps.backgroundColor,
         },
         opacity: {
             description: "The opacity of the backdrop.",
             valueType: "string",
-            defaultValue: BackdropNative_1.defaultProps.opacity,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(Backdrop_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`backgroundColor-${COMP}`]: "black",
+        [`opacity-${COMP}`]: "0.1",
+    }
 });
 exports.backdropComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BackdropMd, ({ node, extractValue, renderChild, layoutCss }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(BackdropNative_1.Backdrop, { style: layoutCss, overlayTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.overlayTemplate), backgroundColor: extractValue.asOptionalString(node.props.backgroundColor), opacity: extractValue.asString(node.props.opacity), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(BackdropNative_1.Backdrop, { style: layoutCss, overlayTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.overlayTemplate), backgroundColor: extractValue.asOptionalString(node.props.backgroundColor, undefined), opacity: extractValue.asOptionalString(node.props.opacity, undefined), children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Backdrop/BackdropNative.js

@@ -3,15 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Backdrop = exports.defaultProps = void 0;
+exports.Backdrop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
-exports.defaultProps = {
-    backgroundColor: "black",
-    opacity: "0.1",
-};
-exports.Backdrop = (0, react_1.forwardRef)(function Backdrop({ style, children, overlayTemplate, backgroundColor = exports.defaultProps.backgroundColor, opacity = exports.defaultProps.opacity, }, forwardedRef) {
+exports.Backdrop = (0, react_1.forwardRef)(function Backdrop({ style, children, overlayTemplate, backgroundColor, opacity, }, forwardedRef) {
     var _a;
     const styleWithoutDims = Object.assign(Object.assign({}, style), { width: undefined });
     return ((0, jsx_runtime_1.jsxs)("div", { className: Backdrop_module_scss_1.default.backdropContainer, style: { width: (_a = style.width) !== null && _a !== void 0 ? _a : "fit-content" }, ref: forwardedRef, children: [children, (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.backdrop, style: Object.assign(Object.assign({}, styleWithoutDims), { backgroundColor, opacity }) }), overlayTemplate && (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.overlay, children: overlayTemplate })] }));

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -68,16 +68,27 @@ function parseMetaAndHighlightCode(node, codeHighlighter, themeTone) {
     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
-        const htmlCodeStr = codeHighlighter.highlight(codeStr, language, restMeta, themeTone);
-        const match = htmlCodeStr.match(/<pre\b[^>]*\bclass\s*=\s*["']([^"']*)["'][^>]*>/i);
-        const classNames = match ? match[1] : null;
-        // NOTE: Why remove the <pre>?
-        // Shiki appends <pre> tags to the highlighted code,
-        // so we would get <pre><pre><code>...</code></pre></pre>
-        let cleanedHtmlStr = htmlCodeStr.replace(/<pre\b[^>]*>|<\/pre>/gi, "");
-        const numberedRowClass = meta.rowNumbers ? "numbered" : "";
-        cleanedHtmlStr = cleanedHtmlStr.replaceAll(/<span class="line"/g, `<span class="line ${numberedRowClass}"`);
-        return { classNames, cleanedHtmlStr, codeStr, meta };
+        try {
+            const htmlCodeStr = codeHighlighter.highlight(codeStr, language, restMeta, themeTone);
+            const match = htmlCodeStr.match(/<pre\b[^>]*\bclass\s*=\s*["']([^"']*)["'][^>]*>/i);
+            const classNames = match ? match[1] : null;
+            // NOTE: Why remove the <pre>?
+            // Shiki appends <pre> tags to the highlighted code,
+            // so we would get <pre><pre><code>...</code></pre></pre>
+            let cleanedHtmlStr = htmlCodeStr.replace(/<pre\b[^>]*>|<\/pre>/gi, "");
+            const numberedRowClass = meta.rowNumbers ? "numbered" : "";
+            cleanedHtmlStr = cleanedHtmlStr.replaceAll(/<span class="line"/g, `<span class="line ${numberedRowClass}"`);
+            return { classNames, cleanedHtmlStr, codeStr, meta };
+        }
+        catch (e) {
+            // this could happen in safari after the optimized build (some regexp issues, could be remix/vite/shiki related, TBD)
+            return {
+                meta,
+                codeStr,
+                cleanedHtmlStr: codeStr,
+                classNames: null
+            };
+        }
     }
     return null;
 }

package/dist/scripts/src/components/Form/FormContext.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formControlTypesMd = exports.formControlTypes = exports.FormContext = exports.validationModeMd = exports.defaultValidationMode = exports.validationModeValues = exports.validationSeverityMd = exports.validationSeverityValues = void 0;
 exports.useFormContextPart = useFormContextPart;
+exports.useIsInsideForm = useIsInsideForm;
 const use_context_selector_1 = require("use-context-selector");
 exports.validationSeverityValues = ["error", "warning", "valid", "none"];
 exports.validationSeverityMd = [
@@ -30,6 +31,10 @@ exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
 function useFormContextPart(selector) {
     return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
 }
+function useIsInsideForm() {
+    const contextPart = useFormContextPart((value) => value === null || value === void 0 ? void 0 : value.dispatch);
+    return contextPart !== undefined;
+}
 exports.formControlTypes = [
     "text",
     "password",

package/dist/scripts/src/components/Markdown/parse-binding-expr.js

@@ -10,33 +10,21 @@ const ScriptingSourceTree_1 = require("../../components-core/script-runner/Scrip
  * @returns the parsed text with resolved binding expressions
  */
 function parseBindingExpression(text, extractValue) {
-    // Remove empty @{} expressions first - Safari/Edge compatible version
-    text = text.replaceAll(/(^|[^\\])\@\{\s*\}/g, "$1");
-    // Safari/Edge compatible iterative processing to handle adjacent bindings
-    // Process content bindings one at a time to avoid position conflicts
-    let previousText = "";
-    let iterations = 0;
-    while (text !== previousText && iterations < 100) { // Safety limit
-        previousText = text;
-        iterations++;
-        // Match first non-escaped @{...} with nested braces support
-        const match = text.match(/(^|[^\\])(\@\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\})/);
-        if (match) {
-            const fullMatch = match[0];
-            const prefix = match[1];
-            const expr = match[3];
-            const extracted = extractValue(`{${expr}}`);
-            const resultExpr = mapByType(extracted);
-            const replacement = typeof resultExpr === "object" && resultExpr !== null
-                ? JSON.stringify(resultExpr)
-                : resultExpr;
-            text = text.replace(fullMatch, prefix + replacement);
-        }
-        else {
-            break; // No more matches
-        }
-    }
-    return text;
+    // Remove empty @{} expressions first
+    text = text.replaceAll(/(?<!\\)\@\{\s*\}/g, "");
+    // The (?<!\\) is a "negative lookbehind" in regex that ensures that
+    // if escaping the @{...} expression like this: \@{...}, we don't match it
+    const regex = /(?<!\\)\@\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\}/g;
+    const result = text.replace(regex, (_, expr) => {
+        const extracted = extractValue(`{${expr}}`);
+        const resultExpr = mapByType(extracted);
+        // The result expression might be an object, in that case we stringify it here,
+        // at the last step, so that there are no unnecessary apostrophes
+        return typeof resultExpr === "object" && resultExpr !== null
+            ? JSON.stringify(resultExpr)
+            : resultExpr;
+    });
+    return result;
     // ---
     function mapByType(extracted) {
         if (extracted === null) {

package/dist/scripts/src/components/Select/SelectNative.js

@@ -55,6 +55,7 @@ const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvid
 const OptionContext_1 = require("./OptionContext");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("./HiddenOption");
+const FormContext_1 = require("../Form/FormContext");
 exports.defaultProps = {
     enabled: true,
     placeholder: "",
@@ -69,13 +70,15 @@ exports.defaultProps = {
     labelBreak: false,
 };
 const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
-    var _a;
     const { root } = (0, ThemeContext_1.useTheme)();
     const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, options, children, readOnly, } = props;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
     const stringValue = (0, react_1.useMemo)(() => {
         return value != undefined ? value + "" : undefined;
     }, [value]);
+    const selectedOption = (0, react_1.useMemo)(() => {
+        return Array.from(options).find((o) => `${o.value}` === stringValue);
+    }, [options, stringValue]);
     const onValChange = (0, react_1.useCallback)((val) => {
         var _a;
         if (readOnly) {
@@ -88,7 +91,10 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
                     [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: readOnly ? (((_a = Array.from(options).find((o) => `${o.value}` === stringValue)) === null || _a === void 0 ? void 0 : _a.label) || ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, children: placeholder }))) : ((0, jsx_runtime_1.jsx)(react_select_1.Value, { "aria-placeholder": placeholder, placeholder: placeholder })) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
+                }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
+                            [Select_module_scss_1.default.selectValue]: selectedOption !== undefined,
+                            [Select_module_scss_1.default.placeholder]: selectedOption === undefined,
+                        }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
 });
 exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, optionRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = exports.defaultProps.autoFocus, searchable = exports.defaultProps.searchable, multiSelect = exports.defaultProps.multiSelect, label, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, required = exports.defaultProps.required, inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, readOnly = false, }, ref) {
     var _a;
@@ -100,6 +106,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
     const [options, setOptions] = (0, react_1.useState)(new Set());
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
+    const isInForm = (0, FormContext_1.useIsInsideForm)();
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -213,7 +220,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                     return 0;
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: renderOptionsOrDefault(options, emptyListNode) })) }), children] }) }) }));
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: renderOptionsOrDefault(options, emptyListNode) }, isInForm ? (value ? `status-${value}` : "status-initial") : undefined)) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();

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

@@ -15,7 +15,6 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`Switch` enables users to toggle between two states: on and off.",
     props: {
-        indeterminate: (0, metadata_helpers_1.dIndeterminate)(Toggle_1.defaultProps.indeterminate),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
@@ -72,5 +71,5 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
 });

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

@@ -79,7 +79,7 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = exports.
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 0);
         }
-    }, [autoFocus]);
+    }, [autoFocus, inputRef.current]);
     // --- NOTE: This is a workaround for the jumping caret issue.
     // --- Local state can sync up values that can get set asynchronously outside the component.
     const [localValue, setLocalValue] = react_2.default.useState(value);

package/dist/scripts/src/parsers/xmlui-parser/diagnostics.js

@@ -26,6 +26,9 @@ var ErrCodes;
     ErrCodes["expTagNameAfterNamespace"] = "U014";
     ErrCodes["expCloseStartWithName"] = "U015";
     ErrCodes["expAttrNameAfterNamespace"] = "U016";
+    ErrCodes["unexpectedCloseTag"] = "U017";
+    ErrCodes["expTagNameAfterCloseStart"] = "U019";
+    ErrCodes["expAttrNameBeforeEq"] = "U020";
     ErrCodes["invalidChar"] = "W001";
     ErrCodes["untermStr"] = "W002";
     ErrCodes["untermComment"] = "W007";
@@ -33,6 +36,11 @@ var ErrCodes;
     ErrCodes["untermScript"] = "W009";
 })(ErrCodes || (exports.ErrCodes = ErrCodes = {}));
 exports.DIAGS = {
+    unexpectedCloseTag: {
+        category: DiagnosticCategory.Error,
+        code: ErrCodes.unexpectedCloseTag,
+        message: "Read '</', but there's no opening tag to close. You have too many closing tags.",
+    },
     expCloseStartWithName: function (openTagName) {
         return {
             category: DiagnosticCategory.Error,
@@ -108,16 +116,30 @@ exports.DIAGS = {
         code: ErrCodes.expAttrName,
         message: `An attribute name expected.`,
     },
-    expAttrNameAfterNamespace: {
+    expAttrNameAfterNamespace: function (namespaceName) {
+        return {
+            category: DiagnosticCategory.Error,
+            code: ErrCodes.expAttrNameAfterNamespace,
+            message: `An attribute name expected after namespace '${namespaceName}'.`,
+        };
+    },
+    expTagNameAfterNamespace: function (namespaceName) {
+        return {
+            category: DiagnosticCategory.Error,
+            code: ErrCodes.expTagNameAfterNamespace,
+            message: `A tag name expected after namespace '${namespaceName}'.`,
+        };
+    },
+    expTagNameAfterCloseStart: {
         category: DiagnosticCategory.Error,
-        code: ErrCodes.expAttrNameAfterNamespace,
-        message: `An attribute name expected after a namespaces.`,
+        code: ErrCodes.expTagNameAfterCloseStart,
+        message: "Expected tag name after '</'.",
     },
-    expTagNameAfterNamespace: {
+    expAttrNameBeforeEq: {
         category: DiagnosticCategory.Error,
-        code: ErrCodes.expTagNameAfterNamespace,
-        message: `A tag name expected after a namespaces.`,
-    }
+        code: ErrCodes.expAttrNameBeforeEq,
+        message: "Expected attribute name before '='.",
+    },
 };
 function diagnosticCategoryName(d, lowerCase = true) {
     const name = DiagnosticCategory[d.category];

package/dist/scripts/src/parsers/xmlui-parser/parser.js

@@ -73,7 +73,7 @@ function parseXmlUiMarkup(text) {
                     break;
                 default:
                     const errNode = errNodeUntil(RECOVER_FILE);
-                    errorAt(diagnostics_1.DIAGS.expTagOpen, errNode.pos, errNode.end);
+                    errorAt(diagnostics_1.DIAGS.unexpectedCloseTag, errNode.pos, errNode.end);
                     break;
             }
         }
@@ -152,10 +152,11 @@ function parseXmlUiMarkup(text) {
     }
     function parseOpeningTagName() {
         startNode();
-        bump(syntax_kind_1.SyntaxKind.Identifier);
+        const identNode = bump(syntax_kind_1.SyntaxKind.Identifier);
         if (eat(syntax_kind_1.SyntaxKind.Colon) && !eat(syntax_kind_1.SyntaxKind.Identifier)) {
             const nameNodeWithColon = completeNode(syntax_kind_1.SyntaxKind.TagNameNode);
-            errorAt(diagnostics_1.DIAGS.expTagNameAfterNamespace, nameNodeWithColon.pos, nameNodeWithColon.end);
+            const namespaceName = getText(identNode);
+            errorAt(diagnostics_1.DIAGS.expTagNameAfterNamespace(namespaceName), nameNodeWithColon.pos, nameNodeWithColon.end);
             errNodeUntil([syntax_kind_1.SyntaxKind.Identifier, ...RECOVER_OPEN_TAG]);
             return { node: nameNodeWithColon, errInName: true };
         }
@@ -196,7 +197,12 @@ function parseXmlUiMarkup(text) {
         else {
             const errNode = errNodeUntil(RECOVER_ATTR);
             if (errNode) {
-                errorAt(diagnostics_1.DIAGS.expAttrName, errNode.pos, errNode.end);
+                if (at(syntax_kind_1.SyntaxKind.Equal)) {
+                    errorAt(diagnostics_1.DIAGS.expAttrNameBeforeEq, errNode.pos, errNode.end);
+                }
+                else {
+                    errorAt(diagnostics_1.DIAGS.expAttrName, errNode.pos, errNode.end);
+                }
                 completeNode(syntax_kind_1.SyntaxKind.AttributeNode);
             }
             else {
@@ -229,16 +235,17 @@ function parseXmlUiMarkup(text) {
                 nameIdent = bump(syntax_kind_1.SyntaxKind.Identifier);
             }
             else {
+                const namespaceName = getText(nameIdent);
                 const errNode = errNodeUntil([
                     syntax_kind_1.SyntaxKind.Equal,
                     syntax_kind_1.SyntaxKind.Identifier,
                     ...RECOVER_OPEN_TAG,
                 ]);
                 if (errNode) {
-                    errorAt(diagnostics_1.DIAGS.expAttrNameAfterNamespace, errNode.pos, errNode.end);
+                    errorAt(diagnostics_1.DIAGS.expAttrNameAfterNamespace(namespaceName), errNode.pos, errNode.end);
                 }
                 else {
-                    error(diagnostics_1.DIAGS.expAttrNameAfterNamespace);
+                    error(diagnostics_1.DIAGS.expAttrNameAfterNamespace(namespaceName));
                 }
             }
         }
@@ -261,10 +268,10 @@ function parseXmlUiMarkup(text) {
             else {
                 const errNode = errNodeUntil(RECOVER_CLOSE_TAG);
                 if (errNode) {
-                    errorAt(diagnostics_1.DIAGS.expTagName, errNode.pos, errNode.end);
+                    errorAt(diagnostics_1.DIAGS.expTagNameAfterCloseStart, errNode.pos, errNode.end);
                 }
                 else {
-                    error(diagnostics_1.DIAGS.expTagName);
+                    error(diagnostics_1.DIAGS.expTagNameAfterCloseStart);
                 }
             }
             if (!eat(syntax_kind_1.SyntaxKind.NodeEnd)) {
@@ -282,10 +289,10 @@ function parseXmlUiMarkup(text) {
     }
     function parseClosingTagName() {
         startNode();
-        bump(syntax_kind_1.SyntaxKind.Identifier);
+        const identNode = bump(syntax_kind_1.SyntaxKind.Identifier);
         if (eat(syntax_kind_1.SyntaxKind.Colon) && !eat(syntax_kind_1.SyntaxKind.Identifier)) {
             const nameNodeWithColon = completeNode(syntax_kind_1.SyntaxKind.TagNameNode);
-            errorAt(diagnostics_1.DIAGS.expTagNameAfterNamespace, nameNodeWithColon.pos, nameNodeWithColon.end);
+            errorAt(diagnostics_1.DIAGS.expTagNameAfterNamespace(getText(identNode)), nameNodeWithColon.pos, nameNodeWithColon.end);
             errNodeUntil(RECOVER_OPEN_TAG);
             return nameNodeWithColon;
         }

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

@@ -621,6 +621,9 @@ declare enum ErrCodes {
     expTagNameAfterNamespace = "U014",
     expCloseStartWithName = "U015",
     expAttrNameAfterNamespace = "U016",
+    unexpectedCloseTag = "U017",
+    expTagNameAfterCloseStart = "U019",
+    expAttrNameBeforeEq = "U020",
     invalidChar = "W001",
     untermStr = "W002",
     untermComment = "W007",