@joanroucoux/cairn-ui 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joanroucoux/cairn-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Cairn UI — a monochrome, accessible Angular design system.",
   "keywords": [
     "angular",

package/styles/motion.css

@@ -69,6 +69,15 @@
   transition: none !important;
 }
 
+[data-ui-settling],
+[data-ui-settling]::before,
+[data-ui-settling]::after,
+[data-ui-settling] *,
+[data-ui-settling] *::before,
+[data-ui-settling] *::after {
+  transition: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ui-enter-fade-up,
   .ui-enter-panel {

package/types/joanroucoux-cairn-ui.d.ts

@@ -3,7 +3,7 @@ import { InjectionToken, Signal, ElementRef } from '@angular/core';
 
 /**
  * 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.
@@ -116,6 +116,7 @@ declare class UiAsync {
     protected readonly titleClasses: _angular_core.Signal<string>;
     protected readonly messageClasses: _angular_core.Signal<string>;
     protected readonly retryButtonClasses: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAsync, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAsync, "ui-async", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "errorTitle": { "alias": "errorTitle"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
 }
@@ -151,7 +152,8 @@ declare class UiAvatar {
 /**
  * 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>
@@ -174,6 +176,7 @@ declare class UiBackLink {
     readonly size: _angular_core.InputSignal<"sm" | "md" | "header">;
     protected readonly chevron: _angular_core.Signal<number>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBackLink, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBackLink, "a[ui-back-link]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -364,6 +367,9 @@ type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];
 /**
  * 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>
@@ -380,6 +386,7 @@ declare class UiDialog {
     readonly truncateDescription: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly width: _angular_core.InputSignal<"md" | "lg" | (string & {})>;
     readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
     readonly closed: _angular_core.OutputEmitterRef<"drag" | "escape" | "backdrop" | "cross" | "programmatic">;
     protected readonly headingId: string;
@@ -398,11 +405,12 @@ declare class UiDialog {
     constructor();
     protected close(reason: DialogCloseReason): void;
     protected onCancel(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
     protected onPointerDown(event: MouseEvent): void;
     protected onClick(event: MouseEvent): void;
     protected onNativeClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDialog, "ui-dialog", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "truncateDescription": { "alias": "truncateDescription"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "closed": "closed"; }, never, ["*", "[dialogActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDialog, "ui-dialog", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "truncateDescription": { "alias": "truncateDescription"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "closed": "closed"; }, never, ["*", "[dialogActions]"], true, never>;
 }
 
 type DonutSlice = {
@@ -717,6 +725,10 @@ type EndRef = ElementRef<SVGCircleElement>;
  * 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" />
  */
@@ -737,6 +749,7 @@ declare class UiLineChart {
     readonly tooltipDelta: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly axisGap: _angular_core.InputSignal<number | "auto">;
     readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 3 | 5>;
+    readonly rangeKey: _angular_core.InputSignal<string | null>;
     protected readonly svgRef: _angular_core.Signal<PlotRef>;
     protected readonly lineRef: _angular_core.Signal<LineRef | undefined>;
     protected readonly endRef: _angular_core.Signal<EndRef | undefined>;
@@ -776,7 +789,7 @@ declare class UiLineChart {
     protected onPointerLeave(): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLineChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; "rangeKey": { "alias": "rangeKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -859,7 +872,7 @@ declare class UiMeter {
     readonly value: _angular_core.InputSignal<number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly valueText: _angular_core.InputSignal<string>;
-    readonly tone: _angular_core.InputSignal<2 | 4 | 1 | 3 | 6 | 5>;
+    readonly tone: _angular_core.InputSignal<2 | 3 | 1 | 4 | 6 | 5>;
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly trackClasses: _angular_core.Signal<string>;
     protected readonly percent: _angular_core.Signal<number>;
@@ -869,17 +882,35 @@ declare class UiMeter {
 }
 
 /**
- * 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>
  */
 declare class UiFlipList {
     private readonly host;
@@ -888,14 +919,29 @@ declare class UiFlipList {
     private readonly resizes;
     private readonly running;
     private readonly watched;
+    private readonly items;
     private tops;
+    private shifts;
     constructor();
+    private tracked;
     private measure;
-    private interruptedOffset;
     private onChange;
+    private parentItem;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFlipList, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFlipList, "[uiFlipList]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * 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>
+ */
+declare class UiFlipItem {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFlipItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFlipItem, "[uiFlipItem]", never, {}, {}, never, never, true, never>;
+}
 
 /**
  * Draws the eye to an element that just changed: scrolls it into view when it is off screen, holds the
@@ -905,6 +951,10 @@ declare class UiFlipList {
  * 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
@@ -937,7 +987,23 @@ declare class UiHighlight {
 declare function injectReducedMotion(): Signal<boolean>;
 
 /**
- * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ * 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();
+ * }
+ */
+declare function holdTransitionsUntilRendered(): void;
+
+/**
+ * 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="/">
@@ -948,6 +1014,7 @@ declare function injectReducedMotion(): Signal<boolean>;
 declare class UiNavItem {
     readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItem, "a[ui-nav-item]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[navIcon]", "*"], true, never>;
 }
@@ -1048,6 +1115,7 @@ declare class UiSegmented {
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
     protected readonly thumbIndex: _angular_core.Signal<number>;
+    constructor();
     protected optionClasses(optionValue: string): string;
     protected tabIndexFor(optionValue: string): number;
     protected select(optionValue: string): void;
@@ -1097,19 +1165,24 @@ declare class UiSkeleton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSkeleton, "ui-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Available stale link sizes. `StaleLinkSize` is derived from this tuple. */
+declare const STALE_LINK_SIZES: readonly ["caption", "label"];
+type StaleLinkSize = (typeof STALE_LINK_SIZES)[number];
 /**
  * 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>
  */
 declare class UiStaleLink {
     readonly chevron: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly classes: _angular_core.Signal<"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)" | "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) 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)]">;
+    readonly size: _angular_core.InputSignal<"label" | "caption">;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiStaleLink, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiStaleLink, "a[uiStaleLink]", never, { "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiStaleLink, "a[uiStaleLink]", never, { "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
@@ -1149,12 +1222,15 @@ declare class UiStat {
  */
 declare class UiSwitch {
     protected readonly classes = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * 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>
@@ -1162,6 +1238,7 @@ declare class UiSwitch {
  * </nav>
  */
 declare class UiTabBar {
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTabBar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTabBar, "nav[ui-tab-bar]", never, {}, {}, never, ["*"], true, never>;
 }
@@ -1244,6 +1321,7 @@ declare class UiTable {
     readonly rule: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly spaced: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTable, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTable, "table[uiTable]", never, { "row": { "alias": "row"; "required": false; "isSignal": true; }; "rule": { "alias": "rule"; "required": false; "isSignal": true; }; "spaced": { "alias": "spaced"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1359,5 +1437,5 @@ declare class UiCellSub {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiCellSub, "[uiCellSub]", never, { "narrow": { "alias": "narrow"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-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 type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogCloseReason, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StatSize, SubTone, TableRow, Toast, TooltipSize, UiControlError };
+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 };
+export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogCloseReason, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StaleLinkSize, StatSize, SubTone, TableRow, Toast, TooltipSize, UiControlError };