@joanroucoux/cairn-ui 0.6.5 → 0.7.0

package/package.json

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

package/styles/motion.css

@@ -0,0 +1,83 @@
+@keyframes cairn-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes cairn-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.45;
+  }
+}
+
+@keyframes cairn-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes cairn-fade-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+@keyframes cairn-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
+@keyframes cairn-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+.ui-enter-fade {
+  animation: cairn-fade-in var(--duration-fast) var(--ease-out);
+}
+
+.ui-enter-fade-up {
+  animation: cairn-fade-up-in var(--duration-fast) var(--ease-out);
+}
+
+.ui-enter-panel {
+  animation: cairn-panel-in var(--duration-base) var(--ease-out);
+}
+
+.ui-leave-fade {
+  animation: cairn-fade-out var(--duration-exit) var(--ease-out) forwards;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: var(--duration-base);
+  animation-timing-function: var(--ease-out);
+}
+
+@view-transition {
+  navigation: auto;
+}
+
+[data-theme-switching] * {
+  transition: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-enter-fade-up,
+  .ui-enter-panel {
+    animation-name: cairn-fade-in;
+  }
+
+  ::view-transition-group(*),
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+}

package/styles/theme.css

@@ -28,4 +28,10 @@
 
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
+
+  --default-transition-timing-function: var(--ease-out);
+  --default-transition-duration: var(--duration-fast);
+
+  --animate-cairn-spin: cairn-spin var(--duration-spin) linear infinite;
+  --animate-cairn-pulse: cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate;
 }

package/styles/tokens.css

@@ -101,6 +101,9 @@
   --press-scale: 0.97;
   --enter-scale: 0.95; /* dialogs and menus start at scale(0.95) and opacity 0, never scale(0) */
   --pulse-duration: 1600ms; /* skeleton opacity pulse */
+  --duration-spin: 800ms; /* button spinner, one turn */
+  --duration-highlight: 1200ms; /* a freshly edited row fading back to its background */
+  --toast-duration: 5000ms; /* how long a confirmation stays */
 
   /* Browser theme color (meta theme-color, iOS status bar) follows the top of the page:
      light #f7f8f8, dark #0a0b0b - the --background values. */
@@ -137,6 +140,8 @@
     --enter-scale: 1; /* slides and scales become short fades */
     --duration-base: 150ms;
     --pulse-duration: 0ms;
+    --duration-highlight: 600ms;
+    --duration-spin: 1600ms; /* the spinner still says work is in progress, only slower */
   }
 }
 

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

@@ -5,7 +5,8 @@ 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
  * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
- * width equally.
+ * width equally. While it is on the page it publishes its height as `--action-bar-height` on the
+ * root element, which `ui-toaster` adds to its offset so a confirmation never covers the actions.
  *
  * @example
  * <ui-action-bar>
@@ -14,6 +15,7 @@ import { InjectionToken, Signal, ElementRef } from '@angular/core';
  * </ui-action-bar>
  */
 declare class UiActionBar {
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiActionBar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiActionBar, "ui-action-bar", never, {}, {}, never, ["*"], true, never>;
 }
@@ -22,6 +24,8 @@ declare const ALERT_VARIANTS: readonly ["error", "warning"];
 type AlertVariant = (typeof ALERT_VARIANTS)[number];
 /**
  * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
+ * It fades in when it appears; set `[fadeIn]="false"` on an alert that is part of the page as it
+ * opens (an error state after a load), which shows without motion.
  *
  * @example
  * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
@@ -29,9 +33,10 @@ type AlertVariant = (typeof ALERT_VARIANTS)[number];
 declare class UiAlert {
     readonly variant: _angular_core.InputSignal<"error" | "warning">;
     readonly heading: _angular_core.InputSignal<string | undefined>;
+    readonly fadeIn: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAlert, "ui-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAlert, "ui-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "fadeIn": { "alias": "fadeIn"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
@@ -104,6 +109,7 @@ declare class UiAsync {
     readonly card: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly fill: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly retry: _angular_core.OutputEmitterRef<void>;
+    protected readonly shown: _angular_core.Signal<"error" | "loading" | "empty" | "ready" | null>;
     protected readonly filling: _angular_core.Signal<boolean>;
     protected readonly iconSize: _angular_core.Signal<16 | 18>;
     protected readonly boxClasses: _angular_core.Signal<string>;
@@ -114,6 +120,17 @@ declare class UiAsync {
     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>;
 }
 
+/**
+ * Turns the live state of a call into the state to draw: `loading` only appears once the call has
+ * lasted 150 ms and, once shown, stays at least 400 ms, so a fast call never flashes a skeleton and a
+ * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);
+ * `null` means nothing to draw yet, for a first load still under 150 ms. Call it in an injection context.
+ *
+ * @example
+ * protected readonly shown = delayedState(this.state);
+ */
+declare function delayedState(source: Signal<AsyncState>): Signal<AsyncState | null>;
+
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 declare const AVATAR_SIZES: readonly ["sm", "md", "lg", "auto"];
 type AvatarSize = (typeof AVATAR_SIZES)[number];
@@ -341,6 +358,9 @@ type LayoutClasses = {
     body: string;
     footer: string;
 };
+/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
+declare const DIALOG_CLOSE_REASONS: readonly ["escape", "backdrop", "cross", "drag", "programmatic"];
+type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];
 /**
  * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
  *
@@ -356,11 +376,12 @@ declare class UiDialog {
     readonly heading: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly closeLabel: _angular_core.InputSignal<string | undefined>;
-    readonly layout: _angular_core.InputSignal<"list" | "trade" | "form" | "confirm">;
+    readonly layout: _angular_core.InputSignal<"list" | "form" | "trade" | "confirm">;
     readonly truncateDescription: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly width: _angular_core.InputSignal<"md" | "lg" | (string & {})>;
     readonly open: _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;
     protected readonly descriptionId: string;
     protected readonly bodyId: string;
@@ -375,11 +396,13 @@ declare class UiDialog {
     protected readonly footerClasses: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
+    protected close(reason: DialogCloseReason): void;
+    protected onCancel(event: Event): 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"; }, 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; }; }, { "dismissed": "dismissed"; "closed": "closed"; }, never, ["*", "[dialogActions]"], true, never>;
 }
 
 type DonutSlice = {
@@ -423,7 +446,7 @@ declare class UiDonut {
     protected readonly radius = 78;
     protected readonly ringWidth = 30;
     protected strokeColor(slice: RankedSlice): string;
-    protected strokeWidth(slice: RankedSlice): number;
+    protected sliceClasses(slice: RankedSlice): string;
     protected dotClasses(slice: RankedSlice): string;
     protected rowClasses(slice: RankedSlice): string;
     protected subLabel(slice: RankedSlice): string;
@@ -437,6 +460,22 @@ declare class UiDonut {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDonut, "ui-donut", never, { "slices": { "alias": "slices"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "othersLabel": { "alias": "othersLabel"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "shareFormat": { "alias": "shareFormat"; "required": false; "isSignal": true; }; "legendHref": { "alias": "legendHref"; "required": false; "isSignal": true; }; }, { "sliceSelect": "sliceSelect"; }, never, never, true, never>;
 }
 
+/**
+ * Centred empty state: a title, a hint and an action slot, such as a catalogue search that matches
+ * nothing. The padding is 24px, 48px from 64rem.
+ *
+ * @example
+ * <ui-empty heading="Aucun instrument ne correspond à « zzz »" hint="La recherche porte sur le nom et l'ISIN.">
+ *   <button ui-button variant="outline" size="md" type="button">Ajouter une ligne</button>
+ * </ui-empty>
+ */
+declare class UiEmpty {
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiEmpty, "ui-empty", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Link to another site: the label followed by an external-link icon. A 44px target on touch,
  * an underline on hover with a mouse.
@@ -668,6 +707,8 @@ type TooltipSize = (typeof TOOLTIP_SIZES)[number];
 type AxisTicks = 3 | 5 | 'auto';
 
 type PlotRef = ElementRef<SVGSVGElement>;
+type LineRef = ElementRef<SVGPathElement>;
+type EndRef = ElementRef<SVGCircleElement>;
 /**
  * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
  *
@@ -697,8 +738,10 @@ declare class UiLineChart {
     readonly axisGap: _angular_core.InputSignal<number | "auto">;
     readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 3 | 5>;
     protected readonly svgRef: _angular_core.Signal<PlotRef>;
+    protected readonly lineRef: _angular_core.Signal<LineRef | undefined>;
+    protected readonly endRef: _angular_core.Signal<EndRef | undefined>;
     protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
-    protected readonly animatedLine: _angular_core.WritableSignal<string | null>;
+    protected readonly held: _angular_core.WritableSignal<ChartGeometry | null>;
     protected readonly measuredSize: _angular_core.WritableSignal<{
         width: number;
         height: number;
@@ -713,7 +756,8 @@ declare class UiLineChart {
         delta: string;
     }>;
     protected readonly geometry: _angular_core.Signal<ChartGeometry | null>;
-    protected readonly displayLine: _angular_core.Signal<string>;
+    protected readonly shown: _angular_core.Signal<ChartGeometry | null>;
+    protected readonly startFade: _angular_core.Signal<"opacity-0 duration-(--duration-exit)" | "duration-(--duration-fast)">;
     protected readonly ticks: _angular_core.Signal<PlottedPoint[]>;
     protected readonly tickTexts: _angular_core.Signal<(TickLabel | null)[]>;
     protected readonly active: _angular_core.Signal<PlottedPoint | null>;
@@ -815,7 +859,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 | 3 | 1 | 5 | 6>;
+    readonly tone: _angular_core.InputSignal<2 | 4 | 1 | 3 | 6 | 5>;
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly trackClasses: _angular_core.Signal<string>;
     protected readonly percent: _angular_core.Signal<number>;
@@ -824,6 +868,74 @@ declare class UiMeter {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMeter, "ui-meter", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * 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
+ * out first. Nothing moves under `prefers-reduced-motion`: the list closes up at once.
+ *
+ * @example
+ * <ul uiFlipList>
+ *   @for (key of keys(); track key.id) {
+ *     <li uiListRow animate.leave="ui-leave-fade">...</li>
+ *   }
+ * </ul>
+ */
+declare class UiFlipList {
+    private readonly host;
+    private readonly reduced;
+    private readonly mutations;
+    private readonly resizes;
+    private readonly running;
+    private readonly watched;
+    private tops;
+    constructor();
+    private measure;
+    private interruptedOffset;
+    private onChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFlipList, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFlipList, "[uiFlipList]", 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
+ * `--soft` fill for 200 ms, then fades back to the element's own background over `--duration-highlight`.
+ * Each new non-null token plays once, so pass a fresh value per event (an object or a counter), not a
+ * boolean. A non-null token already present at first render plays on arrival. On a `tr` it paints the
+ * cells, on a `td[ui-group-cell]` the band, anywhere else the host. Under `prefers-reduced-motion` the
+ * scroll is instant and the fade lasts 600 ms.
+ *
+ * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
+ * below it (header, tab bar, action bar): a row under them counts as off screen and is scrolled out.
+ * For an arrival on a page opened at the element, scroll to it at once first (`scrollIntoView` in
+ * `afterNextRender`) and set the token afterwards: a token present at first render scrolls smoothly
+ * from where the page is.
+ *
+ * @example
+ * <a ui-row [uiHighlight]="changed() === holding.id ? token() : null" routerLink="/holdings/1">...</a>
+ */
+declare class UiHighlight {
+    readonly uiHighlight: _angular_core.InputSignal<unknown>;
+    private readonly host;
+    private readonly reduced;
+    private cancel;
+    constructor();
+    private play;
+    private isVisible;
+    private flash;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiHighlight, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiHighlight, "[uiHighlight]", never, { "uiHighlight": { "alias": "uiHighlight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * A signal that follows the user's `prefers-reduced-motion` preference live.
+ * Call it in an injection context; the listener is removed with that context.
+ *
+ * @example
+ * protected readonly reduced = injectReducedMotion();
+ */
+declare function injectReducedMotion(): Signal<boolean>;
+
 /**
  * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
  *
@@ -847,7 +959,7 @@ type RowPadding = (typeof ROW_PADDINGS)[number];
 declare const ROW_GAPS: readonly ["default", "sm"];
 type RowGap = (typeof ROW_GAPS)[number];
 /**
- * Clickable row of a list: a holding, an envelope, an account.
+ * Clickable row of a list: a holding, an account, a search result.
  *
  * @example
  * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
@@ -856,12 +968,15 @@ type RowGap = (typeof ROW_GAPS)[number];
  */
 declare class UiRow {
     readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly unavailable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "card" | "dense">;
     readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
     readonly gap: _angular_core.InputSignal<"sm" | "default">;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "unavailable": { "alias": "unavailable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /**
  * Lays out a `ui-row` with a trailing action beside it, such as a "more" icon button: the row takes
@@ -982,6 +1097,21 @@ 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>;
 }
 
+/**
+ * Link in the stale tone, for a caption about data that is late or left out of a total, such as
+ * "1 ligne sans cours, non comptée". Caption size, weight 500, underlined on hover, with an optional
+ * trailing chevron.
+ *
+ * @example
+ * <a uiStaleLink chevron routerLink="/holdings">1 cours en retard</a>
+ */
+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)]">;
+    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>;
+}
+
 /** Available stat sizes. `StatSize` is derived from this tuple. */
 declare const STAT_SIZES: readonly ["hero", "tile"];
 type StatSize = (typeof STAT_SIZES)[number];
@@ -1018,7 +1148,7 @@ declare class UiStat {
  * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
  */
 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-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
+    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";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
 }
@@ -1048,6 +1178,53 @@ declare class UiTab {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
 }
 
+type Toast = {
+    readonly id: number;
+    readonly text: string;
+};
+/**
+ * One-slot confirmation message queue read by `ui-toaster`.
+ *
+ * @example
+ * inject(UiToasts).show('Achat enregistré');
+ */
+declare class UiToasts {
+    private readonly current;
+    private sequence;
+    readonly toast: _angular_core.Signal<Toast | null>;
+    show(message: string): void;
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiToasts, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+/**
+ * Confirmation message shown by `UiToasts.show`: one at a time, no action, gone after `--toast-duration`.
+ * Place it once in the app shell.
+ *
+ * @example
+ * <ui-toaster />
+ */
+declare class UiToaster {
+    protected readonly toasts: UiToasts;
+    protected readonly toastClasses = "pointer-events-auto max-w-[min(28rem,calc(100vw-2rem))] rounded-container bg-(--elevated) px-4 py-3 text-label text-(--foreground) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] transition-[opacity,translate] duration-(--duration-base) ease-out starting:opacity-0 starting:translate-y-2 motion-reduce:starting:translate-y-0";
+    private readonly host;
+    private readonly hovered;
+    private readonly focused;
+    private lastId;
+    private remaining;
+    private startedAt;
+    private timer;
+    constructor();
+    protected setHovered(value: boolean): void;
+    protected setFocused(value: boolean): void;
+    private resume;
+    private pause;
+    private stop;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiToaster, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiToaster, "ui-toaster", never, {}, {}, never, never, true, never>;
+}
+
 /** Breakpoints a secondary column can be held back until. */
 declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
 type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
@@ -1182,5 +1359,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_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
-export 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, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StatSize, SubTone, TableRow, 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, 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 };