xmlui 0.8.6 → 0.9.1

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

@@ -118,66 +118,34 @@ exports.ButtonMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingVertical-${COMP}-md`]: "$space-3",
         [`paddingHorizontal-${COMP}-lg`]: "$space-5",
         [`paddingVertical-${COMP}-lg`]: "$space-4",
-        light: {
-            [`textColor-${COMP}`]: "$color-surface-950",
-            [`textColor-${COMP}-solid`]: "$color-surface-50",
-            [`borderColor-${COMP}-primary`]: "$color-primary-500",
-            [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
-            [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
-            [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-            [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
-            [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
-            [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`textColor-${COMP}-primary-outlined`]: "$color-primary-900",
-            [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-950",
-            [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-900",
-            [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
-            [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
-            [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
-            [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
-            [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
-            [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
-            [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
-            [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
-            [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
-            [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
-            [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-50",
-            [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-100",
-            [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-50",
-            [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
-        },
-        dark: {
-            [`textColor-${COMP}`]: "$color-surface-50",
-            [`textColor-${COMP}-solid`]: "$color-surface-50",
-            [`borderColor-${COMP}-primary`]: "$color-primary-500",
-            [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-600",
-            [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
-            [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-900",
-            [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-950",
-            [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
-            [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
-            [`textColor-${COMP}-primary-outlined`]: "$color-primary-100",
-            [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
-            [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
-            [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-900",
-            [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-950",
-            [`borderColor-${COMP}-secondary`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
-            [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-600",
-            [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-500",
-            [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-900",
-            [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-950",
-            [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
-            [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
-            [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-900",
-            [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-950",
-            [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-900",
-            [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-950",
-        },
+        [`textColor-${COMP}`]: "$color-surface-950",
+        [`textColor-${COMP}-solid`]: "$const-color-surface-50",
+        [`borderColor-${COMP}-primary`]: "$color-primary-500",
+        [`backgroundColor-${COMP}-primary--hover`]: "$color-primary-400",
+        [`backgroundColor-${COMP}-primary--active`]: "$color-primary-500",
+        [`backgroundColor-${COMP}-primary-outlined--hover`]: "$color-primary-50",
+        [`backgroundColor-${COMP}-primary-outlined--active`]: "$color-primary-100",
+        [`borderColor-${COMP}-primary-outlined`]: "$color-primary-600",
+        [`borderColor-${COMP}-primary-outlined--hover`]: "$color-primary-500",
+        [`textColor-${COMP}-primary-outlined`]: "$color-primary-900",
+        [`textColor-${COMP}-primary-outlined--hover`]: "$color-primary-950",
+        [`textColor-${COMP}-primary-outlined--active`]: "$color-primary-900",
+        [`backgroundColor-${COMP}-primary-ghost--hover`]: "$color-primary-50",
+        [`backgroundColor-${COMP}-primary-ghost--active`]: "$color-primary-100",
+        [`borderColor-${COMP}-secondary`]: "$color-secondary-100",
+        [`backgroundColor-${COMP}-secondary`]: "$color-secondary-500",
+        [`backgroundColor-${COMP}-secondary--hover`]: "$color-secondary-400",
+        [`backgroundColor-${COMP}-secondary--active`]: "$color-secondary-500",
+        [`backgroundColor-${COMP}-secondary-outlined--hover`]: "$color-secondary-50",
+        [`backgroundColor-${COMP}-secondary-outlined--active`]: "$color-secondary-100",
+        [`backgroundColor-${COMP}-secondary-ghost--hover`]: "$color-secondary-100",
+        [`backgroundColor-${COMP}-secondary-ghost--active`]: "$color-secondary-100",
+        [`backgroundColor-${COMP}-attention--hover`]: "$color-danger-400",
+        [`backgroundColor-${COMP}-attention--active`]: "$color-danger-500",
+        [`backgroundColor-${COMP}-attention-outlined--hover`]: "$color-danger-50",
+        [`backgroundColor-${COMP}-attention-outlined--active`]: "$color-danger-100",
+        [`backgroundColor-${COMP}-attention-ghost--hover`]: "$color-danger-50",
+        [`backgroundColor-${COMP}-attention-ghost--active`]: "$color-danger-100",
     },
 });
 exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, layoutCss }) => {

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

@@ -57,12 +57,7 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
         [`border-${COMP}`]: "1px solid $borderColor",
         [`borderRadius-${COMP}`]: "$borderRadius",
         [`boxShadow-${COMP}`]: "none",
-        light: {
-            [`backgroundColor-${COMP}`]: "white",
-        },
-        dark: {
-            [`backgroundColor-${COMP}`]: "$color-surface-900",
-        },
+        [`backgroundColor-${COMP}`]: "$color-surface-raised",
     },
 });
 exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", exports.CardMd, ({ node, extractValue, renderChild, layoutCss }) => {

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

@@ -52,18 +52,10 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        light: {
-            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
-            [`borderColor-checked-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
-        },
-        dark: {
-            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
-            [`borderColor-checked-${COMP}`]: "$color-primary-400",
-            [`backgroundColor-checked-${COMP}`]: "$color-primary-400",
-            [`backgroundColor-${COMP}--disabled`]: "$color-surface-800",
-        },
+        [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+        [`borderColor-checked-${COMP}`]: "$color-primary-500",
+        [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
+        [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
     },
 });
 exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CheckboxMd, ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, registerComponentApi, renderChild, layoutContext, }) => {

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

@@ -99,6 +99,7 @@ const Backdrop_1 = require("./Backdrop/Backdrop");
 const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
+const SubNavPanel_1 = require("./SubNavPanel/SubNavPanel");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -272,6 +273,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
             this.registerCoreComponent(NavPanel_1.navPanelRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_SubNavPanel !== "false") {
+            this.registerCoreComponent(SubNavPanel_1.subNavPanelRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
             this.registerCoreComponent(Pages_1.pagesRenderer);
             this.registerCoreComponent(Pages_1.pageRenderer);

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

@@ -111,16 +111,9 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`textColor-value-${COMP}`]: "$textColor-primary",
-        light: {
-            [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
-            [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
-            [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",
-        },
-        dark: {
-            [`backgroundColor-menu-${COMP}`]: "$color-surface-950",
-            [`backgroundColor-item-${COMP}--hover`]: "$color-surface-600",
-            [`backgroundColor-item-${COMP}--active`]: "$color-surface-700",
-        },
+        [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
+        [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
+        [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",
     },
 });
 exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DatePickerMd, ({ node, state, updateState, extractValue, layoutCss, lookupEventHandler, registerComponentApi, }) => {

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

@@ -62,7 +62,7 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${DDMCOMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-${DDMCOMP}`]: "$color-surface-raised",
         [`minWidth-${DDMCOMP}`]: "160px",
         [`boxShadow-${DDMCOMP}`]: "$boxShadow-xl",
         [`borderStyle-${DDMCOMP}-content`]: "solid",

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

@@ -96,34 +96,18 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "gap-Form": "$space-4",
         "gap-buttonRow-Form": "$space-4",
-        light: {
-            "backgroundColor-ValidationDisplay-error": "$color-danger-100",
-            "backgroundColor-ValidationDisplay-warning": "$color-warn-100",
-            "backgroundColor-ValidationDisplay-info": "$color-primary-100",
-            "backgroundColor-ValidationDisplay-valid": "$color-success-100",
-            "color-accent-ValidationDisplay-error": "$color-error",
-            "color-accent-ValidationDisplay-warning": "$color-warning",
-            "color-accent-ValidationDisplay-info": "$color-info",
-            "color-accent-ValidationDisplay-valid": "$color-valid",
-            "textColor-ValidationDisplay-error": "$color-error",
-            "textColor-ValidationDisplay-warning": "$color-warning",
-            "textColor-ValidationDisplay-info": "$color-info",
-            "textColor-ValidationDisplay-valid": "$color-valid",
-        },
-        dark: {
-            "backgroundColor-ValidationDisplay-error": "$color-danger-900",
-            "backgroundColor-ValidationDisplay-warning": "$color-warn-900",
-            "backgroundColor-ValidationDisplay-info": "$color-secondary-800",
-            "backgroundColor-ValidationDisplay-valid": "$color-success-900",
-            "color-accent-ValidationDisplay-error": "$color-danger-500",
-            "color-accent-ValidationDisplay-warning": "$color-warn-700",
-            "color-accent-ValidationDisplay-info": "$color-surface-200",
-            "color-accent-ValidationDisplay-valid": "$color-success-600",
-            "textColor-ValidationDisplay-error": "$color-danger-500",
-            "textColor-ValidationDisplay-warning": "$color-warn-700",
-            "textColor-ValidationDisplay-info": "$color-secondary-200",
-            "textColor-ValidationDisplay-valid": "$color-success-600",
-        },
+        "backgroundColor-ValidationDisplay-error": "$color-danger-100",
+        "backgroundColor-ValidationDisplay-warning": "$color-warn-100",
+        "backgroundColor-ValidationDisplay-info": "$color-primary-100",
+        "backgroundColor-ValidationDisplay-valid": "$color-success-100",
+        "color-accent-ValidationDisplay-error": "$color-error",
+        "color-accent-ValidationDisplay-warning": "$color-warning",
+        "color-accent-ValidationDisplay-info": "$color-info",
+        "color-accent-ValidationDisplay-valid": "$color-valid",
+        "textColor-ValidationDisplay-error": "$color-error",
+        "textColor-ValidationDisplay-warning": "$color-warning",
+        "textColor-ValidationDisplay-info": "$color-info",
+        "textColor-ValidationDisplay-valid": "$color-valid",
     },
 });
 exports.formComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormMd, ({ node, renderChild, extractValue, layoutCss, lookupEventHandler, registerComponentApi }) => {

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

@@ -140,6 +140,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
             break;
         }
         case formActions_1.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
+            //console.log(state.validationResults[field]) //action.payload.fieldValidationResults
             state.submitInProgress = false;
             state.generalValidationResults = action.payload.generalValidationResults;
             Object.keys(state.validationResults).forEach((key) => {
@@ -148,6 +149,14 @@ const formReducer = (0, immer_1.default)((state, action) => {
             });
             Object.entries(action.payload.fieldValidationResults).forEach(([field, singleValidationResults]) => {
                 var _a;
+                if (!state.validationResults[field]) {
+                    state.validationResults[field] = {
+                        isValid: false,
+                        validations: [],
+                        partial: false,
+                        validatedValue: state.subject[field],
+                    };
+                }
                 state.validationResults[field].validations = [
                     ...(((_a = state.validationResults[field]) === null || _a === void 0 ? void 0 : _a.validations) || []),
                     ...(singleValidationResults || []),

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

@@ -18,7 +18,7 @@ const HelperText = ({ text = "", status, style }) => {
             return (0, jsx_runtime_1.jsx)(ErrorIcon_1.ErrorIcon, { color: "var(--xmlui-color-error)" });
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, classnames_1.default)(HelperText_module_scss_1.default.helper, {
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-validation-status": status, style: style, className: (0, classnames_1.default)(HelperText_module_scss_1.default.helper, {
             [HelperText_module_scss_1.default.valid]: status === "valid",
             [HelperText_module_scss_1.default.warning]: status === "warning",
             [HelperText_module_scss_1.default.error]: status === "error",

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

@@ -15,7 +15,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, lab
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     if (label === undefined) {
-        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, onFocus: onFocus, onBlur: onBlur, ref: ref, children: children }));
+        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, ref: ref, children: children }));
         // return cloneElement(children as ReactElement, {
         //   ...mergeProps((children as ReactElement).props, {
         //     style,
@@ -31,7 +31,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, lab
                     [FormItem_module_scss_1.default.start]: labelPosition === "start",
                     [FormItem_module_scss_1.default.end]: labelPosition === "end",
                     [FormItem_module_scss_1.default.shrinkToLabel]: shrinkToLabel,
-                }), onFocus: onFocus, onBlur: onBlur, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, onClick: () => document.getElementById(inputId).focus(), style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth, flexShrink: labelWidth !== undefined ? 0 : undefined }), className: (0, classnames_1.default)(FormItem_module_scss_1.default.inputLabel, {
+                }), children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, onClick: () => document.getElementById(inputId).focus(), style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth, flexShrink: labelWidth !== undefined ? 0 : undefined }), className: (0, classnames_1.default)(FormItem_module_scss_1.default.inputLabel, {
                             [FormItem_module_scss_1.default.required]: required,
                             [FormItem_module_scss_1.default.disabled]: !enabled,
                             [FormItem_module_scss_1.default.labelBreak]: labelBreak,

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

@@ -47,7 +47,6 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
     }, []);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (elementRef.current && anchorId && !omitFromToc) {
-            console.log("HERE", { anchorId, registerHeading, level, omitFromToc });
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,
                 level: parseInt(level.replace("h", "")),

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

@@ -1269,12 +1269,7 @@ exports.HtmlThMd = (0, ComponentDefs_1.createMetadata)({
         "padding-HtmlTh": "$space-2",
         "fontSize-HtmlTh": "$fontSize-tiny",
         "fontWeight-HtmlTh": "$fontWeight-bold",
-        light: {
-            "backgroundColor-HtmlTh--hover": "$color-surface-200",
-        },
-        dark: {
-            "backgroundColor-HtmlTh--hover": "$color-surface-800",
-        },
+        "backgroundColor-HtmlTh--hover": "$color-surface-200",
     },
 });
 exports.htmlThTagRenderer = (0, renderers_1.createComponentRenderer)("th", exports.HtmlThMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
@@ -1289,13 +1284,8 @@ exports.HtmlTheadMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsThead),
     defaultThemeVars: {
         "textTransform-HtmlThead": "uppercase",
-        light: {
-            "backgroundColor-HtmlThead": "$color-surface-100",
-            "textColor-HtmlThead": "$color-surface-500",
-        },
-        dark: {
-            "backgroundColor-HtmlThead": "$color-surface-950",
-        },
+        "backgroundColor-HtmlThead": "$color-surface-100",
+        "textColor-HtmlThead": "$color-surface-500",
     },
 });
 exports.htmlTheadTagRenderer = (0, renderers_1.createComponentRenderer)("thead", exports.HtmlTheadMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
@@ -1324,12 +1314,7 @@ exports.HtmlTrMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "fontSize-HtmlTr": "$fontSize-small",
         "backgroundColor-row-HtmlTr": "inherit",
-        light: {
-            "backgroundColor-HtmlTr--hover": "$color-primary-50",
-        },
-        dark: {
-            "backgroundColor-HtmlTr--hover": "$color-primary-900",
-        },
+        "backgroundColor-HtmlTr--hover": "$color-primary-50",
     },
 });
 exports.htmlTrTagRenderer = (0, renderers_1.createComponentRenderer)("tr", exports.HtmlTrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {

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

@@ -103,6 +103,8 @@ registerIconRenderer("users", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUsers, Ob
 registerIconRenderer("refresh", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiRefreshCcw, Object.assign({}, props)));
 registerIconRenderer("chevrondown", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiChevronDown, Object.assign({}, props)));
 registerIconRenderer("chevronup", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiChevronUp, Object.assign({}, props)));
+registerIconRenderer("chevronright", (props) => (0, jsx_runtime_1.jsx)(ChevronRight_1.ChevronRightIcon, Object.assign({}, props)));
+registerIconRenderer("chevronleft", (props) => (0, jsx_runtime_1.jsx)(ChevronLeft_1.ChevronLeftIcon, Object.assign({}, props)));
 registerIconRenderer("dotmenu", (props) => (0, jsx_runtime_1.jsx)(DotMenuIcon_1.DotMenuIcon, Object.assign({}, props)));
 registerIconRenderer("dotmenuhorizontal", (props) => ((0, jsx_runtime_1.jsx)(DotMenuHorizontalIcon_1.DotMenuHorizontalIcon, Object.assign({}, props))));
 registerIconRenderer("noresult", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiSlash, Object.assign({}, props)));
@@ -139,8 +141,6 @@ 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("chevronright", (props) => (0, jsx_runtime_1.jsx)(ChevronRight_1.ChevronRightIcon, Object.assign({}, props)));
-registerIconRenderer("chevronleft", (props) => (0, jsx_runtime_1.jsx)(ChevronLeft_1.ChevronLeftIcon, 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/Link/Link.js

@@ -56,14 +56,8 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${COMP}`]: "inherit",
         [`gap-icon-${COMP}`]: "$gap-tight",
         [`padding-icon-${COMP}`]: "$space-0_5",
-        light: {
-            [`textColor-${COMP}`]: "$color-primary-500",
-            [`textColor-${COMP}--active`]: "$color-primary-500",
-        },
-        dark: {
-            [`textColor-${COMP}`]: "$color-primary-500",
-            [`textColor-${COMP}--active`]: "$color-primary-500",
-        },
+        [`textColor-${COMP}`]: "$color-primary-500",
+        [`textColor-${COMP}--active`]: "$color-primary-500",
     },
 });
 /**

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

@@ -16,6 +16,7 @@ const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const ImageNative_1 = require("../Image/ImageNative");
 const Toggle_1 = require("../Toggle/Toggle");
+const ScriptingSourceTreeExp_1 = require("../../abstractions/scripting/ScriptingSourceTreeExp");
 exports.defaultProps = {
     removeIndents: true,
 };
@@ -252,10 +253,9 @@ function bindingExpression({ extractValue }) {
     }
     function parseArrowFunc(extracted) {
         if (extracted.hasOwnProperty("type") &&
-            extracted.type === "ArrowE" &&
-            (extracted === null || extracted === void 0 ? void 0 : extracted._ARROW_EXPR_) &&
-            extracted.hasOwnProperty("source")) {
-            return extracted.source;
+            extracted.type === ScriptingSourceTreeExp_1.T_ARROW_EXPRESSION &&
+            (extracted === null || extracted === void 0 ? void 0 : extracted._ARROW_EXPR_)) {
+            return "[xmlui function]";
         }
         return "";
     }

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

@@ -51,9 +51,7 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
-            [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
-        } }),
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0" }),
 });
 exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {
     var _a, _b;

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

@@ -19,8 +19,39 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
         `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
-        icon: (0, ComponentDefs_1.d)(`This property defines an optional icon to display along with the \`${COMP}\` label.`),
-        to: (0, ComponentDefs_1.d)(`This property defines an optional navigation link.`),
+        initiallyExpanded: (0, ComponentDefs_1.d)('This property defines whether the group is initially expanded or collapsed.'),
+        to: {
+            description: `This property defines an optional navigation link.`,
+            valueType: "string",
+        },
+        icon: {
+            description: `This property defines an optional icon to display along with the \`${COMP}\` label.`,
+            valueType: "string",
+        },
+        iconHorizontalExpanded: {
+            description: "Set a custom icon to display when the navigation menu is expanded, " +
+                "is in a **horizontal** app layout, and is in a navigation submenu.",
+            valueType: "string",
+            defaultValue: NavGroupNative_1.defaultProps.iconHorizontalExpanded,
+        },
+        iconVerticalExpanded: {
+            description: "Set a custom icon to display when the navigation menu is expanded, " +
+                "is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
+            valueType: "string",
+            defaultValue: NavGroupNative_1.defaultProps.iconVerticalExpanded,
+        },
+        iconHorizontalCollapsed: {
+            description: "Set a custom icon to display when the navigation menu is collapsed, " +
+                "is in a **horizontal** app layout, and is in a navigation submenu.",
+            valueType: "string",
+            defaultValue: NavGroupNative_1.defaultProps.iconHorizontalCollapsed,
+        },
+        iconVerticalCollapsed: {
+            description: "Set a custom icon to display when the navigation menu is collapsed, " +
+                "is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
+            valueType: "string",
+            defaultValue: NavGroupNative_1.defaultProps.iconVerticalCollapsed,
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
@@ -30,5 +61,5 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, renderChild: renderChild }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
 });

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavGroup = void 0;
+exports.NavGroup = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dropdown_menu_1 = require("@radix-ui/react-dropdown-menu");
-const classnames_1 = __importDefault(require("classnames"));
 const NavGroup_module_scss_1 = __importDefault(require("./NavGroup.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const mergeProps_1 = require("../../components-core/utils/mergeProps");
@@ -16,10 +15,20 @@ const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("../NavLink/NavLinkNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
+exports.defaultProps = {
+    iconHorizontalExpanded: "chevronleft",
+    iconHorizontalCollapsed: "chevronright",
+    iconVerticalExpanded: "chevronup",
+    iconVerticalCollapsed: "chevrondown",
+};
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,
+    iconHorizontalCollapsed: exports.defaultProps.iconHorizontalCollapsed,
+    iconHorizontalExpanded: exports.defaultProps.iconHorizontalExpanded,
+    iconVerticalCollapsed: exports.defaultProps.iconVerticalCollapsed,
+    iconVerticalExpanded: exports.defaultProps.iconVerticalExpanded,
 });
-exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to }, ref) {
+exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
     const { level } = (0, react_1.useContext)(NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
@@ -32,15 +41,19 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const navGroupContextValue = (0, react_1.useMemo)(() => {
         return {
             level: level + 1,
+            iconHorizontalCollapsed: iconHorizontalCollapsed !== null && iconHorizontalCollapsed !== void 0 ? iconHorizontalCollapsed : exports.defaultProps.iconHorizontalCollapsed,
+            iconHorizontalExpanded: iconHorizontalExpanded !== null && iconHorizontalExpanded !== void 0 ? iconHorizontalExpanded : exports.defaultProps.iconHorizontalExpanded,
+            iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
+            iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
     }, [level]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
 });
-const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, }, ref) {
-    const { level } = (0, react_1.useContext)(NavGroupContext);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
+const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, }, ref) {
+    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext);
+    const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
     const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? "chevronup" : "chevrondown" })] }), expanded &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
                 renderChild(node.children, {
                     wrapChild: ({ node }, renderedChild) => {
                         if (node.type === "NavLink") {
@@ -56,7 +69,7 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({
                 })] }));
 });
 const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, }, ref) {
-    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
     let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;
@@ -66,9 +79,8 @@ const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ sty
         Trigger = react_dropdown_menu_1.DropdownMenuSubTrigger;
         Content = react_dropdown_menu_1.DropdownMenuSubContent;
     }
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.withNavGroupChevron, {
-                            [NavGroup_module_scss_1.default.pointRight]: level >= 1,
-                        }), children: label }) }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
                         wrapChild: ({ node }, renderedChild, hints) => {
                             if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
                                 return renderedChild;

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

@@ -73,17 +73,10 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
         [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
         [`outlineOffset-${COMP}--focus`]: "-1px",
         [`borderRadius-indicator-${COMP}`]: "$borderRadius",
-        light: {
-            [`color-icon-${COMP}`]: "$color-surface-500",
-            [`color-indicator-${COMP}--active`]: "$color-primary-500",
-            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
-            [`color-indicator-${COMP}--hover`]: "$color-primary-600",
-        },
-        dark: {
-            [`color-indicator-${COMP}--active`]: "$color-primary-500",
-            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
-            [`color-indicator-${COMP}--hover`]: "$color-primary-400",
-        },
+        [`color-icon-${COMP}`]: "$color-surface-500",
+        [`color-indicator-${COMP}--active`]: "$color-primary-500",
+        [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
+        [`color-indicator-${COMP}--hover`]: "$color-primary-600",
     },
 });
 exports.navLinkComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavLinkMd, ({ node, extractValue, renderChild, layoutCss }) => {

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

@@ -26,12 +26,7 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingVertical-logo-${COMP}`]: "$space-4",
         [`paddingHorizontal-logo-${COMP}`]: "$space-4",
         [`marginBottom-logo-${COMP}`]: "$space-4",
-        light: {
-            [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
-        },
-        dark: {
-            [`boxShadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
-        },
+        [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
     },
 });
 exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {

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

@@ -25,14 +25,8 @@ exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-${COMP}`]: "$borderRadius",
         [`borderRadius-indicator-${COMP}`]: "0px",
         [`thickness-${COMP}`]: "$space-2",
-        light: {
-            [`backgroundColor-${COMP}`]: "$color-surface-200",
-            [`color-indicator-${COMP}`]: "$color-primary-500",
-        },
-        dark: {
-            [`backgroundColor-${COMP}`]: "$color-surface-700",
-            [`color-indicator-${COMP}`]: "$color-primary-500",
-        },
+        [`backgroundColor-${COMP}`]: "$color-surface-200",
+        [`color-indicator-${COMP}`]: "$color-primary-500",
     },
 });
 exports.progressBarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ProgressBarMd, ({ node, extractValue, layoutCss }) => {