@lifecorner/angular-ui-kit 3.14.0 → 3.15.0

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

@@ -35,8 +35,11 @@ export type SidenavVariant = 'default' | 'transparent';
  * - Optional backdrop overlay
  * - 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`)
- *   set on `lc-sidenav` win over `theme` (3.14); `--lc-sidenav-active-indicator`
+ *   `-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