@joanroucoux/cairn-ui 0.7.2 → 0.8.1

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

@@ -0,0 +1,72 @@
+import * as _angular_core from '@angular/core';
+
+/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
+declare const DIALOG_WIDTHS: readonly ["md", "lg"];
+type DialogWidth = (typeof DIALOG_WIDTHS)[number];
+/** Spacing presets. `DialogLayout` is derived from this tuple. */
+declare const DIALOG_LAYOUTS: readonly ["trade", "form", "list", "confirm"];
+type DialogLayout = (typeof DIALOG_LAYOUTS)[number];
+type LayoutClasses = {
+    dialog: string;
+    header: string;
+    title: string;
+    cross: string;
+    icon: string;
+    handle: string;
+    body: string;
+    footer: string;
+};
+/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
+declare const DIALOG_CLOSE_REASONS: readonly ["escape", "backdrop", "cross", "drag", "programmatic"];
+type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];
+/**
+ * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
+ *
+ * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
+ * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
+ *
+ * @example
+ * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
+ *   <p>Body</p>
+ *   <button dialogActions ui-button variant="outline" class="max-lg:hidden" (click)="buying.set(false)">Cancel</button>
+ *   <button dialogActions ui-button>Buy 40 shares</button>
+ * </ui-dialog>
+ */
+declare class UiDialog {
+    #private;
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
+    readonly layout: _angular_core.InputSignal<"form" | "trade" | "list" | "confirm">;
+    readonly truncateDescription: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly width: _angular_core.InputSignal<"md" | "lg" | (string & {})>;
+    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<"drag" | "escape" | "backdrop" | "cross" | "programmatic">;
+    protected readonly headingId: string;
+    protected readonly descriptionId: string;
+    protected readonly bodyId: string;
+    protected readonly scrollable: _angular_core.WritableSignal<boolean>;
+    protected readonly describedBy: _angular_core.Signal<string | null>;
+    protected readonly widthValue: _angular_core.Signal<string>;
+    protected readonly spec: _angular_core.Signal<LayoutClasses>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly titleClasses: _angular_core.Signal<string>;
+    protected readonly crossClasses: _angular_core.Signal<string>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    protected readonly footerClasses: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    protected close(reason: DialogCloseReason): void;
+    protected onCancel(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onPointerDown(event: MouseEvent): void;
+    protected onClick(event: MouseEvent): void;
+    protected onNativeClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDialog, "ui-dialog", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "truncateDescription": { "alias": "truncateDescription"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "closed": "closed"; }, never, ["*", "[dialogActions]"], true, never>;
+}
+
+export { DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, UiDialog };
+export type { DialogCloseReason, DialogLayout, DialogWidth };

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

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+
+type DonutSlice = {
+    id: string;
+    label: string;
+    value: number;
+    sublabel?: string;
+};
+type Ramp = 1 | 2 | 3 | 4 | 5 | 6;
+type RankedSlice = DonutSlice & {
+    share: number;
+    ramp: Ramp;
+    members: string[];
+};
+
+type PositionedSlice = RankedSlice & {
+    dash: string;
+    offset: string;
+};
+
+/**
+ * A ring chart with a legend: slices rank from largest to smallest on a grey ramp, and hovering,
+ * focusing or activating a legend row highlights its slice and centres it in the ring.
+ *
+ * @example
+ * <ui-donut [slices]="byAssetClass()" label="Par classe d'actif" othersLabel="Autres" [valueFormat]="formatEur" [shareFormat]="formatShare" (sliceSelect)="goToHoldings($event)" />
+ */
+declare class UiDonut {
+    readonly slices: _angular_core.InputSignal<DonutSlice[]>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly othersLabel: _angular_core.InputSignal<string>;
+    readonly valueFormat: _angular_core.InputSignal<(value: number) => string>;
+    readonly shareFormat: _angular_core.InputSignal<(share: number) => string>;
+    readonly legendHref: _angular_core.InputSignal<((id: string) => string | null) | undefined>;
+    readonly sliceSelect: _angular_core.OutputEmitterRef<string>;
+    protected readonly activeId: _angular_core.WritableSignal<string | null>;
+    protected readonly ranked: _angular_core.Signal<RankedSlice[]>;
+    protected readonly positioned: _angular_core.Signal<PositionedSlice[]>;
+    protected readonly active: _angular_core.Signal<RankedSlice | null>;
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    protected readonly radius = 78;
+    protected readonly ringWidth = 30;
+    protected strokeColor(slice: RankedSlice): string;
+    protected sliceClasses(slice: RankedSlice): string;
+    protected dotClasses(slice: RankedSlice): string;
+    protected rowClasses(slice: RankedSlice): string;
+    protected subLabel(slice: RankedSlice): string;
+    protected isActive(slice: RankedSlice): boolean;
+    protected highlight(id: string): void;
+    protected clearHighlight(id: string): void;
+    protected hrefFor(id: string): string | null;
+    protected follow(event: MouseEvent, slice: RankedSlice): void;
+    protected select(slice: RankedSlice): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDonut, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDonut, "ui-donut", never, { "slices": { "alias": "slices"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "othersLabel": { "alias": "othersLabel"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "shareFormat": { "alias": "shareFormat"; "required": false; "isSignal": true; }; "legendHref": { "alias": "legendHref"; "required": false; "isSignal": true; }; }, { "sliceSelect": "sliceSelect"; }, never, never, true, never>;
+}
+
+export { UiDonut };
+export type { DonutSlice };

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

@@ -0,0 +1,19 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Centred empty state: a title, a hint and an action slot, such as a catalogue search that matches
+ * nothing. The padding is 24px, 48px from 64rem.
+ *
+ * @example
+ * <ui-empty heading="Aucun instrument ne correspond à « zzz »" hint="La recherche porte sur le nom et l'ISIN.">
+ *   <button ui-button variant="outline" size="md" type="button">Ajouter une ligne</button>
+ * </ui-empty>
+ */
+declare class UiEmpty {
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiEmpty, "ui-empty", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { UiEmpty };

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

@@ -0,0 +1,15 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Link to another site: the label followed by an external-link icon. A 44px target on touch,
+ * an underline on hover with a mouse.
+ *
+ * @example
+ * <a ui-external-link href="https://example.com" target="_blank" rel="noopener">Page on example.com</a>
+ */
+declare class UiExternalLink {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiExternalLink, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiExternalLink, "a[ui-external-link]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { UiExternalLink };

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

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+
+/** Available fact row sizes. `FactSize` is derived from this tuple. */
+declare const FACT_SIZES: readonly ["md", "sm", "auto", "recap"];
+type FactSize = (typeof FACT_SIZES)[number];
+/** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
+declare const FACT_SUB_TONES: readonly ["subtle", "stale"];
+type FactSubTone = (typeof FACT_SUB_TONES)[number];
+/**
+ * The list that holds `div[ui-fact]` rows, as a native description list.
+ *
+ * @example
+ * <dl uiFacts>
+ *   <div ui-fact label="Quantity">500</div>
+ *   <div ui-fact label="Price" sub="24/09 · Yahoo">28,64 €</div>
+ * </dl>
+ */
+declare class UiFacts {
+    readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"m-0 flex flex-col shadow-[inset_0_1px_0_var(--hairline)]" | "m-0 flex flex-col">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFacts, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFacts, "dl[uiFacts]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * One fact of a `dl[uiFacts]`: a label on the left, its value on the right, an optional sub-line
+ * under the value, and a hairline above every row but the first at the `md` size (the `sm` desktop list is separated by space only). The projected content is the value.
+ *
+ * @example
+ * <div ui-fact label="Price" sub="24/09 · Yahoo" subTone="stale">28,64 €</div>
+ */
+declare class UiFact {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly sub: _angular_core.InputSignal<string | undefined>;
+    readonly subTone: _angular_core.InputSignal<"subtle" | "stale">;
+    readonly size: _angular_core.InputSignal<"md" | "sm" | "auto" | "recap">;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly valueClasses: _angular_core.Signal<string>;
+    protected readonly subClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFact, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiFact, "div[ui-fact]", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sub": { "alias": "sub"; "required": false; "isSignal": true; }; "subTone": { "alias": "subTone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { FACT_SIZES, FACT_SUB_TONES, UiFact, UiFacts };
+export type { FactSize, FactSubTone };

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

@@ -0,0 +1,84 @@
+import * as _joanroucoux_cairn_ui_control from '@joanroucoux/cairn-ui/control';
+import * as _angular_core from '@angular/core';
+
+/**
+ * Marks an element, typically an 18px svg icon, as the leading content of a `ui-field`: it sits
+ * inside the control's left edge and the control's text is inset to clear it. Decorative, so hidden
+ * from assistive technologies.
+ *
+ * @example
+ * <ui-field label="Search" labelHidden>
+ *   <svg uiFieldLeading width="18" height="18" viewBox="0 0 24 24">...</svg>
+ *   <input uiInput type="search" />
+ * </ui-field>
+ */
+declare class UiFieldLeading {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldLeading, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldLeading, "[uiFieldLeading]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an element, typically an icon button, as the trailing action of a `ui-field`: it sits on the
+ * control's right edge, square to the control's height, and the control's text is padded to clear it.
+ *
+ * @example
+ * <ui-field label="Password">
+ *   <input uiInput type="password" size="xl" />
+ *   <button uiFieldTrailing type="button" aria-label="Show the password" [attr.aria-pressed]="shown()">...</button>
+ * </ui-field>
+ *
+ * A toggle such as this one should carry `aria-pressed`. The slot shares the right edge with `unit`:
+ * set one or the other, not both.
+ */
+declare class UiFieldTrailing {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldTrailing, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldTrailing, "[uiFieldTrailing]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Label, control, hint and error as one unit. The control stays a plain native element:
+ * the field finds it in its own projected content and wires the ARIA attributes onto it.
+ *
+ * The message comes from the caller's `error`, or, where none is set, from the projected control's
+ * own validation state once it is touched.
+ *
+ * @example
+ * <ui-field label="Quantity" hint="Leave empty if unknown">
+ *   <input uiInput type="number" [formField]="form.quantity" />
+ * </ui-field>
+ *
+ * @example
+ * <ui-field label="ISIN or name" [error]="blank() ? 'Enter an ISIN' : undefined">
+ *   <input uiInput type="search" />
+ * </ui-field>
+ *
+ * @example
+ * <ui-field label="Search holdings" labelHidden>
+ *   <input uiInput type="search" placeholder="Instrument or account" />
+ * </ui-field>
+ */
+declare class UiField {
+    #private;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly labelHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    readonly unit: _angular_core.InputSignal<string | undefined>;
+    readonly optional: _angular_core.InputSignal<string | undefined>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly control: _angular_core.Signal<_joanroucoux_cairn_ui_control.UiControl | undefined>;
+    protected readonly leading: _angular_core.Signal<UiFieldLeading | undefined>;
+    protected readonly trailing: _angular_core.Signal<UiFieldTrailing | undefined>;
+    protected readonly rowClasses: _angular_core.Signal<string>;
+    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label leading-[17px] font-medium text-(--muted-foreground)">;
+    /**
+     * The caller's own `error` wins: it is the only way to report something the control does not
+     * know about, such as a search box refusing an empty query.
+     */
+    protected readonly message: _angular_core.Signal<string | undefined>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, ["control", "leading", "trailing"], ["[uiFieldLeading]", "*", "[uiFieldTrailing]"], true, never>;
+}
+
+export { UiField, UiFieldLeading, UiFieldTrailing };

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

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+
+type FilterChipOption = {
+    value: string;
+    label: string;
+    count?: number | string | null;
+};
+/**
+ * A row of single-choice filter pills, each with an optional count, that narrows a list in place:
+ * an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a
+ * fine pointer it wraps.
+ *
+ * @example
+ * <ui-filter-chips ariaLabel="Filter by class" [options]="classes()" [(value)]="selectedClass" />
+ */
+declare class UiFilterChips {
+    readonly options: _angular_core.InputSignal<FilterChipOption[]>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly chipClasses = "flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2";
+    protected pillClasses(optionValue: string): string;
+    protected countClasses(optionValue: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFilterChips, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiFilterChips, "ui-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { UiFilterChips };
+export type { FilterChipOption };

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

@@ -0,0 +1,51 @@
+import * as _angular_core from '@angular/core';
+import { UiControl, UiControlError } from '@joanroucoux/cairn-ui/control';
+
+/** Available control sizes. `md` is the 44/40px touch target; `lg` and `xl` are the 48px sheet and sign-in fields. */
+declare const CONTROL_SIZES: readonly ["sm", "md", "lg", "xl"];
+type ControlSize = (typeof CONTROL_SIZES)[number];
+declare const CONTROL_BASE_CLASSES = "w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50";
+declare const CONTROL_SURFACES: readonly ["background", "card"];
+type ControlSurface = (typeof CONTROL_SURFACES)[number];
+declare const CONTROL_SURFACE_CLASSES: Record<ControlSurface, string>;
+declare const CONTROL_SIZE_CLASSES: Record<ControlSize, string>;
+/**
+ * Styled native text input. A directive (not a wrapper component) so the host
+ * stays a plain <input>: every forms flavor (ngModel, reactive, signal forms)
+ * and every native attribute keep working without any plumbing.
+ *
+ * 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
+ * <input uiInput type="email" placeholder="you@example.com" />
+ */
+declare class UiInput implements UiControl {
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl">;
+    readonly surface: _angular_core.InputSignal<"background" | "card">;
+    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<UiInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiInput, "input[uiInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Styled native textarea. Lives beside the input because it shares every one of its
+ * classes; it takes no size, since a textarea grows from a floor instead of sitting
+ * at a fixed height.
+ *
+ * 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
+ * <textarea uiTextarea maxlength="280"></textarea>
+ */
+declare class UiTextarea implements UiControl {
+    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
+    readonly touched: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTextarea, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTextarea, "textarea[uiTextarea]", never, { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { CONTROL_BASE_CLASSES, CONTROL_SIZES, CONTROL_SIZE_CLASSES, CONTROL_SURFACES, CONTROL_SURFACE_CLASSES, UiInput, UiTextarea };
+export type { ControlSize, ControlSurface };

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

@@ -0,0 +1,114 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+type ChartPoint = {
+    t: number;
+    v: number;
+};
+type PlottedPoint = ChartPoint & {
+    x: number;
+    y: number;
+};
+type ChartGeometry = {
+    line: string;
+    end: {
+        x: number;
+        y: number;
+    };
+    start: {
+        y: number;
+    };
+    points: PlottedPoint[];
+    plotBottom: number;
+    plotTop: number;
+};
+
+type TickLabel = {
+    text: string;
+    classes: string;
+};
+
+declare const TOOLTIP_SIZES: readonly ["compact", "large"];
+type TooltipSize = (typeof TOOLTIP_SIZES)[number];
+type AxisTicks = 3 | 5 | 'auto';
+
+type PlotRef = ElementRef<SVGSVGElement>;
+type LineRef = ElementRef<SVGPathElement>;
+type EndRef = ElementRef<SVGCircleElement>;
+/**
+ * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
+ *
+ * Axis labels are never repeated: a tick whose `axisFormat` text equals the previous drawn label is
+ * not rendered. The first tick always is, so only the last edge label can drop. With `axisTicks="3"`
+ * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
+ * three core ticks below it. Tick positions are unchanged.
+ *
+ * A new series interpolates from the drawn curve, fading the start label and the dashed line. With
+ * `rangeKey` bound, only a series that comes with a new key does so: a new series under the same key
+ * (a reload after a buy) is drawn at once, with no fade. The key may change before its series arrives.
+ *
+ * @example
+ * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
+ */
+declare class UiLineChart {
+    #private;
+    readonly points: _angular_core.InputSignal<ChartPoint[]>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly valueFormat: _angular_core.InputSignal<(value: number) => string>;
+    readonly tooltipFormat: _angular_core.InputSignal<((point: ChartPoint) => string) | undefined>;
+    readonly deltaFormat: _angular_core.InputSignal<(delta: number) => string>;
+    readonly timeFormat: _angular_core.InputSignal<(time: number) => string>;
+    readonly axisFormat: _angular_core.InputSignal<(time: number) => string>;
+    readonly startLabel: _angular_core.InputSignal<string>;
+    readonly timeColumnLabel: _angular_core.InputSignal<string>;
+    readonly valueColumnLabel: _angular_core.InputSignal<string>;
+    readonly sparkline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tooltip: _angular_core.InputSignal<"auto" | "compact" | "large">;
+    readonly tooltipDelta: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly axisGap: _angular_core.InputSignal<number | "auto">;
+    readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 5 | 3>;
+    readonly rangeKey: _angular_core.InputSignal<string | null>;
+    protected readonly svgRef: _angular_core.Signal<PlotRef>;
+    protected readonly lineRef: _angular_core.Signal<LineRef | undefined>;
+    protected readonly endRef: _angular_core.Signal<EndRef | undefined>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly held: _angular_core.WritableSignal<ChartGeometry | null>;
+    protected readonly measuredSize: _angular_core.WritableSignal<{
+        width: number;
+        height: number;
+    } | null>;
+    protected readonly effectiveWidth: _angular_core.Signal<number>;
+    protected readonly effectiveHeight: _angular_core.Signal<number>;
+    protected readonly plotHeight: _angular_core.Signal<number>;
+    protected readonly tooltipStyle: (point: PlottedPoint) => string;
+    protected readonly tooltipClasses: _angular_core.Signal<{
+        box: string;
+        value: string;
+        delta: string;
+    }>;
+    protected readonly geometry: _angular_core.Signal<ChartGeometry | null>;
+    protected readonly shown: _angular_core.Signal<ChartGeometry | null>;
+    protected readonly startFade: _angular_core.Signal<"opacity-0 duration-(--duration-exit)" | "duration-(--duration-fast)">;
+    protected readonly ticks: _angular_core.Signal<PlottedPoint[]>;
+    protected readonly tickTexts: _angular_core.Signal<(TickLabel | null)[]>;
+    protected readonly active: _angular_core.Signal<PlottedPoint | null>;
+    protected readonly startLabelInfo: _angular_core.Signal<{
+        label: string;
+        placement: {
+            y: number;
+            x: number;
+            anchor: "start" | "end";
+        };
+    } | null>;
+    constructor();
+    protected deltaFor(point: PlottedPoint): number;
+    protected deltaClasses(point: PlottedPoint): string;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerLeave(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLineChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "tooltipFormat": { "alias": "tooltipFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; "rangeKey": { "alias": "rangeKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { UiLineChart };
+export type { AxisTicks, ChartPoint, TooltipSize };

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

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * One action of a `ui-menu`; `destructive` paints it in `--negative`.
+ *
+ * @example
+ * <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ */
+declare class UiMenuItem {
+    #private;
+    readonly destructive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    focus(): void;
+    hasFocus(): boolean;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenuItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuItem, "button[uiMenuItem]", never, { "destructive": { "alias": "destructive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below
+ * 64rem it opens as a bottom action sheet above the tab bar instead of beside its trigger, and
+ * `heading` names what the actions apply to. `width` fixes the outer popover width in pixels (the sheet
+ * always spans the screen below 64rem); without it the menu fits its content.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ * <ui-menu #menu label="Line actions">
+ *   <button uiMenuItem (click)="edit()">Edit</button>
+ *   <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ * </ui-menu>
+ */
+declare class UiMenu {
+    #private;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly sheet: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    readonly width: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    readonly menuId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly hasWidth: _angular_core.Signal<boolean>;
+    protected readonly widthVar: _angular_core.Signal<string | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly items: _angular_core.Signal<readonly UiMenuItem[]>;
+    open(trigger: HTMLElement): void;
+    close(): void;
+    protected onToggle(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMenu, "ui-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sheet": { "alias": "sheet"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+/**
+ * Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and
+ * `aria-controls` on it.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ */
+declare class UiMenuTrigger {
+    #private;
+    readonly uiMenuTrigger: _angular_core.InputSignal<UiMenu>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenuTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuTrigger, "[uiMenuTrigger]", never, { "uiMenuTrigger": { "alias": "uiMenuTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { UiMenu, UiMenuItem, UiMenuTrigger };

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

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+/** Track thicknesses. `MeterSize` is derived from this tuple. */
+declare const METER_SIZES: readonly ["md", "sm"];
+type MeterSize = (typeof METER_SIZES)[number];
+/** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
+declare const METER_TONES: readonly [1, 2, 3, 4, 5, 6];
+type MeterTone = (typeof METER_TONES)[number];
+/**
+ * Proportion of a whole, drawn as a single bar. One bar per category, never a stacked
+ * strip: without hue to separate segments, length has to do the work alone.
+ *
+ * @example
+ * <ui-meter [value]="0.463" label="Funds" valueText="46.3% - 128,656.00 EUR" [tone]="1" />
+ */
+declare class UiMeter {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly valueText: _angular_core.InputSignal<string>;
+    readonly tone: _angular_core.InputSignal<2 | 1 | 3 | 4 | 5 | 6>;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
+    protected readonly trackClasses: _angular_core.Signal<string>;
+    protected readonly percent: _angular_core.Signal<number>;
+    protected readonly fillClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMeter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMeter, "ui-meter", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { METER_SIZES, METER_TONES, UiMeter };
+export type { MeterSize, MeterTone };