@joanroucoux/cairn-ui 0.7.1 → 0.8.0

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

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+
+/**
+ * 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;
+    private readonly reduced;
+    private readonly mutations;
+    private readonly resizes;
+    private readonly running;
+    private readonly watched;
+    private readonly items;
+    private tops;
+    private shifts;
+    constructor();
+    private tracked;
+    private measure;
+    private onChange;
+    private parentItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiFlipList, never>;
+    static ɵdir: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<UiFlipItem, never>;
+    static ɵdir: i0.ɵɵ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
+ * `--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.
+ *
+ * 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
+ * `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: i0.InputSignal<unknown>;
+    private readonly host;
+    private readonly reduced;
+    private cancel;
+    constructor();
+    private play;
+    private isVisible;
+    private flash;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiHighlight, never>;
+    static ɵdir: i0.ɵɵ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>;
+
+/**
+ * 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;
+
+export { UiFlipItem, UiFlipList, UiHighlight, holdTransitionsUntilRendered, injectReducedMotion };

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

@@ -0,0 +1,21 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * 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="/">
+ *   <lucide-icon navIcon name="house" />
+ *   Portfolio
+ * </a>
+ */
+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>;
+}
+
+export { UiNavItem };

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

@@ -0,0 +1,78 @@
+import * as _angular_core from '@angular/core';
+
+declare const ROW_SIZES: readonly ["md", "lg", "xl", "card", "dense"];
+type RowSize = (typeof ROW_SIZES)[number];
+declare const ROW_PADDINGS: readonly ["md", "sm", "none"];
+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 account, a search result.
+ *
+ * @example
+ * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
+ *   {{ holding.name }}
+ * </a>
+ */
+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<"md" | "sm" | "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; }; "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
+ * the room the action leaves and the action keeps its own size.
+ *
+ * @example
+ * <div uiRowItem>
+ *   <a ui-row size="xl" padding="sm" routerLink="/accounts/1">...</a>
+ *   <button ui-button variant="quiet" size="icon-sm" aria-label="Account actions">...</button>
+ * </div>
+ */
+declare class UiRowItem {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowItem, "[uiRowItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete
+ * button, a device, a setting. It is a 72px row (68px from 64rem) with a 12px gap; put it on an
+ * `li` or a `div`. Use `ui-row` instead when the whole row is a link or an action.
+ *
+ * @example
+ * <ul>
+ *   <li uiListRow>
+ *     <span class="flex-1">MacBook Air</span>
+ *     <button ui-button variant="quiet-destructive" size="icon-sm" aria-label="Delete MacBook Air">...</button>
+ *   </li>
+ * </ul>
+ */
+declare class UiListRow {
+    readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]" | "flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiListRow, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiListRow, "[uiListRow]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * The 36px filled tile that leads a row: an icon on a muted square with the control radius. Put it on
+ * a `span` as the first child of a `ui-row` or a `uiListRow`.
+ *
+ * @example
+ * <a ui-row size="xl" padding="sm" href="/export">
+ *   <span uiRowTile><svg lucideDownload [size]="18" /></span>
+ *   Export
+ * </a>
+ */
+declare class UiRowTile {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowTile, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowTile, "[uiRowTile]", never, {}, {}, never, never, true, never>;
+}
+
+export { ROW_GAPS, ROW_PADDINGS, ROW_SIZES, UiListRow, UiRow, UiRowItem, UiRowTile };
+export type { RowGap, RowPadding, RowSize };

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

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+type SegmentedOption = {
+    value: string;
+    label: string;
+};
+declare const SEGMENTED_SIZES: readonly ["md", "sm"];
+type SegmentedSize = (typeof SEGMENTED_SIZES)[number];
+/**
+ * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's
+ * background is a single thumb that slides under it in `transform`, instead of being redrawn.
+ *
+ * @example
+ * <ui-segmented [options]="ranges" label="Time range" [(value)]="range" />
+ */
+declare class UiSegmented {
+    readonly options: _angular_core.InputSignal<SegmentedOption[]>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly showLabel: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly labelId: string;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
+    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;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSegmented, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSegmented, "ui-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { SEGMENTED_SIZES, UiSegmented };
+export type { SegmentedOption, SegmentedSize };

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

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+import { UiControl, UiControlError } from '@joanroucoux/cairn-ui/control';
+
+/**
+ * Styled native select, drop-down list included where the browser allows it. It stays a native
+ * `<select>`: keyboard, typeahead and semantics come from the platform, not from a rebuilt listbox.
+ *
+ * Declares the `errors` and `touched` inputs Angular's `[formField]` fills, so a `ui-field` around
+ * it can show the message without any binding here.
+ *
+ * @example
+ * <select uiSelect><option value="pea">PEA</option></select>
+ */
+declare class UiSelect implements UiControl {
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
+    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
+    readonly touched: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSelect, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSelect, "select[uiSelect]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { UiSelect };

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

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+/** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */
+declare const SKELETON_SHAPES: readonly ["text", "figure", "row", "chart", "ring", "dot"];
+type SkeletonShape = (typeof SKELETON_SHAPES)[number];
+/**
+ * Decorative, pulsing placeholder for content that is still loading, at the shape of the content
+ * it stands in for.
+ *
+ * @example
+ * <ui-skeleton shape="figure" />
+ * <ui-skeleton [lines]="3" />
+ */
+declare class UiSkeleton {
+    readonly shape: _angular_core.InputSignal<"text" | "figure" | "row" | "chart" | "ring" | "dot">;
+    readonly lines: _angular_core.InputSignal<number>;
+    readonly height: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<number>;
+    protected readonly animation = "cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate";
+    protected readonly bars: _angular_core.Signal<("62%" | "100%")[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSkeleton, never>;
+    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>;
+}
+
+export { SKELETON_SHAPES, UiSkeleton };
+export type { SkeletonShape };

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

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+
+/** 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". 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 size="label" routerLink="/holdings">1 cours en retard</a>
+ */
+declare class UiStaleLink {
+    readonly chevron: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<"caption" | "label">;
+    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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { STALE_LINK_SIZES, UiStaleLink };
+export type { StaleLinkSize };

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

@@ -0,0 +1,32 @@
+import * as _angular_core from '@angular/core';
+
+/** Available stat sizes. `StatSize` is derived from this tuple. */
+declare const STAT_SIZES: readonly ["hero", "tile"];
+type StatSize = (typeof STAT_SIZES)[number];
+/**
+ * Label, figure and a named period of change, at two sizes: a `hero` for a screen's single
+ * headline number, or a smaller `tile` repeated in a grid. The figure itself, its delta and its
+ * caption are all projected, so the component carries no formatting and no currency of its own.
+ *
+ * The `hero` size never sets `tabular-nums` on the figure: a lone headline number reads better
+ * with its digits at their natural width, unlike a column of aligned figures.
+ *
+ * @example
+ * <ui-stat label="Net worth" size="hero">
+ *   <span uiStatValue>128,656 EUR</span>
+ *   <ui-delta uiStatDelta [value]="dayChange()" unknownLabel="Not available">+316.54 EUR</ui-delta>
+ *   <span uiStatCaption>today</span>
+ * </ui-stat>
+ */
+declare class UiStat {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<"hero" | "tile">;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly stackClasses: _angular_core.Signal<string>;
+    protected readonly valueClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiStat, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiStat, "ui-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[uiStatValue]", "[uiStatDelta]", "[uiStatCaption]", "[uiStatAside]"], true, never>;
+}
+
+export { STAT_SIZES, UiStat };
+export type { StatSize };

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

@@ -0,0 +1,17 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ * 51 by 31 on touch, 40 by 24 with a mouse.
+ *
+ * @example
+ * <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-[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: i0.ɵɵFactoryDeclaration<UiSwitch, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
+}
+
+export { UiSwitch };

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

@@ -0,0 +1,31 @@
+import * as i0 from '@angular/core';
+
+/**
+ * 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>
+ *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ * </nav>
+ */
+declare class UiTabBar {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiTabBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiTabBar, "nav[ui-tab-bar]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * One destination of `ui-tab-bar`.
+ *
+ * @example
+ * <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ */
+declare class UiTab {
+    readonly active: i0.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
+}
+
+export { UiTab, UiTabBar };

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

@@ -0,0 +1,139 @@
+import * as _angular_core from '@angular/core';
+
+/** Breakpoints a secondary column can be held back until. */
+declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
+type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
+/** Body row heights. */
+declare const TABLE_ROWS: readonly ["48", "52", "60"];
+type TableRow = (typeof TABLE_ROWS)[number];
+/**
+ * Styled native table. The rows and cells stay plain <tr> and <td>. `row` sets the height of every
+ * body row, `rule` draws or drops the hairline under the header, `spaced` leaves 4px between the
+ * header and the first row.
+ *
+ * @example
+ * <table uiTable row="60" [rule]="false">
+ */
+declare class UiTable {
+    readonly row: _angular_core.InputSignal<"48" | "52" | "60">;
+    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>;
+}
+/** Body of one group of rows: leaves a 4px tail after its last row. */
+declare class UiGroup {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiGroup, "tbody[uiGroup]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Body or group row. An ordinary row glows on hover and takes the soft fill when `selected`; an
+ * `interactive` row (one that opens something) also presses to the soft fill. A row with no action keeps a
+ * plain name: `<td uiTd primary class="truncate font-medium">`.
+ * `group` marks the row that holds a group band: it carries no hover state.
+ *
+ * @example
+ * <tr uiTr [selected]="open">...
+ * <tr uiTr group><td ui-group-cell name="Brokerage">...
+ */
+declare class UiTr {
+    readonly group: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTr, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTr, "tr[uiTr]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Column header, centred in its 36px. `numeric` right-aligns and lines the digits up; `secondary`
+ * (or `from`) holds a column back until the viewport is wide enough for it; `primary` makes it
+ * the column that absorbs the free width and truncates; `tall` is a 40px header; `width` fixes the column width and keeps it from shrinking.
+ *
+ * @example
+ * <th uiTh numeric secondary width="108px">Quantity</th>
+ */
+declare class UiTh {
+    readonly width: _angular_core.InputSignal<string | null>;
+    readonly numeric: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tall: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly from: _angular_core.InputSignal<"md" | "lg" | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTh, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTh, "th[uiTh]", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "tall": { "alias": "tall"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Body cell. Same inputs as `UiTh` (bar `tall` and `width`), and they must be set on both to match. */
+declare class UiTd {
+    readonly numeric: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly from: _angular_core.InputSignal<"md" | "lg" | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTd, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTd, "td[uiTd]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Group band sizes. */
+declare const GROUP_SIZES: readonly ["md", "lg"];
+type GroupSize = (typeof GROUP_SIZES)[number];
+/**
+ * The band that opens a group of rows: name in 600 (a heading), meta beside it, the projected
+ * total pinned to the right. Spans the whole row through `colspan`.
+ *
+ * @example
+ * <tr uiTr group><td ui-group-cell colspan="4" name="Brokerage" meta="Savings plan">...total...</td></tr>
+ */
+declare class UiGroupCell {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly meta: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<"md" | "lg">;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiGroupCell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiGroupCell, "td[ui-group-cell]", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Makes a link or button the way into its row. By default an invisible layer stretches over the
+ * whole row, so the row is one target for the pointer, the keyboard and a screen reader, and its
+ * focus ring wraps the row. With `[stretch]="false"` only the name is the
+ * target: it underlines on hover and takes its own ring. `current` marks the open line.
+ *
+ * @example
+ * <td uiTd primary><a uiRowLink href="/lines/42">Ferrari</a></td>
+ * <td uiTd primary><a uiRowLink [stretch]="false" href="/accounts/3">Brokerage</a></td>
+ */
+declare class UiRowLink {
+    readonly stretch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly current: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)" | "block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowLink, "a[uiRowLink], button[uiRowLink]", never, { "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** A control in another cell of a stretched-link row: lifts it above the layer that covers the row. */
+declare class UiRowAction {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowAction, "[uiRowAction]", never, {}, {}, never, never, true, never>;
+}
+/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */
+declare const SUB_TONES: readonly ["subtle", "stale", "inherit"];
+type SubTone = (typeof SUB_TONES)[number];
+/**
+ * A second line under a cell's main text. `narrow` shows it only under 1024px, where it carries
+ * the quantity, average cost and quote that were held back. Its amounts go through `ui-amount`
+ * so they mask.
+ *
+ * @example
+ * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>
+ * <span uiCellSub tone="stale">Quote of 24/09</span>
+ */
+declare class UiCellSub {
+    readonly narrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tone: _angular_core.InputSignal<"subtle" | "stale" | "inherit">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCellSub, never>;
+    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 { CELL_BREAKPOINTS, GROUP_SIZES, SUB_TONES, TABLE_ROWS, UiCellSub, UiGroup, UiGroupCell, UiRowAction, UiRowLink, UiTable, UiTd, UiTh, UiTr };
+export type { CellBreakpoint, GroupSize, SubTone, TableRow };

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

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+
+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: i0.Signal<Toast | null>;
+    show(message: string): void;
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToasts, never>;
+    static ɵprov: i0.ɵɵ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: i0.ɵɵFactoryDeclaration<UiToaster, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToaster, "ui-toaster", never, {}, {}, never, never, true, never>;
+}
+
+export { UiToaster, UiToasts };
+export type { Toast };