@joanroucoux/cairn-ui 0.6.5 → 0.7.1

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -1,14 +1,16 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, input, computed, InjectionToken, signal, inject, LOCALE_ID, booleanAttribute, output, Directive, ElementRef, DestroyRef, forwardRef, model, viewChildren, afterNextRender, afterRenderEffect, contentChild, viewChild, effect, numberAttribute, contentChildren } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { inject, ElementRef, DestroyRef, afterNextRender, Component, input, booleanAttribute, computed, InjectionToken, signal, LOCALE_ID, effect, untracked, output, Directive, forwardRef, model, viewChildren, afterRenderEffect, contentChild, viewChild, numberAttribute, contentChildren, Injectable } from '@angular/core';
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, line } from 'd3-shape';
 
+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.
+ * 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.
  *
  * @example
  * <ui-action-bar>
@@ -17,8 +19,23 @@ import { curveMonotoneX, line } from 'd3-shape';
  * </ui-action-bar>
  */
 class UiActionBar {
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        const root = inject(DOCUMENT).documentElement;
+        const destroyRef = inject(DestroyRef);
+        const publish = () => root.style.setProperty(HEIGHT_PROPERTY$1, `${host.offsetHeight}px`);
+        afterNextRender(() => {
+            publish();
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(publish);
+                observer.observe(host);
+                destroyRef.onDestroy(() => observer.disconnect());
+            }
+        });
+        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,
@@ -26,19 +43,21 @@ 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: () => [] });
 
 const ALERT_VARIANTS = ['error', 'warning'];
-const BASE_CLASSES$8 = 'flex items-start gap-2.5 text-left text-label';
+const BASE_CLASSES$9 = 'flex items-start gap-2.5 text-left text-label';
 const VARIANT_CLASSES$3 = {
     error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',
     warning: 'text-(--foreground)',
 };
 /**
  * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
+ * It fades in when it appears; set `[fadeIn]="false"` on an alert that is part of the page as it
+ * opens (an error state after a load), which shows without motion.
  *
  * @example
  * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
@@ -48,10 +67,11 @@ class UiAlert {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     heading = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$8} ${VARIANT_CLASSES$3[this.variant()]}`, /* @ts-ignore */
+    fadeIn = input(true, { ...(ngDevMode ? { debugName: "fadeIn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `${BASE_CLASSES$9} ${VARIANT_CLASSES$3[this.variant()]}${this.fadeIn() ? ' ui-enter-fade' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAlert, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "variant() === 'warning' ? 'status' : 'alert'" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAlert, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.leave": "ui-leave-fade" }, properties: { "class": "classes()", "attr.role": "variant() === 'warning' ? 'status' : 'alert'" } }, ngImport: i0, template: `
     @if (variant() === 'warning') {
       <svg
         aria-hidden="true"
@@ -141,11 +161,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </div>
   `,
                     host: {
+                        'animate.leave': 'ui-leave-fade',
                         '[class]': 'classes()',
                         '[attr.role]': "variant() === 'warning' ? 'status' : 'alert'",
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], fadeIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeIn", required: false }] }] } });
 
 const MINUS = '−';
 const EM_DASH = '—';
@@ -252,13 +273,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], signed: [{ type: i0.Input, args: [{ isSignal: true, alias: "signed", required: false }] }], fractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "fractionDigits", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], whenMasked: [{ type: i0.Input, args: [{ isSignal: true, alias: "whenMasked", required: false }] }] } });
 
+const SKELETON_DELAY_MS = 150;
+const SKELETON_MIN_MS = 400;
+/**
+ * Turns the live state of a call into the state to draw: `loading` only appears once the call has
+ * lasted 150 ms and, once shown, stays at least 400 ms, so a fast call never flashes a skeleton and a
+ * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);
+ * `null` means nothing to draw yet, for a first load still under 150 ms. Call it in an injection context.
+ *
+ * @example
+ * protected readonly shown = delayedState(this.state);
+ */
+function delayedState(source) {
+    const displayed = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
+    let timer;
+    let shownAt = 0;
+    const clear = () => {
+        clearTimeout(timer);
+        timer = undefined;
+    };
+    inject(DestroyRef).onDestroy(clear);
+    effect(() => {
+        const state = source();
+        untracked(() => {
+            if (state === 'loading') {
+                if (displayed() === 'loading') {
+                    clear();
+                }
+                else {
+                    timer = setTimeout(() => {
+                        timer = undefined;
+                        shownAt = Date.now();
+                        displayed.set('loading');
+                    }, SKELETON_DELAY_MS);
+                }
+                return;
+            }
+            clear();
+            const remaining = shownAt + SKELETON_MIN_MS - Date.now();
+            if (displayed() === 'loading' && remaining > 0) {
+                timer = setTimeout(() => {
+                    timer = undefined;
+                    displayed.set(untracked(source));
+                }, remaining);
+            }
+            else {
+                displayed.set(state);
+            }
+        });
+    });
+    return displayed.asReadonly();
+}
+
 /** Available async block states. `AsyncState` is derived from this tuple. */
 const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'];
 /** Looks of the error block. `AsyncVariant` is derived from this tuple. */
 const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'];
 /** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */
 const ASYNC_ALIGNS = ['start', 'center', 'auto'];
-const RETRY_BASE_CLASSES = 'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';
+const RETRY_BASE_CLASSES = 'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,opacity] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) text-label';
 const RETRY_OUTLINE_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';
 const RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';
 const RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';
@@ -334,7 +408,8 @@ class UiAsync {
     card = input(false, { ...(ngDevMode ? { debugName: "card" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     retry = output();
-    filling = computed(() => this.fill() && this.state() === 'error', /* @ts-ignore */
+    shown = delayedState(this.state);
+    filling = computed(() => this.fill() && this.shown() === 'error', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filling" }] : /* istanbul ignore next */ []));
     iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
@@ -353,9 +428,9 @@ class UiAsync {
         return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
-    titleClasses = computed(() => this.#spec()?.title ?? '', /* @ts-ignore */
+    titleClasses = computed(() => this.#spec().title, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    messageClasses = computed(() => this.#spec()?.message[this.align()] ?? '', /* @ts-ignore */
+    messageClasses = computed(() => this.#spec().message[this.align()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "messageClasses" }] : /* istanbul ignore next */ []));
     retryButtonClasses = computed(() => {
         const spec = this.#spec();
@@ -367,7 +442,8 @@ class UiAsync {
     ...(ngDevMode ? [{ debugName: "retryButtonClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAsync, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAsync, isStandalone: true, selector: "ui-async", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { properties: { "attr.aria-busy": "state() === 'loading' || null", "class.flex": "filling()", "class.flex-col": "filling()" } }, ngImport: i0, template: `
-    @switch (state()) {
+    @switch (shown()) {
+      @case (null) {}
       @case ('loading') {
         <ng-content select="[asyncLoading]" />
       }
@@ -415,7 +491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             args: [{
                     selector: 'ui-async',
                     template: `
-    @switch (state()) {
+    @switch (shown()) {
+      @case (null) {}
       @case ('loading') {
         <ng-content select="[asyncLoading]" />
       }
@@ -467,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'];
-const BASE_CLASSES$7 = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
+const BASE_CLASSES$8 = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
 const SIZE_CLASSES$7 = {
     sm: 'size-8 text-caption',
     md: 'size-[34px] text-label',
@@ -487,7 +564,7 @@ class UiAvatar {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$7} ${SIZE_CLASSES$7[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$8} ${SIZE_CLASSES$7[this.size()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiAvatar, isStandalone: true, selector: "ui-avatar", inputs: { initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "label()", "class": "classes()" } }, ngImport: i0, template: '<span aria-hidden="true">{{ initials() }}</span>', isInline: true });
@@ -514,21 +591,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class UiAvatarLink {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[uiAvatarLink], button[uiAvatarLink]',
                     host: {
-                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
+                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
                     },
                 }]
         }] });
 
 /** Available back link sizes. `BackLinkSize` is derived from this tuple. */
 const BACK_LINK_SIZES = ['md', 'sm', 'header'];
-const BASE_CLASSES$6 = 'inline-flex items-center gap-0.5 rounded-control text-body font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,color] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';
+const BASE_CLASSES$7 = 'inline-flex items-center gap-0.5 rounded-control text-body font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';
 const SIZE_CLASSES$6 = {
     md: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:outline-offset-2',
     sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',
@@ -546,7 +623,7 @@ class UiBackLink {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     chevron = computed(() => CHEVRON[this.size()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$6[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$7} ${SIZE_CLASSES$6[this.size()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBackLink, isStandalone: true, selector: "a[ui-back-link]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
@@ -595,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
 const BADGE_VARIANTS = ['neutral', 'outline'];
 const BADGE_SIZES = ['md', 'sm'];
-const BASE_CLASSES$5 = 'inline-flex items-center rounded-pill text-caption font-medium';
+const BASE_CLASSES$6 = 'inline-flex items-center rounded-pill text-caption font-medium';
 const SIZE_CLASSES$5 = {
     md: 'h-6 px-2.5',
     sm: 'h-[22px] px-2',
@@ -615,7 +692,7 @@ class UiBadge {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$5} ${SIZE_CLASSES$5[this.size()]} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$5[this.size()]} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBadge, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
@@ -658,7 +735,7 @@ const BUTTON_SIZES = [
     'icon',
     'icon-sm',
 ];
-const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
+const BASE_CLASSES$5 = 'relative inline-flex items-center justify-center rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[scale,background-color,opacity] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
 const RING_OUTSIDE = 'focus-visible:outline-offset-2';
 const RING_INSIDE = 'focus-visible:-outline-offset-2';
 const OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';
@@ -678,10 +755,10 @@ const SIZE_CLASSES$4 = {
     slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',
     xs: 'h-8 gap-1.5 px-2.5 text-label',
     sm: 'h-9 gap-2 px-3 text-label',
-    md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>svg:first-child]:pl-3',
+    md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>span>svg:first-child]:pl-3',
     lg: 'h-11 gap-2 px-[18px] text-label',
     xl: 'h-[50px] gap-2 px-6 text-body',
-    xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>svg:first-child]:pl-4',
+    xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>span>svg:first-child]:pl-4',
     tall: 'h-12 lg:h-10 gap-2 px-4 text-body',
     block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',
     icon: 'size-(--row-min) gap-2 p-0',
@@ -703,7 +780,7 @@ class UiButton {
     busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inactive = computed(() => this.loading() || this.busy(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$4} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES$4[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$5} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES$4[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
         const host = inject(ElementRef).nativeElement;
@@ -721,10 +798,10 @@ class UiButton {
     @if (loading()) {
       <span
         aria-hidden="true"
-        class="rounded-pill size-4 border-2 border-current border-r-transparent motion-safe:animate-spin"
+        class="rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent"
       ></span>
     }
-    <ng-content />
+    <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiButton, decorators: [{
@@ -735,10 +812,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     @if (loading()) {
       <span
         aria-hidden="true"
-        class="rounded-pill size-4 border-2 border-current border-r-transparent motion-safe:animate-spin"
+        class="rounded-pill animate-cairn-spin absolute inset-0 m-auto size-4 border-2 border-current border-r-transparent"
       ></span>
     }
-    <ng-content />
+    <span class="contents" [class.text-transparent]="loading()"><ng-content /></span>
   `,
                     host: {
                         '[class]': 'classes()',
@@ -756,7 +833,7 @@ const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel
 const CARD_SURFACES = ['always', 'lg', 'max-lg'];
 /** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */
 const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'];
-const BASE_CLASSES$3 = 'block';
+const BASE_CLASSES$4 = 'block';
 const VARIANT_CLASSES = {
     default: {
         always: 'rounded-container bg-(--card) text-(--card-foreground)',
@@ -861,7 +938,7 @@ class UiCard {
         const surface = this.surface();
         const border = this.border();
         return [
-            BASE_CLASSES$3,
+            BASE_CLASSES$4,
             VARIANT_CLASSES[variant][surface],
             BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],
             PADDING_CLASSES$1[this.padding()][surface],
@@ -897,7 +974,7 @@ const UI_CONTROL = new InjectionToken('UI_CONTROL');
 
 /** Available control sizes. `md` is the 44/40px touch target; `lg` and `xl` are the 48px sheet and sign-in fields. */
 const CONTROL_SIZES = ['sm', 'md', 'lg', 'xl'];
-const CONTROL_BASE_CLASSES = 'w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] transition-shadow duration-(--duration-fast) ease-out placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50';
+const CONTROL_BASE_CLASSES = 'w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50';
 const CONTROL_SURFACES = ['background', 'card'];
 const CONTROL_SURFACE_CLASSES = {
     background: 'bg-(--background)',
@@ -962,7 +1039,7 @@ class UiTextarea {
     touched = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTextarea, isStandalone: true, selector: "textarea[uiTextarea]", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] transition-shadow duration-(--duration-fast) ease-out placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50 bg-(--background) min-h-24 py-2" }, providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiTextarea) }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTextarea, isStandalone: true, selector: "textarea[uiTextarea]", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50 bg-(--background) min-h-24 py-2" }, providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiTextarea) }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTextarea, decorators: [{
             type: Directive,
@@ -1142,7 +1219,7 @@ const DELTA_EMPHASES = ['text', 'pill'];
 const DELTA_SIZES = ['label', 'inherit'];
 /** Font weights. `DeltaWeight` is derived from this tuple. */
 const DELTA_WEIGHTS = ['medium', 'regular'];
-const BASE_CLASSES$2 = 'inline-flex items-center gap-1 tabular-nums';
+const BASE_CLASSES$3 = 'inline-flex items-center gap-1 tabular-nums';
 const SIZE_CLASSES$3 = {
     label: 'text-label',
     inherit: '',
@@ -1199,7 +1276,7 @@ class UiDelta {
     classes = computed(() => {
         const sign = this.sign();
         const background = this.emphasis() === 'pill' ? `${PILL_CLASSES$1} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
-        return `${BASE_CLASSES$2} ${SIZE_CLASSES$3[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${TEXT_CLASSES[sign]} ${background}`;
+        return `${BASE_CLASSES$3} ${SIZE_CLASSES$3[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${TEXT_CLASSES[sign]} ${background}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDelta, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1230,6 +1307,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unknownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unknownLabel", required: true }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
 
+const GRACE = 50;
+function afterExit(element, done) {
+    const style = getComputedStyle(element);
+    const wait = longest(style.transitionDuration) + longest(style.transitionDelay);
+    if (wait === 0) {
+        done();
+        return () => undefined;
+    }
+    const onEnd = (event) => {
+        if (event.target === element && !event.pseudoElement) {
+            cancel();
+            done();
+        }
+    };
+    const timer = setTimeout(() => {
+        cancel();
+        done();
+    }, wait + GRACE);
+    const cancel = () => {
+        clearTimeout(timer);
+        element.removeEventListener('transitionend', onEnd);
+    };
+    element.addEventListener('transitionend', onEnd);
+    return cancel;
+}
+function longest(list) {
+    return Math.max(0, ...list.split(',').map(toMs));
+}
+function toMs(value) {
+    const amount = Number.parseFloat(value);
+    if (Number.isNaN(amount)) {
+        return 0;
+    }
+    return value.trim().endsWith('ms') ? amount : amount * 1000;
+}
+
+const 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;
+  }
+}
+`;
+
+const DISMISS_RATIO = 0.3;
+const DISMISS_SPEED = 0.5;
+const SPEED_WINDOW = 100;
+const SLOP = 6;
+const CONTROLS = 'button, a, input, select, textarea, [role="button"]';
+class SheetDrag {
+    #panel;
+    #grips;
+    #dismiss;
+    #enabled;
+    #gesture = null;
+    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);
+            grip.addEventListener('pointerup', this.#onUp);
+            grip.addEventListener('pointercancel', this.#onCancel);
+        }
+    }
+    reset() {
+        this.#gesture = null;
+        this.#panel.removeAttribute('data-dragging');
+        this.#panel.style.removeProperty('--drag-y');
+    }
+    destroy() {
+        for (const grip of this.#grips) {
+            grip.removeEventListener('pointerdown', this.#onDown);
+            grip.removeEventListener('pointermove', this.#onMove);
+            grip.removeEventListener('pointerup', this.#onUp);
+            grip.removeEventListener('pointercancel', this.#onCancel);
+        }
+    }
+    #onDown = (event) => {
+        const grip = event.currentTarget;
+        if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) {
+            return;
+        }
+        grip.setPointerCapture(event.pointerId);
+        this.#gesture = {
+            id: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            dragging: false,
+            height: 0,
+            offset: 0,
+            samples: [{ y: event.clientY, at: event.timeStamp }],
+        };
+    };
+    #onMove = (event) => {
+        const gesture = this.#current(event);
+        if (!gesture) {
+            return;
+        }
+        const dx = event.clientX - gesture.startX;
+        const dy = event.clientY - gesture.startY;
+        if (!gesture.dragging) {
+            if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) {
+                return;
+            }
+            if (Math.abs(dx) > Math.abs(dy)) {
+                this.#gesture = null;
+                return;
+            }
+            gesture.dragging = true;
+            gesture.height = this.#panel.getBoundingClientRect().height;
+            this.#panel.setAttribute('data-dragging', '');
+        }
+        gesture.offset = Math.max(0, dy);
+        gesture.samples.push({ y: event.clientY, at: event.timeStamp });
+        this.#panel.style.setProperty('--drag-y', `${gesture.offset}px`);
+    };
+    #onUp = (event) => {
+        const gesture = this.#current(event);
+        if (!gesture) {
+            return;
+        }
+        this.#gesture = null;
+        if (!gesture.dragging) {
+            return;
+        }
+        this.#panel.removeAttribute('data-dragging');
+        const release = { y: event.clientY, at: event.timeStamp };
+        if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) {
+            this.#dismiss();
+        }
+        else {
+            this.reset();
+        }
+    };
+    #onCancel = (event) => {
+        if (this.#current(event)) {
+            this.#gesture = null;
+            this.#panel.removeAttribute('data-dragging');
+            this.reset();
+        }
+    };
+    #current(event) {
+        return this.#gesture?.id === event.pointerId ? this.#gesture : null;
+    }
+}
+function isSheet() {
+    return typeof matchMedia === 'function' && !matchMedia('(min-width: 64rem)').matches;
+}
+function releaseSpeed(samples, last) {
+    const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;
+    const elapsed = last.at - first.at;
+    return elapsed > 0 ? (last.y - first.y) / elapsed : 0;
+}
+
 /** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
 const DIALOG_WIDTHS = ['md', 'lg'];
 const WIDTH_VALUES = {
@@ -1280,6 +1595,8 @@ const LAYOUTS = {
         footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
     },
 };
+/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
+const DIALOG_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'drag', 'programmatic'];
 const nextId$3 = (() => {
     let count = 0;
     return () => `ui-dialog-${++count}`;
@@ -1287,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>
@@ -1307,7 +1627,9 @@ 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();
     descriptionId = `${this.headingId}-description`;
     bodyId = `${this.headingId}-body`;
@@ -1327,11 +1649,11 @@ class UiDialog {
     ...(ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []));
     spec = computed(() => LAYOUTS[this.layout()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
-    headerClasses = computed(() => `flex gap-2 pl-4 lg:gap-3 lg:pl-6 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'}`, /* @ts-ignore */
+    headerClasses = computed(() => `flex gap-2 pl-4 max-lg:touch-none lg:gap-3 lg:pl-6 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'}`, /* @ts-ignore */
     ...(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-[transform,background-color,color] duration-(--duration-press) 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 */ []));
@@ -1343,6 +1665,13 @@ class UiDialog {
     constructor() {
         const destroyRef = inject(DestroyRef);
         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.busy());
+            destroyRef.onDestroy(() => {
+                this.#drag?.destroy();
+                this.#cancelExit();
+            });
             if (typeof ResizeObserver === 'undefined') {
                 return;
             }
@@ -1356,20 +1685,45 @@ class UiDialog {
             // viewChild.required can't target a #private field (NG1053); safe because the template has exactly one <dialog>.
             const dialog = this.#host.nativeElement.querySelector('dialog');
             if (this.open() && !dialog.open) {
+                this.#cancelExit();
+                this.#drag?.reset();
                 dialog.showModal();
             }
             else if (!this.open() && dialog.open) {
-                dialog.close();
+                this.close('programmatic');
             }
         });
     }
     #pressedOnBackdrop = false;
+    #drag = null;
+    #reason = null;
+    #cancelExit = () => undefined;
+    close(reason) {
+        if (this.#dialog.open) {
+            this.#reason = reason;
+            this.#dialog.close();
+        }
+    }
+    onCancel(event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        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)) {
-            this.#dialog.close();
+        if (this.#pressedOnBackdrop && !this.busy() && event.target === this.#dialog && this.#outside(event)) {
+            this.close('backdrop');
         }
         this.#pressedOnBackdrop = false;
     }
@@ -1381,23 +1735,48 @@ class UiDialog {
         return (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
     }
     onNativeClose() {
-        // The owner already knows about a close it asked for; only a close it did not ask for is news.
-        if (this.open()) {
+        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();
         }
+        this.#awaitExit(reason);
+    }
+    #awaitExit(reason) {
+        this.#cancelExit();
+        this.#cancelExit = afterExit(this.#dialog, () => {
+            this.#cancelExit = () => undefined;
+            this.#drag?.reset();
+            this.closed.emit(reason);
+        });
     }
     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" }, 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'"
       [class]="classes()"
       [style.--dialog-width]="widthValue()"
+      (cancel)="onCancel($event)"
       (close)="onNativeClose()"
     >
-      <div aria-hidden="true" class="flex h-5 justify-center lg:hidden" data-dialog-handle [class]="spec().handle">
+      <div
+        aria-hidden="true"
+        class="flex h-5 touch-none justify-center lg:hidden"
+        data-dialog-handle
+        [class]="spec().handle"
+      >
         <span class="rounded-pill h-[5px] w-9 bg-(--border)"></span>
       </div>
 
@@ -1417,7 +1796,13 @@ class UiDialog {
         </div>
 
         @if (closeLabel()) {
-          <button type="button" [attr.aria-label]="closeLabel()" [class]="crossClasses()" (click)="dlg.close()">
+          <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]"
@@ -1451,21 +1836,32 @@ class UiDialog {
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{--dialog-ease: var(--ease-sheet);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:translateY(0)}dialog:not([open]){opacity:0;transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translateY(100%)}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transform:scale(1)}dialog:not([open]){transform:scale(var(--enter-scale))}@starting-style{dialog[open]{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"] });
+  `, isInline: true, 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"] });
 }
 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'"
       [class]="classes()"
       [style.--dialog-width]="widthValue()"
+      (cancel)="onCancel($event)"
       (close)="onNativeClose()"
     >
-      <div aria-hidden="true" class="flex h-5 justify-center lg:hidden" data-dialog-handle [class]="spec().handle">
+      <div
+        aria-hidden="true"
+        class="flex h-5 touch-none justify-center lg:hidden"
+        data-dialog-handle
+        [class]="spec().handle"
+      >
         <span class="rounded-pill h-[5px] w-9 bg-(--border)"></span>
       </div>
 
@@ -1485,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)="dlg.close()">
+          <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]"
@@ -1519,12 +1921,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `, styles: ["dialog{--dialog-ease: var(--ease-sheet);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:translateY(0)}dialog:not([open]){opacity:0;transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translateY(100%)}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transform:scale(1)}dialog:not([open]){transform:scale(var(--enter-scale))}@starting-style{dialog[open]{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"] }] } });
+  `, 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 }] }], 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;
-const ACTIVE_RING_WIDTH = 38;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const GAP = 2;
 function positionSlices(slices) {
@@ -1571,7 +1972,8 @@ function rankSlices(slices, othersLabel) {
 
 const identityValue$1 = (value) => `${value}`;
 const identityShare = (share) => `${Math.round(share * 100)}%`;
-const ROW_CLASSES$1 = 'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-colors duration-(--duration-fast) ease-out hover:bg-(--glow) active:bg-(--soft) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const ROW_CLASSES$1 = 'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const SLICE_CLASSES = 'cursor-pointer origin-center [transform-box:view-box] transition-[scale,opacity] duration-(--duration-fast) ease-out';
 const RAMP_DOT_CLASSES = {
     1: 'bg-(--ramp-1)',
     2: 'bg-(--ramp-2)',
@@ -1625,8 +2027,12 @@ class UiDonut {
     strokeColor(slice) {
         return `var(--ramp-${slice.ramp})`;
     }
-    strokeWidth(slice) {
-        return this.isActive(slice) ? ACTIVE_RING_WIDTH : RING_WIDTH;
+    sliceClasses(slice) {
+        const id = this.activeId();
+        if (id === null) {
+            return SLICE_CLASSES;
+        }
+        return `${SLICE_CLASSES} ${id === slice.id ? 'scale-104 motion-reduce:scale-100' : 'opacity-50'}`;
     }
     dotClasses(slice) {
         return `size-3 flex-none rounded-pill shadow-[inset_0_0_0_1px_var(--border)] ${RAMP_DOT_CLASSES[slice.ramp]}`;
@@ -1676,7 +2082,6 @@ class UiDonut {
         />
         @for (slice of positioned(); track slice.id) {
           <circle
-            class="cursor-pointer transition-[stroke-width] duration-(--duration-fast) ease-out"
             cx="100"
             cy="100"
             data-slice
@@ -1684,8 +2089,9 @@ class UiDonut {
             [attr.r]="radius"
             [attr.stroke-dasharray]="slice.dash"
             [attr.stroke-dashoffset]="slice.offset"
+            [attr.stroke-width]="ringWidth"
+            [class]="sliceClasses(slice)"
             [style.stroke]="strokeColor(slice)"
-            [style.stroke-width.px]="strokeWidth(slice)"
             (click)="select(slice)"
             (pointerenter)="highlight(slice.id)"
             (pointerleave)="clearHighlight(slice.id)"
@@ -1771,7 +2177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         />
         @for (slice of positioned(); track slice.id) {
           <circle
-            class="cursor-pointer transition-[stroke-width] duration-(--duration-fast) ease-out"
             cx="100"
             cy="100"
             data-slice
@@ -1779,8 +2184,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             [attr.r]="radius"
             [attr.stroke-dasharray]="slice.dash"
             [attr.stroke-dashoffset]="slice.offset"
+            [attr.stroke-width]="ringWidth"
+            [class]="sliceClasses(slice)"
             [style.stroke]="strokeColor(slice)"
-            [style.stroke-width.px]="strokeWidth(slice)"
             (click)="select(slice)"
             (pointerenter)="highlight(slice.id)"
             (pointerleave)="clearHighlight(slice.id)"
@@ -1855,6 +2261,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { slices: [{ type: i0.Input, args: [{ isSignal: true, alias: "slices", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], othersLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "othersLabel", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], shareFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareFormat", required: false }] }], legendHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendHref", required: false }] }], sliceSelect: [{ type: i0.Output, args: ["sliceSelect"] }] } });
 
+/**
+ * Centred empty state: a title, a hint and an action slot, such as a catalogue search that matches
+ * nothing. The padding is 24px, 48px from 64rem.
+ *
+ * @example
+ * <ui-empty heading="Aucun instrument ne correspond à « zzz »" hint="La recherche porte sur le nom et l'ISIN.">
+ *   <button ui-button variant="outline" size="md" type="button">Ajouter une ligne</button>
+ * </ui-empty>
+ */
+class UiEmpty {
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiEmpty, isStandalone: true, selector: "ui-empty", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12" }, ngImport: i0, template: `
+    <span class="text-body font-medium text-pretty">{{ heading() }}</span>
+    @if (hint()) {
+      <span class="text-label text-(--muted-foreground)">{{ hint() }}</span>
+    }
+    <div class="mt-2 empty:hidden"><ng-content /></div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiEmpty, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-empty',
+                    template: `
+    <span class="text-body font-medium text-pretty">{{ heading() }}</span>
+    @if (hint()) {
+      <span class="text-label text-(--muted-foreground)">{{ hint() }}</span>
+    }
+    <div class="mt-2 empty:hidden"><ng-content /></div>
+  `,
+                    host: { class: 'flex flex-col items-center gap-1.5 px-2 py-6 text-center lg:py-12' },
+                }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+
 /**
  * Link to another site: the label followed by an external-link icon. A 44px target on touch,
  * an underline on hover with a mouse.
@@ -2045,14 +2489,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class UiFieldTrailing {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFieldTrailing, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFieldTrailing, isStandalone: true, selector: "[uiFieldTrailing]", host: { classAttribute: "absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFieldTrailing, isStandalone: true, selector: "[uiFieldTrailing]", host: { classAttribute: "absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) transition-[color] duration-(--duration-fast) ease-out hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFieldTrailing, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiFieldTrailing]',
                     host: {
-                        class: 'absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)',
+                        class: 'absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) transition-[color] duration-(--duration-fast) ease-out hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)',
                     },
                 }]
         }] });
@@ -2179,7 +2623,9 @@ class UiField {
       }
 
       @if (message()) {
-        <p class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">{{ message() }}</p>
+        <p animate.enter="ui-enter-fade" class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">
+          {{ message() }}
+        </p>
       }
     </div>
   `, isInline: true });
@@ -2212,7 +2658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
 
       @if (message()) {
-        <p class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">{{ message() }}</p>
+        <p animate.enter="ui-enter-fade" class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">
+          {{ message() }}
+        </p>
       }
     </div>
   `,
@@ -2299,6 +2747,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
 
+const QUERY = '(prefers-reduced-motion: reduce)';
+/**
+ * A signal that follows the user's `prefers-reduced-motion` preference live.
+ * Call it in an injection context; the listener is removed with that context.
+ *
+ * @example
+ * protected readonly reduced = injectReducedMotion();
+ */
+function injectReducedMotion() {
+    if (typeof matchMedia === 'undefined') {
+        return signal(false).asReadonly();
+    }
+    const query = matchMedia(QUERY);
+    const reduced = signal(query.matches, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reduced" }] : /* istanbul ignore next */ []));
+    const listener = (event) => reduced.set(event.matches);
+    query.addEventListener('change', listener);
+    inject(DestroyRef).onDestroy(() => query.removeEventListener('change', listener));
+    return reduced.asReadonly();
+}
+
 const axisTicks = (points, maxTicks = 5) => {
     if (points.length <= maxTicks) {
         return [...points];
@@ -2441,6 +2910,23 @@ const buildGeometry = (points, width, height, padding = {}) => {
     };
 };
 
+const observeSize = (element, destroyRef, measured) => {
+    if (typeof ResizeObserver === 'undefined') {
+        return;
+    }
+    const { clientWidth: width, clientHeight: height } = element;
+    if (width > 0 && height > 0) {
+        measured({ width, height });
+    }
+    const observer = new ResizeObserver(([entry]) => {
+        if (entry) {
+            measured({ width: entry.contentRect.width, height: entry.contentRect.height });
+        }
+    });
+    observer.observe(element);
+    destroyRef.onDestroy(() => observer.disconnect());
+};
+
 const LINE_GAP = 6;
 const COLLISION_MARGIN = 6;
 const EDGE_TOLERANCE = 3;
@@ -2489,7 +2975,15 @@ const placeStartLabel = (points, startY, box, label) => {
 const TRANSITION_SAMPLES = 120;
 const TRANSITION_DURATION = 260;
 const easeOutQuint = (t) => 1 - (1 - t) ** 5;
-const prefersReducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+const durationFrom = (value) => {
+    const match = /^\s*([\d.]+)(ms|s)\s*$/.exec(value);
+    const duration = match ? Number(match[1]) * (match[2] === 's' ? 1000 : 1) : Number.NaN;
+    return Number.isFinite(duration) ? duration : TRANSITION_DURATION;
+};
+const sameSeries = (a, b) => a === b ||
+    (b !== null &&
+        a.length === b.length &&
+        a.every((point, index) => point.t === b[index].t && point.v === b[index].v));
 const monotoneTangents = (xs, ys) => {
     const n = xs.length;
     const slopes = [];
@@ -2545,15 +3039,85 @@ const sampleMonotone = (points, sampleXs) => {
         return (2 * f3 - 3 * f2 + 1) * y0 + (f3 - 2 * f2 + f) * m0 * dx + (-2 * f3 + 3 * f2) * y1 + (f3 - f2) * m1 * dx;
     });
 };
-const buildPolyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(' ');
-const interpolateLine = (from, to, progress) => {
-    const left = to.points[0].x;
-    const right = to.points.at(-1).x;
-    const samples = Array.from({ length: TRANSITION_SAMPLES }, (_, index) => left + ((right - left) * index) / (TRANSITION_SAMPLES - 1));
-    const fromYs = sampleMonotone(from.points, samples);
-    const toYs = sampleMonotone(to.points, samples);
-    return buildPolyline(samples, fromYs.map((fromY, index) => fromY + (toYs[index] - fromY) * progress));
+const polyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(' ');
+const shapeTransition = (from, to) => {
+    const left = to[0].x;
+    const right = to.at(-1).x;
+    const xs = Array.from({ length: TRANSITION_SAMPLES }, (_, index) => left + ((right - left) * index) / (TRANSITION_SAMPLES - 1));
+    return { xs, from: sampleMonotone(from, xs), to: sampleMonotone(to, xs) };
 };
+const shapeAt = (transition, progress) => transition.from.map((fromY, index) => fromY + (transition.to[index] - fromY) * progress);
+const animateShape = (from, to, duration, draw, done) => {
+    const transition = shapeTransition(from, to);
+    const start = performance.now();
+    let frame = 0;
+    const step = (now) => {
+        const t = Math.min(1, Math.max(0, (now - start) / duration));
+        if (t === 1) {
+            done();
+            return;
+        }
+        const ys = shapeAt(transition, easeOutQuint(t));
+        draw(transition.xs.map((x, index) => ({ x, y: ys[index] })), polyline(transition.xs, ys));
+        frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+};
+class ShapeMotion {
+    #view;
+    #points = null;
+    #target = null;
+    #held = null;
+    #drawn = null;
+    #stop = null;
+    constructor(view) {
+        this.#view = view;
+    }
+    follow(points, geometry, options) {
+        const newSeries = !sameSeries(points, this.#points);
+        this.#points = points;
+        if (this.#stop && !newSeries && !options.reduced && geometry?.line === this.#target?.line) {
+            this.#target = geometry;
+            return;
+        }
+        const from = this.#drawn;
+        const held = this.#held ?? this.#target;
+        this.#target = geometry;
+        this.stop();
+        if (!newSeries || !geometry || !from || from.length < 2 || geometry.points.length < 2 || options.reduced) {
+            this.#settle(geometry);
+            return;
+        }
+        const duration = options.duration();
+        if (duration <= 0) {
+            this.#settle(geometry);
+            return;
+        }
+        this.#hold(held);
+        this.#stop = animateShape(from, geometry.points, duration, (shape, line) => this.#draw(shape, line, shape.at(-1)), () => this.#settle(geometry));
+    }
+    stop() {
+        this.#stop?.();
+        this.#stop = null;
+    }
+    #hold(geometry) {
+        this.#held = geometry;
+        this.#view.hold(geometry);
+    }
+    #settle(geometry) {
+        this.#stop = null;
+        this.#hold(null);
+        this.#drawn = null;
+        if (geometry) {
+            this.#draw(geometry.points, geometry.line, geometry.end);
+        }
+    }
+    #draw(shape, line, end) {
+        this.#drawn = shape;
+        this.#view.draw(line, end);
+    }
+}
 
 const WIDE_QUERY = '(min-width: 64rem)';
 const wideViewport = () => {
@@ -2608,16 +3172,30 @@ class UiLineChart {
     ...(ngDevMode ? [{ debugName: "axisGap" }] : /* istanbul ignore next */ []));
     axisTicks = input('auto', { ...(ngDevMode ? { debugName: "axisTicks" } : /* istanbul ignore next */ {}), transform: parseAxisTicks });
     #destroyRef = inject(DestroyRef);
+    #host = inject(ElementRef);
     #wide = wideViewport();
-    #frame = null;
-    #hasRenderedOnce = false;
-    #previousGeometry = null;
+    #reducedMotion = injectReducedMotion();
+    #motion = new ShapeMotion({
+        hold: (geometry) => {
+            this.held.set(geometry);
+            this.activeIndex.update((index) => (geometry ? null : index));
+        },
+        draw: (line, end) => {
+            this.lineRef()?.nativeElement.setAttribute('d', line);
+            this.endRef()?.nativeElement.setAttribute('cx', String(end.x));
+            this.endRef()?.nativeElement.setAttribute('cy', String(end.y));
+        },
+    });
     svgRef = viewChild.required('svgRef', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
+    lineRef = viewChild('lineRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineRef" }] : /* istanbul ignore next */ []));
+    endRef = viewChild('endRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endRef" }] : /* istanbul ignore next */ []));
     activeIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    animatedLine = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "animatedLine" }] : /* istanbul ignore next */ []));
+    held = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
     measuredSize = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "measuredSize" }] : /* istanbul ignore next */ []));
     effectiveWidth = computed(() => this.measuredSize()?.width ?? DEFAULT_WIDTH, /* @ts-ignore */
@@ -2635,8 +3213,10 @@ class UiLineChart {
         return buildGeometry(this.points(), this.effectiveWidth(), plotHeight, { x: 0, top: padding, bottom: padding });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
-    displayLine = computed(() => this.animatedLine() ?? this.geometry().line, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayLine" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.held() ?? this.geometry(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    startFade = computed(() => this.held() ? 'opacity-0 duration-(--duration-exit)' : 'duration-(--duration-fast)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startFade" }] : /* istanbul ignore next */ []));
     ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
     tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), /* @ts-ignore */
@@ -2644,12 +3224,12 @@ class UiLineChart {
     active = computed(() => {
         const geometry = this.geometry();
         const index = this.activeIndex();
-        return geometry && index !== null ? geometry.points[index] : null;
+        return geometry && index !== null && !this.held() ? geometry.points[index] : null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     startLabelInfo = computed(() => {
         const text = this.startLabel();
-        const geometry = this.geometry();
+        const geometry = this.shown();
         if (!text || !geometry) {
             return null;
         }
@@ -2659,63 +3239,21 @@ class UiLineChart {
         return { label, placement: { ...placement, y: startLabelBaseline(placement.y) } };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startLabelInfo" }] : /* istanbul ignore next */ []));
-    #renderRef = afterNextRender(() => this.#observeSize());
+    #renderRef = afterNextRender(() => {
+        this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
+        observeSize(this.svgRef().nativeElement, this.#destroyRef, (size) => this.measuredSize.set(size));
+    });
     constructor() {
         effect(() => {
+            const points = this.points();
             const geometry = this.geometry();
-            const previous = this.#previousGeometry;
-            if (previous === geometry) {
-                return;
-            }
-            this.#previousGeometry = geometry;
-            this.#cancelAnimation();
-            if (!this.#hasRenderedOnce) {
-                this.#hasRenderedOnce = true;
-                return;
-            }
-            if (!previous || !geometry) {
-                this.animatedLine.set(null);
-                return;
-            }
-            if (prefersReducedMotion()) {
-                this.animatedLine.set(null);
-                return;
-            }
-            this.#animate(previous, geometry);
-        });
-        this.#destroyRef.onDestroy(() => this.#cancelAnimation());
-    }
-    #observeSize() {
-        this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const element = this.svgRef().nativeElement;
-        const observer = new ResizeObserver(([entry]) => {
-            if (entry) {
-                const { width, height } = entry.contentRect;
-                this.measuredSize.set({ width, height });
-            }
+            const reduced = this.#reducedMotion();
+            untracked(() => this.#motion.follow(points, geometry, {
+                reduced,
+                duration: () => durationFrom(getComputedStyle(this.#host.nativeElement).getPropertyValue('--duration-base')),
+            }));
         });
-        observer.observe(element);
-        this.#destroyRef.onDestroy(() => observer.disconnect());
-    }
-    #cancelAnimation() {
-        cancelAnimationFrame(this.#frame ?? 0);
-        this.#frame = null;
-    }
-    #animate(from, to) {
-        if (from.points.length < 2 || to.points.length < 2) {
-            this.animatedLine.set(null);
-            return;
-        }
-        const startTime = performance.now();
-        const step = (now) => {
-            const t = Math.min(1, (now - startTime) / TRANSITION_DURATION);
-            this.animatedLine.set(t < 1 ? interpolateLine(from, to, easeOutQuint(t)) : null);
-            this.#frame = t < 1 ? requestAnimationFrame(step) : null;
-        };
-        this.#frame = requestAnimationFrame(step);
+        this.#destroyRef.onDestroy(() => this.#motion.stop());
     }
     deltaFor(point) {
         return point.v - this.points()[0].v;
@@ -2751,7 +3289,7 @@ class UiLineChart {
         this.activeIndex.set(navigation.index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormat: { classPropertyName: "tooltipFormat", publicName: "tooltipFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormat: { classPropertyName: "tooltipFormat", publicName: "tooltipFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }, { propertyName: "lineRef", first: true, predicate: ["lineRef"], descendants: true, isSignal: true }, { propertyName: "endRef", first: true, predicate: ["endRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative h-full">
       <svg
         #svgRef
@@ -2766,48 +3304,52 @@ class UiLineChart {
         (pointerleave)="onPointerLeave()"
         (pointermove)="onPointerMove($event)"
       >
-        @if (geometry(); as geometry) {
+        @if (shown(); as shape) {
           <path
+            #lineRef
             class="stroke-(--foreground)"
             data-chart-line
             fill="none"
             stroke-linecap="round"
             stroke-linejoin="round"
-            [attr.d]="displayLine()"
+            [attr.d]="shape.line"
             [attr.stroke-width]="sparkline() ? 1.5 : 2"
           />
 
           @if (!sparkline()) {
             <line
-              class="stroke-(--border)"
+              class="stroke-(--border) transition-opacity ease-(--ease-out)"
               data-chart-start-line
               stroke-dasharray="3 4"
               stroke-width="1"
               x1="0"
               [attr.x2]="effectiveWidth()"
-              [attr.y1]="geometry.start.y"
-              [attr.y2]="geometry.start.y"
+              [attr.y1]="shape.start.y"
+              [attr.y2]="shape.start.y"
+              [class]="startFade()"
             />
 
             @if (startLabelInfo(); as info) {
               <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
+                class="text-caption fill-(--subtle-foreground) tabular-nums transition-opacity ease-(--ease-out)"
                 data-chart-start-label
                 [attr.text-anchor]="info.placement.anchor"
                 [attr.x]="info.placement.x"
                 [attr.y]="info.placement.y"
+                [class]="startFade()"
               >
                 {{ info.label }}
               </text>
             }
 
             <circle
+              #endRef
               class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
               data-chart-end
               r="4"
               stroke-width="6"
-              [attr.cx]="geometry.end.x"
-              [attr.cy]="geometry.end.y"
+              [attr.cx]="shape.end.x"
+              [attr.cy]="shape.end.y"
             />
 
             @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
@@ -2908,48 +3450,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         (pointerleave)="onPointerLeave()"
         (pointermove)="onPointerMove($event)"
       >
-        @if (geometry(); as geometry) {
+        @if (shown(); as shape) {
           <path
+            #lineRef
             class="stroke-(--foreground)"
             data-chart-line
             fill="none"
             stroke-linecap="round"
             stroke-linejoin="round"
-            [attr.d]="displayLine()"
+            [attr.d]="shape.line"
             [attr.stroke-width]="sparkline() ? 1.5 : 2"
           />
 
           @if (!sparkline()) {
             <line
-              class="stroke-(--border)"
+              class="stroke-(--border) transition-opacity ease-(--ease-out)"
               data-chart-start-line
               stroke-dasharray="3 4"
               stroke-width="1"
               x1="0"
               [attr.x2]="effectiveWidth()"
-              [attr.y1]="geometry.start.y"
-              [attr.y2]="geometry.start.y"
+              [attr.y1]="shape.start.y"
+              [attr.y2]="shape.start.y"
+              [class]="startFade()"
             />
 
             @if (startLabelInfo(); as info) {
               <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
+                class="text-caption fill-(--subtle-foreground) tabular-nums transition-opacity ease-(--ease-out)"
                 data-chart-start-label
                 [attr.text-anchor]="info.placement.anchor"
                 [attr.x]="info.placement.x"
                 [attr.y]="info.placement.y"
+                [class]="startFade()"
               >
                 {{ info.label }}
               </text>
             }
 
             <circle
+              #endRef
               class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
               data-chart-end
               r="4"
               stroke-width="6"
-              [attr.cx]="geometry.end.x"
-              [attr.cy]="geometry.end.y"
+              [attr.cx]="shape.end.x"
+              [attr.cy]="shape.end.y"
             />
 
             @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
@@ -3034,12 +3580,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         class: 'block h-full',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], tooltipFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], tooltipFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }], lineRef: [{ type: i0.ViewChild, args: ['lineRef', { isSignal: true }] }], endRef: [{ type: i0.ViewChild, args: ['endRef', { isSignal: true }] }] } });
 
-const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';
-const SHEET_CLASSES = 'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4';
-const SHEET_ITEM_CLASSES = 'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';
-const ITEM_CLASSES = 'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';
+const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,scale,overlay,display] transition-discrete duration-(--duration-fast) not-open:duration-[120ms] ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';
+const SHEET_CLASSES = 'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4 max-lg:motion-reduce:translate-y-0 max-lg:motion-reduce:starting:open:translate-y-0';
+const SHEET_ITEM_CLASSES = 'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';
+const ITEM_CLASSES = 'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) transition-[background-color] duration-(--duration-fast) ease-out outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';
 const nextId$1 = (() => {
     let count = 0;
     return () => `ui-menu-${++count}`;
@@ -3341,7 +3887,369 @@ 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 }] }] } });
 
-const BASE_CLASSES$1 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label leading-normal font-medium transition-colors duration-(--duration-press) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+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);
+    if (Number.isNaN(value)) {
+        return fallback;
+    }
+    return raw.endsWith('ms') ? value : value * 1000;
+}
+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 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.tops = this.measure();
+    });
+    running = new Map();
+    watched = new Set();
+    items = inject(FlipItems, { self: true });
+    tops = new Map();
+    shifts = new Map();
+    constructor() {
+        afterNextRender(() => {
+            this.tops = this.measure();
+            this.mutations.observe(this.host, { childList: true, subtree: true });
+            this.resizes.observe(this.host);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.mutations.disconnect();
+            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 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 [moving, shift] of this.shifts) {
+            for (const [element, top] of tops) {
+                if (moving.contains(element)) {
+                    tops.set(element, top - shift);
+                }
+            }
+        }
+        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);
+            }
+        }
+        return tops;
+    }
+    onChange() {
+        const before = this.tops;
+        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');
+        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 = 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]", 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: () => [] });
+
+const HOLD_MS = 200;
+const SCROLL_SETTLE_MS = 200;
+const SCROLL_START_MS = 300;
+function paintedElements(host) {
+    if (host.tagName === 'TR') {
+        return Array.from(host.children).filter((cell) => cell instanceof HTMLElement);
+    }
+    if (host.hasAttribute('ui-group-cell') && host.firstElementChild instanceof HTMLElement) {
+        return [host.firstElementChild];
+    }
+    return [host];
+}
+/**
+ * Draws the eye to an element that just changed: scrolls it into view when it is off screen, holds the
+ * `--soft` fill for 200 ms, then fades back to the element's own background over `--duration-highlight`.
+ * Each new non-null token plays once, so pass a fresh value per event (an object or a counter), not a
+ * boolean. A non-null token already present at first render plays on arrival. On a `tr` it paints the
+ * 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
+ * `afterNextRender`) and set the token afterwards: a token present at first render scrolls smoothly
+ * from where the page is.
+ *
+ * @example
+ * <a ui-row [uiHighlight]="changed() === holding.id ? token() : null" routerLink="/holdings/1">...</a>
+ */
+class UiHighlight {
+    uiHighlight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiHighlight" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef).nativeElement;
+    reduced = injectReducedMotion();
+    cancel = null;
+    constructor() {
+        effect(() => {
+            const token = this.uiHighlight();
+            if (token === null || token === undefined) {
+                return;
+            }
+            untracked(() => this.play());
+        });
+        inject(DestroyRef).onDestroy(() => this.cancel?.());
+    }
+    play() {
+        this.cancel?.();
+        if (this.isVisible()) {
+            this.cancel = this.flash();
+            return;
+        }
+        const reduced = this.reduced();
+        this.host.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center' });
+        if (reduced) {
+            this.cancel = this.flash();
+            return;
+        }
+        let stopFlash = null;
+        let timer;
+        const moves = (event) => event.target === document || (event.target instanceof Node && event.target.contains(this.host));
+        const start = () => {
+            stopListening();
+            stopFlash = this.flash();
+        };
+        const onScrollEnd = (event) => {
+            if (moves(event)) {
+                start();
+            }
+        };
+        const onScroll = (event) => {
+            if (moves(event)) {
+                clearTimeout(timer);
+                timer = setTimeout(start, SCROLL_SETTLE_MS);
+            }
+        };
+        const stopListening = () => {
+            clearTimeout(timer);
+            window.removeEventListener('scrollend', onScrollEnd, true);
+            window.removeEventListener('scroll', onScroll, true);
+        };
+        timer = setTimeout(start, SCROLL_START_MS);
+        window.addEventListener('scrollend', onScrollEnd, true);
+        window.addEventListener('scroll', onScroll, true);
+        this.cancel = () => {
+            stopListening();
+            stopFlash?.();
+        };
+    }
+    isVisible() {
+        const rect = this.host.getBoundingClientRect();
+        const style = getComputedStyle(this.host);
+        const top = parseFloat(style.scrollMarginTop) || 0;
+        const bottom = parseFloat(style.scrollMarginBottom) || 0;
+        return rect.top >= top && rect.bottom <= window.innerHeight - bottom;
+    }
+    flash() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiHighlight, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiHighlight]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { uiHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiHighlight", required: false }] }] } });
+
+const BASE_CLASSES$2 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label leading-normal font-medium transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out active:scale-(--press-scale) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
 const ACTIVE_CLASSES = 'bg-(--soft) text-(--foreground)';
 const IDLE_CLASSES = 'text-(--muted-foreground) active:bg-(--soft)';
 /**
@@ -3355,7 +4263,7 @@ const IDLE_CLASSES = 'text-(--muted-foreground) active:bg-(--soft)';
  */
 class UiNavItem {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => `${BASE_CLASSES$1} ${this.active() ? ACTIVE_CLASSES : IDLE_CLASSES}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$2} ${this.active() ? ACTIVE_CLASSES : IDLE_CLASSES}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiNavItem, isStandalone: true, selector: "a[ui-nav-item]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "active() ? 'page' : null" } }, ngImport: i0, template: '<ng-content select="[navIcon]" /><ng-content />', isInline: true });
@@ -3384,10 +4292,12 @@ const SIZE_CLASSES$1 = {
 };
 const SIZE_GAPS = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };
 const PADDING_CLASSES = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };
-const BASE_CLASSES = 'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation transition-colors duration-(--duration-press) hover:bg-(--glow) active:bg-(--soft) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const BASE_CLASSES$1 = 'flex w-full items-center py-1.5 rounded-control text-left select-none touch-manipulation focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const INTERACTIVE_CLASSES = 'transition-[scale,background-color] [transition-duration:var(--duration-press),var(--duration-fast)] ease-out hover:bg-(--glow) active:bg-(--soft) active:scale-(--press-scale)';
+const UNAVAILABLE_CLASSES = 'opacity-50 cursor-not-allowed';
 const SELECTED_CLASSES$1 = 'bg-(--soft)';
 /**
- * Clickable row of a list: a holding, an envelope, an account.
+ * Clickable row of a list: a holding, an account, a search result.
  *
  * @example
  * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
@@ -3396,28 +4306,59 @@ const SELECTED_CLASSES$1 = 'bg-(--soft)';
  */
 class UiRow {
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    unavailable = input(false, { ...(ngDevMode ? { debugName: "unavailable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     padding = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     gap = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES$1[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}${this.selected() ? ` ${SELECTED_CLASSES$1}` : ''}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$1} ${SIZE_CLASSES$1[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}${this.unavailable() ? ` ${UNAVAILABLE_CLASSES}` : ` ${INTERACTIVE_CLASSES}`}${this.selected() ? ` ${SELECTED_CLASSES$1}` : ''}${this.busy() ? ' pointer-events-none' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const host = inject(ElementRef).nativeElement;
+        const guard = (event) => {
+            if (this.busy() || this.unavailable()) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        };
+        host.addEventListener('click', guard, { capture: true });
+        inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiRow, isStandalone: true, selector: "a[ui-row], button[ui-row]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "selected() ? 'true' : null" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiRow, isStandalone: true, selector: "a[ui-row], button[ui-row]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, unavailable: { classPropertyName: "unavailable", publicName: "unavailable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "busy() || null", "attr.aria-disabled": "busy() || unavailable() ? 'true' : null", "attr.aria-current": "selected() ? 'true' : null" } }, ngImport: i0, template: `
+    <ng-content />
+    @if (busy()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent"
+      ></span>
+    }
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[ui-row], button[ui-row]',
-                    template: '<ng-content />',
+                    template: `
+    <ng-content />
+    @if (busy()) {
+      <span
+        aria-hidden="true"
+        class="rounded-pill animate-cairn-spin size-4 flex-none border-2 border-current border-r-transparent"
+      ></span>
+    }
+  `,
                     host: {
                         '[class]': 'classes()',
+                        '[attr.aria-busy]': 'busy() || null',
+                        '[attr.aria-disabled]': "busy() || unavailable() ? 'true' : null",
                         '[attr.aria-current]': "selected() ? 'true' : null",
                     },
                 }]
-        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], unavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
 /**
  * Lays out a `ui-row` with a trailing action beside it, such as a "more" icon button: the row takes
  * the room the action leaves and the action keeps its own size.
@@ -3496,7 +4437,7 @@ const nextId = (() => {
     let count = 0;
     return () => `ui-segmented-${++count}`;
 })();
-const OPTION_CLASSES = "relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)";
+const OPTION_CLASSES = "relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale,color] duration-(--duration-press) ease-out after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) active:scale-(--press-scale)";
 const SEGMENTED_SIZES = ['md', 'sm'];
 const SIZE_CLASSES = {
     md: 'h-10 pointer-fine:h-8',
@@ -3731,11 +4672,13 @@ class UiSkeleton {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: "\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"block rounded-control bg-(--muted) h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"block rounded-control bg-(--muted) h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"block rounded-control bg-(--muted) h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"block rounded-control bg-(--muted) h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('dot') {\n        <span class=\"rounded-pill size-3 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"block rounded-control bg-(--muted)\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  ", isInline: true, styles: ["@keyframes cairn-pulse{0%{opacity:1}to{opacity:.45}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: "\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"block rounded-control bg-(--muted) h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"block rounded-control bg-(--muted) h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"block rounded-control bg-(--muted) h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"block rounded-control bg-(--muted) h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('dot') {\n        <span class=\"rounded-pill size-3 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"block rounded-control bg-(--muted)\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  ", isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSkeleton, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-skeleton', template: `
+            args: [{
+                    selector: 'ui-skeleton',
+                    template: `
     @switch (shape()) {
       @case ('figure') {
         <span class="${BAR_CLASSES} h-10 w-65" [style.animation]="animation"></span>
@@ -3774,12 +4717,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       }
     }
-  `, host: {
+  `,
+                    host: {
                         'aria-hidden': 'true',
                         class: 'flex flex-col gap-2',
-                    }, styles: ["@keyframes cairn-pulse{0%{opacity:1}to{opacity:.45}}\n"] }]
+                    },
+                }]
         }], 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 = "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
+ * "1 ligne sans cours, non comptée". Caption size, weight 500, underlined on hover, with an optional
+ * trailing chevron.
+ *
+ * @example
+ * <a uiStaleLink chevron routerLink="/holdings">1 cours en retard</a>
+ */
+class UiStaleLink {
+    chevron = input(false, { ...(ngDevMode ? { debugName: "chevron" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => (this.chevron() ? `${BASE_CLASSES} ${CHEVRON_CLASSES}` : BASE_CLASSES), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStaleLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiStaleLink, isStandalone: true, selector: "a[uiStaleLink]", inputs: { chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStaleLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[uiStaleLink]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }] } });
+
 /** Available stat sizes. `StatSize` is derived from this tuple. */
 const STAT_SIZES = ['hero', 'tile'];
 const VALUE_CLASSES = {
@@ -3867,7 +4837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
-const CLASSES = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
+const CLASSES = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
 /**
  * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
  * 51 by 31 on touch, 40 by 24 with a mouse.
@@ -3891,11 +4861,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 
-const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+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>
@@ -3903,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 });
 }
@@ -3915,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`.
  *
@@ -3947,6 +4926,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
+/**
+ * One-slot confirmation message queue read by `ui-toaster`.
+ *
+ * @example
+ * inject(UiToasts).show('Achat enregistré');
+ */
+class UiToasts {
+    current = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    sequence = 0;
+    toast = this.current.asReadonly();
+    show(message) {
+        this.current.set({ id: ++this.sequence, text: message });
+    }
+    dismiss() {
+        this.current.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToasts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToasts, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToasts, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const DEFAULT_DURATION = 5000;
+const TOAST_CLASSES = 'pointer-events-auto max-w-[min(28rem,calc(100vw-2rem))] rounded-container bg-(--elevated) px-4 py-3 text-label text-(--foreground) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] transition-[opacity,translate] duration-(--duration-base) ease-out starting:opacity-0 starting:translate-y-2 motion-reduce:starting:translate-y-0';
+const readDuration = (host) => {
+    const raw = getComputedStyle(host).getPropertyValue('--toast-duration').trim();
+    const value = parseFloat(raw);
+    if (Number.isNaN(value)) {
+        return DEFAULT_DURATION;
+    }
+    return raw.endsWith('ms') ? value : value * 1000;
+};
+/**
+ * Confirmation message shown by `UiToasts.show`: one at a time, no action, gone after `--toast-duration`.
+ * Place it once in the app shell.
+ *
+ * @example
+ * <ui-toaster />
+ */
+class UiToaster {
+    toasts = inject(UiToasts);
+    toastClasses = TOAST_CLASSES;
+    host = inject(ElementRef).nativeElement;
+    hovered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    lastId = 0;
+    remaining = DEFAULT_DURATION;
+    startedAt = 0;
+    timer;
+    constructor() {
+        effect(() => {
+            const toast = this.toasts.toast();
+            const paused = this.hovered() || this.focused();
+            untracked(() => {
+                if (!toast) {
+                    this.stop();
+                    this.hovered.set(false);
+                    this.focused.set(false);
+                    return;
+                }
+                this.host.querySelectorAll('.ui-leave-fade').forEach((leaving) => leaving.remove());
+                if (paused) {
+                    this.pause();
+                }
+                else {
+                    this.resume(toast.id);
+                }
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this.stop());
+    }
+    setHovered(value) {
+        this.hovered.set(value);
+    }
+    setFocused(value) {
+        this.focused.set(value);
+    }
+    resume(id) {
+        if (id !== this.lastId) {
+            this.lastId = id;
+            this.remaining = readDuration(this.host);
+        }
+        clearTimeout(this.timer);
+        this.startedAt = Date.now();
+        this.timer = setTimeout(() => this.toasts.dismiss(), this.remaining);
+    }
+    pause() {
+        if (this.timer !== undefined) {
+            this.remaining -= Date.now() - this.startedAt;
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+    }
+    stop() {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        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(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"
+        [class]="toastClasses"
+        (focusin)="setFocused(true)"
+        (focusout)="setFocused(false)"
+        (mouseenter)="setHovered(true)"
+        (mouseleave)="setHovered(false)"
+      >
+        {{ toast.text }}
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToaster, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toaster',
+                    template: `
+    @if (toasts.toast(); as toast) {
+      <div
+        animate.leave="ui-leave-fade"
+        [class]="toastClasses"
+        (focusin)="setFocused(true)"
+        (focusout)="setFocused(false)"
+        (mouseenter)="setHovered(true)"
+        (mouseleave)="setHovered(false)"
+      >
+        {{ toast.text }}
+      </div>
+    }
+  `,
+                    host: {
+                        role: 'status',
+                        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: () => [] });
+
 /** Breakpoints a secondary column can be held back until. */
 const CELL_BREAKPOINTS = ['md', 'lg'];
 /** Body row heights. */
@@ -4030,8 +5153,10 @@ class UiTr {
         return [
             'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',
             this.selected() ? '[&>td]:bg-(--soft)' : '',
-            'hover:[&>td]:bg-(--glow)',
-            this.interactive() ? 'active:[&>td]:bg-(--soft)' : '',
+            'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',
+            this.interactive()
+                ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'
+                : '',
         ]
             .filter(Boolean)
             .join(' ');
@@ -4261,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_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, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+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