@area8975/ui 0.1.1-dev.12 → 0.1.1-dev.15

package/types/area8975-ui.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ElementRef, OnDestroy, OnInit, Signal, 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";
@@ -9,6 +9,8 @@ export interface ChartLegendItem {
   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 {
@@ -26,30 +28,40 @@ export type ChartLegendPosition = 'auto' | 'none';
  * 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"];
+/**
+ * The palette for dark mode. Violet and green are lightened so every slot
+ * keeps 3:1 contrast on a dark card, the rest already do.
+ */
+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;
+  /** Series that are there for context. */
+  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 {
@@ -57,16 +69,27 @@ 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;
 }
+/**
+ * Pixels, or `fill` to take the height of the chart's host, which then has to
+ * get its height from layout (a grid row, a flex parent, `h-full` under a sized
+ * parent). Clamp it with `min-h-*` and `max-h-*` on the host.
+ */
+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 implements ChartLegendSource {
+  protected readonly uiFormat: import("@area8975/ui").UiFormat;
+  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>;
   /** Heading for the category column in the data table. */
@@ -82,6 +105,11 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
    * matter stand out. The way to show more series than there are colours.
    */
   readonly highlight: import("@angular/core").InputSignal<string[] | null>;
+  /**
+   * Highlighted series keep the colour they'd have with nothing highlighted,
+   * so picking one out of many doesn't change what colour it is.
+   */
+  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. */
@@ -90,8 +118,10 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
   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;
+  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[]>;
@@ -156,6 +186,11 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
       "required": false;
       "isSignal": true;
     };
+    "highlightKeepsColours": {
+      "alias": "highlightKeepsColours";
+      "required": false;
+      "isSignal": true;
+    };
     "legend": {
       "alias": "legend";
       "required": false;
@@ -170,6 +205,8 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
 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, {
@@ -183,6 +220,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. */
@@ -204,6 +246,7 @@ export declare class UiChartComponent {
   private readonly canvas;
   private readonly chart;
   private destroyed;
+  private drawnNames;
   constructor();
   private applyHidden;
   private applyEmphasis;
@@ -243,7 +286,7 @@ 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>;
@@ -251,6 +294,8 @@ export declare class UiChartFrameComponent {
   readonly showLegend: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The series the legend is pointing at, the others fade while it's set. */
   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": {
@@ -394,6 +439,11 @@ export declare class UiChartLegendComponent {
   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 items taken from `for`, e.g. to relabel or reorder them.
+   * Keep each item's `name`, toggling and fading find the series by it.
+   */
+  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. */
@@ -430,6 +480,11 @@ export declare class UiChartLegendComponent {
       "required": false;
       "isSignal": true;
     };
+    "itemsWith": {
+      "alias": "itemsWith";
+      "required": false;
+      "isSignal": true;
+    };
     "hidden": {
       "alias": "hidden";
       "required": false;
@@ -454,6 +509,11 @@ 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>;
+  /** Names the `projectedFrom` band. */
+  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>;
@@ -468,6 +528,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. */
@@ -481,6 +551,7 @@ 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)[]>;
@@ -512,6 +583,27 @@ export declare class UiPieChartComponent extends UiAxisChartBase {
 export declare const PieChartVariants: readonly ["pie", "donut"];
 /** @see {@link PieChartVariants} */
 export type PieChartVariant = typeof PieChartVariants[number];
+/** Currency and locale shared by everything in the library that formats numbers. */
+export interface UiFormat {
+  /** ISO 4217 code, e.g. "GBP". */
+  currency: string;
+  /** BCP 47 tag, e.g. "en-GB". */
+  locale: string;
+}
+/** What the library uses when nothing is provided. */
+export declare const UI_FORMAT_DEFAULTS: UiFormat;
+export declare const UI_FORMAT: InjectionToken<UiFormat>;
+/**
+ * Sets the currency and locale once, in the app config or on a component for
+ * just its part of the page. Inputs on a component still win over it.
+ */
+export declare function provideUiFormat(format: Partial<UiFormat>): Provider;
+/**
+ * Formats money in the provided currency and locale, made for a chart's
+ * `valueFormatter`. Needs an injection context, e.g. a component field.
+ * `options` tweaks the output, e.g. `{ maximumFractionDigits: 0 }` for axes.
+ */
+export declare function injectMoneyFormatter(options?: Intl.NumberFormatOptions): (value: number) => string;
 /** 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} */
@@ -759,7 +851,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>;
@@ -773,6 +865,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>;
@@ -786,6 +880,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;
@@ -893,6 +990,11 @@ export declare class UiInputComponent<ValueType = string> {
       "required": false;
       "isSignal": true;
     };
+    "revealable": {
+      "alias": "revealable";
+      "required": false;
+      "isSignal": true;
+    };
     "list": {
       "alias": "list";
       "required": false;
@@ -1114,7 +1216,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
@@ -1445,7 +1547,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>;
@@ -1460,22 +1561,53 @@ 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];
+/**
+ * A small round picture of a person, their initials until `src` is set or
+ * when the image fails to load. Screen readers hear the name, not the initials.
+ */
+export declare class UiAvatarComponent {
+  /** Who it shows, the initials come from it. */
+  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>;
+}
+/** sm for dense rows, md for menus and lists, lg for a profile header. */
+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, {
@@ -1494,11 +1626,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"];
@@ -1517,8 +1644,8 @@ export declare class UiButtonComponent {
   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.
@@ -1740,13 +1867,46 @@ 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>;
+/**
+ * The title row at the top of a card, with an optional muted subtitle.
+ * Anything projected goes on the right as actions, e.g. buttons or a picker,
+ * and wraps under the title when there isn't room.
+ */
+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<2 | 3 | 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>;
+}
+/** Heading levels a card title can use. */
+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>;
@@ -1822,15 +1982,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 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;
     };
@@ -1917,17 +2077,21 @@ export declare class UiModalComponent {
  * Formats a money value, e.g. -42.1 as "-£42.10".
  */
 export declare class UiMoneyComponent {
+  private readonly defaults;
   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 formatted: import("@angular/core").Signal<string>;
   protected readonly title: import("@angular/core").Signal<string | null>;
@@ -1961,6 +2125,11 @@ export declare class UiMoneyComponent {
       "required": false;
       "isSignal": true;
     };
+    "wholeUnits": {
+      "alias": "wholeUnits";
+      "required": false;
+      "isSignal": true;
+    };
     "compact": {
       "alias": "compact";
       "required": false;
@@ -1971,11 +2140,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. */
@@ -1987,8 +2151,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[]>;
@@ -2006,11 +2168,6 @@ export declare class UiPaginationComponent {
       "required": true;
       "isSignal": true;
     };
-    "classes": {
-      "alias": "classes";
-      "required": false;
-      "isSignal": true;
-    };
   }, {
     "page": "pageChange";
   }, never, never, true, never>;
@@ -2141,6 +2298,52 @@ export declare class UiProgressComponent {
     };
   }, {}, never, never, true, never>;
 }
+/** One choice in a segmented control. */
+export interface SegmentedOption<T> {
+  value: T;
+  label: string;
+  /** Read out instead of `label`, for when the label is abbreviated, e.g. "6M". */
+  ariaLabel?: string;
+}
+/**
+ * A row of options where exactly one is picked, e.g. a time range or a view
+ * toggle. Built on native radios, so arrow keys move between options and
+ * screen readers hear a radio group.
+ */
+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.
@@ -2150,7 +2353,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>;
@@ -2170,20 +2372,33 @@ 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];
+/**
+ * A muted label over a large figure, for the numbers inside a card. Project
+ * the value, e.g. a `ui-money`, and optionally a change or badge beside it
+ * with `stat-change` and a small line under it with `stat-note`.
+ *
+ * Each stat is its own `dl`, so put a row of them in a plain flex or grid wrapper.
+ */
+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, {
@@ -2710,6 +2925,12 @@ export declare class UiOverlayComponent implements UiOverlayStackEntry {
 }
 export declare class UiSidebarComponent {
   readonly isOpen: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * True while the sidebar is narrow, so content projected into the footer can
+   * shrink to an icon or avatar. Read it with `#sidebar="uiSidebar"` or by
+   * injecting UiSidebarComponent.
+   */
+  readonly isCollapsed: import("@angular/core").Signal<boolean>;
   readonly toggle: () => void;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiSidebarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiSidebarComponent, "ui-sidebar", ["uiSidebar"], {
@@ -2720,7 +2941,26 @@ export declare class UiSidebarComponent {
     };
   }, {
     "isOpen": "isOpenChange";
-  }, never, ["*"], true, never>;
+  }, never, ["*", "[sidebar-footer]"], true, never>;
+}
+/**
+ * A labelled section of sidebar items. The label shows while the sidebar is
+ * open and turns into a divider when it's collapsed, screen readers get the
+ * name either way.
+ */
+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;
@@ -3250,4 +3490,119 @@ export declare class UiTimeSelectComponent {
   }, {
     "value": "valueChange";
   }, never, never, true, never>;
+}
+/**
+ * The signed in person and their options, e.g. Settings and Log out, with a
+ * theme switch. Goes inside a dropdown's `uiDropdownContent`, the same as
+ * `ui-dropdown-menu`. Give that dropdown `closeBehaviour="whenClickOutside"`
+ * so picking a theme doesn't close it, picking an item still does.
+ */
+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>;
+  /** The same items as `ui-dropdown-menu`, buttons, labelled groups and dividers. */
+  readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
+  /** Shows the System, Light and Dark switch, which needs `provideUiTheme()`. */
+  readonly themeSwitch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  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;
+    };
+    "themeSwitch": {
+      "alias": "themeSwitch";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** What the user picked, `system` follows the OS setting. */
+export type UiThemePreference = 'system' | 'light' | 'dark';
+export interface UiThemeConfig {
+  /** localStorage key the preference is kept under. */
+  storageKey: string;
+}
+export declare const UI_THEME_CONFIG: InjectionToken<UiThemeConfig>;
+/**
+ * Switches between light and dark by toggling `.dark` on `<html>`, which the
+ * library's tokens key off. Add it with `provideUiTheme()`.
+ *
+ * To stop the page flashing the wrong theme before the app boots, apply the
+ * stored class early with a small inline script in `index.html`'s `<head>`:
+ *
+ * ```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;
+  /** Whether dark is showing now, resolved from the preference and the OS setting. */
+  readonly isDark: import("@angular/core").Signal<boolean>;
+  constructor();
+  private stored;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/** Starts theme switching at boot. Read or change it through `UiThemeService`. */
+export declare function provideUiTheme(config?: Partial<UiThemeConfig>): EnvironmentProviders;
+/**
+ * Picks System, Light or Dark through UiThemeService, so the choice is stored
+ * and applied straight away. Add `provideUiTheme()` so the stored choice is
+ * applied at boot, not only once this has rendered.
+ */
+export declare class UiThemeSwitchComponent {
+  protected readonly theme: UiThemeService;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Stretches to the container's width, see `ui-segmented`. */
+  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>;
 }