xmlui 0.9.59 → 0.9.60

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.59",
+    "version": "0.9.60",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -17,11 +17,11 @@
         "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
         "prepublishOnly": "clean-package",
         "postpublish": "clean-package restore",
+        "prepare-docs-data": "npm run build:xmlui-metadata",
         "generate-docs-summaries": "node scripts/generate-docs/generate-summary-files.mjs",
-        "generate-docs": "node scripts/generate-docs/get-docs.mjs",
-        "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs && npm run generate-docs-summaries",
-        "export-themes": "npm run build:xmlui-metadata && node scripts/generate-docs/create-theme-files.mjs",
-        "generate-docs-with-refresh": "npm run build:xmlui-metadata && npm run generate-docs && npm run generate-docs-summaries",
+        "generate-docs": "node scripts/generate-docs/get-docs.mjs && npm run generate-docs-summaries",
+        "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs",
+        "export-themes": "npm run prepare-docs-data && node scripts/generate-docs/create-theme-files.mjs",
         "gen:langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
     },
     "dependencies": {

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

@@ -65,7 +65,7 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`paddingHorizontal-header-${COMP}`]: "$space-3",
         [`paddingVertical-header-${COMP}`]: "$space-3",
-        [`verticalAlignment-header-${COMP}`]: "center",
+        [`verticalAlign-header-${COMP}`]: "center",
         [`fontSize-header-${COMP}`]: "$fontSize-normal",
         [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-header-${COMP}`]: "$fontFamily",

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

@@ -315,16 +315,12 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
     return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
 }
 const HIDDEN_STYLE = {
-    position: "absolute",
-    top: "-9999px",
     display: "none",
 };
-const indexerContextValue = {
-    indexing: true,
-};
 function SearchIndexCollector({ Pages, renderChild }) {
     var _a, _b;
     const appContext = (0, AppContext_1.useAppContext)();
+    const indexerContextValue = (0, react_1.useMemo)(() => ({ indexing: true }), []);
     const setIndexing = (0, SearchContext_1.useSearchContextSetIndexing)();
     const [isClient, setIsClient] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {

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

@@ -46,7 +46,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
-    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll, appGlobals } = (0, AppContext_1.useAppContext)();
+    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll } = (0, AppContext_1.useAppContext)();
     const hasRegisteredHeader = header !== undefined;
     const hasRegisteredNavPanel = navPanelDef !== undefined;
     const pagesWrapperInnerStyle = (0, react_1.useMemo)(() => {
@@ -139,13 +139,9 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
         });
     }, [forceRefreshAnchorScroll]);
     const [subNavPanelSlot, setSubNavPanelSlot] = (0, react_1.useState)(null);
-    const [linkMap, setLinkMap] = (0, react_1.useState)(new Map());
     const registerSubNavPanelSlot = (0, react_1.useCallback)((element) => {
         setSubNavPanelSlot(element);
     }, []);
-    const registerLinkMap = (0, react_1.useCallback)((newLinkMap) => {
-        setLinkMap(newLinkMap);
-    }, []);
     const layoutContextValue = (0, react_1.useMemo)(() => {
         return {
             hasRegisteredNavPanel,
@@ -167,9 +163,6 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
             logoContentDef,
             registerSubNavPanelSlot,
             subNavPanelSlot,
-            isNested: (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.isNested) || false,
-            linkMap,
-            registerLinkMap,
         };
     }, [
         hasRegisteredNavPanel,
@@ -185,9 +178,6 @@ function App({ children, style, layout, loggedInUser, scrollWholePage = exports.
         logoContentDef,
         registerSubNavPanelSlot,
         subNavPanelSlot,
-        appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.isNested,
-        linkMap,
-        registerLinkMap,
     ]);
     (0, react_1.useEffect)(() => {
         if (navPanelVisible) {

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

@@ -69,7 +69,7 @@ exports.CardMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-${COMP}`]: "none",
         [`backgroundColor-${COMP}`]: "$color-surface-raised",
         [`gap-${COMP}`]: "var(--stack-gap-default)",
-        [`gap-title-${COMP}`]: "$gap-none",
+        [`gap-title-${COMP}`]: "$gap-normal",
         [`gap-avatar-${COMP}`]: "$gap-normal",
         [`verticalAlignment-title-${COMP}`]: "center",
     },

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

@@ -19,11 +19,10 @@ exports.defaultProps = {
 exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = exports.defaultProps.orientation, style, title, subtitle, linkTo, avatarUrl, showAvatar = !!avatarUrl || exports.defaultProps.showAvatar, avatarSize, onClick, }, forwardedRef) {
     const titleProps = {
         level: "h2",
-        maxLines: 1
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, className: (0, classnames_1.default)(Card_module_scss_1.default.wrapper, {
             [Card_module_scss_1.default.isClickable]: !!onClick,
             [Card_module_scss_1.default.vertical]: orientation === "vertical",
             [Card_module_scss_1.default.horizontal]: orientation === "horizontal",
-        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.avatarWrapper, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title, size: avatarSize }), (0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.titleWrapper, children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "secondary", children: subtitle }) }))] })] })), children] }));
+        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.avatarWrapper, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title, size: avatarSize }), (0, jsx_runtime_1.jsxs)("div", { className: Card_module_scss_1.default.titleWrapper, children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle }) }))] })] })), children] }));
 });

package/dist/scripts/src/components/Charts/DonutChart/DonutChart.js

@@ -13,19 +13,18 @@ const themeVars_1 = require("../../../components-core/theming/themeVars");
 const COMP = "DonutChart";
 const defaultPropsDonut = Object.assign(Object.assign({}, PieChartNative_1.defaultProps), { innerRadius: 60 });
 exports.DonutChartMd = (0, ComponentDefs_1.createMetadata)({
-    description: "A derivative of [PieChart](/components/PieChart) with a hollow center. " +
-        "Note that the height of the component or its parent needs to be set explicitly.",
+    description: "A derivative of [PieChart](/components/PieChart) with a hollow center.",
     status: "experimental",
     props: {
         data: {
             description: "The data to be displayed in the chart. Needs to be an array of objects.",
         },
-        nameKey: {
-            description: "Specifies the key in the data objects that will be used to label the different data series.",
+        dataKeys: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the bars.",
             valueType: "string",
         },
-        dataKey: {
-            description: "This property specifies the key in the data objects that will be used to render the chart.",
+        nameKey: {
+            description: "Specifies the key in the data objects that will be used to label the different data series.",
             valueType: "string",
         },
         showLabel: {

package/dist/scripts/src/components/Charts/PieChart/PieChart.js

@@ -14,20 +14,19 @@ const renderers_1 = require("../../../components-core/renderers");
 const COMP = "PieChart";
 exports.PieChartMd = (0, ComponentDefs_1.createMetadata)({
     description: "`PieChart` visualizes proportional data as circular segments; each slice " +
-        "represents a percentage of the whole. Note that the height of the component or " +
-        "its parent needs to be set explicitly.",
+        "represents a percentage of the whole.",
     status: "experimental",
     docFolder: "Charts/PieChart",
     props: {
         data: {
             description: "The data to be displayed in the chart. Needs to be an array of objects.",
         },
-        nameKey: {
-            description: "Specifies the key in the data objects that will be used to label the different data series.",
+        dataKeys: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the bars.",
             valueType: "string",
         },
-        dataKey: {
-            description: "This property specifies the key in the data objects that will be used to render the chart.",
+        nameKey: {
+            description: "Specifies the key in the data objects that will be used to label the different data series.",
             valueType: "string",
         },
         showLabel: {
@@ -46,12 +45,9 @@ exports.PieChartMd = (0, ComponentDefs_1.createMetadata)({
             defaultValue: PieChartNative_1.defaultProps.labelListPosition,
             availableValues: abstractions_1.LabelPositionValues,
         },
+        width: (0, ComponentDefs_1.d)("The width of the chart"),
+        height: (0, ComponentDefs_1.d)("The height of the chart"),
         outerRadius: (0, ComponentDefs_1.d)("The outer radius of the pie chart, can be a number or a string (e.g., '100%')."),
-        showLegend: {
-            description: "Toggles whether to show legend (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: PieChartNative_1.defaultProps.showLegend,
-        }
     },
     themeVars: (0, themeVars_1.parseScssVar)(PieChartNative_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/Charts/PieChart/PieChartNative.js

@@ -73,7 +73,7 @@ const renderActiveShape = (props) => {
     const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
     return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 10, startAngle: startAngle, endAngle: endAngle, fill: fill }), (0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: outerRadius + 6, outerRadius: outerRadius + 10, fill: fill })] }));
 };
-function PieChart({ data, dataKey, nameKey, style, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, outerRadius = "60%", showLegend = exports.defaultProps.showLegend, }) {
+function PieChart({ data, dataKey, nameKey, style, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, width = "100%", height = "100%", outerRadius = "60%", showLegend = exports.defaultProps.showLegend, }) {
     const { getThemeVar } = (0, xmlui_1.useTheme)();
     const colorValues = (0, react_1.useMemo)(() => {
         return [
@@ -121,12 +121,7 @@ function PieChart({ data, dataKey, nameKey, style, showLabel = exports.defaultPr
         return data.map((item, index) => (Object.assign(Object.assign({}, item), { fill: item.fill || colorValues[index % colorValues.length] })));
     }, [colorValues, data]);
     const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKey, nameKey });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
-                    flexGrow: 1,
-                    minHeight: 0,
-                    width: style.width || "100%",
-                    height: style.height || "100%",
-                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", minWidth: 0, children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), (0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: chartData, dataKey: dataKey, nameKey: nameKey, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: 1, activeShape: renderActiveShape, label: showLabel ? renderCustomizedLabel : false, labelLine: showLabel, children: chartContextValue.labelList
-                                    ? chartContextValue.labelList
-                                    : showLabelList && ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: labelListPosition, dataKey: nameKey, className: PieChartNative_module_scss_1.default.labelList, stroke: "none", fill: "currentColor", fontSize: 12 })) }), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: width, height: height, children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), (0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: chartData, dataKey: dataKey, nameKey: nameKey, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: 1, activeShape: renderActiveShape, label: showLabel ? renderCustomizedLabel : false, labelLine: showLabel, children: chartContextValue.labelList
+                                ? chartContextValue.labelList
+                                : showLabelList && ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: labelListPosition, dataKey: nameKey, className: PieChartNative_module_scss_1.default.labelList, stroke: "none", fill: "currentColor", fontSize: 12 })) }), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) })] }));
 }

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

@@ -23,11 +23,8 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
         "marginBottom-CodeBlock": "$space-5",
         "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-200 r g b / 0.25)",
         "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-200 r g b / 0.5)",
-        "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
-        "border-CodeBlock": "0.5px solid $borderColor",
         "borderRadius-CodeBlock": "$space-2",
-        "boxShadow-CodeBlock": "none",
-        "height-CodeBlock": "fit-content",
+        "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-surface-200",
             "backgroundColor-CodeBlock": "$color-surface-50",

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -23,7 +23,7 @@ function CodeBlock({ children, meta, textToCopy, style }) {
     if (!meta) {
         return ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: children }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, meta.copy !== false && (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", className: CodeBlock_module_scss_1.default.copyButton, icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", className: CodeBlock_module_scss_1.default.copyButton, icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
                                 if (!textToCopy)
                                     return;
                                 navigator.clipboard.writeText(textToCopy);

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.js

@@ -13,8 +13,8 @@ const misc_1 = require("../../components-core/utils/misc");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
 exports.defaultProps = {
-    initialValue: "#000000",
-    value: "#000000",
+    initialValue: "",
+    value: "",
     enabled: true,
     validationStatus: "none",
 };

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

@@ -12,7 +12,6 @@ const Link_1 = require("./Link/Link");
 const TreeComponent_1 = require("./Tree/TreeComponent");
 const TreeDisplay_1 = require("./TreeDisplay/TreeDisplay");
 const Button_1 = require("./Button/Button");
-const HelloWorld_1 = require("./HelloWorld/HelloWorld");
 const Heading_1 = require("./Heading/Heading");
 const Text_1 = require("./Text/Text");
 const Fragment_1 = require("../components-core/Fragment");
@@ -257,9 +256,6 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
             this.registerCoreComponent(Button_1.buttonComponentRenderer);
         }
-        if (process.env.VITE_USED_COMPONENTS_HelloWorld !== "false") {
-            this.registerCoreComponent(HelloWorld_1.helloWorldComponentRenderer);
-        }
         if (process.env.VITE_USED_COMPONENTS_Checkbox !== "false") {
             this.registerCoreComponent(Checkbox_1.checkboxComponentRenderer);
         }

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

@@ -77,9 +77,9 @@ exports.ExpandableItemMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingLeft-${COMP}`]: "$space-0",
         [`paddingRight-${COMP}`]: "$space-0",
         [`gap-${COMP}`]: "$space-2",
-        [`paddingLeft-content-${COMP}`]: "$space-3",
-        [`paddingRight-content-${COMP}`]: "$space-3",
-        [`paddingVertical-content-${COMP}`]: "$space-2",
+        [`contentPaddingLeft-${COMP}`]: "$space-3",
+        [`contentPaddingRight-${COMP}`]: "$space-3",
+        [`contentPaddingVertical-${COMP}`]: "$space-2",
         [`transition-${COMP}`]: "0.2s ease",
     },
 });

package/dist/scripts/src/components/FlowLayout/FlowLayoutNative.js

@@ -24,7 +24,6 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const hooks_1 = require("../../components-core/utils/hooks");
 const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
-const AppContext_1 = require("../../components-core/AppContext");
 const resolvedCssVars = {};
 const FlowLayoutContext = (0, react_1.createContext)({
     rowGap: 0,
@@ -36,7 +35,6 @@ exports.FlowItemBreak = FlowItemBreak;
 exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, ref) {
     var { children, forceBreak } = _a, restProps = __rest(_a, ["children", "forceBreak"]);
     const { rowGap, columnGap, setNumberOfChildren } = (0, react_1.useContext)(FlowLayoutContext);
-    const { mediaSize } = (0, AppContext_1.useAppContext)();
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         setNumberOfChildren((prev) => prev + 1);
         return () => {
@@ -64,7 +62,7 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
         //   },
         // ).cssProps || {}
         );
-    }, [_maxWidth, _minWidth, _width]);
+    }, [_maxWidth, _minWidth, _width, activeTheme.themeVars]);
     const resolvedWidth = (0, react_1.useMemo)(() => {
         if (width && typeof width === "string" && width.startsWith("var(")) {
             if (!resolvedCssVars[width]) {
@@ -78,41 +76,14 @@ exports.FlowItemWrapper = (0, react_1.forwardRef)(function FlowItemWrapper(_a, r
     }, [_width, root, width]);
     const isWidthPercentage = typeof resolvedWidth === "string" && resolvedWidth.endsWith("%");
     const _columnGap = (0, css_utils_1.normalizeCssValueForCalc)(columnGap);
-    let responsiveWidth;
-    if (isWidthPercentage) {
-        const percNumber = parseFloat(resolvedWidth);
-        if (mediaSize.sizeIndex <= 1) {
-            let percentage = percNumber * 4;
-            if (percentage > 50) {
-                responsiveWidth = `100%`;
-            }
-            else {
-                responsiveWidth = `min(${percentage}%, 100%)`;
-            }
-        }
-        else if (mediaSize.sizeIndex <= 2) {
-            let percentage = percNumber * 3;
-            if (percentage >= 50 && percentage <= 75) {
-                responsiveWidth = `50%`;
-            }
-            else if (percentage > 75) {
-                responsiveWidth = `100%`;
-            }
-            else {
-                responsiveWidth = `min(${percentage}%, 100%)`;
-            }
-        }
-        else {
-            responsiveWidth = `min(${width}, 100%)`;
-        }
-    }
-    else {
-        responsiveWidth = `min(calc(${width} + ${_columnGap}), 100%)`;
-    }
+    const isViewportPhone = (0, hooks_1.useMediaQuery)("(max-width: 420px)"); //TODO useContainerQuery
+    const isViewportTablet = (0, hooks_1.useMediaQuery)("(max-width: 800px)");
     const outerWrapperStyle = {
         minWidth,
         maxWidth,
-        width: responsiveWidth,
+        width: isWidthPercentage
+            ? `min(${width} * ${isViewportPhone ? "8" : isViewportTablet ? "4" : "1"}, 100%)`
+            : `min(calc(${width} + ${_columnGap}), 100%)`,
         paddingBottom: rowGap,
         flex,
     };

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

@@ -19,14 +19,13 @@ exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
-        [`verticalAlignment-${COMP}`]: "center",
+        [`verticalAlign-${COMP}`]: "center",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",
         [`borderTop-${COMP}`]: `1px solid $borderColor`,
         [`padding-${COMP}`]: "$space-2 $space-4",
         [`gap-${COMP}`]: "$space-normal",
-        [`margin-${COMP}`]: `0 auto`,
         light: {
         // --- No light-specific theme vars
         },

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

@@ -79,16 +79,12 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             description: "This property sets the HTTP method to use when submitting the form data. If not " +
                 "defined, `put` is used when the form has initial data; otherwise, `post`.",
         },
-        inProgressNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is being submitted."),
-        completedNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is submitted successfully."),
-        errorNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form submission fails."),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },
     events: {
         submit: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is submitted. The event argument ` +
             `is the current \`data\` value to save.`),
-        success: (0, ComponentDefs_1.d)("The form infrastructure fires this event when the form is submitted successfully."),
         cancel: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is canceled.`),
         reset: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is reset.`),
     },

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

@@ -181,7 +181,7 @@ function cleanUpSubject(subject) {
         return acc;
     }, {});
 }
-const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, }, ref) {
+const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, }, ref) {
     const formRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_1.useState)(false);
@@ -234,11 +234,10 @@ const Form = (0, react_1.forwardRef)(function ({ formState, dispatch, initialVal
         dispatch((0, formActions_1.formSubmitting)());
         try {
             const filteredSubject = cleanUpSubject(formState.subject);
-            const result = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
-                passAsDefaultBody: true
+            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
+                passAsDefaultBody: true,
             }));
             dispatch((0, formActions_1.formSubmitted)());
-            yield (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result));
             if (!keepModalOpenOnSubmit) {
                 requestModalFormClose();
             }
@@ -349,14 +348,11 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
     }, [$data, node.children]);
     const initialValue = extractValue(node.props.data);
     const submitMethod = extractValue.asOptionalString(node.props.submitMethod) || (initialValue ? "put" : "post");
-    const inProgressNotificationMessage = extractValue.asOptionalString(node.props.inProgressNotificationMessage) || "";
-    const completedNotificationMessage = extractValue.asOptionalString(node.props.completedNotificationMessage) || "";
-    const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
     return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: style, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
             defaultHandler: submitUrl
-                ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs, inProgressNotificationMessage: "${inProgressNotificationMessage}", completedNotificationMessage: "${completedNotificationMessage}", errorNotificationMessage: "${errorNotificationMessage}" })`
+                ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs })`
                 : undefined,
             context: {
                 $data,
@@ -369,10 +365,6 @@ function FormWithContextVar({ node, renderChild, extractValue, style, lookupEven
             context: {
                 $data,
             },
-        }), onSuccess: lookupEventHandler("success", {
-            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/ItemWithLabel.js

@@ -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,
-                }), children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.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/Link/LinkNative.js

@@ -33,52 +33,7 @@ exports.LinkNative = (0, react_1.forwardRef)(function LinkNative(props, forwarde
         return (0, component_utils_1.createUrlWithQueryParams)(to);
     }, [to]);
     const Node = !to ? "div" : react_2.Link;
-    // For hash links, we'll use a regular anchor tag to avoid React Router interference
-    const isHashLink = typeof to === 'string' && to.startsWith('#');
-    const FinalNode = isHashLink ? "a" : Node;
-    // Handle hash navigation for same-page scrolling
-    const handleClick = (0, react_1.useCallback)((event) => {
-        const toUrl = typeof to === 'string' ? to : to === null || to === void 0 ? void 0 : to.pathname;
-        // Check if this is a hash link (starts with #)
-        if (toUrl && toUrl.startsWith('#')) {
-            const targetId = toUrl.substring(1);
-            const currentHash = window.location.hash;
-            // Always prevent default for hash links and handle manually
-            event.preventDefault();
-            const targetElement = document.getElementById(targetId);
-            if (targetElement) {
-                targetElement.scrollIntoView();
-                // Build the new URL with existing hash route + fragment
-                const currentUrl = window.location.href;
-                const baseUrl = currentUrl.split('#')[0]; // Get everything before the first #
-                const existingHash = window.location.hash; // Current hash (e.g., #/about)
-                let newUrl;
-                if (existingHash && existingHash !== toUrl) {
-                    // If there's an existing hash route, append the fragment to it
-                    if (existingHash.includes('/#')) {
-                        // Remove any existing fragment and add the new one
-                        const hashRoute = existingHash.split('/#')[0];
-                        newUrl = `${baseUrl}${hashRoute}/${toUrl}`;
-                    }
-                    else {
-                        // Just append the fragment to the existing hash
-                        newUrl = `${baseUrl}${existingHash}/${toUrl}`;
-                    }
-                }
-                else {
-                    // No existing hash or same fragment, just use the fragment
-                    newUrl = `${baseUrl}${toUrl}`;
-                }
-                window.history.pushState(null, '', newUrl);
-            }
-            // Call the original onClick if provided
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-            return;
-        }
-        // For all other cases, call the original onClick
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [to, onClick]);
-    return ((0, jsx_runtime_1.jsxs)(FinalNode, Object.assign({ ref: forwardedRef, to: isHashLink ? undefined : smartTo, href: isHashLink ? to : undefined, style: style, target: target, onClick: handleClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+    return ((0, jsx_runtime_1.jsxs)(Node, Object.assign({ ref: forwardedRef, to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
             [Link_module_scss_1.default.iconLink]: iconLink,
             [Link_module_scss_1.default.active]: active,
             [Link_module_scss_1.default.disabled]: disabled,

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

@@ -50,7 +50,7 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-Admonition-danger": "$color-danger-100",
         "borderColor-Admonition-danger": "$color-danger-300",
         "borderRadius-Admonition": "$space-2",
-        "size-icon-Admonition": "$space-5",
+        "iconSize-Admonition": "$space-5",
         "paddingLeft-Admonition": "$space-2",
         "paddingRight-Admonition": "$space-6",
         "paddingTop-Admonition": "$space-3",
@@ -64,8 +64,8 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "paddingTop-Blockquote": "$space-3",
         "paddingBottom-Blockquote": "$space-2_5",
         "backgroundColor-Blockquote": "$color-surface-100",
-        "width-accent-Blockquote": "3px",
-        "color-accent-Blockquote": "$color-surface-500",
+        "accentWidth-Blockquote": "3px",
+        "accentColor-Blockquote": "$color-surface-500",
         "marginTop-HtmlLi": "$space-2_5",
         "marginBottom-HtmlLi": "$space-2_5",
         "marginTop-Image-markdown": "$space-4",

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

@@ -232,14 +232,15 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports
                     return (0, jsx_runtime_1.jsx)("tfoot", { className: HtmlTags_module_scss_1.default.htmlTfoot, children: children });
                 },
                 samp(_a) {
-                    var _b, _c;
+                    var _b;
                     var props = __rest(_a, []);
+                    const nestedProps = props;
                     const markdownContentBase64 = props === null || props === void 0 ? void 0 : props["data-pg-markdown"];
                     const markdownContent = markdownContentBase64 ? atob(markdownContentBase64) : "";
                     const dataContentBase64 = props === null || props === void 0 ? void 0 : props["data-pg-content"];
                     const jsonContent = atob(dataContentBase64);
                     const appProps = JSON.parse(jsonContent);
-                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, splitView: (_b = appProps.splitView) !== null && _b !== void 0 ? _b : false, initiallyShowCode: (_c = appProps.initiallyShowCode) !== null && _c !== void 0 ? _c : false }));
+                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, sideBySide: (_b = appProps.sideBySide) !== null && _b !== void 0 ? _b : false }));
                 },
                 section(_a) {
                     var { children } = _a, props = __rest(_a, ["children"]);