@koobiq/components 20.4.1 → 21.0.0

package/types/koobiq-components-icon.d.ts

@@ -0,0 +1,333 @@
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, OnChanges, DestroyRef, Renderer2, SimpleChanges, AfterViewInit, OnDestroy, InjectionToken, Signal, Provider } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import * as _koobiq_components_icon from '@koobiq/components/icon';
+import { KbqColorDirective } from '@koobiq/components/core';
+import { SafeResourceUrl, SafeHtml } from '@angular/platform-browser';
+import { Observable } from 'rxjs';
+
+interface KbqIconOptions {
+    viewBox?: string;
+    withCredentials?: boolean;
+}
+declare class KbqIconRegistry {
+    private readonly sanitizer;
+    private readonly document;
+    private readonly httpClient;
+    private readonly iconsConfig;
+    private readonly resolvers;
+    /** Individual icon configs, keyed by "namespace:name". */
+    private readonly iconConfigs;
+    /** Icon-set configs per namespace. */
+    private readonly iconSetConfigs;
+    /** In-progress URL fetches to dedupe concurrent requests. */
+    private readonly inProgressUrlFetches;
+    /** Cached parsed SVG sets, keyed by URL string. */
+    private readonly cachedIconSets;
+    constructor();
+    /** Registers an SVG icon by URL in the default namespace. */
+    addSvgIcon(name: string, url: SafeResourceUrl, options?: KbqIconOptions): void;
+    /** Registers an SVG icon from an inline HTML string in the default namespace. */
+    addSvgIconLiteral(name: string, literal: SafeHtml, options?: KbqIconOptions): void;
+    /** Registers an SVG icon by URL under the given namespace. */
+    addSvgIconInNamespace(namespace: string, name: string, url: SafeResourceUrl, options?: KbqIconOptions): void;
+    /** Registers an SVG icon from an inline HTML string under the given namespace. */
+    addSvgIconLiteralInNamespace(namespace: string, name: string, literal: SafeHtml, options?: KbqIconOptions): void;
+    /** Registers an SVG sprite file in the default namespace. Icons are looked up by their `symbol id`. */
+    addSvgIconSet(url: SafeResourceUrl, options?: KbqIconOptions): void;
+    /** Registers an SVG sprite file under the given namespace. Duplicate URLs are silently ignored. */
+    addSvgIconSetInNamespace(namespace: string, url: SafeResourceUrl, options?: KbqIconOptions): void;
+    /**
+     * Emits a cloned SVGElement for the given name.
+     * Accepts "namespace:name" syntax.
+     */
+    getNamedSvgIcon(name: string, namespace?: string): Observable<SVGElement>;
+    private cacheIcon;
+    private loadIcon;
+    private registerIconSet;
+    private loadIconFromSets;
+    private loadIconSet;
+    private extractIconFromSet;
+    private svgElementFromText;
+    private fetchUrl;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqIconRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<KbqIconRegistry>;
+}
+
+/**
+ * Renders an icon on the element it is applied to: a `@koobiq/icons` font glyph by default, or an inline
+ * `<svg>` when the name resolves through a configured `KbqIconRegistry`. A name that does not resolve
+ * falls back to the font class, and every later name is resolved again.
+ *
+ * The host is `aria-hidden` by default: an icon carries no text of its own, and in nearly every place the
+ * library and its consumers use one it repeats a label that is already there. A meaningful icon opts out
+ * with `aria-hidden="false"`, and then has to supply its own `role="img"` and `aria-label`.
+ */
+declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnChanges {
+    /**
+     * Host providing error state for `autoColor`, when the icon sits inside one (e.g. a form field).
+     *
+     * @docs-private
+     */
+    protected readonly errorStateContext: _koobiq_components_icon.KbqIconErrorStateContext | null;
+    protected readonly registry: KbqIconRegistry | null;
+    protected readonly destroyRef: DestroyRef;
+    protected readonly renderer: Renderer2;
+    /**
+     * Whether the icon is hidden from assistive technology. Left unbound, it falls back to
+     * `defaultAriaHidden`, which is `true` for a decorative icon and `false` for an interactive one.
+     */
+    readonly ariaHidden: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** Whether an icon of this kind is decorative when the caller says nothing. Overridden by subclasses. */
+    protected readonly defaultAriaHidden: boolean;
+    /** @docs-private */
+    protected readonly resolvedAriaHidden: _angular_core.Signal<string | null>;
+    /**
+     * Rendered size of the icon in pixels. Left unset, the size is read from the `_<px>` suffix of the
+     * icon name (`kbq-plus_16` → 16), which is the `@koobiq/icons` convention; a name without one is
+     * rendered at whatever size the surrounding styles give it.
+     */
+    readonly iconSize: _angular_core.InputSignalWithTransform<number | undefined, string | number | null | undefined>;
+    /**
+     * Whether the icon follows the error state of the host it sits in (a form field, for one), painting
+     * itself red while that host reports an error.
+     */
+    autoColor: boolean;
+    /**
+     * Whether the icon takes the error color whatever its `color` is. Set by a host that tints the icons
+     * it holds, such as `KbqEmptyState`.
+     */
+    hasError: boolean;
+    /**
+     * Whether `autoColor` takes the error color from the host's error state.
+     *
+     * @docs-private
+     */
+    protected get autoColorError(): boolean;
+    private readonly hostErrorState;
+    /** Name of an icon within a `@koobiq/icons`. Accepts "namespace:name" syntax. */
+    iconName: string | undefined;
+    /** @docs-private */
+    readonly autoColorInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly iconNameInput: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the host gets an inline `max-height` matching the icon size. Only the bare icon does: the
+     * button and the item size themselves through their own padding.
+     */
+    protected readonly appliesMaxHeight: boolean;
+    /**
+     * True when icon is being rendered as inline SVG.
+     *
+     * @docs-private
+     */
+    protected readonly svgIcon: _angular_core.WritableSignal<boolean>;
+    /**
+     * Name the inline SVG is resolved for, which is `iconName` however that was set.
+     *
+     * @docs-private
+     */
+    protected get svgIconName(): string | undefined;
+    /** Resolution of the inline SVG, replaced whenever the name changes. */
+    private svgIconSubscription;
+    /** The `<svg>` injected for the resolved name — or already on the host, tagged, from SSR. */
+    private injectedSvg;
+    /** Whether the content is initialized, which is when the inline SVG is first resolved. */
+    private contentInitialized;
+    constructor();
+    getHostElement(): HTMLElement;
+    /** An `<svg>` already on the host, tagged with the name it renders — e.g. one SSR left behind. */
+    private findTaggedSvg;
+    /**
+     * Sets the icon name from code and resolves its inline SVG again. Before the content is initialized,
+     * assigning `iconName` does the same.
+     *
+     * @docs-private
+     */
+    protected setIconName(name: string): void;
+    /** @docs-private */
+    updateMaxHeight(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterContentInit(): void;
+    /** Renders `svgIconName` as inline SVG when the registry knows it, dropping a resolution still pending. */
+    private resolveSvgIcon;
+    /** Injects the resolved `<svg>`, or drops back to the font class when the name did not resolve. */
+    private renderSvgIcon;
+    /** Sizes the injected `<svg>` and the host's `max-height` to the resolved icon size. */
+    private applyIconSize;
+    private resolveIconSize;
+    private parseIconSize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqIcon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "ariaHidden": { "alias": "aria-hidden"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "autoColorInput": { "alias": "autoColor"; "required": false; "isSignal": true; }; "iconNameInput": { "alias": "kbq-icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Size options for `KbqIconButton`.
+ * - `compact`: 16px icon with padding, 24×24px container.
+ * - `normal`: 24px icon, no padding.
+ */
+type KbqIconButtonSize = 'compact' | 'normal';
+/**
+ * An icon that acts as a button. Applied to a native `<button>` it only adds the styling; applied to any
+ * other element — `<i>` is what the library itself mostly uses — it also supplies the semantics the
+ * element does not have: `role="button"` and `aria-disabled`. It does not synthesize Enter/Space
+ * activation itself — attach a `(keydown.enter)`/`(keydown.space)` listener where it is used.
+ *
+ * It has no text of its own, so give it an `aria-label` (or an `aria-labelledby`); in dev mode it warns
+ * when it has neither.
+ *
+ * It extends `KbqIcon` for the rendering, but deliberately does not register under that DI token: a
+ * `contentChild(KbqIcon)` is looking for a decorative icon to position or tint, and an interactive
+ * control is not one. See the note on `KbqIconItem`.
+ */
+declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {
+    /** An icon button is interactive and exposes its own name, so it is not decorative by default. */
+    protected readonly defaultAriaHidden: boolean;
+    protected readonly focusMonitor: FocusMonitor;
+    /** Size of the icon button. */
+    readonly size: _angular_core.InputSignal<KbqIconButtonSize>;
+    /** @docs-private */
+    readonly iconNameInput: _angular_core.InputSignal<string | undefined>;
+    /** Position of the button in the tab order. A disabled button is taken out of it entirely. */
+    get tabindex(): number | null;
+    set tabindex(value: number | null);
+    private _tabindex;
+    /** Whether the button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    readonly disabledSignal: _angular_core.WritableSignal<boolean>;
+    /** The button sizes itself through its own padding, so it never gets the bare icon's `max-height`. */
+    protected readonly appliesMaxHeight: boolean;
+    /** @docs-private */
+    readonly tabindexInput: _angular_core.InputSignalWithTransform<number | null | undefined, string | number | null | undefined>;
+    /** @docs-private */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Whether the host already behaves like a button, so the browser activates it from the keyboard and
+     * announces it without help.
+     *
+     * Read on demand rather than captured in the constructor: `routerLink` and a bound `[attr.href]` both
+     * write the attribute during the update pass, so an anchor that navigates carries no `href` at all
+     * while directive constructors run.
+     */
+    private isNativelyActivated;
+    /**
+     * A link that navigates keeps its own role; anything else is a button only because this component
+     * says so, and has to be announced as one.
+     *
+     * Written through the renderer instead of a host binding, because the binding is evaluated in the
+     * parent's update pass — before `routerLink` has set its `href` — and on an `OnPush` component it may
+     * never be evaluated again to correct itself.
+     */
+    private applyButtonRole;
+    /**
+     * `KbqIcon` renders a decorative glyph, so an icon button carries no text. Without an
+     * `aria-label`/`aria-labelledby`/`title` it has no accessible name at all (AXE `button-name`).
+     *
+     * A host that opted into `aria-hidden="true"` is exempt: assistive technology never reaches it, so it
+     * has nothing to be named for. `KbqStepper` and the datepicker toggle are both built that way — a
+     * mouse-only affordance beside a control that already carries the keyboard interaction.
+     */
+    private warnIfMissingAccessibleName;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqIconButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconNameInput": { "alias": "kbq-icon-button"; "required": false; "isSignal": true; }; "tabindexInput": { "alias": "tabindex"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Narrow contract that lets `KbqIcon` react to a host's error state (e.g. `autoColor`) without
+ * depending on the host's concrete class.
+ *
+ * @docs-private
+ */
+interface KbqIconErrorStateContext {
+    /** Whether the host is currently in an error state. */
+    readonly errorState: Signal<boolean>;
+}
+/**
+ * Injection token used by `KbqIcon` to look up its `KbqIconErrorStateContext`.
+ *
+ * @docs-private
+ */
+declare const KBQ_ICON_ERROR_STATE_CONTEXT: InjectionToken<KbqIconErrorStateContext>;
+/**
+ * Utility provider for `KBQ_ICON_ERROR_STATE_CONTEXT`, built from a factory that resolves the current host's `KbqIconErrorStateContext`.
+ *
+ * @docs-private
+ */
+declare const kbqIconErrorStateContextFactoryProvider: (factory: () => KbqIconErrorStateContext) => Provider;
+
+/**
+ * An icon on a filled round background — the status badge of an alert or an empty state. Decorative like
+ * `KbqIcon`, and hidden from assistive technology by the same default.
+ *
+ * Host metadata is inherited from `KbqIcon` through `ɵɵInheritDefinitionFeature`; DI tokens are not, so a
+ * `contentChild(KbqIcon)` does not match an icon item. That is deliberate — a host that wants both asks
+ * for both, the way `KbqAlert` does, and telling them apart is what lets it report two projected icons.
+ */
+declare class KbqIconItem extends KbqIcon {
+    /** The item sizes itself through its own padding, so it never gets the bare icon's `max-height`. */
+    protected readonly appliesMaxHeight: boolean;
+    /** @docs-private */
+    readonly iconNameInput: _angular_core.InputSignal<string | undefined>;
+    /** Whether the background is the translucent "fade" variant of the color rather than the solid one. */
+    readonly fade: _angular_core.InputSignal<boolean>;
+    /** Whether the item is rendered at the larger of its two sizes. */
+    readonly big: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqIconItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "iconNameInput": { "alias": "kbq-icon-item"; "required": false; "isSignal": true; }; "fade": { "alias": "fade"; "required": false; "isSignal": true; }; "big": { "alias": "big"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface KbqIconsConfig {
+    /** URL to the SVG sprite file. Must be served as a static asset. */
+    spriteUrl: string;
+    /** Optional namespace to register the sprite under. */
+    namespace?: string;
+}
+declare const KBQ_ICONS_CONFIG: InjectionToken<KbqIconsConfig[]>;
+/**
+ * A function that resolves an icon name to either an inline SVG string or a URL string.
+ * Return `null` to indicate this resolver does not handle the given name.
+ */
+type KbqIconResolver = (name: string) => string | null;
+/**
+ * Multi-valued injection token for icon resolver functions.
+ * Resolvers are tried in registration order; the first non-null result wins.
+ */
+declare const KBQ_ICON_RESOLVER: InjectionToken<KbqIconResolver[]>;
+/** Configures the icon registry to load icons from one or more SVG sprite assets. */
+declare function kbqIconsProvider(...sprites: KbqIconsConfig[]): Provider;
+/**
+ * Registers a resolver function that maps icon names to SVG strings or URLs.
+ * Multiple resolvers can be registered; they are tried in registration order.
+ */
+declare function kbqIconsResolverProvider(resolver: KbqIconResolver): Provider;
+/**
+ * Registers a name→URL dictionary as an icon resolver. Values are fetched at runtime through `HttpClient`.
+ *
+ * A value starting with `<` is taken as inline markup and passed through Angular's HTML sanitizer,
+ * which drops `<svg>` wholesale — register inline icons with
+ * `KbqIconRegistry.addSvgIconLiteral(name, sanitizer.bypassSecurityTrustHtml(svg))` instead, where the
+ * markup is a `SafeHtml` the application has explicitly vouched for.
+ *
+ * @example
+ * ```ts
+ * kbqIconsDictProvider({ 'chevron-down-s_16': '/assets/icons/chevron-down-s_16.svg' })
+ * ```
+ */
+declare function kbqIconsDictProvider(dict: Record<string, string>): Provider;
+
+declare class KbqIconModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqIconModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqIconModule, never, [typeof KbqIcon, typeof KbqIconButton, typeof KbqIconItem], [typeof KbqIcon, typeof KbqIconButton, typeof KbqIconItem]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqIconModule>;
+}
+
+export { KBQ_ICONS_CONFIG, KBQ_ICON_ERROR_STATE_CONTEXT, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconErrorStateContextFactoryProvider, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
+export type { KbqIconButtonSize, KbqIconErrorStateContext, KbqIconOptions, KbqIconResolver, KbqIconsConfig };

package/{inline-edit/index.d.ts → types/koobiq-components-inline-edit.d.ts}

@@ -1,8 +1,9 @@
-import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
+import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, ElementRef, TemplateRef } from '@angular/core';
-import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
 import { KbqSelect } from '@koobiq/components/select';
@@ -41,14 +42,6 @@ interface KbqInlineEditSaveErrorContext<E = any> {
 type KbqInlineEditSaveErrorHandler = (context: KbqInlineEditSaveErrorContext) => void;
 /** Reports every failed save the same way across the application. Declare it in the root injector. */
 declare const KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER: InjectionToken<KbqInlineEditSaveErrorHandler>;
-/** @docs-private */
-declare class KbqFocusRegionItem {
-    readonly tabOut: _angular_core.OutputEmitterRef<KeyboardEvent>;
-    protected isFocused: boolean;
-    protected onTabOut(event: KeyboardEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFocusRegionItem, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqFocusRegionItem, "[kbqFocusRegionItem]", ["kbqFocusRegionItem"], {}, { "tabOut": "tabOut"; }, never, never, true, never>;
-}
 /** Directive for easy using styles of inline edit placeholder publicly. */
 declare class KbqInlineEditPlaceholder {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqInlineEditPlaceholder, never>;
@@ -71,16 +64,22 @@ declare class KbqInlineEditMenu {
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
 declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInlineEditSaveRecovery {
-    /** Texts of the save status announcements. */
+    /** Accessible names for the icon-only save/cancel buttons and for the view mode itself. */
     protected readonly a11yLocaleConfiguration: _angular_core.Signal<_koobiq_components_core.KbqA11yLocaleConfiguration>;
     private readonly overlay;
+    private readonly overlayLayers;
     private readonly document;
     private readonly window;
     private readonly resizeObserver;
     protected readonly elementRef: ElementRef<HTMLElement>;
     private readonly ngZone;
+    private readonly pendingTasks;
     private readonly scrollDispatcher;
     private readonly destroyRef;
+    private readonly injector;
+    private readonly contentObserver;
+    private readonly interactivityChecker;
+    private readonly focusMonitor;
     /**
      * The validation tooltip is anchored inside the edit-mode overlay — an overlay inside another
      * overlay. Its default `close()` scroll strategy would close it the moment either overlay's
@@ -88,24 +87,24 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
      * invalid control into view), so it's overridden to `reposition()` here — passed directly as a
      * per-instance override to this tooltip's `[kbqTooltipScrollStrategy]` input, rather than a DI
      * override, so it doesn't leak into any `kbqTooltip` in projected content.
+     *
      * @docs-private
      */
     protected readonly validationTooltipScrollStrategy: () => ScrollStrategy;
     /**
-     * Whether to show save/cancel action buttons in edit mode.
-     * @default false
+     * Whether to show save/cancel action buttons in edit mode. Defaults to `false`.
      */
     readonly showActions: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Whether to automatically show validation error tooltips on save attempts.
-     * @default true
+     * Has no effect unless `validationTooltip` is set. Defaults to `true`.
      */
     readonly showTooltipOnError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Custom validation tooltip message. */
-    readonly validationTooltip: _angular_core.InputSignal<string | TemplateRef<any> | undefined>;
+    readonly validationTooltip: _angular_core.InputSignal<string | TemplateRef<unknown> | undefined>;
     /**
      * Disables the component, preventing interaction and mode switching. Only allows menu dropdown.
-     * @default false
+     * Defaults to `false`.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Custom width in pixels for the edit mode overlay. Auto-calculated if not set. */
@@ -117,7 +116,12 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     /** Handler function to retrieve the current value */
     readonly getValueHandler: _angular_core.InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
-    readonly setValueHandler: _angular_core.InputSignal<((value: any) => void) | undefined>;
+    readonly setValueHandler: _angular_core.InputSignal<((value: unknown) => void) | undefined>;
+    /**
+     * Accessible name of the control that opens the editor. Defaults to the localized "Edit"; set a
+     * field-specific name where the projected value alone doesn't say what is being edited.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
     /**
      * Whether the value still equals the one the editor opened with, in which case `saveHandler` is not called.
      * The default suits text and numbers; bind your own for arrays and objects, or `null` to send every time.
@@ -141,17 +145,22 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
      * Override to replace or extend the default list.
      *
      * @example
-     * `<kbq-inline-edit [interactiveSelectors]="['a', 'kbq-tag', 'button']">`
+     * ```html
+     * <kbq-inline-edit [interactiveSelectors]="['a', 'kbq-tag', 'button']">
+     * ```
      */
     readonly interactiveSelectors: _angular_core.InputSignal<string[]>;
     /** Emitted when the inline edit is saved successfully. */
-    protected readonly saved: _angular_core.OutputEmitterRef<void>;
+    readonly saved: _angular_core.OutputEmitterRef<void>;
     /** Emitted when the inline edit is canceled and changes are discarded. */
-    protected readonly canceled: _angular_core.OutputEmitterRef<void>;
+    readonly canceled: _angular_core.OutputEmitterRef<void>;
     /** Emitted when a `saveHandler` request fails. Silent once the row is destroyed; `saveErrorHandler` is not. */
-    protected readonly saveError: _angular_core.OutputEmitterRef<KbqInlineEditSaveErrorContext<any>>;
-    /** Emitted when mode switched to edit/view */
-    protected readonly modeChange: _angular_core.OutputEmitterRef<KbqInlineEditMode>;
+    readonly saveError: _angular_core.OutputEmitterRef<KbqInlineEditSaveErrorContext<any>>;
+    /**
+     * Current mode. Two-way bindable: `[(mode)]` opens and closes the editor programmatically, and
+     * `(modeChange)` alone reports every transition.
+     */
+    readonly mode: _angular_core.ModelSignal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly menu: _angular_core.Signal<KbqInlineEditMenu | undefined>;
     /** @docs-private */
@@ -165,27 +174,31 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     /**
      * Whether edit mode contains a single-value select. When true, edit mode shows only the
      * dropdown panel instead of a bordered field - see the "Select-style editor" example.
+     *
      * @docs-private
      */
     protected readonly isSingleSelect: _angular_core.Signal<boolean>;
     /** @docs-private */
-    protected overlayOrigin: HTMLElement;
-    /** @docs-private */
     protected readonly tooltipTrigger: _angular_core.Signal<KbqTooltipTrigger>;
     /** @docs-private */
     protected readonly viewContainer: _angular_core.Signal<ElementRef<HTMLElement>>;
     /** @docs-private */
-    protected readonly overlayDir: _angular_core.Signal<CdkConnectedOverlay>;
-    /** @docs-private */
-    protected readonly regionItems: _angular_core.Signal<readonly KbqFocusRegionItem[]>;
+    protected readonly viewContent: _angular_core.Signal<ElementRef<HTMLElement>>;
+    /** Present only while the view content is interactive, where it stands in as the field's tab stop. */
+    protected readonly focusAnchor: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** @docs-private */
-    protected readonly mode: _angular_core.WritableSignal<KbqInlineEditMode>;
+    protected readonly overlayDir: _angular_core.Signal<CdkConnectedOverlay>;
     /** @docs-private */
     protected readonly overlayWidth: _angular_core.WritableSignal<string | number>;
-    /** @docs-private */
-    protected readonly scrollStrategy: _angular_core.WritableSignal<ScrollStrategy>;
-    /** @docs-private */
-    readonly modeAsReadonly: _angular_core.Signal<KbqInlineEditMode>;
+    /** Distance the panel is pulled up by so that it covers the view it replaces. */
+    protected readonly overlayOffsetY: _angular_core.WritableSignal<number>;
+    /**
+     * Built on first read rather than in the field initializer: a list of inline edits would otherwise
+     * allocate one strategy per row, including the rows nobody ever opens.
+     *
+     * @docs-private
+     */
+    protected readonly scrollStrategy: _angular_core.Signal<_angular_cdk_overlay.RepositionScrollStrategy>;
     private readonly saveStatusSource;
     /** State of the background save started by `saveHandler`. */
     readonly saveStatus: _angular_core.Signal<KbqInlineEditSaveStatus>;
@@ -194,10 +207,13 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     /**
      * Both save states are otherwise conveyed by colour alone. `aria-busy` cannot carry the first one: it is set
      * on the row, which contains this region, and that tells assistive tech to hold the announcement back.
+     *
      * @docs-private
      */
     protected readonly saveStatusMessage: _angular_core.Signal<string>;
     /** @docs-private */
+    protected readonly overlayOrigin: _angular_core.Signal<HTMLElement>;
+    /** @docs-private */
     protected readonly className: _angular_core.Signal<string>;
     /** @docs-private */
     protected readonly isEditMode: _angular_core.Signal<boolean>;
@@ -207,9 +223,21 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     protected readonly anchorFocused: _angular_core.WritableSignal<boolean>;
     /** @docs-private */
     protected readonly tabIndex: _angular_core.Signal<0 | -1>;
+    /**
+     * Widget role of the view content. Dropped once the projected content is interactive, because a
+     * `button` wrapping a link or a tag is a `nested-interactive` violation — the focus anchor carries
+     * the semantics in that case instead.
+     *
+     * @docs-private
+     */
+    protected readonly viewContentRole: _angular_core.Signal<"button" | null>;
+    /** Falls back on an empty `aria-label` too, which would otherwise leave the control with no name. */
+    protected readonly accessibleName: _angular_core.Signal<string>;
     /** @docs-private */
     protected readonly placements: typeof PopUpPlacements;
     /** @docs-private */
+    protected readonly animationsDisabled: boolean;
+    /** @docs-private */
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
     /** Value sent by the in-flight `saveHandler` request, which becomes `lastSavedValue` once it succeeds. */
@@ -219,6 +247,10 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     private destroyed;
     /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
     private validationTooltipScrollHandle;
+    /** How edit mode was entered, so leaving it restores the same focus style. */
+    private editModeOrigin;
+    /** Set while Tab-chaining, where the next inline edit — not this one — has to end up focused. */
+    private chainingToNextInlineEdit;
     constructor();
     /** Manually switch mode. Does nothing while a `saveHandler` request is in flight. */
     toggleMode(): void;
@@ -226,6 +258,7 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
      * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
      * anchor its overlay to this element instead of the form-field's own container.
      * When no override is needed, the form-field falls back to its default.
+     *
      * @docs-private
      */
     getConnectedOverlayOrigin(): ElementRef | undefined;
@@ -259,43 +292,73 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
      * a while — so showing the tooltip right away would anchor its overlay to a stale, pre-scroll position.
      * `scrollend` reports when the scroll actually completes; the timeout is a fallback for browsers without
      * `scrollend` support and cases where nothing ends up scrolling.
-     *
-     * TODO(DS-5420): "scroll an element into view, then act once settled" isn't inline-edit-specific — worth
-     * extracting into `packages/components/core` in a follow-up. Kept local to this fix for now.
      */
     private showValidationTooltip;
     private showValidationTooltipIfStillInvalid;
     /** @docs-private */
     protected cancel(): void;
     /** @docs-private */
+    protected onPanelEscape(event: Event): void;
+    /** @docs-private */
     protected onOverlayKeydown(event: KeyboardEvent): void;
+    /**
+     * Tab off the panel's first or last tabbable control saves and moves to the tab stop next to the field.
+     *
+     * @docs-private
+     */
+    protected onPanelTab(event: Event, panel: HTMLElement, backwards: boolean): void;
     /**
      * Block propagation of overlay outside click.
      * Used to prevent reopening when target is inline edit itself.
+     *
      * @docs-private
      */
     protected onOverlayOutsideClick($event: Event): void;
-    private detectInteractiveContent;
-    private isInteractiveElement;
+    /** A select's options sit in an overlay of their own, so the panel's `(keydown.tab)` never fires. */
+    private watchTabOutsideThePanel;
+    private getTabbableElements;
+    private isTabStop;
+    /** Offers focus to each next tab stop in turn: `isTabbable` passes hidden controls that then refuse it. */
+    private focusAdjacentTabStop;
+    /** The tab stop next to `from` in document order, walked out of the host rather than collected page-wide. */
+    private findAdjacentTabStop;
     /**
-     * Sets up Tab key listeners on region items.
-     * Single item: Tab moves to next edit.
-     * Multiple items: Shift+Tab on first or Tab on last moves to next edit.
+     * Takes focus back when leaving edit mode would otherwise drop it on `<body>`: the element that was
+     * focused when the overlay opened may have been destroyed meanwhile, which is exactly the case CDK's
+     * `cdkTrapFocusAutoCapture` restore cannot handle, so the target is resolved after the view is back.
      */
-    private setOverlayKeydownListener;
-    private saveAndFocusNextInlineEdit;
+    private restoreFocus;
+    /**
+     * Runs `fn` in the next task, unless the inline edit is gone by then, and keeps the application unstable until
+     * then: without zone.js nothing else would make `whenStable` wait for a timer.
+     */
+    private defer;
+    /** Focuses the tab stop of view mode, resolved at call time: the focus anchor is a new node on every return. */
+    private focusViewTabStop;
+    /** Brings focus back into the editor a rejected value keeps open; only the select path can lose it. */
+    private focusRejectedEditor;
+    private detectInteractiveContent;
+    private isInteractiveElement;
+    /** Saves and hands focus to the tab stop next to the field, opening it when it belongs to another inline edit. */
+    private saveAndFocusAdjacentTabStop;
     /** Whether saving would send back the value the editor opened with. */
     private isUnchanged;
+    /**
+     * Whether any projected control rejects its current value. Read from the control rather than from
+     * `KbqFormField.invalid`, which is the cached `ErrorStateMatcher` verdict — `touched || submitted` —
+     * and so reports a pristine invalid control as valid. Error *styling* still follows the matcher.
+     */
     private isInvalid;
     private getValue;
     private setValue;
     private coerceControl;
+    private getFormControl;
     private setOverlayWidth;
     private openPanel;
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "saveHandler": { "alias": "saveHandler"; "required": false; "isSignal": true; }; "saveErrorHandler": { "alias": "saveErrorHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "saveError": "saveError"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "saveHandler": { "alias": "saveHandler"; "required": false; "isSignal": true; }; "saveErrorHandler": { "alias": "saveErrorHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "saveError": "saveError"; "mode": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }, { directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
 declare class KbqInlineEditModule {
@@ -304,5 +367,5 @@ declare class KbqInlineEditModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqInlineEditModule>;
 }
 
-export { KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, KbqFocusRegionItem, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder, kbqInlineEditSaveProgressDelay, kbqInlineEditSaveProgressMinimumDuration };
+export { KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder, kbqInlineEditSaveProgressDelay, kbqInlineEditSaveProgressMinimumDuration };
 export type { KbqInlineEditMode, KbqInlineEditSaveErrorContext, KbqInlineEditSaveErrorHandler, KbqInlineEditSaveHandler, KbqInlineEditSaveRecovery, KbqInlineEditSaveStatus };