xmlui 0.9.10 → 0.9.12

package/dist/language-server-web-worker.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start } from "./server-common-oCD2CuF9.mjs";
+import { m as main, s as start } from "./server-common-DW5h7Q34.mjs";
 var browser = main;
 const messageReader = new browser.BrowserMessageReader(self);
 messageReader.listen((message) => {

package/dist/language-server.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start$1 } from "./server-common-oCD2CuF9.mjs";
+import { m as main, s as start$1 } from "./server-common-DW5h7Q34.mjs";
 var node = main;
 function start() {
   const connection = node.createConnection(node.ProposedFeatures.all);

package/dist/{lint-DmJOJSJa.mjs → lint-Cd70ckJ6.mjs}

@@ -1,5 +1,5 @@
 import { parseRegExpLiteral } from "@eslint-community/regexpp";
-import { S as SyntaxKind, C as CharacterCodes } from "./parser-B3m9ZEAK.mjs";
+import { S as SyntaxKind, C as CharacterCodes } from "./parser-CBXS8ft2.mjs";
 const LinkTargetMd = [
   {
     value: "_self",
@@ -5541,7 +5541,6 @@ function nodeToComponentDef(node, originalGetText, fileId) {
     const shouldCollapseWhitespace = tagName !== "event" && tagName !== "method";
     const attrs = getAttributes(node2);
     desugarKeyOnlyAttrs(attrs);
-    desugarQuotelessAttrs(attrs, getText);
     parseEscapeCharactersInAttrValues(attrs);
     parseEscapeCharactersInContent(childNodes);
     mergeConsecutiveTexts(childNodes, shouldCollapseWhitespace);
@@ -5910,15 +5909,6 @@ function desugarKeyOnlyAttrs(attrs) {
     }
   }
 }
-function desugarQuotelessAttrs(attrs, getText) {
-  var _a, _b, _c;
-  for (let attr of attrs) {
-    const attrValue = (_a = attr.children) == null ? void 0 : _a[2];
-    if (((_c = (_b = attr.children) == null ? void 0 : _b[2]) == null ? void 0 : _c.kind) === SyntaxKind.Identifier) {
-      attrValue.text = '"' + getText(attrValue) + '"';
-    }
-  }
-}
 function addToNamespaces(namespaceStack, comp, nsKey, value) {
   let nsCommaSeparated = value.split(":");
   if (nsCommaSeparated.length > 2) {

package/dist/{parser-B3m9ZEAK.mjs → parser-CBXS8ft2.mjs}

@@ -671,12 +671,15 @@ function tagNameNodesWithoutErrorsMatch(name1, name2, getText) {
 }
 function findTokenAtPos(node, position) {
   const chain = [node];
-  let chainBeforePos;
   let sharedParents;
   if (node.start > position || position > node.end) {
     return void 0;
   }
-  const res = { chainAtPos: chain };
+  const res = {
+    chainAtPos: chain,
+    chainBeforePos: void 0,
+    sharedParents: void 0
+  };
   while (node.children !== void 0 && node.children.length > 0) {
     const nodeAtPosIdx = node.children.findIndex(
       (n) => n.start <= position && (position < n.end || n.kind === SyntaxKind.EndOfFileToken && n.start <= n.end)
@@ -685,9 +688,8 @@ function findTokenAtPos(node, position) {
     const nodeBeforePos = node.children[nodeAtPosIdx - 1];
     if (nodeBeforePos !== void 0 && position <= nodeAtPos.pos) {
       sharedParents = chain.length;
-      chainBeforePos = findLastToken(nodeBeforePos);
       return {
-        chainBeforePos,
+        chainBeforePos: chain.concat(findLastToken(nodeBeforePos)),
         sharedParents,
         chainAtPos: chain.concat(findFirstToken(nodeAtPos))
       };
@@ -881,7 +883,7 @@ function parseXmlUiMarkup(text) {
       }
     }
     if (eat(SyntaxKind.Equal)) {
-      if (!eat(SyntaxKind.StringLiteral) && !eat(SyntaxKind.Identifier)) {
+      if (!eat(SyntaxKind.StringLiteral)) {
         const attrFollowWithoutIdent = [SyntaxKind.NodeEnd, SyntaxKind.NodeClose];
         errRecover(Diag_Attr_Value_Expected, attrFollowWithoutIdent);
       }

package/dist/scripts/bin/build-lib.js

@@ -1,5 +1,38 @@
 #!/usr/bin/env node
 "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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -23,6 +56,14 @@ const buildLib = (_a) => __awaiter(void 0, [_a], void 0, function* ({ watchMode,
     const env = (0, vite_1.loadEnv)(mode, process.cwd(), "");
     const umdFileName = `${env.npm_package_name}.js`;
     const esFileName = `${env.npm_package_name}.mjs`;
+    let overrides = {};
+    try {
+        const configOverrides = yield Promise.resolve(`${process.cwd() + `/vite.config-overrides`}`).then(s => __importStar(require(s)));
+        overrides = configOverrides.default || {};
+    }
+    catch (e) {
+        // console.error(e);
+    }
     const config = {
         esbuild: {
             target: "es2020",
@@ -70,7 +111,7 @@ const buildLib = (_a) => __awaiter(void 0, [_a], void 0, function* ({ watchMode,
                 },
             },
         },
-        plugins: mode === "metadata" ? [] : [(0, plugin_react_1.default)(), (0, vite_plugin_lib_inject_css_1.libInjectCss)()],
+        plugins: mode === "metadata" ? [] : [(0, plugin_react_1.default)(), (0, vite_plugin_lib_inject_css_1.libInjectCss)(), ...(overrides.plugins || [])],
     };
     yield (0, vite_1.build)((0, vite_1.defineConfig)(config));
 });

package/dist/scripts/bin/vite-xmlui-plugin.js

@@ -47,7 +47,6 @@ const pluginutils_1 = require("@rollup/pluginutils");
 const code_behind_collect_1 = require("../src/parsers/scripting/code-behind-collect");
 const fileExtensions_1 = require("../src/parsers/xmlui-parser/fileExtensions");
 const Parser_1 = require("../src/parsers/scripting/Parser");
-const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const xmlui_parser_1 = require("../src/components-core/xmlui-parser");
 const xmluiExtension = new RegExp(`.${fileExtensions_1.componentFileExtension}$`);
@@ -65,28 +64,9 @@ function viteXmluiPlugin(pluginOptions = {}) {
                 const moduleNameResolver = (moduleName) => {
                     return path.resolve(path.dirname(id), moduleName);
                 };
-                const moduleResolver = (parentModule, moduleName) => {
-                    // --- Try with .xmlui.xs extension, and then with .xs.
-                    try {
-                        const modulePath = path.resolve(path.dirname(id), `${moduleName}.${fileExtensions_1.codeBehindFileExtension}`);
-                        return fs.readFileSync(modulePath, {
-                            encoding: "utf8",
-                        });
-                    }
-                    catch (_a) {
-                        try {
-                            return fs.readFileSync(path.resolve(path.dirname(id), `${moduleName}.${fileExtensions_1.moduleFileExtension}`), {
-                                encoding: "utf8",
-                            });
-                        }
-                        catch (err) {
-                            throw err;
-                        }
-                    }
-                };
                 if (xmluiExtension.test(id)) {
                     const fileId = "" + itemIndex++;
-                    let { component, errors, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(code, fileId, moduleResolver);
+                    let { component, errors, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(code, fileId);
                     if (errors.length > 0) {
                         component = (0, xmlui_parser_1.errReportComponent)(errors, id, erroneousCompoundComponentName);
                     }
@@ -115,7 +95,7 @@ function viteXmluiPlugin(pluginOptions = {}) {
                     // Check, if codeBehind.moduleErrors is not empty (Record<string, ModuleErrors[]>); each module
                     // should be checked for errors and warnings. If there are errors, throw an error.
                     return {
-                        code: (0, pluginutils_1.dataToEsm)(codeBehind),
+                        code: (0, pluginutils_1.dataToEsm)(Object.assign(Object.assign({}, codeBehind), { src: code })),
                         map: { mappings: "" },
                     };
                 }

package/dist/scripts/bin/viteConfig.js

@@ -61,7 +61,9 @@ function getViteConfig() {
             const configOverrides = yield Promise.resolve(`${process.cwd() + `/vite.config-overrides`}`).then(s => __importStar(require(s)));
             overrides = configOverrides.default || {};
         }
-        catch (e) { }
+        catch (e) {
+            // console.error(e);
+        }
         return (0, vite_1.defineConfig)({
             plugins: [(0, plugin_react_1.default)(), (0, vite_plugin_svgr_1.default)(), (0, vite_plugin_yaml_1.default)(), (0, vite_xmlui_plugin_1.default)({}), ...(overrides.plugins || [])],
             base: withRelativeRoot ? "" : undefined,

package/dist/scripts/src/abstractions/ComponentDefs.js

@@ -2,26 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMetadata = createMetadata;
 exports.d = d;
-function createMetadata({ description, shortDescription, specializedFrom, status, props, events, contextVars, apis, nonVisual, opaque, themeVars, themeVarDescriptions, defaultThemeVars, toneSpecificThemeVars, allowArbitraryProps, docFolder, isHtmlTag, }) {
-    return {
-        description,
-        shortDescription,
-        specializedFrom,
-        status,
-        props,
-        events,
-        contextVars,
-        apis,
-        nonVisual,
-        opaque,
-        themeVars,
-        defaultThemeVars,
-        themeVarDescriptions,
-        toneSpecificThemeVars,
-        allowArbitraryProps,
-        docFolder,
-        isHtmlTag,
-    };
+function createMetadata(metadata) {
+    return metadata;
 }
 function d(description, availableValues, valueType, defaultValue, isValid, isRequired) {
     return { description, isRequired, availableValues, valueType, defaultValue, isValid };

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

@@ -12,6 +12,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
 const AppLayoutContext_1 = require("./AppLayoutContext");
 const AppNative_1 = require("./AppNative");
+const react_1 = require("react");
 const COMP = "App";
 exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
@@ -97,26 +98,65 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
-    var _a;
-    let AppHeader;
-    let Footer;
-    let NavPanel;
-    const restChildren = [];
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
-        if (child.type === "AppHeader") {
-            AppHeader = child;
-        }
-        else if (child.type === "Footer") {
-            Footer = child;
-        }
-        else if (child.type === "NavPanel") {
-            NavPanel = child;
-        }
-        else {
-            restChildren.push(child);
-        }
-    });
+function AppNode({ node, extractValue, renderChild, style, lookupEventHandler }) {
+    const { AppHeader, Footer, NavPanel, restChildren } = (0, react_1.useMemo)(() => {
+        var _a;
+        let AppHeader;
+        let Footer;
+        let NavPanel;
+        const restChildren = [];
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((rootChild) => {
+            var _a;
+            let transformedChild = Object.assign({}, rootChild);
+            if (rootChild.type === "Theme") {
+                transformedChild.children = (_a = rootChild.children) === null || _a === void 0 ? void 0 : _a.filter((child) => {
+                    if (child.type === "AppHeader") {
+                        AppHeader = Object.assign(Object.assign({}, rootChild), { children: [
+                                child
+                            ] });
+                        return false;
+                    }
+                    else if (child.type === "Footer") {
+                        Footer = Object.assign(Object.assign({}, rootChild), { children: [
+                                child
+                            ] });
+                        return false;
+                    }
+                    else if (child.type === "NavPanel") {
+                        NavPanel = Object.assign(Object.assign({}, rootChild), { children: [
+                                child
+                            ] });
+                        return false;
+                    }
+                    return true;
+                });
+                if (!transformedChild.children.length) {
+                    transformedChild = null;
+                }
+            }
+            if (rootChild.type === "AppHeader") {
+                AppHeader = rootChild;
+            }
+            else if (rootChild.type === "Footer") {
+                Footer = rootChild;
+            }
+            else if (rootChild.type === "NavPanel") {
+                NavPanel = rootChild;
+            }
+            else if (transformedChild !== null) {
+                restChildren.push(transformedChild);
+            }
+        });
+        return {
+            AppHeader,
+            Footer,
+            NavPanel,
+            restChildren
+        };
+    }, [node.children]);
     const layoutType = extractValue(node.props.layout);
-    return ((0, jsx_runtime_1.jsx)(AppNative_1.App, { scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage, true), noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false), style: layoutCss, layout: layoutType, loggedInUser: extractValue(node.props.loggedInUser), onReady: lookupEventHandler("ready"), header: renderChild(AppHeader), footer: renderChild(Footer), navPanel: renderChild(NavPanel), navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, name: extractValue(node.props.name), logo: extractValue(node.props.logo), logoDark: extractValue(node.props["logo-dark"]), logoLight: extractValue(node.props["logo-light"]), defaultTone: extractValue(node.props.defaultTone), defaultTheme: extractValue(node.props.defaultTheme), children: renderChild(restChildren) }));
+    return ((0, jsx_runtime_1.jsx)(AppNative_1.App, { scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage, true), noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false), style: style, layout: layoutType, loggedInUser: extractValue(node.props.loggedInUser), onReady: lookupEventHandler("ready"), header: renderChild(AppHeader), footer: renderChild(Footer), navPanel: renderChild(NavPanel), navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, name: extractValue(node.props.name), logo: extractValue(node.props.logo), logoDark: extractValue(node.props["logo-dark"]), logoLight: extractValue(node.props["logo-light"]), defaultTone: extractValue(node.props.defaultTone), defaultTheme: extractValue(node.props.defaultTheme), children: renderChild(restChildren) }));
+}
+exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, style: layoutCss, lookupEventHandler: lookupEventHandler }));
 });

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

@@ -85,6 +85,10 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
             type: "string",
             defaultValue: ButtonNative_1.defaultProps.contentPosition,
         },
+        contextualLabel: {
+            description: `This optional value is used to provide an accessible name for the ${COMP} in the context of its usage.`,
+            type: "string",
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),
@@ -151,5 +155,5 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
 exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, layoutCss }) => {
     const iconName = extractValue.asString(node.props.icon);
     const label = extractValue.asDisplayText(node.props.label);
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: extractValue.asOptionalString(node.props.type), variant: extractValue.asOptionalString(node.props.variant), themeColor: extractValue.asOptionalString(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue.asOptionalString(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName }), iconPosition: extractValue.asOptionalString(node.props.iconPosition), orientation: extractValue.asOptionalString(node.props.orientation), contentPosition: extractValue.asOptionalString(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), style: layoutCss, children: renderChild(node.children, { type: "Stack", orientation: "horizontal" }) || label }));
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: extractValue.asOptionalString(node.props.type), variant: extractValue.asOptionalString(node.props.variant), themeColor: extractValue.asOptionalString(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue.asOptionalString(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, "aria-hidden": true }), iconPosition: extractValue.asOptionalString(node.props.iconPosition), orientation: extractValue.asOptionalString(node.props.orientation), contentPosition: extractValue.asOptionalString(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), style: layoutCss, contextualLabel: extractValue.asOptionalString(node.props.contextualLabel), children: renderChild(node.children, { type: "Stack", orientation: "horizontal" }) || label }));
 });

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -53,6 +53,7 @@ const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const VisuallyHidden_1 = require("../VisuallyHidden");
 exports.defaultProps = {
     type: "button",
     iconPosition: "start",
@@ -64,7 +65,7 @@ exports.defaultProps = {
     autoFocus: false,
 };
 exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
-    var { id, type = exports.defaultProps.type, icon, iconPosition = exports.defaultProps.iconPosition, contentPosition = exports.defaultProps.contentPosition, orientation = exports.defaultProps.orientation, variant = exports.defaultProps.variant, themeColor = exports.defaultProps.themeColor, size = exports.defaultProps.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus = exports.defaultProps.autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
+    var { id, type = exports.defaultProps.type, icon, iconPosition = exports.defaultProps.iconPosition, contentPosition = exports.defaultProps.contentPosition, orientation = exports.defaultProps.orientation, variant = exports.defaultProps.variant, themeColor = exports.defaultProps.themeColor, size = exports.defaultProps.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus = exports.defaultProps.autoFocus, contextualLabel } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus", "contextualLabel"]);
     const innerRef = (0, react_1.useRef)(null);
     const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, innerRef) : innerRef;
     (0, react_1.useEffect)(() => {
@@ -94,5 +95,11 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
             [Button_module_scss_1.default.ghostAttention]: variant === "ghost" && themeColor === "attention",
             [Button_module_scss_1.default.alignStart]: contentPosition === "start",
             [Button_module_scss_1.default.alignEnd]: contentPosition === "end",
-        }), autoFocus: autoFocus, disabled: disabled, form: formId, style: style, onClick: onClick, onFocus: onFocus, onBlur: onBlur, children: [iconToLeft && icon, children, !iconToLeft && icon] })));
+        }), autoFocus: autoFocus, disabled: disabled, form: formId, style: style, onClick: onClick, onFocus: onFocus, onBlur: onBlur, children: [icon && iconToLeft && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon }), children, icon && !children && (0, jsx_runtime_1.jsx)(IconLabel, { icon: icon, accessibleName: contextualLabel }), icon && !iconToLeft && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon })] })));
 });
+const IconLabel = ({ icon, accessibleName = "" }) => {
+    // NOTE: the icon object provided is a React object with accessible props attribute.
+    // Typing might be off, because TS thinks props is not accessible.
+    const iconProps = icon.props;
+    return ((0, jsx_runtime_1.jsx)(VisuallyHidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("span", { children: accessibleName || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.alt) }) }));
+};

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

@@ -35,6 +35,7 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
             description: "This property is used to define a custom checkbox input template",
         },
     },
+    childrenAsTemplate: "inputTemplate",
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
@@ -59,8 +60,7 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CheckboxMd, ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, registerComponentApi, renderChild, layoutContext, }) => {
-    var _a;
-    const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
+    const inputTemplate = node.props.inputTemplate;
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
             : undefined, 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), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));

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

@@ -42,6 +42,7 @@ const RealTimeAdapter_1 = require("./RealTimeAdapter/RealTimeAdapter");
 const Form_1 = require("./Form/Form");
 const EmojiSelector_1 = require("./EmojiSelector/EmojiSelector");
 const NumberBox_1 = require("./NumberBox/NumberBox");
+const NumberBox2_1 = require("./NumberBox/NumberBox2");
 const HoverCard_1 = require("./HoverCard/HoverCard");
 const App_1 = require("./App/App");
 const NavPanel_1 = require("./NavPanel/NavPanel");
@@ -361,6 +362,7 @@ class ComponentRegistry {
             this.registerCoreComponent(TextBox_1.passwordInputComponentRenderer);
             this.registerCoreComponent(EmojiSelector_1.emojiSelectorRenderer);
             this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
+            this.registerCoreComponent(NumberBox2_1.numberBox2ComponentRenderer);
             this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
             this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
             this.registerCoreComponent(FileInput_1.fileInputRenderer);

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

@@ -20,7 +20,7 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
-        [`border-${COMP}`]: `1px solid $borderColor`,
+        [`borderTop-${COMP}`]: `1px solid $borderColor`,
         [`padding-${COMP}`]: "$space-2 $space-4",
         light: {
         // --- No light-specific theme vars

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

@@ -37,6 +37,8 @@ exports.formControlTypes = [
     "checkbox",
     "number",
     "integer",
+    "number2",
+    "integer2",
     "file",
     "select",
     "autocomplete",

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

@@ -35,6 +35,7 @@ const Validations_1 = require("./Validations");
 const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const HelperText_1 = require("./HelperText");
+const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -99,6 +100,14 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
             break;
         }
+        // NOTE: This is a prototype for the new number field
+        // works as good as the regular number field but untested
+        // in production.
+        case "integer2":
+        case "number2": {
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, min: validations.minValue, max: validations.maxValue, integersOnly: type === "integer2" })));
+            break;
+        }
         case "switch":
         case "checkbox": {
             formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 

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

@@ -19,6 +19,7 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
         },
         itemTemplate: (0, metadata_helpers_1.dComponent)("The component template to display a single item"),
     },
+    childrenAsTemplate: "itemTemplate",
     contextVars: {
         $item: (0, metadata_helpers_1.dComponent)("This value represents the current iteration item while the component renders its children."),
         $itemIndex: (0, metadata_helpers_1.dComponent)("This integer value represents the current iteration index (zero-based) while rendering children."),
@@ -30,6 +31,6 @@ exports.ItemsMd = (0, ComponentDefs_1.createMetadata)({
 exports.itemsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ItemsMd, (rendererContext) => {
     const { node, renderChild, extractValue, layoutContext } = rendererContext;
     return ((0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: extractValue(node.props.items) || extractValue(node.props.data), reverse: extractValue(node.props.reverse), renderItem: (contextVars, key) => {
-            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.children || node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: node.props.itemTemplate, renderChild: renderChild, layoutContext: layoutContext }, key));
         } }));
 });

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

@@ -71,6 +71,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: true,
         },
     },
+    childrenAsTemplate: 'itemTemplate',
     apis: {
         scrollToTop: (0, ComponentDefs_1.d)("This method scrolls the list to the top."),
         scrollToBottom: (0, ComponentDefs_1.d)("This method scrolls the list to the bottom."),
@@ -83,7 +84,7 @@ exports.ListMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(List_module_scss_1.default.themeVars),
 });
 exports.dynamicHeightListComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ListMd, ({ node, extractValue, renderChild, layoutCss, layoutContext, lookupEventHandler, registerComponentApi, }) => {
-    const itemTemplate = node.props.itemTemplate || node.children;
+    const itemTemplate = node.props.itemTemplate;
     const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
     return ((0, jsx_runtime_1.jsx)(ListNative_1.ListNative, { registerComponentApi: registerComponentApi, style: layoutCss, loading: extractValue.asOptionalBoolean(node.props.loading), items: extractValue(node.props.items) || extractValue(node.props.data), limit: extractValue(node.props.limit), groupBy: extractValue(node.props.groupBy), orderBy: extractValue(node.props.orderBy), availableGroups: extractValue(node.props.availableGroups), scrollAnchor: node.props.scrollAnchor, pageInfo: extractValue(node.props.pageInfo), idKey: extractValue(node.props.idKey), requestFetchPrevPage: lookupEventHandler("requestFetchPrevPage"), requestFetchNextPage: lookupEventHandler("requestFetchNextPage"), emptyListPlaceholder: renderChild(node.props.emptyListTemplate), groupsInitiallyExpanded: extractValue.asOptionalBoolean(node.props.groupsInitiallyExpanded), defaultGroups: extractValue(node.props.defaultGroups), borderCollapse: extractValue.asOptionalBoolean(node.props.borderCollapse, true), itemRenderer: itemTemplate &&
             ((item, key) => {

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

@@ -26,11 +26,13 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     defaultThemeVars: {
+        "backgroundColor-Admonition": "$color-warn-300",
         "borderRadius-Admonition": "$space-4",
         "iconSize-Admonition": "1.5rem",
         "padding-Admonition": "1rem",
         "marginBottom-Admonition": "1rem",
         "marginLeft-Admonition-content": ".5rem",
+        "backgroundColor-Blockquote": "$color-warn-200",
         "accentWidth-Blockquote": "3px",
         "accentColor-Blockquote": "$color-surface-500",
         "padding-Blockquote": ".5rem",

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

@@ -20,9 +20,9 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "transparent",
+        [`backgroundColor-${COMP}`]: "$backgroundColor",
         [`border-${COMP}`]: '0px solid $borderColor',
-        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingHorizontal-${COMP}`]: "0",
         [`paddingVertical-logo-${COMP}`]: "$space-4",
         [`paddingHorizontal-logo-${COMP}`]: "$space-4",
         [`marginBottom-logo-${COMP}`]: "$space-4",

package/dist/scripts/src/components/NumberBox/NumberBox2.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberBox2ComponentRenderer = exports.NumberBoxMd2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NumberBox_module_scss_1 = __importDefault(require("./NumberBox.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const metadata_helpers_1 = require("../metadata-helpers");
+const NumberBox2Native_1 = require("./NumberBox2Native");
+const COMP = "NumberBox2";
+exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
+        `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
+    props: {
+        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
+        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
+        maxLength: (0, metadata_helpers_1.dMaxLength)(),
+        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
+        required: (0, metadata_helpers_1.dRequired)(),
+        readOnly: (0, metadata_helpers_1.dReadonly)(),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
+        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        startText: (0, metadata_helpers_1.dStartText)(),
+        startIcon: (0, metadata_helpers_1.dStartIcon)(),
+        endText: (0, metadata_helpers_1.dEndText)(),
+        endIcon: (0, metadata_helpers_1.dEndIcon)(),
+        hasSpinBox: {
+            description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
+            valueType: "boolean",
+            defaultValue: true,
+        },
+        step: {
+            description: `This prop governs how big the step when clicking on the spinner of the field.`,
+            valueType: "number",
+            defaultValue: 1,
+        },
+        integersOnly: {
+            description: `This boolean property signs whether the input field accepts integers only (\`true\`) ` +
+                `or not (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        maxFractionDigits: {
+            description: `This prop sets the maximum number of decimal places allowed in the input field. ` +
+                `If the number of decimal places is greater than this value, the value will be truncated to the maximum allowed decimal places. `,
+            valueType: "number",
+            defaultValue: 3,
+        },
+        zeroOrPositive: {
+            description: `This boolean property determines whether the input value can only be 0 or positive numbers ` +
+                `(\`true\`) or also negative (\`false\`).`,
+            valueType: "boolean",
+            defaultValue: false,
+        },
+        minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+        maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
+            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+    },
+    events: {
+        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
+});
+exports.numberBox2ComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd2, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), step: extractValue(node.props.step), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), maxFractionDigits: extractValue.asOptionalNumber(node.props.maxFractionDigits), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), 
+        //maxLength={extractValue(node.props.maxLength)}
+        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) }));
+});