@area8975/ui 0.1.1-dev.9 → 0.2.1-dev.28

package/types/area8975-ui.d.ts

@@ -1,37 +1,64 @@
-import ApexCharts$1 from "apexcharts";
 import * as i0 from "@angular/core";
-import { ElementRef, OnDestroy, OnInit, TemplateRef, WritableSignal } from "@angular/core";
+import { ElementRef, EnvironmentProviders, InjectionToken, OnDestroy, OnInit, Provider, Signal, TemplateRef, WritableSignal } from "@angular/core";
+import ApexCharts$1 from "apexcharts";
 import { Placement } from "@floating-ui/dom";
 import { Observable } from "rxjs";
+import { IconType } from "@ng-icons/core";
+/** One entry in a legend, the colour ties it to its marks. */
+export interface ChartLegendItem {
+  name: string;
+  colour: string;
+  /** Shows the key as a dashed line, for series told apart by line style. */
+  dashed?: boolean;
+  /** Text to show instead of `name`. `name` still ties the item to its series. */
+  label?: string;
+}
+/** Anything a legend can be linked to with `for`, every chart is one. */
+export interface ChartLegendSource {
+  readonly legendItems: Signal<ChartLegendItem[]>;
+  readonly legendNote: Signal<string>;
+  /** Series switched off from the legend. */
+  readonly hiddenSeries: WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: WritableSignal<string | null>;
+}
+/** Where a chart draws its own legend, `none` when one is linked elsewhere. */
+export type ChartLegendPosition = 'auto' | 'none';
 /**
  * Categorical colours for chart series, in a fixed order that was checked for
  * colour blindness (adjacent pairs stay apart for protan, deutan and tritan).
  * Keep the order, a series takes the next slot, never a generated colour.
  */
-declare const CHART_PALETTE: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#4a3aa7", "#e34948"];
+export declare const CHART_PALETTE: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#4a3aa7", "#e34948"];
+/** Violet and green are lightened to keep 3:1 contrast on a dark card. */
+export declare const CHART_PALETTE_DARK: readonly ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#2e9e2e", "#8a7cf0", "#e34948"];
 /** Past eight series, fold the rest into "Other" instead of reusing a colour. */
-declare const CHART_MAX_SERIES: 8;
+export declare const CHART_MAX_SERIES: 8;
 /** Lines can go to sixteen, the second eight reuse the colours dashed. */
-declare const CHART_MAX_LINE_SERIES: number;
-declare const CHART_INK: {
-  readonly text: "#1e2939";
-  readonly muted: "#6a7282";
-  readonly grid: "#e5e7eb";
-  readonly surface: "#ffffff";
-  readonly context: "#d1d5dc";
-};
-interface ChartSeriesStyle {
+export declare const CHART_MAX_LINE_SERIES: number;
+/** Chart chrome, apex needs real colours so these can't be CSS variables. */
+export interface ChartInk {
+  text: string;
+  muted: string;
+  grid: string;
+  surface: string;
+  context: string;
+}
+export declare const CHART_INK: ChartInk;
+export declare const CHART_INK_DARK: ChartInk;
+export declare function chartInk(dark: boolean): ChartInk;
+export interface ChartSeriesStyle {
   colour: string;
   dashed: boolean;
 }
 /** Past the eighth slot a series goes grey, reusing a colour would make two series look the same. */
-declare function chartColour(index: number): string;
+export declare function chartColour(index: number, dark?: boolean): string;
 /**
  * Colour plus line style for a slot. With `dashes` the ninth to sixteenth
  * slots reuse the colours as dashed lines, colour and dash together keep
  * them apart. Anything past that is grey.
  */
-declare function chartSeriesStyle(index: number, dashes: boolean): ChartSeriesStyle;
+export declare function chartSeriesStyle(index: number, dashes: boolean, dark?: boolean): ChartSeriesStyle;
 export type ChartOptions = ApexCharts$1.ApexOptions;
 /** One named set of values, one per category. */
 export interface ChartSeries {
@@ -39,18 +66,28 @@ export interface ChartSeries {
   data: (number | null)[];
   /** Overrides the palette slot, keep it for when a series must match something else. */
   colour?: string;
+  /** Draws the line dashed, e.g. to set projected figures apart from actual ones. Bars ignore it. */
+  dashed?: boolean;
 }
+/** `fill` takes the host's height, which has to come from layout. */
+export type ChartHeight = number | 'fill';
 /** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
 export type ChartValueFormatter = (value: number) => string;
 /** Inputs every chart with categories along one axis and values up the other shares. */
-declare abstract class UiAxisChartBase {
+declare abstract class UiAxisChartBase implements ChartLegendSource {
+  protected readonly uiFormat: import("@area8975/ui").UiFormat;
+  private readonly privacy;
+  protected readonly dark: import("@angular/core").WritableSignal<boolean>;
+  protected readonly ink: import("@angular/core").Signal<import("@area8975/ui").ChartInk>;
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
   readonly categories: import("@angular/core").InputSignal<string[]>;
   /** Says what the chart shows, e.g. "Spending by month". */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  readonly height: import("@angular/core").InputSignal<number>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
   /** Used on the value axis, the tooltip and the table, e.g. to show money. */
   readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /** Masks the values in privacy mode. Defaults to whether `valueFormatter` came from `injectMoneyFormatter`. */
+  readonly sensitive: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
   /** Heading for the category column in the data table. */
   readonly categoryLabel: import("@angular/core").InputSignal<string>;
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -64,22 +101,30 @@ declare abstract class UiAxisChartBase {
    * matter stand out. The way to show more series than there are colours.
    */
   readonly highlight: import("@angular/core").InputSignal<string[] | null>;
+  readonly highlightKeepsColours: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
+  readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
   /** Series switched off in the legend. */
-  protected readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: import("@angular/core").WritableSignal<string | null>;
   /** Charts that draw lines can tell series apart by dashes too, bars can't. */
   protected readonly supportsDashes: boolean;
+  private readonly money;
+  protected readonly privacyMode: import("@angular/core").Signal<"visible" | "discreet" | "hidden">;
+  protected readonly masked: import("@angular/core").Signal<boolean>;
+  protected readonly concealed: import("@angular/core").Signal<boolean>;
+  protected readonly displayFormatter: import("@angular/core").Signal<ChartValueFormatter>;
+  protected readonly apexHeight: import("@angular/core").Signal<number | "100%">;
   protected readonly isEmpty: import("@angular/core").Signal<boolean>;
   protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
+  private readonly colourOrder;
   protected readonly styles: import("@angular/core").Signal<ChartSeriesStyle[]>;
   protected readonly colours: import("@angular/core").Signal<string[]>;
   protected readonly dashed: import("@angular/core").Signal<boolean[]>;
   /** Grey context series stay out of the legend, the note says how many there are. */
-  protected readonly legendItems: import("@angular/core").Signal<{
-    colour: string;
-    dashed: boolean;
-    name: string;
-  }[]>;
-  protected readonly legendNote: import("@angular/core").Signal<string>;
+  readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").Signal<string>;
   protected formatValue(value: number | null | undefined): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiAxisChartBase, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<UiAxisChartBase, never, never, {
@@ -108,6 +153,11 @@ declare abstract class UiAxisChartBase {
       "required": false;
       "isSignal": true;
     };
+    "sensitive": {
+      "alias": "sensitive";
+      "required": false;
+      "isSignal": true;
+    };
     "categoryLabel": {
       "alias": "categoryLabel";
       "required": false;
@@ -138,6 +188,16 @@ declare abstract class UiAxisChartBase {
       "required": false;
       "isSignal": true;
     };
+    "highlightKeepsColours": {
+      "alias": "highlightKeepsColours";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -147,6 +207,8 @@ declare abstract class UiAxisChartBase {
 export declare class UiBarChartComponent extends UiAxisChartBase {
   readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
   readonly stacked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Picks out one category, e.g. the month a page is showing, and fades the rest. */
+  readonly highlightCategory: import("@angular/core").InputSignal<string | null>;
   protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiBarChartComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiBarChartComponent, "ui-bar-chart", never, {
@@ -160,6 +222,11 @@ export declare class UiBarChartComponent extends UiAxisChartBase {
       "required": false;
       "isSignal": true;
     };
+    "highlightCategory": {
+      "alias": "highlightCategory";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /** vertical draws columns rising from the bottom, horizontal draws bars from the left. */
@@ -181,6 +248,7 @@ export declare class UiChartComponent {
   private readonly canvas;
   private readonly chart;
   private destroyed;
+  private drawnNames;
   constructor();
   private applyHidden;
   private applyEmphasis;
@@ -209,13 +277,6 @@ export declare class UiChartComponent {
     };
   }, {}, never, never, true, never>;
 }
-/** One entry in a legend, the colour ties it to its marks. */
-export interface ChartLegendItem {
-  name: string;
-  colour: string;
-  /** Shows the key as a dashed line, for series told apart by line style. */
-  dashed?: boolean;
-}
 /** The loading, empty and data table states around a chart, shared by every chart type. */
 export declare class UiChartFrameComponent {
   readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions>;
@@ -227,13 +288,17 @@ export declare class UiChartFrameComponent {
   readonly hiddenSeries: import("@angular/core").ModelSignal<string[]>;
   readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
   readonly categoryLabel: import("@angular/core").InputSignal<string>;
-  readonly height: import("@angular/core").InputSignal<number>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
   readonly emptyText: import("@angular/core").InputSignal<string>;
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly empty: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly masked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showLegend: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The series the legend is pointing at, the others fade while it's set. */
-  protected readonly emphasis: import("@angular/core").WritableSignal<string | null>;
+  readonly emphasis: import("@angular/core").ModelSignal<string | null>;
+  protected readonly fill: import("@angular/core").Signal<boolean>;
+  protected readonly fixedHeight: import("@angular/core").Signal<number | null>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiChartFrameComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartFrameComponent, "ui-chart-frame", never, {
     "options": {
@@ -306,8 +371,24 @@ export declare class UiChartFrameComponent {
       "required": false;
       "isSignal": true;
     };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "emphasis": {
+      "alias": "emphasis";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "hiddenSeries": "hiddenSeriesChange";
+    "emphasis": "emphasisChange";
   }, never, never, true, never>;
 }
 /**
@@ -321,6 +402,9 @@ export declare class UiChartTableComponent {
   readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
   readonly categoryLabel: import("@angular/core").InputSignal<string>;
   readonly visible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Values are masks, screen readers hear "amount hidden" instead. */
+  readonly masked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected isValue(value: number | null | undefined): value is number;
   protected format(value: number | null | undefined): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiChartTableComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartTableComponent, "ui-chart-table", never, {
@@ -354,14 +438,25 @@ export declare class UiChartTableComponent {
       "required": false;
       "isSignal": true;
     };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
- * A row of colour keys naming what each colour means. Charts use it above
- * the plot, but it works next to anything coloured by series.
+ * A row of colour keys naming what each colour means. Link it to a chart
+ * with `for`, or pass `items` to use it next to anything coloured by series.
  */
 export declare class UiChartLegendComponent {
   readonly items: import("@angular/core").InputSignal<ChartLegendItem[]>;
+  /** Small text after the items, e.g. how many series aren't listed. */
+  readonly note: import("@angular/core").InputSignal<string>;
+  /** A chart to take items from and hide or fade series on, set its `legend` to `none`. */
+  readonly for: import("@angular/core").InputSignal<ChartLegendSource | null>;
+  /** Adjusts the linked chart's items, e.g. to relabel them. Keep each `name`. */
+  readonly itemsWith: import("@angular/core").InputSignal<((items: ChartLegendItem[]) => ChartLegendItem[]) | null>;
   /** Names of items switched off, bound two-way when `toggleable`. */
   readonly hidden: import("@angular/core").ModelSignal<string[]>;
   /** Lets each item be clicked to hide or show its series. */
@@ -371,6 +466,9 @@ export declare class UiChartLegendComponent {
   private readonly hovered;
   private readonly focused;
   private readonly pointedAt;
+  protected readonly shownItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  protected readonly shownNote: import("@angular/core").Signal<string>;
+  private readonly hiddenNames;
   protected readonly visibleCount: import("@angular/core").Signal<number>;
   constructor();
   protected hover(name: string | null): void;
@@ -382,7 +480,22 @@ export declare class UiChartLegendComponent {
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartLegendComponent, "ui-chart-legend", never, {
     "items": {
       "alias": "items";
-      "required": true;
+      "required": false;
+      "isSignal": true;
+    };
+    "note": {
+      "alias": "note";
+      "required": false;
+      "isSignal": true;
+    };
+    "for": {
+      "alias": "for";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemsWith": {
+      "alias": "itemsWith";
+      "required": false;
       "isSignal": true;
     };
     "hidden": {
@@ -409,6 +522,10 @@ export declare class UiLineChartComponent extends UiAxisChartBase {
   readonly curve: import("@angular/core").InputSignal<"straight" | "smooth" | "stepline">;
   /** Draws a dot on every point, not just the hovered one. Handy with few points. */
   readonly showPoints: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Shades this category and everything after it as a forecast. */
+  readonly projectedFrom: import("@angular/core").InputSignal<string | null>;
+  readonly projectedLabel: import("@angular/core").InputSignal<string>;
+  private readonly projectedAnnotations;
   protected readonly chartOptions: import("@angular/core").Signal<ApexCharts.ApexOptions>;
   private tooltipOrder;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiLineChartComponent, never>;
@@ -423,6 +540,16 @@ export declare class UiLineChartComponent extends UiAxisChartBase {
       "required": false;
       "isSignal": true;
     };
+    "projectedFrom": {
+      "alias": "projectedFrom";
+      "required": false;
+      "isSignal": true;
+    };
+    "projectedLabel": {
+      "alias": "projectedLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /** How points are joined, straight segments, a smooth curve, or steps. */
@@ -436,13 +563,14 @@ export type LineChartCurve = typeof LineChartCurves[number];
  */
 export declare class UiPieChartComponent extends UiAxisChartBase {
   readonly variant: import("@angular/core").InputSignal<"pie" | "donut">;
+  private readonly percentFormatter;
   /** Shown above the total in the middle of a donut. */
   readonly totalLabel: import("@angular/core").InputSignal<string>;
   protected readonly values: import("@angular/core").Signal<(number | null)[]>;
   protected readonly isEmpty: import("@angular/core").Signal<boolean>;
   protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
   protected readonly styles: import("@angular/core").Signal<ChartSeriesStyle[]>;
-  protected readonly legendItems: import("@angular/core").Signal<{
+  readonly legendItems: import("@angular/core").Signal<{
     colour: string;
     dashed: boolean;
     name: string;
@@ -467,6 +595,42 @@ export declare class UiPieChartComponent extends UiAxisChartBase {
 export declare const PieChartVariants: readonly ["pie", "donut"];
 /** @see {@link PieChartVariants} */
 export type PieChartVariant = typeof PieChartVariants[number];
+export interface UiFormat {
+  /** ISO 4217 code, e.g. "GBP". */
+  currency: string;
+  /** BCP 47 tag, e.g. "en-GB". */
+  locale: string;
+}
+export declare const UI_FORMAT_DEFAULTS: UiFormat;
+export declare const UI_FORMAT: InjectionToken<UiFormat>;
+export declare function provideUiFormat(format: Partial<UiFormat>): Provider;
+export interface MoneyFormatterParts {
+  format: (value: number) => string;
+  mask: string;
+}
+/** The unmasked formatter and mask behind a formatter from `injectMoneyFormatter`, null for any other function. */
+export declare function moneyFormatterParts(formatter: (value: number) => string): MoneyFormatterParts | null;
+/** Needs an injection context. Reads `UI_PRIVACY` on every call, so a template or computed calling it follows the mode. */
+export declare function injectMoneyFormatter(options?: Intl.NumberFormatOptions): (value: number) => string;
+export declare const UiPrivacies: readonly ["visible", "discreet", "hidden"];
+/** Discreet hides amounts but keeps their shape, hidden hides everything about them. */
+export type UiPrivacy = typeof UiPrivacies[number];
+export declare const UI_PRIVACY: InjectionToken<Signal<"visible" | "discreet" | "hidden">>;
+/** The factory runs in an injection context, so it can return a signal from an app service. */
+export declare function provideUiPrivacy(privacy: () => Signal<UiPrivacy>): Provider;
+/** The fixed mask for private text, e.g. a transaction's description. */
+export declare const PRIVATE_TEXT_MASK = "- - -";
+/** What screen readers hear in place of private text. */
+export declare const PRIVATE_TEXT_LABEL = "text hidden";
+export declare function maskMoney(currency: string, locale: string): string;
+export interface PrivateTextFormatter {
+  /** The text, or `PRIVATE_TEXT_MASK`. For visible attributes like `title`. */
+  (text: string | null | undefined): string;
+  /** The text, or `PRIVATE_TEXT_LABEL`. For `aria-*`, so screen readers don't read out dashes. */
+  label: (text: string | null | undefined) => string;
+}
+/** Needs an injection context. Reads `UI_PRIVACY` on every call, so a template or computed calling it follows the mode. */
+export declare function injectPrivateText(): PrivateTextFormatter;
 /** Native type values ui-input supports. File/checkbox/radio/range need their own components. */
 export declare const InputTypes: readonly ["text", "email", "tel", "url", "search", "password", "number", "date", "time", "datetime-local", "month", "week", "color"];
 /** @see {@link InputTypes} */
@@ -568,7 +732,7 @@ export declare class UiDropzoneComponent {
   readonly maxSize: import("@angular/core").InputSignal<number | null>;
   readonly title: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
-  readonly icon: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap>;
   readonly rejected: import("@angular/core").OutputEmitterRef<FileRejection[]>;
   private readonly picker;
   private dragDepth;
@@ -714,7 +878,7 @@ export declare class UiInputComponent<ValueType = string> {
   readonly name: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "numeric" | "decimal" | "email" | "tel" | "url">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "text" | "search" | "numeric" | "email" | "tel" | "url">;
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -728,6 +892,8 @@ export declare class UiInputComponent<ValueType = string> {
   readonly maxlength: import("@angular/core").InputSignal<number | null>;
   readonly autofocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly spellcheck: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** With `type="password"`, adds a button to show and hide what's been typed. */
+  readonly revealable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly list: import("@angular/core").InputSignal<string>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly describedBy: import("@angular/core").InputSignal<string>;
@@ -741,6 +907,9 @@ export declare class UiInputComponent<ValueType = string> {
   readonly blurred: import("@angular/core").OutputEmitterRef<FocusEvent>;
   readonly leadingElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
   readonly trailingElement: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
+  protected readonly revealed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly canReveal: import("@angular/core").Signal<boolean>;
+  protected readonly shownType: import("@angular/core").Signal<"number" | "color" | "text" | "search" | "time" | "email" | "tel" | "url" | "password" | "date" | "datetime-local" | "month" | "week">;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   protected handleInput(event: Event): void;
   protected handleFocus(event: FocusEvent): void;
@@ -848,6 +1017,11 @@ export declare class UiInputComponent<ValueType = string> {
       "required": false;
       "isSignal": true;
     };
+    "revealable": {
+      "alias": "revealable";
+      "required": false;
+      "isSignal": true;
+    };
     "list": {
       "alias": "list";
       "required": false;
@@ -1069,7 +1243,7 @@ export declare class UiSelectComponent<Model = unknown> {
   readonly searchMode: import("@angular/core").InputSignal<SearchMode>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly validationState: import("@angular/core").ModelSignal<InputValidation>;
-  readonly clearable: import("@angular/core").InputSignal<boolean>;
+  readonly clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly clearLabel: import("@angular/core").InputSignal<string>;
   /**
    * Offers a "Create" row when a search matches nothing. Needs a
@@ -1104,6 +1278,7 @@ export declare class UiSelectComponent<Model = unknown> {
   readonly listId: string;
   readonly hasSelection: import("@angular/core").Signal<boolean>;
   readonly triggerLabel: import("@angular/core").Signal<string>;
+  readonly isEmpty: import("@angular/core").Signal<boolean>;
   /** Tags only replace the trigger text when there's no inline search box. */
   readonly showTags: import("@angular/core").Signal<boolean>;
   /** The text to create from, or null when there's nothing to offer. */
@@ -1400,7 +1575,6 @@ export declare class UiTextareaComponent {
 export declare class UiAlertComponent {
   readonly appearance: import("@angular/core").InputSignal<"soft" | "bordered">;
   readonly intent: import("@angular/core").InputSignal<string>;
-  readonly classes: import("@angular/core").InputSignal<string>;
   readonly icon: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertComponent, never>;
@@ -1415,22 +1589,47 @@ export declare class UiAlertComponent {
       "required": false;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {}, ["icon"], ["*"], true, never>;
 }
 export declare const AlertIntents: string[];
 export declare const AlertAppearances: readonly ["soft", "bordered"];
 export type AlertIntent = typeof AlertIntents[number];
 export type AlertAppearance = typeof AlertAppearances[number];
+export declare class UiAvatarComponent {
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly src: import("@angular/core").InputSignal<string | null>;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  private readonly failedSrc;
+  protected readonly showImage: import("@angular/core").Signal<boolean>;
+  protected readonly initials: import("@angular/core").Signal<string>;
+  readonly generatedClasses: import("@angular/core").Signal<string>;
+  protected imageFailed(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiAvatarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiAvatarComponent, "ui-avatar", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const AvatarSizes: readonly ["sm", "md", "lg"];
+/** @see {@link AvatarSizes} */
+export type AvatarSize = typeof AvatarSizes[number];
 export declare class UiBadgeComponent {
   readonly appearance: import("@angular/core").InputSignal<"solid" | "outline" | "soft">;
   readonly intent: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
-  readonly classes: import("@angular/core").InputSignal<string>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiBadgeComponent, "ui-badge", never, {
@@ -1449,11 +1648,6 @@ export declare class UiBadgeComponent {
       "required": false;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {}, never, ["*"], true, never>;
 }
 export declare const BadgeIntents: readonly ["primary", "secondary", "success", "warning", "danger"];
@@ -1466,14 +1660,14 @@ export type BadgeSize = typeof BadgeSizes[number];
  * A general-purpose button.
  */
 export declare class UiButtonComponent {
-  readonly appearance: import("@angular/core").InputSignal<"solid" | "none" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly classes: import("@angular/core").InputSignal<string>;
   readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  readonly disabled: import("@angular/core").InputSignal<boolean>;
-  readonly loading: import("@angular/core").InputSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /**
    * Whether the underlying `<button>` element should be disabled - true when
    * `disabled` is set explicitly, or implicitly while `loading` is true.
@@ -1678,13 +1872,57 @@ export declare class UiCalendarComponent {
     "range": "rangeChange";
   }, never, never, true, never>;
 }
+export declare class UiCardComponent {
+  readonly radius: import("@angular/core").InputSignal<"none" | "sm" | "md" | "lg" | "xl">;
+  readonly generatedClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCardComponent, "ui-card", never, {
+    "radius": {
+      "alias": "radius";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** The radius that a card can hold. Maps directly to tailwindcss' rounded classes. */
+export declare const CardRadii: readonly ["none", "sm", "md", "lg", "xl"];
+/** @see {@link CardRadii} */
+export type CardRadius = typeof CardRadii[number];
+export declare const radiusClasses: Record<CardRadius, string>;
+export declare class UiCardHeaderComponent {
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  /** Pick the level that fits the page's outline, it doesn't change the look. */
+  readonly headingLevel: import("@angular/core").InputSignal<3 | 2 | 4>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiCardHeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiCardHeaderComponent, "ui-card-header", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare const CardHeadingLevels: readonly [2, 3, 4];
+/** @see {@link CardHeadingLevels} */
+export type CardHeadingLevel = typeof CardHeadingLevels[number];
 export declare class UiContainerComponent {
   static ɵfac: i0.ɵɵFactoryDeclaration<UiContainerComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiContainerComponent, "ui-container", never, {}, {}, never, ["*"], true, never>;
 }
 export declare class UiDrawerComponent {
   readonly isOpen: import("@angular/core").WritableSignal<boolean>;
-  readonly enableBackdrop: import("@angular/core").InputSignal<boolean>;
+  readonly enableBackdrop: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly label: import("@angular/core").InputSignal<string>;
   readonly subLabel: import("@angular/core").InputSignal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDrawerComponent, never>;
@@ -1704,7 +1942,7 @@ export declare class UiDrawerComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+  }, {}, never, ["[drawer-actions]", "*"], true, never>;
 }
 export declare class UiDropdownDirective {
   readonly element: ElementRef<any>;
@@ -1760,15 +1998,15 @@ export declare class UiDropdownComponent {
   }, {}, ["content"], ["*"], true, never>;
 }
 export declare class UiKpiComponent {
-  readonly title: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
   readonly value: import("@angular/core").InputSignal<string>;
   readonly hint: import("@angular/core").InputSignal<string>;
-  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  readonly icon: import("@angular/core").InputSignal<keyof import("@ng-icons/core").NgIconNameMap | undefined>;
   readonly iconPosition: import("@angular/core").InputSignal<"right" | "left">;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiKpiComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiKpiComponent, "ui-kpi", never, {
-    "title": {
-      "alias": "title";
+    "label": {
+      "alias": "label";
       "required": false;
       "isSignal": true;
     };
@@ -1855,18 +2093,25 @@ export declare class UiModalComponent {
  * Formats a money value, e.g. -42.1 as "-£42.10".
  */
 export declare class UiMoneyComponent {
+  private readonly defaults;
+  private readonly privacy;
   readonly value: import("@angular/core").InputSignal<number | null>;
+  /** Defaults to the currency from `provideUiFormat`. */
   readonly currency: import("@angular/core").InputSignal<string>;
+  /** Defaults to the locale from `provideUiFormat`. */
   readonly locale: import("@angular/core").InputSignal<string>;
   readonly signDisplay: import("@angular/core").InputSignal<"auto" | "always" | "exceptZero" | "never">;
   /** Green for money in, red for money out. */
   readonly colourBySign: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Rounds to whole units, e.g. "£2,235" for headline figures where pence are noise. */
+  readonly wholeUnits: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Short form like "£12K", the full amount goes in the title. */
   readonly compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Shown when there's no value. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
-  readonly classes: import("@angular/core").InputSignal<string>;
   private readonly amount;
+  protected readonly masked: import("@angular/core").Signal<boolean>;
+  protected readonly mask: import("@angular/core").Signal<string>;
   protected readonly formatted: import("@angular/core").Signal<string>;
   protected readonly title: import("@angular/core").Signal<string | null>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
@@ -1899,6 +2144,11 @@ export declare class UiMoneyComponent {
       "required": false;
       "isSignal": true;
     };
+    "wholeUnits": {
+      "alias": "wholeUnits";
+      "required": false;
+      "isSignal": true;
+    };
     "compact": {
       "alias": "compact";
       "required": false;
@@ -1909,11 +2159,6 @@ export declare class UiMoneyComponent {
       "required": false;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {}, never, never, true, never>;
 }
 /** Intl signDisplay values, controls when a + or - is shown. */
@@ -1925,8 +2170,6 @@ export type PaginationItem = number | 'ellipsis';
 export declare class UiPaginationComponent {
   readonly page: import("@angular/core").ModelSignal<number>;
   readonly totalPages: import("@angular/core").InputSignal<number>;
-  readonly classes: import("@angular/core").InputSignal<string>;
-  readonly generatedClasses: import("@angular/core").Signal<string>;
   readonly isFirstPage: import("@angular/core").Signal<boolean>;
   readonly isLastPage: import("@angular/core").Signal<boolean>;
   readonly items: import("@angular/core").Signal<PaginationItem[]>;
@@ -1944,15 +2187,29 @@ export declare class UiPaginationComponent {
       "required": true;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {
     "page": "pageChange";
   }, never, never, true, never>;
 }
+/**
+ * Text that privacy mode masks, e.g. a transaction's description.
+ */
+export declare class UiPrivateComponent {
+  private readonly privacy;
+  readonly text: import("@angular/core").InputSignal<string | null | undefined>;
+  protected readonly mask = "- - -";
+  protected readonly label = "text hidden";
+  protected readonly masked: import("@angular/core").Signal<boolean>;
+  readonly generatedClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiPrivateComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiPrivateComponent, "ui-private", never, {
+    "text": {
+      "alias": "text";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** Same names as badges, so a status reads the same wherever it shows. */
 export declare const ProgressIntents: readonly ["primary", "secondary", "success", "warning", "danger"];
 /** @see {@link ProgressIntents} */
@@ -1995,7 +2252,7 @@ export declare class UiProgressComponent {
   readonly shape: import("@angular/core").InputSignal<"square" | "straight" | "rounded">;
   readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
   readonly title: import("@angular/core").InputSignal<string>;
-  readonly labelPosition: import("@angular/core").InputSignal<"top" | "none" | "end" | "floating" | "inside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"none" | "top" | "end" | "floating" | "inside">;
   readonly labelWith: import("@angular/core").InputSignal<(value: number, max: number) => string>;
   /** Splits the bar into this many blocks. */
   readonly steps: import("@angular/core").InputSignal<number | null>;
@@ -2079,6 +2336,46 @@ export declare class UiProgressComponent {
     };
   }, {}, never, never, true, never>;
 }
+export interface SegmentedOption<T> {
+  value: T;
+  label: string;
+  /** Read out instead of `label`, for when the label is abbreviated, e.g. "6M". */
+  ariaLabel?: string;
+}
+export declare class UiSegmentedComponent<T> {
+  readonly options: import("@angular/core").InputSignal<SegmentedOption<T>[]>;
+  readonly value: import("@angular/core").ModelSignal<T>;
+  /** What the options choose between, e.g. "How far back the charts go". */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width with the options sharing it evenly. */
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly name: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSegmentedComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSegmentedComponent<any>, "ui-segmented", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
 /**
  * A placeholder shown while content loads. Size it with classes on the
  * element, e.g. `class="w-48"` for text or `class="size-12"` for a circle.
@@ -2088,7 +2385,6 @@ export declare class UiSkeletonComponent {
   readonly animated: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Text only, stacks this many lines with a shorter last one. */
   readonly lines: import("@angular/core").InputSignalWithTransform<number, unknown>;
-  readonly classes: import("@angular/core").InputSignal<string>;
   protected readonly lineIndexes: import("@angular/core").Signal<number[]>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSkeletonComponent, never>;
@@ -2108,20 +2404,27 @@ export declare class UiSkeletonComponent {
       "required": false;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {}, never, never, true, never>;
 }
 /** What a skeleton stands in for, lines of text, an avatar or a block. */
 export declare const SkeletonShapes: readonly ["text", "circle", "rect"];
 /** @see {@link SkeletonShapes} */
 export type SkeletonShape = typeof SkeletonShapes[number];
+/** Each stat is its own `dl`, so wrap a row of them in a plain div. */
+export declare class UiStatComponent {
+  readonly label: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiStatComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiStatComponent, "ui-stat", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[stat-change]", "[stat-note]"], true, never>;
+}
 export declare class UiTabDirective {
   label: import("@angular/core").InputSignal<string>;
-  disabled: import("@angular/core").InputSignal<boolean>;
+  disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   active: import("@angular/core").ModelSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiTabDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<UiTabDirective, "[uiTab]", never, {
@@ -2180,8 +2483,10 @@ export interface TableColumn<Row> {
   accessor: (row: Row) => unknown;
   /** how the cell value is formatted for display, defaults to plain text */
   displayType?: TableColumnDisplayType;
-  /** ISO currency code, used when displayType is 'currency' */
+  /** ISO currency code, used when displayType is 'currency'. Defaults to the currency from `provideUiFormat`. */
   currency?: string;
+  /** Masks the cell in privacy mode, e.g. a transaction's description. Currency cells are already masked, icon cells have no text. */
+  sensitive?: boolean;
   sortable?: boolean;
   filterable?: boolean;
   /** when set, the filter renders as a select instead of a free-text contains filter */
@@ -2243,6 +2548,8 @@ interface ColumnDragPreview {
 }
 export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestroy {
   readonly classes: import("@angular/core").InputSignal<string>;
+  /** Lets controls elsewhere on the page link to this table, e.g. `<ui-search [table]="'transactions'">`. */
+  readonly tableId: import("@angular/core").InputSignal<string | null>;
   readonly columns: import("@angular/core").InputSignal<TableColumn<Row>[]>;
   readonly dataSource: import("@angular/core").InputSignal<TableDataSource<Row>>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
@@ -2288,6 +2595,8 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   protected readonly hasFilterableColumns: import("@angular/core").Signal<boolean>;
   protected readonly activeFilterCount: import("@angular/core").Signal<number>;
   protected readonly hasActions: import("@angular/core").Signal<boolean>;
+  private readonly hasSensitiveColumns;
+  protected readonly fixedWidth: import("@angular/core").Signal<number | null>;
   protected readonly actionsColumnWidth: import("@angular/core").Signal<number>;
   protected readonly totalPages: import("@angular/core").Signal<number>;
   protected readonly resultsLabel: import("@angular/core").Signal<string>;
@@ -2298,6 +2607,11 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   private readonly load$;
   private readonly destroyRef;
   private readonly cdr;
+  private readonly registry;
+  protected readonly uiFormat: import("@area8975/ui").UiFormat;
+  private readonly privateText;
+  private loadedQuery;
+  private loadedFilters;
   private resizeState;
   private columnDragState;
   private readonly filterDataSources;
@@ -2307,6 +2621,7 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   reload(): void;
   protected cellValue(column: TableColumn<Row>, row: Row): unknown;
   protected cellIconValue(column: TableColumn<Row>, row: Row): string;
+  protected moneyCellValue(column: TableColumn<Row>, row: Row): number | null;
   protected formattedCellValue(column: TableColumn<Row>, row: Row): string;
   protected onQueryChange(value: string): void;
   protected filterValue(columnId: string): string;
@@ -2314,6 +2629,7 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   protected filterDataSource(column: TableColumn<Row>): SelectDataSource<TableColumnFilterOption>;
   protected selectedFilterOption(column: TableColumn<Row>): TableColumnFilterOption | null;
   protected filterOptionLabel(option: TableColumnFilterOption): string;
+  protected readonly sensitiveFilterOptionLabel: (option: TableColumnFilterOption) => string;
   protected onFilterSelect(columnId: string, option: TableColumnFilterOption | null): void;
   protected clearFilters(): void;
   protected toggleSort(column: TableColumn<Row>): void;
@@ -2350,6 +2666,11 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
       "required": false;
       "isSignal": true;
     };
+    "tableId": {
+      "alias": "tableId";
+      "required": false;
+      "isSignal": true;
+    };
     "columns": {
       "alias": "columns";
       "required": true;
@@ -2442,6 +2763,18 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
     "rowsReordered": "rowsReordered";
   }, never, never, true, never>;
 }
+export interface UiLinkedTable {
+  readonly query: WritableSignal<string>;
+  readonly filters: WritableSignal<Record<string, unknown>>;
+}
+export declare class UiTableRegistry {
+  private readonly tables;
+  get(id: string): UiLinkedTable | null;
+  register(id: string, table: UiLinkedTable): void;
+  unregister(id: string, table: UiLinkedTable): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTableRegistry, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
 export declare class UiToastComponent {
   readonly intent: import("@angular/core").InputSignal<"success" | "warning" | "danger" | "info">;
   readonly classes: import("@angular/core").InputSignal<string>;
@@ -2449,7 +2782,7 @@ export declare class UiToastComponent {
   /** ms before the toast dismisses itself, paused while hovered or focused. null never times out. */
   readonly timeoutMs: import("@angular/core").InputSignal<number | null>;
   readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
-  protected readonly icon: import("@angular/core").Signal<string>;
+  protected readonly icon: import("@angular/core").Signal<IconType>;
   protected readonly iconColour: import("@angular/core").Signal<string>;
   protected readonly role: import("@angular/core").Signal<"alert" | "status">;
   private hovered;
@@ -2648,6 +2981,7 @@ export declare class UiOverlayComponent implements UiOverlayStackEntry {
 }
 export declare class UiSidebarComponent {
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
+  readonly isCollapsed: import("@angular/core").Signal<boolean>;
   readonly toggle: () => void;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiSidebarComponent, "ui-sidebar", ["uiSidebar"], {
@@ -2658,7 +2992,21 @@ export declare class UiSidebarComponent {
     };
   }, {
     "isOpen": "isOpenChange";
-  }, never, ["*"], true, never>;
+  }, never, ["*", "[sidebar-footer]"], true, never>;
+}
+export declare class UiSidebarGroupComponent {
+  private readonly sidebar;
+  readonly label: import("@angular/core").InputSignal<string>;
+  protected readonly labelId: string;
+  readonly isCollapsed: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSidebarGroupComponent, "ui-sidebar-group", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
 }
 export declare class UiSidebarItemComponent {
   private readonly sidebar;
@@ -3002,7 +3350,7 @@ export declare class UiDatepickerComponent {
 }
 export declare class UiDropdownButtonComponent {
   readonly intent: import("@angular/core").InputSignal<"none" | "primary" | "secondary" | "success" | "warning" | "danger">;
-  readonly appearance: import("@angular/core").InputSignal<"solid" | "none" | "link" | "outline" | "ghost" | "white">;
+  readonly appearance: import("@angular/core").InputSignal<"none" | "solid" | "link" | "outline" | "ghost" | "white">;
   readonly icon: import("@angular/core").InputSignal<string>;
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiDropdownButtonComponent, never>;
@@ -3125,6 +3473,61 @@ export declare class UiFileInputComponent {
     "rejected": "rejected";
   }, never, never, true, never>;
 }
+export declare class UiSearchComponent {
+  private readonly host;
+  private readonly registry;
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** How long typing has to pause before `searched` fires, in milliseconds. */
+  readonly debounce: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The `tableId` of a ui-table to search, it can render before or after this. */
+  readonly table: import("@angular/core").InputSignal<string | null>;
+  /** The value once typing pauses, for running a search. Clearing fires straight away. */
+  readonly searched: import("@angular/core").OutputEmitterRef<string>;
+  private readonly linked;
+  private timer;
+  constructor();
+  protected onInput(value: string): void;
+  protected clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiSearchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiSearchComponent, "ui-search", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "debounce": {
+      "alias": "debounce";
+      "required": false;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "searched": "searched";
+  }, never, never, true, never>;
+}
 export declare class UiSwitchComponent {
   readonly value: import("@angular/core").ModelSignal<boolean>;
   readonly id: import("@angular/core").InputSignal<string>;
@@ -3156,6 +3559,104 @@ export declare class UiSwitchComponent {
     "value": "valueChange";
   }, never, ["*"], true, never>;
 }
+export declare const TableFiltersBreakpoints: {
+  readonly sm: "40rem";
+  readonly md: "48rem";
+  readonly lg: "64rem";
+  readonly xl: "80rem";
+  readonly '2xl': "96rem";
+};
+/** @see {@link TableFiltersBreakpoints} */
+export type TableFiltersBreakpoint = keyof typeof TableFiltersBreakpoints;
+export interface TableFacetOption {
+  value: unknown;
+  label: string;
+}
+/** Writes the picked value, or an array when `multiple`, under `id`. */
+export interface TableOptionsFacet {
+  id: string;
+  label: string;
+  kind: 'options';
+  options: TableFacetOption[];
+  multiple?: boolean;
+}
+/** Writes `{ start, end }` ISO dates under `id`. */
+export interface TableDateRangeFacet {
+  id: string;
+  label: string;
+  kind: 'dateRange';
+  /** Quick picks, see date-range-presets.ts for ready made ones. */
+  presets?: DateRangePreset[];
+  placeholder?: string;
+  min?: IsoDate | null;
+  max?: IsoDate | null;
+}
+export type TableFacet = TableOptionsFacet | TableDateRangeFacet;
+export type TableFacetDateRange = DateRange;
+type Filters = Record<string, unknown>;
+type DateMode = 'any' | 'custom' | number;
+export declare class UiTableFiltersComponent {
+  private readonly registry;
+  readonly facets: import("@angular/core").InputSignal<TableFacet[]>;
+  /** The `tableId` of a ui-table to filter, it can render before or after this. */
+  readonly table: import("@angular/core").InputSignal<string | null>;
+  readonly value: import("@angular/core").ModelSignal<Filters>;
+  /** Below this breakpoint the panel becomes a Filters button and a drawer. */
+  readonly collapseBelow: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl" | "2xl">;
+  protected readonly idPrefix: string;
+  protected readonly anyDate: DateMode;
+  protected readonly customDate: DateMode;
+  private readonly customDates;
+  private readonly linked;
+  protected readonly appliedCount: import("@angular/core").Signal<number>;
+  protected readonly anyApplied: import("@angular/core").Signal<boolean>;
+  private readonly window;
+  protected readonly wide: import("@angular/core").WritableSignal<boolean>;
+  constructor();
+  protected groupName(facet: TableFacet): string;
+  protected choiceId(facet: TableFacet, choice: number | string): string;
+  protected picked(facet: TableOptionsFacet): unknown;
+  protected pick(facet: TableOptionsFacet, value: unknown): void;
+  protected isChecked(facet: TableOptionsFacet, option: TableFacetOption): boolean;
+  protected check(facet: TableOptionsFacet, option: TableFacetOption, checked: boolean): void;
+  protected range(facet: TableDateRangeFacet): DateRange;
+  protected dateMode(facet: TableDateRangeFacet): DateMode;
+  protected pickDate(facet: TableDateRangeFacet, mode: DateMode): void;
+  protected setRange(facet: TableDateRangeFacet, range: DateRange): void;
+  protected clearAll(): void;
+  private setCustom;
+  private apply;
+  private write;
+  private currentFilters;
+  private ownFilters;
+  private withoutOwn;
+  private hasAny;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTableFiltersComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiTableFiltersComponent, "ui-table-filters", never, {
+    "facets": {
+      "alias": "facets";
+      "required": true;
+      "isSignal": true;
+    };
+    "table": {
+      "alias": "table";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseBelow": {
+      "alias": "collapseBelow";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
 export declare class UiTimeSelectComponent {
   /** 24 hour "HH:mm" string. */
   readonly value: import("@angular/core").ModelSignal<string>;
@@ -3188,4 +3689,93 @@ export declare class UiTimeSelectComponent {
   }, {
     "value": "valueChange";
   }, never, never, true, never>;
+}
+/** Give the dropdown it sits in `closeBehaviour="whenClickOutside"`. */
+export declare class UiUserMenuComponent {
+  private readonly dropdown;
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** A second line under the name, e.g. an email address. */
+  readonly detail: import("@angular/core").InputSignal<string>;
+  readonly src: import("@angular/core").InputSignal<string | null>;
+  readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
+  protected readonly menuItems: import("@angular/core").Signal<DropdownMenuItem[]>;
+  protected isDivider(item: DropdownMenuItem): boolean;
+  protected group(item: DropdownMenuItem): DropdownMenuCategory | null;
+  protected button(item: DropdownMenuItem): DropdownMenuButton | null;
+  private closing;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiUserMenuComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiUserMenuComponent, "ui-user-menu", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "detail": {
+      "alias": "detail";
+      "required": false;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** What the user picked, `system` follows the OS setting. */
+export type UiThemePreference = 'system' | 'light' | 'dark';
+export interface UiThemeConfig {
+  storageKey: string;
+}
+export declare const UI_THEME_CONFIG: InjectionToken<UiThemeConfig>;
+/**
+ * Add this to `index.html`'s `<head>` so the stored theme applies before boot:
+ *
+ * ```html
+ * <script>
+ *     try {
+ *         const preference = localStorage.getItem('ui-theme') ?? 'system';
+ *         const dark = preference === 'dark' ||
+ *             (preference === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
+ *         document.documentElement.classList.toggle('dark', dark);
+ *     } catch {}
+ * </script>
+ * ```
+ */
+export declare class UiThemeService {
+  private readonly document;
+  private readonly storageKey;
+  private readonly media;
+  readonly preference: import("@angular/core").WritableSignal<UiThemePreference>;
+  private readonly systemDark;
+  readonly isDark: import("@angular/core").Signal<boolean>;
+  constructor();
+  private stored;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+export declare class UiThemeSwitchComponent {
+  protected readonly theme: UiThemeService;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected readonly options: SegmentedOption<UiThemePreference>[];
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeSwitchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiThemeSwitchComponent, "ui-theme-switch", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }