xmlui 0.10.19 → 0.10.21

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.19",
+    "version": "0.10.21",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -54,7 +54,7 @@
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
         "adm-zip": "0.5.10",
-        "axios": "1.8.2",
+        "axios": "1.12.0",
         "chroma-js": "^3.1.2",
         "classnames": "2.5.1",
         "cmdk": "^1.0.4",
@@ -95,8 +95,6 @@
         "react-sticky-el": "^2.1.1",
         "react-textarea-autosize": "8.5.3",
         "react-time-picker": "^8.0.2",
-        "react-virtualized-auto-sizer": "1.0.24",
-        "react-window": "1.8.10",
         "recharts": "^2.15.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
@@ -106,7 +104,7 @@
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
-        "virtua": "0.40.0",
+        "virtua": "^0.40.0",
         "vite-plugin-lib-inject-css": "1.3.0",
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
@@ -131,7 +129,6 @@
         "@types/react-datepicker": "4.19.5",
         "@types/react-dom": "18.2.8",
         "@types/react-measure": "^2.0.8",
-        "@types/react-window": "1.8.8",
         "@types/yargs": "17.0.31",
         "@typescript-eslint/eslint-plugin": "8.15.0",
         "@typescript-eslint/parser": "8.15.0",

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

@@ -64,61 +64,61 @@ exports.defaultProps = {
     animateWhenInView: false,
     reverse: false,
     loop: false,
-    once: false
+    once: false,
 };
 const parseAnimation = (animation) => {
-    if (typeof animation === 'object') {
+    if (typeof animation === "object") {
         return animation;
     }
     const presetAnimations = {
         fadein: {
             from: { opacity: 0 },
-            to: { opacity: 1 }
+            to: { opacity: 1 },
         },
         fadeout: {
             from: { opacity: 1 },
-            to: { opacity: 0 }
+            to: { opacity: 0 },
         },
         slidein: {
-            from: { transform: 'translateX(-100%)' },
-            to: { transform: 'translateX(0%)' }
+            from: { transform: "translateX(-100%)" },
+            to: { transform: "translateX(0%)" },
         },
         slideout: {
-            from: { transform: 'translateX(0%)' },
-            to: { transform: 'translateX(100%)' }
+            from: { transform: "translateX(0%)" },
+            to: { transform: "translateX(100%)" },
         },
         popin: {
-            from: { transform: 'scale(0.8)', opacity: 0 },
-            to: { transform: 'scale(1)', opacity: 1 }
+            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 }
+            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 }
+            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 }
+            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 }
+            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 }
+            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 }
+            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 }
-        }
+            from: { transform: "scale(1)", opacity: 1 },
+            to: { transform: "scale(0)", opacity: 0 },
+        },
     };
     return presetAnimations[animation] || { from: {}, to: {} };
 };
@@ -232,9 +232,9 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
         onStart,
         onStop,
         reset,
+        once,
         reverse,
         toggle,
-        animationId,
     ]);
     const [springs, api] = (0, web_1.useSpring)(() => (Object.assign({}, animationSettings)), [animationSettings]);
     const [ref, animationStyles] = (0, web_1.useInView)(() => animationSettings, {
@@ -242,7 +242,7 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
     });
     const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, forwardedRef) : forwardedRef;
     const startAnimation = (0, react_2.useCallback)(() => {
-        api.start(_animation);
+        void api.start(_animation);
         return () => {
             api.stop();
         };
@@ -258,6 +258,6 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
     }, [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]);
+    }, [animateWhenInView, animationStyles, children, springs, rest, composedRef, forwardedRef]);
     return content;
 });

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

@@ -121,7 +121,7 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-function AppNode({ node, extractValue, renderChild, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) {
     // --- Use ref to track if we've already processed the navigation to avoid duplicates in strict mode
     const processedNavRef = (0, react_1.useRef)(false);
     // --- Memoize the layout type to avoid unnecessary re-extraction
@@ -330,7 +330,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
     const renderedFooter = (0, react_1.useMemo)(() => renderChild(Footer), [Footer, renderChild]);
     const renderedNavPanel = (0, react_1.useMemo)(() => renderChild(NavPanel), [NavPanel, renderChild]);
     const renderedContent = (0, react_1.useMemo)(() => renderChild(restChildren), [restChildren, renderChild]);
-    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 })] })));
+    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, registerComponentApi: registerComponentApi, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
 }
 const HIDDEN_STYLE = {
     position: "absolute",
@@ -457,8 +457,8 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
     // console.log(`PageIndexer (${pageUrl}): Rendering content for ref population.`);
     return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: renderChild(Page.children) });
 }
-exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
-    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler }));
+exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler, registerComponentApi: registerComponentApi }));
 });
 // --- Process the entire navigation tree recursively and build hierarchy
 function processNavItems(items, parentHierarchy, extractValue) {

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

@@ -42,7 +42,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
     `);
         const buttonDriver = yield createButtonDriver("toggleLayout");
         yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/vertical/);
-        buttonDriver.click();
+        yield buttonDriver.click();
         yield (0, fixtures_1.expect)(page.getByTestId("app")).toHaveClass(/horizontal/);
     }));
     (0, fixtures_1.test)("sets document title from name prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
@@ -115,8 +115,8 @@ fixtures_1.test.describe("Edge Cases", () => {
 fixtures_1.test.describe("Event Handling", () => {
     (0, fixtures_1.test)("ready event is triggered when App component finishes rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
-        onReady="() => testState = 'app-ready'" 
+      <App
+        onReady="() => testState = 'app-ready'"
         testId="app"
       />
     `);
@@ -125,8 +125,8 @@ fixtures_1.test.describe("Event Handling", () => {
     }));
     (0, fixtures_1.test)("ready event is triggered for App with complex content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
-        onReady="() => testState = 'complex-app-ready'" 
+      <App
+        onReady="() => testState = 'complex-app-ready'"
         layout="horizontal"
         testId="app"
       >
@@ -150,15 +150,15 @@ fixtures_1.test.describe("Event Handling", () => {
     }));
     (0, fixtures_1.test)("ready event fires only once during component lifecycle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
+      <App
         var.counter="{0}"
-        onReady="() => { counter = counter + 1; testState = counter; }" 
+        onReady="() => { counter = counter + 1; testState = counter; }"
         testId="app"
       >
-        <Button 
-          testId="trigger-rerender" 
-          label="Re-render" 
-          onClick="counter = counter" 
+        <Button
+          testId="trigger-rerender"
+          label="Re-render"
+          onClick="counter = counter"
         />
       </App>
     `);
@@ -171,8 +171,8 @@ fixtures_1.test.describe("Event Handling", () => {
     }));
     (0, fixtures_1.test)("messageReceived event is triggered when window receives a message", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
-        onMessageReceived="(msg, ev) => testState = msg" 
+      <App
+        onMessageReceived="(msg, ev) => testState = msg"
         testId="app"
       />
     `);
@@ -185,8 +185,8 @@ fixtures_1.test.describe("Event Handling", () => {
     }));
     (0, fixtures_1.test)("messageReceived event receives both message data and event object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
-        onMessageReceived="(msg, ev) => testState = { message: msg, eventType: ev.type, origin: ev.origin }" 
+      <App
+        onMessageReceived="(msg, ev) => testState = { message: msg, eventType: ev.type, origin: ev.origin }"
         testId="app"
       />
     `);
@@ -203,8 +203,8 @@ fixtures_1.test.describe("Event Handling", () => {
     }));
     (0, fixtures_1.test)("messageReceived event handles complex data objects", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <App 
-        onMessageReceived="(msg, ev) => testState = msg" 
+      <App
+        onMessageReceived="(msg, ev) => testState = msg"
         testId="app"
       />
     `);

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

@@ -44,7 +44,7 @@ exports.defaultProps = {
     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, 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"]);
+    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, registerComponentApi } = _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", "registerComponentApi"]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);

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

@@ -28,8 +28,9 @@ exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
             description: `This property contains the initial state value. Though you can use multiple \`${COMP}\`` +
                 `component instances for the same bucket with their \`initialValue\` set, it may result ` +
                 `in faulty app logic. When xmlui instantiates an \`${COMP}\` with an explicit initial ` +
-                `value, that value is immediately set. Multiple initial values may result in ` +
-                `undesired initialization. By default, the bucked's initial state is undefined.`,
+                `value, that value is immediately merged with the existing state. ` +
+                `The issue may come from the behavior that \`initialValue\` is set (merged) only when a component mounts. ` +
+                `By default, the bucket's initial state is undefined.`,
         },
     },
     apis: {

package/dist/scripts/src/components/AppState/AppState.spec.js

@@ -35,6 +35,18 @@ const fixtures_1 = require("../../testing/fixtures");
     yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
     yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
 }));
+(0, fixtures_1.test)("initializes with multiple initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" initialValue="{{ mode: true }}"/>
+      <AppState id="appState2" initialValue="{{ otherMode: 123 }}"/>
+      <Text testId="stateValue">|{appState.value.mode}|{appState2.value.otherMode}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|123|");
+}));
 (0, fixtures_1.test)("initializes with provided bucket name and no initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
     yield initTestBed(`
     <Fragment>
@@ -57,6 +69,18 @@ const fixtures_1 = require("../../testing/fixtures");
     yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
     yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|");
 }));
+(0, fixtures_1.test)("initializes with bucket name and multiple initial state value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AppState id="appState" bucket="settings" initialValue="{{ mode: true }}"/>
+      <AppState id="appState2" bucket="settings" initialValue="{{ otherMode: 123 }}"/>
+      <Text testId="stateValue">|{appState.value.mode}|{appState.value.otherMode}|</Text>
+    </Fragment>
+  `);
+    // AppState should initialize with default bucket and display the correct value
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("stateValue")).toHaveText("|true|123|");
+}));
 (0, fixtures_1.test)("updates state using the update API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
     <Fragment>
@@ -226,7 +250,7 @@ const fixtures_1 = require("../../testing/fixtures");
 // =============================================================================
 // INTEGRATION TESTS
 // =============================================================================
-(0, fixtures_1.test)("integrates with other components that consume app state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+(0, fixtures_1.test)("integrates with other components that consume app state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     // TODO: review these Copilot-created tests
     yield initTestBed(`
     <Fragment>
@@ -244,7 +268,7 @@ const fixtures_1 = require("../../testing/fixtures");
     // Check that the value was correctly retrieved from AppState
     yield (0, fixtures_1.expect)(page.getByTestId("themeValue")).toHaveText("light");
 }));
-(0, fixtures_1.test)("works correctly when wrapped in conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+(0, fixtures_1.test)("works correctly when wrapped in conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     // TODO: review these Copilot-created tests
     yield initTestBed(`
     <Fragment var.showState="{false}">

package/dist/scripts/src/components/AppState/AppStateNative.js

@@ -8,14 +8,13 @@ exports.defaultProps = {
     bucket: "default",
 };
 function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, onDidUpdate, }) {
-    const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
     const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
+    const value = (0, AppStateContext_1.useAppStateContextPart)((value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.appState) === null || _a === void 0 ? void 0 : _a[bucket]; });
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (initialValue !== undefined) {
-            registerAppState(bucket, initialValue);
+            update(bucket, initialValue);
         }
-    }, [bucket, initialValue, registerAppState]);
-    const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
+    }, [bucket, initialValue]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         updateState({ value });
         // Fire the didUpdate event when value changes

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.autoCompleteComponentRenderer = exports.AutoCompleteMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AutoComplete_module_scss_1 = __importDefault(require("../../components/AutoComplete/AutoComplete.module.scss"));
+const AutoComplete_module_scss_1 = __importDefault(require("./AutoComplete.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const container_helpers_1 = require("../container-helpers");
@@ -42,7 +42,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         itemCreated: {
             description: "This event is triggered when a new item is created by the user " +
                 "(if `creatable` is enabled).",
-        }
+        },
     },
     apis: {
         focus: {
@@ -70,26 +70,31 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
-        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--active",
-        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
-        [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-sm",
+        [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
+        [`paddingVertical-${COMP}-badge`]: "$space-0_5",
         [`borderRadius-${COMP}-badge`]: "$borderRadius",
-        [`paddingHorizontal-${COMP}-badge`]: "$space-2",
-        [`paddingVertical-${COMP}-badge`]: "$space-1",
-        [`paddingHorizontal-${COMP}`]: "$space-1",
+        [`paddingHorizontal-item-${COMP}`]: "$space-2",
+        [`paddingVertical-item-${COMP}`]: "$space-2",
+        [`paddingHorizontal-${COMP}`]: "$space-2",
         [`paddingVertical-${COMP}`]: "$space-2",
+        [`opacity-text-item-${COMP}--disabled`]: "0.5",
+        [`opacity-${COMP}--disabled`]: "0.5",
         [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
         [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
         [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
         [`textColor-${COMP}-badge`]: "$const-color-surface-50",
+        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
+        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
+        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
+        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
+        [`borderColor-${COMP}--disabled`]: "initial",
     },
 });
 exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, registerComponentApi, className, }) => {

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

@@ -360,7 +360,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                 // Reset highlighted option when dropdown closes
                                 setSelectedIndex(-1);
                             }
-                        }, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", { style: style, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                        }, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, style: style, "data-part-id": PART_LIST_WRAPPER, 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,
                                     }), "aria-expanded": open, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((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) => {
@@ -441,7 +441,7 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
             if (setSelectedIndex) {
                 setSelectedIndex(0); // CreatableItem is always at index 0
             }
-        }, onClick: handleClick, role: "option", "aria-selected": isHighlighted, children: `Create "${searchTerm}"` }));
+        }, onClick: handleClick, role: "option", "aria-selected": false, children: `Create "${searchTerm}"` }));
     // For normal creatable
     if (searchTerm.length > 0) {
         return Item;
@@ -449,7 +449,7 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
     return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
 }
 function AutoCompleteOption(option) {
-    const { value, label, enabled = true, keywords, readOnly, children, isHighlighted = false, itemIndex, } = option;
+    const { value, label, enabled = true, readOnly, children, isHighlighted = false, itemIndex, } = option;
     const id = (0, react_1.useId)();
     const { value: selectedValue, onChange, multi, setOpen, setSelectedIndex, optionRenderer, } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
@@ -459,7 +459,7 @@ function AutoCompleteOption(option) {
             setOpen(false);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-disabled": !enabled, "aria-selected": isHighlighted, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
             [AutoComplete_module_scss_1.default.disabledOption]: !enabled,
             [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
         }), onMouseDown: (e) => {