@joanroucoux/cairn-ui 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joanroucoux/cairn-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Cairn UI — a monochrome, accessible Angular design system.",
   "keywords": [
     "angular",

package/styles/motion.css

@@ -69,6 +69,15 @@
   transition: none !important;
 }
 
+[data-ui-settling],
+[data-ui-settling]::before,
+[data-ui-settling]::after,
+[data-ui-settling] *,
+[data-ui-settling] *::before,
+[data-ui-settling] *::after {
+  transition: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ui-enter-fade-up,
   .ui-enter-panel {

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

@@ -116,6 +116,7 @@ declare class UiAsync {
     protected readonly titleClasses: _angular_core.Signal<string>;
     protected readonly messageClasses: _angular_core.Signal<string>;
     protected readonly retryButtonClasses: _angular_core.Signal<string>;
+    constructor();
     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; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
 }
@@ -151,7 +152,8 @@ declare class UiAvatar {
 /**
  * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
  * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
- * sets through `ariaCurrentWhenActive`) it holds a soft halo. The avatar itself keeps its own size.
+ * sets through `ariaCurrentWhenActive`) it holds a soft halo, drawn at once when the route changes. The avatar
+ * itself keeps its own size.
  *
  * @example
  * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
@@ -174,6 +176,7 @@ declare class UiBackLink {
     readonly size: _angular_core.InputSignal<"sm" | "md" | "header">;
     protected readonly chevron: _angular_core.Signal<number>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBackLink, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBackLink, "a[ui-back-link]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -722,6 +725,10 @@ type EndRef = ElementRef<SVGCircleElement>;
  * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
  * three core ticks below it. Tick positions are unchanged.
  *
+ * A new series interpolates from the drawn curve, fading the start label and the dashed line. With
+ * `rangeKey` bound, only a series that comes with a new key does so: a new series under the same key
+ * (a reload after a buy) is drawn at once, with no fade. The key may change before its series arrives.
+ *
  * @example
  * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
  */
@@ -742,6 +749,7 @@ declare class UiLineChart {
     readonly tooltipDelta: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly axisGap: _angular_core.InputSignal<number | "auto">;
     readonly axisTicks: _angular_core.InputSignalWithTransform<AxisTicks, string | 3 | 5>;
+    readonly rangeKey: _angular_core.InputSignal<string | null>;
     protected readonly svgRef: _angular_core.Signal<PlotRef>;
     protected readonly lineRef: _angular_core.Signal<LineRef | undefined>;
     protected readonly endRef: _angular_core.Signal<EndRef | undefined>;
@@ -781,7 +789,7 @@ declare class UiLineChart {
     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; }; "tooltipFormat": { "alias": "tooltipFormat"; "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>;
+    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; }; "tooltipFormat": { "alias": "tooltipFormat"; "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; }; "rangeKey": { "alias": "rangeKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -864,7 +872,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<2 | 4 | 1 | 3 | 6 | 5>;
+    readonly tone: _angular_core.InputSignal<2 | 3 | 1 | 4 | 6 | 5>;
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly trackClasses: _angular_core.Signal<string>;
     protected readonly percent: _angular_core.Signal<number>;
@@ -979,7 +987,23 @@ declare class UiHighlight {
 declare function injectReducedMotion(): Signal<boolean>;
 
 /**
- * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ * Holds the transitions of the host and of everything inside it until two frames after its first
+ * render, through the `data-ui-settling` attribute and the matching rule of `styles/motion.css`.
+ * A route's elements are created a tick before their classes are bound; a layout read in between
+ * would otherwise turn the bound fill, colour or switch track into a transition on page open. Call it
+ * in an injection context. A host whose view is never refreshed (a detached change detector) keeps the
+ * attribute, and with it no transition.
+ *
+ * @example
+ * constructor() {
+ *   holdTransitionsUntilRendered();
+ * }
+ */
+declare function holdTransitionsUntilRendered(): void;
+
+/**
+ * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts). The active
+ * fill and text colour switch at once on navigation; only the hover fill fades.
  *
  * @example
  * <a ui-nav-item [active]="url === '/'" routerLink="/">
@@ -990,6 +1014,7 @@ declare function injectReducedMotion(): Signal<boolean>;
 declare class UiNavItem {
     readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItem, "a[ui-nav-item]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[navIcon]", "*"], true, never>;
 }
@@ -1090,6 +1115,7 @@ declare class UiSegmented {
     readonly size: _angular_core.InputSignal<"sm" | "md">;
     protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
     protected readonly thumbIndex: _angular_core.Signal<number>;
+    constructor();
     protected optionClasses(optionValue: string): string;
     protected tabIndexFor(optionValue: string): number;
     protected select(optionValue: string): void;
@@ -1139,19 +1165,24 @@ declare class UiSkeleton {
     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 stale link sizes. `StaleLinkSize` is derived from this tuple. */
+declare const STALE_LINK_SIZES: readonly ["caption", "label"];
+type StaleLinkSize = (typeof STALE_LINK_SIZES)[number];
 /**
  * Link in the stale tone, for a caption about data that is late or left out of a total, such as
- * "1 ligne sans cours, non comptée". Caption size, weight 500, underlined on hover, with an optional
- * trailing chevron.
+ * "1 ligne sans cours, non comptée". Weight 500, underlined on hover, with an optional trailing
+ * chevron. `size` is `caption` (12/17, the default) or `label` (14/20, the dashboard total's
+ * "1 cours en retard").
  *
  * @example
- * <a uiStaleLink chevron routerLink="/holdings">1 cours en retard</a>
+ * <a uiStaleLink chevron size="label" routerLink="/holdings">1 cours en retard</a>
  */
 declare class UiStaleLink {
     readonly chevron: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly classes: _angular_core.Signal<"relative inline-flex items-center gap-0.5 rounded-[4px] text-caption font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:h-11 pointer-fine:before:h-10 before:-translate-y-1/2 before:content-['']" | "relative inline-flex items-center gap-0.5 rounded-[4px] text-caption font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:h-11 pointer-fine:before:h-10 before:-translate-y-1/2 before:content-[''] after:size-4 after:flex-none after:bg-current after:content-[''] after:mask-center after:mask-no-repeat after:mask-[url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]">;
+    readonly size: _angular_core.InputSignal<"label" | "caption">;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiStaleLink, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiStaleLink, "a[uiStaleLink]", never, { "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiStaleLink, "a[uiStaleLink]", never, { "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
@@ -1191,6 +1222,7 @@ declare class UiStat {
  */
 declare class UiSwitch {
     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-[background-color] 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";
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
 }
@@ -1289,6 +1321,7 @@ declare class UiTable {
     readonly rule: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly spaced: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTable, 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>;
 }
@@ -1404,5 +1437,5 @@ declare class UiCellSub {
     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>;
 }
 
-export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiEmpty, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiFlipItem, UiFlipList, UiGroup, UiGroupCell, UiHighlight, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStaleLink, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiToaster, UiToasts, UiTr, delayedState, formatAmount, injectReducedMotion };
-export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogCloseReason, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StatSize, SubTone, TableRow, Toast, TooltipSize, UiControlError };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STALE_LINK_SIZES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiEmpty, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiFlipItem, UiFlipList, UiGroup, UiGroupCell, UiHighlight, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStaleLink, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiToaster, UiToasts, UiTr, delayedState, formatAmount, holdTransitionsUntilRendered, injectReducedMotion };
+export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogCloseReason, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StaleLinkSize, StatSize, SubTone, TableRow, Toast, TooltipSize, UiControlError };