@joanroucoux/cairn-ui 0.8.2 → 0.9.1

package/styles/motion.css

@@ -26,13 +26,6 @@
   }
 }
 
-@keyframes cairn-panel-in {
-  from {
-    opacity: 0;
-    transform: translateX(8px);
-  }
-}
-
 @keyframes cairn-fade-out {
   to {
     opacity: 0;
@@ -47,10 +40,6 @@
   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;
 }
@@ -79,8 +68,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ui-enter-fade-up,
-  .ui-enter-panel {
+  .ui-enter-fade-up {
     animation-name: cairn-fade-in;
   }
 

package/styles/tokens.css

@@ -1,18 +1,6 @@
-/*
- * Design tokens of the Cairn ui library - shipped with the package (dist/ui/styles/tokens.css).
- * This file must stay a pure token sheet: no resets, no element styles, so consumers
- * can import it without side effects.
- *
- * Monochrome direction: the brand carries no hue, so semantic color is the only color in the
- * interface. Every text token clears 4.5:1 against --background, --card, --elevated, --muted and --soft in both
- * schemes; the ratios are recorded in projects/ui/docs/colors.mdx. Do not edit a value without
- * recomputing them.
- */
-
 :root {
   color-scheme: light dark;
 
-  /* Surfaces */
   --background: light-dark(#f7f8f8, #0a0b0b);
   --foreground: light-dark(#111414, #edefee);
   --card: light-dark(#ffffff, #151717);
@@ -21,11 +9,9 @@
   --border: light-dark(#e2e5e4, #242726);
   --hairline: light-dark(#edefee, #1e2020);
 
-  /* Text */
   --muted-foreground: light-dark(#5c6462, #989d9b);
   --subtle-foreground: light-dark(#626a68, #8f9593);
 
-  /* Brand - no hue: --primary is a near-black on light, a near-white on dark */
   --primary: light-dark(#161918, #f2f4f3);
   --primary-to: light-dark(#333937, #c9cecc);
   --primary-foreground: light-dark(#fafbfa, #0a0b0b);
@@ -33,12 +19,10 @@
   --glow: light-dark(rgb(22 25 24 / 0.05), rgb(242 244 243 / 0.07));
   --ring: light-dark(#161918, #f2f4f3);
 
-  /* Semantics - these roles never change meaning, in any theme */
   --positive: light-dark(#047757, #3fbf8f);
   --negative: light-dark(#b5413a, #e96e63);
   --stale: light-dark(#86620d, #c4922a);
 
-  /* Neutral ramp - allocation bars, where a categorical palette would break the monochrome premise */
   --ramp-1: light-dark(#161918, #f2f4f3);
   --ramp-2: light-dark(#3d4341, #c9cecc);
   --ramp-3: light-dark(#646b69, #a2a9a6);
@@ -46,7 +30,6 @@
   --ramp-5: light-dark(#b0b6b4, #5a605e);
   --ramp-6: light-dark(#ced3d1, #3b403e);
 
-  /* Kept from the starter so its reference components still resolve */
   --secondary: light-dark(#f1f3f2, #1e2020);
   --secondary-foreground: light-dark(#111414, #edefee);
   --muted: light-dark(#f1f3f2, #1e2020);
@@ -55,58 +38,46 @@
   --destructive: light-dark(#b8443c, #a33a33);
   --destructive-foreground: light-dark(#fafbfa, #fafbfa);
 
-  /* Type - Rubik, one family for logotype and interface (self-hosted, 400/500/600/700).
-     Names follow Tailwind 4 namespaces: registered in @theme they yield text-body, rounded-control,
-     ease-out... Reset Tailwind's defaults (--text-*: initial) so only this scale exists.
-     Weights: 400 text, 500 labels and buttons, 600 titles and the dominant figure, 700 logotype only. */
   --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --numeric: tabular-nums; /* amounts that align: tables, lists, columns. The lone big figure stays proportional. */
+  --numeric: tabular-nums;
   --text-caption: 0.75rem;
-  --text-caption--line-height: 1.0625rem; /* 12/17 axes, badges, price dates */
+  --text-caption--line-height: 1.0625rem;
   --text-label: 0.875rem;
-  --text-label--line-height: 1.25rem; /* 14/20 labels, secondary text, cells */
+  --text-label--line-height: 1.25rem;
   --text-body: 1rem;
-  --text-body--line-height: 1.5rem; /* 16/24 rows, body, inputs (no iOS zoom) */
+  --text-body--line-height: 1.5rem;
   --text-title: 1.25rem;
-  --text-title--line-height: 1.75rem; /* 20/28 card and section titles */
+  --text-title--line-height: 1.75rem;
   --text-heading: 1.75rem;
-  --text-heading--line-height: 2.125rem; /* 28/34 page title in the header */
+  --text-heading--line-height: 2.125rem;
   --text-display: 2.5rem;
-  --text-display--line-height: 2.75rem; /* 40/44 the one dominant figure */
-  --tracking-display: -0.02em; /* heading, display */
-  --tracking-caption: 0.01em; /* caption */
-
-  /* Space - Tailwind's 4px step stays; these name the recurring gaps */
-  --gutter: 1rem; /* page side padding */
-  --inset-card: 1rem; /* card padding */
-  --stack-group: 1rem; /* between items of one group */
-  --stack-section: 1rem; /* between cards */
-  --row-min: 2.75rem; /* 44px touch target */
-  --header-height: 3.5rem; /* page header below the status bar / above the content */
-
-  /* Radius - one rule: controls 8, containers 12, pills round.
-     A control nested in a control subtracts its inset: calc(var(--radius-control) - 2px). */
-  --radius-control: 0.5rem; /* button, input, select, segmented, nav item, row hover */
-  --radius-container: 0.75rem; /* card, dialog, sheet top corners, tooltip */
-  --radius-pill: 9999px; /* avatar, badge, delta pill */
-
-  /* Motion - only transform and opacity animate. Never ease-in. Exits are faster than entries.
-     Nothing animates on page entry: the dashboard opens several times a day. */
-  --duration-press: 120ms; /* press feedback, on pointer down */
-  --duration-fast: 180ms; /* menus, segmented thumb */
-  --duration-base: 260ms; /* dialogs, sheets, list to detail, chart range change */
-  --duration-exit: 180ms; /* every exit */
-  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* what appears or moves */
-  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* sheets rising from the bottom, and back */
+  --text-display--line-height: 2.75rem;
+  --tracking-display: -0.02em;
+  --tracking-caption: 0.01em;
+
+  --gutter: 1rem;
+  --inset-card: 1rem;
+  --stack-group: 1rem;
+  --stack-section: 1rem;
+  --row-min: 2.75rem;
+  --header-height: 3.5rem;
+
+  --radius-control: 0.5rem;
+  --radius-container: 0.75rem;
+  --radius-pill: 9999px;
+
+  --duration-press: 120ms;
+  --duration-fast: 180ms;
+  --duration-base: 260ms;
+  --duration-exit: 180ms;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
   --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. */
+  --enter-scale: 0.95;
+  --pulse-duration: 1600ms;
+  --duration-spin: 800ms;
+  --duration-highlight: 1200ms;
+  --toast-duration: 5000ms;
 }
 
 :root {
@@ -130,18 +101,18 @@
 
 @media (pointer: fine) {
   :root {
-    --row-min: 2.5rem; /* 40px with a mouse: denser tables */
+    --row-min: 2.5rem;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   :root {
     --press-scale: 1;
-    --enter-scale: 1; /* slides and scales become short fades */
+    --enter-scale: 1;
     --duration-base: 150ms;
     --pulse-duration: 0ms;
     --duration-highlight: 600ms;
-    --duration-spin: 1600ms; /* the spinner still says work is in progress, only slower */
+    --duration-spin: 1600ms;
   }
 }
 

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

@@ -1,11 +1,8 @@
-import * as i0 from '@angular/core';
-
+import * as i0 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 `--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.
+ * Bar of actions fixed above the tab bar on iPhone, 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` clears.
  *
  * @example
  * <ui-action-bar>
@@ -13,10 +10,8 @@ import * as i0 from '@angular/core';
  *   <button ui-button size="tall">Buy</button>
  * </ui-action-bar>
  */
-declare class UiActionBar {
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<UiActionBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UiActionBar, "ui-action-bar", never, {}, {}, never, ["*"], true, never>;
-}
-
-export { UiActionBar };
+export declare class UiActionBar {
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiActionBar, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiActionBar, "ui-action-bar", never, {}, {}, never, ["*"], true, never>;
+}

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

@@ -1,23 +1,37 @@
-import * as _angular_core from '@angular/core';
-
-declare const ALERT_VARIANTS: readonly ["error", "warning"];
+import * as i0 from "@angular/core";
+export declare const ALERT_VARIANTS: readonly ["error", "warning", "info"];
 type AlertVariant = (typeof ALERT_VARIANTS)[number];
 /**
- * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
+ * Inline message explaining a failure or a consequence, or static help with `info`: 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.
+ * opens.
  *
  * @example
  * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
  */
-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; }; "fadeIn": { "alias": "fadeIn"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+export declare class UiAlert {
+  readonly variant: import("@angular/core").InputSignal<"error" | "warning" | "info">;
+  readonly heading: import("@angular/core").InputSignal<string | undefined>;
+  readonly fadeIn: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly role: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAlert, never>;
+  static ɵcmp: i0.ɵɵ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>;
 }
-
-export { ALERT_VARIANTS, UiAlert };
-export type { AlertVariant };
+export type { AlertVariant };

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

@@ -1,13 +1,12 @@
-import * as _angular_core from '@angular/core';
-import { InjectionToken, Signal } from '@angular/core';
-
+import * as i0 from "@angular/core";
+import { InjectionToken, Signal } from "@angular/core";
 /** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
-declare const UI_AMOUNT_MASKED: InjectionToken<Signal<boolean>>;
-/** Available figure styles. `AmountNumeric` is derived from this tuple. */
-declare const AMOUNT_NUMERICS: readonly ["tabular", "proportional"];
+export declare const UI_AMOUNT_MASKED: InjectionToken<Signal<boolean>>;
+/** Available figure styles. */
+export declare const AMOUNT_NUMERICS: readonly ["tabular", "proportional"];
 type AmountNumeric = (typeof AMOUNT_NUMERICS)[number];
-/** Available masking behaviors. `AmountMasking` is derived from this tuple. */
-declare const AMOUNT_MASKINGS: readonly ["dots", "hide"];
+/** Available masking behaviors. */
+export declare const AMOUNT_MASKINGS: readonly ["dots", "hide"];
 type AmountMasking = (typeof AMOUNT_MASKINGS)[number];
 /**
  * A number or an amount of money, formatted for the locale and masked when the app hides amounts.
@@ -16,30 +15,63 @@ type AmountMasking = (typeof AMOUNT_MASKINGS)[number];
  * <ui-amount [value]="total" currency="EUR" numeric="proportional" />
  * <ui-amount [value]="dayChange" currency="EUR" signed whenMasked="hide" />
  */
-declare class UiAmount {
-    #private;
-    readonly value: _angular_core.InputSignal<number | null | undefined>;
-    readonly currency: _angular_core.InputSignal<string | undefined>;
-    readonly locale: _angular_core.InputSignal<string>;
-    readonly signed: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly fractionDigits: _angular_core.InputSignal<number>;
-    readonly numeric: _angular_core.InputSignal<"tabular" | "proportional">;
-    readonly whenMasked: _angular_core.InputSignal<"dots" | "hide">;
-    protected readonly hidden: Signal<boolean>;
-    protected readonly text: Signal<string>;
-    protected readonly classes: Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAmount, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAmount, "ui-amount", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "signed": { "alias": "signed"; "required": false; "isSignal": true; }; "fractionDigits": { "alias": "fractionDigits"; "required": false; "isSignal": true; }; "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "whenMasked": { "alias": "whenMasked"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+export declare class UiAmount {
+  #private;
+  readonly value: import("@angular/core").InputSignal<number | null | undefined>;
+  readonly currency: import("@angular/core").InputSignal<string | undefined>;
+  readonly locale: import("@angular/core").InputSignal<string>;
+  readonly signed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly fractionDigits: import("@angular/core").InputSignal<number>;
+  readonly numeric: import("@angular/core").InputSignal<"tabular" | "proportional">;
+  readonly whenMasked: import("@angular/core").InputSignal<"dots" | "hide">;
+  protected readonly hidden: Signal<boolean>;
+  protected readonly text: Signal<string>;
+  protected readonly classes: Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAmount, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiAmount, "ui-amount", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "currency": {
+      "alias": "currency";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "signed": {
+      "alias": "signed";
+      "required": false;
+      "isSignal": true;
+    };
+    "fractionDigits": {
+      "alias": "fractionDigits";
+      "required": false;
+      "isSignal": true;
+    };
+    "numeric": {
+      "alias": "numeric";
+      "required": false;
+      "isSignal": true;
+    };
+    "whenMasked": {
+      "alias": "whenMasked";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
-
 type AmountFormatOptions = {
-    locale: string;
-    currency?: string;
-    signed?: boolean;
-    fractionDigits?: number;
+  locale: string;
+  currency?: string;
+  signed?: boolean;
+  fractionDigits?: number;
 };
-/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
-declare function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked?: boolean): string;
-
-export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, UI_AMOUNT_MASKED, UiAmount, formatAmount };
-export type { AmountFormatOptions, AmountMasking, AmountNumeric };
+/** Formats a number or an amount for the locale. A missing value is an em dash, a masked one four bullets. */
+export declare function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked?: boolean): string;
+export type { AmountFormatOptions, AmountMasking, AmountNumeric };

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

@@ -1,14 +1,13 @@
-import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
-
-/** Available async block states. `AsyncState` is derived from this tuple. */
-declare const ASYNC_STATES: readonly ["loading", "error", "empty", "ready"];
+import * as i0 from "@angular/core";
+import { Signal } from "@angular/core";
+/** Available async block states. */
+export declare const ASYNC_STATES: readonly ["loading", "error", "empty", "ready"];
 type AsyncState = (typeof ASYNC_STATES)[number];
-/** Looks of the error block. `AsyncVariant` is derived from this tuple. */
-declare const ASYNC_VARIANTS: readonly ["elevated", "plain", "emphasis", "inline"];
+/** Looks of the error block. */
+export declare const ASYNC_VARIANTS: readonly ["elevated", "plain", "emphasis", "inline"];
 type AsyncVariant = (typeof ASYNC_VARIANTS)[number];
-/** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */
-declare const ASYNC_ALIGNS: readonly ["start", "center", "auto"];
+/** Alignments of the error block; `auto` is centred from 64rem. */
+export declare const ASYNC_ALIGNS: readonly ["start", "center", "auto"];
 type AsyncAlign = (typeof ASYNC_ALIGNS)[number];
 /**
  * The three states of a block that depends on a service call, next to the ready content.
@@ -20,39 +19,87 @@ type AsyncAlign = (typeof ASYNC_ALIGNS)[number];
  *   <span>{{ total() }}</span>
  * </ui-async>
  */
-declare class UiAsync {
-    #private;
-    readonly state: _angular_core.InputSignal<"loading" | "error" | "empty" | "ready">;
-    readonly errorTitle: _angular_core.InputSignal<string | undefined>;
-    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
-    readonly retryLabel: _angular_core.InputSignal<string | undefined>;
-    readonly variant: _angular_core.InputSignal<"elevated" | "plain" | "emphasis" | "inline">;
-    readonly align: _angular_core.InputSignal<"start" | "center" | "auto">;
-    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<"loading" | "error" | "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>;
-    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>;
+export declare class UiAsync {
+  #private;
+  readonly state: import("@angular/core").InputSignal<"loading" | "error" | "empty" | "ready">;
+  readonly errorTitle: import("@angular/core").InputSignal<string | undefined>;
+  readonly errorMessage: import("@angular/core").InputSignal<string | undefined>;
+  readonly retryLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Draws the rotate icon in the retry button. Only the `inline` variant honours `false`. */
+  readonly retryIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly variant: import("@angular/core").InputSignal<"elevated" | "plain" | "emphasis" | "inline">;
+  readonly align: import("@angular/core").InputSignal<"start" | "center" | "auto">;
+  readonly card: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly retry: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly shown: import("@angular/core").Signal<"loading" | "error" | "empty" | "ready" | null>;
+  protected readonly filling: import("@angular/core").Signal<boolean>;
+  protected readonly iconSize: import("@angular/core").Signal<16 | 18>;
+  protected readonly boxClasses: import("@angular/core").Signal<string>;
+  protected readonly titleClasses: import("@angular/core").Signal<string>;
+  protected readonly messageClasses: import("@angular/core").Signal<string>;
+  protected readonly retryButtonClasses: import("@angular/core").Signal<string>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAsync, never>;
+  static ɵcmp: i0.ɵɵ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;
+    };
+    "retryIcon": {
+      "alias": "retryIcon";
+      "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>;
 }
-
+declare const SKELETON_DELAY_MS = 150;
+declare const SKELETON_MIN_MS = 400;
 /**
  * Turns the live state of a call into the state to draw: `loading` only appears once the call has
- * lasted 150 ms and, once shown, stays at least 400 ms, so a fast call never flashes a skeleton and a
- * slow one never blinks. Until then the previous state stays on screen (a reload keeps its content);
- * `null` means nothing to draw yet, for a first load still under 150 ms. Call it in an injection context.
+ * lasted 150 ms and, once shown, stays at least 400 ms. Until then the previous state stays on
+ * screen; `null` means nothing to draw yet (a first load 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>;
-
-export { ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, UiAsync, delayedState };
-export type { AsyncAlign, AsyncState, AsyncVariant };
+export declare function delayedState(source: Signal<AsyncState>): Signal<AsyncState | null>;
+export type { AsyncAlign, AsyncState, AsyncVariant };

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

@@ -1,35 +1,47 @@
-import * as _angular_core from '@angular/core';
-
-/** Available avatar sizes. `AvatarSize` is derived from this tuple. */
-declare const AVATAR_SIZES: readonly ["sm", "md", "lg", "auto"];
+import * as i0 from "@angular/core";
+/** Available avatar sizes. */
+export declare const AVATAR_SIZES: readonly ["sm", "md", "lg", "auto"];
 type AvatarSize = (typeof AVATAR_SIZES)[number];
 /**
- * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
+ * Initials in a disc, standing in for a person.
  *
  * @example
  * <ui-avatar initials="JR" label="My account" />
  */
-declare class UiAvatar {
-    readonly initials: _angular_core.InputSignal<string>;
-    readonly label: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "auto">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAvatar, "ui-avatar", never, { "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+export declare class UiAvatar {
+  readonly initials: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "auto">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAvatar, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiAvatar, "ui-avatar", never, {
+    "initials": {
+      "alias": "initials";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 /**
- * 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, drawn at once when the route changes. The avatar
- * itself keeps its own size.
+ * Round hit area around a `ui-avatar` that links somewhere. On the current page
+ * (`aria-current="page"`, set by `routerLinkActive` through `ariaCurrentWhenActive`) it holds a
+ * soft halo.
  *
  * @example
  * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
  */
-declare class UiAvatarLink {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatarLink, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiAvatarLink, "a[uiAvatarLink], button[uiAvatarLink]", never, {}, {}, never, never, true, never>;
+export declare class UiAvatarLink {
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAvatarLink, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiAvatarLink, "a[uiAvatarLink], button[uiAvatarLink]", never, {}, {}, never, never, true, never>;
 }
-
-export { AVATAR_SIZES, UiAvatar, UiAvatarLink };
-export type { AvatarSize };
+export type { AvatarSize };