@joanroucoux/cairn-ui 0.7.0 → 0.7.1

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -4,10 +4,10 @@ import { inject, ElementRef, DestroyRef, afterNextRender, Component, input, bool
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, line } from 'd3-shape';
 
-const HEIGHT_PROPERTY = '--action-bar-height';
+const HEIGHT_PROPERTY$1 = '--action-bar-height';
 /**
  * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
- * thumb reach. It sits 52px plus the safe area above the bottom edge, so it clears `ui-tab-bar`, and
+ * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and
  * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
  * width equally. While it is on the page it publishes its height as `--action-bar-height` on the
  * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.
@@ -23,7 +23,7 @@ class UiActionBar {
         const host = inject(ElementRef).nativeElement;
         const root = inject(DOCUMENT).documentElement;
         const destroyRef = inject(DestroyRef);
-        const publish = () => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);
+        const publish = () => root.style.setProperty(HEIGHT_PROPERTY$1, `${host.offsetHeight}px`);
         afterNextRender(() => {
             publish();
             if (typeof ResizeObserver !== 'undefined') {
@@ -32,10 +32,10 @@ class UiActionBar {
                 destroyRef.onDestroy(() => observer.disconnect());
             }
         });
-        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY$1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, decorators: [{
             type: Component,
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'ui-action-bar',
                     template: '<ng-content />',
                     host: {
-                        class: 'fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
+                        class: 'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -1441,11 +1441,13 @@ class SheetDrag {
     #panel;
     #grips;
     #dismiss;
+    #enabled;
     #gesture = null;
-    constructor(panel, grips, dismiss) {
+    constructor(panel, grips, dismiss, enabled) {
         this.#panel = panel;
         this.#grips = grips;
         this.#dismiss = dismiss;
+        this.#enabled = enabled;
         for (const grip of grips) {
             grip.addEventListener('pointerdown', this.#onDown);
             grip.addEventListener('pointermove', this.#onMove);
@@ -1468,7 +1470,7 @@ class SheetDrag {
     }
     #onDown = (event) => {
         const grip = event.currentTarget;
-        if (event.button !== 0 || !isSheet() || event.target.closest(CONTROLS)) {
+        if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) {
             return;
         }
         grip.setPointerCapture(event.pointerId);
@@ -1602,6 +1604,9 @@ const nextId$3 = (() => {
 /**
  * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
  *
+ * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
+ * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
+ *
  * @example
  * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
  *   <p>Body</p>
@@ -1622,6 +1627,7 @@ class UiDialog {
     width = input('lg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dismissed = output();
     closed = output();
     headingId = nextId$3();
@@ -1647,7 +1653,7 @@ class UiDialog {
     ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
     titleClasses = computed(() => this.spec().title, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
+    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "crossClasses" }] : /* istanbul ignore next */ []));
     iconClasses = computed(() => this.spec().icon, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
@@ -1661,7 +1667,7 @@ class UiDialog {
         afterNextRender(() => {
             const host = this.#host.nativeElement;
             const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map((grip) => host.querySelector(grip));
-            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'));
+            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'), () => !this.busy());
             destroyRef.onDestroy(() => {
                 this.#drag?.destroy();
                 this.#cancelExit();
@@ -1703,13 +1709,20 @@ class UiDialog {
             return;
         }
         event.preventDefault();
-        this.close('escape');
+        if (!this.busy()) {
+            this.close('escape');
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.busy()) {
+            event.preventDefault();
+        }
     }
     onPointerDown(event) {
         this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);
     }
     onClick(event) {
-        if (this.#pressedOnBackdrop && event.target === this.#dialog && this.#outside(event)) {
+        if (this.#pressedOnBackdrop && !this.busy() && event.target === this.#dialog && this.#outside(event)) {
             this.close('backdrop');
         }
         this.#pressedOnBackdrop = false;
@@ -1722,11 +1735,16 @@ class UiDialog {
         return (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
     }
     onNativeClose() {
-        const reason = this.#reason ?? 'escape';
+        const asked = this.#reason;
         this.#reason = null;
         if (this.#dialog.open) {
             return;
         }
+        if (asked === null && this.busy()) {
+            this.#dialog.showModal();
+            return;
+        }
+        const reason = asked ?? 'escape';
         if (reason !== 'programmatic') {
             this.dismissed.emit();
         }
@@ -1741,9 +1759,10 @@ class UiDialog {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" } }, ngImport: i0, template: `
     <dialog
       #dlg
+      [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
@@ -1777,7 +1796,13 @@ class UiDialog {
         </div>
 
         @if (closeLabel()) {
-          <button type="button" [attr.aria-label]="closeLabel()" [class]="crossClasses()" (click)="close('cross')">
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
             <svg
               aria-hidden="true"
               class="block size-[22px] fill-none stroke-current stroke-[1.75]"
@@ -1815,9 +1840,14 @@ class UiDialog {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dialog', host: { '(pointerdown)': 'onPointerDown($event)', '(click)': 'onClick($event)' }, template: `
+            args: [{ selector: 'ui-dialog', host: {
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: `
     <dialog
       #dlg
+      [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
@@ -1851,7 +1881,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
 
         @if (closeLabel()) {
-          <button type="button" [attr.aria-label]="closeLabel()" [class]="crossClasses()" (click)="close('cross')">
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
             <svg
               aria-hidden="true"
               class="block size-[22px] fill-none stroke-current stroke-[1.75]"
@@ -1886,7 +1922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
     </dialog>
   `, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const RADIUS = 78;
 const RING_WIDTH = 30;
@@ -3851,6 +3887,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+class FlipItems {
+    items = new Set();
+    destroyed = new Set();
+    used = false;
+    get marked() {
+        return this.used;
+    }
+    add(item) {
+        this.used = true;
+        this.items.add(item);
+    }
+    remove(item) {
+        this.destroyed.add(item);
+    }
+    inside(host) {
+        const inside = [];
+        for (const item of this.items) {
+            if (host.contains(item)) {
+                inside.push(item);
+            }
+            else if (this.destroyed.has(item)) {
+                this.items.delete(item);
+                this.destroyed.delete(item);
+            }
+        }
+        return inside;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, decorators: [{
+            type: Injectable
+        }] });
+
 function readDuration$1(element, name, fallback) {
     const raw = getComputedStyle(element).getPropertyValue(name).trim();
     const value = parseFloat(raw);
@@ -3863,31 +3933,57 @@ function readEasing(element, name, fallback) {
     return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
 }
 
+function translateY(element) {
+    const matrix = /^matrix\((.+)\)$/.exec(getComputedStyle(element).transform);
+    return matrix ? parseFloat(matrix[1].split(',')[5]) : 0;
+}
 /**
- * Slides the remaining children of a list into place when one is removed or inserted (FLIP): it
- * measures every child before and after the change, then animates the shift in `translateY` over
- * `--duration-base` `--ease-out`. Pair it with `animate.leave="ui-leave-fade"` on the item so it fades
+ * Slides the items of a list into place when one is removed or inserted (FLIP): it measures every item
+ * before and after the change, from the top of the list itself, then animates the shift in `translateY`
+ * over `--duration-base` `--ease-out`. Pair it with `animate.leave="ui-leave-fade"` on the item so it fades
  * out first. Nothing moves under `prefers-reduced-motion`: the list closes up at once.
  *
+ * By default the items are the direct children of the list. Mark them with `uiFlipItem` instead when they
+ * sit deeper, for instance a page of several groups: put `uiFlipList` on the element around every group and
+ * `uiFlipItem` on each group heading and row, so a removal also slides the groups below. An item may sit
+ * inside another item (a row inside a card): it then moves by its own share and its card carries the rest.
+ * Only an item added or removed starts a slide; a change inside an item does not. Positions leave out the
+ * translate of any animation running inside the list (a slide in progress, an enter fade-up).
+ *
  * @example
  * <ul uiFlipList>
  *   @for (key of keys(); track key.id) {
  *     <li uiListRow animate.leave="ui-leave-fade">...</li>
  *   }
  * </ul>
+ *
+ * <table uiTable uiFlipList>
+ *   @for (group of groups(); track group.id) {
+ *     <tbody>
+ *       <tr uiTr group uiFlipItem>...</tr>
+ *       @for (row of group.rows; track row.id) {
+ *         <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
+ *       }
+ *     </tbody>
+ *   }
+ * </table>
  */
 class UiFlipList {
     host = inject(ElementRef).nativeElement;
     reduced = injectReducedMotion();
     mutations = new MutationObserver(() => this.onChange());
-    resizes = new ResizeObserver(() => this.measure());
+    resizes = new ResizeObserver(() => {
+        this.tops = this.measure();
+    });
     running = new Map();
     watched = new Set();
+    items = inject(FlipItems, { self: true });
     tops = new Map();
+    shifts = new Map();
     constructor() {
         afterNextRender(() => {
-            this.measure();
-            this.mutations.observe(this.host, { childList: true });
+            this.tops = this.measure();
+            this.mutations.observe(this.host, { childList: true, subtree: true });
             this.resizes.observe(this.host);
         });
         inject(DestroyRef).onDestroy(() => {
@@ -3895,57 +3991,118 @@ class UiFlipList {
             this.resizes.disconnect();
         });
     }
+    tracked() {
+        if (!this.items.marked) {
+            return Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
+        }
+        return this.items.inside(this.host);
+    }
     measure() {
-        const children = Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
-        this.tops = new Map(children.map((child) => [child, child.offsetTop]));
-        for (const child of children) {
-            if (!this.watched.has(child)) {
-                this.watched.add(child);
-                this.resizes.observe(child);
+        const elements = this.tracked();
+        const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;
+        const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));
+        this.shifts = new Map();
+        for (const animation of this.host.getAnimations({ subtree: true })) {
+            const target = animation.effect.target;
+            if (target !== this.host) {
+                this.shifts.set(target, translateY(target));
             }
         }
-        for (const child of this.watched) {
-            if (!this.tops.has(child)) {
-                this.watched.delete(child);
-                this.running.delete(child);
-                this.resizes.unobserve(child);
+        for (const [moving, shift] of this.shifts) {
+            for (const [element, top] of tops) {
+                if (moving.contains(element)) {
+                    tops.set(element, top - shift);
+                }
             }
         }
-    }
-    interruptedOffset(child) {
-        const running = this.running.get(child);
-        if (!running) {
-            return 0;
+        for (const element of elements) {
+            if (!this.watched.has(element)) {
+                this.watched.add(element);
+                this.resizes.observe(element);
+            }
+        }
+        for (const element of this.watched) {
+            if (!tops.has(element)) {
+                this.watched.delete(element);
+                this.running.delete(element);
+                this.resizes.unobserve(element);
+            }
         }
-        const shown = child.getBoundingClientRect().top;
-        running.cancel();
-        this.running.delete(child);
-        return shown - child.getBoundingClientRect().top;
+        return tops;
     }
     onChange() {
         const before = this.tops;
-        this.measure();
-        if (this.reduced()) {
+        const after = this.measure();
+        this.tops = after;
+        const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));
+        if (this.reduced() || !changed) {
             return;
         }
         const duration = readDuration$1(this.host, '--duration-base', 260);
         const easing = readEasing(this.host, '--ease-out', 'ease-out');
-        for (const [child, top] of this.tops) {
-            const previous = before.get(child);
-            if (previous === undefined || previous === top) {
+        const moved = (element) => (before.get(element) ?? 0) - (after.get(element) ?? 0);
+        for (const [element] of after) {
+            if (!before.has(element)) {
+                continue;
+            }
+            const own = moved(element) - moved(this.parentItem(element, before, after));
+            if (Math.abs(own) < 0.5) {
                 continue;
             }
-            const from = previous - top + this.interruptedOffset(child);
-            this.running.set(child, child.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], { duration, easing }));
+            const from = own + (this.shifts.get(element) ?? 0);
+            this.running.get(element)?.cancel();
+            const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], {
+                duration,
+                easing,
+            });
+            animation.onfinish = () => {
+                if (this.running.get(element) === animation) {
+                    this.running.delete(element);
+                }
+            };
+            this.running.set(element, animation);
+        }
+    }
+    parentItem(element, before, after) {
+        let node = element.parentElement;
+        while (node !== this.host && !(before.has(node) && after.has(node))) {
+            node = node.parentElement;
         }
+        return node;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipList, isStandalone: true, selector: "[uiFlipList]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipList, isStandalone: true, selector: "[uiFlipList]", providers: [FlipItems], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiFlipList]',
+                    providers: [FlipItems],
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Marks an element as an item of the nearest `uiFlipList`, at any depth: a group heading, a row inside a
+ * group, a card. Once one item is marked, the list follows its marked items only.
+ *
+ * @example
+ * <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
+ */
+class UiFlipItem {
+    constructor() {
+        const items = inject(FlipItems, { optional: true });
+        if (items) {
+            const element = inject(ElementRef).nativeElement;
+            items.add(element);
+            inject(DestroyRef).onDestroy(() => items.remove(element));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipItem, isStandalone: true, selector: "[uiFlipItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiFlipItem]',
                 }]
         }], ctorParameters: () => [] });
 
@@ -3969,6 +4126,10 @@ function paintedElements(host) {
  * cells, on a `td[ui-group-cell]` the band, anywhere else the host. Under `prefers-reduced-motion` the
  * scroll is instant and the fade lasts 600 ms.
  *
+ * It starts on the next frame and, when the element is still playing a finite animation of its own (an
+ * `animate.enter` fade on a new row), once that animation has finished, waiting no longer than
+ * `--duration-base`: the element fades in, then lights up. Both can sit on the same element.
+ *
  * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
  * below it (header, tab bar, action bar): a row under them counts as off screen and is scrolled out.
  * For an arrival on a page opened at the element, scroll to it at once first (`scrollIntoView` in
@@ -4045,15 +4206,38 @@ class UiHighlight {
         return rect.top >= top && rect.bottom <= window.innerHeight - bottom;
     }
     flash() {
-        const fade = readDuration$1(this.host, '--duration-highlight', 1200);
-        const easing = readEasing(this.host, '--ease-out', 'ease-out');
-        const total = HOLD_MS + fade;
-        const animations = paintedElements(this.host).map((element) => element.animate([
-            { backgroundColor: 'var(--soft)', offset: 0 },
-            { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },
-            { offset: 1 },
-        ], { duration: total }));
-        return () => animations.forEach((animation) => animation.cancel());
+        const painted = paintedElements(this.host);
+        let animations = [];
+        let timer;
+        const paint = () => {
+            const fade = readDuration$1(this.host, '--duration-highlight', 1200);
+            const easing = readEasing(this.host, '--ease-out', 'ease-out');
+            const total = HOLD_MS + fade;
+            animations = painted.map((element) => element.animate([
+                { backgroundColor: 'var(--soft)', offset: 0 },
+                { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },
+                { offset: 1 },
+            ], { duration: total }));
+        };
+        const frame = requestAnimationFrame(() => {
+            const remaining = Array.from(new Set([this.host, ...painted]))
+                .flatMap((element) => element.getAnimations())
+                .map((animation) => {
+                const timing = animation.effect.getComputedTiming();
+                return Number(timing.endTime) - Number(timing.localTime ?? 0);
+            })
+                .filter((left) => Number.isFinite(left));
+            if (remaining.length === 0) {
+                paint();
+                return;
+            }
+            timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration$1(this.host, '--duration-base', 260)));
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(timer);
+            animations.forEach((animation) => animation.cancel());
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiHighlight, isStandalone: true, selector: "[uiHighlight]", inputs: { uiHighlight: { classPropertyName: "uiHighlight", publicName: "uiHighlight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
@@ -4541,7 +4725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
-const BASE_CLASSES = 'inline-flex items-center gap-0.5 rounded-[4px] text-caption font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
+const BASE_CLASSES = "relative inline-flex items-center gap-0.5 rounded-[4px] text-caption font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:h-11 pointer-fine:before:h-10 before:-translate-y-1/2 before:content-['']";
 const CHEVRON_CLASSES = "after:size-4 after:flex-none after:bg-current after:content-[''] after:mask-center after:mask-no-repeat after:mask-[url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]";
 /**
  * Link in the stale tone, for a caption about data that is late or left out of a total, such as
@@ -4677,11 +4861,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 
+const HEIGHT_PROPERTY = '--tab-bar-height';
+const HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';
 const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
 const INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';
 const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
 /**
- * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the
+ * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and
+ * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.
  *
  * @example
  * <nav ui-tab-bar>
@@ -4689,6 +4877,11 @@ const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
  * </nav>
  */
 class UiTabBar {
+    constructor() {
+        const root = inject(DOCUMENT).documentElement;
+        root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);
+        inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiTabBar, isStandalone: true, selector: "nav[ui-tab-bar]", host: { classAttribute: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
@@ -4701,7 +4894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         class: 'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * One destination of `ui-tab-bar`.
  *
@@ -4837,7 +5030,7 @@ class UiToaster {
         this.lastId = 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiToaster, isStandalone: true, selector: "ui-toaster", host: { attributes: { "role": "status" }, classAttribute: "pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(52px+env(safe-area-inset-bottom)+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiToaster, isStandalone: true, selector: "ui-toaster", host: { attributes: { "role": "status" }, classAttribute: "pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6" }, ngImport: i0, template: `
     @if (toasts.toast(); as toast) {
       <div
         animate.leave="ui-leave-fade"
@@ -4872,7 +5065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                     host: {
                         role: 'status',
-                        class: 'pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(52px+env(safe-area-inset-bottom)+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6',
+                        class: 'pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -5193,5 +5386,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiEmpty, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiFlipList, UiGroup, UiGroupCell, UiHighlight, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStaleLink, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiToaster, UiToasts, UiTr, delayedState, formatAmount, injectReducedMotion };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiEmpty, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiFlipItem, UiFlipList, UiGroup, UiGroupCell, UiHighlight, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStaleLink, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiToaster, UiToasts, UiTr, delayedState, formatAmount, injectReducedMotion };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map