@lifecorner/angular-ui-kit 3.32.0 → 3.33.1

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

@@ -1,4 +1,5 @@
 import { ControlValueAccessor } from "@angular/forms";
+import { ConnectedPosition } from "@angular/cdk/overlay";
 import { Observable } from "rxjs";
 import * as i0 from "@angular/core";
 export interface ComboboxOption {
@@ -42,6 +43,7 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   protected readonly createOptionId: string;
   private readonly inputEl;
   private readonly dropdownEl;
+  private readonly inputWrapper;
   private readonly elRef;
   private readonly querySubject;
   /** Sync options */
@@ -120,9 +122,24 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   /**
    * `lang` of the open dropdown (3.30.2, WCAG 3.1.2): the overlay renders under
    * `<body>`, so it takes the host's closest `[lang]`, else none. Read at every
-   * opening; `null` while closed, so the server never reads the DOM.
+   * opening and, since 3.33, again when a `lang` changes while the list is
+   * open; `null` while closed, so the server never reads the DOM.
    */
   protected readonly panelLang: import("@angular/core").Signal<string | null>;
+  /**
+   * The field's width in px while the list is open (3.33, request 052,
+   * 049-n2), read at every opening: the list's floor (`min-width`), so it is
+   * at least as wide as the field and wider content still grows it. `null`
+   * while closed.
+   */
+  protected readonly fieldWidth: import("@angular/core").Signal<number | null>;
+  /**
+   * Below the field, else above it, start- then end-aligned (the CDK's
+   * defaults), 4 px from the field on either side (3.33, 047-n1: the gap was
+   * a margin inside the pane, so it was 0 above). The list is never pushed,
+   * so the offset can't move it off the field.
+   */
+  protected readonly positions: ConnectedPosition[];
   /** Selected values */
   protected selectedSingle: import("@angular/core").WritableSignal<ComboboxOption | null>;
   protected selectedMultiple: import("@angular/core").WritableSignal<ComboboxOption[]>;

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

@@ -191,10 +191,13 @@ export declare class DatepickerComponent implements ControlValueAccessor {
   readonly isDisabled: import("@angular/core").Signal<boolean>;
   /** Month granularity (3.29). */
   protected readonly isMonthMode: import("@angular/core").Signal<boolean>;
+  /** The host's closest `[lang]` while the panel is open, kept live (3.33, 049-n3). */
+  private readonly hostLang;
   /**
    * `lang` of the open panel (3.30.2, WCAG 3.1.2): the overlay renders under
    * `<body>`, so it takes the host's closest `[lang]`, else `locale`, else none.
-   * Read at every opening; `null` while closed, so the server never reads the DOM.
+   * Read at every opening and, since 3.33, again when a `lang` changes while
+   * the panel is open; `null` while closed, so the server never reads the DOM.
    */
   protected readonly panelLang: import("@angular/core").Signal<string | null>;
   readonly formattedDate: import("@angular/core").Signal<string>;

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

@@ -25,6 +25,12 @@ export type HeaderVariant = 'default' | 'transparent';
  * `userAvatarColor`, in a 48 px round button).
  */
 export type HeaderUserMenuTrigger = 'icon' | 'avatar';
+/**
+ * Where the context button sits up to 640 px (3.33): `inline` in the end
+ * group, hidden up to 640 px (as before), or `below`, a row of its own under
+ * the title. From 641 px both render it inline.
+ */
+export type HeaderContextPlacement = 'inline' | 'below';
 /**
  * AppHeaderComponent - Global application header for the LifeCorner shell
  *
@@ -67,6 +73,9 @@ export type HeaderUserMenuTrigger = 'icon' | 'avatar';
  *   as typed (no uppercase).
  * - The account menu is at most `min(18rem, 100vw − 2rem)` wide; the name and
  *   email in its header wrap instead of being cut.
+ * - `contextPlacement="below"` (3.33): up to 640 px the context button
+ *   (`contextName`) takes a full-width row of its own under the title instead
+ *   of being hidden; from 641 px it sits in the end group as before.
  * - Every built-in label is an input (`homeAriaLabel`, `hamburgerAriaLabel`,
  *   `userMenuAriaLabel`, `navAriaLabel`, `profileLabel`, `logoutLabel`,
  *   `themeToDarkAriaLabel`, `themeToLightAriaLabel`, `contextAriaLabel`);
@@ -201,6 +210,16 @@ export declare class HeaderComponent {
   readonly autoToggleTheme: import("@angular/core").InputSignal<boolean>;
   readonly contextName: import("@angular/core").InputSignal<string>;
   readonly contextLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Where the context button sits up to 640 px (3.33, app-shell row 1).
+   * `'inline'`: in the end group, hidden up to 640 px (as before). `'below'`:
+   * up to 640 px a row of its own under the title, as wide as the header and
+   * at least 44 px high; title, `end` slot and account menu stay in the first
+   * row. From 641 px both render the button inline. No second row without
+   * `contextName`.
+   * @default 'inline'
+   */
+  readonly contextPlacement: import("@angular/core").InputSignal<HeaderContextPlacement>;
   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). */
@@ -281,6 +300,8 @@ export declare class HeaderComponent {
    * `contextName`, so a voice-control user can say what they see.
    */
   protected readonly contextButtonAriaLabel: import("@angular/core").Signal<string>;
+  /** `contextPlacement="below"` with a context button to place (3.33). */
+  protected readonly contextBelow: import("@angular/core").Signal<boolean>;
   /**
    * Get menu items for profile dropdown
    */
@@ -459,6 +480,11 @@ export declare class HeaderComponent {
       "required": false;
       "isSignal": true;
     };
+    "contextPlacement": {
+      "alias": "contextPlacement";
+      "required": false;
+      "isSignal": true;
+    };
     "menuSize": {
       "alias": "menuSize";
       "required": false;

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

@@ -1,3 +1,4 @@
+import { Signal } from "@angular/core";
 /**
  * Accessible names that contain the visible text (WCAG 2.5.3 Label in Name,
  * AS-33). The containment test follows axe-core 4.14's
@@ -35,4 +36,14 @@ export declare function nameWithText(label: string, text: string): string;
  * The value is taken as is (`lang=""` is the unknown language, as DOM
  * inheritance gives it). `null` without a DOM `closest` (server DOM).
  */
-export declare function closestLang(el: Element | null | undefined): string | null;
+export declare function closestLang(el: Element | null | undefined): string | null;
+/**
+ * 3.33 (request 052, 049-n3): `closestLang` of the component's host while
+ * `open()` is true, `null` while it is false (so the server never reads the
+ * DOM). While open, one `MutationObserver` watches every `lang` attribute of
+ * the document, so a host language that changes with the panel open shows
+ * without reopening; it is disconnected when the panel closes or the
+ * component is destroyed. Call it in the component's injection context (it
+ * injects the host element and creates an effect).
+ */
+export declare function openPanelLang(open: Signal<boolean>): Signal<string | null>;

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

@@ -77,7 +77,12 @@ export interface ListItem {
   id?: string;
   /** Whether the item is disabled */
   disabled?: boolean;
-  /** Whether the item is selected / highlighted */
+  /**
+   * Whether the item is the current choice: a tinted row and, since 3.33,
+   * `aria-current="true"` on the row element (the button with `clickable`,
+   * the link with `href`, the row otherwise). Pair it with a visible mark such
+   * as a badge; the tint alone is colour.
+   */
   selected?: boolean;
   /** Any additional data */
   [key: string]: any;

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

@@ -55,6 +55,9 @@ export type NextStepCardActionSize = 'sm' | 'md' | 'lg';
  *   `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
+ * - `focusTitle()` (3.33): moves focus to the title (`tabindex="-1"`, out of
+ *   the Tab order) after an action replaced the card's state, so focus
+ *   doesn't fall back to the page (WCAG 2.4.3)
  *
  * The host is a size container (`container-type: inline-size`) and takes the
  * full inline size of its parent.
@@ -168,6 +171,18 @@ export declare class NextStepCardComponent implements AfterViewChecked {
   /** Emits when the secondary action is clicked. */
   secondaryClick: import("@angular/core").OutputEmitterRef<void>;
   private actionsSlot;
+  /** The title element of whichever `titleTag` branch is rendered. */
+  private titleEl;
+  /**
+   * Moves focus to the card's title (3.33), e.g. after an action replaced the
+   * card's state, 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. Call it
+   * after the new state has rendered, e.g.
+   * `afterNextRender(() => this.card().focusTitle(), { injector })` with
+   * `card = viewChild.required(NextStepCardComponent)`. Does nothing while no
+   * title is rendered.
+   */
+  focusTitle(): void;
   /**
    * Whether content was projected into `[slot='actions']` — projected actions
    * fully replace the built-in buttons.

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

@@ -124,6 +124,13 @@ export declare class SelectComponent implements ControlValueAccessor {
    * Read at every opening; `null` while closed, so the server never reads the DOM.
    */
   protected readonly panelLang: import("@angular/core").Signal<string | null>;
+  /**
+   * The trigger's width in px while the dropdown is open (3.33, request 052,
+   * 050-n4), read at every opening: the panel's floor next to its 200 px
+   * (`min-width`), so it is at least as wide as the field and wider content
+   * still grows it. `null` while closed.
+   */
+  protected readonly fieldWidth: import("@angular/core").Signal<number | null>;
   readonly filteredOptions: import("@angular/core").Signal<SelectOption[]>;
   /** Keyboard highlight; resets whenever the visible option list changes so it never points at a stale row. */
   readonly highlightedIndex: import("@angular/core").WritableSignal<number>;

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

@@ -209,7 +209,9 @@ export declare class SidenavComponent implements OnDestroy {
    * the collapsed rail, where labels are hidden, the label and this text name
    * the item. `{value}` is replaced with the badge value, e.g.
    * `'{value} offen'` → "Stammdaten 1 offen". The badge itself is hidden from
-   * screen readers. Empty: the badge isn't read.
+   * screen readers. Empty: the badge isn't read. Since 3.33 a badged rail
+   * item has no `title` (it repeated the label as a description); its
+   * tooltip still shows on hover and focus.
    *
    * @default '{value}'
    */

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

@@ -192,9 +192,16 @@ type ToastLive = 'polite' | 'assertive';
  * hidden, the bottom offset is the safe-area inset. Without a shell, and in
  * prerendered HTML, both are `0px`, as before. Every stack is at most as high
  * as the space between the offsets and scrolls when its toasts need more
- * (200 % text), so each toast stays reachable. In the shell, prefer the
- * `bottom-*` positions: a top toast can still cover a page title placed
- * right under the header.
+ * (200 % text), so each toast stays reachable.
+ *
+ * Bottom stacks show the newest toast nearest the edge (3.33); top stacks the
+ * oldest at the top. The toasts of a stack are 8 px (`--spacing-2`) apart
+ * (3.33.1), within a live region and across the two; an empty region and the
+ * last toast add no space, and the stack keeps its 16 px padding. A `top-*`
+ * stack lies over the page on purpose (a toast stays visible wherever the
+ * page is scrolled), so in the shell it can cover a title right under the
+ * header (at 360 px a toast at y 72 over an h1 at y 80): prefer `bottom-*`
+ * there.
  *
  * CSS hooks (set them on `lc-toast-outlet` or any ancestor, e.g. `:root`;
  * each wins over the shell's value; write lengths, `0px` rather than `0`):
@@ -215,6 +222,13 @@ export declare class ToastOutletComponent {
   readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
   /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */
   private readonly groups;
+  /**
+   * 3.33 (request 052, 045-n2): per `bottom-*` stack, the live level of its
+   * newest toast. That region gets `lc-toast-outlet__region--latest` and is
+   * laid out at the edge, so the newest toast sits nearest the edge (and, in
+   * a scrolling stack, in view at rest). DOM and announcement order stay.
+   */
+  protected readonly latestLive: import("@angular/core").Signal<Map<ToastPosition, ToastLive>>;
   protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[];
   protected onClosed(id: string): void;
   /** Errors and warnings interrupt (assertive), everything else waits its turn. */

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

@@ -19,7 +19,8 @@ export declare class TooltipContentComponent {
  *
  * Shows on hover and on keyboard focus of the host or of an element inside it
  * (3.32). On a wrapper such as `lc-button`, the tooltip describes and anchors
- * to the wrapped `<button>`.
+ * to the wrapped `<button>`. On a host with several controls, the one that
+ * has focus is described (3.33); on hover, the first.
  *
  * @example
  * ```html
@@ -105,7 +106,11 @@ export declare class TooltipDirective implements OnDestroy {
   /** Preferred position first, then the fallbacks the overlay may flip to. */
   private getPositions;
   private setPositionClass;
-  /** The described element: the host if it is a control, else the first control inside it, else the host. */
+  /**
+   * The described element: the host if it is a control, else the control
+   * inside it that has focus (3.33, request 052, 051-n1: a host with several
+   * controls), else the first control inside it, else the host.
+   */
   private resolveControl;
   /** The overlay origin: the control when it is the host's only element child (a wrapper), else the host. */
   private resolveAnchor;