@lifecorner/angular-ui-kit 3.35.0 → 3.36.0

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.
  *
@@ -24,6 +26,9 @@ export type HeroContentWidth = 'full' | 'lg';
  * - 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
  * - 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 +84,28 @@ 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>;
+  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 +144,10 @@ export declare class HeroComponent {
       "required": false;
       "isSignal": true;
     };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["*", "[hero-media]", "[hero-footer]"], true, never>;
 }

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

@@ -121,6 +121,8 @@ 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
  *
  * @example
  * ```html
@@ -168,6 +170,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 */
@@ -276,6 +288,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-stacked-bar-chart.d.ts

@@ -10,6 +10,11 @@ export interface StackedBarLegend {
   color?: string;
 }
 export type StackedBarOrientation = 'vertical' | 'horizontal';
+/**
+ * Form of `lc-stacked-bar-chart` (3.36): `chart` (axes, grid, labels and
+ * paddings, as before) or `band` (one horizontal bar edge to edge).
+ */
+export type StackedBarVariant = 'chart' | 'band';
 export declare class StackedBarChartComponent {
   private readonly _el;
   private readonly _destroyRef;
@@ -42,6 +47,32 @@ export declare class StackedBarChartComponent {
    * series names and every category's total.
    */
   ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Form of the chart (3.36, cockpit row 2). `chart`: axes, grid, labels and
+   * paddings, as before. `band`: one horizontal bar that fills the host's
+   * width edge to edge, `height` px thick, scaled from 0 to the sum of the
+   * values, without axes, grid, labels, values or paddings; the parts are
+   * split by a 2 px gap in the surface colour (CSS hooks
+   * `--lc-stacked-bar-chart-band-gap`, default `2px`, and
+   * `--lc-stacked-bar-chart-band-gap-color`, default `var(--color-surface)`:
+   * set it to the band's background off a card). `ariaLabel`, `legends` and
+   * the legend work as in `chart`. Needs exactly one category (otherwise it
+   * renders as `chart`, with a warning in dev mode); `orientation` is
+   * ignored; negative values draw nothing, and a sum of 0 draws no parts.
+   * Part widths are percentages, so the band is exact in prerendered HTML.
+   * @default 'chart'
+   */
+  variant: import("@angular/core").InputSignal<StackedBarVariant>;
+  /** `band` with exactly one category (3.36); otherwise the chart renders. */
+  protected readonly isBand: import("@angular/core").Signal<boolean>;
+  /** The band's parts as percentages of the width: 0 … sum of the positive values. */
+  protected readonly bandParts: import("@angular/core").Signal<{
+    x: number;
+    w: number;
+    color: string;
+  }[]>;
+  /** The boundaries between two drawn parts, where the band's gap lines sit. */
+  protected readonly bandGaps: import("@angular/core").Signal<number[]>;
   private readonly PL;
   private readonly PR;
   private readonly PT;
@@ -167,5 +198,10 @@ export declare class StackedBarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,107 @@
+import * as i0 from "@angular/core";
+/** State of one run in `lc-state-strip` (3.36). */
+export type StateStripState = 'success' | 'warning' | 'error' | 'neutral';
+/** One run of `lc-state-strip`: its state, and a `label` that names it („Mo 06.10., 06:00“). */
+export interface StateStripSegment {
+  state: StateStripState;
+  label: string;
+}
+/** The words of the four states, for the counts and the segment names. */
+export type StateStripLabels = Record<StateStripState, string>;
+/** English state words of `lc-state-strip`; pass `stateLabels` for another language. */
+export declare const DEFAULT_STATE_STRIP_LABELS: Readonly<StateStripLabels>;
+/**
+ * The states of the last runs at a glance (3.36, quellen row 1): one segment
+ * per run, oldest first. The state is a shape, not only a colour: success a
+ * block in the upper half, error one in the lower half, warning a centred
+ * block, neutral a flat dash, so the strip reads without hue and in forced
+ * colours.
+ *
+ * Accessibility: an APG single-row grid. The strip is named by `ariaLabel`
+ * and the count per state („Letzte 10 Ladeläufe, 9 geladen, 1
+ * fehlgeschlagen“); each segment is a grid cell named by its `label` and
+ * state word. One Tab stop (the newest run first), Arrow Left/Right, Home and
+ * End move between the runs, Escape hides the caption. Hovering or focusing a
+ * segment shows its name below the strip (hidden from screen readers, which
+ * read the cell).
+ *
+ * Without segments it renders nothing. The segments are in the prerendered
+ * HTML. CSS hooks: `--lc-state-strip-height` (default `2rem`) and
+ * `--lc-state-strip-segment-max-width` (default `1.5rem`; more segments than
+ * fit share the width, never overflowing).
+ *
+ * @example
+ * ```html
+ * <lc-state-strip
+ *   ariaLabel="Letzte 10 Ladeläufe"
+ *   [stateLabels]="{ success: 'geladen', warning: 'teilweise geladen', error: 'fehlgeschlagen', neutral: 'ausstehend' }"
+ *   [segments]="runs"
+ * />
+ * ```
+ */
+export declare class StateStripComponent {
+  /**
+   * The runs, in order, oldest first: one segment each. Empty renders nothing
+   * (no box, no accessibility node).
+   * @default []
+   */
+  readonly segments: import("@angular/core").InputSignal<readonly StateStripSegment[]>;
+  /**
+   * Start of the strip's accessible name; the count per state follows it
+   * („Letzte 10 Ladeläufe, 9 geladen, 1 fehlgeschlagen“).
+   * @default ''
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * The state words for the counts and the segment names, over the English
+   * defaults (`DEFAULT_STATE_STRIP_LABELS`: succeeded, with warnings, failed,
+   * pending). German: `{ success: 'geladen', warning: 'teilweise geladen',
+   * error: 'fehlgeschlagen', neutral: 'ausstehend' }`.
+   * @default {}
+   */
+  readonly stateLabels: import("@angular/core").InputSignal<Partial<StateStripLabels>>;
+  private readonly cellEls;
+  /** The state words in use. */
+  private readonly words;
+  /** One entry per segment: its state (unknown states draw as neutral) and its name. */
+  protected readonly cells: import("@angular/core").Signal<{
+    state: StateStripState;
+    name: string;
+  }[]>;
+  /** The strip's name: `ariaLabel`, then the count per state (0 left out). */
+  protected readonly gridLabel: import("@angular/core").Signal<string>;
+  /** The roving Tab stop: the newest run until the user moves. */
+  protected readonly current: import("@angular/core").WritableSignal<number>;
+  /** The segment under the pointer, the one with focus, and whether Escape hid the caption. */
+  private readonly hovered;
+  private readonly focused;
+  private readonly dismissed;
+  /** The segment whose name the caption shows, if any. */
+  private readonly captionIndex;
+  /** The caption's text: the name of the hovered or focused segment ('' hides it). */
+  protected readonly caption: import("@angular/core").Signal<string>;
+  protected onFocus(index: number): void;
+  protected onBlur(): void;
+  protected onPointerEnter(index: number): void;
+  protected onPointerLeave(): void;
+  /** Arrow Left/Right, Home, End move between the runs (no wrap); Escape hides the caption. */
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StateStripComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StateStripComponent, "lc-state-strip", never, {
+    "segments": {
+      "alias": "segments";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "stateLabels": {
+      "alias": "stateLabels";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -12,6 +12,9 @@ import { ButtonVariant } from "@lifecorner/angular-ui-kit/button";
  *   </ng-template>
  * </lc-table>
  * ```
+ *
+ * In the `footerRow` (3.36) the same template renders with `footer: true` in
+ * its context (`let-footer="footer"`), e.g. to leave out a badge in the sum.
  */
 export declare class TableCellDirective {
   /** The column key this template applies to */
@@ -83,6 +86,15 @@ export interface TableAction {
   variant?: ButtonVariant;
   /** Optional tooltip / aria-label, useful for icon-only actions */
   tooltip?: string;
+  /**
+   * Accessible name of the action's button (3.36, services row 2): a string,
+   * or a function of the row, so each row's button names its object
+   * (`(row) => 'Herkunft von ' + row.name` → „Herkunft von Demo Netz“) while
+   * the visible label, icon and look stay the same. Wins over `tooltip`,
+   * `label` and `key`; an empty result falls back to them. Keep the visible
+   * label in it (WCAG 2.5.3).
+   */
+  ariaLabel?: string | ((row: Record<string, unknown>, rowIndex: number) => string);
   /** Hide this action for specific rows */
   hidden?: (row: Record<string, unknown>, rowIndex: number) => boolean;
   /** Disable this action for specific rows */
@@ -184,6 +196,8 @@ interface DisplayRow {
  * - `caption` as the table's `<caption>`, visible or for screen readers only
  *   (`showCaption`, 3.16)
  * - Empty state text for no data
+ * - `footerRow` (3.36): a sum row in `<tfoot>`, outside sorting, filtering,
+ *   paging and the tree; `TableAction.ariaLabel` names each row's action
  * - Accessible with proper table semantics
  *
  * @example
@@ -297,6 +311,19 @@ export declare class TableComponent {
   actionsWidth: import("@angular/core").InputSignal<string | undefined>;
   /** Horizontal alignment of the action buttons (and header label) within the cell */
   actionsAlign: import("@angular/core").InputSignal<TableActionsAlign>;
+  /**
+   * One footer row below all data rows (3.36, services row 1), e.g. a sum:
+   * a record of the data's shape, rendered as a `<tfoot>` row with the
+   * table's columns, `lcTableCell` templates (their context has
+   * `footer: true`), `cellClass`, `cellStyle` and `formatter` (`rowIndex`
+   * −1). It is never sorted, filtered, searched, paged, selected or counted,
+   * stays last in every tree state, and its first cell is the row header
+   * (`<th scope="row">`). A 1 px rule above and a 3 px double rule below
+   * (`--color-field-border`) separate it; its cells are semibold with tabular
+   * figures. The table scrolls on small screens, and the footer with it.
+   * @default undefined
+   */
+  footerRow: import("@angular/core").InputSignal<Record<string, unknown> | undefined>;
   /**
    * Row field holding the unique id. Required (together with {@link parentKey})
    * to enable hierarchical "tree mode". Absent ⇒ today's flat table.
@@ -458,6 +485,11 @@ export declare class TableComponent {
   protected readonly hasActions: import("@angular/core").Signal<boolean>;
   protected isActionHidden(action: TableAction, row: Record<string, unknown>, rowIndex: number): boolean;
   protected isActionDisabled(action: TableAction, row: Record<string, unknown>, rowIndex: number): boolean;
+  /**
+   * Accessible name of an action button (3.36): `ariaLabel` (a string or the
+   * row's result) over `tooltip`, `label` and `key`; without it, as before.
+   */
+  protected actionAriaLabel(action: TableAction, row: Record<string, unknown>, rowIndex: number): string;
   /**
    * Handles an action button click. The DOM click is stopped from propagating
    * (see template `$event.stopPropagation()`), so the row's `rowClick` never fires.
@@ -659,6 +691,11 @@ export declare class TableComponent {
       "required": false;
       "isSignal": true;
     };
+    "footerRow": {
+      "alias": "footerRow";
+      "required": false;
+      "isSignal": true;
+    };
     "idKey": {
       "alias": "idKey";
       "required": false;

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

@@ -54,6 +54,7 @@ export * from "@lifecorner/angular-ui-kit/app-shell";
 export * from "@lifecorner/angular-ui-kit/avatar";
 export * from "@lifecorner/angular-ui-kit/badge";
 export * from "@lifecorner/angular-ui-kit/status-dot";
+export * from "@lifecorner/angular-ui-kit/state-strip";
 export * from "@lifecorner/angular-ui-kit/toggle-group";
 export * from "@lifecorner/angular-ui-kit/list";
 export * from "@lifecorner/angular-ui-kit/chip";