xmlui 0.10.8 → 0.10.11

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.8",
+    "version": "0.10.11",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -44,6 +44,7 @@
         "@radix-ui/react-tabs": "1.1.0",
         "@radix-ui/react-tooltip": "^1.2.4",
         "@radix-ui/react-visually-hidden": "1.0.3",
+        "@react-spring/web": "^10.0.2",
         "@remix-run/react": "2.12.1",
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
@@ -148,6 +149,7 @@
         "rollup-plugin-copy": "^3.5.0",
         "rollup-plugin-visualizer": "5.8.3",
         "serve": "14.2.0",
+        "terser": "^5.44.0",
         "typescript": "5.7.3",
         "vite": "5.4.19",
         "vite-plugin-dts": "4.5.0",

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

@@ -107,10 +107,10 @@ exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
                 "`$params[0]`, `$params[1]`, etc.)",
         },
         $result: {
-            description: "Response data (available in `completedNotificationMessage` and `success` event)",
+            description: "Response data (available in `completedNotificationMessage`)",
         },
         $error: {
-            description: "Error details (available in `errorNotificationMessage` and `error` event)",
+            description: "Error details (available in `errorNotificationMessage`)",
         },
     },
     apis: {
@@ -125,6 +125,6 @@ exports.APICallMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-exports.apiCallRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.APICallMd, ({ node, registerComponentApi, uid, extractValue }) => {
-    return (0, jsx_runtime_1.jsx)(APICallNative_1.APICallNative, { registerComponentApi: registerComponentApi, node: node, uid: uid });
+exports.apiCallRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.APICallMd, ({ node, registerComponentApi, uid }) => {
+    return ((0, jsx_runtime_1.jsx)(APICallNative_1.APICallNative, { registerComponentApi: registerComponentApi, node: node, uid: uid }));
 });

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

@@ -77,7 +77,7 @@ exports.AccordionMd = (0, metadata_helpers_1.createMetadata)({
         [`paddingHorizontal-header-${COMP}`]: "$space-3",
         [`paddingVertical-header-${COMP}`]: "$space-3",
         [`verticalAlignment-header-${COMP}`]: "center",
-        [`fontSize-header-${COMP}`]: "$fontSize-normal",
+        [`fontSize-header-${COMP}`]: "$fontSize-base",
         [`fontWeight-header-${COMP}`]: "$fontWeight-normal",
         [`fontFamily-header-${COMP}`]: "$fontFamily",
         [`border-${COMP}`]: "0px solid $borderColor",

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

@@ -86,10 +86,10 @@ exports.AccordionItemComponent = (0, react_1.forwardRef)(function AccordionItemC
             unRegister(triggerId);
         };
     }, [triggerId, unRegister]);
-    return ((0, jsx_runtime_1.jsxs)(RAccordion.Item, { value: itemId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.item, className), ref: forwardedRef, style: style, children: [(0, jsx_runtime_1.jsx)(RAccordion.Header, { className: Accordion_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)(RAccordion.Trigger, Object.assign({}, rest, { id: `trigger_${itemId}`, className: (0, classnames_1.default)(Accordion_module_scss_1.default.trigger, {
+    return ((0, jsx_runtime_1.jsxs)(RAccordion.Item, { id: itemId, value: itemId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.item, className), ref: forwardedRef, style: style, children: [(0, jsx_runtime_1.jsx)(RAccordion.Header, { className: Accordion_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)(RAccordion.Trigger, Object.assign({}, rest, { id: triggerId, className: (0, classnames_1.default)(Accordion_module_scss_1.default.trigger, {
                         [Accordion_module_scss_1.default.triggerStart]: triggerPosition === "start",
                     }), children: [headerRenderer(header), !hideIcon && ((0, jsx_runtime_1.jsx)("span", { style: {
                                 transform: expanded && !expandedIcon ? `rotate(${rotateExpanded})` : "rotate(0deg)",
                                 transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: !expanded ? collapsedIcon : expandedIcon || collapsedIcon, className: Accordion_module_scss_1.default.chevron }) }))] })) }), (0, jsx_runtime_1.jsx)(RAccordion.Content, { className: Accordion_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Accordion_module_scss_1.default.content, children: content }) })] }, itemId));
+                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: !expanded ? collapsedIcon : expandedIcon || collapsedIcon, className: Accordion_module_scss_1.default.chevron, "aria-hidden": "true" }) }))] })) }), (0, jsx_runtime_1.jsx)(RAccordion.Content, { className: Accordion_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: Accordion_module_scss_1.default.content, children: content }) })] }, itemId));
 });

package/dist/scripts/src/components/Animation/AnimationNative.js

@@ -0,0 +1,259 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animation = exports.parseAnimation = exports.defaultProps = void 0;
+exports.parseAnimationOptions = parseAnimationOptions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const web_1 = require("@react-spring/web");
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const lodash_es_1 = require("lodash-es");
+const AnimatedComponent = (0, web_1.animated)((0, react_1.forwardRef)(function InlineComponentDef(props, ref) {
+    const { children } = props, rest = __rest(props, ["children"]);
+    if (!react_1.default.isValidElement(children)) {
+        return children;
+    }
+    return react_1.default.cloneElement(children, Object.assign(Object.assign({}, rest), { ref }));
+}));
+exports.defaultProps = {
+    delay: 0,
+    animateWhenInView: false,
+    reverse: false,
+    loop: false,
+    once: false
+};
+const parseAnimation = (animation) => {
+    if (typeof animation === 'object') {
+        return animation;
+    }
+    const presetAnimations = {
+        fadein: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        fadeout: {
+            from: { opacity: 1 },
+            to: { opacity: 0 }
+        },
+        slidein: {
+            from: { transform: 'translateX(-100%)' },
+            to: { transform: 'translateX(0%)' }
+        },
+        slideout: {
+            from: { transform: 'translateX(0%)' },
+            to: { transform: 'translateX(100%)' }
+        },
+        popin: {
+            from: { transform: 'scale(0.8)', opacity: 0 },
+            to: { transform: 'scale(1)', opacity: 1 }
+        },
+        popout: {
+            from: { transform: 'scale(1)', opacity: 1 },
+            to: { transform: 'scale(0.8)', opacity: 0 }
+        },
+        flipin: {
+            from: { transform: 'rotateY(90deg)', opacity: 0 },
+            to: { transform: 'rotateY(0deg)', opacity: 1 }
+        },
+        flipout: {
+            from: { transform: 'rotateY(0deg)', opacity: 1 },
+            to: { transform: 'rotateY(90deg)', opacity: 0 }
+        },
+        rotatein: {
+            from: { transform: 'rotate(-180deg)', opacity: 0 },
+            to: { transform: 'rotate(0deg)', opacity: 1 }
+        },
+        rotateout: {
+            from: { transform: 'rotate(0deg)', opacity: 1 },
+            to: { transform: 'rotate(180deg)', opacity: 0 }
+        },
+        zoomin: {
+            from: { transform: 'scale(0)', opacity: 0 },
+            to: { transform: 'scale(1)', opacity: 1 }
+        },
+        zoomout: {
+            from: { transform: 'scale(1)', opacity: 1 },
+            to: { transform: 'scale(0)', opacity: 0 }
+        }
+    };
+    return presetAnimations[animation] || { from: {}, to: {} };
+};
+exports.parseAnimation = parseAnimation;
+/**
+ * Helper function to parse a single animation-specific option value.
+ */
+function parseAnimationOptionValue(name, value) {
+    switch (name) {
+        case "duration":
+        case "delay":
+            const num = parseInt(value, 10);
+            return isNaN(num) ? undefined : num;
+        case "animateWhenInView":
+        case "reverse":
+        case "loop":
+        case "once":
+            const lowerVal = value.toLowerCase();
+            if (lowerVal === "true" || lowerVal === "1" || lowerVal === "yes")
+                return true;
+            if (lowerVal === "false" || lowerVal === "0" || lowerVal === "no")
+                return false;
+            return undefined;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Parses animation options from a string or object.
+ */
+function parseAnimationOptions(input) {
+    if ((0, lodash_es_1.isPlainObject)(input)) {
+        return input;
+    }
+    if (typeof input === "string") {
+        const options = {};
+        const values = input
+            .split(";")
+            .map((value) => value.trim())
+            .filter((value) => value.length > 0);
+        for (const value of values) {
+            if (value.includes(":")) {
+                const [name, val] = value.split(":").map((part) => part.trim());
+                if (name && val) {
+                    const parsedValue = parseAnimationOptionValue(name, val);
+                    if (parsedValue !== undefined) {
+                        options[name] = parsedValue;
+                    }
+                }
+            }
+            else {
+                const booleanOptions = ["animateWhenInView", "reverse", "loop", "once"];
+                if (booleanOptions.includes(value)) {
+                    options[value] = true;
+                }
+                else if (value.startsWith("!") && value.length > 1) {
+                    const optionName = value.substring(1);
+                    if (booleanOptions.includes(optionName)) {
+                        options[optionName] = false;
+                    }
+                }
+            }
+        }
+        return options;
+    }
+    return {};
+}
+exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef) {
+    var { children, registerComponentApi, animation, duration, onStop, onStart, delay = exports.defaultProps.delay, animateWhenInView = exports.defaultProps.animateWhenInView, reverse = exports.defaultProps.reverse, loop = exports.defaultProps.loop, once = exports.defaultProps.once } = _a, rest = __rest(_a, ["children", "registerComponentApi", "animation", "duration", "onStop", "onStart", "delay", "animateWhenInView", "reverse", "loop", "once"]);
+    const [_animation] = (0, react_1.useState)(animation);
+    const [toggle, setToggle] = (0, react_1.useState)(false);
+    const [reset, setReset] = (0, react_1.useState)(false);
+    const [count, setCount] = (0, react_1.useState)(0);
+    const times = 1;
+    const animationSettings = (0, react_1.useMemo)(() => ({
+        from: _animation.from,
+        to: _animation.to,
+        config: Object.assign(Object.assign({}, _animation.config), { duration }),
+        delay,
+        loop,
+        reset,
+        reverse: toggle,
+        onRest: () => {
+            onStop === null || onStop === void 0 ? void 0 : onStop();
+            if (loop) {
+                if (reverse) {
+                    setCount(count + 1);
+                    setToggle(!toggle);
+                }
+                setReset(true);
+            }
+            else {
+                if (reverse && count < times) {
+                    setCount(count + 1);
+                    setToggle(!toggle);
+                }
+            }
+        },
+        onStart: () => onStart === null || onStart === void 0 ? void 0 : onStart(),
+    }), [
+        _animation.config,
+        _animation.from,
+        _animation.to,
+        count,
+        delay,
+        duration,
+        loop,
+        onStart,
+        onStop,
+        reset,
+        reverse,
+        toggle,
+    ]);
+    const [springs, api] = (0, web_1.useSpring)(() => (Object.assign({}, animationSettings)), [animationSettings]);
+    const [ref, animationStyles] = (0, web_1.useInView)(() => animationSettings, {
+        once,
+    });
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, forwardedRef) : forwardedRef;
+    const startAnimation = (0, react_2.useCallback)(() => {
+        api.start(_animation);
+        return () => {
+            api.stop();
+        };
+    }, [_animation, api]);
+    const stopAnimation = (0, react_2.useCallback)(() => {
+        api.stop();
+    }, [api]);
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            start: startAnimation,
+            stop: stopAnimation,
+        });
+    }, [registerComponentApi, startAnimation, stopAnimation]);
+    const content = (0, react_1.useMemo)(() => {
+        return react_1.Children.map(children, (child, index) => animateWhenInView ? ((0, jsx_runtime_1.jsx)(AnimatedComponent, Object.assign({}, rest, { style: animationStyles, ref: composedRef, children: child }), index)) : ((0, jsx_runtime_1.jsx)(AnimatedComponent, Object.assign({}, rest, { style: springs, ref: forwardedRef, children: child }), index)));
+    }, [animateWhenInView, animationStyles, children, springs, rest]);
+    return content;
+});

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

@@ -76,6 +76,14 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "string",
             defaultValue: AppNative_1.defaultProps.defaultTheme,
         },
+        autoDetectTone: {
+            description: 'This boolean property enables automatic detection of the system theme preference. ' +
+                'When set to true and no defaultTone is specified, the app will automatically use ' +
+                '"light" or "dark" tone based on the user\'s system theme setting. The app will ' +
+                'also respond to changes in the system theme preference.',
+            valueType: "boolean",
+            defaultValue: AppNative_1.defaultProps.autoDetectTone,
+        },
     },
     events: {
         ready: {
@@ -298,6 +306,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
         logoLight: extractValue(node.props["logo-light"]),
         defaultTone: extractValue(node.props.defaultTone),
         defaultTheme: extractValue(node.props.defaultTheme),
+        autoDetectTone: extractValue.asOptionalBoolean(node.props.autoDetectTone, false),
         applyDefaultContentPadding
     }), [
         extractValue,
@@ -312,6 +321,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
         node.props["logo-light"],
         node.props.defaultTone,
         node.props.defaultTheme,
+        node.props.autoDetectTone,
         className,
         applyDefaultContentPadding
     ]);

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

@@ -25,7 +25,6 @@ const lodash_es_1 = require("lodash-es");
 const classnames_1 = __importDefault(require("classnames"));
 const App_module_scss_1 = __importDefault(require("./App.module.scss"));
 const AppContext_1 = require("../../components-core/AppContext");
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const hooks_1 = require("../../components-core/utils/hooks");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const css_utils_1 = require("../../components-core/utils/css-utils");
@@ -40,11 +39,12 @@ exports.defaultProps = {
     noScrollbarGutters: false,
     defaultTone: undefined,
     defaultTheme: undefined,
+    autoDetectTone: false,
     onReady: lodash_es_1.noop,
     onMessageReceived: lodash_es_1.noop,
 };
 function App(_a) {
-    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, className, applyDefaultContentPadding } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "renderChild", "name", "className", "applyDefaultContentPadding"]);
+    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, autoDetectTone = exports.defaultProps.autoDetectTone, renderChild, name, className, applyDefaultContentPadding } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "autoDetectTone", "renderChild", "name", "className", "applyDefaultContentPadding"]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);
@@ -63,13 +63,19 @@ function App(_a) {
         if (defaultTone === "dark" || defaultTone === "light") {
             setActiveThemeTone(defaultTone);
         }
+        else if (autoDetectTone) {
+            // Auto-detect system theme preference when no defaultTone is set
+            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const detectedTone = systemPrefersDark ? "dark" : "light";
+            setActiveThemeTone(detectedTone);
+        }
         if (defaultTheme) {
             setActiveThemeId(defaultTheme);
         }
         return () => {
             mounted.current = false;
         };
-    }, [defaultTone, defaultTheme, setActiveThemeTone, setActiveThemeId, themes]);
+    }, [defaultTone, defaultTheme, autoDetectTone, setActiveThemeTone, setActiveThemeId, themes]);
     (0, react_1.useEffect)(() => {
         onReady();
     }, [onReady]);
@@ -82,6 +88,20 @@ function App(_a) {
             window.removeEventListener("message", handleMessage);
         };
     }, [onMessageReceived]);
+    // Listen for system theme changes when autoDetectTone is enabled
+    (0, react_1.useEffect)(() => {
+        if (!autoDetectTone || defaultTone)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleThemeChange = (e) => {
+            const detectedTone = e.matches ? "dark" : "light";
+            setActiveThemeTone(detectedTone);
+        };
+        mediaQuery.addEventListener('change', handleThemeChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleThemeChange);
+        };
+    }, [autoDetectTone, defaultTone, setActiveThemeTone]);
     // --- We don't hide the nav panel if there's no header; in that case, we don't have a show drawer
     // --- button. The exception is the condensed layout because we render a header in that case (otherwise,
     // --- we couldn't show the NavPanel)
@@ -229,13 +249,13 @@ function App(_a) {
     });
     switch (safeLayout) {
         case "vertical":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
             break;
         case "vertical-sticky":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), children: navPanel }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] })));
             break;
         case "vertical-full-header":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         case "condensed":
         case "condensed-sticky":
@@ -243,14 +263,14 @@ function App(_a) {
                     [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
                 }), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)("app-layout-condensed", App_module_scss_1.default.headerWrapper, {
                             [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
-                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { renderChild: renderChild })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { renderChild: renderChild })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         case "horizontal": {
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         }
         case "horizontal-sticky":
-            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
+            content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [header, navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: pagesWrapperClasses, children: children }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })));
             break;
         default:
             throw new Error("layout type not supported: " + safeLayout);

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

@@ -80,7 +80,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
         [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
-        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`fontSize-${COMP}-badge`]: "$fontSize-sm",
         [`borderRadius-${COMP}-badge`]: "$borderRadius",
         [`paddingHorizontal-${COMP}-badge`]: "$space-2",
         [`paddingVertical-${COMP}-badge`]: "$space-1",

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -30,6 +30,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const react_popover_1 = require("@radix-ui/react-popover");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("../Select/HiddenOption");
+const parts_1 = require("../../components-core/parts");
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
@@ -114,7 +115,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [multi, value, updateState, onDidChange, inputRef.current]);
+    }, [multi, value, updateState, onDidChange]);
     (0, react_1.useEffect)(() => {
         if (!Array.isArray(selectedValue)) {
             setInputValue((selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label) || "");
@@ -144,7 +145,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
+    }, [inputRef]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         updateState({ value: newValue });
     });
@@ -183,7 +184,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                 if (extendedValue.toLowerCase().includes(search.toLowerCase()))
                                     return 1;
                                 return 0;
-                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { id: inputId, ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
                                                 [AutoComplete_module_scss_1.default.disabled]: !enabled,
                                                 [AutoComplete_module_scss_1.default.focused]: isFocused,
                                             }), children: [Array.isArray(selectedValue) && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
@@ -215,7 +216,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                                         if (event.key === "Enter") {
                                                             setOpen((prev) => !prev);
                                                         }
-                                                    }, id: id, readOnly: readOnly, autoFocus: autoFocus, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
+                                                    }, id: inputId, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-expanded": open, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
                                                         setOpen(true);
                                                         setInputValue(value);
                                                         setSearchTerm(value);

package/dist/scripts/src/components/Breakout/BreakoutNative.js

@@ -18,7 +18,7 @@ exports.Breakout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Breakout_module_scss_1 = __importDefault(require("./Breakout.module.scss"));
 const Breakout = (_a) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: Breakout_module_scss_1.default.breakout, children: children })));
+    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { style: style, className: Breakout_module_scss_1.default.breakout, children: children })));
 };
 exports.Breakout = Breakout;

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

@@ -101,7 +101,7 @@ exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
         [`width-${COMP}`]: "fit-content",
         [`height-${COMP}`]: "fit-content",
         [`borderRadius-${COMP}`]: "$borderRadius",
-        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontSize-${COMP}`]: "$fontSize-sm",
         [`fontWeight-${COMP}`]: "$fontWeight-medium",
         [`backgroundColor-${COMP}-primary`]: "$color-primary-500",
         [`backgroundColor-${COMP}-attention`]: "$backgroundColor-attention",

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

@@ -52,6 +52,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const abstractions_1 = require("../abstractions");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const VisuallyHidden_1 = require("../VisuallyHidden");
 exports.defaultProps = {
@@ -77,6 +78,9 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
         }
     }, [autoFocus]);
     const iconToLeft = iconPosition === "start";
+    if (!(0, abstractions_1.isSizeType)(size)) {
+        size = exports.defaultProps.size;
+    }
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: composedRef, className: (0, classnames_1.default)(Button_module_scss_1.default.button, {
             [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
             [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",