@lifecorner/angular-ui-kit 3.35.0 → 3.37.0

package/src/styles/theme-contrast.spec.ts

@@ -1,6 +1,7 @@
 import { compile } from 'sass';
 import { readFileSync, readdirSync } from 'fs';
 import { resolve } from 'path';
+import { CHART_PALETTE } from '../lib/internal/chart/chart-palette';
 
 /**
  * Contrast contract of the semantic color tokens, measured on the compiled
@@ -1960,3 +1961,118 @@ describe('Component pairings of 3.30 (request 047)', () => {
     expect(Math.min(got.textOnFill, got.textOnHoverFill)).toBeGreaterThanOrEqual(4.5);
   });
 });
+
+/**
+ * Request 056 (3.36, design 056 §5): the state strip's marks, ring and
+ * caption, the ledger rules of the description-list total and the table
+ * footer, and the band story's parts. Minima over the page, the surfaces and
+ * a hovered row (translucent fills composited over the surface).
+ */
+describe('Component pairings of 3.36 (request 056)', () => {
+  const lib = (path: string) => resolve(__dirname, '../lib', path);
+  const sheets = {
+    strip: compile(lib('state-strip/state-strip.component.scss')).css,
+    dl: compile(lib('description-list/description-list.component.scss')).css,
+    table: compile(lib('table/table.component.scss')).css,
+  };
+  const body = (sheet: keyof typeof sheets, selector: string) => {
+    const css = sheets[sheet];
+    const at = css.indexOf(`\n${selector} {`);
+    expect([selector, at > -1]).toEqual([selector, true]);
+    return css.slice(at, css.indexOf('}', at));
+  };
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+  const grounds = ['--color-background', '--color-surface', '--color-surface-2', '--color-surface-hover', '--color-surface-sunken'];
+
+  it('AC-4, AC-12, AC-19: the rules pair these tokens', () => {
+    expect(body('strip', '.lc-state-strip__mark--success')).toContain('background-color: var(--color-text-success)');
+    expect(body('strip', '.lc-state-strip__mark--warning')).toContain('background-color: var(--color-text-warning)');
+    expect(body('strip', '.lc-state-strip__mark--error')).toContain('background-color: var(--color-text-error)');
+    expect(body('strip', '.lc-state-strip__mark--neutral')).toContain('background-color: var(--color-field-border)');
+    expect(body('strip', '.lc-state-strip__cell:focus-visible')).toContain('outline: 2px solid var(--color-primary-500)');
+    const caption = body('strip', '.lc-state-strip__caption');
+    expect(caption).toContain('background-color: var(--color-text-primary)');
+    expect(caption).toContain('color: var(--color-surface)');
+    expect(body('dl', '.lc-dl .lc-dl__row--total')).toContain('border-top: 1px solid var(--color-field-border)');
+    expect(body('table', '.lc-table tfoot tr')).toContain('border-bottom: 3px double var(--color-field-border)');
+  });
+
+  // [light, dark], floored; design 056 §5 quotes the rounded values (warning
+  // 5.48 / 6.35, error 11.44, ring 3.97 / 7.58, caption 17.74 / 15.85).
+  const expected = {
+    success: [4.81, 6.97],
+    warning: [5.47, 6.34],
+    error: [11.43, 7.21],
+    neutral: [4.39, 5.56],
+    ring: [3.96, 7.57],
+    caption: [17.73, 15.85],
+  };
+
+  it.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('AC-4, AC-12: %s palette: the design 056 §5 ratios', (_palette, tokens, i) => {
+    const c = (name: string) => color(tokens, name);
+    const surface = c('--color-surface');
+    const ground = (name: string) => over(c(name), surface);
+    const worst = (ink: string) => floor(Math.min(...grounds.map((g) => ratio(over(c(ink), ground(g)), ground(g)))));
+    const got = {
+      success: worst('--color-text-success'),
+      warning: worst('--color-text-warning'),
+      error: worst('--color-text-error'),
+      neutral: worst('--color-field-border'),
+      ring: worst('--color-primary-500'),
+      caption: floor(ratio(c('--color-surface'), c('--color-text-primary'))),
+    };
+    expect(got).toEqual(Object.fromEntries(Object.entries(expected).map(([key, pair]) => [key, pair[i]])));
+    // Marks, ring and rules: 3:1 (WCAG 1.4.11); the caption is text: 4.5:1.
+    for (const key of ['success', 'warning', 'error', 'neutral', 'ring'] as const) expect(got[key]).toBeGreaterThanOrEqual(3);
+    expect(got.caption).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(palettes)('AC-16: %s palette: the band story\'s five part colours keep 3:1 on the surface', (_palette, tokens) => {
+    const surface = color(tokens, '--color-surface');
+    const parts = ['--color-primary-700', '--color-primary-500', '--color-info-default', '--color-secondary-700', '--color-neutral-500'];
+    for (const part of parts) expect([part, ratio(over(color(tokens, part), surface), surface) >= 3]).toEqual([part, true]);
+  });
+});
+
+/**
+ * 3.37 (request 057, 056 F-1, design D-8, AC-20): the chart family's default
+ * palette is a graphical object (WCAG 1.4.11): every entry keeps 3:1 against
+ * the page and the surface in both themes. Entries 3 and 4 moved from the
+ * status fills to the status inks.
+ */
+describe('Component pairings of 3.37 (request 057)', () => {
+  const PALETTE: readonly string[] = CHART_PALETTE;
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+  const pages = ['--color-background', '--color-surface'];
+
+  it('AC-20: the palette reads tokens only; entries 3 and 4 are the success and warning inks', () => {
+    expect(PALETTE).toHaveLength(8);
+    expect(PALETTE.every((entry) => /^var\(--color-[\w-]+\)$/.test(entry))).toBe(true);
+    expect(PALETTE[2]).toBe('var(--color-text-success)');
+    expect(PALETTE[3]).toBe('var(--color-text-warning)');
+  });
+
+  // [light, dark], the minimum over page and surface, floored; design 057 §5
+  // quotes them rounded (5.30 and 6.03 light).
+  const expected: Record<string, [number, number]> = {
+    '--color-text-success': [5.29, 8.4],
+    '--color-text-warning': [6.02, 7.65],
+  };
+
+  it.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('AC-20: %s palette: all 8 entries reach 3:1 on the page and the surface', (_palette, tokens, i) => {
+    const lowest = (name: string) =>
+      floor(Math.min(...pages.map((page) => ratio(over(color(tokens, name), color(tokens, page)), color(tokens, page)))));
+    for (const entry of PALETTE) {
+      const name = (entry.match(/^var\((--[\w-]+)\)$/) as RegExpMatchArray)[1];
+      expect([name, lowest(name) >= 3]).toEqual([name, true]);
+      if (expected[name]) expect([name, lowest(name)]).toEqual([name, expected[name][i]]);
+    }
+  });
+
+  it('why: the 3.36 entries 3 and 4 stay below 3:1 on the light page and surface', () => {
+    const light = palettes[0][1];
+    for (const old of ['--color-success-default', '--color-warning-default']) {
+      for (const page of pages) expect([old, page, ratio(color(light, old), color(light, page)) < 3]).toEqual([old, page, true]);
+    }
+  });
+});

package/src/styles/theme-modes.spec.ts

@@ -111,7 +111,10 @@ describe('Theme scope of a themed sidenav rail badge (request 051)', () => {
   const COLOUR = /^--(color-|gradient-|shadow-|elevation-|accent-line$|app-background-image$)/;
   const colours = (tokens: Record<string, string>) =>
     Object.fromEntries(Object.entries(tokens).filter(([name]) => COLOUR.test(name)));
-  const LIGHT_RAIL = '.lc-sidenav-container--light .lc-sidenav__nav-badge {';
+  // 3.37 (request 057, design D-5): the light rule's selector list also takes
+  // `lc-hero lc-badge` (badges on the hero's fixed bands), so the light rule
+  // ends in it; the declarations are the same single block.
+  const LIGHT_RAIL = '.lc-sidenav-container--light .lc-sidenav__nav-badge,\nlc-hero lc-badge {';
   const DARK_RAIL = '.lc-sidenav-container--dark .lc-sidenav__nav-badge {';
 
   it('AC-3/AC-4: the light rail badge declares exactly the colour tokens of the light root (172), with the same values', () => {
@@ -136,9 +139,21 @@ describe('Theme scope of a themed sidenav rail badge (request 051)', () => {
   });
 
   it('scopes the badge host only, not the rail or its label tooltip', () => {
-    for (const css of [light, dark]) {
-      const selectors = [...css.matchAll(/(^|\n)([^\n{}]*lc-sidenav[^\n{}]*)\{/g)].map((m) => m[2].trim());
-      expect(selectors).toEqual([expect.stringMatching(/^\.lc-sidenav-container--(light|dark) \.lc-sidenav__nav-badge$/)]);
-    }
+    // Whole selector lists, the text before each `{` (3.37: the light one spans two lines).
+    const selectorLists = (css: string) =>
+      css
+        .replace(/\/\*[^]*?\*\//g, '')
+        .split('{')
+        .slice(0, -1)
+        .map((chunk) => chunk.slice(chunk.lastIndexOf('}') + 1).trim());
+    expect(selectorLists(light).filter((s) => s.includes('lc-sidenav'))).toEqual([
+      '.lc-sidenav-container--light .lc-sidenav__nav-badge,\nlc-hero lc-badge',
+    ]);
+    expect(selectorLists(dark).filter((s) => s.includes('lc-sidenav'))).toEqual(['.lc-sidenav-container--dark .lc-sidenav__nav-badge']);
+  });
+
+  it('3.37: badges in lc-hero take the light palette in both themes, from the light file only', () => {
+    expect(light.match(/lc-hero lc-badge/g)).toHaveLength(1);
+    expect(dark.includes('lc-hero')).toBe(false);
   });
 });

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

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { ElementRef } from "@angular/core";
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info' | 'inverse';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info' | 'inverse' | 'inverse-outline';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonType = 'button' | 'submit' | 'reset';
 /**
@@ -15,7 +15,9 @@ export declare class ButtonComponent {
    * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,
    * accent-violet). It looks the same in both themes. Not for light backgrounds
    * or `variant="light"` heroes. CSS hook `--lc-button-inverse-fg` (default
-   * `#0d353d`) sets its ink; keep 4.5:1 on white.
+   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is
+   * the quieter action beside it on the same bands: white text and keyline on
+   * a dark translucent fill, the same sizes, height, icon slots and states.
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
@@ -239,7 +241,9 @@ export declare class ButtonLinkComponent {
    * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,
    * accent-violet). It looks the same in both themes. Not for light backgrounds
    * or `variant="light"` heroes. CSS hook `--lc-button-inverse-fg` (default
-   * `#0d353d`) sets its ink; keep 4.5:1 on white.
+   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is
+   * the quieter link beside it on the same bands: white text and keyline on a
+   * dark translucent fill, the same sizes and height.
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;

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

@@ -19,6 +19,8 @@ export type CardFooterLayout = 'default' | 'equal';
  *   the title stays a heading
  * - Equal footer (3.29): `footerLayout="equal"` gives two answers of equal
  *   weight in the `[card-footer]` slot the same width
+ * - Collapsible (3.36): `collapsible` with `[(expanded)]` turns the head into
+ *   one toggle that opens and closes the body and footer
  *
  * @example
  * ```html
@@ -181,23 +183,58 @@ export declare class CardComponent {
    * @default 'default'
    */
   footerLayout: import("@angular/core").InputSignal<CardFooterLayout>;
+  /**
+   * The card can close (3.36, regeln row 1): the head (icon, title, subtitle)
+   * becomes one toggle, a button inside the title's heading with
+   * `aria-expanded` and `aria-controls`, whose hit area is the whole head (at
+   * least 44 px high); Enter, Space or a click open and close the body and the
+   * `[card-footer]`. A chevron at the end of the head shows the state.
+   * `[card-header-action]` stays a separate control beside it. Needs the
+   * built-in `title` (otherwise ignored); wins over `clickable`, `href` and
+   * `route`, which are then ignored; ignored on `dashed`. Bind `[(expanded)]`.
+   * @default false
+   */
+  collapsible: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Open state of a `collapsible` card (3.36), two-way: `[(expanded)]`. Open
+   * by default, so a plain `collapsible` hides nothing; set `false` for a card
+   * that starts closed (also in prerendered HTML). Closed, only the head
+   * shows: the body is `hidden` and the footer is not displayed.
+   * @default true
+   */
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
   /**
    * Emitted when a `clickable` card is clicked or activated with Enter or
    * Space. Not emitted on a link card (`href`/`route`): the link navigates by
    * itself (one navigation); bind the native `(click)` for analytics.
    */
   readonly cardClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  /** Generated id prefix (3.36): creation order, so prerendered HTML is the same in every build. */
+  private readonly uid;
+  /** Id of the body a collapsible card's toggle controls. */
+  protected readonly bodyId: string;
+  /** Id of the subtitle that describes a collapsible card's toggle. */
+  protected readonly subtitleId: string;
+  /**
+   * Whether the card collapses (3.36): `collapsible` with a built-in title,
+   * except for the dashed tile.
+   */
+  protected readonly isCollapsible: import("@angular/core").Signal<boolean>;
   /**
    * How the card links (3.24): `href` wins over `route`; `''`/`null` routes
-   * are no link, and the dashed "coming soon" tile never links.
+   * are no link, and the dashed "coming soon" tile never links. A
+   * collapsible card (3.36) never links.
    */
   protected readonly linkMode: import("@angular/core").Signal<"href" | "route" | null>;
   /**
    * Whether the card acts as a button: `clickable`, except for the dashed
-   * "coming soon" tile, which is never interactive, and a link card, whose
-   * anchor is the only interactive element.
+   * "coming soon" tile, which is never interactive, a link card, whose
+   * anchor is the only interactive element, and a collapsible card (3.36),
+   * whose toggle is.
    */
   protected isClickable: import("@angular/core").Signal<boolean>;
+  /** Opens or closes a collapsible card; `expandedChange` emits the new state. */
+  protected toggle(): void;
   /** `ariaLabel` on the card; on a link card it names the anchor instead. */
   protected readonly cardAriaLabel: import("@angular/core").Signal<string | undefined>;
   constructor();
@@ -309,7 +346,18 @@ export declare class CardComponent {
       "required": false;
       "isSignal": true;
     };
+    "collapsible": {
+      "alias": "collapsible";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
+    "expanded": "expandedChange";
     "cardClick": "cardClick";
   }, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
 }

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

@@ -66,6 +66,16 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   readonly helperText: import("@angular/core").InputSignal<string | undefined>;
   /** Error message */
   readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Announce the error message the moment it appears (`role="alert"` on the
+   * message), as `lc-textarea`. Set `false` when an `lc-alert` error summary
+   * already announces the errors, e.g. a page that moves focus to this field
+   * after a failed submit (422): the error is then read once, with the field,
+   * not twice (alert and description). The message stays visible, stays linked
+   * through `aria-describedby`, and the input keeps `aria-invalid`.
+   * @default true
+   */
+  readonly announceError: import("@angular/core").InputSignal<boolean>;
   /** Disabled state */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** Allow multiple selections */
@@ -268,6 +278,11 @@ export declare class ComboboxComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "announceError": {
+      "alias": "announceError";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;

package/types/lifecorner-angular-ui-kit-description-list.d.ts

@@ -1,3 +1,4 @@
+import { BadgeVariant } from "@lifecorner/angular-ui-kit/badge";
 import * as i0 from "@angular/core";
 /**
  * Emphasis treatment applied to a row's value.
@@ -26,6 +27,24 @@ export interface DescriptionListItem {
   datetime?: string;
   /** Optional visual emphasis for the value. @default 'default' */
   emphasis?: DescriptionListEmphasis;
+  /**
+   * Shows the value as an `lc-badge` (3.36, quellen row 2): rounded, `sm` in
+   * an md list, `xs` in an sm list. A `value` that is empty or the same word
+   * (trimmed, any case) is not shown; another value stays as text before the
+   * badge („1“ [Freigegeben]), and `href` or `datetime` wrap that text only.
+   * Term and value stay one `dt`/`dd` pair, read as „term, badge“.
+   */
+  badge?: string;
+  /** Variant of the `badge`, as `lc-badge`. @default 'default' */
+  badgeVariant?: BadgeVariant;
+  /**
+   * The sum item (3.36, app-shell row 2): a rule above and a double rule
+   * below (`--color-field-border`), term and value semibold with tabular
+   * figures; its `emphasis` is ignored. `totalAriaLabel` is read before its
+   * term. Usually the last item.
+   * @default false
+   */
+  total?: boolean;
   /** Optional opaque payload echoed back in `itemClick`. */
   id?: string;
 }
@@ -55,6 +74,8 @@ export type DescriptionListSeparator = 'line' | 'divider' | 'none';
  * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`
  *   rows hold a native button (named by term and value) that the keyboard
  *   reaches, and the `dl` keeps its term and value pairs.
+ * - 3.36: an item's value as a badge (`badge`, `badgeVariant`), and a sum
+ *   item (`total`) with ledger rules, announced with `totalAriaLabel`.
  *
  * @example
  * ```html
@@ -99,8 +120,22 @@ export declare class DescriptionListComponent {
    * @default false
    */
   readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Read before the term of a `total` item and not shown (3.36, app-shell
+   * row 2): „Summe“ makes a screen reader read „Summe, Gesamtkosten Ist,
+   * 522.530,00 €“. Empty adds nothing.
+   * @default ''
+   */
+  readonly totalAriaLabel: import("@angular/core").InputSignal<string>;
   /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */
   readonly itemClick: import("@angular/core").OutputEmitterRef<DescriptionListItem>;
+  /** The visually hidden start of a total's term: „Summe, “ (3.36). */
+  protected readonly totalPrefix: import("@angular/core").Signal<string>;
+  /**
+   * Whether a badge item also shows its `value` as text (3.36, D-2): not when
+   * it is empty or the badge's word.
+   */
+  protected badgeShowsValue(item: DescriptionListItem): boolean;
   /** Generated id prefix, taken once per instance, so later ids don't shift. */
   private readonly uid;
   /** Id of row `index`'s term (only rendered when `clickable`). */
@@ -147,6 +182,11 @@ export declare class DescriptionListComponent {
       "required": false;
       "isSignal": true;
     };
+    "totalAriaLabel": {
+      "alias": "totalAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
   }, never, never, true, never>;

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

@@ -1,6 +1,7 @@
 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 { BadgeVariant } from "@lifecorner/angular-ui-kit/badge";
 import * as i0 from "@angular/core";
 /** A link in the header's main navigation (`navItems`). */
 export interface HeaderNavItem {
@@ -31,6 +32,18 @@ export type HeaderUserMenuTrigger = 'icon' | 'avatar';
  * the title. From 641 px both render it inline.
  */
 export type HeaderContextPlacement = 'inline' | 'below';
+/**
+ * State of the header's context (3.36, `contextBadge`): an `lc-badge`
+ * (`sm`, rounded) inside the context button after `contextName`, e.g.
+ * `{ label: 'Freigegeben', variant: 'success' }`. Keep the label to one or two
+ * words.
+ */
+export interface HeaderContextBadge {
+  /** Visible badge text; it ends the button's accessible name. */
+  label: string;
+  /** Badge variant, as `lc-badge`. @default 'default' */
+  variant?: BadgeVariant;
+}
 /**
  * AppHeaderComponent - Global application header for the LifeCorner shell
  *
@@ -78,6 +91,9 @@ export type HeaderContextPlacement = 'inline' | 'below';
  *   of being hidden; from 641 px it sits in the end group as before.
  * - `focusContext()` (3.34): moves the focus to the context button after the
  *   next render, e.g. after a choice in the sheet it opened (WCAG 2.4.3).
+ * - `contextBadge` (3.36): the context's state as a badge inside the context
+ *   button, part of its accessible name; `hamburgerClick` emits the
+ *   hamburger's `<button>`, e.g. for `lc-sidenav [returnFocusTo]`.
  * - Every built-in label is an input (`homeAriaLabel`, `hamburgerAriaLabel`,
  *   `userMenuAriaLabel`, `navAriaLabel`, `profileLabel`, `logoutLabel`,
  *   `themeToDarkAriaLabel`, `themeToLightAriaLabel`, `contextAriaLabel`);
@@ -222,6 +238,19 @@ export declare class HeaderComponent {
    * @default 'inline'
    */
   readonly contextPlacement: import("@angular/core").InputSignal<HeaderContextPlacement>;
+  /**
+   * State of the context (3.36, app-shell row 1): an `lc-badge` (`sm`,
+   * rounded) inside the context button after `contextName`, e.g.
+   * `{ label: 'Freigegeben', variant: 'success' }`, wherever the button shows
+   * (`inline` and `below`, every size). Its label ends the button's accessible
+   * name („Monatsstand wählen, Monatsstand Oktober 2026 · Fassung 1,
+   * Freigegeben“, WCAG 2.5.3) unless `contextAriaLabel` already holds it. With
+   * a badge the button may grow to 340 px (220 without); a long name ends with
+   * "…" and the badge stays whole. Keep the label to one or two words. Target
+   * size, focus ring, `contextClick` and `focusContext()` don't change.
+   * @default undefined
+   */
+  readonly contextBadge: import("@angular/core").InputSignal<HeaderContextBadge | undefined>;
   readonly menuSize: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   readonly showProfileMenuItem: import("@angular/core").InputSignal<boolean>;
   /** Render the account menu (avatar trigger with Profile/Logout). */
@@ -271,12 +300,19 @@ export declare class HeaderComponent {
   readonly profileLabel: import("@angular/core").InputSignal<string>;
   /** Label of the Logout entry in the account menu. */
   readonly logoutLabel: import("@angular/core").InputSignal<string>;
-  readonly hamburgerClick: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when the hamburger is clicked. Since 3.36 it carries the
+   * hamburger's native `<button>`, the element that has the focus, so a page
+   * can hand it to `lc-sidenav`: `(hamburgerClick)="trigger = $event; open = true"`
+   * with `[returnFocusTo]="trigger"`. Handlers without `$event` work as before.
+   */
+  readonly hamburgerClick: import("@angular/core").OutputEmitterRef<HTMLElement>;
   readonly themeToggleClick: import("@angular/core").OutputEmitterRef<void>;
   readonly logoutClick: import("@angular/core").OutputEmitterRef<void>;
   readonly profileClick: import("@angular/core").OutputEmitterRef<void>;
   readonly contextClick: import("@angular/core").OutputEmitterRef<void>;
   private readonly injector;
+  private readonly hostElement;
   private themeServiceInstance;
   /**
    * Resolved on first use, i.e. only when the theme button is shown: creating
@@ -338,7 +374,8 @@ export declare class HeaderComponent {
    */
   focusContext(): void;
   /**
-   * Handle hamburger click
+   * Handle hamburger click: emits the hamburger's native `<button>` (3.36).
+   * Called without a rendered hamburger, it emits the header's host element.
    */
   onHamburgerClick(): void;
   /**
@@ -500,6 +537,11 @@ export declare class HeaderComponent {
       "required": false;
       "isSignal": true;
     };
+    "contextBadge": {
+      "alias": "contextBadge";
+      "required": false;
+      "isSignal": true;
+    };
     "menuSize": {
       "alias": "menuSize";
       "required": false;

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

@@ -10,6 +10,8 @@ export type HeroVariant = 'default' | 'slim' | 'light';
  *   background stays full-bleed
  */
 export type HeroContentWidth = 'full' | 'lg';
+/** Heading level of `lc-hero`'s title (3.36): `h1`–`h6`, the same look at every level. */
+export type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 /**
  * Hero component for prominent page headers with gradient backgrounds.
  *
@@ -22,8 +24,15 @@ export type HeroContentWidth = 'full' | 'lg';
  * - Content projection for body and footer sections
  * - Footer slot for metadata, stats, or CTAs
  * - Media slot (`[hero-media]`) for a visual: below the text on small screens,
- *   beside it from 1024 px, never under the body's 85 % opacity
+ *   beside it from 1024 px
+ * - 3.37: components in the default slot keep full opacity (only the body
+ *   text is softened, through its colour), and badges in a hero take the light
+ *   palette in both themes; `fill` takes the height of a stretching grid or
+ *   flex row
  * - Content width `lg`: a full-bleed band whose text lines up with the page column
+ * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level
+ * - `focusTitle()` (3.36): moves focus to the title (`tabindex="-1"`, out of the
+ *   Tab order) after an action replaced the stage (WCAG 2.4.3)
  *
  * @example
  * ```html
@@ -79,6 +88,36 @@ export declare class HeroComponent {
    * @default 'full'
    */
   contentWidth: import("@angular/core").InputSignal<HeroContentWidth>;
+  /**
+   * Element of the title (`h1`–`h6`), so the hero fits the page's outline
+   * (3.36, cockpit row 1). Only the element changes: size, weight, line height
+   * and spacing are the same at every level, `size`, `variant` and breakpoint.
+   * Use 2 under an `lc-page-header`, which holds the page's `h1`.
+   * @default 1
+   */
+  headingLevel: import("@angular/core").InputSignal<HeroHeadingLevel>;
+  /**
+   * Fill the height the container gives the hero (3.37, cockpit row 1): in a
+   * grid or flex row that stretches its items, the band ends at the row's
+   * bottom edge; the content stays at the top and `[hero-footer]` sits at the
+   * bottom. Without it the hero is as tall as its content.
+   * @default false
+   */
+  fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly titleEl;
+  private readonly labelEl;
+  /**
+   * Moves the focus to the title (3.36, monatsstand row 1), e.g. after an
+   * action replaced the stage and the button that was used is gone, so focus
+   * doesn't fall back to the page (WCAG 2.4.3). Gives the title
+   * `tabindex="-1"` first: it stays out of the Tab order. With a `label`, the
+   * title is named "label title" (`aria-labelledby` on both, ids set at the
+   * call), so the label is read before it. Call it after the new state has
+   * rendered, e.g. `afterNextRender(() => this.hero().focusTitle(), { injector })`
+   * with `hero = viewChild.required(HeroComponent)`, as
+   * `lc-next-step-card.focusTitle()`. Without a call nothing changes.
+   */
+  focusTitle(): void;
   protected heroClasses: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<HeroComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HeroComponent, "lc-hero", never, {
@@ -117,5 +156,15 @@ export declare class HeroComponent {
       "required": false;
       "isSignal": true;
     };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*", "[hero-media]", "[hero-footer]"], true, never>;
 }

package/types/lifecorner-angular-ui-kit-internal-chart.d.ts

@@ -26,6 +26,12 @@ export declare function readableInk(fill: string): string | null;
  *
  * Charts fall back to this list when a series/segment brings no `color` of its
  * own; per-item colours always win.
+ *
+ * 3.37 (request 057, 056 F-1, WCAG 1.4.11): entries 3 and 4 are the status
+ * inks, not the status fills. `--color-success-default` measured 2.47–2.72:1
+ * and `--color-warning-default` 2.05–2.26:1 on light pages; the inks reach
+ * 5.30 and 6.03:1 there (8.40 and 7.65:1 dark). Every entry keeps 3:1 against
+ * `--color-background` and `--color-surface` in both themes.
  */
 export declare const CHART_PALETTE: readonly string[];
 /** Palette colour for the series/segment at `index`, wrapping around. */

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

@@ -121,6 +121,11 @@ export type ListItemPart = 'row' | 'action';
  * - `focusItem(id, part)` (3.34): moves the focus to a row's button or link,
  *   or to its action, e.g. when the sheet that action opened closes
  *   (WCAG 2.4.3)
+ * - `showChevron` (3.36): a decorative chevron at the end of every
+ *   `clickable` or `href` row
+ * - 3.37: a `clickable` row with an `action` holds a native button stretched
+ *   over the row (named by the row) beside its action, so no control sits
+ *   inside another (WCAG 4.1.2); one Tab stop for the row, then the action
  *
  * @example
  * ```html
@@ -168,6 +173,16 @@ export declare class ListComponent {
    * @default 'xs'
    */
   actionSize: import("@angular/core").InputSignal<ButtonSize>;
+  /**
+   * Ends every row that opens something, a `clickable` row or an `href` row,
+   * with the kit's `chevron-right` (20 px, `--color-text-tertiary`) after its
+   * badge, metadata and action (3.36, quellen row 3). Decorative: hidden from
+   * screen readers. Plain rows get none, and neither do rows drawn by an
+   * `lcListItem` template (add the icon to the template there). Row height,
+   * target size, focus ring, badge and `actionClick` don't change.
+   * @default false
+   */
+  showChevron: import("@angular/core").InputSignal<boolean>;
   /** Event emitted when an item is clicked */
   readonly itemClick: import("@angular/core").OutputEmitterRef<ListItem>;
   /** Event emitted when an action button is clicked */
@@ -199,6 +214,13 @@ export declare class ListComponent {
    * @param part Which part of the row gets the focus.
    */
   focusItem(id: string, part?: ListItemPart): void;
+  /** Generated id prefix, taken once per instance (module counter, the same in every prerender). */
+  private readonly uid;
+  /**
+   * Id of row `index` of a `clickable` row with an `action` (3.37): the
+   * row's button is named by it (`aria-labelledby`).
+   */
+  protected rowId(index: number): string;
   /** Whether a row renders as a link: `href` set and not disabled. */
   protected isLinkRow(item: ListItem): boolean;
   /**
@@ -276,6 +298,11 @@ export declare class ListComponent {
       "required": false;
       "isSignal": true;
     };
+    "showChevron": {
+      "alias": "showChevron";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
     "actionClick": "actionClick";

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

@@ -161,8 +161,13 @@ export declare class SelectComponent implements ControlValueAccessor {
   /**
    * Close dropdown. Idempotent: the overlay's `detach` re-enters here after
    * `isOpen` flips, and that second call must not emit `closed` again.
+   *
+   * `returnFocus` (3.37, request 057, services row 2): a single-select choice
+   * and `Escape` also hand the focus back to the trigger when it is on `<body>`
+   * (a tap on an option, which has no `tabindex`, moves it there). Without it
+   * (backdrop click, detach) only focus inside the panel returns, as before.
    */
-  close(): void;
+  close(returnFocus?: boolean): void;
   /**
    * Select an option
    */
@@ -187,6 +192,13 @@ export declare class SelectComponent implements ControlValueAccessor {
    * Handle click outside
    */
   onClickOutside(): void;
+  /**
+   * Keys that reach the open overlay while the focus is outside the field and
+   * the panel, e.g. on `<body>` after a tap (3.37, request 057): `Escape`
+   * closes and returns the focus. It runs before the overlay's own `Escape`
+   * detach, which then finds the select closed.
+   */
+  onOverlayKeydown(event: KeyboardEvent): void;
   writeValue(value: SelectValue): void;
   registerOnChange(fn: (value: SelectValue) => void): void;
   registerOnTouched(fn: () => void): void;