@nanahoshi/mona-ui 0.18.1 → 0.18.2

package/fesm2022/nanahoshi-mona-ui-segmented.mjs

@@ -285,7 +285,6 @@ class SegmentedComponent {
         afterNextRender({
             read: () => {
                 this.setupResizeObserver();
-                this.scheduleSettledGeometryUpdate();
             }
         });
         this.#destroyRef.onDestroy(() => {
@@ -328,22 +327,6 @@ class SegmentedComponent {
         }
         this.#observedOptionElements = elements;
     }
-    /**
-     * Guards against a stale indicator snapshot when the control mounts inside a container that is
-     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
-     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
-     */
-    scheduleSettledGeometryUpdate() {
-        const win = this.#hostElementRef.nativeElement.ownerDocument.defaultView;
-        if (!win) {
-            return;
-        }
-        win.requestAnimationFrame(() => {
-            win.requestAnimationFrame(() => {
-                this.updateIndicatorGeometry({ suppressTransition: true });
-            });
-        });
-    }
     setupResizeObserver() {
         if (typeof ResizeObserver === "undefined") {
             return;
@@ -370,14 +353,18 @@ class SegmentedComponent {
             this.indicatorTransitionEnabled.set(false);
             return;
         }
-        const host = this.#hostElementRef.nativeElement;
         const option = selectedElementRef.nativeElement;
-        const hostRect = host.getBoundingClientRect();
-        const optionRect = option.getBoundingClientRect();
-        const x = optionRect.left - hostRect.left - (host.clientLeft || 0);
-        const y = optionRect.top - hostRect.top - (host.clientTop || 0);
-        const width = optionRect.width;
-        const height = optionRect.height;
+        // `offsetLeft`/`offsetTop`/`offsetWidth`/`offsetHeight` are pure layout values, relative to
+        // the nearest positioned ancestor (the host, which is `position: relative` and the option's
+        // direct parent). Unlike `getBoundingClientRect()`, they are unaffected by any CSS transform
+        // an ancestor applies — e.g. the scale animation `mona-popup` plays while opening. Measuring
+        // with `getBoundingClientRect()` there could capture a mid-transition (e.g. 95%-scaled)
+        // snapshot that never gets corrected once the animation settles, undersizing/misplacing the
+        // indicator relative to the option's real, final box.
+        const x = option.offsetLeft;
+        const y = option.offsetTop;
+        const width = option.offsetWidth;
+        const height = option.offsetHeight;
         const shouldAnimate = !options?.suppressTransition &&
             this.animate() &&
             this.indicatorInitialized() &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -149,12 +149,6 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
     private observeOptionElements;
-    /**
-     * Guards against a stale indicator snapshot when the control mounts inside a container that is
-     * still transitioning in (e.g. a popup's enter animation): the host's own box may not change once
-     * that settles, so the ResizeObserver on it alone would never re-fire to correct the geometry.
-     */
-    private scheduleSettledGeometryUpdate;
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;