@joanroucoux/cairn-ui 0.8.2 → 0.9.0

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

@@ -1,29 +1,53 @@
-import * as _angular_core from '@angular/core';
-
-/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
-declare const DIALOG_WIDTHS: readonly ["md", "lg"];
+import * as i0 from "@angular/core";
+import { OutputEmitterRef, Signal } from "@angular/core";
+type SharedReason = 'escape' | 'backdrop' | 'cross' | 'programmatic';
+type ModalCloseConfig<R extends string> = {
+  readonly open: Signal<boolean>;
+  readonly busy: Signal<boolean>;
+  readonly dismissed: OutputEmitterRef<void>;
+  readonly closed: OutputEmitterRef<R | SharedReason>;
+  readonly reset?: () => void;
+  readonly opening?: () => void;
+};
+/**
+ * The close protocol of a modal on the native <dialog> under the host: `open` drives `showModal()` and `close()`,
+ * Escape and a press-and-release on the veil close it unless `busy`, `dismissed` reports a close the user asked for
+ * and `closed` its reason once the exit transition has played. `opening` runs just before `showModal()`. Must be
+ * created in an injection context.
+ */
+export declare class ModalClose<R extends string> {
+  #private;
+  constructor(config: ModalCloseConfig<R>);
+  close(reason: R | SharedReason): void;
+  onCancel(event: Event): void;
+  onKeydown(event: KeyboardEvent): void;
+  onPointerDown(event: MouseEvent): void;
+  onClick(event: MouseEvent): void;
+  onNativeClose(): void;
+}
+/** Named dialog widths; any other CSS length is accepted as is. */
+export declare const DIALOG_WIDTHS: readonly ["md", "lg"];
 type DialogWidth = (typeof DIALOG_WIDTHS)[number];
-/** Spacing presets. `DialogLayout` is derived from this tuple. */
-declare const DIALOG_LAYOUTS: readonly ["trade", "form", "list", "confirm"];
-type DialogLayout = (typeof DIALOG_LAYOUTS)[number];
-type LayoutClasses = {
-    dialog: string;
-    header: string;
-    title: string;
-    cross: string;
-    icon: string;
-    handle: string;
-    body: string;
-    footer: string;
+/** `confirm` is a short alertdialog: no cross, no hairlines, one 24px padding, 440px wide unless told otherwise. */
+export declare const DIALOG_VARIANTS: readonly ["default", "confirm"];
+type DialogVariant = (typeof DIALOG_VARIANTS)[number];
+/** `full` makes the sheet under `64rem` fill the screen below the status area; `fit` sizes it to its content. */
+export declare const DIALOG_SHEETS: readonly ["fit", "full"];
+type DialogSheet = (typeof DIALOG_SHEETS)[number];
+type VariantClasses = {
+  handle: string;
+  header: string;
+  body: string;
+  footer: string;
 };
-/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
-declare const DIALOG_CLOSE_REASONS: readonly ["escape", "backdrop", "cross", "drag", "programmatic"];
+/** What started a close, as `closed` reports it. */
+export declare const DIALOG_CLOSE_REASONS: readonly ["escape", "backdrop", "cross", "drag", "programmatic"];
 type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];
 /**
  * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
  *
- * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
- * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
+ * `busy` keeps it open while its action runs: Escape, a backdrop click and a sheet drag do nothing
+ * and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
  *
  * @example
  * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
@@ -32,41 +56,84 @@ type DialogCloseReason = (typeof DIALOG_CLOSE_REASONS)[number];
  *   <button dialogActions ui-button>Buy 40 shares</button>
  * </ui-dialog>
  */
-declare class UiDialog {
-    #private;
-    readonly heading: _angular_core.InputSignal<string>;
-    readonly description: _angular_core.InputSignal<string | undefined>;
-    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
-    readonly layout: _angular_core.InputSignal<"form" | "trade" | "list" | "confirm">;
-    readonly truncateDescription: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly width: _angular_core.InputSignal<"md" | "lg" | (string & {})>;
-    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly dismissed: _angular_core.OutputEmitterRef<void>;
-    readonly closed: _angular_core.OutputEmitterRef<"drag" | "escape" | "backdrop" | "cross" | "programmatic">;
-    protected readonly headingId: string;
-    protected readonly descriptionId: string;
-    protected readonly bodyId: string;
-    protected readonly scrollable: _angular_core.WritableSignal<boolean>;
-    protected readonly describedBy: _angular_core.Signal<string | null>;
-    protected readonly widthValue: _angular_core.Signal<string>;
-    protected readonly spec: _angular_core.Signal<LayoutClasses>;
-    protected readonly headerClasses: _angular_core.Signal<string>;
-    protected readonly titleClasses: _angular_core.Signal<string>;
-    protected readonly crossClasses: _angular_core.Signal<string>;
-    protected readonly iconClasses: _angular_core.Signal<string>;
-    protected readonly footerClasses: _angular_core.Signal<string>;
-    protected readonly classes: _angular_core.Signal<string>;
-    constructor();
-    protected close(reason: DialogCloseReason): void;
-    protected onCancel(event: Event): void;
-    protected onKeydown(event: KeyboardEvent): void;
-    protected onPointerDown(event: MouseEvent): void;
-    protected onClick(event: MouseEvent): void;
-    protected onNativeClose(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiDialog, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDialog, "ui-dialog", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "truncateDescription": { "alias": "truncateDescription"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "closed": "closed"; }, never, ["*", "[dialogActions]"], true, never>;
+export declare class UiDialog {
+  #private;
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string | undefined>;
+  readonly closeLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly variant: import("@angular/core").InputSignal<"default" | "confirm">;
+  readonly sheet: import("@angular/core").InputSignal<"fit" | "full">;
+  readonly truncateDescription: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly width: import("@angular/core").InputSignal<"md" | "lg" | (string & {}) | undefined>;
+  readonly open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly busy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+  readonly closed: import("@angular/core").OutputEmitterRef<"drag" | "escape" | "backdrop" | "cross" | "programmatic">;
+  protected readonly headingId: string;
+  protected readonly descriptionId: string;
+  protected readonly bodyId: string;
+  protected readonly scrollable: import("@angular/core").WritableSignal<boolean>;
+  protected readonly stacked: import("@angular/core").WritableSignal<boolean>;
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
+  protected readonly widthValue: import("@angular/core").Signal<string>;
+  protected readonly spec: import("@angular/core").Signal<VariantClasses>;
+  protected readonly hairlines: import("@angular/core").Signal<boolean>;
+  protected readonly headerClasses: import("@angular/core").Signal<string>;
+  protected readonly crossClasses = "rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground)";
+  protected readonly footerClasses: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly modal: ModalClose<DialogCloseReason>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDialog, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiDialog, "ui-dialog", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "sheet": {
+      "alias": "sheet";
+      "required": false;
+      "isSignal": true;
+    };
+    "truncateDescription": {
+      "alias": "truncateDescription";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "busy": {
+      "alias": "busy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dismissed": "dismissed";
+    "closed": "closed";
+  }, never, ["*", "[dialogActions]"], true, never>;
 }
-
-export { DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, UiDialog };
-export type { DialogCloseReason, DialogLayout, DialogWidth };
+export type { DialogCloseReason, DialogSheet, DialogVariant, DialogWidth, ModalCloseConfig };

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

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

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

@@ -0,0 +1,73 @@
+import { ModalClose } from "@joanroucoux/cairn-ui/dialog";
+import * as i0 from "@angular/core";
+/** What started a close, as `closed` reports it. */
+export declare const DRAWER_CLOSE_REASONS: readonly ["escape", "backdrop", "cross", "programmatic"];
+type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];
+/**
+ * Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.
+ *
+ * Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.
+ *
+ * @example
+ * <ui-drawer heading="Northwind Monde" closeLabel="Fermer le détail" [open]="open()" (dismissed)="open.set(false)">
+ *   <p>Body</p>
+ * </ui-drawer>
+ */
+export declare class UiDrawer {
+  readonly heading: import("@angular/core").InputSignal<string | undefined>;
+  readonly description: import("@angular/core").InputSignal<string | undefined>;
+  readonly closeLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  readonly width: import("@angular/core").InputSignal<string>;
+  readonly open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly busy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+  readonly closed: import("@angular/core").OutputEmitterRef<"escape" | "backdrop" | "cross" | "programmatic">;
+  protected readonly headingId: string;
+  protected readonly descriptionId: string;
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
+  protected readonly ariaLabel: import("@angular/core").Signal<string | null | undefined>;
+  protected readonly modal: ModalClose<"escape" | "backdrop" | "cross" | "programmatic">;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiDrawer, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiDrawer, "ui-drawer", never, {
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "busy": {
+      "alias": "busy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dismissed": "dismissed";
+    "closed": "closed";
+  }, never, ["*"], true, never>;
+}
+export type { DrawerCloseReason };

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

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

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

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

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

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