@joanroucoux/cairn-ui 0.1.5 → 0.3.0

package/styles/tokens.css

@@ -54,6 +54,80 @@
   --accent-foreground: light-dark(#111414, #edefee);
   --destructive: light-dark(#b8443c, #a33a33);
   --destructive-foreground: light-dark(#fafbfa, #fafbfa);
+
+  /* Type - Rubik, one family for logotype and interface (self-hosted, 400/500/600/700).
+     Names follow Tailwind 4 namespaces: registered in @theme they yield text-body, rounded-control,
+     ease-out... Reset Tailwind's defaults (--text-*: initial) so only this scale exists.
+     Weights: 400 text, 500 labels and buttons, 600 titles and the dominant figure, 700 logotype only. */
+  --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --numeric: tabular-nums; /* amounts that align: tables, lists, columns. The lone big figure stays proportional. */
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.0625rem; /* 12/17 axes, badges, price dates */
+  --text-label: 0.875rem;
+  --text-label--line-height: 1.25rem; /* 14/20 labels, secondary text, cells */
+  --text-body: 1rem;
+  --text-body--line-height: 1.5rem; /* 16/24 rows, body, inputs (no iOS zoom) */
+  --text-title: 1.25rem;
+  --text-title--line-height: 1.75rem; /* 20/28 card and section titles */
+  --text-heading: 1.75rem;
+  --text-heading--line-height: 2.125rem; /* 28/34 page title in the header */
+  --text-display: 2.5rem;
+  --text-display--line-height: 2.75rem; /* 40/44 the one dominant figure */
+  --tracking-display: -0.02em; /* heading, display */
+  --tracking-caption: 0.01em; /* caption */
+
+  /* Space - Tailwind's 4px step stays; these name the recurring gaps */
+  --gutter: 1rem; /* page side padding */
+  --inset-card: 1rem; /* card padding */
+  --stack-group: 1rem; /* between items of one group */
+  --stack-section: 1rem; /* between cards */
+  --row-min: 2.75rem; /* 44px touch target */
+  --header-height: 3.5rem; /* page header below the status bar / above the content */
+
+  /* Radius - one rule: controls 8, containers 12, pills round.
+     A control nested in a control subtracts its inset: calc(var(--radius-control) - 2px). */
+  --radius-control: 0.5rem; /* button, input, select, segmented, nav item, row hover */
+  --radius-container: 0.75rem; /* card, dialog, sheet top corners, tooltip */
+  --radius-pill: 9999px; /* avatar, badge, delta pill */
+
+  /* Motion - only transform and opacity animate. Never ease-in. Exits are faster than entries.
+     Nothing animates on page entry: the dashboard opens several times a day. */
+  --duration-press: 120ms; /* press feedback, on pointer down */
+  --duration-fast: 180ms; /* menus, segmented thumb */
+  --duration-base: 260ms; /* dialogs, sheets, list to detail, chart range change */
+  --duration-exit: 180ms; /* every exit */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* what appears or moves */
+  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* sheets rising from the bottom, and back */
+  --press-scale: 0.97;
+  --enter-scale: 0.95; /* dialogs and menus start at scale(0.95) and opacity 0, never scale(0) */
+  --pulse-duration: 1600ms; /* skeleton opacity pulse */
+
+  /* Browser theme color (meta theme-color, iOS status bar) follows the top of the page:
+     light #f7f8f8, dark #0a0b0b - the --background values. */
+}
+
+@media (min-width: 64rem) {
+  :root {
+    --gutter: 2rem;
+    --inset-card: 1.5rem;
+    --stack-section: 1.5rem;
+    --header-height: 4.5rem;
+  }
+}
+
+@media (pointer: fine) {
+  :root {
+    --row-min: 2.5rem; /* 40px with a mouse: denser tables */
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --press-scale: 1;
+    --enter-scale: 1; /* slides and scales become short fades */
+    --duration-base: 150ms;
+    --pulse-duration: 0ms;
+  }
 }
 
 :root[data-theme='light'] {

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

@@ -1,5 +1,69 @@
 import * as _angular_core from '@angular/core';
-import { Signal, ElementRef } from '@angular/core';
+import { InjectionToken, Signal, ElementRef } 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;
+
+/** 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];
+/**
+ * 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 {
+    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 retry: _angular_core.OutputEmitterRef<void>;
+    protected readonly retryButtonClasses = "mt-2 relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) min-h-(--row-min) px-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)";
+    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; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
+}
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 declare const AVATAR_SIZES: readonly ["sm", "md"];
@@ -13,52 +77,49 @@ type AvatarSize = (typeof AVATAR_SIZES)[number];
 declare class UiAvatar {
     readonly initials: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     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>;
 }
 
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
-declare const BADGE_VARIANTS: readonly ["primary", "secondary", "destructive", "outline"];
+declare const BADGE_VARIANTS: readonly ["neutral", "outline"];
 type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 /**
- * Small status descriptor for counts, states or labels.
+ * Small status descriptor for counts, states or labels, such as an instrument's asset class.
  *
  * @example
- * <ui-badge variant="secondary">Draft</ui-badge>
+ * <ui-badge>ETF</ui-badge>
  */
 declare class UiBadge {
-    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "destructive" | "outline">;
+    readonly variant: _angular_core.InputSignal<"neutral" | "outline">;
     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; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Available button variants. `ButtonVariant` is derived from this tuple. */
-declare const BUTTON_VARIANTS: readonly ["primary", "secondary", "outline", "destructive", "ghost"];
+declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive"];
 type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
-/** Available button sizes. `md` is the 44px touch target Cairn asks for everywhere. */
-declare const BUTTON_SIZES: readonly ["sm", "md", "lg"];
+/** Available button sizes. `md` is the touch target Cairn asks for everywhere. */
+declare const BUTTON_SIZES: readonly ["md", "lg", "xl", "icon"];
 type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
- * Styled native button. Applied as an attribute so the host keeps every native
- * button behavior (type, disabled, form submission, accessibility) for free.
- *
- * Also applies to an anchor, for the one case where the action really is a navigation:
- * a download the browser has to perform itself. The element stays a link, and so does
- * its role - never use this to make an ordinary link look like a form control.
+ * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
  *
  * @example
- * <button ui-button variant="destructive" size="sm">Delete</button>
- * <a ui-button variant="outline" href="/api/holdings/export" download>Export</a>
+ * <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" | "secondary" | "destructive" | "outline" | "ghost">;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly variant: _angular_core.InputSignal<"outline" | "primary" | "ghost" | "destructive">;
+    readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "icon">;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     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; }; }, {}, never, ["*"], true, 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; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Available card variants. `CardVariant` is derived from this tuple. */
@@ -75,7 +136,7 @@ type CardPadding = (typeof CARD_PADDINGS)[number];
  */
 declare class UiCard {
     readonly variant: _angular_core.InputSignal<"default" | "elevated">;
-    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
+    readonly padding: _angular_core.InputSignal<"md" | "sm" | "none">;
     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; }; }, {}, never, ["*"], true, never>;
@@ -125,8 +186,8 @@ declare class UiDelta {
 declare const DIALOG_WIDTHS: readonly ["md", "lg"];
 type DialogWidth = (typeof DIALOG_WIDTHS)[number];
 /**
- * Modal dialog on the native <dialog>: focus trap, focus return, Escape and the top layer
- * come from the platform. Two projection slots - the body, and [dialogActions] for the footer.
+ * Modal dialog on the native <dialog>: a sheet rising from the bottom under `64rem`, centered
+ * above it. Two projection slots - the body, and [dialogActions] for the footer.
  *
  * @example
  * <ui-dialog heading="Delete this holding?" [open]="confirming()" (dismissed)="confirming.set(false)">
@@ -139,7 +200,7 @@ declare class UiDialog {
     readonly heading: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly width: _angular_core.InputSignal<"md" | "lg">;
-    readonly open: _angular_core.InputSignal<boolean>;
+    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
     protected readonly headingId: string;
     protected readonly descriptionId: string;
@@ -178,10 +239,11 @@ declare class UiField {
     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>;
     protected readonly hintId: string;
     protected readonly errorId: string;
     protected readonly control: _angular_core.Signal<UiControl | undefined>;
-    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-[13px] font-medium text-(--foreground)">;
+    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label 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.
@@ -189,10 +251,10 @@ declare class UiField {
     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; }; }, {}, ["control"], ["*"], true, 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; }; }, {}, ["control"], ["*"], true, never>;
 }
 
-/** Available control sizes. `md` is the 44px touch target. */
+/** Available control sizes. `md` is the 44/40px touch target. */
 declare const CONTROL_SIZES: readonly ["sm", "md"];
 type ControlSize = (typeof CONTROL_SIZES)[number];
 /**
@@ -207,7 +269,7 @@ type ControlSize = (typeof CONTROL_SIZES)[number];
  * <input uiInput type="email" placeholder="you@example.com" />
  */
 declare class UiInput implements UiControl {
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
     readonly touched: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -232,6 +294,61 @@ declare class UiTextarea implements UiControl {
     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>;
 }
 
+/**
+ * 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.
+ *
+ * @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 menuId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly classes = "m-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100";
+    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; }; }, {}, ["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>;
+}
+
 /** 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];
@@ -246,19 +363,51 @@ declare class UiMeter {
     readonly value: _angular_core.InputSignal<number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly valueText: _angular_core.InputSignal<string>;
-    readonly tone: _angular_core.InputSignal<2 | 4 | 5 | 3 | 1 | 6>;
+    readonly tone: _angular_core.InputSignal<2 | 1 | 3 | 4 | 5 | 6>;
     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; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ *
+ * @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>;
+    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>;
+}
+
+/**
+ * Clickable row of a list: a holding, an envelope, an account.
+ *
+ * @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>;
+    protected readonly classes: _angular_core.Signal<string>;
+    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; }; }, {}, never, ["*"], true, never>;
+}
+
 type SegmentedOption = {
     value: string;
     label: string;
 };
 /**
- * Exclusive choice within a small, known set: a time range, a unit, a mode.
+ * 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" />
@@ -268,6 +417,7 @@ declare class UiSegmented {
     readonly label: _angular_core.InputSignal<string>;
     readonly value: _angular_core.ModelSignal<string>;
     protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    protected readonly thumbIndex: _angular_core.Signal<number>;
     protected optionClasses(optionValue: string): string;
     protected tabIndexFor(optionValue: string): number;
     protected select(optionValue: string): void;
@@ -287,7 +437,7 @@ declare class UiSegmented {
  * <select uiSelect><option value="pea">PEA</option></select>
  */
 declare class UiSelect implements UiControl {
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
     readonly touched: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -296,19 +446,21 @@ declare class UiSelect implements UiControl {
 }
 
 /**
- * Decorative placeholder for content that is still loading. Deliberately hidden from
- * assistive technology: the calling screen keeps its own role="status" sentence.
+ * 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" />
- * <ui-skeleton [height]="196" />
  */
 declare class UiSkeleton {
+    readonly shape: _angular_core.InputSignal<"figure" | "text" | "row" | "chart" | "ring">;
     readonly lines: _angular_core.InputSignal<number>;
     readonly height: _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, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, 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; }; }, {}, never, never, true, never>;
 }
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
@@ -332,12 +484,24 @@ type StatSize = (typeof STAT_SIZES)[number];
 declare class UiStat {
     readonly label: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<"hero" | "tile">;
-    protected readonly labelClasses = "text-[13px] font-medium text-(--subtle-foreground)";
+    protected readonly labelClasses = "text-label font-medium text-(--subtle-foreground)";
     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>;
 }
 
+/**
+ * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ *
+ * @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] appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] 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]";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
+}
+
 /** Breakpoints a secondary column can be held back until. */
 declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
 type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
@@ -346,6 +510,20 @@ declare class UiTable {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTable, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTable, "table[uiTable]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Body or group row. `group` draws the muted banner that opens each account inside a list of
+ * holdings: it carries no hover state of its own, unlike an ordinary row.
+ *
+ * @example
+ * <tr uiTr>...
+ * <tr uiTr group>...
+ */
+declare class UiTr {
+    readonly group: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"min-h-(--row-min) rounded-control bg-(--muted) font-semibold" | "rounded-control hover:bg-(--glow)">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTr, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTr, "tr[uiTr]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 /**
  * Column header. `numeric` right-aligns and lines the digits up; `from` holds a
  * secondary column back until the viewport is wide enough for it.
@@ -369,5 +547,30 @@ declare class UiTd {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTd, "td[uiTd]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMeter, UiSegmented, UiSelect, UiSkeleton, UiStat, UiTable, UiTd, UiTextarea, UiTh };
-export type { AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ControlSize, DeltaEmphasis, DialogWidth, MeterTone, SegmentedOption, StatSize, UiControlError };
+/**
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
+ *
+ * @example
+ * <nav ui-tab-bar>
+ *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ * </nav>
+ */
+declare class UiTabBar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTabBar, never>;
+    static ɵcmp: _angular_core.ɵɵ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: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
+}
+
+export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export type { AmountFormatOptions, AmountMasking, AmountNumeric, AsyncState, AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ControlSize, DeltaEmphasis, DialogWidth, MeterTone, SegmentedOption, StatSize, UiControlError };