xmlui 0.7.24 → 0.7.26

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

@@ -22,6 +22,6 @@ function createMetadata({ description, shortDescription, specializedFrom, status
         isHtmlTag,
     };
 }
-function d(description, availableValues, valueType, defaultValue, isValid) {
-    return { description, availableValues, valueType, defaultValue, isValid };
+function d(description, availableValues, valueType, defaultValue, isValid, isRequired) {
+    return { description, isRequired, availableValues, valueType, defaultValue, isValid };
 }

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

@@ -47,7 +47,7 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
         [`font-size-header-${COMP}`]: "$font-size-normal",
         [`font-weight-header-${COMP}`]: "$font-weight-normal",
         [`font-family-header-${COMP}`]: "$font-family",
-        [`border-${COMP}`]: "none",
+        [`border-${COMP}`]: "0px solid $color-border",
         [`width-icon-${COMP}`]: "",
         [`height-icon-${COMP}`]: "",
         light: {

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

@@ -43,6 +43,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
         [`max-content-width-${COMP}`]: "$max-content-width",
         [`shadow-header-${COMP}`]: "$shadow-spread",
         [`shadow-pages-${COMP}`]: "$shadow-spread",
+        [`scroll-padding-block-Pages`]: "$space-4",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -95,9 +95,11 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         return {
             "--header-height": !scrollWholePage ? 0 : headerHeight + "px",
             "--footer-height": !scrollWholePage ? 0 : footerHeight + "px",
-            "--scrollbar-width": scrollbarWidth + "px",
+            "--header-abs-height": headerHeight + "px",
+            "--footer-abs-height": footerHeight + "px",
+            "--scrollbar-width": noScrollbarGutters ? 0 : (scrollbarWidth + "px"),
         };
-    }, [footerHeight, headerHeight, scrollWholePage, scrollbarWidth]);
+    }, [footerHeight, headerHeight, noScrollbarGutters, scrollWholePage, scrollbarWidth]);
     const [drawerVisible, setDrawerVisible] = (0, react_1.useState)(false);
     const location = (0, react_2.useLocation)();
     const toggleDrawer = (0, react_1.useCallback)(() => {
@@ -105,7 +107,11 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     }, []);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
-        (_a = scrollPageContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+        (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "instant", // Optional if you want to skip the scrolling animation
+        });
     }, [location.pathname]);
     const layoutContextValue = (0, react_1.useMemo)(() => {
         return {

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

@@ -27,18 +27,7 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
         showLogo: (0, ComponentDefs_1.d)("Show the logo in the header", null, "boolean", true),
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-14", "max-content-width-AppHeader": "$max-content-width-App" }, (0, base_utils_1.borderSubject)("AppHeader", {
-        bottom: {
-            color: "$color-border",
-            thickness: "1px",
-            style: "solid",
-        },
-        all: {
-            color: "$color-border",
-            thickness: "0",
-            style: "solid",
-        },
-    })), (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-14", "max-content-width-AppHeader": "$max-content-width-App", "border-bottom-AppHeader": "1px solid $color-border" }, (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
             "color-bg-AppHeader": "white",
         }, dark: {
             "color-bg-AppHeader": "$color-surface-900",

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

@@ -25,17 +25,15 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(Avatar_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`radius-${COMP}`]: "4px",
-        [`thickness-border-${COMP}`]: "0px",
-        [`style-border-${COMP}`]: "solid",
-        [`border-${COMP}`]: `$thickness-border-${COMP} $style-border-${COMP} $color-border-${COMP}`,
         [`shadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
         [`color-text-${COMP}`]: "$color-text-secondary",
         [`font-weight-${COMP}`]: "$font-weight-bold",
         light: {
+            [`border-${COMP}`]: "0px solid $color-surface-400A80",
             [`color-bg-${COMP}`]: "$color-surface-100",
-            [`color-border-${COMP}`]: "$color-surface-400A80",
         },
         dark: {
+            [`border-${COMP}`]: "0px solid $color-surface-700",
             [`color-bg-${COMP}`]: "$color-surface-800",
             [`color-border-${COMP}`]: "$color-surface-700",
         },

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

@@ -15,7 +15,11 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
     description: `The \`${COMP}\` is a text label that accepts a color map to define its background color and, optionally, its label color.`,
     props: {
-        value: (0, ComponentDefs_1.d)("The text that the component displays"),
+        value: {
+            description: "The text that the component displays",
+            type: "string",
+            isRequired: true,
+        },
         variant: (0, ComponentDefs_1.d)(`Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant ` +
             `with fully rounded corners.`),
         colorMap: (0, ComponentDefs_1.d)(`The \`${COMP}\` component supports the mapping of a list of colors using the \`value\` prop as the ` +
@@ -31,15 +35,12 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
     events: {},
     themeVars: (0, themeVars_1.parseScssVar)(Badge_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-horizontal-${COMP}`]: "$space-2",
-        [`padding-vertical-${COMP}`]: "$space-0_5",
-        [`padding-${COMP}`]: `$padding-vertical-${COMP} $padding-horizontal-${COMP}`,
-        [`padding-${COMP}-pill`]: `$padding-vertical-${COMP}-pill $padding-horizontal-${COMP}-pill`,
+        [`padding-${COMP}`]: `$space-0_5 $space-2`,
+        [`border-${COMP}`]: `0px solid $color-border`,
+        [`padding-${COMP}-pill`]: `$space-0_5 $space-2`,
         [`radius-${COMP}`]: "4px",
         [`font-size-${COMP}`]: "0.8em",
         [`font-size-${COMP}-pill`]: "0.8em",
-        // [`font-weight-${COMP}`]: "$font-weight-bold",
-        // [`font-weight-${COMP}-pill`]: "$font-weight-normal",
         light: {
             [`color-bg-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
             [`color-text-${COMP}`]: "white",

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

@@ -20,6 +20,6 @@ const Bookmark = ({ uid, level = 1, children, title, omitFromToc = false }) => {
             });
         }
     }, [uid, observeIntersection, registerHeading, level, title, omitFromToc]);
-    return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, children: children }));
+    return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, "data-anchor": true, children: children }));
 };
 exports.Bookmark = Bookmark;

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

@@ -18,25 +18,79 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
     description: `Button is an interactive element that triggers an action when clicked.`,
     status: "stable",
     props: {
-        autoFocus: (0, ComponentDefs_1.d)("Indicates if the button should receive focus when the page loads.", null, "boolean", false),
-        variant: (0, ComponentDefs_1.d)("The button variant determines the level of emphasis the button should possess.", abstractions_1.buttonVariantMd, "string", "solid"),
-        themeColor: (0, ComponentDefs_1.d)("Sets the button color scheme defined in the application theme.", abstractions_1.buttonThemeMd, "string", "primary"),
-        size: (0, ComponentDefs_1.d)("The size of the button.", abstractions_1.sizeMd, "string", "sm"),
-        label: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the ${COMP}. If no label is ` +
-            `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
-            `small icon button. When the ${COMP} has nested children, it will display them and ` +
-            `ignore the value of the \`label\` prop.`),
-        type: (0, ComponentDefs_1.d)(`This optional string describes how the ${COMP} appears in an HTML context. You ` +
-            `rarely need to set this property explicitly.`, abstractions_1.buttonTypesMd, "string", abstractions_1.defaultButtonType),
-        enabled: (0, ComponentDefs_1.d)(`The value of this property indicates whether the button accepts actions (\`true\`) ` +
-            `or does not react to them (\`false\`).`, null, null, true),
-        orientation: (0, metadata_helpers_1.dOrientation)(COMP),
-        icon: (0, ComponentDefs_1.d)(`This string value denotes an icon name. The framework will render an icon if XMLUI ` +
-            `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
-            `displays only that icon.`),
-        iconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the icon in the ${COMP}.`, abstractions_1.iconPositionMd, "string", "start"),
-        contentPosition: (0, ComponentDefs_1.d)(`This optional value determines how the label and icon (or nested children) should be placed` +
-            `inside the ${COMP} component.`, abstractions_1.alignmentOptionMd, "string", "center"),
+        autoFocus: {
+            description: "Indicates if the button should receive focus when the page loads.",
+            isRequired: false,
+            type: "boolean",
+            defaultValue: false,
+        },
+        variant: {
+            description: "The button variant determines the level of emphasis the button should possess.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.buttonVariantMd,
+            defaultValue: ButtonNative_1.propDefaults.variant,
+        },
+        themeColor: {
+            description: "Sets the button color scheme defined in the application theme.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.buttonThemeMd,
+            defaultValue: ButtonNative_1.propDefaults.themeColor,
+        },
+        size: {
+            description: "Sets the size of the button.",
+            isRequired: false,
+            type: "string",
+            availableValues: abstractions_1.sizeMd,
+            defaultValue: ButtonNative_1.propDefaults.size,
+        },
+        label: {
+            description: `This property is an optional string to set a label for the ${COMP}. If no label is ` +
+                `specified and an icon is set, the ${COMP} will modify its styling to look like a ` +
+                `small icon button. When the ${COMP} has nested children, it will display them and ` +
+                `ignore the value of the \`label\` prop.`,
+            isRequired: false,
+            type: "string",
+        },
+        type: {
+            description: `This optional string describes how the ${COMP} appears in an HTML context. You ` +
+                `rarely need to set this property explicitly.`,
+            isRequired: false,
+            availableValues: abstractions_1.buttonTypesMd,
+            valueType: "string",
+            defaultValue: ButtonNative_1.propDefaults.type,
+        },
+        enabled: {
+            description: `The value of this property indicates whether the button accepts actions (\`true\`) ` +
+                `or does not react to them (\`false\`).`,
+            isRequired: false,
+            type: "boolean",
+            defaultValue: true,
+        },
+        orientation: (0, metadata_helpers_1.dOrientation)(ButtonNative_1.propDefaults.orientation),
+        icon: {
+            description: `This string value denotes an icon name. The framework will render an icon if XMLUI ` +
+                `recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP} ` +
+                `displays only that icon.`,
+            isRequired: false,
+            type: "string",
+        },
+        iconPosition: {
+            description: `This optional string determines the location of the icon in the ${COMP}.`,
+            isRequired: false,
+            availableValues: abstractions_1.iconPositionMd,
+            type: "string",
+            defaultValue: ButtonNative_1.propDefaults.iconPosition,
+        },
+        contentPosition: {
+            description: `This optional value determines how the label and icon (or nested children) should be placed` +
+                `inside the ${COMP} component.`,
+            isRequired: false,
+            availableValues: abstractions_1.alignmentOptionMd,
+            type: "string",
+            defaultValue: ButtonNative_1.propDefaults.contentPosition,
+        },
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),
@@ -133,11 +187,7 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, layoutCss }) => {
-    var _a;
     const iconName = extractValue.asString(node.props.icon);
     const label = extractValue.asDisplayText(node.props.label);
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: node.props.type, variant: extractValue(node.props.variant), themeColor: extractValue(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName }), iconPosition: extractValue(node.props.iconPosition), orientation: extractValue(node.props.orientation), contentPosition: extractValue(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : 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 }), 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 }));
 });

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

@@ -47,14 +47,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.Button = exports.propDefaults = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const abstractions_1 = require("../abstractions");
+exports.propDefaults = {
+    type: "button",
+    iconPosition: "start",
+    contentPosition: "center",
+    orientation: "horizontal",
+    variant: "solid",
+    themeColor: "primary",
+    size: "sm",
+};
 exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
-    var { id, type = abstractions_1.defaultButtonType, icon, iconPosition = "start", contentPosition = "center", orientation = "horizontal", variant = "solid", themeColor = "primary", size = "sm", disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, 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.propDefaults.type, icon, iconPosition = exports.propDefaults.iconPosition, contentPosition = exports.propDefaults.contentPosition, orientation = exports.propDefaults.orientation, variant = exports.propDefaults.variant, themeColor = exports.propDefaults.themeColor, size = exports.propDefaults.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
     (0, react_1.useEffect)(() => {

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

@@ -32,8 +32,7 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Card_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`padding-horizontal-${COMP}`]: "$space-4",
-        [`padding-vertical-${COMP}`]: "$space-4",
+        [`padding-${COMP}`]: "$space-4",
         [`border-${COMP}`]: "1px solid $color-border",
         [`radius-${COMP}`]: "$radius",
         [`shadow-${COMP}`]: "none",

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

@@ -11,6 +11,7 @@ const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
 const Toggle_1 = require("../Toggle/Toggle");
+const container_helpers_1 = require("../container-helpers");
 const COMP = "Checkbox";
 exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
@@ -30,6 +31,7 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
         description: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description ` +
             `of the ${COMP} besides its label.`),
+        inputTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom checkbox input template"),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),
@@ -63,6 +65,10 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CheckboxMd, ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, false), 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 }));
+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);
+    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, false), 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/Column/Column.js

@@ -10,7 +10,10 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component can be used within a \`Table\` to define a particular table ` +
         `column's visual properties and data bindings.`,
     props: {
-        bindTo: (0, ComponentDefs_1.d)(`Indicates what part of the data to lay out in the column.`),
+        bindTo: {
+            description: `Indicates what part of the data to lay out in the column.`,
+            isRequired: true,
+        },
         header: (0, ComponentDefs_1.d)(`Adds a label for a particular column.`),
         width: (0, ComponentDefs_1.d)(`This property defines the width of the column. You can use a numeric value, a pixel ` +
             `value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). ` +
@@ -27,6 +30,26 @@ exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
             `\`false\`, the column cannot be resized. Double-clicking the column border ` +
             `resets to the original size.`),
     },
+    contextVars: {
+        $item: {
+            description: "The data item being rendered.",
+        },
+        $row: {
+            description: "The data item being rendered (the same as \`$item\`).",
+        },
+        $itemIndex: {
+            description: "The index of the data item being rendered.",
+        },
+        $rowIndex: {
+            description: "The index of the data item being rendered (the same as \`$itemIndex\`).",
+        },
+        $colIndex: {
+            description: "The index of the column being rendered.",
+        },
+        $cell: {
+            description: "The value of the cell being rendered.",
+        },
+    }
 });
 exports.columnComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ColumnMd, (rendererContext) => {
     const { node, renderChild, extractValue, layoutCss } = rendererContext;

package/dist/scripts/src/components/Column/ColumnNative.js

@@ -20,8 +20,14 @@ function Column(_a) {
     var { nodeChildren, renderChild } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild"]);
     const id = (0, react_1.useId)();
     const { registerColumn, unRegisterColumn } = (0, TableContext_1.useTableContext)();
-    const cellRenderer = (0, react_1.useCallback)((row) => {
-        return (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, renderChild: renderChild });
+    const cellRenderer = (0, react_1.useCallback)((row, rowIndex, colIndex, value) => {
+        return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, contextVars: {
+                $rowIndex: rowIndex,
+                $colIndex: colIndex,
+                $row: row,
+                $itemIndex: rowIndex,
+                $cell: value,
+            }, renderChild: renderChild }));
     }, [nodeChildren, renderChild]);
     const safeCellRenderer = (0, react_1.useMemo)(() => {
         return nodeChildren ? cellRenderer : undefined;

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

@@ -105,6 +105,7 @@ const AutoComplete_1 = require("./AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
+const RadioItem_1 = require("./RadioGroup/RadioItem");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -319,6 +320,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
             this.registerCoreComponent(CarouselItem_1.carouselItemComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_RadioItem !== "false") {
+            this.registerCoreComponent(RadioItem_1.radioItemComponentRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
             this.registerCoreComponent(FileUploadDropZone_1.fileUploadDropZoneComponentRenderer);
         }

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

@@ -33,6 +33,6 @@ exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-exports.contentSeparatorComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ContentSeparatorMd, ({ node, layoutCss, layoutNonCss, extractValue }) => {
-    return ((0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, { orientation: layoutNonCss.orientation, size: extractValue.asSize(node.props.size), style: layoutCss }));
+exports.contentSeparatorComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ContentSeparatorMd, ({ node, layoutCss, extractValue }) => {
+    return ((0, jsx_runtime_1.jsx)(ContentSeparatorNative_1.ContentSeparator, { orientation: extractValue(node.props.orientation), size: extractValue.asSize(node.props.size), style: layoutCss }));
 });

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

@@ -9,23 +9,26 @@ const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const base_utils_1 = require("../../components-core/theming/themes/base-utils");
 const FooterNative_1 = require("./FooterNative");
 const COMP = "Footer";
 exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a component that acts as a placeholder within \`App\`.`,
     themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`color-bg-${COMP}`]: "$color-bg-AppHeader", [`align-vertical-${COMP}`]: "center", [`font-size-${COMP}`]: "$font-size-small", [`color-text-${COMP}`]: "$color-text-secondary", [`max-content-width-${COMP}`]: "$max-content-width" }, (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-2" })), (0, base_utils_1.borderSubject)(COMP, {
-        top: {
-            color: "$color-border",
-            thickness: "1px",
-            style: "solid",
-        },
-    })), { light: {
+    defaultThemeVars: {
+        [`color-bg-${COMP}`]: "$color-bg-AppHeader",
+        [`align-vertical-${COMP}`]: "center",
+        [`font-size-${COMP}`]: "$font-size-small",
+        [`color-text-${COMP}`]: "$color-text-secondary",
+        [`max-content-width-${COMP}`]: "$max-content-width",
+        [`border-${COMP}`]: `1px solid $color-border`,
+        [`padding-${COMP}`]: "$space-2 $space-4",
+        light: {
         // --- No light-specific theme vars
-        }, dark: {
+        },
+        dark: {
         // --- No dark-specific theme vars
-        } }),
+        },
+    },
 });
 exports.footerRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FooterMd, ({ node, renderChild, layoutCss, layoutContext }) => {
     return ((0, jsx_runtime_1.jsx)(FooterNative_1.Footer, { style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, children: renderChild(node.children, {

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

@@ -48,7 +48,13 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
     },
     contextVars: {
         $data: (0, ComponentDefs_1.d)(`This property represents the value of the form data. You can access the fields of the form ` +
-            `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances.`),
+            `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances. \`$data\` also ` +
+            `provides an \`update\` method as a shortcut to the Form's exposed \`update\` method.`),
+    },
+    apis: {
+        reset: (0, ComponentDefs_1.d)(`Call this event to reset the form to its initial state.`),
+        update: (0, ComponentDefs_1.d)("You can pass a data object to update the form data. The properties in the passed data " +
+            "object are updated to their values accordingly. Other form properties remain intact."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),
     defaultThemeVars: {

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

@@ -283,23 +283,52 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         dispatch((0, formActions_2.formReset)(initialValue));
         onReset === null || onReset === void 0 ? void 0 : onReset();
     });
+    const updateData = (0, misc_1.useEvent)((change) => {
+        if (typeof change !== "object" || change === null || change === undefined) {
+            return;
+        }
+        Object.entries(change).forEach(([key, value]) => {
+            dispatch({
+                type: formActions_1.FormActionKind.FIELD_VALUE_CHANGED,
+                payload: {
+                    uid: key,
+                    value: value,
+                },
+            });
+        });
+    });
     const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
     const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
     (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,
+            update: updateData,
         });
-    }, [doReset, registerComponentApi]);
+    }, [doReset, updateData, registerComponentApi]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
 function FormWithContextVar({ node, renderChild, extractValue, style, lookupEventHandler, registerComponentApi, }) {
     const [formState, dispatch] = (0, react_2.useReducer)(formReducer, initialState);
     const nodeWithItem = (0, react_2.useMemo)(() => {
+        const updateData = (change) => {
+            if (typeof change !== "object" || change === null || change === undefined) {
+                return;
+            }
+            Object.entries(change).forEach(([key, value]) => {
+                dispatch({
+                    type: formActions_1.FormActionKind.FIELD_VALUE_CHANGED,
+                    payload: {
+                        uid: key,
+                        value: value,
+                    },
+                });
+            });
+        };
         return {
             type: "Fragment",
             vars: {
-                $data: formState.subject,
+                $data: Object.assign(Object.assign({}, formState.subject), { update: updateData }),
             },
             children: node.children,
         };

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

@@ -23,6 +23,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const Validations_1 = require("./Validations");
 const FormItemNative_1 = require("./FormItemNative");
+const container_helpers_1 = require("../container-helpers");
 const COMP = "FormItem";
 exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -69,6 +70,7 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         regexInvalidMessage: (0, ComponentDefs_1.d)(`This optional string property is used to customize the message that is displayed on a ` +
             `failed regular expression test.`),
         regexInvalidSeverity: (0, ComponentDefs_1.d)(`This property sets the severity level of regular expression validation.`),
+        inputTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom input template."),
     },
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
@@ -90,8 +92,9 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         "color-text-FormItemLabel-requiredMark": "$color-danger-400",
     },
 });
-exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, layoutCss, lookupEventHandler, lookupAction, registerComponentApi, }) => {
-    const _a = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength } = _a, rest = __rest(_a, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength"]);
+exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, layoutCss, layoutContext, lookupEventHandler, lookupAction, registerComponentApi, }) => {
+    var _a;
+    const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength"]);
     //extractValue works as a memoization mechanism too (if there's nothing to resolve, it won't produce a new object every time)
     const resolvedValidationPropsAndEvents = extractValue({
         required: extractValue.asOptionalBoolean(required),
@@ -119,7 +122,10 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     const resolvedRestProps = extractValue(nonLayoutCssProps);
     const formItemType = extractValue.asOptionalString(type);
     const isCustomFormItem = formItemType === undefined && !!node.children;
-    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength) }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
-            type: formItemType
+    const inputTemplate = node.children || ((_a = node.props) === null || _a === void 0 ? void 0 : _a.inputTemplate);
+    return ((0, jsx_runtime_1.jsx)(FormItemNative_1.FormItem, Object.assign({ style: layoutCss, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), inputRenderer: inputTemplate
+            ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
+            : undefined }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
+            type: formItemType,
         })) })));
 });

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

@@ -24,7 +24,6 @@ const FileInputNative_1 = require("../FileInput/FileInputNative");
 const NumberBoxNative_1 = require("../NumberBox/NumberBoxNative");
 const SelectNative_1 = require("../Select/SelectNative");
 const RadioGroupNative_1 = require("../RadioGroup/RadioGroupNative");
-const HelperText_1 = require("../FormItem/HelperText");
 const formActions_1 = require("../Form/formActions");
 const TextAreaNative_1 = require("../TextArea/TextAreaNative");
 const misc_1 = require("../../components-core/utils/misc");
@@ -35,11 +34,12 @@ const ItemWithLabel_1 = require("./ItemWithLabel");
 const Validations_1 = require("./Validations");
 const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
+const HelperText_1 = require("./HelperText");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var { style, bindTo, type = "text", label, enabled = true, labelPosition, labelWidth, labelBreak = true, children, validations, onValidate, customValidationsDebounce, validationMode, registerComponentApi, maxTextLength } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength"]);
+    var { style, bindTo, type = "text", label, enabled = true, labelPosition, labelWidth, labelBreak = true, children, validations, onValidate, customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer"]);
     const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
     const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value.itemLabelBreak);
     const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
@@ -97,7 +97,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         case "checkbox": {
             formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 
                 // registerComponentApi={registerComponentApi}
-                enabled: isEnabled, validationStatus: validationStatus, variant: type })));
+                enabled: isEnabled, validationStatus: validationStatus, variant: type, inputRenderer: inputRenderer })));
             break;
         }
         case "file": {