@lifecorner/angular-ui-kit 3.15.0 → 3.17.0

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

@@ -280,3 +280,82 @@ describe('Component pairings of 3.15 (request 020)', () => {
     });
   });
 });
+
+// Request 022 (3.16): the focus ring of clickable table rows and list link rows
+// (--color-primary-500, 2 px) on every row fill (1.4.11 and 2.4.13 need 3:1).
+describe('Component pairings of 3.16 (request 022)', () => {
+  /** Design 022 §5, per palette [light, dark]: table row fills on the card (--color-surface). */
+  const rows: [string, [number, number]][] = [
+    ['--color-surface', [4.37, 9.13]],
+    ['--color-surface-2', [4.18, 7.58]],
+    ['--color-surface-hover', [3.97, 8.18]],
+    ['--color-surface-selected', [3.76, 6.87]],
+  ];
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    const solid = (name: string, base = '--color-surface') => over(color(tokens, name), color(tokens, base));
+
+    it.each(rows)('AC-5: the --color-primary-500 row ring reaches 3:1 on %s', (fill, values) => {
+      const r = ratio(solid('--color-primary-500'), solid(fill));
+      expect(r).toBeCloseTo(values[i], 1);
+      expect(r).toBeGreaterThanOrEqual(3);
+    });
+  });
+});
+
+// Request 021 (3.17): the lc-list status badges (12 px / 500, so 4.5:1) and the
+// focus ring of a loading lc-button, which its 0.5 opacity fades. The token
+// names come from the compiled component stylesheets, the values from the themes.
+describe('Component pairings of 3.17 (request 021)', () => {
+  const listCss = compile(resolve(__dirname, '../lib/list/list.component.scss')).css;
+  const buttonCss = compile(resolve(__dirname, '../lib/button/button.component.scss')).css;
+
+  /** The background and ink token of a list badge variant (a fallback after the name is ignored). */
+  function badgeTokens(variant: string): [string, string] {
+    const body = listCss.match(new RegExp(`\\n\\.lc-list__badge--${variant} \\{([^}]*)\\}`))?.[1] ?? '';
+    const bg = body.match(/background-color: var\((--[\w-]+)/)?.[1] ?? '';
+    const ink = body.match(/\scolor: var\((--[\w-]+)/)?.[1] ?? '';
+    expect([bg, ink]).toEqual([expect.stringMatching(/^--color-/), expect.stringMatching(/^--color-/)]);
+    return [bg, ink];
+  }
+
+  /** Design 021 §5: the minimum over the bases, per palette [light, dark]. */
+  const badges: [string, [string, string], [number, number]][] = [
+    ['success', ['--color-success-subtle', '--color-on-success-subtle'], [4.85, 5.17]],
+    ['warning', ['--color-warning-subtle', '--color-on-warning-subtle'], [5.52, 4.61]],
+    ['error', ['--color-error-100', '--color-on-error-subtle'], [6.33, 7.17]],
+    ['primary', ['--color-primary-100', '--color-primary-700'], [7.85, 9.68]],
+    ['default', ['--color-surface-hover', '--color-text-secondary'], [6.87, 8.18]],
+  ];
+
+  describe.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('%s palette', (_palette, tokens, i) => {
+    /** The grounds a list sits on: the page, the card surfaces and a hovered row (over the surface). */
+    const bases: Rgba[] = [
+      color(tokens, '--color-background'),
+      color(tokens, '--color-surface'),
+      over(color(tokens, '--color-surface-2'), color(tokens, '--color-surface')),
+      over(color(tokens, '--color-surface-hover'), color(tokens, '--color-surface')),
+    ].map((c) => over(c, color(tokens, '--color-background')));
+
+    it.each(badges)('AC-12: the %s list badge reaches 4.5:1 on every ground', (variant, pair, values) => {
+      expect(badgeTokens(variant)).toEqual(pair);
+      const [bg, ink] = pair;
+      const min = Math.min(
+        ...bases.map((base) => {
+          const fill = over(color(tokens, bg), base);
+          return ratio(over(color(tokens, ink), fill), fill);
+        }),
+      );
+      expect(min).toBeCloseTo(values[i], 2);
+      expect(min).toBeGreaterThanOrEqual(4.5);
+    });
+
+    it('AC-7: the ring of a focused loading button (--color-text-primary at 50 %) reaches 3:1 on the page and the surfaces', () => {
+      expect(buttonCss).toMatch(/\n\.btn\.btn-loading:focus-visible \{\s*outline-color: var\(--color-text-primary\);/);
+      const ink = color(tokens, '--color-text-primary');
+      for (const base of bases.slice(0, 3)) {
+        expect(ratio(over([ink[0], ink[1], ink[2], 0.5], base), base)).toBeGreaterThanOrEqual(3);
+      }
+    });
+  });
+});

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

@@ -28,7 +28,28 @@ export declare class ButtonComponent {
    */
   readonly tone: import("@angular/core").InputSignal<ButtonTone>;
   readonly size: import("@angular/core").InputSignal<ButtonSize>;
+  /**
+   * Natively disabled: the button leaves the focus order and ignores clicks.
+   * For a temporary busy state that keeps focus, use `loading`.
+   * @default false
+   */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Shows a spinner in place of the icon slots and makes the button
+   * unavailable without removing it from the focus order (3.17). The inner
+   * `<button>` gets `aria-disabled="true"` and `aria-busy="true"` instead of
+   * the native `disabled`, so a focused button keeps focus. While it is
+   * loading, click, Enter and Space are ignored: `clicked` is not emitted, the
+   * click event stops at the button (a `(click)` on the host doesn't fire),
+   * and a `type="submit"`/`"reset"` button doesn't submit or reset its form.
+   * The look is unchanged: spinner, 50 % opacity, no hover. Screen readers may
+   * announce the state change ("unavailable"/"dimmed"), but the button doesn't
+   * announce the outcome: the page does that, for example with a polite live
+   * region ("USM wird geladen.", then the result). `disabledReason` also
+   * applies while loading. If `disabled` is set too, the native `disabled`
+   * wins.
+   * @default false
+   */
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly iconOnly: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -72,7 +93,13 @@ export declare class ButtonComponent {
    * `title` otherwise.
    */
   readonly effectiveTitle: import("@angular/core").Signal<string | null>;
-  handleClick(): void;
+  /**
+   * Emits `clicked` unless the button is disabled or loading. While loading
+   * (and not natively disabled) the event is cancelled and stopped, so a form
+   * isn't submitted and a host `(click)` doesn't fire. The parameter is
+   * optional, so callers without an argument still work.
+   */
+  handleClick(event?: Event): void;
   handleFocus(): void;
   handleBlur(): void;
   focus(): void;

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

@@ -284,7 +284,8 @@ export type IconName = string;
  * `provideLcIcons()` or loaded with the kit's set (3.6, AS-17). Covers the
  * hand-picked inline set, the Tabler icons inlined at build time (mail,
  * users, settings, logout, key, chevron-right, …) and aliases that resolve
- * to either — the same names as in 3.5.1. Use it to lint an app or a static
+ * to either — the names of 3.5.1, plus `wallet`, `building-bank` and
+ * `shield-lock` since 3.16 (TD-3). Use it to lint an app or a static
  * site against icons that would be fetched.
  *
  * @example

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

@@ -132,8 +132,12 @@ export declare const ICON_ALERT_CIRCLE: LcIconDefinition;
 export declare const ICON_ALERT_CIRCLE_SOLID: LcIconDefinition;
 export declare const ICON_CIRCLE_X: LcIconDefinition;
 export declare const ICON_CIRCLE_X_SOLID: LcIconDefinition;
+export declare const ICON_WALLET: LcIconDefinition;
+export declare const ICON_BUILDING_BANK: LcIconDefinition;
+export declare const ICON_SHIELD_LOCK: LcIconDefinition;
+export declare const ICON_SHIELD_LOCK_SOLID: LcIconDefinition;
 /**
- * Every glyph above (133): `provideLcIcons(BUNDLED_ICONS)` restores the
+ * Every glyph above (137): `provideLcIcons(BUNDLED_ICONS)` restores the
  * synchronous rendering of 3.5.1 for every inline name, e.g. in tests or
  * Storybook. An app that imports it bundles all of them.
  */

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

@@ -64,6 +64,15 @@ export interface ListItem {
    * label must be part of it (WCAG 2.5.3).
    */
   actionAriaLabel?: string;
+  /**
+   * URL of the row link (3.16, TD-4). The row renders as an `<a>` over its
+   * full area (at least 44 px high) with real link semantics (middle click,
+   * "open in new tab"). Not rendered with `href`: `action` (no control inside
+   * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With
+   * `disabled` the row is the plain disabled row, no link. A custom
+   * `lcListItem` template must not hold controls in `href` rows.
+   */
+  href?: string;
   /** Item identifier */
   id?: string;
   /** Whether the item is disabled */
@@ -77,6 +86,15 @@ export interface ListItem {
  * List item size
  */
 export type ListSize = 'sm' | 'md' | 'lg';
+/**
+ * A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,
+ * `event` the click. Call `event.preventDefault()` to navigate with your
+ * router instead of a full page load.
+ */
+export interface ListLinkClickEvent {
+  item: ListItem;
+  event: MouseEvent;
+}
 /**
  * List component for displaying structured item collections.
  *
@@ -87,6 +105,8 @@ export type ListSize = 'sm' | 'md' | 'lg';
  * - Icon and avatar support per item
  * - Action buttons with click events
  * - Accessible with ARIA list role; `clickable` rows are keyboard-operable
+ * - `ListItem.href` rows are real links over the full row (3.16, TD-4);
+ *   `linkClick` hands plain clicks to your router
  *
  * @example
  * ```html
@@ -138,6 +158,18 @@ export declare class ListComponent {
   readonly itemClick: import("@angular/core").OutputEmitterRef<ListItem>;
   /** Event emitted when an action button is clicked */
   readonly actionClick: import("@angular/core").OutputEmitterRef<ListItem>;
+  /**
+   * A plain click (or Enter) on an `href` row: primary button, no
+   * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the
+   * link; call `event.preventDefault()` and navigate with your router for an
+   * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents
+   * the default; modifier and middle clicks are never emitted, so "open in new
+   * tab" keeps working.
+   */
+  readonly linkClick: import("@angular/core").OutputEmitterRef<ListLinkClickEvent>;
+  constructor();
+  /** Whether a row renders as a link: `href` set and not disabled. */
+  protected isLinkRow(item: ListItem): boolean;
   /**
    * Computed CSS classes for the list
    */
@@ -161,6 +193,11 @@ export declare class ListComponent {
    * Handle action button click
    */
   onActionClick(item: ListItem): void;
+  /**
+   * A click on a link row: only a plain primary click reaches `linkClick`.
+   * The default (following the link) is left to the browser and the consumer.
+   */
+  protected onLinkClick(event: MouseEvent, item: ListItem): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "lc-list", never, {
     "items": {
@@ -211,5 +248,6 @@ export declare class ListComponent {
   }, {
     "itemClick": "itemClick";
     "actionClick": "actionClick";
+    "linkClick": "linkClick";
   }, ["itemTemplate"], never, true, never>;
 }

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

@@ -0,0 +1,150 @@
+import * as i0 from "@angular/core";
+/**
+ * How the sign of an amount shows, as `Intl.NumberFormat`'s `signDisplay`:
+ * - `auto`: negative amounts only (−42,17 €)
+ * - `always`: plus and minus, also on zero (+0,00 €)
+ * - `exceptZero`: plus and minus, no sign on zero
+ * - `never`: no sign
+ */
+type MoneySignDisplay = 'auto' | 'always' | 'exceptZero' | 'never';
+/** Options of {@link formatMoney}. */
+interface MoneyFormatOptions {
+  /** BCP 47 locale. An invalid one falls back to `en-US`. @default 'en-US' */
+  locale?: string;
+  /** As `Intl.NumberFormat`'s `signDisplay`. @default 'auto' */
+  signDisplay?: MoneySignDisplay;
+  /** Spoken word for the minus sign. @default 'minus' */
+  minusLabel?: string;
+  /** Spoken word for the plus sign. @default 'plus' */
+  plusLabel?: string;
+}
+/** A formatted amount: the visible text and the words a screen reader speaks. */
+interface MoneyText {
+  /** Visible text, e.g. „−42,17 €“ (U+2212 minus, U+00A0 from `Intl`). */
+  text: string;
+  /** Spoken text, e.g. „minus 42,17 Euro“. */
+  spoken: string;
+}
+/** The ISO 4217 minor-unit exponent of `currency` (2 unless listed). */
+declare function moneyMinorUnits(currency: string): number;
+/** Text direction of an amount formatted for `locale`. */
+declare function moneyDirection(locale: string): 'ltr' | 'rtl';
+/**
+ * Formats an amount of money given in integer minor units (cents, yen, fils)
+ * exactly, never through a float: the decimal string goes into `Intl`.
+ * Returns `null` for an amount that is not a safe integer or a currency that
+ * is not a three-letter code. This is the formatter of `lc-money`, for table
+ * `formatter`s and texts.
+ *
+ * @example
+ * ```ts
+ * formatMoney(-4217, 'EUR', { locale: 'de-DE' });
+ * // { text: '−42,17 €', spoken: 'minus 42,17 Euro' }
+ * ```
+ */
+export declare function formatMoney(amountMinor: number, currency: string, options?: MoneyFormatOptions): MoneyText | null;
+/**
+ * Displays an amount of money (3.16, BA-4): locale, currency, sign, tabular
+ * figures and a spoken text. Display only, no input parsing or conversion.
+ *
+ * - `amountMinor` is an integer in the currency's minor units (cents, yen,
+ *   fils), formatted exactly through a decimal string, never a float. Minor
+ *   units follow ISO 4217: 2, except 0 (BIF CLP DJF GNF ISK JPY KMF KRW PYG
+ *   RWF UGX UYI VND VUV XAF XOF XPF), 3 (BHD IQD JOD KWD LYD OMR TND) and 4
+ *   (CLF UYW).
+ * - The visible amount („−42,17 €“, U+2212 minus, a no-break space from
+ *   `Intl`) is `aria-hidden`; a visually hidden span holds the words
+ *   („minus 42,17 Euro“), so a screen reader reads the amount once.
+ * - Tabular figures, no wrapping inside the amount; the amount is a `dir`
+ *   isolate (`ltr`, or `rtl` for an RTL locale), safe inside RTL text.
+ * - Font and colour come from the context; colour never carries the sign.
+ * - `locale` empty: the app's `LOCALE_ID` (Angular's default `en-US`), the
+ *   same on the server and in the browser.
+ * - For table `formatter`s and texts use {@link formatMoney}.
+ *
+ * Separate a `lc-money` from adjacent text with a space in your template, so
+ * the spoken text does not run into the words around it.
+ *
+ * @example
+ * ```html
+ * <lc-money [amountMinor]="-4217" currency="EUR" locale="de-DE" />
+ * ```
+ */
+export declare class MoneyComponent {
+  private readonly appLocale;
+  /**
+   * Amount in minor units of `currency` (cents, yen, fils): a safe integer
+   * (±9,007,199,254,740,991), formatted exactly. Anything else renders
+   * nothing (a dev warning).
+   */
+  readonly amountMinor: import("@angular/core").InputSignal<number>;
+  /**
+   * ISO 4217 currency code (`EUR`, `USD`, `JPY`, `KWD`). It sets the minor
+   * units and the symbol. Not a three-letter code: renders nothing (a dev
+   * warning).
+   */
+  readonly currency: import("@angular/core").InputSignal<string>;
+  /**
+   * BCP 47 locale of the amount (`de-DE`, `en-GB`). Empty: the app's
+   * `LOCALE_ID` (Angular's default `en-US`). An invalid locale falls back to
+   * `en-US`.
+   * @default ''
+   */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /**
+   * Which signs show, as `Intl.NumberFormat`: `auto` (negative only),
+   * `always`, `exceptZero`, `never`. The spoken text says the sign whenever
+   * it shows.
+   * @default 'auto'
+   */
+  readonly signDisplay: import("@angular/core").InputSignal<MoneySignDisplay>;
+  /**
+   * Spoken word for the minus sign („minus 42,17 Euro“; the same in German).
+   * @default 'minus'
+   */
+  readonly minusLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Spoken word for the plus sign („plus 42,17 Euro“; the same in German).
+   * @default 'plus'
+   */
+  readonly plusLabel: import("@angular/core").InputSignal<string>;
+  /** The locale in use: the `locale` input or the app's `LOCALE_ID`. */
+  protected readonly effectiveLocale: import("@angular/core").Signal<string>;
+  protected readonly formatted: import("@angular/core").Signal<import("@lifecorner/angular-ui-kit/money").MoneyText | null>;
+  protected readonly dir: import("@angular/core").Signal<"ltr" | "rtl">;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<MoneyComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MoneyComponent, "lc-money", never, {
+    "amountMinor": {
+      "alias": "amountMinor";
+      "required": true;
+      "isSignal": true;
+    };
+    "currency": {
+      "alias": "currency";
+      "required": true;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "signDisplay": {
+      "alias": "signDisplay";
+      "required": false;
+      "isSignal": true;
+    };
+    "minusLabel": {
+      "alias": "minusLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "plusLabel": {
+      "alias": "plusLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { MoneyFormatOptions, MoneySignDisplay, MoneyText };

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

@@ -15,6 +15,15 @@ export type NextStepCardVariant = 'default' | 'soft';
  * - `stacked`: always in their own row, one per line at equal width, 8 px apart
  */
 export type NextStepCardActionsLayout = 'inline' | 'stacked';
+/**
+ * Weight of the two built-in actions.
+ * - `default`: a filled primary and a ghost secondary with a chevron, the
+ *   primary last
+ * - `equal`: two answers of the same weight (a question such as „Teilen?“):
+ *   both `outline` in the primary tone at `actionSize`, the primary first,
+ *   no chevron
+ */
+export type NextStepCardActionsStyle = 'default' | 'equal';
 /** Element that renders the title (semantics only, the look stays the same). */
 export type NextStepCardTitleTag = 'div' | 'h2' | 'h3';
 /** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */
@@ -44,6 +53,8 @@ export type NextStepCardActionSize = 'sm' | 'md' | 'lg';
  *   `fullWidth` button gets its own row at every width.
  * - `variant="soft"`: the tinted card of the "Weite" look; `actionsLayout`
  *   `stacked` for several equal-width actions; `titleTag` for a heading
+ * - `actionsStyle="equal"` (3.16, BA-5): a question with two answers of the
+ *   same weight, both outline buttons in the primary tone, primary first
  *
  * The host is a size container (`container-type: inline-size`) and takes the
  * full inline size of its parent.
@@ -106,6 +117,16 @@ export declare class NextStepCardComponent implements AfterViewChecked {
    * @default 'sm'
    */
   actionSize: import("@angular/core").InputSignal<NextStepCardActionSize>;
+  /**
+   * Weight of the built-in actions. `default`: filled primary, ghost secondary
+   * with a chevron, primary last. `equal`: two answers of the same weight, both
+   * `outline` in the primary tone at `actionSize`, primary first, no chevron
+   * (`primaryClick`, `secondaryClick`, `primaryLoading`, `primaryDisabled` and
+   * `announce` work as before). Use `actionSize="lg"` (48.5 px, the 44 px
+   * target; a dev warning otherwise). No effect on `[slot='actions']`.
+   * @default 'default'
+   */
+  actionsStyle: import("@angular/core").InputSignal<NextStepCardActionsStyle>;
   /** Message below the title. For markup, use the default slot instead. */
   message: import("@angular/core").InputSignal<string | undefined>;
   /** Label of the primary action. Omit to render no primary button. */
@@ -200,6 +221,11 @@ export declare class NextStepCardComponent implements AfterViewChecked {
       "required": false;
       "isSignal": true;
     };
+    "actionsStyle": {
+      "alias": "actionsStyle";
+      "required": false;
+      "isSignal": true;
+    };
     "message": {
       "alias": "message";
       "required": false;

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

@@ -12,6 +12,13 @@ export type ProgressBarVariant = 'linear' | 'circular';
  * - Animated value transitions
  * - Accessible with ARIA progressbar role
  *
+ * The bar is a visual aid; the text next to it carries the meaning. Write the
+ * status as text ('USM wird geladen …') and announce changes from a live
+ * region (`role="status"`). Screen readers don't announce a progress bar's
+ * changes by themselves. Give `ariaLabel` the same words as the status. Under
+ * `forced-colors: active` the fill is `Highlight`, the linear track gets a
+ * 1 px `CanvasText` outline and the circle's track is `GrayText` (3.17).
+ *
  * @example
  * ```html
  * <lc-progress-bar [value]="75" color="primary" size="md"></lc-progress-bar>
@@ -57,7 +64,11 @@ export declare class ProgressBarComponent {
    */
   inline: import("@angular/core").InputSignal<boolean>;
   /**
-   * Whether the progress is indeterminate (animated, no fixed value).
+   * Progress of unknown length: no value (`aria-valuenow` is absent) and no
+   * label. The linear bar moves a 40 % segment across the track, and the
+   * circle spins. Under `prefers-reduced-motion: reduce` nothing moves: the
+   * linear bar shows a full-width striped fill and the circle a dashed ring,
+   * so it still reads as busy, not as a value (3.17).
    * @default false
    */
   indeterminate: import("@angular/core").InputSignal<boolean>;

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

@@ -8,6 +8,10 @@ import * as i0 from "@angular/core";
  * - Size options (sm, md, lg)
  * - Loading state with spinner
  * - Configurable label positioning (left/right)
+ * - Help text below the label, linked by `aria-describedby` (`helpText`, 3.16)
+ * - Rows with a label or help text are at least 44 px high
+ *   (`--lc-switch-min-height`, default `var(--size-min-touch-height)`; `0`
+ *   restores the 3.15 rows of 21/24/28 px)
  * - Keyboard toggle support
  * - Disabled and required states
  * - ControlValueAccessor integration for reactive forms
@@ -54,12 +58,22 @@ export declare class SwitchComponent implements ControlValueAccessor {
    * ARIA label for accessibility (overrides the visible label as accessible name)
    */
   readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Description below the label, linked to the switch by `aria-describedby`
+   * (read after the name and state). Wraps; 14 px secondary text. A tap on it
+   * toggles the switch like the label. Empty renders no element and no
+   * `aria-describedby` (3.15).
+   * @default ''
+   */
+  readonly helpText: import("@angular/core").InputSignal<string>;
   /**
    * Emitted when checked state changes
    */
   readonly checkedChange: import("@angular/core").OutputEmitterRef<boolean>;
   /** Per-instance id so the visible `<label for>` points at this switch. */
   readonly switchId: string;
+  /** id of the rendered help text (only while `helpText` is set). */
+  readonly helpTextId: import("@angular/core").Signal<string | null>;
   /**
    * Effective checked state: follows the `checked` input, overridden by
    * form writes (`writeValue`) and user toggles.
@@ -135,6 +149,11 @@ export declare class SwitchComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "helpText": {
+      "alias": "helpText";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "checkedChange": "checkedChange";
   }, never, never, true, never>;

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

@@ -37,7 +37,11 @@ export interface TableColumn {
   width?: string;
   /** Optional CSS class(es) applied to both th and td cells */
   cssClass?: string;
-  /** Optional CSS class(es) for td cells only (string or resolver callback) */
+  /**
+   * Optional CSS class(es) for td cells only (string or resolver callback).
+   * A class colour or font size loses to the kit's cell rule; set them with
+   * `cellStyle`.
+   */
   cellClass?: TableCellClass;
   /** Optional inline styles for td cells only (object or resolver callback) */
   cellStyle?: TableCellStyle;
@@ -49,7 +53,21 @@ export interface TableColumn {
   editType?: 'text' | 'number' | 'select';
   /** Options for select edit type */
   editOptions?: string[];
+  /**
+   * Horizontal alignment of the column's header and cells. `end` aligns both
+   * at the end edge (right in LTR) and sets `font-variant-numeric:
+   * tabular-nums`, for amounts, counts and percentages. A sort arrow then sits
+   * before the label, so the label stays flush with the figures. Adds
+   * `lc-table__cell--end` to the `th` and every `td`. It wins over a
+   * `cellClass` that sets `text-align`; use `cellStyle` to override it. A
+   * custom `lcTableCell` template inherits the alignment, but a flex or block
+   * child needs its own `justify-content: flex-end`. (3.17)
+   * @default 'start'
+   */
+  align?: TableColumnAlign;
 }
+/** Horizontal alignment of a table column (3.17). */
+export type TableColumnAlign = 'start' | 'end';
 /**
  * A row-level action rendered in the table's actions column (e.g. Freigeben, Ablehnen).
  * Action button clicks never trigger the row's `rowClick` output.
@@ -162,6 +180,9 @@ interface DisplayRow {
  * - Composed cells (e.g. avatar + badge + actions)
  * - Hierarchical "tree" rows (grouped / expandable) via `idKey` + `parentKey`
  * - Responsive horizontal scrolling
+ * - `clickable` rows: tab stops, Enter/Space emit `rowClick` (3.16)
+ * - `caption` as the table's `<caption>`, visible or for screen readers only
+ *   (`showCaption`, 3.16)
  * - Empty state text for no data
  * - Accessible with proper table semantics
  *
@@ -198,6 +219,29 @@ export declare class TableComponent {
   size: import("@angular/core").InputSignal<TableSize>;
   /** Whether rows should highlight on hover */
   hoverable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Rows are interactive (3.16, BA-3): each data row is a tab stop, Enter and
+   * Space emit `rowClick` (Space does not scroll the page), pointer and hover
+   * as `hoverable`. Clicks and keys on controls inside a row (buttons, links,
+   * inputs, switches) stay theirs and emit no `rowClick`. Set it whenever you
+   * handle `rowClick`. Tree mode keeps its roving tab stop. A focused row is
+   * read by its cells, not as "clickable": let the row open something that
+   * announces itself (a dialog, a page).
+   * @default false
+   */
+  clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Title of the table, rendered as its `<caption>` (3.16, BA-3), so it also
+   * names the table for screen readers. Empty renders no caption.
+   * @default ''
+   */
+  caption: import("@angular/core").InputSignal<string>;
+  /**
+   * Show the caption above the table (16 px semibold, 12 px above the table);
+   * `false` keeps it for screen readers only.
+   * @default true
+   */
+  showCaption: import("@angular/core").InputSignal<boolean>;
   /** Whether table should be responsive (horizontal scroll on mobile) */
   responsive: import("@angular/core").InputSignal<boolean>;
   /** Text shown when data is empty */
@@ -398,7 +442,7 @@ export declare class TableComponent {
   protected treeCellLabel(row: Record<string, unknown>): string;
   getCellTemplate(columnKey: string): TableCellDirective | undefined;
   hasCustomTemplate(columnKey: string): boolean;
-  onRowClick(row: Record<string, unknown>): void;
+  onRowClick(row: Record<string, unknown>, event?: Event): void;
   /** Whether the trailing actions column should be rendered */
   protected readonly hasActions: import("@angular/core").Signal<boolean>;
   protected isActionHidden(action: TableAction, row: Record<string, unknown>, rowIndex: number): boolean;
@@ -469,6 +513,21 @@ export declare class TableComponent {
       "required": false;
       "isSignal": true;
     };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "caption": {
+      "alias": "caption";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCaption": {
+      "alias": "showCaption";
+      "required": false;
+      "isSignal": true;
+    };
     "responsive": {
       "alias": "responsive";
       "required": false;

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

@@ -22,7 +22,9 @@ export interface Toast extends Required<Omit<ToastConfig, 'action'>> {
  * Toast service for showing ephemeral notifications.
  *
  * The toasts are rendered by `<lc-toast-outlet />`, which the application
- * places once (e.g. in its shell); without it nothing is shown.
+ * places once (e.g. in its shell); without it nothing is shown. The options,
+ * their defaults, the timing and how a toast is announced to screen readers
+ * are documented under *Feedback/Toast Outlet* (3.17).
  *
  * @example
  * ```typescript

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

@@ -58,6 +58,7 @@ export * from "@lifecorner/angular-ui-kit/toggle-group";
 export * from "@lifecorner/angular-ui-kit/list";
 export * from "@lifecorner/angular-ui-kit/chip";
 export * from "@lifecorner/angular-ui-kit/table";
+export * from "@lifecorner/angular-ui-kit/money";
 export * from "@lifecorner/angular-ui-kit/field-group";
 export * from "@lifecorner/angular-ui-kit/stepper";
 export * from "@lifecorner/angular-ui-kit/filter-bar";