@lifecorner/angular-ui-kit 3.31.0 → 3.33.0

package/src/styles/_theme-light.scss

@@ -486,3 +486,12 @@
 .lc-header--light {
   @include -light-theme-colors;
 }
+
+// `<lc-sidenav theme="light">` on a dark page: the rail is light, but its
+// badges took the page's dark palette and measured 1.11–1.96:1 (request 051,
+// 050-f2). Re-declared on the badge host they match a light page (4.85–10.97:1).
+// Only the badge: the collapsed rail's label tooltip floats over the page and
+// keeps the page palette. A root-level token override does not reach inside.
+.lc-sidenav-container--light .lc-sidenav__nav-badge {
+  @include -light-theme-colors;
+}

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

@@ -457,13 +457,18 @@ describe('Component pairings of 3.19.1 (request 025)', () => {
     for (const rule of chipRules) expect(rule[4]).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|:\s*white\b/i);
   });
 
-  it('AC-13: in forced colours the pressed chip keeps a Highlight outline unless it is focused', () => {
+  // 3.33 (request 052, 044-n3, AC-16): the pressed mark in forced colours is
+  // a Highlight underline (the rich-text-editor's), not the focus ring's
+  // 2 px outline, and it stays while the chip is focused.
+  it('AC-13: in forced colours the pressed chip is underlined in Highlight, also while focused', () => {
     const at = ncCss.indexOf('@media (forced-colors: active)');
     expect(at).toBeGreaterThan(-1);
     const media = ncCss.slice(at, ncCss.indexOf('}\n}', at));
-    expect(media).toMatch(/\.lc-nc__filter--active:not\(:focus-visible\) \{/);
-    expect(media).toMatch(/outline: 2px solid Highlight;/);
-    expect(media).toMatch(/outline-offset: 1px;/);
+    expect(media).toMatch(
+      /\.lc-nc__filter\[aria-pressed=true\] \{\s*text-decoration-line: underline;\s*text-decoration-thickness: 2px;\s*text-underline-offset: 4px;\s*text-decoration-color: Highlight;/,
+    );
+    expect(media).not.toMatch(/:not\(:focus-visible\)/);
+    expect(media).not.toMatch(/outline: 2px solid Highlight;/);
   });
 
   /** Design 025 §5, per palette [light, dark]: the minimum over both panel ends. */
@@ -735,12 +740,15 @@ describe('Component pairings of 3.21.1 (request 029)', () => {
     expect(sheets.nc).not.toMatch(/#3b82f6|#22c55e|#f59e0b|#ef4444/i);
   });
 
-  it('D-2: the level pills stay at full opacity; the pressed pill gets an outline in forced colours', () => {
+  // 3.33 (request 052, 044-n3, AC-16): the forced-colours mark is the
+  // rich-text-editor's Highlight underline (was a 2 px outline, hidden on focus).
+  it('D-2: the level pills stay at full opacity; the pressed pill is underlined in forced colours', () => {
     expect(fills('log', '.lc-log-viewer__level-pill').opacity).toBeUndefined();
     expect(fills('log', '.lc-log-viewer__level-pill--active').opacity).toBeUndefined();
     expect(sheets.log).toMatch(
-      /@media \(forced-colors: active\) \{\s*\.lc-log-viewer__level-pill--active:not\(:focus-visible\) \{\s*outline: 2px solid Highlight;\s*outline-offset: 1px;\s*\}/,
+      /@media \(forced-colors: active\) \{\s*\.lc-log-viewer__level-pill\[aria-pressed=true\] \{\s*text-decoration-line: underline;\s*text-decoration-thickness: 2px;\s*text-underline-offset: 4px;\s*text-decoration-color: Highlight;\s*\}/,
     );
+    expect(sheets.log).not.toMatch(/level-pill--active:not\(:focus-visible\)/);
   });
 
   it('AC-10: the progress track is unchanged; primary reads the theme token (request 039), secondary the data mark (036)', () => {

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

@@ -98,3 +98,47 @@ describe('Theme scope of a themed header', () => {
     expect(dark.indexOf('.lc-header--dark {')).toBeGreaterThan(dark.indexOf(':root.system {'));
   });
 });
+
+/**
+ * Request 051 (050-f2, design §1 B, D-3): a sidenav with `theme="light"` /
+ * `"dark"` re-declares every colour token of that theme on its badge hosts,
+ * so the badges take the rail's palette instead of the page's (1.11–1.96:1 on
+ * a light rail on a dark page before). Only the badge host: the collapsed
+ * rail's label tooltip keeps the page palette. On a matching page the values
+ * equal the root's, so the badge renders exactly as before (AC-4).
+ */
+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 {';
+  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', () => {
+    const badge = tokensOf(light, `\n${LIGHT_RAIL}`);
+    expect(Object.keys(badge)).toHaveLength(172);
+    expect(badge).toEqual(colours(tokensOf(light, ':root,')));
+  });
+
+  it('AC-3/AC-4: the dark rail badge declares exactly the colour tokens of the dark root (172), with the same values', () => {
+    const badge = tokensOf(dark, `\n${DARK_RAIL}`);
+    expect(Object.keys(badge)).toHaveLength(172);
+    expect(badge).toEqual(colours(tokensOf(dark, ':root.dark,')));
+  });
+
+  it('emits each rail rule once, in its own theme file, after the header rule', () => {
+    expect(light.split(LIGHT_RAIL)).toHaveLength(2);
+    expect(dark.split(DARK_RAIL)).toHaveLength(2);
+    expect(light.includes('.lc-sidenav-container--dark')).toBe(false);
+    expect(dark.includes('.lc-sidenav-container--light')).toBe(false);
+    expect(light.indexOf(LIGHT_RAIL)).toBeGreaterThan(light.indexOf('.lc-header--light {'));
+    expect(dark.indexOf(DARK_RAIL)).toBeGreaterThan(dark.indexOf('.lc-header--dark {'));
+  });
+
+  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$/)]);
+    }
+  });
+});

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

@@ -136,8 +136,9 @@ export declare class BottomNavComponent {
    * tasks on the pages behind it: drawn like an item badge and read after the
    * label through `badgeAriaLabel`. The kit doesn't add up the hidden
    * destinations' badges; pass the value to show. It sits on the bar's last
-   * entry, so keep it to two characters (`'9+'`). `null` or `undefined`: no
-   * badge.
+   * entry; values up to three characters (`'99+'`) fit: on the last entry a
+   * badge that would pass the entry's edge moves left until it ends there
+   * (3.33). `null` or `undefined`: no badge.
    *
    * @default null
    */

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

@@ -128,7 +128,12 @@ export declare class ChatComponent {
   multiple: import("@angular/core").InputSignal<boolean>;
   /** Maximum file size in bytes. `0` disables the check. */
   maxFileSize: import("@angular/core").InputSignal<number>;
-  /** BCP 47 locale of the message times (hour and minute). */
+  /**
+   * BCP 47 locale of the message times (hour and minute). Attachment sizes
+   * follow the host's language (closest `lang`, 3.33), English without one:
+   * `240,0 KB` under `lang="de"`.
+   * @default 'de-DE'
+   */
   locale: import("@angular/core").InputSignal<string>;
   /** Header badge while a message is streaming. */
   streamingLabel: import("@angular/core").InputSignal<string>;
@@ -211,7 +216,15 @@ export declare class ChatComponent {
   protected openFilePicker(): void;
   protected onFilesSelected(event: Event): void;
   protected removeAttachment(id: string): void;
+  private readonly host;
+  /**
+   * Attachment size with one decimal in the host's language (3.33, request
+   * 052, 044-n2): the closest `lang`, English without one (or when it is
+   * empty or invalid), so `240.0 KB` by default and `240,0 KB` under
+   * `lang="de"`. No digit grouping, as before.
+   */
   protected formatBytes(size: number | undefined): string;
+  private decimalFormat;
   protected isImage(att: ChatAttachment): boolean;
   private addFiles;
   private matchesAccept;

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 */
@@ -76,6 +78,16 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   readonly createOptionLabel: import("@angular/core").InputSignal<string>;
   /** Size */
   readonly size: import("@angular/core").InputSignal<ComboboxSize>;
+  /**
+   * Whether the list opens when the field gets focus (3.32, request 051).
+   * With `false`, focus alone (`focus()` from the page, Tab) leaves the list
+   * closed and `aria-expanded="false"`; a click or tap on the field, typing or
+   * ArrowDown opens it. Use it in forms that move focus into the field
+   * themselves, on open or to the first invalid field after a rejected save.
+   * Escape and choosing an option work as before.
+   * @default true
+   */
+  readonly openOnFocus: import("@angular/core").InputSignal<boolean>;
   /**
    * The `value` of the selected option, two-way (3.29, regeln row 2):
    * `[(selectedValue)]="month"`. Shows the matching option's label (from
@@ -110,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[]>;
@@ -162,10 +189,16 @@ export declare class ComboboxComponent implements ControlValueAccessor {
    * and its buttons keeps focus where it is (no blur, so the list stays open).
    */
   protected onFrameMousedown(event: MouseEvent): void;
-  /** A click on the frame beside the input and its buttons focuses the input. */
+  /**
+   * A click on the frame beside the input and its buttons focuses the input.
+   * With `openOnFocus` off (3.32, request 051), a click or tap on the input or
+   * the frame also opens the list, which focus alone no longer does.
+   */
   protected onFrameClick(event: MouseEvent): void;
   protected onInputChange(event: Event): void;
   protected onInputFocus(): void;
+  /** Opens the list when there is something to show: a long enough query, or options. */
+  private openIfAny;
   protected onInputBlur(): void;
   protected onKeydown(event: KeyboardEvent): void;
   protected selectOption(option: ComboboxOption): void;
@@ -254,6 +287,11 @@ export declare class ComboboxComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "openOnFocus": {
+      "alias": "openOnFocus";
+      "required": false;
+      "isSignal": true;
+    };
     "selectedValue": {
       "alias": "selectedValue";
       "required": false;

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,13 @@ 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. 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 +219,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

@@ -17,6 +17,11 @@ export declare class TooltipContentComponent {
  *
  * The tooltip takes the `lang` of the host's closest `[lang]` (3.31).
  *
+ * 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>`. On a host with several controls, the one that
+ * has focus is described (3.33); on hover, the first.
+ *
  * @example
  * ```html
  * <button lcTooltip="Click me!" tooltipPosition="top">
@@ -50,10 +55,17 @@ export declare class TooltipDirective implements OnDestroy {
    * @default false
    */
   tooltipDisabled: import("@angular/core").InputSignal<boolean>;
-  /** Id of the tooltip element; the host's `aria-describedby` points at it while shown. */
+  /**
+   * Id of the tooltip element; while shown, the `aria-describedby` of the
+   * described element (the host, or the focusable element it wraps, such as
+   * `lc-button`'s `<button>`) points at it.
+   */
   readonly tooltipId: string;
   private overlayRef?;
   private tooltipRef?;
+  private positionStrategy?;
+  /** The element whose `aria-describedby` holds the tooltip id while shown. */
+  private describedEl?;
   private positionSubscription?;
   private showTimeout?;
   private hideTimeout?;
@@ -68,6 +80,14 @@ export declare class TooltipDirective implements OnDestroy {
   onMouseLeave(): void;
   onFocus(): void;
   onBlur(): void;
+  /**
+   * 3.32 (request 051, 050-f3): `focus` does not bubble, so focus on an
+   * element inside the host (`lc-button`'s `<button>`) arrives as `focusin`.
+   * The host's own focus is handled by `onFocus`, so it is skipped here.
+   */
+  onFocusIn(event: FocusEvent): void;
+  /** Hides when focus leaves the host from an element inside it (not when it moves within). */
+  onFocusOut(event: FocusEvent): void;
   /**
    * Show tooltip programmatically
    */
@@ -86,8 +106,17 @@ export declare class TooltipDirective implements OnDestroy {
   /** Preferred position first, then the fallbacks the overlay may flip to. */
   private getPositions;
   private setPositionClass;
-  /** Append the tooltip id to the host's aria-describedby without clobbering ids the caller set. */
+  /**
+   * 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;
+  /** Append the tooltip id to the element's aria-describedby without clobbering ids the caller set. */
   private addDescribedBy;
+  /** Removes the tooltip id from the element it was added to, keeping the other ids. */
   private removeDescribedBy;
   private clearTimeouts;
   private cleanup;