selective-ui 1.2.1 → 1.2.3

package/dist/selective-ui.umd.js

@@ -1,4 +1,4 @@
-/*! Selective UI v1.2.1 | MIT License */
+/*! Selective UI v1.2.3 | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -11,7 +11,7 @@
     class iStorage {
         constructor() {
             this.defaultConfig = {
-                showPanel: true,
+                accessoryVisible: true,
                 virtualScroll: true,
                 accessoryStyle: "top",
                 multiple: false,
@@ -149,11 +149,14 @@
          */
         run(key, ...params) {
             const executes = this.executeStored.get(key);
-            if (!executes)
-                return;
-            if (!this.timerRunner.has(key))
+            if (!executes || executes.length === 0) {
+                return Promise.resolve();
+            }
+            if (!this.timerRunner.has(key)) {
                 this.timerRunner.set(key, new Map());
+            }
             const runner = this.timerRunner.get(key);
+            const tasks = [];
             for (let i = 0; i < executes.length; i++) {
                 const entry = executes[i];
                 if (!entry)
@@ -161,20 +164,31 @@
                 const prev = runner.get(i);
                 if (prev)
                     clearTimeout(prev);
-                const timer = setTimeout(() => {
-                    entry.callback(params.length > 0 ? params : null);
-                    if (entry.once) {
-                        // Preserve index stability by leaving an empty slot.
-                        executes[i] = undefined;
-                        // Cleanup the timer handle for this index.
-                        const current = runner.get(i);
-                        if (current)
-                            clearTimeout(current);
-                        runner.delete(i);
-                    }
-                }, entry.timeout);
-                runner.set(i, timer);
+                const task = new Promise((resolve) => {
+                    const timer = setTimeout(async () => {
+                        try {
+                            const resp = entry.callback(params.length > 0 ? params : null);
+                            if (resp instanceof Promise) {
+                                await resp;
+                            }
+                        }
+                        catch { }
+                        finally {
+                            if (entry.once) {
+                                executes[i] = undefined;
+                                const current = runner.get(i);
+                                if (current)
+                                    clearTimeout(current);
+                                runner.delete(i);
+                            }
+                            resolve();
+                        }
+                    }, entry.timeout);
+                    runner.set(i, timer);
+                });
+                tasks.push(task);
             }
+            return Promise.all(tasks).then(() => void 0);
         }
         /**
          * Clears callbacks and timers.
@@ -417,10 +431,20 @@
             for (const optionKey in myOptions) {
                 const propValue = element[optionKey];
                 if (propValue) {
-                    myOptions[optionKey] = propValue;
+                    if (typeof myOptions[optionKey] === "boolean") {
+                        myOptions[optionKey] = this.string2Boolean(propValue);
+                    }
+                    else {
+                        myOptions[optionKey] = propValue;
+                    }
                 }
                 else if (typeof element?.dataset?.[optionKey] !== "undefined") {
-                    myOptions[optionKey] = element.dataset[optionKey];
+                    if (typeof myOptions[optionKey] === "boolean") {
+                        myOptions[optionKey] = this.string2Boolean(element.dataset[optionKey]);
+                    }
+                    else {
+                        myOptions[optionKey] = element.dataset[optionKey];
+                    }
                 }
             }
             return myOptions;
@@ -821,7 +845,7 @@
          */
         constructor(options) {
             this.node = null;
-            this._options = null;
+            this.options = null;
             if (options)
                 this.init(options);
         }
@@ -836,7 +860,7 @@
                 classList: "selective-ui-placeholder",
                 innerHTML: options.placeholder,
             });
-            this._options = options;
+            this.options = options;
         }
         /**
          * Retrieves the current placeholder text from the configuration.
@@ -844,7 +868,7 @@
          * @returns {string} - The current placeholder text.
          */
         get() {
-            return this._options?.placeholder ?? "";
+            return this.options?.placeholder ?? "";
         }
         /**
          * Updates the placeholder text and optionally saves it to the configuration.
@@ -854,12 +878,12 @@
          * @param {boolean} [isSave=true] - Whether to persist the new value in the configuration.
          */
         set(value, isSave = true) {
-            if (!this.node || !this._options)
+            if (!this.node || !this.options)
                 return;
             if (isSave)
-                this._options.placeholder = value;
+                this.options.placeholder = value;
             const translated = Libs.tagTranslate(value);
-            this.node.innerHTML = this._options.allowHtml ? translated : Libs.stripHtml(translated);
+            this.node.innerHTML = this.options.allowHtml ? translated : Libs.stripHtml(translated);
         }
     }
 
@@ -868,13 +892,13 @@
      */
     class Directive {
         constructor() {
-            this.node = this._init();
+            this.node = this.init();
         }
         /**
          * Represents a directive button element used to toggle dropdown state.
          * Initializes a clickable node with appropriate ARIA attributes for accessibility.
          */
-        _init() {
+        init() {
             // Libs.nodeCreator returns Element, but this node is always an HTMLElement in practice.
             return Libs.nodeCreator({
                 node: "div",
@@ -906,8 +930,8 @@
             this.nodeMounted = null;
             this.node = null;
             this.options = null;
-            this._ActionOnSelectAll = [];
-            this._ActionOnDeSelectAll = [];
+            this.actionOnSelectAll = [];
+            this.actionOnDeSelectAll = [];
             if (options)
                 this.init(options);
         }
@@ -928,7 +952,7 @@
                                 classList: "selective-ui-option-handle-item",
                                 textContent: options.textSelectAll,
                                 onclick: () => {
-                                    iEvents.callFunctions(this._ActionOnSelectAll);
+                                    iEvents.callFunctions(this.actionOnSelectAll);
                                 },
                             },
                         },
@@ -938,7 +962,7 @@
                                 classList: "selective-ui-option-handle-item",
                                 textContent: options.textDeselectAll,
                                 onclick: () => {
-                                    iEvents.callFunctions(this._ActionOnDeSelectAll);
+                                    iEvents.callFunctions(this.actionOnDeSelectAll);
                                 },
                             },
                         },
@@ -993,7 +1017,7 @@
          */
         OnSelectAll(action = null) {
             if (typeof action === "function")
-                this._ActionOnSelectAll.push(action);
+                this.actionOnSelectAll.push(action);
         }
         /**
          * Registers a callback to be executed when "Deselect All" is clicked.
@@ -1002,7 +1026,7 @@
          */
         OnDeSelectAll(action = null) {
             if (typeof action === "function")
-                this._ActionOnDeSelectAll.push(action);
+                this.actionOnDeSelectAll.push(action);
         }
     }
 
@@ -1135,10 +1159,10 @@
         constructor() {
             this.isInit = false;
             this.element = null;
-            this._resizeObserver = null;
-            this._mutationObserver = null;
+            this.resizeObserver = null;
+            this.mutationObserver = null;
             this.isInit = true;
-            this._boundUpdateChanged = this._updateChanged.bind(this);
+            this.boundUpdateChanged = this.updateChanged.bind(this);
         }
         /**
          * Callback invoked when the observed element's metrics change.
@@ -1152,7 +1176,7 @@
          * Computes the current metrics of the bound element (bounding rect + computed styles)
          * and forwards them to `onChanged(metrics)`.
          */
-        _updateChanged() {
+        updateChanged() {
             const el = this.element;
             if (!el || typeof el.getBoundingClientRect !== "function") {
                 const defaultMetrics = {
@@ -1201,7 +1225,7 @@
          * Manually triggers a metrics computation and notification via `onChanged`.
          */
         trigger() {
-            this._updateChanged();
+            this.updateChanged();
         }
         /**
          * Starts observing the provided element for resize and style/class mutations,
@@ -1215,18 +1239,18 @@
                 throw new Error("Invalid element");
             }
             this.element = element;
-            this._resizeObserver = new ResizeObserver(this._boundUpdateChanged);
-            this._resizeObserver.observe(element);
-            this._mutationObserver = new MutationObserver(this._boundUpdateChanged);
-            this._mutationObserver.observe(element, {
+            this.resizeObserver = new ResizeObserver(this.boundUpdateChanged);
+            this.resizeObserver.observe(element);
+            this.mutationObserver = new MutationObserver(this.boundUpdateChanged);
+            this.mutationObserver.observe(element, {
                 attributes: true,
                 attributeFilter: ["style", "class"],
             });
-            window.addEventListener("scroll", this._boundUpdateChanged, true);
-            window.addEventListener("resize", this._boundUpdateChanged);
+            window.addEventListener("scroll", this.boundUpdateChanged, true);
+            window.addEventListener("resize", this.boundUpdateChanged);
             if (window.visualViewport) {
-                window.visualViewport.addEventListener("resize", this._boundUpdateChanged);
-                window.visualViewport.addEventListener("scroll", this._boundUpdateChanged);
+                window.visualViewport.addEventListener("resize", this.boundUpdateChanged);
+                window.visualViewport.addEventListener("scroll", this.boundUpdateChanged);
             }
         }
         /**
@@ -1234,17 +1258,17 @@
          * and releases internal observer resources.
          */
         disconnect() {
-            this._resizeObserver?.disconnect();
-            this._mutationObserver?.disconnect();
+            this.resizeObserver?.disconnect();
+            this.mutationObserver?.disconnect();
             this.onChanged = (_metrics) => { };
-            window.removeEventListener("scroll", this._boundUpdateChanged, true);
-            window.removeEventListener("resize", this._boundUpdateChanged);
+            window.removeEventListener("scroll", this.boundUpdateChanged, true);
+            window.removeEventListener("resize", this.boundUpdateChanged);
             if (window.visualViewport) {
-                window.visualViewport.removeEventListener("resize", this._boundUpdateChanged);
-                window.visualViewport.removeEventListener("scroll", this._boundUpdateChanged);
+                window.visualViewport.removeEventListener("resize", this.boundUpdateChanged);
+                window.visualViewport.removeEventListener("scroll", this.boundUpdateChanged);
             }
-            this._resizeObserver = null;
-            this._mutationObserver = null;
+            this.resizeObserver = null;
+            this.mutationObserver = null;
             this.element = null;
         }
     }
@@ -1266,22 +1290,22 @@
             this.isCreated = false;
             this.optionAdapter = null;
             this.node = null;
-            this._effSvc = null;
-            this._resizeObser = null;
-            this._parent = null;
+            this.effSvc = null;
+            this.resizeObser = null;
+            this.parent = null;
             this.optionHandle = null;
             this.emptyState = null;
             this.loadingState = null;
             this.recyclerView = null;
-            this._optionsContainer = null;
-            this._scrollListener = null;
-            this._hideLoadHandle = null;
+            this.optionsContainer = null;
+            this.scrollListener = null;
+            this.hideLoadHandle = null;
             this.virtualScrollConfig = {
                 estimateItemHeight: 36,
                 overscan: 8,
                 dynamicHeights: true
             };
-            this._modelManager = modelManager;
+            this.modelManager = modelManager;
             if (select && options) {
                 this.init(select, options);
             }
@@ -1294,7 +1318,7 @@
          * @param {object} options - Configuration for panel, IDs, multiple mode, and texts.
          */
         init(select, options) {
-            if (!this._modelManager)
+            if (!this.modelManager)
                 throw new Error("Popup requires a ModelManager instance.");
             this.optionHandle = new OptionHandle(options);
             this.emptyState = new EmptyState(options);
@@ -1322,8 +1346,8 @@
                 },
             }, null);
             this.node = nodeMounted.view;
-            this._optionsContainer = nodeMounted.tags.OptionsContainer;
-            this._parent = Libs.getBinderMap(select);
+            this.optionsContainer = nodeMounted.tags.OptionsContainer;
+            this.parent = Libs.getBinderMap(select);
             this.options = options;
             const recyclerViewOpt = options.virtualScroll
                 ? {
@@ -1334,8 +1358,8 @@
                 }
                 : {};
             // Load ModelManager resources into container
-            this._modelManager.load(this._optionsContainer, { isMultiple: options.multiple }, recyclerViewOpt);
-            const MMResources = this._modelManager.getResources();
+            this.modelManager.load(this.optionsContainer, { isMultiple: options.multiple }, recyclerViewOpt);
+            const MMResources = this.modelManager.getResources();
             this.optionAdapter = MMResources.adapter;
             this.recyclerView = MMResources.recyclerView;
             this.optionHandle.OnSelectAll(() => {
@@ -1344,21 +1368,21 @@
             this.optionHandle.OnDeSelectAll(() => {
                 MMResources.adapter.checkAll(false);
             });
-            this._setupEmptyStateLogic();
+            this.setupEmptyStateLogic();
         }
         /**
          * Shows the loading state and temporarily skips model events.
          * Adjusts size based on current visibility stats and triggers a resize.
          */
         async showLoading() {
-            if (!this.options || !this.loadingState || !this.optionHandle || !this.optionAdapter || !this._modelManager)
+            if (!this.options || !this.loadingState || !this.optionHandle || !this.optionAdapter || !this.modelManager)
                 return;
-            if (this._hideLoadHandle)
-                clearTimeout(this._hideLoadHandle);
-            this._modelManager.skipEvent(true);
+            if (this.hideLoadHandle)
+                clearTimeout(this.hideLoadHandle);
+            this.modelManager.skipEvent(true);
             if (Libs.string2Boolean(this.options.loadingfield) === false)
                 return;
-            // this._updateEmptyState({isEmpty: false, hasVisible: true});
+            // this.updateEmptyState({isEmpty: false, hasVisible: true});
             this.emptyState.hide();
             this.loadingState.show(this.optionAdapter.getVisibilityStats().hasVisible);
             // this.optionHandle.hide();
@@ -1369,31 +1393,31 @@
          * updates empty state based on adapter visibility stats, and triggers a resize.
          */
         async hideLoading() {
-            if (!this.options || !this.loadingState || !this.optionAdapter || !this._modelManager)
+            if (!this.options || !this.loadingState || !this.optionAdapter || !this.modelManager)
                 return;
-            if (this._hideLoadHandle)
-                clearTimeout(this._hideLoadHandle);
-            this._hideLoadHandle = setTimeout(() => {
-                this._modelManager?.skipEvent(false);
+            if (this.hideLoadHandle)
+                clearTimeout(this.hideLoadHandle);
+            this.hideLoadHandle = setTimeout(() => {
+                this.modelManager?.skipEvent(false);
                 this.loadingState?.hide();
                 const stats = this.optionAdapter?.getVisibilityStats();
-                this._updateEmptyState(stats ?? undefined);
+                this.updateEmptyState(stats ?? undefined);
                 this.triggerResize();
-            }, 200);
+            }, this.options.animationtime);
         }
         /**
          * Subscribes to adapter visibility and item changes to keep the empty state in sync.
          * Triggers resize when items change to reflect layout updates.
          */
-        _setupEmptyStateLogic() {
+        setupEmptyStateLogic() {
             if (!this.optionAdapter)
                 return;
             this.optionAdapter.onVisibilityChanged((stats) => {
-                this._updateEmptyState(stats);
+                this.updateEmptyState(stats);
             });
             this.optionAdapter.onPropChanged("items", () => {
                 const stats = this.optionAdapter.getVisibilityStats();
-                this._updateEmptyState(stats);
+                this.updateEmptyState(stats);
                 this.triggerResize();
             });
         }
@@ -1403,23 +1427,23 @@
          *
          * @param {VisibilityStats|undefined} stats - Visibility stats; computed if omitted.
          */
-        _updateEmptyState(stats) {
-            if (!this.optionAdapter || !this.emptyState || !this.optionHandle || !this._optionsContainer)
+        updateEmptyState(stats) {
+            if (!this.optionAdapter || !this.emptyState || !this.optionHandle || !this.optionsContainer)
                 return;
             const s = stats ?? this.optionAdapter.getVisibilityStats();
             if (s.isEmpty) {
                 this.emptyState.show("nodata");
-                this._optionsContainer.classList.add("hide");
+                this.optionsContainer.classList.add("hide");
                 this.optionHandle.hide();
             }
             else if (!s.hasVisible) {
                 this.emptyState.show("notfound");
-                this._optionsContainer.classList.add("hide");
+                this.optionsContainer.classList.add("hide");
                 this.optionHandle.hide();
             }
             else {
                 this.emptyState.hide();
-                this._optionsContainer.classList.remove("hide");
+                this.optionsContainer.classList.remove("hide");
                 this.optionHandle.refresh();
             }
         }
@@ -1439,20 +1463,20 @@
          * Injects an effector service used to perform side effects (e.g., animations or external actions).
          */
         setupEffector(effectorSvc) {
-            this._effSvc = effectorSvc;
+            this.effSvc = effectorSvc;
         }
         /**
          * Opens the popup: creates and attaches DOM if needed, initializes observers and effector,
          * computes position and dimensions, and runs expand animation. Invokes callback on completion.
          */
         open(callback = null, isShowEmptyState) {
-            if (!this.node || !this.options || !this.optionHandle || !this._parent || !this._effSvc)
+            if (!this.node || !this.options || !this.optionHandle || !this.parent || !this.effSvc)
                 return;
             if (!this.isCreated) {
                 document.body.appendChild(this.node);
                 this.isCreated = true;
-                this._resizeObser = new ResizeObserverService();
-                this._effSvc.setElement(this.node);
+                this.resizeObser = new ResizeObserverService();
+                this.effSvc.setElement(this.node);
                 this.node.addEventListener("mousedown", (e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -1460,11 +1484,11 @@
             }
             this.optionHandle.refresh();
             if (isShowEmptyState) {
-                this._updateEmptyState();
+                this.updateEmptyState();
             }
-            const location = this._getParentLocation();
-            const { position, top, maxHeight, realHeight } = this._calculatePosition(location);
-            this._effSvc.expand({
+            const location = this.getParentLocation();
+            const { position, top, maxHeight, realHeight } = this.calculatePosition(location);
+            this.effSvc.expand({
                 duration: this.options.animationtime,
                 display: "flex",
                 width: location.width,
@@ -1474,14 +1498,14 @@
                 realHeight,
                 position,
                 onComplete: () => {
-                    if (!this._resizeObser || !this._parent)
+                    if (!this.resizeObser || !this.parent)
                         return;
-                    this._resizeObser.onChanged = (_metrics) => {
+                    this.resizeObser.onChanged = (_metrics) => {
                         // Recompute from parent each time to keep behavior identical.
-                        const loc = this._getParentLocation();
-                        this._handleResize(loc);
+                        const loc = this.getParentLocation();
+                        this.handleResize(loc);
                     };
-                    this._resizeObser.connect(this._parent.container.tags.ViewPanel);
+                    this.resizeObser.connect(this.parent.container.tags.ViewPanel);
                     callback?.();
                     const rv = this.recyclerView;
                     rv?.resume?.();
@@ -1493,12 +1517,12 @@
          * Safely no-ops if the popup has not been created.
          */
         close(callback = null) {
-            if (!this.isCreated || !this.options || !this._resizeObser || !this._effSvc)
+            if (!this.isCreated || !this.options || !this.resizeObser || !this.effSvc)
                 return;
             const rv = this.recyclerView;
             rv?.suspend?.();
-            this._resizeObser.disconnect();
-            this._effSvc.collapse({
+            this.resizeObser.disconnect();
+            this.effSvc.collapse({
                 duration: this.options.animationtime,
                 onComplete: callback ?? undefined,
             });
@@ -1509,7 +1533,7 @@
          */
         triggerResize() {
             if (this.isCreated)
-                this._resizeObser?.trigger();
+                this.resizeObser?.trigger();
         }
         /**
          * Enables infinite scroll by listening to container scroll events and loading more data
@@ -1521,7 +1545,7 @@
         setupInfiniteScroll(searchController, _options) {
             if (!this.node)
                 return;
-            this._scrollListener = async () => {
+            this.scrollListener = async () => {
                 const state = searchController.getPaginationState();
                 if (!state.isPaginationEnabled)
                     return;
@@ -1539,7 +1563,7 @@
                     }
                 }
             };
-            this.node.addEventListener("scroll", this._scrollListener);
+            this.node.addEventListener("scroll", this.scrollListener);
         }
         /**
          * Completely tear down the popup instance and release all resources.
@@ -1554,24 +1578,24 @@
          * Safe to call multiple times; all operations are guarded via optional chaining.
          */
         detroy() {
-            if (this._hideLoadHandle) {
-                clearTimeout(this._hideLoadHandle);
-                this._hideLoadHandle = null;
+            if (this.hideLoadHandle) {
+                clearTimeout(this.hideLoadHandle);
+                this.hideLoadHandle = null;
             }
-            if (this.node && this._scrollListener) {
-                this.node.removeEventListener("scroll", this._scrollListener);
-                this._scrollListener = null;
+            if (this.node && this.scrollListener) {
+                this.node.removeEventListener("scroll", this.scrollListener);
+                this.scrollListener = null;
             }
             try {
-                this._resizeObser?.disconnect();
+                this.resizeObser?.disconnect();
             }
             catch (_) { }
-            this._resizeObser = null;
+            this.resizeObser = null;
             try {
-                this._effSvc?.setElement?.(null);
+                this.effSvc?.setElement?.(null);
             }
             catch (_) { }
-            this._effSvc = null;
+            this.effSvc = null;
             if (this.node) {
                 try {
                     const clone = this.node.cloneNode(true);
@@ -1583,20 +1607,20 @@
                 }
             }
             this.node = null;
-            this._optionsContainer = null;
+            this.optionsContainer = null;
             try {
-                this._modelManager?.skipEvent?.(false);
+                this.modelManager?.skipEvent?.(false);
                 this.recyclerView?.clear?.();
                 this.recyclerView = null;
                 this.optionAdapter = null;
                 this.node.remove();
             }
             catch (_) { }
-            this._modelManager = null;
+            this.modelManager = null;
             this.optionHandle = null;
             this.emptyState = null;
             this.loadingState = null;
-            this._parent = null;
+            this.parent = null;
             this.options = null;
             this.isCreated = false;
         }
@@ -1604,8 +1628,8 @@
          * Computes the parent panel's location and box metrics, including size, position,
          * padding, and border, accounting for iOS visual viewport offsets.
          */
-        _getParentLocation() {
-            const viewPanel = this._parent.container.tags.ViewPanel;
+        getParentLocation() {
+            const viewPanel = this.parent.container.tags.ViewPanel;
             const rect = viewPanel.getBoundingClientRect();
             const style = window.getComputedStyle(viewPanel);
             return {
@@ -1631,13 +1655,13 @@
          * Determines popup placement (top/bottom) and height constraints based on available viewport space,
          * content size, and configured min/max heights; returns final position, top, and heights.
          */
-        _calculatePosition(location) {
+        calculatePosition(location) {
             const vv = window.visualViewport;
             const is_ios = Libs.IsIOS();
             const viewportHeight = vv?.height ?? window.innerHeight;
             const gap = 3;
             const safeMargin = 15;
-            const dimensions = this._effSvc.getHiddenDimensions("flex");
+            const dimensions = this.effSvc.getHiddenDimensions("flex");
             const contentHeight = dimensions.scrollHeight;
             const configMaxHeight = parseFloat(this.options?.panelHeight ?? "220") || 220;
             const configMinHeight = parseFloat(this.options?.panelMinHeight ?? "100") || 100;
@@ -1676,11 +1700,11 @@
          * Handles parent resize events by recalculating placement and dimensions,
          * then animates the popup to the new size and position.
          */
-        _handleResize(location) {
-            if (!this.options || !this._effSvc)
+        handleResize(location) {
+            if (!this.options || !this.effSvc)
                 return;
-            const { position, top, maxHeight, realHeight } = this._calculatePosition(location);
-            this._effSvc.resize({
+            const { position, top, maxHeight, realHeight } = this.calculatePosition(location);
+            this.effSvc.resize({
                 duration: this.options.animationtime,
                 width: location.width,
                 left: location.left,
@@ -1854,8 +1878,8 @@
          * @param {string|HTMLElement|null} [query] - A CSS selector or the target element to control.
          */
         constructor(query = null) {
-            this._timeOut = null;
-            this._resizeTimeout = null;
+            this.timeOut = null;
+            this.resizeTimeout = null;
             this._isAnimating = false;
             if (query)
                 this.setElement(query);
@@ -1882,13 +1906,13 @@
          * @returns {this} - The effector instance for chaining.
          */
         cancel() {
-            if (this._timeOut) {
-                clearTimeout(this._timeOut);
-                this._timeOut = null;
+            if (this.timeOut) {
+                clearTimeout(this.timeOut);
+                this.timeOut = null;
             }
-            if (this._resizeTimeout) {
-                clearTimeout(this._resizeTimeout);
-                this._resizeTimeout = null;
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+                this.resizeTimeout = null;
             }
             this._isAnimating = false;
             return this;
@@ -1963,7 +1987,7 @@
                     opacity: "1",
                     overflow: isScrollable ? "auto" : "hidden",
                 });
-                this._timeOut = setTimeout(() => {
+                this.timeOut = setTimeout(() => {
                     this.element.style.transition = "none";
                     this._isAnimating = false;
                     onComplete?.();
@@ -1995,7 +2019,7 @@
                     opacity: "0",
                     overflow: isScrollable ? "auto" : "hidden",
                 });
-                this._timeOut = setTimeout(() => {
+                this.timeOut = setTimeout(() => {
                     Object.assign(this.element.style, {
                         display: "none",
                         transition: "none",
@@ -2031,7 +2055,7 @@
                     overflow: "hidden",
                 });
             });
-            this._timeOut = setTimeout(() => {
+            this.timeOut = setTimeout(() => {
                 Object.assign(this.element.style, {
                     width: "",
                     overflow: "",
@@ -2065,7 +2089,7 @@
                     overflow: "hidden",
                 });
             });
-            this._timeOut = setTimeout(() => {
+            this.timeOut = setTimeout(() => {
                 Object.assign(this.element.style, {
                     width: "",
                     overflow: "",
@@ -2095,7 +2119,7 @@
             if (isPositionChanged) {
                 this.element.style.transition = `top ${duration}ms ease-out, height ${duration}ms ease-out, max-height ${duration}ms ease-out;`;
             }
-            setTimeout(() => {
+            requestAnimationFrame(() => {
                 const styles = {
                     width: `${width}px`,
                     left: `${left}px`,
@@ -2109,7 +2133,7 @@
                     styles.transition = `height ${duration}ms, top ${duration}ms`;
                 }
                 else {
-                    this._resizeTimeout = setTimeout(() => {
+                    this.resizeTimeout = setTimeout(() => {
                         if (this.element?.style) {
                             this.element.style.transition = null;
                         }
@@ -2117,7 +2141,7 @@
                 }
                 Object.assign(this.element.style, styles);
                 if (animate && (isPositionChanged || heightDiff > 1)) {
-                    this._resizeTimeout = setTimeout(() => {
+                    this.resizeTimeout = setTimeout(() => {
                         this.element.style.transition = null;
                         if (isPositionChanged)
                             delete this.element.style.transition;
@@ -2129,7 +2153,7 @@
                         delete this.element.style.transition;
                     onComplete?.();
                 }
-            }, 20);
+            });
             return this;
         }
         /**
@@ -2212,7 +2236,7 @@
          * Initializes a group model with options and an optional <optgroup> target.
          * Reads the label and collapsed state from the target element's attributes/dataset.
          *
-         * @param {DefaultConfig} options - Configuration for the model.
+         * @param {SelectiveOptions} options - Configuration for the model.
          * @param {HTMLOptGroupElement} [targetElement] - The source <optgroup> element.
          */
         constructor(options, targetElement) {
@@ -2220,7 +2244,7 @@
             this.label = "";
             this.items = [];
             this.collapsed = false;
-            this._privOnCollapsedChanged = [];
+            this.privOnCollapsedChanged = [];
             if (targetElement) {
                 this.label = targetElement.label;
                 this.collapsed = Libs.string2Boolean(targetElement.dataset?.collapsed);
@@ -2283,7 +2307,7 @@
          * @param {(evtToken: IEventCallback, model: GroupModel, collapsed: boolean) => void} callback - Listener for collapse changes.
          */
         onCollapsedChanged(callback) {
-            this._privOnCollapsedChanged.push(callback);
+            this.privOnCollapsedChanged.push(callback);
         }
         /**
          * Toggles the group's collapsed state, updates the view, and notifies registered listeners.
@@ -2291,7 +2315,7 @@
         toggleCollapse() {
             this.collapsed = !this.collapsed;
             this.view?.setCollapsed(this.collapsed);
-            iEvents.callEvent([this, this.collapsed], ...this._privOnCollapsedChanged);
+            iEvents.callEvent([this, this.collapsed], ...this.privOnCollapsedChanged);
         }
         /**
          * Adds an option item to this group and sets its back-reference to the group.
@@ -2337,9 +2361,9 @@
          */
         constructor(options, targetElement = null, view = null) {
             super(options, targetElement, view);
-            this._privOnSelected = [];
-            this._privOnInternalSelected = [];
-            this._privOnVisibilityChanged = [];
+            this.privOnSelected = [];
+            this.privOnInternalSelected = [];
+            this.privOnVisibilityChanged = [];
             this._visible = true;
             this._highlighted = false;
             this.group = null;
@@ -2387,7 +2411,7 @@
          */
         set selected(value) {
             this.selectedNonTrigger = value;
-            iEvents.callEvent([this, value], ...this._privOnSelected);
+            iEvents.callEvent([this, value], ...this.privOnSelected);
         }
         /**
          * Gets whether the option is currently visible in the UI.
@@ -2409,7 +2433,7 @@
             const viewEl = this.view?.getView?.();
             if (viewEl)
                 viewEl.classList.toggle("hide", !value);
-            iEvents.callEvent([this, value], ...this._privOnVisibilityChanged);
+            iEvents.callEvent([this, value], ...this.privOnVisibilityChanged);
         }
         /**
          * Gets the selected state without triggering external listeners (alias of selected).
@@ -2437,7 +2461,7 @@
             }
             if (this.targetElement)
                 this.targetElement.selected = value;
-            iEvents.callEvent([this, value], ...this._privOnInternalSelected);
+            iEvents.callEvent([this, value], ...this.privOnInternalSelected);
         }
         /**
          * Returns the display text for the option, applying tag translation and optional HTML allowance.
@@ -2495,7 +2519,7 @@
          * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Selection listener.
          */
         onSelected(callback) {
-            this._privOnSelected.push(callback);
+            this.privOnSelected.push(callback);
         }
         /**
          * Registers a listener invoked when internal selection changes (via setter `selectedNonTrigger`).
@@ -2503,7 +2527,7 @@
          * @param {(evtToken: IEventCallback, el: OptionModel, selected: boolean) => void} callback - Internal selection listener.
          */
         onInternalSelected(callback) {
-            this._privOnInternalSelected.push(callback);
+            this.privOnInternalSelected.push(callback);
         }
         /**
          * Registers a listener invoked when visibility changes (via setter `visible`).
@@ -2511,7 +2535,7 @@
          * @param {(evtToken: IEventCallback, model: OptionModel, visible: boolean) => void} callback - Visibility listener.
          */
         onVisibilityChanged(callback) {
-            this._privOnVisibilityChanged.push(callback);
+            this.privOnVisibilityChanged.push(callback);
         }
         /**
          * Hook called when the target <option> element changes.
@@ -2552,11 +2576,12 @@
          * @param {object} options - Configuration object passed to GroupModel/OptionModel and view infrastructure.
          */
         constructor(options) {
-            this._privModelList = [];
-            this._privAdapterHandle = null;
-            this._privRecyclerViewHandle = null;
-            this._lastFingerprint = null;
+            this.privModelList = [];
+            this.privAdapterHandle = null;
+            this.privRecyclerViewHandle = null;
+            this.lastFingerprint = null;
             this.options = null;
+            this.oldPosition = 0;
             this.options = options;
         }
         /**
@@ -2565,7 +2590,7 @@
          * @param {new TAdapter} adapter - The adapter constructor (class) to instantiate.
          */
         setupAdapter(adapter) {
-            this._privAdapter = adapter;
+            this.privAdapter = adapter;
         }
         /**
          * Registers the RecyclerView class responsible for hosting and updating item views.
@@ -2573,7 +2598,7 @@
          * @param {new RecyclerViewContract<TAdapter>} recyclerView - The recycler view constructor.
          */
         setupRecyclerView(recyclerView) {
-            this._privRecyclerView = recyclerView;
+            this.privRecyclerView = recyclerView;
         }
         /**
          * Checks whether the provided model data differs from the last recorded fingerprint.
@@ -2584,10 +2609,10 @@
          * @returns {boolean} True if there are real changes; false otherwise.
          */
         hasRealChanges(modelData) {
-            const newFingerprint = this._createFingerprint(modelData);
-            const hasChanges = newFingerprint !== this._lastFingerprint;
+            const newFingerprint = this.createFingerprint(modelData);
+            const hasChanges = newFingerprint !== this.lastFingerprint;
             if (hasChanges)
-                this._lastFingerprint = newFingerprint;
+                this.lastFingerprint = newFingerprint;
             return hasChanges;
         }
         /**
@@ -2599,7 +2624,7 @@
          * @param {Array<HTMLOptionElement|HTMLOptGroupElement>} modelData - The current model data to fingerprint.
          * @returns {string} A deterministic fingerprint representing the structure and selection state.
          */
-        _createFingerprint(modelData) {
+        createFingerprint(modelData) {
             return modelData
                 .map((item) => {
                 if (item.tagName === "OPTGROUP") {
@@ -2627,12 +2652,12 @@
          * @returns {Array<GroupModel|OptionModel>} - The ordered list of group and option models.
          */
         createModelResources(modelData) {
-            this._privModelList = [];
+            this.privModelList = [];
             let currentGroup = null;
             modelData.forEach((data) => {
                 if (data.tagName === "OPTGROUP") {
                     currentGroup = new GroupModel(this.options, data);
-                    this._privModelList.push(currentGroup);
+                    this.privModelList.push(currentGroup);
                 }
                 else if (data.tagName === "OPTION") {
                     const optionEl = data;
@@ -2643,12 +2668,12 @@
                         optionModel.group = currentGroup;
                     }
                     else {
-                        this._privModelList.push(optionModel);
+                        this.privModelList.push(optionModel);
                         currentGroup = null;
                     }
                 }
             });
-            return this._privModelList;
+            return this.privModelList;
         }
         /**
          * Replaces the current model list with new data and syncs it into the adapter,
@@ -2656,12 +2681,12 @@
          *
          * @param {Array<HTMLOptGroupElement|HTMLOptionElement>} modelData - New source elements to rebuild models from.
          */
-        replace(modelData) {
-            this._lastFingerprint = null;
+        async replace(modelData) {
+            this.lastFingerprint = null;
             this.createModelResources(modelData);
-            if (this._privAdapterHandle) {
+            if (this.privAdapterHandle) {
                 // Adapter expects TModel[], but this manager's list is GroupModel|OptionModel.
-                this._privAdapterHandle.syncFromSource(this._privModelList);
+                await this.privAdapterHandle.syncFromSource(this.privModelList);
             }
             this.refresh(false);
         }
@@ -2670,7 +2695,7 @@
          * typically used after external updates to model data.
          */
         notify() {
-            if (!this._privAdapterHandle)
+            if (!this.privAdapterHandle)
                 return;
             this.refresh(false);
         }
@@ -2679,11 +2704,11 @@
          * and applies optional configuration overrides for adapter and recyclerView.
          */
         load(viewElement, adapterOpt = {}, recyclerViewOpt = {}) {
-            this._privAdapterHandle = new this._privAdapter(this._privModelList);
-            Object.assign(this._privAdapterHandle, adapterOpt);
-            this._privRecyclerViewHandle = new this._privRecyclerView(viewElement);
-            Object.assign(this._privRecyclerViewHandle, recyclerViewOpt);
-            this._privRecyclerViewHandle.setAdapter(this._privAdapterHandle);
+            this.privAdapterHandle = new this.privAdapter(this.privModelList);
+            Object.assign(this.privAdapterHandle, adapterOpt);
+            this.privRecyclerViewHandle = new this.privRecyclerView(viewElement);
+            Object.assign(this.privRecyclerViewHandle, recyclerViewOpt);
+            this.privRecyclerViewHandle.setAdapter(this.privAdapterHandle);
         }
         /**
          * Diffs existing models against new <optgroup>/<option> data to update in place:
@@ -2693,7 +2718,7 @@
         update(modelData) {
             if (!this.hasRealChanges(modelData))
                 return;
-            const oldModels = this._privModelList;
+            const oldModels = this.privModelList;
             const newModels = [];
             const oldGroupMap = new Map();
             const oldOptionMap = new Map();
@@ -2765,6 +2790,10 @@
                 }
             });
             let isUpdate = true;
+            if (this.oldPosition == 0) {
+                isUpdate = false;
+            }
+            this.oldPosition = position;
             oldGroupMap.forEach((removedGroup) => {
                 isUpdate = false;
                 removedGroup.remove();
@@ -2773,11 +2802,11 @@
                 isUpdate = false;
                 removedOption.remove();
             });
-            this._privModelList = newModels;
-            if (this._privAdapterHandle) {
-                this._privAdapterHandle.updateData(this._privModelList);
+            this.privModelList = newModels;
+            if (this.privAdapterHandle) {
+                this.privAdapterHandle.updateData(this.privModelList);
             }
-            this.onUpdated();
+            // this.onUpdated();
             this.refresh(isUpdate);
         }
         /**
@@ -2791,8 +2820,8 @@
          * @param {boolean} value - True to skip events; false to restore normal behavior.
          */
         skipEvent(value) {
-            if (this._privAdapterHandle)
-                this._privAdapterHandle.isSkipEvent = value;
+            if (this.privAdapterHandle)
+                this.privAdapterHandle.isSkipEvent = value;
         }
         /**
          * Re-renders the recycler view if present and invokes the post-refresh hook.
@@ -2801,9 +2830,9 @@
          * @param isUpdate - Indicates if this refresh is due to an update operation.
          */
         refresh(isUpdate) {
-            if (!this._privRecyclerViewHandle)
+            if (!this.privRecyclerViewHandle)
                 return;
-            this._privRecyclerViewHandle.refresh(isUpdate);
+            this.privRecyclerViewHandle.refresh(isUpdate);
             this.onUpdated();
         }
         /**
@@ -2812,9 +2841,9 @@
          */
         getResources() {
             return {
-                modelList: this._privModelList,
-                adapter: this._privAdapterHandle,
-                recyclerView: this._privRecyclerViewHandle,
+                modelList: this.privModelList,
+                adapter: this.privAdapterHandle,
+                recyclerView: this.privRecyclerViewHandle,
             };
         }
         /**
@@ -2822,14 +2851,14 @@
          * enabling observers to react before a change is applied.
          */
         triggerChanging(event_name) {
-            this._privAdapterHandle?.changingProp(event_name);
+            return this.privAdapterHandle?.changingProp(event_name);
         }
         /**
          * Triggers the adapter's post-change pipeline for a named event,
          * notifying observers after a change has been applied.
          */
         triggerChanged(event_name) {
-            this._privAdapterHandle?.changeProp(event_name);
+            return this.privAdapterHandle?.changeProp(event_name);
         }
     }
 
@@ -2920,6 +2949,7 @@
             this.selectUIMask = null;
             this.parentMask = null;
             this.modelManager = null;
+            this.modelDatas = [];
             if (options)
                 this.init(options);
         }
@@ -2959,7 +2989,10 @@
          * Keeps the accessory box aligned relative to the parent mask.
          */
         refreshLocation() {
-            if (!this.parentMask || !this.node || !this.selectUIMask || !this.options)
+            if (!this.parentMask ||
+                !this.node ||
+                !this.selectUIMask ||
+                !this.options)
                 return;
             const ref = this.options.accessoryStyle === "top"
                 ? this.selectUIMask
@@ -2985,7 +3018,6 @@
                 return;
             this.node.replaceChildren();
             if (modelDatas.length > 0 && this.options.multiple) {
-                this.node.classList.remove("hide");
                 modelDatas.forEach((modelData) => {
                     Libs.mountNode({
                         AccessoryItem: {
@@ -2998,12 +3030,10 @@
                                         role: "button",
                                         ariaLabel: `${this.options.textAccessoryDeselect}${modelData.textContent}`,
                                         title: `${this.options.textAccessoryDeselect}${modelData.textContent}`,
-                                        onclick: (evt) => {
+                                        onclick: async (evt) => {
                                             evt.preventDefault();
-                                            this.modelManager?.triggerChanging?.("select");
-                                            setTimeout(() => {
-                                                modelData.selected = false;
-                                            }, 10);
+                                            await this.modelManager?.triggerChanging?.("select");
+                                            modelData.selected = false;
                                         },
                                     },
                                 },
@@ -3020,10 +3050,26 @@
                 });
             }
             else {
-                this.node.classList.add("hide");
+                modelDatas = [];
             }
+            this.modelDatas = modelDatas;
+            this.refreshDisplay();
             iEvents.trigger(window, "resize");
         }
+        refreshDisplay() {
+            if (this.options?.accessoryVisible && this.modelDatas.length > 0 && this.options.multiple) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        }
+        show() {
+            this.node.classList.remove("hide");
+        }
+        hide() {
+            this.node.classList.add("hide");
+        }
     }
 
     class SearchController {
@@ -3036,11 +3082,11 @@
          * @param {SelectBox} selectBox - SelectBox handle.
          */
         constructor(selectElement, modelManager, selectBox) {
-            this._ajaxConfig = null;
-            this._abortController = null;
-            this._popup = null;
-            this._selectBox = null;
-            this._paginationState = {
+            this.ajaxConfig = null;
+            this.abortController = null;
+            this.popup = null;
+            this.selectBox = null;
+            this.paginationState = {
                 currentPage: 0,
                 totalPages: 1,
                 hasMore: false,
@@ -3048,9 +3094,9 @@
                 currentKeyword: "",
                 isPaginationEnabled: false,
             };
-            this._select = selectElement;
-            this._modelManager = modelManager;
-            this._selectBox = selectBox;
+            this.select = selectElement;
+            this.modelManager = modelManager;
+            this.selectBox = selectBox;
         }
         /**
          * Indicates whether AJAX-based search is configured.
@@ -3058,7 +3104,7 @@
          * @returns {boolean} - True if AJAX config is present; false otherwise.
          */
         isAjax() {
-            return !!this._ajaxConfig;
+            return !!this.ajaxConfig;
         }
         /**
          * Load specific options by their values from server
@@ -3066,14 +3112,14 @@
          * @returns {Promise<{success: boolean, items: Array, message?: string}>}
          */
         async loadByValues(values) {
-            if (!this._ajaxConfig) {
+            if (!this.ajaxConfig) {
                 return { success: false, items: [], message: "Ajax not configured" };
             }
             const valuesArray = Array.isArray(values) ? values : [values];
             if (valuesArray.length === 0)
                 return { success: true, items: [] };
             try {
-                const cfg = this._ajaxConfig;
+                const cfg = this.ajaxConfig;
                 let payload;
                 if (typeof cfg.dataByValues === "function") {
                     payload = cfg.dataByValues(valuesArray);
@@ -3082,7 +3128,7 @@
                     payload = {
                         values: valuesArray.join(","),
                         load_by_values: "1",
-                        ...(typeof cfg.data === "function" ? cfg.data.bind(this._selectBox.Selective.find(this._selectBox.container.targetElement))("", 0) : cfg.data ?? {}),
+                        ...(typeof cfg.data === "function" ? cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))("", 0) : cfg.data ?? {}),
                     };
                 }
                 let response;
@@ -3102,7 +3148,7 @@
                 if (!response.ok)
                     throw new Error(`HTTP error! status: ${response.status}`);
                 const data = await response.json();
-                const result = this._parseResponse(data);
+                const result = this.parseResponse(data);
                 return { success: true, items: result.items };
             }
             catch (error) {
@@ -3116,7 +3162,7 @@
          * @returns {{existing: string[], missing: string[]}}
          */
         checkMissingValues(values) {
-            const allOptions = Array.from(this._select.options);
+            const allOptions = Array.from(this.select.options);
             const existingValues = allOptions.map((opt) => opt.value);
             const existing = values.filter((v) => existingValues.includes(v));
             const missing = values.filter((v) => !existingValues.includes(v));
@@ -3128,7 +3174,7 @@
          * @param {object} config - AJAX configuration object (e.g., endpoint, headers, query params).
          */
         setAjax(config) {
-            this._ajaxConfig = config;
+            this.ajaxConfig = config;
         }
         /**
          * Attaches a Popup instance to allow UI updates during search (e.g., loading, resize).
@@ -3136,34 +3182,34 @@
          * @param {Popup} popupInstance - The popup used to display search results and loading state.
          */
         setPopup(popupInstance) {
-            this._popup = popupInstance;
+            this.popup = popupInstance;
         }
         /**
          * Returns a shallow copy of the current pagination state used for search/infinite scroll.
          */
         getPaginationState() {
-            return { ...this._paginationState };
+            return { ...this.paginationState };
         }
         /**
          * Resets pagination counters while preserving whether pagination is enabled.
          * Clears page, totals, loading flags, and current keyword.
          */
         resetPagination() {
-            this._paginationState = {
+            this.paginationState = {
                 currentPage: 0,
                 totalPages: 1,
                 hasMore: false,
                 isLoading: false,
                 currentKeyword: "",
-                isPaginationEnabled: this._paginationState.isPaginationEnabled,
+                isPaginationEnabled: this.paginationState.isPaginationEnabled,
             };
         }
         /**
          * Clears the current keyword and makes all options visible (local reset).
          */
         clear() {
-            this._paginationState.currentKeyword = "";
-            const { modelList } = this._modelManager.getResources();
+            this.paginationState.currentKeyword = "";
+            const { modelList } = this.modelManager.getResources();
             const flatOptions = [];
             for (const m of modelList) {
                 if (m instanceof OptionModel)
@@ -3179,7 +3225,7 @@
          * Performs a search with either AJAX or local filtering depending on configuration.
          */
         async search(keyword, append = false) {
-            if (this._ajaxConfig)
+            if (this.ajaxConfig)
                 return this._ajaxSearch(keyword, append);
             return this._localSearch(keyword);
         }
@@ -3187,16 +3233,16 @@
          * Loads the next page for AJAX pagination if enabled and not already loading.
          */
         async loadMore() {
-            if (!this._ajaxConfig)
+            if (!this.ajaxConfig)
                 return { success: false, message: "Ajax not enabled" };
-            if (this._paginationState.isLoading)
+            if (this.paginationState.isLoading)
                 return { success: false, message: "Already loading" };
-            if (!this._paginationState.isPaginationEnabled)
+            if (!this.paginationState.isPaginationEnabled)
                 return { success: false, message: "Pagination not enabled" };
-            if (!this._paginationState.hasMore)
+            if (!this.paginationState.hasMore)
                 return { success: false, message: "No more data" };
-            this._paginationState.currentPage++;
-            return this._ajaxSearch(this._paginationState.currentKeyword, true);
+            this.paginationState.currentPage++;
+            return this._ajaxSearch(this.paginationState.currentKeyword, true);
         }
         /**
          * Executes a local (in-memory) search by normalizing the keyword (lowercase, non-accent)
@@ -3204,10 +3250,10 @@
          */
         async _localSearch(keyword) {
             if (this.compareSearchTrigger(keyword))
-                this._paginationState.currentKeyword = keyword;
+                this.paginationState.currentKeyword = keyword;
             const lower = String(keyword ?? "").toLowerCase();
             const lowerNA = Libs.string2normalize(lower);
-            const { modelList } = this._modelManager.getResources();
+            const { modelList } = this.modelManager.getResources();
             const flatOptions = [];
             for (const m of modelList) {
                 if (m instanceof OptionModel)
@@ -3233,29 +3279,29 @@
          * to determine if a new search should be triggered.
          */
         compareSearchTrigger(keyword) {
-            return keyword !== this._paginationState.currentKeyword;
+            return keyword !== this.paginationState.currentKeyword;
         }
         /**
          * Executes an AJAX-based search with optional appending.
          */
         async _ajaxSearch(keyword, append = false) {
-            const cfg = this._ajaxConfig;
+            const cfg = this.ajaxConfig;
             if (this.compareSearchTrigger(keyword)) {
                 this.resetPagination();
-                this._paginationState.currentKeyword = keyword;
+                this.paginationState.currentKeyword = keyword;
                 append = false;
             }
-            this._paginationState.isLoading = true;
-            this._popup?.showLoading();
-            this._abortController?.abort();
-            this._abortController = new AbortController();
-            const page = this._paginationState.currentPage;
-            const selectedValues = Array.from(this._select.selectedOptions)
+            this.paginationState.isLoading = true;
+            this.popup?.showLoading();
+            this.abortController?.abort();
+            this.abortController = new AbortController();
+            const page = this.paginationState.currentPage;
+            const selectedValues = Array.from(this.select.selectedOptions)
                 .map((opt) => opt.value)
                 .join(",");
             let payload;
             if (typeof cfg.data === "function") {
-                payload = cfg.data.bind(this._selectBox.Selective.find(this._selectBox.container.targetElement))(keyword, page);
+                payload = cfg.data.bind(this.selectBox.Selective.find(this.selectBox.container.targetElement))(keyword, page);
                 if (payload && typeof payload.selectedValue === "undefined")
                     payload.selectedValue = selectedValues;
             }
@@ -3271,27 +3317,27 @@
                         method: "POST",
                         body: formData,
                         headers: { "Content-Type": "application/x-www-form-urlencoded" },
-                        signal: this._abortController.signal,
+                        signal: this.abortController.signal,
                     });
                 }
                 else {
                     const params = new URLSearchParams(payload).toString();
-                    response = await fetch(`${cfg.url}?${params}`, { signal: this._abortController.signal });
+                    response = await fetch(`${cfg.url}?${params}`, { signal: this.abortController.signal });
                 }
                 const data = await response.json();
-                const result = this._parseResponse(data);
+                const result = this.parseResponse(data);
                 if (result.hasPagination) {
-                    this._paginationState.isPaginationEnabled = true;
-                    this._paginationState.currentPage = result.page;
-                    this._paginationState.totalPages = result.totalPages;
-                    this._paginationState.hasMore = result.hasMore;
+                    this.paginationState.isPaginationEnabled = true;
+                    this.paginationState.currentPage = result.page;
+                    this.paginationState.totalPages = result.totalPages;
+                    this.paginationState.hasMore = result.hasMore;
                 }
                 else {
-                    this._paginationState.isPaginationEnabled = false;
+                    this.paginationState.isPaginationEnabled = false;
                 }
                 this.applyAjaxResult(result.items, !!cfg.keepSelected, append);
-                this._paginationState.isLoading = false;
-                this._popup?.hideLoading();
+                this.paginationState.isLoading = false;
+                this.popup?.hideLoading();
                 return {
                     success: true,
                     hasResults: result.items.length > 0,
@@ -3303,8 +3349,8 @@
                 };
             }
             catch (error) {
-                this._paginationState.isLoading = false;
-                this._popup?.hideLoading();
+                this.paginationState.isLoading = false;
+                this.popup?.hideLoading();
                 if (error?.name === "AbortError")
                     return { success: false, message: "Request aborted" };
                 console.error("Ajax search error:", error);
@@ -3314,7 +3360,7 @@
         /**
          * Parses various server response shapes into a normalized structure for options and groups.
          */
-        _parseResponse(data) {
+        parseResponse(data) {
             let items = [];
             let hasPagination = false;
             let page = 0;
@@ -3381,7 +3427,7 @@
          * Applies normalized AJAX results to the underlying <select> element.
          */
         applyAjaxResult(items, keepSelected, append = false) {
-            const select = this._select;
+            const select = this.select;
             let oldSelected = [];
             if (keepSelected)
                 oldSelected = Array.from(select.selectedOptions).map((o) => o.value);
@@ -3436,7 +3482,6 @@
                     select.appendChild(option);
                 }
             });
-            select.dispatchEvent(new CustomEvent("options:changed"));
         }
     }
 
@@ -3446,29 +3491,22 @@
     class SelectObserver {
         /**
          * Initializes the SelectObserver for a given <select> element.
-         * Captures the initial snapshot, sets up a MutationObserver, and listens for custom "options:changed" events.
+         * Captures the initial snapshot, sets up a MutationObserver.
          * Changes are debounced to prevent excessive calls.
          *
          * @param {HTMLSelectElement} select - The <select> element to observe.
          */
         constructor(select) {
-            this._debounceTimer = null;
-            this._lastSnapshot = null;
+            this.debounceTimer = null;
+            this.lastSnapshot = null;
             this._DEBOUNCE_DELAY = 50;
-            this._select = select;
-            this._lastSnapshot = this._createSnapshot();
-            this._observer = new MutationObserver(() => {
-                if (this._debounceTimer)
-                    clearTimeout(this._debounceTimer);
-                this._debounceTimer = setTimeout(() => {
-                    this._handleChange();
-                }, this._DEBOUNCE_DELAY);
-            });
-            select.addEventListener("options:changed", () => {
-                if (this._debounceTimer)
-                    clearTimeout(this._debounceTimer);
-                this._debounceTimer = setTimeout(() => {
-                    this._handleChange();
+            this.select = select;
+            this.lastSnapshot = this.createSnapshot();
+            this.observer = new MutationObserver(() => {
+                if (this.debounceTimer)
+                    clearTimeout(this.debounceTimer);
+                this.debounceTimer = setTimeout(() => {
+                    this.handleChange();
                 }, this._DEBOUNCE_DELAY);
             });
         }
@@ -3478,8 +3516,8 @@
          *
          * @returns {SelectSnapshot} A snapshot of the options state.
          */
-        _createSnapshot() {
-            const options = Array.from(this._select.options);
+        createSnapshot() {
+            const options = Array.from(this.select.options);
             return {
                 length: options.length,
                 values: options.map((opt) => opt.value).join(","),
@@ -3493,28 +3531,28 @@
          *
          * @returns {boolean} True if a real change occurred, otherwise false.
          */
-        _hasRealChange() {
-            const newSnapshot = this._createSnapshot();
-            const changed = JSON.stringify(newSnapshot) !== JSON.stringify(this._lastSnapshot);
+        hasRealChange() {
+            const newSnapshot = this.createSnapshot();
+            const changed = JSON.stringify(newSnapshot) !== JSON.stringify(this.lastSnapshot);
             if (changed)
-                this._lastSnapshot = newSnapshot;
+                this.lastSnapshot = newSnapshot;
             return changed;
         }
         /**
          * Handles detected changes after debouncing.
          * If a real change is found, invokes the onChanged() hook with the current <select> element.
          */
-        _handleChange() {
-            if (!this._hasRealChange())
+        handleChange() {
+            if (!this.hasRealChange())
                 return;
-            this.onChanged(this._select);
+            this.onChanged(this.select);
         }
         /**
          * Starts observing the <select> element for child list mutations and attribute changes.
          * Uses MutationObserver with a debounce mechanism to batch rapid updates.
          */
         connect() {
-            this._observer.observe(this._select, {
+            this.observer.observe(this.select, {
                 childList: true,
                 subtree: false,
                 attributes: true,
@@ -3536,10 +3574,10 @@
          * Ensures no further change handling occurs after disconnecting.
          */
         disconnect() {
-            if (this._debounceTimer)
-                clearTimeout(this._debounceTimer);
-            this._debounceTimer = null;
-            this._observer.disconnect();
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+            this.observer.disconnect();
         }
     }
 
@@ -3554,9 +3592,9 @@
          * @param {HTMLElement} element - The element whose dataset (data-* attributes) will be observed.
          */
         constructor(element) {
-            this._debounceTimer = null;
-            this._element = element;
-            this._observer = new MutationObserver((mutations) => {
+            this.debounceTimer = null;
+            this.element = element;
+            this.observer = new MutationObserver((mutations) => {
                 let datasetChanged = false;
                 for (const mutation of mutations) {
                     if (mutation.type === "attributes" && mutation.attributeName?.startsWith("data-")) {
@@ -3566,14 +3604,14 @@
                 }
                 if (!datasetChanged)
                     return;
-                if (this._debounceTimer)
-                    clearTimeout(this._debounceTimer);
-                this._debounceTimer = setTimeout(() => {
-                    this.onChanged({ ...this._element.dataset });
+                if (this.debounceTimer)
+                    clearTimeout(this.debounceTimer);
+                this.debounceTimer = setTimeout(() => {
+                    this.onChanged({ ...this.element.dataset });
                 }, 50);
             });
             element.addEventListener("dataset:changed", () => {
-                this.onChanged({ ...this._element.dataset });
+                this.onChanged({ ...this.element.dataset });
             });
         }
         /**
@@ -3581,7 +3619,7 @@
          * Uses MutationObserver to track updates to data-* attributes.
          */
         connect() {
-            this._observer.observe(this._element, {
+            this.observer.observe(this.element, {
                 attributes: true,
                 attributeOldValue: true,
             });
@@ -3600,10 +3638,10 @@
          * Stops observing the element and clears any pending debounce timers.
          */
         disconnect() {
-            if (this._debounceTimer)
-                clearTimeout(this._debounceTimer);
-            this._debounceTimer = null;
-            this._observer.disconnect();
+            if (this.debounceTimer)
+                clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+            this.observer.disconnect();
         }
     }
 
@@ -3656,7 +3694,7 @@
          * @param {Function} callback - Function to execute before the property changes.
          */
         onPropChanging(propName, callback) {
-            Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 1 });
+            Libs.callbackScheduler.on(`${propName}ing_${this.adapterKey}`, callback, { debounce: 0 });
         }
         /**
          * Registers a post-change callback for a property change pipeline.
@@ -3666,7 +3704,7 @@
          * @param {Function} callback - Function to execute after the property changes.
          */
         onPropChanged(propName, callback) {
-            Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback);
+            Libs.callbackScheduler.on(`${propName}_${this.adapterKey}`, callback, { debounce: 0 });
         }
         /**
          * Triggers the post-change pipeline for a given property, passing optional parameters
@@ -3676,7 +3714,7 @@
          * @param {...any} params - Parameters forwarded to the callbacks.
          */
         changeProp(propName, ...params) {
-            Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
+            return Libs.callbackScheduler.run(`${propName}_${this.adapterKey}`, ...params);
         }
         /**
          * Triggers the pre-change pipeline for a given property, passing optional parameters
@@ -3686,7 +3724,7 @@
          * @param {...any} params - Parameters forwarded to the callbacks.
          */
         changingProp(propName, ...params) {
-            Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
+            return Libs.callbackScheduler.run(`${propName}ing_${this.adapterKey}`, ...params);
         }
         /**
          * Creates and returns a viewer instance for the given item within the specified parent container.
@@ -3713,10 +3751,10 @@
          *
          * @param {TItem[]} items - The new list of items to set.
          */
-        setItems(items) {
-            this.changingProp("items", items);
+        async setItems(items) {
+            await this.changingProp("items", items);
             this.items = items;
-            this.changeProp("items", items);
+            await this.changeProp("items", items);
         }
         /**
          * Synchronizes adapter items from an external source by delegating to setItems().
@@ -3724,8 +3762,8 @@
          *
          * @param {TItem[]} items - The source list of items to synchronize.
          */
-        syncFromSource(items) {
-            this.setItems(items);
+        async syncFromSource(items) {
+            await this.setItems(items);
         }
         /**
          * Iterates through all items and ensures each has a viewer. For new items, calls viewHolder()
@@ -3903,10 +3941,10 @@
         constructor(parent) {
             super(parent);
             this.view = null;
-            this._config = null;
-            this._configProxy = null;
-            this._isRendered = false;
-            this._setupConfigProxy();
+            this.config = null;
+            this.configProxy = null;
+            this.isRendered = false;
+            this.setupConfigProxy();
         }
         /**
          * Creates the internal configuration object and wraps it with a Proxy.
@@ -3914,9 +3952,9 @@
          * applies only the necessary DOM changes for the updated property.
          * No DOM mutations occur before the first render.
          */
-        _setupConfigProxy() {
+        setupConfigProxy() {
             const self = this;
-            this._config = {
+            this.config = {
                 isMultiple: false,
                 hasImage: false,
                 imagePosition: "right",
@@ -3926,7 +3964,7 @@
                 labelValign: "center",
                 labelHalign: "left",
             };
-            this._configProxy = new Proxy(this._config, {
+            this.configProxy = new Proxy(this.config, {
                 set(target, prop, value) {
                     if (typeof prop !== "string")
                         return true;
@@ -3934,8 +3972,8 @@
                     const oldValue = target[key];
                     if (oldValue !== value) {
                         target[key] = value;
-                        if (self._isRendered) {
-                            self._applyPartialChange(key, value, oldValue);
+                        if (self.isRendered) {
+                            self.applyPartialChange(key, value, oldValue);
                         }
                     }
                     return true;
@@ -3948,7 +3986,7 @@
          * @returns {boolean} True if multiple selection is enabled; otherwise false.
          */
         get isMultiple() {
-            return this._config.isMultiple;
+            return this.config.isMultiple;
         }
         /**
          * Enables or disables multiple selection mode.
@@ -3957,7 +3995,7 @@
          * @param {boolean} value - True to enable multiple selection; false for single selection.
          */
         set isMultiple(value) {
-            this._configProxy.isMultiple = !!value;
+            this.configProxy.isMultiple = !!value;
         }
         /**
          * Indicates whether the option includes an image block alongside the label.
@@ -3965,7 +4003,7 @@
          * @returns {boolean} True if an image is displayed; otherwise false.
          */
         get hasImage() {
-            return this._config.hasImage;
+            return this.config.hasImage;
         }
         /**
          * Shows or hides the image block for the option.
@@ -3974,7 +4012,7 @@
          * @param {boolean} value - True to show the image; false to hide it.
          */
         set hasImage(value) {
-            this._configProxy.hasImage = !!value;
+            this.configProxy.hasImage = !!value;
         }
         /**
          * Provides reactive access to the entire option configuration via a Proxy.
@@ -3983,7 +4021,7 @@
          * @returns {object} The proxied configuration object.
          */
         get optionConfig() {
-            return this._configProxy;
+            return this.configProxy;
         }
         /**
          * Applies a set of configuration changes in batch.
@@ -3991,23 +4029,23 @@
          * When rendered, each changed property triggers a targeted DOM update via the proxy.
          */
         set optionConfig(config) {
-            if (!config || !this._configProxy || !this._config)
+            if (!config || !this.configProxy || !this.config)
                 return;
             const changes = {};
-            if (config.imageWidth !== undefined && config.imageWidth !== this._config.imageWidth)
+            if (config.imageWidth !== undefined && config.imageWidth !== this.config.imageWidth)
                 changes.imageWidth = config.imageWidth;
-            if (config.imageHeight !== undefined && config.imageHeight !== this._config.imageHeight)
+            if (config.imageHeight !== undefined && config.imageHeight !== this.config.imageHeight)
                 changes.imageHeight = config.imageHeight;
-            if (config.imageBorderRadius !== undefined && config.imageBorderRadius !== this._config.imageBorderRadius)
+            if (config.imageBorderRadius !== undefined && config.imageBorderRadius !== this.config.imageBorderRadius)
                 changes.imageBorderRadius = config.imageBorderRadius;
-            if (config.imagePosition !== undefined && config.imagePosition !== this._config.imagePosition)
+            if (config.imagePosition !== undefined && config.imagePosition !== this.config.imagePosition)
                 changes.imagePosition = config.imagePosition;
-            if (config.labelValign !== undefined && config.labelValign !== this._config.labelValign)
+            if (config.labelValign !== undefined && config.labelValign !== this.config.labelValign)
                 changes.labelValign = config.labelValign;
-            if (config.labelHalign !== undefined && config.labelHalign !== this._config.labelHalign)
+            if (config.labelHalign !== undefined && config.labelHalign !== this.config.labelHalign)
                 changes.labelHalign = config.labelHalign;
             if (Object.keys(changes).length > 0)
-                Object.assign(this._configProxy, changes);
+                Object.assign(this.configProxy, changes);
         }
         /**
          * Renders the option view into the parent element.
@@ -4019,30 +4057,30 @@
             const viewClass = ["selective-ui-option-view"];
             const opt_id = Libs.randomString(7);
             const inputID = `option_${opt_id}`;
-            if (this._config.isMultiple)
+            if (this.config.isMultiple)
                 viewClass.push("multiple");
-            if (this._config.hasImage) {
+            if (this.config.hasImage) {
                 viewClass.push("has-image");
-                viewClass.push(`image-${this._config.imagePosition}`);
+                viewClass.push(`image-${this.config.imagePosition}`);
             }
             const childStructure = {
                 OptionInput: {
                     tag: {
                         node: "input",
-                        type: this._config.isMultiple ? "checkbox" : "radio",
+                        type: this.config.isMultiple ? "checkbox" : "radio",
                         classList: "allow-choice",
                         id: inputID,
                     },
                 },
-                ...(this._config.hasImage && {
+                ...(this.config.hasImage && {
                     OptionImage: {
                         tag: {
                             node: "img",
                             classList: "option-image",
                             style: {
-                                width: this._config.imageWidth,
-                                height: this._config.imageHeight,
-                                borderRadius: this._config.imageBorderRadius,
+                                width: this.config.imageWidth,
+                                height: this.config.imageHeight,
+                                borderRadius: this.config.imageBorderRadius,
                             },
                         },
                     },
@@ -4052,8 +4090,8 @@
                         node: "label",
                         htmlFor: inputID,
                         classList: [
-                            `align-vertical-${this._config.labelValign}`,
-                            `align-horizontal-${this._config.labelHalign}`,
+                            `align-vertical-${this.config.labelValign}`,
+                            `align-horizontal-${this.config.labelHalign}`,
                         ],
                     },
                     child: {
@@ -4075,13 +4113,13 @@
                 },
             });
             this.parent.appendChild(this.view.view);
-            this._isRendered = true;
+            this.isRendered = true;
         }
         /**
          * Applies a targeted DOM update for a single configuration property change.
          * Safely updates classes, attributes, styles, and child elements without re-rendering the whole view.
          */
-        _applyPartialChange(prop, newValue, oldValue) {
+        applyPartialChange(prop, newValue, oldValue) {
             const v = this.view;
             if (!v || !v.view)
                 return;
@@ -4101,8 +4139,8 @@
                     const val = !!newValue;
                     root.classList.toggle("has-image", val);
                     if (val) {
-                        root.classList.add(`image-${this._config.imagePosition}`);
-                        this._createImage();
+                        root.classList.add(`image-${this.config.imagePosition}`);
+                        this.createImage();
                     }
                     else {
                         root.className = root.className.replace(/image-(top|right|bottom|left)/g, "").trim();
@@ -4115,7 +4153,7 @@
                     break;
                 }
                 case "imagePosition": {
-                    if (this._config.hasImage) {
+                    if (this.config.hasImage) {
                         root.className = root.className.replace(/image-(top|right|bottom|left)/g, "").trim();
                         root.classList.add(`image-${String(newValue)}`);
                     }
@@ -4138,7 +4176,7 @@
                 case "labelValign":
                 case "labelHalign": {
                     if (label) {
-                        const newClass = `align-vertical-${this._config.labelValign} align-horizontal-${this._config.labelHalign}`;
+                        const newClass = `align-vertical-${this.config.labelValign} align-horizontal-${this.config.labelHalign}`;
                         if (label.className !== newClass)
                             label.className = newClass;
                     }
@@ -4152,7 +4190,7 @@
          * The image receives configured styles (width, height, borderRadius) and is placed
          * before the label if present; otherwise appended to the root. Updates `v.tags.OptionImage`.
          */
-        _createImage() {
+        createImage() {
             const v = this.view;
             if (!v || !v.view)
                 return;
@@ -4163,9 +4201,9 @@
             const label = v.tags?.OptionLabel;
             const image = document.createElement("img");
             image.className = "option-image";
-            image.style.width = this._config.imageWidth;
-            image.style.height = this._config.imageHeight;
-            image.style.borderRadius = this._config.imageBorderRadius;
+            image.style.width = this.config.imageWidth;
+            image.style.height = this.config.imageHeight;
+            image.style.borderRadius = this.config.imageBorderRadius;
             if (label && label.parentElement)
                 root.insertBefore(image, label);
             else
@@ -4181,16 +4219,16 @@
         constructor(items = []) {
             super(items);
             this.isMultiple = false;
-            this._visibilityChangedCallbacks = [];
-            this._currentHighlightIndex = -1;
-            this._selectedItemSingle = null;
+            this.visibilityChangedCallbacks = [];
+            this.currentHighlightIndex = -1;
+            this.selectedItemSingle = null;
             this.groups = [];
             this.flatOptions = [];
-            this._buildFlatStructure();
+            this.buildFlatStructure();
             Libs.callbackScheduler.on(`sche_vis_${this.adapterKey}`, () => {
                 const visibleCount = this.flatOptions.filter((item) => item.visible).length;
                 const totalCount = this.flatOptions.length;
-                this._visibilityChangedCallbacks.forEach((callback) => {
+                this.visibilityChangedCallbacks.forEach((callback) => {
                     callback({
                         visibleCount,
                         totalCount,
@@ -4204,7 +4242,7 @@
         /**
          * Build flat list of all options for navigation
          */
-        _buildFlatStructure() {
+        buildFlatStructure() {
             this.flatOptions = [];
             this.groups = [];
             this.items.forEach((item) => {
@@ -4240,10 +4278,10 @@
         onViewHolder(item, viewer, position) {
             item.position = position;
             if (item instanceof GroupModel) {
-                this._handleGroupView(item, viewer, position);
+                this.handleGroupView(item, viewer, position);
             }
             else if (item instanceof OptionModel) {
-                this._handleOptionView(item, viewer, position);
+                this.handleOptionView(item, viewer, position);
             }
             item.isInit = true;
         }
@@ -4255,7 +4293,7 @@
          * @param {GroupView} groupView - The view instance that renders the group in the UI.
          * @param {number} position - The position (index) of the group within a list.
          */
-        _handleGroupView(groupModel, groupView, position) {
+        handleGroupView(groupModel, groupView, position) {
             super.onViewHolder(groupModel, groupView, position);
             groupModel.view = groupView;
             const header = groupView.view.tags.GroupHeader;
@@ -4280,7 +4318,7 @@
                 if (!optionModel.isInit || !optionViewer) {
                     optionViewer = new OptionView(itemsContainer);
                 }
-                this._handleOptionView(optionModel, optionViewer, idx);
+                this.handleOptionView(optionModel, optionViewer, idx);
                 optionModel.isInit = true;
             });
             groupView.setCollapsed(groupModel.collapsed);
@@ -4294,7 +4332,7 @@
          * @param {OptionView} optionViewer - The view instance that renders the option in the UI.
          * @param {number} position - The index of this option within its group's item list.
          */
-        _handleOptionView(optionModel, optionViewer, position) {
+        handleOptionView(optionModel, optionViewer, position) {
             optionViewer.isMultiple = this.isMultiple;
             optionViewer.hasImage = optionModel.hasImage;
             optionViewer.optionConfig = {
@@ -4320,24 +4358,20 @@
             }
             optionViewer.view.tags.LabelContent.innerHTML = optionModel.text;
             if (!optionModel.isInit) {
-                optionViewer.view.tags.OptionView.addEventListener("click", (ev) => {
+                optionViewer.view.tags.OptionView.addEventListener("click", async (ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     if (this.isSkipEvent)
                         return;
                     if (this.isMultiple) {
-                        this.changingProp("select");
-                        setTimeout(() => {
-                            optionModel.selected = !optionModel.selected;
-                        }, 5);
+                        await this.changingProp("select");
+                        optionModel.selected = !optionModel.selected;
                     }
                     else if (optionModel.selected !== true) {
-                        this.changingProp("select");
-                        setTimeout(() => {
-                            if (this._selectedItemSingle)
-                                this._selectedItemSingle.selected = false;
-                            optionModel.selected = true;
-                        }, 5);
+                        await this.changingProp("select");
+                        if (this.selectedItemSingle)
+                            this.selectedItemSingle.selected = false;
+                        optionModel.selected = true;
                     }
                 });
                 optionViewer.view.tags.OptionView.title = optionModel.textContent;
@@ -4351,16 +4385,16 @@
                 });
                 optionModel.onInternalSelected((_evtToken, _el, selected) => {
                     if (selected)
-                        this._selectedItemSingle = optionModel;
+                        this.selectedItemSingle = optionModel;
                     this.changeProp("selected_internal");
                 });
                 optionModel.onVisibilityChanged((_evtToken, model, _visible) => {
                     model.group?.updateVisibility();
-                    this._notifyVisibilityChanged();
+                    this.notifyVisibilityChanged();
                 });
             }
             if (optionModel.selected) {
-                this._selectedItemSingle = optionModel;
+                this.selectedItemSingle = optionModel;
                 optionModel.selectedNonTrigger = true;
             }
         }
@@ -4369,19 +4403,19 @@
          *
          * @param {Array<GroupModel|OptionModel>} items - The new collection of items to be displayed.
          */
-        setItems(items) {
-            this.changingProp("items", items);
+        async setItems(items) {
+            await this.changingProp("items", items);
             this.items = items;
-            this._buildFlatStructure();
-            this.changeProp("items", items);
+            this.buildFlatStructure();
+            await this.changeProp("items", items);
         }
         /**
          * Synchronizes the component's items from an external source by delegating to setItems().
          *
          * @param {Array<GroupModel|OptionModel>} items - The new collection of items to sync.
          */
-        syncFromSource(items) {
-            this.setItems(items);
+        async syncFromSource(items) {
+            await this.setItems(items);
         }
         /**
          * Updates the component's data items and rebuilds the internal flat structure
@@ -4391,7 +4425,7 @@
          */
         updateData(items) {
             this.items = items;
-            this._buildFlatStructure();
+            this.buildFlatStructure();
         }
         /**
          * Returns all option items that are currently selected.
@@ -4428,13 +4462,13 @@
          * - Function to invoke when visibility stats change.
          */
         onVisibilityChanged(callback) {
-            this._visibilityChangedCallbacks.push(callback);
+            this.visibilityChangedCallbacks.push(callback);
         }
         /**
          * Notifies all registered visibility-change callbacks with up-to-date statistics.
          * Computes visible and total counts, then emits aggregated state.
          */
-        _notifyVisibilityChanged() {
+        notifyVisibilityChanged() {
             Libs.callbackScheduler.run(`sche_vis_${this.adapterKey}`);
         }
         /**
@@ -4466,7 +4500,7 @@
             const visibleOptions = this.flatOptions.filter((opt) => opt.visible);
             if (visibleOptions.length === 0)
                 return;
-            let currentVisibleIndex = visibleOptions.findIndex((opt) => opt === this.flatOptions[this._currentHighlightIndex]);
+            let currentVisibleIndex = visibleOptions.findIndex((opt) => opt === this.flatOptions[this.currentHighlightIndex]);
             if (currentVisibleIndex === -1)
                 currentVisibleIndex = -1;
             let nextVisibleIndex = currentVisibleIndex + direction;
@@ -4483,8 +4517,8 @@
          * No-op if nothing is highlighted or the highlighted item is not visible.
          */
         selectHighlighted() {
-            if (this._currentHighlightIndex > -1 && this.flatOptions[this._currentHighlightIndex]) {
-                const item = this.flatOptions[this._currentHighlightIndex];
+            if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+                const item = this.flatOptions[this.currentHighlightIndex];
                 if (item.visible) {
                     const viewEl = item.view?.getView?.();
                     if (viewEl)
@@ -4511,15 +4545,15 @@
             else {
                 index = 0;
             }
-            if (this._currentHighlightIndex > -1 && this.flatOptions[this._currentHighlightIndex]) {
-                this.flatOptions[this._currentHighlightIndex].highlighted = false;
+            if (this.currentHighlightIndex > -1 && this.flatOptions[this.currentHighlightIndex]) {
+                this.flatOptions[this.currentHighlightIndex].highlighted = false;
             }
             for (let i = index; i < this.flatOptions.length; i++) {
                 const item = this.flatOptions[i];
                 if (!item?.visible)
                     continue;
                 item.highlighted = true;
-                this._currentHighlightIndex = i;
+                this.currentHighlightIndex = i;
                 if (isScrollToView) {
                     const el = item.view?.getView?.();
                     if (el) {
@@ -4628,15 +4662,15 @@
             this.firstMeasured = false;
             this.start = 0;
             this.end = -1;
-            this._rafId = null;
-            this._measureRaf = null;
-            this._updating = false;
-            this._suppressResize = false;
-            this._lastRenderCount = 0;
-            this._suspended = false;
-            this._resumeResizeAfter = false;
-            this._stickyCacheTick = 0;
-            this._stickyCacheVal = 0;
+            this.rafId = null;
+            this.measureRaf = null;
+            this.updating = false;
+            this.suppressResize = false;
+            this.lastRenderCount = 0;
+            this.suspended = false;
+            this.resumeResizeAfter = false;
+            this.stickyCacheTick = 0;
+            this.stickyCacheVal = 0;
             this.measuredSum = 0;
             this.measuredCount = 0;
         }
@@ -4669,8 +4703,8 @@
                 ?? this.viewElement.parentElement;
             if (!this.scrollEl)
                 throw new Error("VirtualRecyclerView: scrollEl not found");
-            this._boundOnScroll = this.onScroll.bind(this);
-            this.scrollEl.addEventListener("scroll", this._boundOnScroll, { passive: true });
+            this.boundOnScroll = this.onScroll.bind(this);
+            this.scrollEl.addEventListener("scroll", this.boundOnScroll, { passive: true });
             this.refresh(false);
             this.attachResizeObserverOnce();
             adapter?.onVisibilityChanged?.(() => this.refreshItem());
@@ -4680,14 +4714,14 @@
          * Cancels pending frames and disconnects observers.
          */
         suspend() {
-            this._suspended = true;
+            this.suspended = true;
             this.cancelFrames();
-            if (this.scrollEl && this._boundOnScroll) {
-                this.scrollEl.removeEventListener("scroll", this._boundOnScroll);
+            if (this.scrollEl && this.boundOnScroll) {
+                this.scrollEl.removeEventListener("scroll", this.boundOnScroll);
             }
             if (this.resizeObs) {
                 this.resizeObs.disconnect();
-                this._resumeResizeAfter = true;
+                this.resumeResizeAfter = true;
             }
         }
         /**
@@ -4695,13 +4729,13 @@
          * Re-attaches listeners and schedules window update.
          */
         resume() {
-            this._suspended = false;
-            if (this.scrollEl && this._boundOnScroll) {
-                this.scrollEl.addEventListener("scroll", this._boundOnScroll, { passive: true });
+            this.suspended = false;
+            if (this.scrollEl && this.boundOnScroll) {
+                this.scrollEl.addEventListener("scroll", this.boundOnScroll, { passive: true });
             }
-            if (this._resumeResizeAfter) {
+            if (this.resumeResizeAfter) {
                 this.attachResizeObserverOnce();
-                this._resumeResizeAfter = false;
+                this.resumeResizeAfter = false;
             }
             this.scheduleUpdateWindow();
         }
@@ -4717,7 +4751,7 @@
             if (!isUpdate)
                 this.refreshItem();
             const count = this.adapter.itemCount();
-            this._lastRenderCount = count;
+            this.lastRenderCount = count;
             if (count === 0) {
                 this.resetState();
                 return;
@@ -4759,8 +4793,8 @@
          */
         dispose() {
             this.cancelFrames();
-            if (this.scrollEl && this._boundOnScroll) {
-                this.scrollEl.removeEventListener("scroll", this._boundOnScroll);
+            if (this.scrollEl && this.boundOnScroll) {
+                this.scrollEl.removeEventListener("scroll", this.boundOnScroll);
             }
             this.resizeObs?.disconnect();
             this.created.forEach(el => el.remove());
@@ -4788,13 +4822,13 @@
         }
         /** Cancels all pending animation frames. */
         cancelFrames() {
-            if (this._rafId != null) {
-                cancelAnimationFrame(this._rafId);
-                this._rafId = null;
+            if (this.rafId != null) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
             }
-            if (this._measureRaf != null) {
-                cancelAnimationFrame(this._measureRaf);
-                this._measureRaf = null;
+            if (this.measureRaf != null) {
+                cancelAnimationFrame(this.measureRaf);
+                this.measureRaf = null;
             }
         }
         /** Resets all internal state: DOM, caches, measurements. */
@@ -4872,7 +4906,7 @@
         containerTopInScroll() {
             const a = this.viewElement.getBoundingClientRect();
             const b = this.scrollEl.getBoundingClientRect();
-            return a.top - b.top + this.scrollEl.scrollTop;
+            return Math.max(0, a.top - b.top + this.scrollEl.scrollTop);
         }
         /**
          * Returns sticky header height with 16ms cache to avoid DOM thrashing.
@@ -4880,19 +4914,19 @@
          */
         stickyTopHeight() {
             const now = performance.now();
-            if (now - this._stickyCacheTick < 16)
-                return this._stickyCacheVal;
+            if (now - this.stickyCacheTick < 16)
+                return this.stickyCacheVal;
             const sticky = this.scrollEl.querySelector(".selective-ui-option-handle:not(.hide)");
-            this._stickyCacheVal = sticky?.offsetHeight ?? 0;
-            this._stickyCacheTick = now;
-            return this._stickyCacheVal;
+            this.stickyCacheVal = sticky?.offsetHeight ?? 0;
+            this.stickyCacheTick = now;
+            return this.stickyCacheVal;
         }
         /** Schedules window update on next frame if not already scheduled. */
         scheduleUpdateWindow() {
-            if (this._rafId != null || this._suspended)
+            if (this.rafId != null || this.suspended)
                 return;
-            this._rafId = requestAnimationFrame(() => {
-                this._rafId = null;
+            this.rafId = requestAnimationFrame(() => {
+                this.rafId = null;
                 this.updateWindowInternal();
             });
         }
@@ -5014,10 +5048,10 @@
             if (this.resizeObs)
                 return;
             this.resizeObs = new ResizeObserver(() => {
-                if (this._suppressResize || this._suspended || !this.adapter || this._measureRaf != null)
+                if (this.suppressResize || this.suspended || !this.adapter || this.measureRaf != null)
                     return;
-                this._measureRaf = requestAnimationFrame(() => {
-                    this._measureRaf = null;
+                this.measureRaf = requestAnimationFrame(() => {
+                    this.measureRaf = null;
                     this.measureVisibleAndUpdate();
                 });
             });
@@ -5067,17 +5101,17 @@
          * 7. Adjusts scroll position to maintain anchor item position
          */
         updateWindowInternal() {
-            if (this._updating || this._suspended)
+            if (this.updating || this.suspended)
                 return;
-            this._updating = true;
+            this.updating = true;
             try {
                 if (!this.adapter)
                     return;
                 const count = this.adapter.itemCount();
                 if (count <= 0)
                     return;
-                if (this._lastRenderCount !== count) {
-                    this._lastRenderCount = count;
+                if (this.lastRenderCount !== count) {
+                    this.lastRenderCount = count;
                     this.heightCache.length = count;
                     this.rebuildFenwick(count);
                 }
@@ -5101,7 +5135,7 @@
                     return;
                 this.start = startIndex;
                 this.end = endIndex;
-                this._suppressResize = true;
+                this.suppressResize = true;
                 try {
                     this.mountRange(this.start, this.end);
                     this.unmountOutside(this.start, this.end);
@@ -5115,18 +5149,20 @@
                     this.PadBottom.style.height = `${bottomPx}px`;
                 }
                 finally {
-                    this._suppressResize = false;
+                    this.suppressResize = false;
                 }
                 const anchorTopNew = this.offsetTopOf(anchorIndex);
                 const targetScroll = this.containerTopInScroll() + anchorTopNew - anchorDelta;
                 const maxScroll = Math.max(0, this.scrollEl.scrollHeight - this.scrollEl.clientHeight);
                 const clamped = Math.min(Math.max(0, targetScroll), maxScroll);
-                if (Math.abs(this.scrollEl.scrollTop - clamped) > 0.5) {
+                const heightChanged = Math.abs(anchorTopNew - anchorTop) > 1;
+                const scrollDiff = Math.abs(this.scrollEl.scrollTop - clamped);
+                if (heightChanged && scrollDiff > 0.5 && scrollDiff < 100) {
                     this.scrollEl.scrollTop = clamped;
                 }
             }
             finally {
-                this._updating = false;
+                this.updating = false;
             }
         }
         /** Mounts all items in inclusive range [start..end]. */
@@ -5395,12 +5431,6 @@
                     this.isVisible = Libs.string2Boolean(dataset.visible ?? "1");
                 }
             };
-            // Custom event (manual refresh)
-            select.addEventListener("options:changed", () => {
-                optionModelManager.update(Libs.parseSelectToArray(select));
-                this.getAction()?.refreshMask();
-                container.popup?.triggerResize?.();
-            });
             // AJAX setup (if provided)
             if (options.ajax) {
                 searchController.setAjax(options.ajax);
@@ -5418,6 +5448,7 @@
                         .search(keyword)
                         .then((result) => {
                         clearTimeout(hightlightTimer);
+                        Libs.callbackScheduler.clear(`sche_vis_proxy_${optionAdapter.adapterKey}`);
                         Libs.callbackScheduler.on(`sche_vis_proxy_${optionAdapter.adapterKey}`, () => {
                             container.popup?.triggerResize?.();
                             if (result?.hasResults) {
@@ -5875,9 +5906,9 @@
      */
     class ElementAdditionObserver {
         constructor() {
-            this._isActive = false;
-            this._observer = null;
-            this._actions = [];
+            this.isActive = false;
+            this.observer = null;
+            this.actions = [];
         }
         /**
          * Registers a callback to be invoked whenever a matching element is detected being added to the DOM.
@@ -5885,13 +5916,13 @@
          * @param {(el: T) => void} action - Function executed with the newly added element.
          */
         onDetect(action) {
-            this._actions.push(action);
+            this.actions.push(action);
         }
         /**
          * Clears all previously registered detection callbacks.
          */
         clearDetect() {
-            this._actions = [];
+            this.actions = [];
         }
         /**
          * Starts observing the document for additions of elements matching the given tag.
@@ -5900,26 +5931,26 @@
          * @param {string} tag - The tag name to watch for (e.g., "select", "div").
          */
         start(tag) {
-            if (this._isActive)
+            if (this.isActive)
                 return;
-            this._isActive = true;
+            this.isActive = true;
             const upperTag = tag.toUpperCase();
             const lowerTag = tag.toLowerCase();
-            this._observer = new MutationObserver((mutations) => {
+            this.observer = new MutationObserver((mutations) => {
                 for (const mutation of mutations) {
                     mutation.addedNodes.forEach((node) => {
                         if (node.nodeType !== 1)
                             return;
                         const subnode = node;
                         if (subnode.tagName === upperTag) {
-                            this._handle(subnode);
+                            this.handle(subnode);
                         }
                         const matches = subnode.querySelectorAll(lowerTag);
-                        matches.forEach((el) => this._handle(el));
+                        matches.forEach((el) => this.handle(el));
                     });
                 }
             });
-            this._observer.observe(document.body, {
+            this.observer.observe(document.body, {
                 childList: true,
                 subtree: true,
             });
@@ -5929,19 +5960,19 @@
          * No-ops if the observer is not active.
          */
         stop() {
-            if (!this._isActive)
+            if (!this.isActive)
                 return;
-            this._isActive = false;
-            this._observer?.disconnect();
-            this._observer = null;
+            this.isActive = false;
+            this.observer?.disconnect();
+            this.observer = null;
         }
         /**
          * Internal handler that invokes all registered detection callbacks for the provided element.
          *
          * @param {T} element - The element that was detected as added to the DOM.
          */
-        _handle(element) {
-            this._actions.forEach((action) => action(element));
+        handle(element) {
+            this.actions.forEach((action) => action(element));
         }
     }
 
@@ -6256,7 +6287,7 @@
     if (typeof globalThis.GLOBAL_SEUI == "undefined") {
         const SECLASS = new Selective();
         globalThis.GLOBAL_SEUI = {
-            version: "1.2.1",
+            version: "1.2.3",
             name: "SelectiveUI",
             bind: SECLASS.bind.bind(SECLASS),
             find: SECLASS.find.bind(SECLASS),
@@ -6287,7 +6318,7 @@
                 init();
             }
         }
-        console.log(`[${"SelectiveUI"}] v${"1.2.1"} loaded successfully`);
+        console.log(`[${"SelectiveUI"}] v${"1.2.3"} loaded successfully`);
     }
     else {
         console.warn(`[${globalThis.GLOBAL_SEUI.name}] Already loaded (v${globalThis.GLOBAL_SEUI.version}). ` +