@joanroucoux/cairn-ui 0.7.2 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joanroucoux/cairn-ui",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "Cairn UI — a monochrome, accessible Angular design system.",
   "keywords": [
     "angular",
@@ -47,6 +47,146 @@
     ".": {
       "types": "./types/joanroucoux-cairn-ui.d.ts",
       "default": "./fesm2022/joanroucoux-cairn-ui.mjs"
+    },
+    "./action-bar": {
+      "types": "./types/joanroucoux-cairn-ui-action-bar.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-action-bar.mjs"
+    },
+    "./alert": {
+      "types": "./types/joanroucoux-cairn-ui-alert.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-alert.mjs"
+    },
+    "./amount": {
+      "types": "./types/joanroucoux-cairn-ui-amount.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-amount.mjs"
+    },
+    "./async": {
+      "types": "./types/joanroucoux-cairn-ui-async.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-async.mjs"
+    },
+    "./avatar": {
+      "types": "./types/joanroucoux-cairn-ui-avatar.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-avatar.mjs"
+    },
+    "./back-link": {
+      "types": "./types/joanroucoux-cairn-ui-back-link.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-back-link.mjs"
+    },
+    "./badge": {
+      "types": "./types/joanroucoux-cairn-ui-badge.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-badge.mjs"
+    },
+    "./button": {
+      "types": "./types/joanroucoux-cairn-ui-button.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-button.mjs"
+    },
+    "./card": {
+      "types": "./types/joanroucoux-cairn-ui-card.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-card.mjs"
+    },
+    "./choice-chips": {
+      "types": "./types/joanroucoux-cairn-ui-choice-chips.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-choice-chips.mjs"
+    },
+    "./control": {
+      "types": "./types/joanroucoux-cairn-ui-control.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-control.mjs"
+    },
+    "./delta": {
+      "types": "./types/joanroucoux-cairn-ui-delta.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-delta.mjs"
+    },
+    "./dialog": {
+      "types": "./types/joanroucoux-cairn-ui-dialog.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-dialog.mjs"
+    },
+    "./donut": {
+      "types": "./types/joanroucoux-cairn-ui-donut.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-donut.mjs"
+    },
+    "./empty": {
+      "types": "./types/joanroucoux-cairn-ui-empty.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-empty.mjs"
+    },
+    "./external-link": {
+      "types": "./types/joanroucoux-cairn-ui-external-link.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-external-link.mjs"
+    },
+    "./fact": {
+      "types": "./types/joanroucoux-cairn-ui-fact.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-fact.mjs"
+    },
+    "./field": {
+      "types": "./types/joanroucoux-cairn-ui-field.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-field.mjs"
+    },
+    "./filter-chips": {
+      "types": "./types/joanroucoux-cairn-ui-filter-chips.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-filter-chips.mjs"
+    },
+    "./input": {
+      "types": "./types/joanroucoux-cairn-ui-input.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-input.mjs"
+    },
+    "./line-chart": {
+      "types": "./types/joanroucoux-cairn-ui-line-chart.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-line-chart.mjs"
+    },
+    "./menu": {
+      "types": "./types/joanroucoux-cairn-ui-menu.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-menu.mjs"
+    },
+    "./meter": {
+      "types": "./types/joanroucoux-cairn-ui-meter.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-meter.mjs"
+    },
+    "./motion": {
+      "types": "./types/joanroucoux-cairn-ui-motion.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-motion.mjs"
+    },
+    "./nav-item": {
+      "types": "./types/joanroucoux-cairn-ui-nav-item.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-nav-item.mjs"
+    },
+    "./row": {
+      "types": "./types/joanroucoux-cairn-ui-row.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-row.mjs"
+    },
+    "./segmented": {
+      "types": "./types/joanroucoux-cairn-ui-segmented.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-segmented.mjs"
+    },
+    "./select": {
+      "types": "./types/joanroucoux-cairn-ui-select.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-select.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/joanroucoux-cairn-ui-skeleton.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-skeleton.mjs"
+    },
+    "./stale-link": {
+      "types": "./types/joanroucoux-cairn-ui-stale-link.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-stale-link.mjs"
+    },
+    "./stat": {
+      "types": "./types/joanroucoux-cairn-ui-stat.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-stat.mjs"
+    },
+    "./switch": {
+      "types": "./types/joanroucoux-cairn-ui-switch.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-switch.mjs"
+    },
+    "./tab-bar": {
+      "types": "./types/joanroucoux-cairn-ui-tab-bar.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-tab-bar.mjs"
+    },
+    "./table": {
+      "types": "./types/joanroucoux-cairn-ui-table.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-table.mjs"
+    },
+    "./toast": {
+      "types": "./types/joanroucoux-cairn-ui-toast.d.ts",
+      "default": "./fesm2022/joanroucoux-cairn-ui-toast.mjs"
     }
   },
   "module": "fesm2022/joanroucoux-cairn-ui.mjs",

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

@@ -0,0 +1,22 @@
+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.
+ *
+ * @example
+ * <ui-action-bar>
+ *   <button ui-button variant="outline" size="tall">Sell</button>
+ *   <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 };

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

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+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>
+ */
+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 { ALERT_VARIANTS, UiAlert };
+export type { AlertVariant };

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

@@ -0,0 +1,45 @@
+import * as _angular_core 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"];
+type AmountNumeric = (typeof AMOUNT_NUMERICS)[number];
+/** Available masking behaviors. `AmountMasking` is derived from this tuple. */
+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.
+ *
+ * @example
+ * <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>;
+}
+
+type AmountFormatOptions = {
+    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 };

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

@@ -0,0 +1,58 @@
+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"];
+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"];
+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"];
+type AsyncAlign = (typeof ASYNC_ALIGNS)[number];
+/**
+ * The three states of a block that depends on a service call, next to the ready content.
+ *
+ * @example
+ * <ui-async [state]="totalState()" errorTitle="Total could not be loaded" errorMessage="The server did not answer." retryLabel="Retry" (retry)="reload()">
+ *   <span asyncLoading><ui-skeleton shape="figure" /></span>
+ *   <span asyncEmpty>Add a holding to see your total.</span>
+ *   <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>;
+}
+
+/**
+ * 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>;
+
+export { ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, UiAsync, delayedState };
+export type { AsyncAlign, AsyncState, AsyncVariant };

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

@@ -0,0 +1,35 @@
+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"];
+type AvatarSize = (typeof AVATAR_SIZES)[number];
+/**
+ * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
+ *
+ * @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>;
+}
+/**
+ * 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.
+ *
+ * @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 { AVATAR_SIZES, UiAvatar, UiAvatarLink };
+export type { AvatarSize };

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

@@ -0,0 +1,22 @@
+import * as _angular_core from '@angular/core';
+
+/** Available back link sizes. `BackLinkSize` is derived from this tuple. */
+declare const BACK_LINK_SIZES: readonly ["md", "sm", "header"];
+type BackLinkSize = (typeof BACK_LINK_SIZES)[number];
+/**
+ * Link back to the parent screen: a chevron and the name of the destination.
+ *
+ * @example
+ * <a ui-back-link routerLink="/accounts">Accounts</a>
+ */
+declare class UiBackLink {
+    readonly size: _angular_core.InputSignal<"md" | "sm" | "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>;
+}
+
+export { BACK_LINK_SIZES, UiBackLink };
+export type { BackLinkSize };

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

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+/** Available badge variants. `BadgeVariant` is derived from this tuple. */
+declare const BADGE_VARIANTS: readonly ["neutral", "outline"];
+type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+declare const BADGE_SIZES: readonly ["md", "sm"];
+type BadgeSize = (typeof BADGE_SIZES)[number];
+/**
+ * Small status descriptor for counts, states or labels, such as an instrument's asset class.
+ *
+ * @example
+ * <ui-badge>ETF</ui-badge>
+ */
+declare class UiBadge {
+    readonly variant: _angular_core.InputSignal<"neutral" | "outline">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBadge, "ui-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { BADGE_SIZES, BADGE_VARIANTS, UiBadge };
+export type { BadgeSize, BadgeVariant };

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

@@ -0,0 +1,29 @@
+import * as _angular_core from '@angular/core';
+
+/** Available button variants. `ButtonVariant` is derived from this tuple. */
+declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive", "quiet", "quiet-destructive", "outline-destructive", "quiet-glow", "tonal"];
+type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+/** Available button sizes. */
+declare const BUTTON_SIZES: readonly ["compact", "slim", "xs", "sm", "md", "lg", "xl", "xxl", "tall", "block", "icon", "icon-sm"];
+type ButtonSize = (typeof BUTTON_SIZES)[number];
+/**
+ * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
+ *
+ * @example
+ * <button ui-button variant="destructive">Delete</button>
+ * <button ui-button size="icon" variant="ghost" aria-label="More actions">...</button>
+ */
+declare class UiButton {
+    readonly variant: _angular_core.InputSignal<"primary" | "outline" | "ghost" | "destructive" | "quiet" | "quiet-destructive" | "outline-destructive" | "quiet-glow" | "tonal">;
+    readonly size: _angular_core.InputSignal<"compact" | "slim" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "tall" | "block" | "icon" | "icon-sm">;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly inactive: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiButton, "button[ui-button], a[ui-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { BUTTON_SIZES, BUTTON_VARIANTS, UiButton };
+export type { ButtonSize, ButtonVariant };

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

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/** Available card variants. `CardVariant` is derived from this tuple. */
+declare const CARD_VARIANTS: readonly ["default", "elevated", "inset"];
+type CardVariant = (typeof CARD_VARIANTS)[number];
+/** Available card paddings. `CardPadding` is derived from this tuple. */
+declare const CARD_PADDINGS: readonly ["none", "xs", "sm", "md", "list", "rows", "recap", "panel"];
+type CardPadding = (typeof CARD_PADDINGS)[number];
+/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
+declare const CARD_SURFACES: readonly ["always", "lg", "max-lg"];
+type CardSurface = (typeof CARD_SURFACES)[number];
+/**
+ * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
+ * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
+ * plain on an iPhone, or the reverse. `variant="inset"` is the `--background` box that sits inside a
+ * card or a dialog: a picked title, a results list, a recap, an empty-state panel.
+ *
+ * @example
+ * <ui-card variant="elevated" padding="sm">Total</ui-card>
+ * <ui-card variant="inset" border="hairline" padding="xs">Results</ui-card>
+ * <ui-card padding="none" clip>Table that touches the edges, clipped to the corners</ui-card>
+ * <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
+ */
+declare class UiCard {
+    readonly variant: _angular_core.InputSignal<"default" | "elevated" | "inset">;
+    readonly padding: _angular_core.InputSignal<"none" | "xs" | "sm" | "md" | "list" | "rows" | "recap" | "panel">;
+    readonly surface: _angular_core.InputSignal<"always" | "lg" | "max-lg">;
+    readonly border: _angular_core.InputSignal<"none" | "auto" | "border" | "hairline">;
+    readonly clip: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "clip": { "alias": "clip"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, UiCard };
+export type { CardPadding, CardSurface, CardVariant };

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

@@ -0,0 +1,46 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { UiControl, UiControlError } from '@joanroucoux/cairn-ui/control';
+
+type ChoiceChipOption = {
+    value: string;
+    label: string;
+};
+/**
+ * Exclusive choice among a handful of named options, shown as wrapping pills: an account envelope,
+ * a category, a frequency. Binds to Signal Forms with `[formField]`.
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [(value)]="envelope" />
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [formField]="form.envelope" />
+ */
+declare class UiChoiceChips implements UiControl {
+    #private;
+    readonly options: _angular_core.InputSignal<ChoiceChipOption[]>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    readonly surface: _angular_core.InputSignal<"background" | "card">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    protected readonly labelId: string;
+    protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    protected readonly labelledBy: _angular_core.Signal<string | null>;
+    protected chipClasses(optionValue: string): string;
+    protected tabIndexFor(optionValue: string): number;
+    protected select(optionValue: string): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiChoiceChips, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiChoiceChips, "ui-choice-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+}
+
+export { UiChoiceChips };
+export type { ChoiceChipOption };

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

@@ -0,0 +1,27 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/**
+ * The part of a validation error this library reads. Angular's own `ValidationError` satisfies it,
+ * which is how a Signal Forms error reaches a field without this package depending on
+ * `@angular/forms`.
+ */
+type UiControlError = {
+    readonly message?: string;
+};
+/** What a styled control offers the field wrapped around it. */
+type UiControl = {
+    readonly errors: Signal<readonly UiControlError[]>;
+    readonly touched: Signal<boolean>;
+};
+/**
+ * Resolves to the styled control projected into a field.
+ *
+ * Angular's `[formField]` directive fills any input named `errors` or `touched` on the directives
+ * sitting on its host element, so a control declaring them receives its own validation state with
+ * nothing written at the call site. This token is how the field finds whichever control was
+ * projected into it.
+ */
+declare const UI_CONTROL: InjectionToken<UiControl>;
+
+export { UI_CONTROL };
+export type { UiControl, UiControlError };

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

@@ -0,0 +1,38 @@
+import * as _angular_core from '@angular/core';
+
+/** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
+declare const DELTA_EMPHASES: readonly ["text", "pill"];
+type DeltaEmphasis = (typeof DELTA_EMPHASES)[number];
+/** Type sizes. `DeltaSize` is derived from this tuple. */
+declare const DELTA_SIZES: readonly ["label", "inherit"];
+type DeltaSize = (typeof DELTA_SIZES)[number];
+/** Font weights. `DeltaWeight` is derived from this tuple. */
+declare const DELTA_WEIGHTS: readonly ["medium", "regular"];
+type DeltaWeight = (typeof DELTA_WEIGHTS)[number];
+type Sign = 'positive' | 'negative' | 'neutral' | 'unknown';
+/**
+ * Signed amount whose sign carries meaning: a gain, a loss, or an unknown.
+ *
+ * A null value is not a zero: a holding with no cost basis exists, and showing 0 would falsely
+ * claim a known gain of zero. Color never carries the sign on its own: the projected text must
+ * already contain a + or a minus sign.
+ *
+ * @example
+ * <ui-delta [value]="holding.dayChangeEur" unknownLabel="Not available">
+ *   {{ holding.dayChangeEur | signedMoney }}
+ * </ui-delta>
+ */
+declare class UiDelta {
+    readonly value: _angular_core.InputSignal<number | null | undefined>;
+    readonly unknownLabel: _angular_core.InputSignal<string>;
+    readonly emphasis: _angular_core.InputSignal<"text" | "pill">;
+    readonly size: _angular_core.InputSignal<"label" | "inherit">;
+    readonly weight: _angular_core.InputSignal<"medium" | "regular">;
+    protected readonly sign: _angular_core.Signal<Sign>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDelta, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDelta, "ui-delta", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "unknownLabel": { "alias": "unknownLabel"; "required": true; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, UiDelta };
+export type { DeltaEmphasis, DeltaSize, DeltaWeight };