@joanroucoux/cairn-ui 0.7.0 → 0.7.2

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -4,10 +4,10 @@ import { inject, ElementRef, DestroyRef, afterNextRender, Component, input, bool
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, line } from 'd3-shape';
 
-const HEIGHT_PROPERTY = '--action-bar-height';
+const HEIGHT_PROPERTY$1 = '--action-bar-height';
 /**
  * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
- * thumb reach. It sits 52px plus the safe area above the bottom edge, so it clears `ui-tab-bar`, and
+ * thumb reach. It sits `--tab-bar-height` (52px plus the safe area) above the bottom edge, so it clears `ui-tab-bar`, and
  * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
  * width equally. While it is on the page it publishes its height as `--action-bar-height` on the
  * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.
@@ -23,7 +23,7 @@ class UiActionBar {
         const host = inject(ElementRef).nativeElement;
         const root = inject(DOCUMENT).documentElement;
         const destroyRef = inject(DestroyRef);
-        const publish = () => root.style.setProperty(HEIGHT_PROPERTY, `${host.offsetHeight}px`);
+        const publish = () => root.style.setProperty(HEIGHT_PROPERTY$1, `${host.offsetHeight}px`);
         afterNextRender(() => {
             publish();
             if (typeof ResizeObserver !== 'undefined') {
@@ -32,10 +32,10 @@ class UiActionBar {
                 destroyRef.onDestroy(() => observer.disconnect());
             }
         });
-        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+        destroyRef.onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY$1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, decorators: [{
             type: Component,
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'ui-action-bar',
                     template: '<ng-content />',
                     host: {
-                        class: 'fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
+                        class: 'fixed inset-x-0 bottom-[var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -273,6 +273,29 @@ 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 }] }] } });
 
+/**
+ * Holds the transitions of the host and of everything inside it until two frames after its first
+ * render, through the `data-ui-settling` attribute and the matching rule of `styles/motion.css`.
+ * A route's elements are created a tick before their classes are bound; a layout read in between
+ * would otherwise turn the bound fill, colour or switch track into a transition on page open. Call it
+ * in an injection context. A host whose view is never refreshed (a detached change detector) keeps the
+ * attribute, and with it no transition.
+ *
+ * @example
+ * constructor() {
+ *   holdTransitionsUntilRendered();
+ * }
+ */
+function holdTransitionsUntilRendered() {
+    const host = inject(ElementRef).nativeElement;
+    host.setAttribute('data-ui-settling', '');
+    afterNextRender({
+        read: () => {
+            requestAnimationFrame(() => requestAnimationFrame(() => host.removeAttribute('data-ui-settling')));
+        },
+    });
+}
+
 const SKELETON_DELAY_MS = 150;
 const SKELETON_MIN_MS = 400;
 /**
@@ -332,7 +355,7 @@ const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'];
 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-[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_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] [transition-duration:var(--duration-press),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';
@@ -440,6 +463,9 @@ class UiAsync {
         return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "retryButtonClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     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 (shown()) {
@@ -540,12 +566,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class.flex-col]': 'filling()',
                     },
                 }]
-        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'];
 const BASE_CLASSES$8 = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
-const SIZE_CLASSES$7 = {
+const SIZE_CLASSES$8 = {
     sm: 'size-8 text-caption',
     md: 'size-[34px] text-label',
     lg: 'size-14 text-title',
@@ -564,7 +590,7 @@ class UiAvatar {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$8} ${SIZE_CLASSES$7[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$8} ${SIZE_CLASSES$8[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 });
@@ -584,21 +610,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /**
  * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
  * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
- * sets through `ariaCurrentWhenActive`) it holds a soft halo. The avatar itself keeps its own size.
+ * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar
+ * itself keeps its own size.
  *
  * @example
  * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
  */
 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-[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 });
+    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-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--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-[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)',
+                        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-transparent aria-[current=page]:bg-[image:linear-gradient(var(--soft),var(--soft))] active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
                     },
                 }]
         }] });
@@ -606,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** Available back link sizes. `BackLinkSize` is derived from this tuple. */
 const BACK_LINK_SIZES = ['md', 'sm', 'header'];
 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 = {
+const SIZE_CLASSES$7 = {
     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',
     header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',
@@ -623,8 +650,11 @@ 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$7} ${SIZE_CLASSES$6[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$7} ${SIZE_CLASSES$7[this.size()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     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: `
     <svg
@@ -667,13 +697,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes()',
                     },
                 }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
 const BADGE_VARIANTS = ['neutral', 'outline'];
 const BADGE_SIZES = ['md', 'sm'];
 const BASE_CLASSES$6 = 'inline-flex items-center rounded-pill text-caption font-medium';
-const SIZE_CLASSES$5 = {
+const SIZE_CLASSES$6 = {
     md: 'h-6 px-2.5',
     sm: 'h-[22px] px-2',
 };
@@ -692,7 +722,7 @@ class UiBadge {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$5[this.size()]} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$6[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 });
@@ -735,7 +765,7 @@ const BUTTON_SIZES = [
     'icon',
     'icon-sm',
 ];
-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 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] [transition-duration:var(--duration-press),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)';
@@ -750,7 +780,7 @@ const VARIANT_CLASSES$1 = {
     'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,
     'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,
 };
-const SIZE_CLASSES$4 = {
+const SIZE_CLASSES$5 = {
     compact: 'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',
     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',
@@ -780,9 +810,10 @@ 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$5} ${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$5[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
+        holdTransitionsUntilRendered();
         const host = inject(ElementRef).nativeElement;
         const guard = (event) => {
             if (this.inactive()) {
@@ -1220,7 +1251,7 @@ const DELTA_SIZES = ['label', 'inherit'];
 /** Font weights. `DeltaWeight` is derived from this tuple. */
 const DELTA_WEIGHTS = ['medium', 'regular'];
 const BASE_CLASSES$3 = 'inline-flex items-center gap-1 tabular-nums';
-const SIZE_CLASSES$3 = {
+const SIZE_CLASSES$4 = {
     label: 'text-label',
     inherit: '',
 };
@@ -1276,7 +1307,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$3} ${SIZE_CLASSES$3[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${TEXT_CLASSES[sign]} ${background}`;
+        return `${BASE_CLASSES$3} ${SIZE_CLASSES$4[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 });
@@ -1441,11 +1472,13 @@ class SheetDrag {
     #panel;
     #grips;
     #dismiss;
+    #enabled;
     #gesture = null;
-    constructor(panel, grips, dismiss) {
+    constructor(panel, grips, dismiss, enabled) {
         this.#panel = panel;
         this.#grips = grips;
         this.#dismiss = dismiss;
+        this.#enabled = enabled;
         for (const grip of grips) {
             grip.addEventListener('pointerdown', this.#onDown);
             grip.addEventListener('pointermove', this.#onMove);
@@ -1468,7 +1501,7 @@ class SheetDrag {
     }
     #onDown = (event) => {
         const grip = event.currentTarget;
-        if (event.button !== 0 || !isSheet() || event.target.closest(CONTROLS)) {
+        if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) {
             return;
         }
         grip.setPointerCapture(event.pointerId);
@@ -1602,6 +1635,9 @@ const nextId$3 = (() => {
 /**
  * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
  *
+ * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
+ * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
+ *
  * @example
  * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
  *   <p>Body</p>
@@ -1622,6 +1658,7 @@ class UiDialog {
     width = input('lg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dismissed = output();
     closed = output();
     headingId = nextId$3();
@@ -1647,7 +1684,7 @@ class UiDialog {
     ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
     titleClasses = computed(() => this.spec().title, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
+    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "crossClasses" }] : /* istanbul ignore next */ []));
     iconClasses = computed(() => this.spec().icon, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
@@ -1661,7 +1698,7 @@ class UiDialog {
         afterNextRender(() => {
             const host = this.#host.nativeElement;
             const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map((grip) => host.querySelector(grip));
-            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'));
+            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'), () => !this.busy());
             destroyRef.onDestroy(() => {
                 this.#drag?.destroy();
                 this.#cancelExit();
@@ -1703,13 +1740,20 @@ class UiDialog {
             return;
         }
         event.preventDefault();
-        this.close('escape');
+        if (!this.busy()) {
+            this.close('escape');
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.busy()) {
+            event.preventDefault();
+        }
     }
     onPointerDown(event) {
         this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);
     }
     onClick(event) {
-        if (this.#pressedOnBackdrop && event.target === this.#dialog && this.#outside(event)) {
+        if (this.#pressedOnBackdrop && !this.busy() && event.target === this.#dialog && this.#outside(event)) {
             this.close('backdrop');
         }
         this.#pressedOnBackdrop = false;
@@ -1722,11 +1766,16 @@ class UiDialog {
         return (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
     }
     onNativeClose() {
-        const reason = this.#reason ?? 'escape';
+        const asked = this.#reason;
         this.#reason = null;
         if (this.#dialog.open) {
             return;
         }
+        if (asked === null && this.busy()) {
+            this.#dialog.showModal();
+            return;
+        }
+        const reason = asked ?? 'escape';
         if (reason !== 'programmatic') {
             this.dismissed.emit();
         }
@@ -1741,9 +1790,10 @@ class UiDialog {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" } }, ngImport: i0, template: `
     <dialog
       #dlg
+      [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
@@ -1777,7 +1827,13 @@ class UiDialog {
         </div>
 
         @if (closeLabel()) {
-          <button type="button" [attr.aria-label]="closeLabel()" [class]="crossClasses()" (click)="close('cross')">
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
             <svg
               aria-hidden="true"
               class="block size-[22px] fill-none stroke-current stroke-[1.75]"
@@ -1815,9 +1871,14 @@ class UiDialog {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dialog', host: { '(pointerdown)': 'onPointerDown($event)', '(click)': 'onClick($event)' }, template: `
+            args: [{ selector: 'ui-dialog', host: {
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: `
     <dialog
       #dlg
+      [attr.aria-busy]="busy() || null"
       [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
@@ -1851,7 +1912,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
 
         @if (closeLabel()) {
-          <button type="button" [attr.aria-label]="closeLabel()" [class]="crossClasses()" (click)="close('cross')">
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
             <svg
               aria-hidden="true"
               class="block size-[22px] fill-none stroke-current stroke-[1.75]"
@@ -1886,7 +1953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
     </dialog>
   `, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const RADIUS = 78;
 const RING_WIDTH = 30;
@@ -2323,7 +2390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 const FACT_SIZES = ['md', 'sm', 'auto', 'recap'];
 /** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
 const FACT_SUB_TONES = ['subtle', 'stale'];
-const SIZE_CLASSES$2 = {
+const SIZE_CLASSES$3 = {
     md: { row: 'gap-4 py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },
     sm: { row: 'gap-4 py-2.5', value: 'text-label' },
     auto: {
@@ -2375,9 +2442,9 @@ class UiFact {
     ...(ngDevMode ? [{ debugName: "subTone" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `flex items-baseline justify-between ${SIZE_CLASSES$2[this.size()].row}`, /* @ts-ignore */
+    classes = computed(() => `flex items-baseline justify-between ${SIZE_CLASSES$3[this.size()].row}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    valueClasses = computed(() => `${SIZE_CLASSES$2[this.size()].value} tabular-nums`, /* @ts-ignore */
+    valueClasses = computed(() => `${SIZE_CLASSES$3[this.size()].value} tabular-nums`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
     subClasses = computed(() => `text-caption ${SUB_TONE_CLASSES$1[this.subTone()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "subClasses" }] : /* istanbul ignore next */ []));
@@ -3031,6 +3098,7 @@ const animateShape = (from, to, duration, draw, done) => {
 class ShapeMotion {
     #view;
     #points = null;
+    #rangeKey = null;
     #target = null;
     #held = null;
     #drawn = null;
@@ -3040,7 +3108,11 @@ class ShapeMotion {
     }
     follow(points, geometry, options) {
         const newSeries = !sameSeries(points, this.#points);
+        const newRange = options.rangeKey === null || options.rangeKey !== this.#rangeKey;
         this.#points = points;
+        if (newSeries) {
+            this.#rangeKey = options.rangeKey;
+        }
         if (this.#stop && !newSeries && !options.reduced && geometry?.line === this.#target?.line) {
             this.#target = geometry;
             return;
@@ -3049,7 +3121,13 @@ class ShapeMotion {
         const held = this.#held ?? this.#target;
         this.#target = geometry;
         this.stop();
-        if (!newSeries || !geometry || !from || from.length < 2 || geometry.points.length < 2 || options.reduced) {
+        if (!newSeries ||
+            !newRange ||
+            !geometry ||
+            !from ||
+            from.length < 2 ||
+            geometry.points.length < 2 ||
+            options.reduced) {
             this.#settle(geometry);
             return;
         }
@@ -3104,6 +3182,10 @@ const wideViewport = () => {
  * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
  * three core ticks below it. Tick positions are unchanged.
  *
+ * A new series interpolates from the drawn curve, fading the start label and the dashed line. With
+ * `rangeKey` bound, only a series that comes with a new key does so: a new series under the same key
+ * (a reload after a buy) is drawn at once, with no fade. The key may change before its series arrives.
+ *
  * @example
  * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
  */
@@ -3135,6 +3217,8 @@ class UiLineChart {
     axisGap = input(12, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "axisGap" }] : /* istanbul ignore next */ []));
     axisTicks = input('auto', { ...(ngDevMode ? { debugName: "axisTicks" } : /* istanbul ignore next */ {}), transform: parseAxisTicks });
+    rangeKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeKey" }] : /* istanbul ignore next */ []));
     #destroyRef = inject(DestroyRef);
     #host = inject(ElementRef);
     #wide = wideViewport();
@@ -3214,6 +3298,7 @@ class UiLineChart {
             const reduced = this.#reducedMotion();
             untracked(() => this.#motion.follow(points, geometry, {
                 reduced,
+                rangeKey: this.rangeKey(),
                 duration: () => durationFrom(getComputedStyle(this.#host.nativeElement).getPropertyValue('--duration-base')),
             }));
         });
@@ -3253,7 +3338,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 }, { propertyName: "lineRef", first: true, predicate: ["lineRef"], descendants: true, isSignal: true }, { propertyName: "endRef", first: true, predicate: ["endRef"], 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 }, rangeKey: { classPropertyName: "rangeKey", publicName: "rangeKey", 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
@@ -3544,12 +3629,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 }] }], lineRef: [{ type: i0.ViewChild, args: ['lineRef', { isSignal: true }] }], endRef: [{ type: i0.ViewChild, args: ['endRef', { 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 }] }], rangeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeKey", 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,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 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 text-left whitespace-nowrap 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 text-left whitespace-nowrap 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}`;
@@ -3636,6 +3721,8 @@ class UiMenu {
             this.#host.style.position = '';
             this.#host.style.top = '';
             this.#host.style.left = '';
+            this.#host.style.right = '';
+            this.#host.style.bottom = '';
         }
         else {
             this.#position(trigger);
@@ -3695,13 +3782,15 @@ class UiMenu {
     #position(trigger) {
         const margin = 8;
         const triggerRect = trigger.getBoundingClientRect();
-        const menuRect = this.#host.getBoundingClientRect();
+        const menuRect = { width: this.#host.offsetWidth, height: this.#host.offsetHeight };
         const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;
         const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);
         const left = Math.min(Math.max(triggerRect.right - menuRect.width, margin), window.innerWidth - menuRect.width - margin);
         this.#host.style.position = 'fixed';
         this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;
         this.#host.style.left = `${left}px`;
+        this.#host.style.right = 'auto';
+        this.#host.style.bottom = 'auto';
         this.#host.style.transformOrigin = fitsBelow ? 'top right' : 'bottom right';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3851,6 +3940,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+class FlipItems {
+    items = new Set();
+    destroyed = new Set();
+    used = false;
+    get marked() {
+        return this.used;
+    }
+    add(item) {
+        this.used = true;
+        this.items.add(item);
+    }
+    remove(item) {
+        this.destroyed.add(item);
+    }
+    inside(host) {
+        const inside = [];
+        for (const item of this.items) {
+            if (host.contains(item)) {
+                inside.push(item);
+            }
+            else if (this.destroyed.has(item)) {
+                this.items.delete(item);
+                this.destroyed.delete(item);
+            }
+        }
+        return inside;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, decorators: [{
+            type: Injectable
+        }] });
+
 function readDuration$1(element, name, fallback) {
     const raw = getComputedStyle(element).getPropertyValue(name).trim();
     const value = parseFloat(raw);
@@ -3863,31 +3986,57 @@ function readEasing(element, name, fallback) {
     return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
 }
 
+function translateY(element) {
+    const matrix = /^matrix\((.+)\)$/.exec(getComputedStyle(element).transform);
+    return matrix ? parseFloat(matrix[1].split(',')[5]) : 0;
+}
 /**
- * Slides the remaining children of a list into place when one is removed or inserted (FLIP): it
- * measures every child before and after the change, then animates the shift in `translateY` over
- * `--duration-base` `--ease-out`. Pair it with `animate.leave="ui-leave-fade"` on the item so it fades
+ * Slides the items of a list into place when one is removed or inserted (FLIP): it measures every item
+ * before and after the change, from the top of the list itself, then animates the shift in `translateY`
+ * over `--duration-base` `--ease-out`. Pair it with `animate.leave="ui-leave-fade"` on the item so it fades
  * out first. Nothing moves under `prefers-reduced-motion`: the list closes up at once.
  *
+ * By default the items are the direct children of the list. Mark them with `uiFlipItem` instead when they
+ * sit deeper, for instance a page of several groups: put `uiFlipList` on the element around every group and
+ * `uiFlipItem` on each group heading and row, so a removal also slides the groups below. An item may sit
+ * inside another item (a row inside a card): it then moves by its own share and its card carries the rest.
+ * Only an item added or removed starts a slide; a change inside an item does not. Positions leave out the
+ * translate of any animation running inside the list (a slide in progress, an enter fade-up).
+ *
  * @example
  * <ul uiFlipList>
  *   @for (key of keys(); track key.id) {
  *     <li uiListRow animate.leave="ui-leave-fade">...</li>
  *   }
  * </ul>
+ *
+ * <table uiTable uiFlipList>
+ *   @for (group of groups(); track group.id) {
+ *     <tbody>
+ *       <tr uiTr group uiFlipItem>...</tr>
+ *       @for (row of group.rows; track row.id) {
+ *         <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
+ *       }
+ *     </tbody>
+ *   }
+ * </table>
  */
 class UiFlipList {
     host = inject(ElementRef).nativeElement;
     reduced = injectReducedMotion();
     mutations = new MutationObserver(() => this.onChange());
-    resizes = new ResizeObserver(() => this.measure());
+    resizes = new ResizeObserver(() => {
+        this.tops = this.measure();
+    });
     running = new Map();
     watched = new Set();
+    items = inject(FlipItems, { self: true });
     tops = new Map();
+    shifts = new Map();
     constructor() {
         afterNextRender(() => {
-            this.measure();
-            this.mutations.observe(this.host, { childList: true });
+            this.tops = this.measure();
+            this.mutations.observe(this.host, { childList: true, subtree: true });
             this.resizes.observe(this.host);
         });
         inject(DestroyRef).onDestroy(() => {
@@ -3895,57 +4044,118 @@ class UiFlipList {
             this.resizes.disconnect();
         });
     }
+    tracked() {
+        if (!this.items.marked) {
+            return Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
+        }
+        return this.items.inside(this.host);
+    }
     measure() {
-        const children = Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
-        this.tops = new Map(children.map((child) => [child, child.offsetTop]));
-        for (const child of children) {
-            if (!this.watched.has(child)) {
-                this.watched.add(child);
-                this.resizes.observe(child);
+        const elements = this.tracked();
+        const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;
+        const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));
+        this.shifts = new Map();
+        for (const animation of this.host.getAnimations({ subtree: true })) {
+            const target = animation.effect.target;
+            if (target !== this.host) {
+                this.shifts.set(target, translateY(target));
             }
         }
-        for (const child of this.watched) {
-            if (!this.tops.has(child)) {
-                this.watched.delete(child);
-                this.running.delete(child);
-                this.resizes.unobserve(child);
+        for (const [moving, shift] of this.shifts) {
+            for (const [element, top] of tops) {
+                if (moving.contains(element)) {
+                    tops.set(element, top - shift);
+                }
             }
         }
-    }
-    interruptedOffset(child) {
-        const running = this.running.get(child);
-        if (!running) {
-            return 0;
+        for (const element of elements) {
+            if (!this.watched.has(element)) {
+                this.watched.add(element);
+                this.resizes.observe(element);
+            }
         }
-        const shown = child.getBoundingClientRect().top;
-        running.cancel();
-        this.running.delete(child);
-        return shown - child.getBoundingClientRect().top;
+        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;
-        this.measure();
-        if (this.reduced()) {
+        const after = this.measure();
+        this.tops = after;
+        const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));
+        if (this.reduced() || !changed) {
             return;
         }
         const duration = readDuration$1(this.host, '--duration-base', 260);
         const easing = readEasing(this.host, '--ease-out', 'ease-out');
-        for (const [child, top] of this.tops) {
-            const previous = before.get(child);
-            if (previous === undefined || previous === top) {
+        const moved = (element) => (before.get(element) ?? 0) - (after.get(element) ?? 0);
+        for (const [element] of after) {
+            if (!before.has(element)) {
+                continue;
+            }
+            const own = moved(element) - moved(this.parentItem(element, before, after));
+            if (Math.abs(own) < 0.5) {
                 continue;
             }
-            const from = previous - top + this.interruptedOffset(child);
-            this.running.set(child, child.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], { duration, easing }));
+            const from = own + (this.shifts.get(element) ?? 0);
+            this.running.get(element)?.cancel();
+            const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], {
+                duration,
+                easing,
+            });
+            animation.onfinish = () => {
+                if (this.running.get(element) === animation) {
+                    this.running.delete(element);
+                }
+            };
+            this.running.set(element, animation);
+        }
+    }
+    parentItem(element, before, after) {
+        let node = element.parentElement;
+        while (node !== this.host && !(before.has(node) && after.has(node))) {
+            node = node.parentElement;
         }
+        return node;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipList, isStandalone: true, selector: "[uiFlipList]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipList, isStandalone: true, selector: "[uiFlipList]", providers: [FlipItems], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiFlipList]',
+                    providers: [FlipItems],
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Marks an element as an item of the nearest `uiFlipList`, at any depth: a group heading, a row inside a
+ * group, a card. Once one item is marked, the list follows its marked items only.
+ *
+ * @example
+ * <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
+ */
+class UiFlipItem {
+    constructor() {
+        const items = inject(FlipItems, { optional: true });
+        if (items) {
+            const element = inject(ElementRef).nativeElement;
+            items.add(element);
+            inject(DestroyRef).onDestroy(() => items.remove(element));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipItem, isStandalone: true, selector: "[uiFlipItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiFlipItem]',
                 }]
         }], ctorParameters: () => [] });
 
@@ -3969,6 +4179,10 @@ function paintedElements(host) {
  * cells, on a `td[ui-group-cell]` the band, anywhere else the host. Under `prefers-reduced-motion` the
  * scroll is instant and the fade lasts 600 ms.
  *
+ * It starts on the next frame and, when the element is still playing a finite animation of its own (an
+ * `animate.enter` fade on a new row), once that animation has finished, waiting no longer than
+ * `--duration-base`: the element fades in, then lights up. Both can sit on the same element.
+ *
  * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
  * below it (header, tab bar, action bar): a row under them counts as off screen and is scrolled out.
  * For an arrival on a page opened at the element, scroll to it at once first (`scrollIntoView` in
@@ -4045,15 +4259,38 @@ class UiHighlight {
         return rect.top >= top && rect.bottom <= window.innerHeight - bottom;
     }
     flash() {
-        const fade = readDuration$1(this.host, '--duration-highlight', 1200);
-        const easing = readEasing(this.host, '--ease-out', 'ease-out');
-        const total = HOLD_MS + fade;
-        const animations = paintedElements(this.host).map((element) => element.animate([
-            { backgroundColor: 'var(--soft)', offset: 0 },
-            { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },
-            { offset: 1 },
-        ], { duration: total }));
-        return () => animations.forEach((animation) => animation.cancel());
+        const painted = paintedElements(this.host);
+        let animations = [];
+        let timer;
+        const paint = () => {
+            const fade = readDuration$1(this.host, '--duration-highlight', 1200);
+            const easing = readEasing(this.host, '--ease-out', 'ease-out');
+            const total = HOLD_MS + fade;
+            animations = painted.map((element) => element.animate([
+                { backgroundColor: 'var(--soft)', offset: 0 },
+                { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },
+                { offset: 1 },
+            ], { duration: total }));
+        };
+        const frame = requestAnimationFrame(() => {
+            const remaining = Array.from(new Set([this.host, ...painted]))
+                .flatMap((element) => element.getAnimations())
+                .map((animation) => {
+                const timing = animation.effect.getComputedTiming();
+                return Number(timing.endTime) - Number(timing.localTime ?? 0);
+            })
+                .filter((left) => Number.isFinite(left));
+            if (remaining.length === 0) {
+                paint();
+                return;
+            }
+            timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration$1(this.host, '--duration-base', 260)));
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(timer);
+            animations.forEach((animation) => animation.cancel());
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiHighlight, isStandalone: true, selector: "[uiHighlight]", inputs: { uiHighlight: { classPropertyName: "uiHighlight", publicName: "uiHighlight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
@@ -4065,11 +4302,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], 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 BASE_CLASSES$2 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label leading-normal font-medium transition-[scale,background-color] [transition-duration:var(--duration-press),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-[image:linear-gradient(var(--soft),var(--soft))] text-(--foreground)';
 const IDLE_CLASSES = 'text-(--muted-foreground) active:bg-(--soft)';
 /**
- * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts). The active
+ * fill and text colour switch at once on navigation; only the hover fill fades.
  *
  * @example
  * <a ui-nav-item [active]="url === '/'" routerLink="/">
@@ -4081,6 +4319,9 @@ class UiNavItem {
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     classes = computed(() => `${BASE_CLASSES$2} ${this.active() ? ACTIVE_CLASSES : IDLE_CLASSES}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     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 });
 }
@@ -4094,12 +4335,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.aria-current]': "active() ? 'page' : null",
                     },
                 }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
 const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'];
 const ROW_PADDINGS = ['md', 'sm', 'none'];
 const ROW_GAPS = ['default', 'sm'];
-const SIZE_CLASSES$1 = {
+const SIZE_CLASSES$2 = {
     md: 'min-h-14',
     lg: 'min-h-15',
     xl: 'min-h-18 pointer-fine:min-h-17',
@@ -4130,9 +4371,10 @@ class UiRow {
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     gap = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
-    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 */
+    classes = computed(() => `${BASE_CLASSES$1} ${SIZE_CLASSES$2[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() {
+        holdTransitionsUntilRendered();
         const host = inject(ElementRef).nativeElement;
         const guard = (event) => {
             if (this.busy() || this.unavailable()) {
@@ -4253,9 +4495,9 @@ 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-[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 OPTION_CLASSES = "relative z-10 flex-1 cursor-pointer px-3 text-label font-medium transition-[scale] 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 = {
+const SIZE_CLASSES$1 = {
     md: 'h-10 pointer-fine:h-8',
     sm: 'h-10 pointer-fine:h-[30px]',
 };
@@ -4286,8 +4528,11 @@ class UiSegmented {
         return index === -1 ? 0 : index + 1;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     optionClasses(optionValue) {
-        return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
+        return `${OPTION_CLASSES} ${SIZE_CLASSES$1[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
     }
     tabIndexFor(optionValue) {
         const opts = this.options();
@@ -4399,7 +4644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
 
 const SELECT_CLASSES = 'cursor-pointer appearance-none pr-10 bg-(image:--chevron-down) bg-no-repeat bg-[position:right_0.75rem_center] bg-[size:1.125rem]';
 // Spelled out prefix included: Tailwind scans for literal strings, so a prefix applied in code
@@ -4541,22 +4786,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
-const BASE_CLASSES = 'inline-flex items-center gap-0.5 rounded-[4px] text-caption font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
+/** Available stale link sizes. `StaleLinkSize` is derived from this tuple. */
+const STALE_LINK_SIZES = ['caption', 'label'];
+const BASE_CLASSES = "relative inline-flex items-center gap-0.5 rounded-[4px] 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 SIZE_CLASSES = {
+    caption: 'text-caption',
+    label: 'text-label',
+};
 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.
+ * "1 ligne sans cours, non comptée". Weight 500, underlined on hover, with an optional trailing
+ * chevron. `size` is `caption` (12/17, the default) or `label` (14/20, the dashboard total's
+ * "1 cours en retard").
  *
  * @example
- * <a uiStaleLink chevron routerLink="/holdings">1 cours en retard</a>
+ * <a uiStaleLink chevron size="label" 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 */
+    size = input('caption', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}${this.chevron() ? ` ${CHEVRON_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 });
+    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 }, size: { classPropertyName: "size", publicName: "size", 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,
@@ -4564,7 +4818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'a[uiStaleLink]',
                     host: { '[class]': 'classes()' },
                 }]
-        }], propDecorators: { chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }] } });
+        }], propDecorators: { chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
 const STAT_SIZES = ['hero', 'tile'];
@@ -4663,6 +4917,9 @@ const CLASSES = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-f
  */
 class UiSwitch {
     classes = CLASSES;
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiSwitch, isStandalone: true, selector: "input[type=checkbox][uiSwitch]", host: { attributes: { "role": "switch" }, properties: { "class": "classes" } }, ngImport: i0 });
 }
@@ -4675,13 +4932,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
+const HEIGHT_PROPERTY = '--tab-bar-height';
+const HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';
 const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
 const INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';
 const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
 /**
- * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the
+ * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and
+ * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.
  *
  * @example
  * <nav ui-tab-bar>
@@ -4689,6 +4950,11 @@ const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
  * </nav>
  */
 class UiTabBar {
+    constructor() {
+        const root = inject(DOCUMENT).documentElement;
+        root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);
+        inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiTabBar, isStandalone: true, selector: "nav[ui-tab-bar]", host: { classAttribute: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
@@ -4701,7 +4967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         class: 'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * One destination of `ui-tab-bar`.
  *
@@ -4837,7 +5103,7 @@ class UiToaster {
         this.lastId = 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiToaster, isStandalone: true, selector: "ui-toaster", host: { attributes: { "role": "status" }, classAttribute: "pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(52px+env(safe-area-inset-bottom)+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiToaster, isStandalone: true, selector: "ui-toaster", host: { attributes: { "role": "status" }, classAttribute: "pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6" }, ngImport: i0, template: `
     @if (toasts.toast(); as toast) {
       <div
         animate.leave="ui-leave-fade"
@@ -4872,7 +5138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                     host: {
                         role: 'status',
-                        class: 'pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(52px+env(safe-area-inset-bottom)+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6',
+                        class: 'pointer-events-none fixed inset-x-0 z-50 flex justify-center bottom-[calc(var(--tab-bar-height,calc(52px+env(safe-area-inset-bottom)))+var(--action-bar-height,0px)+8px)] lg:inset-x-auto lg:right-6 lg:bottom-6',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -4915,6 +5181,9 @@ class UiTable {
         this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',
     ].join(' '), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTable, isStandalone: true, selector: "table[uiTable]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: false, transformFunction: null }, spaced: { classPropertyName: "spaced", publicName: "spaced", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
@@ -4926,7 +5195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes()',
                     },
                 }]
-        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: false }] }], spaced: [{ type: i0.Input, args: [{ isSignal: true, alias: "spaced", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: false }] }], spaced: [{ type: i0.Input, args: [{ isSignal: true, alias: "spaced", required: false }] }] } });
 /** Body of one group of rows: leaves a 4px tail after its last row. */
 class UiGroup {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5193,5 +5462,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiEmpty, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiFlipList, UiGroup, UiGroupCell, UiHighlight, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStaleLink, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiToaster, UiToasts, UiTr, delayedState, formatAmount, injectReducedMotion };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STALE_LINK_SIZES, 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, holdTransitionsUntilRendered, injectReducedMotion };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map