xmlui 0.9.23 → 0.9.25

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

@@ -98,6 +98,8 @@ const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
 const InspectButton_1 = require("./InspectButton/InspectButton");
+const NestedApp_1 = require("./NestedApp/NestedApp");
+const CodeBlock_1 = require("./CodeBlock/CodeBlock");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -376,6 +378,7 @@ class ComponentRegistry {
             this.registerCoreComponent(Bookmark_1.bookmarkComponentRenderer);
             this.registerCoreComponent(TableOfContents_1.tableOfContentsRenderer);
             this.registerCoreComponent(Breakout_1.breakoutComponentRenderer);
+            this.registerCoreComponent(CodeBlock_1.codeBlockComponentRenderer);
         }
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
@@ -485,6 +488,8 @@ class ComponentRegistry {
         this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        // --- Nested app and related components
+        this.registerCoreComponent(NestedApp_1.nestedAppComponentRenderer);
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);

package/dist/scripts/src/components/DatePicker/DatePickerNative.js

@@ -49,6 +49,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
+require("react-day-picker/dist/style.css");
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {

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

@@ -13,7 +13,8 @@ const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // React Footer component implementation
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
+    const canRestrictContentWidth = layout !== "vertical-full-header";
     return ((0, jsx_runtime_1.jsx)("div", { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
-                [Footer_module_scss_1.default.verticalFullHeader]: layout === "vertical-full-header",
+                [Footer_module_scss_1.default.full]: !canRestrictContentWidth,
             }), children: children }) }));
 });

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

@@ -16,7 +16,6 @@ exports.defaultProps = exports.getByPath = void 0;
 exports.FormWithContextVar = FormWithContextVar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
 const react_dom_1 = require("react-dom");
 const immer_1 = __importDefault(require("immer"));
 const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
@@ -172,13 +171,22 @@ exports.defaultProps = {
     itemLabelBreak: true,
     keepModalOpenOnSubmit: false,
 };
-const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = "Cancel", saveLabel = "Save", saveInProgressLabel = "Saving...", swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = true, itemLabelWidth, itemLabelPosition = "top", keepModalOpenOnSubmit = false, }, ref) {
+// --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
+function cleanUpSubject(subject) {
+    return Object.entries(subject || {}).reduce((acc, [key, value]) => {
+        if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = "Cancel", saveLabel = "Save", saveInProgressLabel = "Saving...", swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = true, itemLabelWidth, itemLabelPosition = "top", keepModalOpenOnSubmit = false, }, ref) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
-    const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
+    const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_1.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;
-    const formContextValue = (0, react_2.useMemo)(() => {
+    const formContextValue = (0, react_1.useMemo)(() => {
         return {
             itemLabelBreak,
             itemLabelWidth,
@@ -224,13 +232,7 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         const prevFocused = document.activeElement;
         dispatch((0, formActions_1.formSubmitting)());
         try {
-            // --- Remove the properties from formState.subject where the property name ends with UNBOUND_FIELD_SUFFIX
-            const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
-                if (!key.endsWith(formActions_1.UNBOUND_FIELD_SUFFIX)) {
-                    acc[key] = value;
-                }
-                return acc;
-            }, {});
+            const filteredSubject = cleanUpSubject(formState.subject);
             yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
                 passAsDefaultBody: true,
             }));
@@ -305,8 +307,8 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
         });
     });
     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)(() => {
+    const submitButton = (0, react_1.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_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,
             update: updateData,
@@ -316,8 +318,8 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
 });
 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 [formState, dispatch] = (0, react_1.useReducer)(formReducer, initialState);
+    const $data = (0, react_1.useMemo)(() => {
         const updateData = (change) => {
             if (typeof change !== "object" || change === null || change === undefined) {
                 return;
@@ -332,14 +334,17 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
                 });
             });
         };
+        return Object.assign(Object.assign({}, cleanUpSubject(formState.subject)), { update: updateData });
+    }, [formState.subject]);
+    const nodeWithItem = (0, react_1.useMemo)(() => {
         return {
             type: "Fragment",
             vars: {
-                $data: Object.assign(Object.assign({}, formState.subject), { update: updateData }),
+                $data: $data,
             },
             children: node.children,
         };
-    }, [formState.subject, node.children]);
+    }, [$data, node.children]);
     const initialValue = extractValue(node.props.data);
     const submitMethod = extractValue.asOptionalString(node.props.submitMethod) || (initialValue ? "put" : "post");
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
@@ -348,6 +353,17 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
             defaultHandler: submitUrl
                 ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs })`
                 : undefined,
-        }), onCancel: lookupEventHandler("cancel"), onReset: lookupEventHandler("reset"), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
+            context: {
+                $data,
+            },
+        }), onCancel: lookupEventHandler("cancel", {
+            context: {
+                $data,
+            },
+        }), onReset: lookupEventHandler("reset", {
+            context: {
+                $data,
+            },
+        }), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
             !extractValue.asOptionalBoolean(node.props.loading, false), children: renderChild(nodeWithItem) }));
 }

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

@@ -151,6 +151,9 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         inputTemplate: {
             description: "This property is used to define a custom input template.",
         },
+        gap: {
+            description: "This property defines the gap between the adornments and the input area.",
+        },
     },
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
@@ -174,7 +177,7 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
 });
 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"]);
+    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, gap } = _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", "gap"]);
     //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),
@@ -205,7 +208,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     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), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), 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, {
+            : undefined, gap: extractValue.asOptionalString(gap) }, 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

@@ -69,7 +69,7 @@ function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value =
     return (0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: formContextValue, children: children });
 }
 exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue"]);
+    var { style, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, validations, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap"]);
     const defaultId = (0, react_1.useId)();
     const { parentFormItemId } = (0, react_1.useContext)(FormItemContext);
     const formItemId = (0, react_1.useMemo)(() => {
@@ -141,7 +141,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
         case "number":
         case "integer": {
-            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 })));
+            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, gap: gap })));
             break;
         }
         // NOTE: This is a prototype for the new number field
@@ -164,7 +164,8 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             break;
         }
         case "text": {
-            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            console.log("gap", gap);
+            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }
         case "password": {

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

@@ -84,6 +84,9 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H1}`]: "$fontSize-large",
         [`marginTop-${H1}`]: "0",
         [`marginBottom-${H1}`]: "0",
+        [`fontSize-${H1}-markdown`]: "$fontSize-larger",
+        [`marginTop-${H1}-markdown`]: "0",
+        [`marginBottom-${H1}-markdown`]: "$space-6",
         light: {
         // --- No light-specific theme vars
         },
@@ -106,6 +109,8 @@ exports.H2Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H2}`]: "$fontSize-medium",
         [`marginTop-${H2}`]: "0",
         [`marginBottom-${H2}`]: "0",
+        [`marginTop-${H2}-markdown`]: "$space-10",
+        [`marginBottom-${H2}-markdown`]: "$space-3",
         light: {
         // --- No light-specific theme vars
         },
@@ -128,6 +133,8 @@ exports.H3Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H3}`]: "$fontSize-normal",
         [`marginTop-${H3}`]: "0",
         [`marginBottom-${H3}`]: "0",
+        [`marginTop-${H3}-markdown`]: "$space-6",
+        [`marginBottom-${H3}-markdown`]: "$space-2",
         light: {
         // --- No light-specific theme vars
         },
@@ -150,6 +157,8 @@ exports.H4Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H4}`]: "$fontSize-small",
         [`marginTop-${H4}`]: "0",
         [`marginBottom-${H4}`]: "0",
+        [`marginTop-${H4}-markdown`]: "$space-5",
+        [`marginBottom-${H4}-markdown`]: "$space-1",
         light: {
         // --- No light-specific theme vars
         },
@@ -172,6 +181,8 @@ exports.H5Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H5}`]: "$fontSize-smaller",
         [`marginTop-${H5}`]: "0",
         [`marginBottom-${H5}`]: "0",
+        [`marginTop-${H5}-markdown`]: "0",
+        [`marginBottom-${H5}-markdown`]: "$space-0",
         light: {
         // --- No light-specific theme vars
         },
@@ -194,6 +205,8 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H6}`]: "$fontSize-tiny",
         [`marginTop-${H6}`]: "0",
         [`marginBottom-${H6}`]: "0",
+        [`marginTop-${H6}-markdown`]: "0",
+        [`marginBottom-${H6}-markdown`]: "$space-0",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -59,5 +59,5 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 }, "data-anchor": true })), children] })));
+        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, className: Heading_module_scss_1.default.anchorRef, "data-anchor": true })), children] })));
 });

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

@@ -655,7 +655,7 @@ exports.HtmlImgMd = (0, ComponentDefs_1.createMetadata)({
         loading: (0, ComponentDefs_1.d)("Specifies the loading behavior of the image"),
         referrerPolicy: (0, ComponentDefs_1.d)("Specifies the referrer policy for the image"),
         sizes: (0, ComponentDefs_1.d)("Specifies image sizes for different page layouts"),
-    },
+    }
 });
 exports.htmlImgTagRenderer = (0, renderers_1.createComponentRenderer)("img", exports.HtmlImgMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
@@ -750,6 +750,10 @@ exports.HtmlLiMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         value: (0, ComponentDefs_1.d)("Specifies the value of the list item (if the parent is an ordered list)"),
     },
+    defaultThemeVars: {
+        "marginLeft-HtmlLi": "$space-6",
+        "paddingLeft-HtmlLi": "$space-1",
+    }
 });
 exports.htmlLiTagRenderer = (0, renderers_1.createComponentRenderer)("li", exports.HtmlLiMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
@@ -1362,8 +1366,8 @@ exports.HtmlUlMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsList), // Use only themeVarsList
     defaultThemeVars: {
-        "marginTop-HtmlUl": "$space-4",
-        "marginBottom-HtmlUl": "$space-4",
+        "marginTop-HtmlUl": "$space-2",
+        "marginBottom-HtmlUl": "$space-2",
     },
 });
 exports.htmlUlTagRenderer = (0, renderers_1.createComponentRenderer)("ul", exports.HtmlUlMd, // Use HtmlOlMd instead of HtmlListMd

package/dist/scripts/src/components/Icon/DarkToLightIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DarkToLightIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dark_to_light_svg_react_1 = __importDefault(require("./svg/dark_to_light.svg?react"));
+const DarkToLightIcon = (props) => ((0, jsx_runtime_1.jsx)(dark_to_light_svg_react_1.default, Object.assign({}, props)));
+exports.DarkToLightIcon = DarkToLightIcon;

package/dist/scripts/src/components/Icon/LightToDark.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightToDarkIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const light_to_dark_svg_react_1 = __importDefault(require("./svg/light_to_dark.svg?react"));
+const LightToDarkIcon = (props) => ((0, jsx_runtime_1.jsx)(light_to_dark_svg_react_1.default, Object.assign({}, props)));
+exports.LightToDarkIcon = LightToDarkIcon;

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

@@ -81,6 +81,8 @@ const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
 const Inspect_1 = require("./Icon/Inspect");
 const MoonIcon_1 = require("./Icon/MoonIcon");
 const StarsIcon_1 = require("./Icon/StarsIcon");
+const LightToDark_1 = require("./Icon/LightToDark");
+const DarkToLightIcon_1 = require("./Icon/DarkToLightIcon");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -143,6 +145,8 @@ registerIconRenderer("plus", (props) => (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIc
 registerIconRenderer("inspect", (props) => (0, jsx_runtime_1.jsx)(Inspect_1.InspectIcon, Object.assign({}, props)));
 registerIconRenderer("plus-circle", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlinePlusCircle, Object.assign({}, props)));
 registerIconRenderer("filledplus", (props) => (0, jsx_runtime_1.jsx)(FillPlusCricleIcon_1.FillPlusCircleIcon, Object.assign({}, props)));
+registerIconRenderer("darkToLight", (props) => (0, jsx_runtime_1.jsx)(DarkToLightIcon_1.DarkToLightIcon, Object.assign({}, props)));
+registerIconRenderer("lightToDark", (props) => (0, jsx_runtime_1.jsx)(LightToDark_1.LightToDarkIcon, Object.assign({}, props)));
 registerIconRenderer("checkmark", (props) => (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, Object.assign({}, props)));
 registerIconRenderer("valid", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiCheckCircle, Object.assign({}, props)));
 registerIconRenderer("info", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiAlertOctagon, Object.assign({}, props)));

package/dist/scripts/src/components/Image/ImageNative.js

@@ -11,5 +11,5 @@ const Image_module_scss_1 = __importDefault(require("./Image.module.scss"));
 exports.Image = (0, react_1.forwardRef)(function Img({ src, alt, fit = "contain", style, onClick, aspectRatio, lazyLoad }, ref) {
     return ((0, jsx_runtime_1.jsx)("img", { src: src, ref: ref, alt: alt, loading: lazyLoad ? "lazy" : "eager", className: (0, classnames_1.default)(Image_module_scss_1.default.img, {
             [Image_module_scss_1.default.clickable]: !!onClick,
-        }), style: Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { aspectRatio: aspectRatio }), onClick: onClick }));
+        }), style: Object.assign(Object.assign({ objectFit: fit, boxShadow: "none" }, style), { flexShrink: 1, aspectRatio: aspectRatio }), onClick: onClick }));
 });

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

@@ -41,14 +41,14 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
         [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-surface-400A80",
-        [`textDecorationColor-${COMP}--active`]: "$color-surface200",
+        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}--hover`]: `$color-primary-400`,
+        [`textDecorationColor-${COMP}--active`]: "$color-primary-200",
         [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
-        [`textDecorationColor-${COMP}`]: "$color-surface-400",
+        [`textDecorationColor-${COMP}`]: "$color-primary-400",
         [`textUnderlineOffset-${COMP}`]: "$space-1",
         [`textDecorationLine-${COMP}`]: "underline",
-        [`textDecorationStyle-${COMP}`]: "dashed",
-        [`textDecorationThickness-${COMP}`]: "$space-0_5",
+        [`textDecorationStyle-${COMP}`]: "solid",
         [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
         [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
         [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",

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

@@ -94,7 +94,7 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         if (!limit) {
             return sortedItems;
         }
-        return sortedItems.slice(0, limit - 1);
+        return sortedItems.slice(0, limit);
     }, [sortedItems, limit]);
     const sectionedItems = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {

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

@@ -10,12 +10,19 @@ const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const MarkdownNative_1 = require("./MarkdownNative");
+const react_1 = require("react");
+const parse_binding_expr_1 = require("./parse-binding-expr");
+const utils_1 = require("./utils");
 const COMP = "Markdown";
 exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` displays plain text styled using markdown syntax.`,
     themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
     props: {
         content: (0, ComponentDefs_1.d)("This property sets the markdown content to display."),
+        codeHighlighter: {
+            description: "This property sets the code highlighter to use.",
+            isInternal: true,
+        },
         removeIndents: {
             description: "This boolean property specifies whether leading indents should be " +
                 "removed from the markdown content. If set to `true`, the shortest " +
@@ -26,26 +33,33 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     defaultThemeVars: {
-        "backgroundColor-Admonition": "$color-warn-300",
-        "borderRadius-Admonition": "$space-4",
-        "iconSize-Admonition": "$space-6",
-        "padding-Admonition": "$space-4",
-        "marginBottom-Admonition": "$space-4",
-        "marginLeft-Admonition-content": "$space-2",
-        "backgroundColor-Blockquote": "$color-warn-200",
+        "backgroundColor-Admonition": "$color-primary-100",
+        "borderRadius-Admonition": "$space-2",
+        "border-Admonition": "1px solid $color-primary-300",
+        "iconSize-Admonition": "$space-5",
+        "paddingLeft-Admonition": "$space-2",
+        "paddingRight-Admonition": "$space-6",
+        "paddingTop-Admonition": "$space-3",
+        "paddingBottom-Admonition": "$space-2",
+        "marginLeft-Admonition-content": "$space-1_5",
+        "marginTop-Admonition": "$space-7",
+        "marginBottom-Admonition": "$space-7",
+        "marginTop-Blockquote": "$space-7",
+        "marginBottom-Blockquote": "$space-7",
+        "paddingHorizontal-Blockquote": "$space-6",
+        "paddingTop-Blockquote": "$space-3",
+        "paddingBottom-Blockquote": "$space-2_5",
+        "backgroundColor-Blockquote": "$color-surface-100",
         "accentWidth-Blockquote": "3px",
         "accentColor-Blockquote": "$color-surface-500",
-        "padding-Blockquote": "$space-2",
-        "marginBottom-Blockquote": "$space-4",
-        "marginBottom-Text-codefence": "$space-2",
-        "marginBottom-Text-markdown": "$space-2",
-        "marginTop-HtmlLi": "$space-2",
-        "marginBottom-HtmlLi": "$space-2",
+        "marginTop-HtmlLi": "$space-2_5",
+        "marginBottom-HtmlLi": "$space-2_5",
         light: {
         // --- No light-specific theme vars
         },
         dark: {
-        // --- No dark-specific theme vars
+            "backgroundColor-Blockquote": "$color-surface-50",
+            "backgroundColor-Admonition": "$color-primary-200",
         },
     },
 });
@@ -56,7 +70,7 @@ exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     if (!renderedChildren) {
         renderedChildren = extractValue.asString(node.props.content);
     }
-    // 2. "data" property fallback)
+    // 2. "data" property fallback
     if (!renderedChildren) {
         renderedChildren = extractValue.asString(node.props.data);
     }
@@ -69,7 +83,29 @@ exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
             }
         });
     }
-    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, true), extractValue: extractValue, children: renderedChildren }));
+    return ((0, jsx_runtime_1.jsx)(TransformedMarkdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, true), codeHighlighter: extractValue(node.props.codeHighlighter), extractValue: extractValue, children: renderedChildren }));
 });
+const TransformedMarkdown = ({ children, removeIndents, style, extractValue, codeHighlighter, }) => {
+    const markdownContent = (0, react_1.useMemo)(() => {
+        if (typeof children !== "string") {
+            return null;
+        }
+        // --- Resolve binding expression values
+        // --- Resolve xmlui playground definitions
+        let resolvedMd = children;
+        while (true) {
+            const nextPlayground = (0, utils_1.observePlaygroundPattern)(resolvedMd);
+            if (!nextPlayground)
+                break;
+            resolvedMd =
+                resolvedMd.slice(0, nextPlayground[0]) +
+                    (0, utils_1.convertPlaygroundPatternToMarkdown)(nextPlayground[2]) +
+                    resolvedMd.slice(nextPlayground[1]);
+        }
+        resolvedMd = (0, parse_binding_expr_1.parseBindingExpression)(resolvedMd, extractValue);
+        return resolvedMd;
+    }, [children, extractValue]);
+    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { removeIndents: removeIndents, codeHighlighter: codeHighlighter, style: style, children: markdownContent }));
+};
 var MarkdownNative_2 = require("./MarkdownNative");
 Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return MarkdownNative_2.Markdown; } });