xmlui 0.9.49 → 0.9.50

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.49",
+    "version": "0.9.50",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -78,6 +78,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
         ready: (0, ComponentDefs_1.d)(`This event fires when the \`${COMP}\` component finishes rendering on the page.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     themeVarDescriptions: {
         "maxWidth-content-App": "This theme variable defines the maximum width of the main content. If the main " +
             "content is broader, the engine adds margins to keep the expected maximum size.",

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

@@ -46,6 +46,7 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
         [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -63,6 +63,7 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
         close: (0, ComponentDefs_1.d)(`This method command closes the dropdown.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${DDMCOMP}`]: "$color-surface-raised",
         [`minWidth-${DDMCOMP}`]: "160px",
@@ -107,6 +108,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
         click: (0, metadata_helpers_1.dClick)(MICOMP),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
         [`color-${MICOMP}`]: "$textColor-primary",
@@ -155,6 +157,7 @@ exports.MenuSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     description: "This component displays a separator line between menu items.",
     docFolder: DDMCOMP,
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`marginTop-${MSEP}`]: "$space-1",
         [`marginBottom-${MSEP}`]: "$space-1",

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

@@ -14,6 +14,7 @@ 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),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
         [`verticalAlign-${COMP}`]: "center",

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

@@ -158,6 +158,13 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
     },
+    apis: {
+        addItem: (0, ComponentDefs_1.d)("Adds a new item to the `FormItem` data where the particular form item holds " +
+            "a list. The function has a single parameter, the data to add to the `FormItem`. " +
+            "The new item is appended to the end of the list."),
+        removeItem: (0, ComponentDefs_1.d)("Removes the item specified by its index from the list held by the FormItem. " +
+            "The function has a single argument, the index to remove."),
+    },
     contextVars: {
         $value: (0, ComponentDefs_1.d)(`The context variable represents the current value of the \`${COMP}\`. It can be used in ` +
             `expressions and code snippets within the \`${COMP}\` instance.`),

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

@@ -57,6 +57,7 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
         omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`textColor-${COMP}`]: "inherit",

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

@@ -40,12 +40,13 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
-        [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}`]: "$color-primary-500",
+        [`textDecorationColor-${COMP}`]: "$color-primary-500",
         [`textColor-${COMP}--hover`]: `$color-primary-400`,
-        [`textDecorationColor-${COMP}--active`]: "$color-primary-200",
-        [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
-        [`textDecorationColor-${COMP}`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}--active`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--active`]: "$color-primary-400",
+        [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
         [`textUnderlineOffset-${COMP}`]: "$space-1",
         [`textDecorationLine-${COMP}`]: "underline",
         [`textDecorationStyle-${COMP}`]: "solid",
@@ -54,10 +55,9 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
         [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
         [`fontSize-${COMP}`]: "inherit",
+        [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
         [`gap-icon-${COMP}`]: "$gap-tight",
         [`padding-icon-${COMP}`]: "$space-0_5",
-        [`textColor-${COMP}`]: "$color-primary-500",
-        [`textColor-${COMP}--active`]: "$color-primary-500",
     },
 });
 /**

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

@@ -65,6 +65,10 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "accentColor-Blockquote": "$color-surface-500",
         "marginTop-HtmlLi": "$space-2_5",
         "marginBottom-HtmlLi": "$space-2_5",
+        "marginTop-Image-markdown": "$space-4",
+        "marginBottom-Image-markdown": "$space-4",
+        "marginLeft-Image-markdown": "$space-0",
+        "marginRight-Image-markdown": "$space-0",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -174,10 +174,10 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     // Apply styling based on whether image should be inline or block
                     const imgStyle = Object.assign(Object.assign({}, (props.style || {})), { display: isInline ? "inline" : "block" });
                     if (popOut) {
-                        return ((0, jsx_runtime_1.jsx)("a", { href: src, target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, className: HtmlTags_module_scss_1.default.htmlImage, style: imgStyle }, props, { children: children })) }));
+                        return ((0, jsx_runtime_1.jsx)("a", { href: src, target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, style: imgStyle }, props, { children: children })) }));
                     }
                     else {
-                        return ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, className: HtmlTags_module_scss_1.default.htmlImage, style: imgStyle }, props, { children: children })));
+                        return ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, style: imgStyle }, props, { children: children })));
                     }
                 },
                 h1({ children }) {

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

@@ -19,6 +19,7 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
             `\`vertical\` and \`vertical-sticky\` layout.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor",
         [`border-${COMP}`]: '0px solid $borderColor',

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

@@ -41,6 +41,7 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
         [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -117,6 +117,9 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",
+        dark: {
+            [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-400-rgb, .4)",
+        }
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {

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

@@ -88,6 +88,7 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         if (!exports.UCRegex.test(compoundName.value)) {
             reportError("T004");
         }
+        const codeBehind = attrs.find((attr) => attr.name === "codeBehind");
         // --- Get "method" attributes
         let api;
         const apiAttrs = attrs.filter((attr) => attr.startSegment === "method");
@@ -159,6 +160,9 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         if (vars) {
             nestedComponent.vars = Object.assign(Object.assign({}, nestedComponent.vars), vars);
         }
+        if (codeBehind) {
+            component.codeBehind = codeBehind.value;
+        }
         nestedComponent.debug = {
             source: {
                 start: element.start,
@@ -328,6 +332,10 @@ function nodeToComponentDef(node, originalGetText, fileId) {
                 // --- We already processed name
                 return;
             }
+            if (name === "codeBehind" && !startSegment) {
+                // --- We already processed codeBehind
+                return;
+            }
             // --- Compound components do not have any other attributable props
             if (!startSegment && name) {
                 reportError("T021", name);

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

@@ -680,6 +680,7 @@ declare type ComponentMetadata<TProps extends Record<string, ComponentPropertyMe
     themeVarDescriptions?: Record<string, string>;
     defaultThemeVars?: DefaultThemeVars;
     toneSpecificThemeVars?: Record<string, Record<string, string>>;
+    limitThemeVarsToComponent?: boolean;
     allowArbitraryProps?: boolean;
     specializedFrom?: string;
     docFolder?: string;
@@ -801,6 +802,7 @@ declare interface CompoundComponentDef extends Scriptable {
      *   belonging to the particular component definition.
      */
     debug?: Record<string, any>;
+    codeBehind?: string;
 }
 
 declare type CONDITIONAL_EXPRESSION = typeof T_CONDITIONAL_EXPRESSION;