@nanahoshi/mona-ui 0.18.0 → 0.18.2

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

@@ -132,6 +132,7 @@ class SegmentedComponent {
     #lastAnimatedIndex;
     #lastOptions;
     #lastSize;
+    #observedOptionElements;
     #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -139,6 +140,7 @@ class SegmentedComponent {
         this.#lastAnimatedIndex = null;
         this.#lastOptions = null;
         this.#lastSize = null;
+        this.#observedOptionElements = [];
         this.#resizeObserver = null;
         this.containerClasses = computed(() => {
             const classes = segmentedContainerThemeVariants({ alignment: this.alignment(), rounded: this.rounded() });
@@ -265,7 +267,7 @@ class SegmentedComponent {
         afterRenderEffect({
             read: () => {
                 this.selectedIndex();
-                this.optionElements();
+                const optionElements = this.optionElements();
                 this.alignment();
                 this.rounded();
                 this.animate();
@@ -276,6 +278,7 @@ class SegmentedComponent {
                 const suppressTransition = isSizeChange || isOptionsChange;
                 this.#lastSize = size;
                 this.#lastOptions = options;
+                this.observeOptionElements(optionElements);
                 this.updateIndicatorGeometry({ suppressTransition });
             }
         });
@@ -307,6 +310,23 @@ class SegmentedComponent {
         this.value.set(option.value);
         this.touch.emit();
     }
+    observeOptionElements(optionElements) {
+        if (!this.#resizeObserver) {
+            return;
+        }
+        const elements = optionElements.map(optionElement => optionElement.nativeElement);
+        for (const element of this.#observedOptionElements) {
+            if (!elements.includes(element)) {
+                this.#resizeObserver.unobserve(element);
+            }
+        }
+        for (const element of elements) {
+            if (!this.#observedOptionElements.includes(element)) {
+                this.#resizeObserver.observe(element);
+            }
+        }
+        this.#observedOptionElements = elements;
+    }
     setupResizeObserver() {
         if (typeof ResizeObserver === "undefined") {
             return;
@@ -315,6 +335,7 @@ class SegmentedComponent {
             this.updateIndicatorGeometry({ suppressTransition: true });
         });
         this.#resizeObserver.observe(this.#hostElementRef.nativeElement);
+        this.observeOptionElements(this.optionElements());
     }
     updateIndicatorGeometry(options) {
         const selectedIndex = this.selectedIndex();
@@ -332,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.0",
+  "version": "0.18.2",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

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

@@ -148,6 +148,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected createOptionContext(option: SegmentedOption<T>, index: number): SegmentedItemTemplateContext<T>;
     protected onOptionBlur(): void;
     protected onOptionChange(option: SegmentedOption<T>): void;
+    private observeOptionElements;
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;