@lifecorner/angular-ui-kit 3.34.0 → 3.36.0

package/fesm2022/lifecorner-angular-ui-kit-toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-toast.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/toast/toast.service.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.html","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.html"],"sourcesContent":["import { Injectable, PLATFORM_ID, inject, signal, Signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ToastConfig {\n  message: string;\n  variant?: ToastVariant;\n  position?: ToastPosition;\n  duration?: number;\n  showCloseButton?: boolean;\n  action?: ToastAction;\n}\n\nexport interface Toast extends Required<Omit<ToastConfig, 'action'>> {\n  id: string;\n  action?: ToastAction;\n}\n\n/**\n * Toast service for showing ephemeral notifications.\n *\n * The toasts are rendered by `<lc-toast-outlet />`, which the application\n * places once (e.g. in its shell); without it nothing is shown. The options,\n * their defaults, the timing and how a toast is announced to screen readers\n * are documented under *Feedback/Toast Outlet* (3.17).\n *\n * @example\n * ```typescript\n * private readonly toastService = inject(ToastService);\n *\n * showSuccess() {\n *   this.toastService.show({\n *     message: 'Changes saved successfully!',\n *     variant: 'success',\n *     duration: 3000\n *   });\n * }\n * ```\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastService {\n  /**\n   * Public readonly signal for toasts\n   */\n  public readonly toasts: Signal<readonly Toast[]>;\n\n  /**\n   * Internal signal for toast list\n   */\n  private readonly toastList = signal<Toast[]>([]);\n\n  private readonly MAX_TOASTS = 5;\n  private toastIdCounter = 0;\n  private activeTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n  /** Auto-dismiss timers only make sense in the browser (and `window` does not exist on the server). */\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  constructor() {\n    this.toasts = this.toastList.asReadonly();\n  }\n\n  /**\n   * Show a toast notification\n   */\n  show(config: ToastConfig): string {\n    const toast: Toast = {\n      id: this.generateId(),\n      message: config.message,\n      variant: config.variant || 'info',\n      position: config.position || 'top-right',\n      duration: config.duration !== undefined ? config.duration : 3000,\n      showCloseButton: config.showCloseButton !== undefined ? config.showCloseButton : true,\n      action: config.action,\n    };\n\n    // Add toast to list\n    let currentToasts = this.toastList();\n\n    // Remove oldest toast if at max capacity\n    if (currentToasts.length >= this.MAX_TOASTS) {\n      const oldestToast = currentToasts[0];\n      if (oldestToast) {\n        this.clearTimeout(oldestToast.id);\n        currentToasts = currentToasts.slice(1);\n      }\n    }\n\n    this.toastList.set([...currentToasts, toast]);\n\n    // Auto-dismiss if duration > 0\n    if (toast.duration > 0 && this.isBrowser) {\n      const timeoutId = setTimeout(() => {\n        this.close(toast.id);\n      }, toast.duration);\n\n      this.activeTimeouts.set(toast.id, timeoutId);\n    }\n\n    return toast.id;\n  }\n\n  /**\n   * Close a specific toast\n   */\n  close(id: string): void {\n    this.removeToast(id);\n  }\n\n  /**\n   * Close all toasts\n   */\n  closeAll(): void {\n    const currentToasts = this.toastList();\n    currentToasts.forEach((toast) => {\n      this.clearTimeout(toast.id);\n    });\n    this.toastList.set([]);\n  }\n\n  /**\n   * Generate unique toast ID\n   */\n  private generateId(): string {\n    return `toast-${++this.toastIdCounter}-${Date.now()}`;\n  }\n\n  /**\n   * Remove a toast from the list\n   */\n  private removeToast(id: string): void {\n    this.clearTimeout(id);\n    const currentToasts = this.toastList();\n    this.toastList.set(currentToasts.filter((t) => t.id !== id));\n  }\n\n  /**\n   * Clear timeout for a toast\n   */\n  private clearTimeout(id: string): void {\n    const timeoutId = this.activeTimeouts.get(id);\n    if (timeoutId !== undefined) {\n      clearTimeout(timeoutId);\n      this.activeTimeouts.delete(id);\n    }\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\nimport type { Toast, ToastVariant } from './toast.service';\n\n/**\n * Toast component for displaying ephemeral notification messages.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Auto-dismiss with configurable duration\n * - Manual dismiss with close button\n * - Icon display per variant\n * - Stacked toast positioning via ToastService + `<lc-toast-outlet />`\n * - Animated enter/exit transitions\n *\n * Usually rendered by `<lc-toast-outlet />`; can also be placed directly:\n *\n * @example\n * ```html\n * <lc-toast [toast]=\"toast\" (closed)=\"dismiss($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-toast',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './toast.component.html',\n  styleUrls: ['./toast.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'ariaRole()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-atomic]': 'announce() ? \"true\" : null',\n  },\n})\nexport class ToastComponent {\n  /**\n   * Toast data\n   */\n  toast = input.required<Toast>();\n\n  /**\n   * Whether the toast is its own live region (`role=\"status\"`/`\"alert\"` on the\n   * host). `lc-toast-outlet` sets this to false because its persistent live\n   * regions already announce the toast — announcing twice would be noise.\n   * @default true\n   */\n  announce = input<boolean>(true);\n\n  /** Accessible name of the close button (`toast.showCloseButton`). */\n  closeAriaLabel = input('Close notification');\n\n  /**\n   * Emitted when toast is closed\n   */\n  readonly closed = output<string>();\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const toast = this.toast();\n    return `lc-toast lc-toast--${toast.variant}`;\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-toast__container';\n  });\n\n  /**\n   * Computed ARIA role\n   */\n  protected ariaRole = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n  });\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';\n  });\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<ToastVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return icons[this.toast().variant];\n  });\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closed.emit(this.toast().id);\n  }\n\n  /**\n   * Handle action button click\n   */\n  protected onActionClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const action = this.toast().action;\n    if (action) {\n      action.onClick();\n      this.closed.emit(this.toast().id);\n    }\n  }\n}\n","<div [class]=\"containerClasses()\">\n  <div class=\"lc-toast__icon\">\n    <lc-icon [name]=\"defaultIcon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n  \n  <div class=\"lc-toast__message\">\n    {{ toast().message }}\n  </div>\n  \n  @if (toast().action) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__action\"\n      (click)=\"onActionClick($event)\"\n    >\n      {{ toast().action?.label }}\n    </button>\n  }\n  \n  @if (toast().showCloseButton) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__close\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"onCloseClick($event)\"\n    >\n      <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n","import { Component, ChangeDetectionStrategy, computed, inject, input } from '@angular/core';\nimport { OverlayInsetsService } from '@lifecorner/angular-ui-kit/internal/overlay';\nimport { ToastComponent } from './toast.component';\nimport { ToastService, type Toast, type ToastPosition } from './toast.service';\n\n/** Politeness of the live region a toast is announced from. */\ntype ToastLive = 'polite' | 'assertive';\n\nconst POSITIONS: readonly ToastPosition[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n];\n\n/**\n * Renders the toasts of {@link ToastService}. Place it once in the application\n * shell; without it `ToastService.show()` has no visible effect.\n *\n * ```html\n * <lc-toast-outlet />\n * ```\n *\n * Toasts are stacked per `position`. Every position owns two live regions that\n * exist from the start — screen readers only announce content that is inserted\n * into an *existing* live region — one `polite` for success/info toasts and one\n * `assertive` for error/warning toasts. Dismissing a toast (close button,\n * action, auto-dismiss) removes it from the service.\n *\n * Offsets (3.28, AS-34): with `lc-app-shell` in the app (the outlet may sit\n * before or after it), the `top-*` stacks start below the shell's header and\n * the `bottom-*` stacks end above its bottom bar, each with the stack's 16 px\n * padding as the gap. The shell measures both in the browser (the header's\n * bottom edge with the top inset; the shown bar's top edge, from the\n * viewport's bottom, with the bottom inset). From 1024 px, where the bar is\n * hidden, the bottom offset is the safe-area inset. Without a shell, and in\n * prerendered HTML, both are `0px`, as before. Every stack is at most as high\n * as the space between the offsets and scrolls when its toasts need more\n * (200 % text), so each toast stays reachable.\n *\n * Bottom stacks show the newest toast nearest the edge (3.33); top stacks the\n * oldest at the top. The toasts of a stack are 8 px (`--spacing-2`) apart\n * (3.33.1), within a live region and across the two; an empty region and the\n * last toast add no space, and the stack keeps its 16 px padding. A `top-*`\n * stack lies over the page on purpose (a toast stays visible wherever the\n * page is scrolled), so in the shell it can cover a title right under the\n * header (at 360 px a toast at y 72 over an h1 at y 80): prefer `bottom-*`\n * there.\n *\n * CSS hooks (set them on `lc-toast-outlet` or any ancestor, e.g. `:root`;\n * each wins over the shell's value; write lengths, `0px` rather than `0`):\n * - `--lc-toast-outlet-offset-top` — the space kept free above the `top-*`\n *   stacks. Default `0px`; with `lc-app-shell`: its header's bottom edge, or\n *   `env(safe-area-inset-top, 0px)` without a header.\n * - `--lc-toast-outlet-offset-bottom` — the space kept free below the\n *   `bottom-*` stacks. Default `0px`; with `lc-app-shell`: the shown bottom\n *   bar's top edge, measured from the viewport's bottom, or\n *   `env(safe-area-inset-bottom, 0px)` when no bar shows.\n */\n@Component({\n  selector: 'lc-toast-outlet',\n  standalone: true,\n  imports: [ToastComponent],\n  templateUrl: './toast-outlet.component.html',\n  styleUrls: ['./toast-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The shell's measured offsets (AS-34), private; `null` without a shell,\n    // so the host gets no style attribute. The public hooks win in the CSS.\n    '[style.--_lc-toast-outlet-frame-top]': 'insets.top()',\n    '[style.--_lc-toast-outlet-frame-bottom]': 'insets.bottom()',\n  },\n})\nexport class ToastOutletComponent {\n  protected readonly positions = POSITIONS;\n  protected readonly liveLevels: readonly ToastLive[] = ['assertive', 'polite'];\n\n  private readonly toastService = inject(ToastService);\n  protected readonly insets = inject(OverlayInsetsService);\n\n  /** Accessible name of every toast's close button (forwarded to lc-toast). */\n  readonly closeAriaLabel = input('Close notification');\n\n  /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */\n  private readonly groups = computed(() => {\n    const groups = new Map<string, Toast[]>();\n    for (const toast of this.toastService.toasts()) {\n      const key = `${toast.position}:${ToastOutletComponent.liveFor(toast)}`;\n      const group = groups.get(key);\n      if (group) {\n        group.push(toast);\n      } else {\n        groups.set(key, [toast]);\n      }\n    }\n    return groups;\n  });\n\n  /**\n   * 3.33 (request 052, 045-n2): per `bottom-*` stack, the live level of its\n   * newest toast. That region gets `lc-toast-outlet__region--latest` and is\n   * laid out at the edge, so the newest toast sits nearest the edge (and, in\n   * a scrolling stack, in view at rest). DOM and announcement order stay.\n   */\n  protected readonly latestLive = computed(() => {\n    const latest = new Map<ToastPosition, ToastLive>();\n    for (const toast of this.toastService.toasts()) {\n      if (toast.position.startsWith('bottom-')) {\n        latest.set(toast.position, ToastOutletComponent.liveFor(toast));\n      }\n    }\n    return latest;\n  });\n\n  protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[] {\n    return this.groups().get(`${position}:${live}`) ?? [];\n  }\n\n  protected onClosed(id: string): void {\n    this.toastService.close(id);\n  }\n\n  /** Errors and warnings interrupt (assertive), everything else waits its turn. */\n  private static liveFor(toast: Toast): ToastLive {\n    return toast.variant === 'error' || toast.variant === 'warning' ? 'assertive' : 'polite';\n  }\n}\n","@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div\n        class=\"lc-toast-outlet__region\"\n        [class.lc-toast-outlet__region--latest]=\"latestLive().get(position) === live\"\n        [attr.aria-live]=\"live\"\n        aria-atomic=\"false\"\n      >\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-toast.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/toast/toast.service.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast.component.html","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.ts","../../../../libs/angular-ui-kit/src/lib/toast/toast-outlet.component.html"],"sourcesContent":["import { Injectable, PLATFORM_ID, inject, signal, Signal } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\nexport type ToastVariant = 'success' | 'error' | 'warning' | 'info';\nexport type ToastPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ToastConfig {\n  message: string;\n  variant?: ToastVariant;\n  position?: ToastPosition;\n  duration?: number;\n  showCloseButton?: boolean;\n  action?: ToastAction;\n}\n\nexport interface Toast extends Required<Omit<ToastConfig, 'action'>> {\n  id: string;\n  action?: ToastAction;\n}\n\n/**\n * Toast service for showing ephemeral notifications.\n *\n * The toasts are rendered by `<lc-toast-outlet />`, which the application\n * places once (e.g. in its shell); without it nothing is shown. The options,\n * their defaults, the timing and how a toast is announced to screen readers\n * are documented under *Feedback/Toast Outlet* (3.17).\n *\n * @example\n * ```typescript\n * private readonly toastService = inject(ToastService);\n *\n * showSuccess() {\n *   this.toastService.show({\n *     message: 'Changes saved successfully!',\n *     variant: 'success',\n *     duration: 3000\n *   });\n * }\n * ```\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class ToastService {\n  /**\n   * Public readonly signal for toasts\n   */\n  public readonly toasts: Signal<readonly Toast[]>;\n\n  /**\n   * Internal signal for toast list\n   */\n  private readonly toastList = signal<Toast[]>([]);\n\n  private readonly MAX_TOASTS = 5;\n  private toastIdCounter = 0;\n  private activeTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n  /** Auto-dismiss timers only make sense in the browser (and `window` does not exist on the server). */\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  constructor() {\n    this.toasts = this.toastList.asReadonly();\n  }\n\n  /**\n   * Show a toast notification\n   */\n  show(config: ToastConfig): string {\n    const toast: Toast = {\n      id: this.generateId(),\n      message: config.message,\n      variant: config.variant || 'info',\n      position: config.position || 'top-right',\n      duration: config.duration !== undefined ? config.duration : 3000,\n      showCloseButton: config.showCloseButton !== undefined ? config.showCloseButton : true,\n      action: config.action,\n    };\n\n    // Add toast to list\n    let currentToasts = this.toastList();\n\n    // Remove oldest toast if at max capacity\n    if (currentToasts.length >= this.MAX_TOASTS) {\n      const oldestToast = currentToasts[0];\n      if (oldestToast) {\n        this.clearTimeout(oldestToast.id);\n        currentToasts = currentToasts.slice(1);\n      }\n    }\n\n    this.toastList.set([...currentToasts, toast]);\n\n    // Auto-dismiss if duration > 0\n    if (toast.duration > 0 && this.isBrowser) {\n      const timeoutId = setTimeout(() => {\n        this.close(toast.id);\n      }, toast.duration);\n\n      this.activeTimeouts.set(toast.id, timeoutId);\n    }\n\n    return toast.id;\n  }\n\n  /**\n   * Close a specific toast\n   */\n  close(id: string): void {\n    this.removeToast(id);\n  }\n\n  /**\n   * Close all toasts\n   */\n  closeAll(): void {\n    const currentToasts = this.toastList();\n    currentToasts.forEach((toast) => {\n      this.clearTimeout(toast.id);\n    });\n    this.toastList.set([]);\n  }\n\n  /**\n   * Generate unique toast ID\n   */\n  private generateId(): string {\n    return `toast-${++this.toastIdCounter}-${Date.now()}`;\n  }\n\n  /**\n   * Remove a toast from the list\n   */\n  private removeToast(id: string): void {\n    this.clearTimeout(id);\n    const currentToasts = this.toastList();\n    this.toastList.set(currentToasts.filter((t) => t.id !== id));\n  }\n\n  /**\n   * Clear timeout for a toast\n   */\n  private clearTimeout(id: string): void {\n    const timeoutId = this.activeTimeouts.get(id);\n    if (timeoutId !== undefined) {\n      clearTimeout(timeoutId);\n      this.activeTimeouts.delete(id);\n    }\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\nimport type { Toast, ToastVariant } from './toast.service';\n\n/**\n * Toast component for displaying ephemeral notification messages.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Auto-dismiss with configurable duration\n * - Manual dismiss with close button\n * - Icon display per variant\n * - Stacked toast positioning via ToastService + `<lc-toast-outlet />`\n * - Animated enter/exit transitions\n *\n * Usually rendered by `<lc-toast-outlet />`; can also be placed directly:\n *\n * @example\n * ```html\n * <lc-toast [toast]=\"toast\" (closed)=\"dismiss($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-toast',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './toast.component.html',\n  styleUrls: ['./toast.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'ariaRole()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-atomic]': 'announce() ? \"true\" : null',\n  },\n})\nexport class ToastComponent {\n  /**\n   * Toast data\n   */\n  toast = input.required<Toast>();\n\n  /**\n   * Whether the toast is its own live region (`role=\"status\"`/`\"alert\"` on the\n   * host). `lc-toast-outlet` sets this to false because its persistent live\n   * regions already announce the toast — announcing twice would be noise.\n   * @default true\n   */\n  announce = input<boolean>(true);\n\n  /** Accessible name of the close button (`toast.showCloseButton`). */\n  closeAriaLabel = input('Close notification');\n\n  /**\n   * Emitted when toast is closed\n   */\n  readonly closed = output<string>();\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const toast = this.toast();\n    return `lc-toast lc-toast--${toast.variant}`;\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-toast__container';\n  });\n\n  /**\n   * Computed ARIA role\n   */\n  protected ariaRole = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n  });\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => {\n    if (!this.announce()) return null;\n    const variant = this.toast().variant;\n    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';\n  });\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<ToastVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return icons[this.toast().variant];\n  });\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closed.emit(this.toast().id);\n  }\n\n  /**\n   * Handle action button click\n   */\n  protected onActionClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const action = this.toast().action;\n    if (action) {\n      action.onClick();\n      this.closed.emit(this.toast().id);\n    }\n  }\n}\n","<div [class]=\"containerClasses()\">\n  <div class=\"lc-toast__icon\">\n    <lc-icon [name]=\"defaultIcon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n  \n  <div class=\"lc-toast__message\">\n    {{ toast().message }}\n  </div>\n  \n  @if (toast().action) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__action\"\n      (click)=\"onActionClick($event)\"\n    >\n      {{ toast().action?.label }}\n    </button>\n  }\n  \n  @if (toast().showCloseButton) {\n    <button\n      type=\"button\"\n      class=\"lc-toast__close\"\n      [attr.aria-label]=\"closeAriaLabel()\"\n      (click)=\"onCloseClick($event)\"\n    >\n      <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n","import { Component, ChangeDetectionStrategy, computed, inject, input } from '@angular/core';\nimport { OverlayInsetsService } from '@lifecorner/angular-ui-kit/internal/overlay';\nimport { ToastComponent } from './toast.component';\nimport { ToastService, type Toast, type ToastPosition } from './toast.service';\n\n/** Politeness of the live region a toast is announced from. */\ntype ToastLive = 'polite' | 'assertive';\n\nconst POSITIONS: readonly ToastPosition[] = [\n  'top-left',\n  'top-center',\n  'top-right',\n  'bottom-left',\n  'bottom-center',\n  'bottom-right',\n];\n\n/**\n * Renders the toasts of {@link ToastService}. Place it once in the application\n * shell; without it `ToastService.show()` has no visible effect.\n *\n * ```html\n * <lc-toast-outlet />\n * ```\n *\n * Toasts are stacked per `position`. Every position owns two live regions that\n * exist from the start — screen readers only announce content that is inserted\n * into an *existing* live region — one `polite` for success/info toasts and one\n * `assertive` for error/warning toasts. Dismissing a toast (close button,\n * action, auto-dismiss) removes it from the service.\n *\n * Offsets (3.28, AS-34): with `lc-app-shell` in the app (the outlet may sit\n * before or after it), the `top-*` stacks start below the shell's header and\n * the `bottom-*` stacks end above its bottom bar, each with the stack's 16 px\n * padding as the gap. The shell measures both in the browser (the header's\n * bottom edge with the top inset; the shown bar's top edge, from the\n * viewport's bottom, with the bottom inset). From 1024 px, where the bar is\n * hidden, the bottom offset is the safe-area inset. Without a shell, and in\n * prerendered HTML, both are `0px`, as before. Every stack is at most as high\n * as the space between the offsets and scrolls when its toasts need more\n * (200 % text), so each toast stays reachable.\n *\n * Bottom stacks show the newest toast nearest the edge (3.33). A top stack\n * shows its assertive region (error, warning) above its polite one (success,\n * info), each oldest first, so a newer error sits above an older success\n * (3.35, 053-n2). The toasts of a stack are 8 px (`--spacing-2`) apart\n * (3.33.1), within a live region and across the two; an empty region and the\n * last toast add no space, and the stack keeps its 16 px padding. A `top-*`\n * stack lies over the page on purpose (a toast stays visible wherever the\n * page is scrolled), so in the shell it can cover a title right under the\n * header (at 360 px a toast at y 72 over an h1 at y 80): prefer `bottom-*`\n * there.\n *\n * CSS hooks (set them on `lc-toast-outlet` or any ancestor, e.g. `:root`;\n * each wins over the shell's value; write lengths, `0px` rather than `0`):\n * - `--lc-toast-outlet-offset-top` — the space kept free above the `top-*`\n *   stacks. Default `0px`; with `lc-app-shell`: its header's bottom edge, or\n *   `env(safe-area-inset-top, 0px)` without a header.\n * - `--lc-toast-outlet-offset-bottom` — the space kept free below the\n *   `bottom-*` stacks. Default `0px`; with `lc-app-shell`: the shown bottom\n *   bar's top edge, measured from the viewport's bottom, or\n *   `env(safe-area-inset-bottom, 0px)` when no bar shows.\n */\n@Component({\n  selector: 'lc-toast-outlet',\n  standalone: true,\n  imports: [ToastComponent],\n  templateUrl: './toast-outlet.component.html',\n  styleUrls: ['./toast-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The shell's measured offsets (AS-34), private; `null` without a shell,\n    // so the host gets no style attribute. The public hooks win in the CSS.\n    '[style.--_lc-toast-outlet-frame-top]': 'insets.top()',\n    '[style.--_lc-toast-outlet-frame-bottom]': 'insets.bottom()',\n  },\n})\nexport class ToastOutletComponent {\n  protected readonly positions = POSITIONS;\n  protected readonly liveLevels: readonly ToastLive[] = ['assertive', 'polite'];\n\n  private readonly toastService = inject(ToastService);\n  protected readonly insets = inject(OverlayInsetsService);\n\n  /** Accessible name of every toast's close button (forwarded to lc-toast). */\n  readonly closeAriaLabel = input('Close notification');\n\n  /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */\n  private readonly groups = computed(() => {\n    const groups = new Map<string, Toast[]>();\n    for (const toast of this.toastService.toasts()) {\n      const key = `${toast.position}:${ToastOutletComponent.liveFor(toast)}`;\n      const group = groups.get(key);\n      if (group) {\n        group.push(toast);\n      } else {\n        groups.set(key, [toast]);\n      }\n    }\n    return groups;\n  });\n\n  /**\n   * 3.33 (request 052, 045-n2): per `bottom-*` stack, the live level of its\n   * newest toast. That region gets `lc-toast-outlet__region--latest` and is\n   * laid out at the edge, so the newest toast sits nearest the edge (and, in\n   * a scrolling stack, in view at rest). DOM and announcement order stay.\n   */\n  protected readonly latestLive = computed(() => {\n    const latest = new Map<ToastPosition, ToastLive>();\n    for (const toast of this.toastService.toasts()) {\n      if (toast.position.startsWith('bottom-')) {\n        latest.set(toast.position, ToastOutletComponent.liveFor(toast));\n      }\n    }\n    return latest;\n  });\n\n  protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[] {\n    return this.groups().get(`${position}:${live}`) ?? [];\n  }\n\n  protected onClosed(id: string): void {\n    this.toastService.close(id);\n  }\n\n  /** Errors and warnings interrupt (assertive), everything else waits its turn. */\n  private static liveFor(toast: Toast): ToastLive {\n    return toast.variant === 'error' || toast.variant === 'warning' ? 'assertive' : 'polite';\n  }\n}\n","@for (position of positions; track position) {\n  <div class=\"lc-toast-outlet__stack\" [class]=\"'lc-toast-outlet__stack lc-toast-outlet__stack--' + position\">\n    <!-- Both regions are always present (even empty) so that toasts inserted\n         later are announced; the toasts themselves do not announce again. -->\n    @for (live of liveLevels; track live) {\n      <div\n        class=\"lc-toast-outlet__region\"\n        [class.lc-toast-outlet__region--latest]=\"latestLive().get(position) === live\"\n        [attr.aria-live]=\"live\"\n        aria-atomic=\"false\"\n      >\n        @for (toast of toastsFor(position, live); track toast.id) {\n          <lc-toast [toast]=\"toast\" [announce]=\"false\" [closeAriaLabel]=\"closeAriaLabel()\" (closed)=\"onClosed($event)\" />\n        }\n      </div>\n    }\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.34.0",
+  "version": "3.36.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {
@@ -462,6 +462,10 @@
       "types": "./types/lifecorner-angular-ui-kit-stat-trend.d.ts",
       "default": "./fesm2022/lifecorner-angular-ui-kit-stat-trend.mjs"
     },
+    "./state-strip": {
+      "types": "./types/lifecorner-angular-ui-kit-state-strip.d.ts",
+      "default": "./fesm2022/lifecorner-angular-ui-kit-state-strip.mjs"
+    },
     "./status-dot": {
       "types": "./types/lifecorner-angular-ui-kit-status-dot.d.ts",
       "default": "./fesm2022/lifecorner-angular-ui-kit-status-dot.mjs"

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

@@ -1647,6 +1647,8 @@ describe('Component pairings of 3.25.0 (request 039)', () => {
     ['textarea', '.lc-textarea--error:focus', '2px solid var(--color-error-600)', '0'],
     ['number', '.number-input--error .number-input__control:focus-within', '2px solid var(--color-error-600)', '0'],
     ['combobox', '.lc-combobox--error .lc-combobox__input-wrapper:focus-within', '2px solid var(--color-error-default)', '0'],
+    // 3.35 (055 D-3): the rest focus ring, so `focus()` from code shows it too.
+    ['combobox', '.lc-combobox__input-wrapper:focus-within', primary, '0'],
   ];
 
   it.each(rings)('AC-2: %s %s draws a solid 2 px outline, no halo', (sheet, selector, outline, offset) => {
@@ -1958,3 +1960,75 @@ describe('Component pairings of 3.30 (request 047)', () => {
     expect(Math.min(got.textOnFill, got.textOnHoverFill)).toBeGreaterThanOrEqual(4.5);
   });
 });
+
+/**
+ * Request 056 (3.36, design 056 §5): the state strip's marks, ring and
+ * caption, the ledger rules of the description-list total and the table
+ * footer, and the band story's parts. Minima over the page, the surfaces and
+ * a hovered row (translucent fills composited over the surface).
+ */
+describe('Component pairings of 3.36 (request 056)', () => {
+  const lib = (path: string) => resolve(__dirname, '../lib', path);
+  const sheets = {
+    strip: compile(lib('state-strip/state-strip.component.scss')).css,
+    dl: compile(lib('description-list/description-list.component.scss')).css,
+    table: compile(lib('table/table.component.scss')).css,
+  };
+  const body = (sheet: keyof typeof sheets, selector: string) => {
+    const css = sheets[sheet];
+    const at = css.indexOf(`\n${selector} {`);
+    expect([selector, at > -1]).toEqual([selector, true]);
+    return css.slice(at, css.indexOf('}', at));
+  };
+  const floor = (n: number) => Math.floor(n * 100) / 100;
+  const grounds = ['--color-background', '--color-surface', '--color-surface-2', '--color-surface-hover', '--color-surface-sunken'];
+
+  it('AC-4, AC-12, AC-19: the rules pair these tokens', () => {
+    expect(body('strip', '.lc-state-strip__mark--success')).toContain('background-color: var(--color-text-success)');
+    expect(body('strip', '.lc-state-strip__mark--warning')).toContain('background-color: var(--color-text-warning)');
+    expect(body('strip', '.lc-state-strip__mark--error')).toContain('background-color: var(--color-text-error)');
+    expect(body('strip', '.lc-state-strip__mark--neutral')).toContain('background-color: var(--color-field-border)');
+    expect(body('strip', '.lc-state-strip__cell:focus-visible')).toContain('outline: 2px solid var(--color-primary-500)');
+    const caption = body('strip', '.lc-state-strip__caption');
+    expect(caption).toContain('background-color: var(--color-text-primary)');
+    expect(caption).toContain('color: var(--color-surface)');
+    expect(body('dl', '.lc-dl .lc-dl__row--total')).toContain('border-top: 1px solid var(--color-field-border)');
+    expect(body('table', '.lc-table tfoot tr')).toContain('border-bottom: 3px double var(--color-field-border)');
+  });
+
+  // [light, dark], floored; design 056 §5 quotes the rounded values (warning
+  // 5.48 / 6.35, error 11.44, ring 3.97 / 7.58, caption 17.74 / 15.85).
+  const expected = {
+    success: [4.81, 6.97],
+    warning: [5.47, 6.34],
+    error: [11.43, 7.21],
+    neutral: [4.39, 5.56],
+    ring: [3.96, 7.57],
+    caption: [17.73, 15.85],
+  };
+
+  it.each(palettes.map(([name, tokens], i) => [name, tokens, i] as const))('AC-4, AC-12: %s palette: the design 056 §5 ratios', (_palette, tokens, i) => {
+    const c = (name: string) => color(tokens, name);
+    const surface = c('--color-surface');
+    const ground = (name: string) => over(c(name), surface);
+    const worst = (ink: string) => floor(Math.min(...grounds.map((g) => ratio(over(c(ink), ground(g)), ground(g)))));
+    const got = {
+      success: worst('--color-text-success'),
+      warning: worst('--color-text-warning'),
+      error: worst('--color-text-error'),
+      neutral: worst('--color-field-border'),
+      ring: worst('--color-primary-500'),
+      caption: floor(ratio(c('--color-surface'), c('--color-text-primary'))),
+    };
+    expect(got).toEqual(Object.fromEntries(Object.entries(expected).map(([key, pair]) => [key, pair[i]])));
+    // Marks, ring and rules: 3:1 (WCAG 1.4.11); the caption is text: 4.5:1.
+    for (const key of ['success', 'warning', 'error', 'neutral', 'ring'] as const) expect(got[key]).toBeGreaterThanOrEqual(3);
+    expect(got.caption).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(palettes)('AC-16: %s palette: the band story\'s five part colours keep 3:1 on the surface', (_palette, tokens) => {
+    const surface = color(tokens, '--color-surface');
+    const parts = ['--color-primary-700', '--color-primary-500', '--color-info-default', '--color-secondary-700', '--color-neutral-500'];
+    for (const part of parts) expect([part, ratio(over(color(tokens, part), surface), surface) >= 3]).toEqual([part, true]);
+  });
+});

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

@@ -2,7 +2,10 @@ import * as i0 from "@angular/core";
 export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
 /**
  * Layout of the projected actions (`slot="action"`).
- * - `inline`: one action right of the body, vertically centred (3.2)
+ * - `inline`: one action right of the body, vertically centred (3.2); from
+ *   16rem to 30rem inside the border (alerts of 258–481 px at 100 % text,
+ *   514–961 px at 200 %) a button action takes its own row below the text,
+ *   lined up with it, at its natural width (3.35)
  * - `stacked`: the actions in their own row below the title and message;
  *   below 576 px of alert width one per line at full width, 8 px apart,
  *   from 576 px side by side at their natural width
@@ -25,6 +28,10 @@ export type AlertActionsLayout = 'inline' | 'stacked';
  *   several actions stacked below it (`actionsLayout="stacked"`); 3.12: a text
  *   link (`<a slot="action" href="…">`) as the one way forward gets a
  *   44 × 44 px target, link colour, an underline and a focus ring
+ * - 3.35: from 16rem to 30rem inside the border (alerts of 258–481 px at
+ *   100 % text, 514–961 px at 200 %) an inline button action takes its own
+ *   row below the text, lined up with it, at its natural width, so the
+ *   message keeps about 200 px beside the ×
  * - 3.13.1: narrow layout below 16rem inside the border (alerts under 258 px
  *   at 100 % text, 514 px at 200 %): the icon shares the first row with the
  *   title, message and actions take the full width below, the padding is one
@@ -84,7 +91,10 @@ export declare class AlertComponent {
   iconAriaLabel: import("@angular/core").InputSignal<string | undefined>;
   /**
    * Layout of the projected actions (`slot="action"`): `inline` — one action
-   * right of the body (3.2); `stacked` — the actions in their own row below
+   * right of the body (3.2); from 16rem to 30rem inside the border (alerts of
+   * 258–481 px at 100 % text, 514–961 px at 200 %) a button action takes its
+   * own row below the text, lined up with it, at its natural width (3.35);
+   * `stacked` — the actions in their own row below
    * the title and message, one per line at full width and 8 px apart below
    * 576 px of alert width, side by side at their natural width from there.
    * @default 'inline'

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-button.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { ElementRef } from "@angular/core";
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info' | 'inverse';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'danger' | 'warning' | 'info' | 'inverse' | 'inverse-outline';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonType = 'button' | 'submit' | 'reset';
 /**
@@ -15,7 +15,9 @@ export declare class ButtonComponent {
    * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,
    * accent-violet). It looks the same in both themes. Not for light backgrounds
    * or `variant="light"` heroes. CSS hook `--lc-button-inverse-fg` (default
-   * `#0d353d`) sets its ink; keep 4.5:1 on white.
+   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is
+   * the quieter action beside it on the same bands: white text and keyline on
+   * a dark translucent fill, the same sizes, height, icon slots and states.
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;
@@ -239,7 +241,9 @@ export declare class ButtonLinkComponent {
    * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,
    * accent-violet). It looks the same in both themes. Not for light backgrounds
    * or `variant="light"` heroes. CSS hook `--lc-button-inverse-fg` (default
-   * `#0d353d`) sets its ink; keep 4.5:1 on white.
+   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is
+   * the quieter link beside it on the same bands: white text and keyline on a
+   * dark translucent fill, the same sizes and height.
    * @default 'primary'
    */
   readonly variant: import("@angular/core").InputSignal<ButtonVariant>;

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

@@ -19,6 +19,8 @@ export type CardFooterLayout = 'default' | 'equal';
  *   the title stays a heading
  * - Equal footer (3.29): `footerLayout="equal"` gives two answers of equal
  *   weight in the `[card-footer]` slot the same width
+ * - Collapsible (3.36): `collapsible` with `[(expanded)]` turns the head into
+ *   one toggle that opens and closes the body and footer
  *
  * @example
  * ```html
@@ -181,23 +183,58 @@ export declare class CardComponent {
    * @default 'default'
    */
   footerLayout: import("@angular/core").InputSignal<CardFooterLayout>;
+  /**
+   * The card can close (3.36, regeln row 1): the head (icon, title, subtitle)
+   * becomes one toggle, a button inside the title's heading with
+   * `aria-expanded` and `aria-controls`, whose hit area is the whole head (at
+   * least 44 px high); Enter, Space or a click open and close the body and the
+   * `[card-footer]`. A chevron at the end of the head shows the state.
+   * `[card-header-action]` stays a separate control beside it. Needs the
+   * built-in `title` (otherwise ignored); wins over `clickable`, `href` and
+   * `route`, which are then ignored; ignored on `dashed`. Bind `[(expanded)]`.
+   * @default false
+   */
+  collapsible: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Open state of a `collapsible` card (3.36), two-way: `[(expanded)]`. Open
+   * by default, so a plain `collapsible` hides nothing; set `false` for a card
+   * that starts closed (also in prerendered HTML). Closed, only the head
+   * shows: the body is `hidden` and the footer is not displayed.
+   * @default true
+   */
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
   /**
    * Emitted when a `clickable` card is clicked or activated with Enter or
    * Space. Not emitted on a link card (`href`/`route`): the link navigates by
    * itself (one navigation); bind the native `(click)` for analytics.
    */
   readonly cardClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  /** Generated id prefix (3.36): creation order, so prerendered HTML is the same in every build. */
+  private readonly uid;
+  /** Id of the body a collapsible card's toggle controls. */
+  protected readonly bodyId: string;
+  /** Id of the subtitle that describes a collapsible card's toggle. */
+  protected readonly subtitleId: string;
+  /**
+   * Whether the card collapses (3.36): `collapsible` with a built-in title,
+   * except for the dashed tile.
+   */
+  protected readonly isCollapsible: import("@angular/core").Signal<boolean>;
   /**
    * How the card links (3.24): `href` wins over `route`; `''`/`null` routes
-   * are no link, and the dashed "coming soon" tile never links.
+   * are no link, and the dashed "coming soon" tile never links. A
+   * collapsible card (3.36) never links.
    */
   protected readonly linkMode: import("@angular/core").Signal<"href" | "route" | null>;
   /**
    * Whether the card acts as a button: `clickable`, except for the dashed
-   * "coming soon" tile, which is never interactive, and a link card, whose
-   * anchor is the only interactive element.
+   * "coming soon" tile, which is never interactive, a link card, whose
+   * anchor is the only interactive element, and a collapsible card (3.36),
+   * whose toggle is.
    */
   protected isClickable: import("@angular/core").Signal<boolean>;
+  /** Opens or closes a collapsible card; `expandedChange` emits the new state. */
+  protected toggle(): void;
   /** `ariaLabel` on the card; on a link card it names the anchor instead. */
   protected readonly cardAriaLabel: import("@angular/core").Signal<string | undefined>;
   constructor();
@@ -309,7 +346,18 @@ export declare class CardComponent {
       "required": false;
       "isSignal": true;
     };
+    "collapsible": {
+      "alias": "collapsible";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
+    "expanded": "expandedChange";
     "cardClick": "cardClick";
   }, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
 }

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

@@ -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
@@ -62,6 +66,16 @@ export declare class ComboboxComponent implements ControlValueAccessor {
   readonly helperText: import("@angular/core").InputSignal<string | undefined>;
   /** Error message */
   readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Announce the error message the moment it appears (`role="alert"` on the
+   * message), as `lc-textarea`. Set `false` when an `lc-alert` error summary
+   * already announces the errors, e.g. a page that moves focus to this field
+   * after a failed submit (422): the error is then read once, with the field,
+   * not twice (alert and description). The message stays visible, stays linked
+   * through `aria-describedby`, and the input keeps `aria-invalid`.
+   * @default true
+   */
+  readonly announceError: import("@angular/core").InputSignal<boolean>;
   /** Disabled state */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** Allow multiple selections */
@@ -176,6 +190,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.
@@ -247,6 +278,11 @@ export declare class ComboboxComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "announceError": {
+      "alias": "announceError";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "disabled";
       "required": false;

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

@@ -1,3 +1,4 @@
+import { BadgeVariant } from "@lifecorner/angular-ui-kit/badge";
 import * as i0 from "@angular/core";
 /**
  * Emphasis treatment applied to a row's value.
@@ -26,6 +27,24 @@ export interface DescriptionListItem {
   datetime?: string;
   /** Optional visual emphasis for the value. @default 'default' */
   emphasis?: DescriptionListEmphasis;
+  /**
+   * Shows the value as an `lc-badge` (3.36, quellen row 2): rounded, `sm` in
+   * an md list, `xs` in an sm list. A `value` that is empty or the same word
+   * (trimmed, any case) is not shown; another value stays as text before the
+   * badge („1“ [Freigegeben]), and `href` or `datetime` wrap that text only.
+   * Term and value stay one `dt`/`dd` pair, read as „term, badge“.
+   */
+  badge?: string;
+  /** Variant of the `badge`, as `lc-badge`. @default 'default' */
+  badgeVariant?: BadgeVariant;
+  /**
+   * The sum item (3.36, app-shell row 2): a rule above and a double rule
+   * below (`--color-field-border`), term and value semibold with tabular
+   * figures; its `emphasis` is ignored. `totalAriaLabel` is read before its
+   * term. Usually the last item.
+   * @default false
+   */
+  total?: boolean;
   /** Optional opaque payload echoed back in `itemClick`. */
   id?: string;
 }
@@ -55,6 +74,8 @@ export type DescriptionListSeparator = 'line' | 'divider' | 'none';
  * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`
  *   rows hold a native button (named by term and value) that the keyboard
  *   reaches, and the `dl` keeps its term and value pairs.
+ * - 3.36: an item's value as a badge (`badge`, `badgeVariant`), and a sum
+ *   item (`total`) with ledger rules, announced with `totalAriaLabel`.
  *
  * @example
  * ```html
@@ -99,8 +120,22 @@ export declare class DescriptionListComponent {
    * @default false
    */
   readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Read before the term of a `total` item and not shown (3.36, app-shell
+   * row 2): „Summe“ makes a screen reader read „Summe, Gesamtkosten Ist,
+   * 522.530,00 €“. Empty adds nothing.
+   * @default ''
+   */
+  readonly totalAriaLabel: import("@angular/core").InputSignal<string>;
   /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */
   readonly itemClick: import("@angular/core").OutputEmitterRef<DescriptionListItem>;
+  /** The visually hidden start of a total's term: „Summe, “ (3.36). */
+  protected readonly totalPrefix: import("@angular/core").Signal<string>;
+  /**
+   * Whether a badge item also shows its `value` as text (3.36, D-2): not when
+   * it is empty or the badge's word.
+   */
+  protected badgeShowsValue(item: DescriptionListItem): boolean;
   /** Generated id prefix, taken once per instance, so later ids don't shift. */
   private readonly uid;
   /** Id of row `index`'s term (only rendered when `clickable`). */
@@ -147,6 +182,11 @@ export declare class DescriptionListComponent {
       "required": false;
       "isSignal": true;
     };
+    "totalAriaLabel": {
+      "alias": "totalAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
   }, never, never, true, never>;

package/types/lifecorner-angular-ui-kit-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