@lifecorner/angular-ui-kit 3.33.1 → 3.35.0

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

@@ -138,7 +138,11 @@ export declare class BottomNavComponent {
    * destinations' badges; pass the value to show. It sits on the bar's last
    * 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.
+   * (3.33). `null` or `undefined`: no badge. Known limit (3.35, 052-n3):
+   * '99+' on the last entry of a five-entry bar at 360 px starts 3.2 px
+   * (docked) / 3.4 px (floating) left of the pill centre and covers two of the
+   * More glyph's three dots; the label and the read badge text still name the
+   * entry.
    *
    * @default null
    */

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

@@ -25,6 +25,10 @@ export type ComboboxSize = 'xs' | 'sm' | 'md' | 'lg';
  * (`[(selectedValue)]`, single mode), next to the `valueChange` output with
  * the option object and the forms binding.
  *
+ * `focus()` (3.35) moves the focus into the field's `<input>` when a form
+ * opens or after a rejected save (WCAG 2.4.3); it opens the list as a user's
+ * focus does (`openOnFocus`).
+ *
  * @example
  * ```html
  * <lc-combobox
@@ -176,6 +180,23 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   registerOnChange(fn: (value: ComboboxValue) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(isDisabled: boolean): void;
+  /**
+   * Moves the focus into the field's `<input>` (3.35), e.g. when a form opens
+   * with this field first, or to the field with the error after a rejected
+   * save (422) (WCAG 2.4.3). `options` as for `HTMLElement.focus()`
+   * (`{ preventScroll: true }`). Shows the same focus ring as a user's focus.
+   * Like a user's focus it opens the list when `openOnFocus` is `true` and
+   * there is something to show; with `false` the list stays closed
+   * (`aria-expanded="false"`). A disabled field takes no focus (it stays where
+   * it is). Call it once the field has rendered, e.g.
+   * `afterNextRender(() => this.month().focus(), { injector })` with
+   * `month = viewChild.required(ComboboxComponent)` and the page component's
+   * `injector = inject(Injector)`. In an `lc-modal` that opens with the field,
+   * that call runs after the dialog moved the focus to its first control.
+   * Does nothing before the component has rendered.
+   * @param options Passed to the native `focus()`.
+   */
+  focus(options?: FocusOptions): void;
   /**
    * Clear the current selection and query. Emits `null` (single) or `[]`
    * (multiple) exactly once, like a user-initiated deselect.

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

@@ -67,6 +67,12 @@ export declare class ConfirmDialogComponent {
    * @default 'center'
    */
   readonly placement: import("@angular/core").InputSignal<ModalPlacement>;
+  /**
+   * Passed to `lc-modal` (3.34). The focus returns after confirm, cancel,
+   * Escape and ×. Set it to the trigger. `null`: as before.
+   * @default null
+   */
+  readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   /** Id of the title, which names the dialog. */
   protected readonly titleId: string;
   /** Emitted when user confirms */
@@ -156,6 +162,11 @@ export declare class ConfirmDialogComponent {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "confirmed": "confirmed";
     "cancelled": "cancelled";
@@ -175,6 +186,11 @@ export interface ConfirmOptions {
   buttonSize?: ConfirmDialogButtonSize;
   /** `center`, `auto` (a bottom sheet below 640 px) or `sheet` (3.3). */
   placement?: ModalPlacement;
+  /**
+   * Element that gets the focus back after the dialog closed (3.34); see
+   * `lc-modal` `returnFocusTo`.
+   */
+  returnFocusTo?: HTMLElement | null;
 }
 /**
  * Imperative confirm dialog service.

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

@@ -12,7 +12,10 @@ export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
  * - Close on Escape key support
  * - Heading text display
  * - Content projection for arbitrary body content
- * - Accessible with ARIA dialog role, focus trap and focus restore
+ * - Accessible with ARIA dialog role, focus trap and focus restore;
+ *   `returnFocusTo` (3.35) names the element that gets the focus back after
+ *   the drawer closed (WebKit doesn't focus a tapped button, so the one
+ *   captured at open is `body`)
  *
  * @example
  * ```html
@@ -42,6 +45,20 @@ export declare class DrawerComponent implements OnDestroy {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the close button. */
   readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Element that gets the focus back after the drawer closed (3.35), instead
+   * of the one that had it at open. Set it to the trigger: WebKit (Safari,
+   * every iOS browser) doesn't focus a tapped button, so the captured element
+   * is `body`. Applied when the panel has left the DOM after its 250 ms
+   * slide-out, once the focus trap has restored its captured element. Holds
+   * on ×, Escape, backdrop, `open` false, and when the drawer is destroyed
+   * while open. A custom-element host that can't take focus (`<lc-button>`)
+   * hands it to its first focusable descendant. Ignored when the element is
+   * no longer in the document or can't take focus; the captured element then
+   * keeps it. `null`: as before.
+   * @default null
+   */
+  readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   /** Emitted when the drawer should close. */
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   /** Internal visibility — stays true during the slide-out animation. */
@@ -54,8 +71,22 @@ export declare class DrawerComponent implements OnDestroy {
   private readonly drawerId;
   private closeTimer?;
   private originalOverflow?;
+  /**
+   * The environment injector: a node injector would cancel the focus-return
+   * hook when the drawer is destroyed while open.
+   */
+  private readonly environmentInjector;
+  private destroyed;
   constructor();
   ngOnDestroy(): void;
+  /**
+   * Focuses `returnFocusTo` after the next render (3.35): the template
+   * refresh has removed the panel, and `cdkTrapFocus` has restored its
+   * captured element on destroy, so this is the last focus write. Reads the
+   * input again then, so a trigger re-rendered meanwhile is taken from a
+   * fresh query. Does nothing when the drawer opened again meanwhile.
+   */
+  private scheduleFocusReturn;
   /**
    * Handle backdrop click. Ignored while another overlay (menu, popover, …)
    * sits above this drawer — the click belongs to that layer.
@@ -118,6 +149,11 @@ export declare class DrawerComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "closed": "closed";
   }, never, ["*"], true, never>;

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

@@ -23,7 +23,9 @@ export interface GalleryItem {
  * - Configurable custom column count
  * - Lightbox overlay with navigation (prev/next)
  * - Keyboard navigation (Arrow keys, Escape); focus is trapped inside the
- *   lightbox and returned to the originating thumbnail on close
+ *   lightbox and returned to the originating thumbnail on close: the clicked
+ *   or tapped thumbnail, also in WebKit, where a tap doesn't focus it, so the
+ *   gallery needs no `returnFocusTo` (3.35)
  * - Optional captions and category filtering
  * - Lazy loading with placeholder shimmer
  * - Zoom control in lightbox

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

@@ -76,6 +76,8 @@ export type HeaderContextPlacement = 'inline' | 'below';
  * - `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.
+ * - `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).
  * - Every built-in label is an input (`homeAriaLabel`, `hamburgerAriaLabel`,
  *   `userMenuAriaLabel`, `navAriaLabel`, `profileLabel`, `logoutLabel`,
  *   `themeToDarkAriaLabel`, `themeToLightAriaLabel`, `contextAriaLabel`);
@@ -283,6 +285,10 @@ export declare class HeaderComponent {
    */
   protected get themeService(): ThemeService;
   private readonly hamburger;
+  /** The context button (`contextName`), while it is rendered. */
+  private readonly contextButton;
+  /** The `focusContext()` hook waiting for the next render. */
+  private pendingContextFocus?;
   constructor();
   /**
    * Name of the avatar trigger (AS-33, WCAG 2.5.3 Label in Name):
@@ -322,6 +328,15 @@ export declare class HeaderComponent {
    * Close profile dropdown
    */
   closeDropdown(): void;
+  /**
+   * Moves the focus to the context button after the next render (3.34), so a
+   * `contextName` set just before is already in its name. Call it right after
+   * the choice, or when the sheet that changes the context closes. Does
+   * nothing while the button isn't shown (no `contextName`, or up to 640 px
+   * with `contextPlacement="inline"`). A second call before that render
+   * replaces the first.
+   */
+  focusContext(): void;
   /**
    * Handle hamburger click
    */

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

@@ -49,4 +49,12 @@ export declare class OverlayInsetsService {
   readonly bottom: import("@angular/core").WritableSignal<string | null>;
   static ɵfac: i0.ɵɵFactoryDeclaration<OverlayInsetsService, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
-}
+}
+/**
+ * Gives the focus to an overlay's `returnFocusTo` element (3.34 in
+ * `lc-modal`, shared since 3.35 with `lc-drawer` and `lc-sidenav`). A
+ * custom-element host that can't take focus (`<lc-button>`) hands it to its
+ * first focusable descendant. An element that can't take focus at all leaves
+ * the focus where it is.
+ */
+export declare function focusReturnTarget(target: HTMLElement): void;

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

@@ -100,6 +100,12 @@ export interface ListLinkClickEvent {
   item: ListItem;
   event: MouseEvent;
 }
+/**
+ * The part of a row that `focusItem()` focuses (3.34): `row`, the row's
+ * button (`clickable`) or link (`href`), or `action`, its built-in action
+ * button.
+ */
+export type ListItemPart = 'row' | 'action';
 /**
  * List component for displaying structured item collections.
  *
@@ -112,6 +118,9 @@ export interface ListLinkClickEvent {
  * - 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
+ * - `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)
  *
  * @example
  * ```html
@@ -172,7 +181,24 @@ export declare class ListComponent {
    * tab" keeps working.
    */
   readonly linkClick: import("@angular/core").OutputEmitterRef<ListLinkClickEvent>;
+  private readonly injector;
+  /** The `role="list"` element; each item renders exactly one child of it. */
+  private readonly listEl;
+  /** The `focusItem()` hook waiting for the next render. */
+  private pendingItemFocus?;
   constructor();
+  /**
+   * Moves the focus into the row of the first item with this `id` after the
+   * next render (3.34). `'row'`: the row's button (`clickable`) or link
+   * (`href`). `'action'`: its built-in action button. Does nothing for an
+   * unknown `id`, for a row without that part (a plain row, a disabled row for
+   * `'row'`, no `action`, an `lcListItem` template's own controls), or when
+   * the list is destroyed first. A second call before that render replaces the
+   * first.
+   * @param id The `ListItem.id` of the row.
+   * @param part Which part of the row gets the focus.
+   */
+  focusItem(id: string, part?: ListItemPart): void;
   /** Whether a row renders as a link: `href` set and not disabled. */
   protected isLinkRow(item: ListItem): boolean;
   /**

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

@@ -17,7 +17,9 @@ export type ModalPlacement = 'center' | 'auto' | 'sheet';
  * - Placement: centred, or a bottom sheet on phones (`placement="auto"`)
  * - Header and footer stay visible while the body scrolls; the close button
  *   is a 44 px target
- * - Focus trap for keyboard accessibility
+ * - Focus trap for keyboard accessibility; `returnFocusTo` (3.34) names the
+ *   element that gets the focus back after the dialog closed (WebKit doesn't
+ *   focus a tapped button, so the one captured at open is `body`)
  * - Backdrop click and Escape key to close
  * - Two-way open binding
  * - Header, body, and footer content slots
@@ -84,6 +86,20 @@ export declare class ModalComponent implements OnDestroy {
   ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
   /** Accessible name of the close button (`showCloseButton`). */
   closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Element that gets the focus back after the dialog closed (3.34), instead
+   * of the one that had it at open. Set it to the trigger: WebKit (Safari,
+   * every iOS browser) doesn't focus a tapped button, so the captured element
+   * is `body`. Applied after the next render, once the dialog has left the DOM
+   * and the focus trap has restored its captured element. This holds on every
+   * close: ×, Escape, backdrop, `open` false, `closeModal()`, and destroying an
+   * open modal. A custom-element host that can't take focus (`<lc-button>`)
+   * hands it to its first focusable descendant. Ignored when the element is no
+   * longer in the document or can't take focus; the captured element then
+   * keeps it. `null`: as before.
+   * @default null
+   */
+  returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   /**
    * Emitted when modal opens
    */
@@ -113,6 +129,13 @@ export declare class ModalComponent implements OnDestroy {
   /** Identifies this instance in the overlay stack. */
   private readonly modalId;
   private originalOverflow?;
+  /**
+   * The environment injector: a node injector would cancel the focus-return
+   * hook when the modal is destroyed while open (`ConfirmService`).
+   */
+  private readonly environmentInjector;
+  /** Whether `showModal()` ran without a `hideModal()` after it. */
+  private shown;
   constructor();
   ngOnDestroy(): void;
   /**
@@ -139,13 +162,21 @@ export declare class ModalComponent implements OnDestroy {
   protected onDocumentKeydown(event: KeyboardEvent): void;
   /**
    * Show the modal. Focus is moved inside and restored on close by the
-   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.
+   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`, then given to
+   * `returnFocusTo` when set (3.34).
    */
   private showModal;
   /**
    * Hide the modal
    */
   private hideModal;
+  /**
+   * Focuses `returnFocusTo` after the next render: the template refresh has
+   * removed the dialog, and `cdkTrapFocus` has restored its captured element
+   * on destroy, so this is the last focus write. Reads the input again then,
+   * so a trigger re-rendered meanwhile is taken from a fresh query.
+   */
+  private scheduleFocusReturn;
   static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "lc-modal", never, {
     "open": {
@@ -198,6 +229,11 @@ export declare class ModalComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "modalOpened": "modalOpened";
     "modalClosed": "modalClosed";

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

@@ -53,7 +53,9 @@ export type SidenavVariant = 'default' | 'transparent';
  *   `--color-on-surface-selected` (AA on the selected tint)
  * - Accessible: the inner `<nav>` is the navigation landmark; in drawer mode
  *   the panel is a modal dialog (`role="dialog"`, focus moved to the close
- *   button on open, trapped while open, restored on close)
+ *   button on open, trapped while open, restored on close); `returnFocusTo`
+ *   (3.35) names the element that gets the focus back after the drawer
+ *   closed (WebKit doesn't focus a tapped button)
  *
  * @example
  * ```html
@@ -162,6 +164,22 @@ export declare class SidenavComponent implements OnDestroy {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Whether to show the overlay backdrop */
   readonly hasOverlay: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Drawer mode only (`mode="drawer"`, or `docked` below `mobileBreakpoint`):
+   * element that gets the focus back after the drawer closed (3.35), instead
+   * of the one that had it at open. Set it to the trigger: WebKit (Safari,
+   * every iOS browser) doesn't focus a tapped button, so the captured element
+   * is `body`. Applied after the next render, once the panel has left the DOM
+   * and the focus trap has restored its captured element. Holds on ×,
+   * Escape, backdrop, an item or brand tap on a phone (they close it through
+   * `closed`), `isOpen` false, and when the sidenav is destroyed while open.
+   * A custom-element host that can't take focus (`<lc-button>`) hands it to
+   * its first focusable descendant. Ignored when the element is no longer in
+   * the document or can't take focus; the captured element then keeps it.
+   * `null`: as before.
+   * @default null
+   */
+  readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   /**
    * Navigation items (`NavigationItem[]`): `id`, `icon`, `label`, `route`,
    * `displayOrder` (sort order, 1 = first); optional `children`
@@ -261,8 +279,26 @@ export declare class SidenavComponent implements OnDestroy {
    * Event emitted when an item's action button is clicked
    */
   readonly itemAction: import("@angular/core").OutputEmitterRef<NavigationItem>;
+  /** Whether the drawer panel is rendered (drawer mode and open). */
+  private readonly drawerOpen;
+  /** Whether the drawer panel was shown without a close after it. */
+  private drawerShown;
+  /**
+   * The environment injector: a node injector would cancel the focus-return
+   * hook when the sidenav is destroyed while open.
+   */
+  private readonly environmentInjector;
   constructor();
   ngOnDestroy(): void;
+  /** Ends a shown drawer panel; schedules `returnFocusTo` when set. */
+  private drawerClosed;
+  /**
+   * Focuses `returnFocusTo` after the next render: the template refresh has
+   * removed the panel, and `cdkTrapFocus` has restored its captured element
+   * on destroy, so this is the last focus write. Reads the input again then,
+   * so a trigger re-rendered meanwhile is taken from a fresh query.
+   */
+  private scheduleFocusReturn;
   private setupMediaQuery;
   private teardownMediaQuery;
   /**
@@ -434,6 +470,11 @@ export declare class SidenavComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
     "items": {
       "alias": "items";
       "required": false;

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

@@ -14,6 +14,8 @@ import { ControlValueAccessor } from "@angular/forms";
  * - ControlValueAccessor integration for reactive forms
  * - Plain form posts without JavaScript: `name`, and a `value` that is
  *   prerendered into the native `<textarea>`
+ * - `focus()` (3.35): moves the focus into the native `<textarea>` when a
+ *   form opens or after a rejected save (WCAG 2.4.3)
  *
  * @example
  * ```html
@@ -214,6 +216,21 @@ export declare class TextareaComponent implements ControlValueAccessor {
    * Handle blur event
    */
   onBlur(): void;
+  /**
+   * Moves the focus into the native `<textarea>` (3.35), e.g. when a form
+   * opens with this field first, or to the field with the error after a
+   * rejected save (422) (WCAG 2.4.3). `options` as for `HTMLElement.focus()`
+   * (`{ preventScroll: true }`). Shows the same focus ring as a user's focus.
+   * A disabled field takes no focus (it stays where it is); a read-only one
+   * does. Call it once the field has rendered, e.g.
+   * `afterNextRender(() => this.note().focus(), { injector })` with
+   * `note = viewChild.required(TextareaComponent)` and the page component's
+   * `injector = inject(Injector)`. In an `lc-modal` that opens with the field,
+   * that call runs after the dialog moved the focus to its first control.
+   * Does nothing before the component has rendered.
+   * @param options Passed to the native `focus()`.
+   */
+  focus(options?: FocusOptions): void;
   writeValue(value: string | null | undefined): void;
   registerOnChange(fn: (value: string) => void): void;
   registerOnTouched(fn: () => void): void;

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

@@ -194,8 +194,10 @@ type ToastLive = 'polite' | 'assertive';
  * as the space between the offsets and scrolls when its toasts need more
  * (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
+ * Bottom stacks show the newest toast nearest the edge (3.33). A top stack
+ * shows its assertive region (error, warning) above its polite one (success,
+ * info), each oldest first, so a newer error sits above an older success
+ * (3.35, 053-n2). 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