@joanroucoux/cairn-ui 0.5.1 → 0.6.0

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

@@ -41,6 +41,22 @@ type AmountFormatOptions = {
 /** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
 declare function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked?: boolean): string;
 
+declare const ALERT_VARIANTS: readonly ["error", "warning"];
+type AlertVariant = (typeof ALERT_VARIANTS)[number];
+/**
+ * Inline message explaining a failure or a consequence: an icon, an optional heading and a text.
+ *
+ * @example
+ * <ui-alert heading="Sign-in failed">Try again.</ui-alert>
+ */
+declare class UiAlert {
+    readonly variant: _angular_core.InputSignal<"error" | "warning">;
+    readonly heading: _angular_core.InputSignal<string | undefined>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAlert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAlert, "ui-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /** Available async block states. `AsyncState` is derived from this tuple. */
 declare const ASYNC_STATES: readonly ["loading", "error", "empty", "ready"];
 type AsyncState = (typeof ASYNC_STATES)[number];
@@ -55,18 +71,18 @@ type AsyncState = (typeof ASYNC_STATES)[number];
  * </ui-async>
  */
 declare class UiAsync {
-    readonly state: _angular_core.InputSignal<"loading" | "error" | "empty" | "ready">;
+    readonly state: _angular_core.InputSignal<"error" | "loading" | "empty" | "ready">;
     readonly errorTitle: _angular_core.InputSignal<string | undefined>;
     readonly errorMessage: _angular_core.InputSignal<string | undefined>;
     readonly retryLabel: _angular_core.InputSignal<string | undefined>;
     readonly retry: _angular_core.OutputEmitterRef<void>;
-    protected readonly retryButtonClasses = "mt-2 relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) min-h-(--row-min) px-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)";
+    protected readonly retryButtonClasses = "mt-2 relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) min-h-(--row-min) pl-3 pr-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAsync, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAsync, "ui-async", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "errorTitle": { "alias": "errorTitle"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
 }
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
-declare const AVATAR_SIZES: readonly ["sm", "md"];
+declare const AVATAR_SIZES: readonly ["sm", "md", "lg"];
 type AvatarSize = (typeof AVATAR_SIZES)[number];
 /**
  * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
@@ -77,7 +93,7 @@ type AvatarSize = (typeof AVATAR_SIZES)[number];
 declare class UiAvatar {
     readonly initials: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAvatar, "ui-avatar", never, { "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -86,6 +102,8 @@ declare class UiAvatar {
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
 declare const BADGE_VARIANTS: readonly ["neutral", "outline"];
 type BadgeVariant = (typeof BADGE_VARIANTS)[number];
+declare const BADGE_SIZES: readonly ["md", "sm"];
+type BadgeSize = (typeof BADGE_SIZES)[number];
 /**
  * Small status descriptor for counts, states or labels, such as an instrument's asset class.
  *
@@ -94,16 +112,17 @@ type BadgeVariant = (typeof BADGE_VARIANTS)[number];
  */
 declare class UiBadge {
     readonly variant: _angular_core.InputSignal<"neutral" | "outline">;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBadge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBadge, "ui-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBadge, "ui-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Available button variants. `ButtonVariant` is derived from this tuple. */
 declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive"];
 type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
-/** Available button sizes. `md` is the touch target Cairn asks for everywhere. */
-declare const BUTTON_SIZES: readonly ["md", "lg", "xl", "icon"];
+/** Available button sizes. */
+declare const BUTTON_SIZES: readonly ["md", "lg", "xl", "xxl", "icon"];
 type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
  * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
@@ -114,7 +133,7 @@ type ButtonSize = (typeof BUTTON_SIZES)[number];
  */
 declare class UiButton {
     readonly variant: _angular_core.InputSignal<"outline" | "primary" | "ghost" | "destructive">;
-    readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "icon">;
+    readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "xxl" | "icon">;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
@@ -126,7 +145,7 @@ declare class UiButton {
 declare const CARD_VARIANTS: readonly ["default", "elevated"];
 type CardVariant = (typeof CARD_VARIANTS)[number];
 /** Available card paddings. `CardPadding` is derived from this tuple. */
-declare const CARD_PADDINGS: readonly ["none", "sm", "md"];
+declare const CARD_PADDINGS: readonly ["none", "sm", "md", "list"];
 type CardPadding = (typeof CARD_PADDINGS)[number];
 /**
  * Surface that groups related content: a summary block, a table, a side panel.
@@ -136,7 +155,7 @@ type CardPadding = (typeof CARD_PADDINGS)[number];
  */
 declare class UiCard {
     readonly variant: _angular_core.InputSignal<"default" | "elevated">;
-    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
+    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none" | "list">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCard, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -156,6 +175,46 @@ type UiControl = {
     readonly touched: Signal<boolean>;
 };
 
+type ChoiceChipOption = {
+    value: string;
+    label: string;
+};
+/**
+ * Exclusive choice among a handful of named options, shown as wrapping pills: an account envelope,
+ * a category, a frequency. Binds to Signal Forms with `[formField]`.
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [(value)]="envelope" />
+ *
+ * @example
+ * <ui-choice-chips label="Envelope" [options]="envelopes" [formField]="form.envelope" />
+ */
+declare class UiChoiceChips implements UiControl {
+    #private;
+    readonly options: _angular_core.InputSignal<ChoiceChipOption[]>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    readonly surface: _angular_core.InputSignal<"background" | "card">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    protected readonly labelId: string;
+    protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    protected readonly labelledBy: _angular_core.Signal<string | null>;
+    protected chipClasses(optionValue: string): string;
+    protected tabIndexFor(optionValue: string): number;
+    protected select(optionValue: string): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiChoiceChips, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiChoiceChips, "ui-choice-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+}
+
 /** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
 declare const DELTA_EMPHASES: readonly ["text", "pill"];
 type DeltaEmphasis = (typeof DELTA_EMPHASES)[number];
@@ -182,33 +241,58 @@ declare class UiDelta {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiDelta, "ui-delta", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "unknownLabel": { "alias": "unknownLabel"; "required": true; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/** Available dialog widths. `DialogWidth` is derived from this tuple. */
+/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
 declare const DIALOG_WIDTHS: readonly ["md", "lg"];
 type DialogWidth = (typeof DIALOG_WIDTHS)[number];
+/** Spacing presets. `DialogLayout` is derived from this tuple. */
+declare const DIALOG_LAYOUTS: readonly ["trade", "form", "list", "confirm"];
+type DialogLayout = (typeof DIALOG_LAYOUTS)[number];
+type LayoutClasses = {
+    dialog: string;
+    header: string;
+    title: string;
+    cross: string;
+    icon: string;
+    handle: string;
+    body: string;
+    footer: string;
+};
 /**
- * Modal dialog on the native <dialog>: a sheet rising from the bottom under `64rem`, centered
- * above it. Two projection slots - the body, and [dialogActions] for the footer.
+ * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
  *
  * @example
- * <ui-dialog heading="Delete this holding?" [open]="confirming()" (dismissed)="confirming.set(false)">
- *   <p>This cannot be undone.</p>
- *   <button dialogActions ui-button variant="outline" (click)="confirming.set(false)">Cancel</button>
+ * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
+ *   <p>Body</p>
+ *   <button dialogActions ui-button variant="outline" class="max-lg:hidden" (click)="buying.set(false)">Cancel</button>
+ *   <button dialogActions ui-button>Buy 40 shares</button>
  * </ui-dialog>
  */
 declare class UiDialog {
     #private;
     readonly heading: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string | undefined>;
-    readonly width: _angular_core.InputSignal<"md" | "lg">;
+    readonly closeLabel: _angular_core.InputSignal<string | undefined>;
+    readonly layout: _angular_core.InputSignal<"list" | "trade" | "form" | "confirm">;
+    readonly truncateDescription: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly width: _angular_core.InputSignal<"md" | "lg" | (string & {})>;
     readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
     protected readonly headingId: string;
     protected readonly descriptionId: string;
+    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 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; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*", "[dialogActions]"], true, 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; }; }, { "dismissed": "dismissed"; }, never, ["*", "[dialogActions]"], true, never>;
 }
 
 type DonutSlice = {
@@ -225,7 +309,8 @@ type RankedSlice = DonutSlice & {
 };
 
 type PositionedSlice = RankedSlice & {
-    path: string;
+    dash: string;
+    offset: string;
 };
 
 /**
@@ -247,11 +332,13 @@ declare class UiDonut {
     protected readonly positioned: _angular_core.Signal<PositionedSlice[]>;
     protected readonly active: _angular_core.Signal<RankedSlice | null>;
     protected readonly ariaLabel: _angular_core.Signal<string>;
-    protected pathClasses(slice: RankedSlice): string;
+    protected readonly radius = 78;
+    protected readonly ringWidth = 30;
+    protected strokeColor(slice: RankedSlice): string;
+    protected strokeWidth(slice: RankedSlice): number;
     protected dotClasses(slice: RankedSlice): string;
     protected rowClasses(slice: RankedSlice): string;
     protected subLabel(slice: RankedSlice): string;
-    protected arcTransform(slice: RankedSlice): string;
     protected isActive(slice: RankedSlice): boolean;
     protected highlight(id: string): void;
     protected clearHighlight(id: string): void;
@@ -260,6 +347,21 @@ declare class UiDonut {
     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; }; }, { "sliceSelect": "sliceSelect"; }, never, never, true, never>;
 }
 
+/**
+ * Marks an element, typically an 18px svg icon, as the leading content of a `ui-field`: it sits
+ * inside the control's left edge and the control's text is inset to clear it. Decorative, so hidden
+ * from assistive technologies.
+ *
+ * @example
+ * <ui-field label="Search" labelHidden>
+ *   <svg uiFieldLeading width="18" height="18" viewBox="0 0 24 24">...</svg>
+ *   <input uiInput type="search" />
+ * </ui-field>
+ */
+declare class UiFieldLeading {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFieldLeading, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFieldLeading, "[uiFieldLeading]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Label, control, hint and error as one unit. The control stays a plain native element:
  * the field finds it in its own projected content and wires the ARIA attributes onto it.
@@ -292,7 +394,9 @@ declare class UiField {
     protected readonly hintId: string;
     protected readonly errorId: string;
     protected readonly control: _angular_core.Signal<UiControl | undefined>;
-    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label font-medium text-(--muted-foreground)">;
+    protected readonly leading: _angular_core.Signal<UiFieldLeading | undefined>;
+    protected readonly rowClasses: _angular_core.Signal<"relative flex items-center [&>input]:pl-[38px]" | "relative flex items-center">;
+    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label leading-[17px] font-medium text-(--muted-foreground)">;
     /**
      * The caller's own `error` wins: it is the only way to report something the control does not
      * know about, such as a search box refusing an empty query.
@@ -300,12 +404,14 @@ declare class UiField {
     protected readonly message: _angular_core.Signal<string | undefined>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, {}, ["control", "leading"], ["[uiFieldLeading]", "*"], true, never>;
 }
 
 /** Available control sizes. `md` is the 44/40px touch target. */
 declare const CONTROL_SIZES: readonly ["sm", "md"];
 type ControlSize = (typeof CONTROL_SIZES)[number];
+declare const CONTROL_SURFACES: readonly ["background", "card"];
+type ControlSurface = (typeof CONTROL_SURFACES)[number];
 /**
  * Styled native text input. A directive (not a wrapper component) so the host
  * stays a plain <input>: every forms flavor (ngModel, reactive, signal forms)
@@ -319,11 +425,12 @@ type ControlSize = (typeof CONTROL_SIZES)[number];
  */
 declare class UiInput implements UiControl {
     readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly surface: _angular_core.InputSignal<"background" | "card">;
     readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
     readonly touched: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiInput, "input[uiInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiInput, "input[uiInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Styled native textarea. Lives beside the input because it shares every one of its
@@ -343,6 +450,10 @@ declare class UiTextarea implements UiControl {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTextarea, "textarea[uiTextarea]", never, { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare const TOOLTIP_SIZES: readonly ["compact", "large"];
+type TooltipSize = (typeof TOOLTIP_SIZES)[number];
+type AxisTicks = 3 | 5 | 'auto';
+
 type ChartPoint = {
     t: number;
     v: number;
@@ -365,12 +476,6 @@ type ChartGeometry = {
     plotTop: number;
 };
 
-type StartLabelPlacement = {
-    x: number;
-    y: number;
-    anchor: 'start' | 'end';
-};
-
 type PlotRef = ElementRef<SVGSVGElement>;
 /**
  * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
@@ -389,6 +494,12 @@ declare class UiLineChart {
     readonly startLabel: _angular_core.InputSignal<string>;
     readonly timeColumnLabel: _angular_core.InputSignal<string>;
     readonly valueColumnLabel: _angular_core.InputSignal<string>;
+    readonly sparkline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tooltip: _angular_core.InputSignal<"compact" | "large" | "auto">;
+    readonly tooltipDelta: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly axisGap: _angular_core.InputSignal<number | "auto">;
+    readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 3 | 5>;
+    protected readonly isCoreTick: (index: number, count: number) => boolean;
     protected readonly svgRef: _angular_core.Signal<PlotRef>;
     protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
     protected readonly animatedLine: _angular_core.WritableSignal<string | null>;
@@ -398,24 +509,33 @@ declare class UiLineChart {
     } | null>;
     protected readonly effectiveWidth: _angular_core.Signal<number>;
     protected readonly effectiveHeight: _angular_core.Signal<number>;
+    protected readonly plotHeight: _angular_core.Signal<number>;
+    protected readonly tooltipStyle: (point: PlottedPoint) => string;
+    protected readonly tooltipClasses: _angular_core.Signal<{
+        box: string;
+        value: string;
+        delta: string;
+    }>;
     protected readonly geometry: _angular_core.Signal<ChartGeometry | null>;
     protected readonly displayLine: _angular_core.Signal<string>;
     protected readonly ticks: _angular_core.Signal<PlottedPoint[]>;
     protected readonly active: _angular_core.Signal<PlottedPoint | null>;
     protected readonly startLabelInfo: _angular_core.Signal<{
         label: string;
-        placement: StartLabelPlacement;
+        placement: {
+            y: number;
+            x: number;
+            anchor: "start" | "end";
+        };
     } | null>;
     constructor();
-    protected coreTick(index: number, count: number): boolean;
     protected deltaFor(point: PlottedPoint): number;
     protected deltaClasses(point: PlottedPoint): string;
-    protected tooltipStyle(point: PlottedPoint): string;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerLeave(): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLineChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLineChart, "ui-line-chart", never, { "points": { "alias": "points"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "deltaFormat": { "alias": "deltaFormat"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "startLabel": { "alias": "startLabel"; "required": false; "isSignal": true; }; "timeColumnLabel": { "alias": "timeColumnLabel"; "required": false; "isSignal": true; }; "valueColumnLabel": { "alias": "valueColumnLabel"; "required": false; "isSignal": true; }; "sparkline": { "alias": "sparkline"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipDelta": { "alias": "tooltipDelta"; "required": false; "isSignal": true; }; "axisGap": { "alias": "axisGap"; "required": false; "isSignal": true; }; "axisTicks": { "alias": "axisTicks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -449,7 +569,7 @@ declare class UiMenu {
     readonly label: _angular_core.InputSignal<string>;
     readonly menuId: string;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
-    protected readonly classes = "m-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100";
+    protected readonly classes = "m-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100";
     protected readonly items: _angular_core.Signal<readonly UiMenuItem[]>;
     open(trigger: HTMLElement): void;
     close(): void;
@@ -487,7 +607,7 @@ declare class UiMeter {
     readonly value: _angular_core.InputSignal<number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly valueText: _angular_core.InputSignal<string>;
-    readonly tone: _angular_core.InputSignal<3 | 2 | 4 | 1 | 5 | 6>;
+    readonly tone: _angular_core.InputSignal<3 | 5 | 2 | 1 | 4 | 6>;
     protected readonly percent: _angular_core.Signal<number>;
     protected readonly fillClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMeter, never>;
@@ -510,6 +630,10 @@ declare class UiNavItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItem, "a[ui-nav-item]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[navIcon]", "*"], true, never>;
 }
 
+declare const ROW_SIZES: readonly ["md", "lg", "xl"];
+type RowSize = (typeof ROW_SIZES)[number];
+declare const ROW_PADDINGS: readonly ["md", "sm", "none"];
+type RowPadding = (typeof ROW_PADDINGS)[number];
 /**
  * Clickable row of a list: a holding, an envelope, an account.
  *
@@ -520,9 +644,11 @@ declare class UiNavItem {
  */
 declare class UiRow {
     readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<"md" | "lg" | "xl">;
+    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type SegmentedOption = {
@@ -581,10 +707,11 @@ declare class UiSkeleton {
     readonly shape: _angular_core.InputSignal<"text" | "figure" | "row" | "chart" | "ring">;
     readonly lines: _angular_core.InputSignal<number>;
     readonly height: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<number>;
     protected readonly animation = "cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate";
     protected readonly bars: _angular_core.Signal<("62%" | "100%")[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSkeleton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSkeleton, "ui-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSkeleton, "ui-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
@@ -608,7 +735,8 @@ type StatSize = (typeof STAT_SIZES)[number];
 declare class UiStat {
     readonly label: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<"hero" | "tile">;
-    protected readonly labelClasses = "text-label font-medium text-(--subtle-foreground)";
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly stackClasses: _angular_core.Signal<string>;
     protected readonly valueClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiStat, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiStat, "ui-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[uiStatValue]", "[uiStatDelta]", "[uiStatCaption]", "[uiStatAside]"], true, never>;
@@ -616,12 +744,13 @@ declare class UiStat {
 
 /**
  * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ * 51 by 31 on touch, 40 by 24 with a mouse.
  *
  * @example
  * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
  */
 declare class UiSwitch {
-    protected readonly classes = "relative shrink-0 w-[51px] h-[31px] appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px]";
+    protected readonly classes = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
 }
@@ -629,46 +758,135 @@ declare class UiSwitch {
 /** Breakpoints a secondary column can be held back until. */
 declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
 type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
-/** Styled native table. The rows and cells stay plain <tr> and <td>. */
+/** Body row heights. */
+declare const TABLE_ROWS: readonly ["48", "52", "60"];
+type TableRow = (typeof TABLE_ROWS)[number];
+/**
+ * Styled native table. The rows and cells stay plain <tr> and <td>. `row` sets the height of every
+ * body row, `rule` draws or drops the hairline under the header, `spaced` leaves 4px between the
+ * header and the first row.
+ *
+ * @example
+ * <table uiTable row="60" [rule]="false">
+ */
 declare class UiTable {
+    readonly row: _angular_core.InputSignal<"48" | "52" | "60">;
+    readonly rule: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly spaced: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTable, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTable, "table[uiTable]", never, {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTable, "table[uiTable]", never, { "row": { "alias": "row"; "required": false; "isSignal": true; }; "rule": { "alias": "rule"; "required": false; "isSignal": true; }; "spaced": { "alias": "spaced"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Body of one group of rows: leaves a 4px tail after its last row. */
+declare class UiGroup {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiGroup, "tbody[uiGroup]", never, {}, {}, never, never, true, never>;
 }
 /**
- * Body or group row. `group` draws the muted banner that opens each account inside a list of
- * holdings: it carries no hover state of its own, unlike an ordinary row.
+ * Body or group row. An ordinary row glows on hover and takes the soft fill when `selected`; an
+ * `interactive` row (one that opens something) also presses to the soft fill. A row with no action keeps a
+ * plain name: `<td uiTd primary class="truncate font-medium">`.
+ * `group` marks the row that holds a group band: it carries no hover state.
  *
  * @example
- * <tr uiTr>...
- * <tr uiTr group>...
+ * <tr uiTr [selected]="open">...
+ * <tr uiTr group><td ui-group-cell name="Brokerage">...
  */
 declare class UiTr {
     readonly group: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly classes: _angular_core.Signal<"min-h-(--row-min) rounded-control bg-(--muted) font-semibold" | "rounded-control hover:bg-(--glow)">;
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTr, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTr, "tr[uiTr]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTr, "tr[uiTr]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
- * Column header. `numeric` right-aligns and lines the digits up; `from` holds a
- * secondary column back until the viewport is wide enough for it.
+ * Column header, centred in its 36px. `numeric` right-aligns and lines the digits up; `secondary`
+ * (or `from`) holds a column back until the viewport is wide enough for it; `primary` makes it
+ * the column that absorbs the free width and truncates; `tall` is a 40px header; `width` fixes the column width and keeps it from shrinking.
  *
  * @example
- * <th uiTh numeric from="md">Average cost</th>
+ * <th uiTh numeric secondary width="108px">Quantity</th>
  */
 declare class UiTh {
+    readonly width: _angular_core.InputSignal<string | null>;
     readonly numeric: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tall: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly from: _angular_core.InputSignal<"md" | "lg" | null>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTh, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTh, "th[uiTh]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTh, "th[uiTh]", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "tall": { "alias": "tall"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-/** Body cell. Same two inputs as `UiTh`, and they must be set on both to match. */
+/** Body cell. Same inputs as `UiTh` (bar `tall` and `width`), and they must be set on both to match. */
 declare class UiTd {
     readonly numeric: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly from: _angular_core.InputSignal<"md" | "lg" | null>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTd, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTd, "td[uiTd]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTd, "td[uiTd]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Group band sizes. */
+declare const GROUP_SIZES: readonly ["md", "lg"];
+type GroupSize = (typeof GROUP_SIZES)[number];
+/**
+ * The band that opens a group of rows: name in 600 (a heading), meta beside it, the projected
+ * total pinned to the right. Spans the whole row through `colspan`.
+ *
+ * @example
+ * <tr uiTr group><td ui-group-cell colspan="4" name="Brokerage" meta="Savings plan">...total...</td></tr>
+ */
+declare class UiGroupCell {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly meta: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<"md" | "lg">;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiGroupCell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiGroupCell, "td[ui-group-cell]", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Makes a link or button the way into its row. By default an invisible layer stretches over the
+ * whole row, so the row is one target for the pointer, the keyboard and a screen reader, and its
+ * focus ring wraps the row. With `[stretch]="false"` only the name is the
+ * target: it underlines on hover and takes its own ring. `current` marks the open line.
+ *
+ * @example
+ * <td uiTd primary><a uiRowLink href="/lines/42">Ferrari</a></td>
+ * <td uiTd primary><a uiRowLink [stretch]="false" href="/accounts/3">Brokerage</a></td>
+ */
+declare class UiRowLink {
+    readonly stretch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly current: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)" | "block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowLink, "a[uiRowLink], button[uiRowLink]", never, { "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** A control in another cell of a stretched-link row: lifts it above the layer that covers the row. */
+declare class UiRowAction {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowAction, "[uiRowAction]", never, {}, {}, never, never, true, never>;
+}
+/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */
+declare const SUB_TONES: readonly ["subtle", "stale", "inherit"];
+type SubTone = (typeof SUB_TONES)[number];
+/**
+ * A second line under a cell's main text. `narrow` shows it only under 1024px, where it carries
+ * the quantity, average cost and quote that were held back. Its amounts go through `ui-amount`
+ * so they mask.
+ *
+ * @example
+ * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>
+ * <span uiCellSub tone="stale">Quote of 24/09</span>
+ */
+declare class UiCellSub {
+    readonly narrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tone: _angular_core.InputSignal<"subtle" | "stale" | "inherit">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCellSub, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiCellSub, "[uiCellSub]", never, { "narrow": { "alias": "narrow"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -696,5 +914,5 @@ declare class UiTab {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
 }
 
-export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiDonut, UiField, UiInput, UiLineChart, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
-export type { AmountFormatOptions, AmountMasking, AmountNumeric, AsyncState, AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ChartPoint, ControlSize, DeltaEmphasis, DialogWidth, DonutSlice, MeterTone, SegmentedOption, StatSize, UiControlError };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DIALOG_LAYOUTS, DIALOG_WIDTHS, GROUP_SIZES, METER_TONES, ROW_PADDINGS, ROW_SIZES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiAlert, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiField, UiFieldLeading, UiGroup, UiGroupCell, UiInput, UiLineChart, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncState, AvatarSize, AxisTicks, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DialogLayout, DialogWidth, DonutSlice, GroupSize, MeterTone, RowPadding, RowSize, SegmentedOption, StatSize, SubTone, TableRow, TooltipSize, UiControlError };