@lifecorner/angular-ui-kit 3.13.1 → 3.15.0

package/types/lifecorner-angular-ui-kit-avatar.d.ts

@@ -16,6 +16,13 @@ export type AvatarLoading = 'eager' | 'lazy';
  * the name or initials beside the colour — colour is never the only cue.
  */
 export type AvatarColor = 'default' | 'member-1' | 'member-2' | 'member-3' | 'member-4' | 'member-5' | 'member-6';
+/**
+ * What `lc-avatar` shows with no image and no name (3.15).
+ * - `initials`: "?"
+ * - `person`: a person symbol on a neutral disc (`--color-neutral-300`, glyph
+ *   `--color-neutral-700`; `color` is ignored while it shows)
+ */
+export type AvatarFallback = 'initials' | 'person';
 /** The six member colours in their order (`AvatarColor` without `default`). */
 export declare const AVATAR_MEMBER_COLORS: readonly AvatarColor[];
 /**
@@ -37,6 +44,8 @@ export declare function ɵavatarInitials(name: string | undefined): string;
  * - `ring`: a gap in the page colour around the avatar, for stacks and for
  *   avatars on images or tints
  * - Accessible with alt text support
+ * - `fallback="person"`: a person symbol on a neutral disc instead of "?"
+ *   when there is no name (3.15)
  *
  * @example
  * ```html
@@ -86,10 +95,20 @@ export declare class AvatarComponent {
    * button labelled "Menu for Tom Ek".
    */
   decorative: import("@angular/core").InputSignal<boolean>;
+  /**
+   * What shows with no image and no name: `'initials'` shows "?"; `'person'`
+   * shows a person symbol on a neutral disc (`color` is ignored while it
+   * shows). With a `name`, both show the initials. The accessible name stays
+   * `alt`, then `name`, then "Avatar".
+   * @default 'initials'
+   */
+  fallback: import("@angular/core").InputSignal<AvatarFallback>;
   /**
    * Computed initials from name
    */
   initials: import("@angular/core").Signal<string>;
+  /** The person symbol: `fallback="person"`, no image (or a broken one) and no name. */
+  protected readonly showPerson: import("@angular/core").Signal<boolean>;
   /**
    * Computed CSS classes for the avatar
    */
@@ -160,5 +179,10 @@ export declare class AvatarComponent {
       "required": false;
       "isSignal": true;
     };
+    "fallback": {
+      "alias": "fallback";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }

package/types/lifecorner-angular-ui-kit-button.d.ts

@@ -3,6 +3,11 @@ import { ElementRef } from "@angular/core";
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info' | 'inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonType = 'button' | 'submit' | 'reset';
+/**
+ * Colour tone of `variant="outline"` (3.15). `primary`: text and border in the
+ * primary colour. Other variants ignore it.
+ */
+export type ButtonTone = 'neutral' | 'primary';
 export declare class ButtonComponent {
   /**
    * Visual variant. `inverse` is a white pill with dark ink and a white focus
@@ -14,6 +19,14 @@ export declare class ButtonComponent {
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
+  /**
+   * Colour tone of `variant="outline"`: `'primary'` sets text and border to
+   * the primary colour (`--color-primary-700` / `-600`; hover
+   * `--color-surface-selected`, active `--color-primary-200`). Other variants
+   * ignore it.
+   * @default 'neutral'
+   */
+  readonly tone: import("@angular/core").InputSignal<ButtonTone>;
   readonly size: import("@angular/core").InputSignal<ButtonSize>;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
@@ -71,6 +84,11 @@ export declare class ButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
     "size": {
       "alias": "size";
       "required": false;
@@ -178,6 +196,14 @@ export declare class ButtonLinkComponent {
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
+  /**
+   * Colour tone of `variant="outline"`, as on `lc-button`: `'primary'` sets
+   * text and border to the primary colour (`--color-primary-700` / `-600`;
+   * hover `--color-surface-selected`, active `--color-primary-200`). Other
+   * variants ignore it.
+   * @default 'neutral'
+   */
+  readonly tone: import("@angular/core").InputSignal<ButtonTone>;
   /** Size, as on `lc-button`. `lg` (48.5 px high) meets the 44 px touch target. */
   readonly size: import("@angular/core").InputSignal<ButtonSize>;
   /** Stretch the link to the full width of its container. */
@@ -208,6 +234,11 @@ export declare class ButtonLinkComponent {
       "required": false;
       "isSignal": true;
     };
+    "tone": {
+      "alias": "tone";
+      "required": false;
+      "isSignal": true;
+    };
     "size": {
       "alias": "size";
       "required": false;

package/types/lifecorner-angular-ui-kit-empty-state.d.ts

@@ -2,6 +2,20 @@ import * as i0 from "@angular/core";
 export type EmptyStateSize = 'sm' | 'md' | 'lg';
 /** Heading level of `lc-empty-state`'s heading (3.3, G-9). */
 export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Look of `lc-empty-state`'s icon (3.15).
+ * - `neutral`: the bare 40 px icon in `--color-text-tertiary`
+ * - `primary`: a 24 px icon in `--color-primary-700` on a 48 px
+ *   `--color-primary-100` circle
+ */
+export type EmptyStateIconTone = 'neutral' | 'primary';
+/**
+ * Text scale of `lc-empty-state` (3.15), beside `size` (the padding).
+ * - `sm`: 14 px message
+ * - `md`: the state-page scale — 16/24 px message, 20 px heading, 16 px below
+ *   the icon and 24 px before the projected action
+ */
+export type EmptyStateMessageSize = 'sm' | 'md';
 /**
  * Empty state component for "no data" placeholder displays.
  *
@@ -49,6 +63,20 @@ export declare class EmptyStateComponent {
    * Description text
    */
   readonly message: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * `'neutral'`: the bare 40 px icon in `--color-text-tertiary`. `'primary'`:
+   * a 24 px icon in `--color-primary-700` on a 48 px `--color-primary-100`
+   * circle. Decorative in both tones.
+   * @default 'neutral'
+   */
+  readonly iconTone: import("@angular/core").InputSignal<EmptyStateIconTone>;
+  /**
+   * `'sm'`: 14 px message. `'md'`, for a state page: 16/24 px message, 20 px
+   * heading, 16 px below the icon and 24 px before the projected action.
+   * Wrap several actions in one row element.
+   * @default 'sm'
+   */
+  readonly messageSize: import("@angular/core").InputSignal<EmptyStateMessageSize>;
   protected readonly hostClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "lc-empty-state", never, {
@@ -77,5 +105,15 @@ export declare class EmptyStateComponent {
       "required": false;
       "isSignal": true;
     };
+    "iconTone": {
+      "alias": "iconTone";
+      "required": false;
+      "isSignal": true;
+    };
+    "messageSize": {
+      "alias": "messageSize";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-header.d.ts

@@ -1,4 +1,4 @@
-import { AvatarColor } from "@lifecorner/angular-ui-kit/avatar";
+import { AvatarColor, AvatarFallback } from "@lifecorner/angular-ui-kit/avatar";
 import { MenuItem } from "@lifecorner/angular-ui-kit/menu";
 import { ThemeService } from "@lifecorner/angular-ui-kit/theme";
 import * as i0 from "@angular/core";
@@ -59,7 +59,8 @@ export type HeaderUserMenuTrigger = 'icon' | 'avatar';
  *   cannot stay over scrolling text).
  * - `userMenuTrigger="avatar"`: the account button is the person's initials
  *   avatar (`userAvatarColor` for the member colour, `userAvatarSrc` for a
- *   photo) in a 48 px round button; the icon trigger is 44 px high in every
+ *   photo, `userAvatarFallback="person"` for a person symbol while there is
+ *   no name) in a 48 px round button; the icon trigger is 44 px high in every
  *   density.
  * - The subtitle (e.g. a household name) stays on one line and ends with "…";
  *   the full text is its `title` and stays in the accessible text. It is shown
@@ -174,6 +175,13 @@ export declare class HeaderComponent {
   readonly userAvatarSrc: import("@angular/core").InputSignal<string>;
   /** Colour of the account avatar's initials: `default` or a member colour `member-1` … `member-6`. */
   readonly userAvatarColor: import("@angular/core").InputSignal<AvatarColor>;
+  /**
+   * Passed to the trigger avatar and the menu avatar as `fallback` (3.15):
+   * `person` shows a person symbol on a neutral disc instead of "?" while
+   * `userName` is empty.
+   * @default 'initials'
+   */
+  readonly userAvatarFallback: import("@angular/core").InputSignal<AvatarFallback>;
   readonly showHamburger: import("@angular/core").InputSignal<boolean>;
   /**
    * Open state of the sidenav the hamburger controls. When bound, the toggle
@@ -411,6 +419,11 @@ export declare class HeaderComponent {
       "required": false;
       "isSignal": true;
     };
+    "userAvatarFallback": {
+      "alias": "userAvatarFallback";
+      "required": false;
+      "isSignal": true;
+    };
     "showHamburger": {
       "alias": "showHamburger";
       "required": false;

package/types/lifecorner-angular-ui-kit-page-header.d.ts

@@ -15,6 +15,13 @@ import * as i0 from "@angular/core";
  *                   1024 px (`--font-size-auth-title`)
  */
 export type PageHeaderSize = 'compact' | 'secondary' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';
+/**
+ * Space above the page header's content (3.15).
+ * - `default` — the size's block padding (24 px; `comfortable` 40, `compact`
+ *               and `secondary` 12)
+ * - `none` 0 · `sm` 8 px · `md` 16 px
+ */
+export type PageHeaderPaddingTop = 'default' | 'none' | 'sm' | 'md';
 /**
  * Page header — top-of-page title block with optional subtitle,
  * breadcrumbs, badge, description and an actions area.
@@ -116,6 +123,14 @@ export declare class PageHeaderComponent {
    * @default false
    */
   noPaddingX: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Space above the header content. `'default'`: the size's block padding
+   * (24, comfortable 40, compact/secondary 12). `'none'` 0, `'sm'` 8 px,
+   * `'md'` 16 px. The bottom padding is unchanged. Use `'none'` with
+   * `lc-app-page` `paddingTop="md"` to put the `h1` 16 px below `lc-header`.
+   * @default 'default'
+   */
+  paddingTop: import("@angular/core").InputSignal<PageHeaderPaddingTop>;
   /**
    * Classes of the heading: the global type-scale class (`lc-title`,
    * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.
@@ -179,5 +194,10 @@ export declare class PageHeaderComponent {
       "required": false;
       "isSignal": true;
     };
+    "paddingTop": {
+      "alias": "paddingTop";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["[slot='breadcrumbs']", "[slot='title-suffix']", "[slot='actions']", "[slot='meta']", "*"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-sidenav-placeholder.d.ts

@@ -34,8 +34,10 @@ import * as i0 from "@angular/core";
  * it when it is swapped. The navigation landmark, the current item
  * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no
  * shimmer. The skeleton shapes are filled with
- * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on
- * `lc-sidenav` (set them on an ancestor of both).
+ * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` colour hooks apply as
+ * on `lc-sidenav`: set them on the element or any ancestor (3.15), e.g. one
+ * rule on an ancestor of both. A value on the element wins over an
+ * ancestor's, and both win over `theme`.
  */
 export declare class SidenavPlaceholderComponent {
   private readonly router;

package/types/lifecorner-angular-ui-kit-sidenav.d.ts

@@ -18,6 +18,10 @@ export type SidenavVariant = 'default' | 'transparent';
  * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint
  * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)
  * - Integrated logo area with collapse-toggle (sidebar-first layouts)
+ * - Text brand (`brandName`, `brandIcon`): an icon tile and the product name,
+ *   one link to home (`brandHref`, else `routerLink="/"`), as high as the
+ *   `lc-header` next to it; the rail shows only the tile. It never toggles:
+ *   `showCollapseToggle` adds a collapse button at the bottom of the rail
  * - Hierarchical navigation with collapsible groups (up to 3 levels)
  * - Section headlines for item grouping with optional action buttons
  * - Action buttons on any item (hover-reveal)
@@ -29,7 +33,18 @@ export type SidenavVariant = 'default' | 'transparent';
  * - Keyboard navigation support (Escape closes drawer)
  * - Configurable width and position (left/right)
  * - Optional backdrop overlay
- * - Theme variants: auto, light, dark (with teal accent for dark mode)
+ * - Theme variants: auto, light, dark (with teal accent for dark mode). The
+ *   theming hooks (`--lc-sidenav-bg`, `-fg`, `-fg-active`, `-border`,
+ *   `-hover-bg`, `-section-fg`, `-active-bg`, `-active-fg`, `-active-icon`,
+ *   `-badge-ring`) can be set on `lc-sidenav` or any ancestor (3.15); a value
+ *   on the element wins over an ancestor's, and both win over `theme` (3.14).
+ *   Set the same ones for `lc-sidenav-placeholder`, e.g. on a shared ancestor;
+ *   `--lc-sidenav-active-indicator`
+ *   (the current item's 2 px bar, default `--color-primary-500`; on a
+ *   `theme="light"` rail #208497 on any page, like its focus rings),
+ *   `--lc-sidenav-brand-tile-bg` (default `--color-primary-fill`) and
+ *   `--lc-sidenav-brand-tile-fg` (default `--color-on-primary`) can be set on
+ *   any ancestor
  * - `variant="transparent"`: no rail background or border, items as 48 px
  *   pills with 16 px labels, the current one on `--color-surface-selected`
  * - Items are at least 44 px high in every density; the current item's ink is
@@ -77,8 +92,51 @@ export declare class SidenavComponent implements OnDestroy {
   readonly logoDarkEmblemSrc: import("@angular/core").InputSignal<string>;
   /** Alt text for the brand logo. */
   readonly logoAlt: import("@angular/core").InputSignal<string>;
-  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size="md">` (both 64px). */
+  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size="md">` (both 64px). Also sets the height of the text brand (`brandName`). */
   readonly logoSize: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+  /**
+   * Product name shown as a text brand at the top: an icon tile and the name,
+   * one link to home. Replaces the image logo (`showLogo`). The block is as
+   * high as the image logo (`logoSize`: 64 px for `md`, matching
+   * `lc-header size="md"`); the name wraps to two lines at most, and the full
+   * name stays the link's accessible name. Collapsed, only the tile shows.
+   * The brand never toggles the rail (see `showCollapseToggle`). Under
+   * `@defer`, give the `lc-sidenav-placeholder` `[showLogo]="true"` and the
+   * same `logoSize` to reserve the block. Empty: no text brand.
+   * @default ''
+   */
+  readonly brandName: import("@angular/core").InputSignal<string>;
+  /**
+   * `lc-icon` name in the brand tile (decorative). Empty: the tile shows the
+   * name's first letter. Renders nothing without `brandName`.
+   * @default ''
+   */
+  readonly brandIcon: import("@angular/core").InputSignal<string>;
+  /**
+   * Plain URL of the brand link (a native `<a href>`, works without the
+   * router). Empty: `routerLink="/"`, as `lc-header`'s `homeHref`.
+   * @default ''
+   */
+  readonly brandHref: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name of the brand link. Empty: the brand name. Start it with
+   * the visible name, e.g. `'Finance Intelligence – home'`.
+   * @default ''
+   */
+  readonly brandAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Docked mode: a button at the bottom of the rail collapses and expands it
+   * (`collapsed`). Independent of the brand. With `showLogo` the image logo
+   * toggles already, so use one of the two.
+   * @default false
+   */
+  readonly showCollapseToggle: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the collapse button (`showCollapseToggle`) while the
+   * rail is collapsed. Expanded, it uses `collapseAriaLabel`.
+   * @default 'Expand navigation'
+   */
+  readonly expandAriaLabel: import("@angular/core").InputSignal<string>;
   /** Whether the sidenav is open */
   readonly isOpen: import("@angular/core").InputSignal<boolean>;
   /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
@@ -203,10 +261,20 @@ export declare class SidenavComponent implements OnDestroy {
   sidenavStyles: import("@angular/core").Signal<{
     width: string;
   }>;
+  /** The brand tile's letter when there is no `brandIcon`: the name's first character, upper-cased. */
+  protected readonly brandInitial: import("@angular/core").Signal<string>;
+  /** Whether the rail shows only icons (as `lc-sidenav--collapsed`). */
+  protected readonly isRail: import("@angular/core").Signal<boolean>;
+  /** The collapse button's accessible name: what a press does. */
+  protected readonly collapseToggleLabel: import("@angular/core").Signal<string>;
+  /** The collapse button's chevron points where the rail moves: ⟨ to collapse a left rail, ⟩ to expand it (mirrored on the right). */
+  protected readonly collapseToggleIcon: import("@angular/core").Signal<"chevron-left" | "chevron-right">;
   /**
    * Toggle collapsed state
    */
   toggleCollapsed(): void;
+  /** The brand link closes the drawer on a phone, as the items do. */
+  handleBrandClick(): void;
   /**
    * Handle close action
    */
@@ -285,6 +353,36 @@ export declare class SidenavComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "brandName": {
+      "alias": "brandName";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandIcon": {
+      "alias": "brandIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandHref": {
+      "alias": "brandHref";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandAriaLabel": {
+      "alias": "brandAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCollapseToggle": {
+      "alias": "showCollapseToggle";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandAriaLabel": {
+      "alias": "expandAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "isOpen": {
       "alias": "isOpen";
       "required": false;

package/types/lifecorner-angular-ui-kit-stat-trend.d.ts

@@ -1,6 +1,26 @@
 import { SparklineColor } from "@lifecorner/angular-ui-kit/sparkline";
 import * as i0 from "@angular/core";
 export type StatTrendDirection = 'up' | 'down' | 'neutral';
+/** Whether a change is good or bad for the reader, independent of its direction. */
+export type StatTrendSentiment = 'positive' | 'negative' | 'neutral';
+/**
+ * Words of the screen-reader text that `lc-stat-trend` adds to the change when
+ * `sentiment` is set (", up, unfavourable"). Override single keys via `labels`.
+ */
+export interface StatTrendLabels {
+  /** Direction up. EN "up", DE "gestiegen". */
+  up: string;
+  /** Direction down. EN "down", DE "gesunken". */
+  down: string;
+  /** Direction neutral. EN "unchanged", DE "unverändert". */
+  unchanged: string;
+  /** Sentiment positive. EN "favourable", DE "günstig". */
+  positive: string;
+  /** Sentiment negative. EN "unfavourable", DE "ungünstig". */
+  negative: string;
+  /** Sentiment neutral. EN "neutral", DE "neutral". */
+  neutral: string;
+}
 export declare class StatTrendComponent {
   /** Main KPI label. */
   label: import("@angular/core").InputSignal<string>;
@@ -10,6 +30,20 @@ export declare class StatTrendComponent {
   change: import("@angular/core").InputSignal<string>;
   /** Trend direction for color coding. Auto-detected from change if not set. */
   direction: import("@angular/core").InputSignal<StatTrendDirection | undefined>;
+  /**
+   * Whether the change is good or bad, independent of its direction (a rise in
+   * costs is negative). Colours the change and the default sparkline; the arrow
+   * keeps the direction. Unset: derived from the direction.
+   * @default undefined
+   */
+  sentiment: import("@angular/core").InputSignal<StatTrendSentiment | undefined>;
+  /**
+   * Words of the screen-reader text added to the change when `sentiment` is set.
+   * Missing keys fall back to the English defaults (up, down, unchanged,
+   * favourable, unfavourable, neutral).
+   * @default {}
+   */
+  labels: import("@angular/core").InputSignal<Partial<StatTrendLabels>>;
   /** Sparkline data points. If empty, no sparkline is shown. */
   sparklineData: import("@angular/core").InputSignal<number[]>;
   /** Color of the sparkline. Auto-matched to trend direction if not set. */
@@ -20,6 +54,8 @@ export declare class StatTrendComponent {
   protected readonly trendColorClass: import("@angular/core").Signal<string>;
   protected readonly resolvedSparklineColor: import("@angular/core").Signal<SparklineColor>;
   protected readonly trendIcon: import("@angular/core").Signal<string>;
+  /** ", up, unfavourable": rendered only when `sentiment` is set. */
+  protected readonly srText: import("@angular/core").Signal<string>;
   protected readonly hasSparkline: import("@angular/core").Signal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<StatTrendComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StatTrendComponent, "lc-stat-trend", never, {
@@ -43,6 +79,16 @@ export declare class StatTrendComponent {
       "required": false;
       "isSignal": true;
     };
+    "sentiment": {
+      "alias": "sentiment";
+      "required": false;
+      "isSignal": true;
+    };
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
     "sparklineData": {
       "alias": "sparklineData";
       "required": false;