@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-inline-edit.mjs

@@ -1,31 +1,25 @@
-import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/cdk/a11y';
-import { CdkTrapFocus, CdkMonitorFocus } from '@angular/cdk/a11y';
+import { InteractivityChecker, FocusMonitor, CdkTrapFocus, CdkMonitorFocus } from '@angular/cdk/a11y';
 import { hasModifierKey } from '@angular/cdk/keycodes';
+import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Overlay, ScrollDispatcher, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, output, Directive, inject, ElementRef, NgZone, DestroyRef, input, booleanAttribute, numberAttribute, contentChild, computed, contentChildren, viewChild, viewChildren, signal, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, Directive, inject, ElementRef, NgZone, PendingTasks, DestroyRef, Injector, input, booleanAttribute, numberAttribute, output, model, contentChild, computed, contentChildren, viewChild, signal, effect, untracked, isWritableSignal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { AbstractControl, NgControl } from '@angular/forms';
-import * as i2 from '@koobiq/components/button';
+import * as i3 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import { KbqAnimationDurations, KbqAnimationCurves, kbqInjectA11yLocaleConfiguration, KBQ_WINDOW, isElement, PopUpPlacements, KbqComponentColors, runCompareWith, KBQ_CONNECTED_OVERLAY_ORIGIN } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/core';
+import { KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KBQ_OVERLAY_LAYERS, KBQ_WINDOW, isElement, PopUpPlacements, kbqAnimationsDisabled, KbqComponentColors, runCompareWith, KBQ_CONNECTED_OVERLAY_ORIGIN } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
 import { KbqIcon } from '@koobiq/components/icon';
 import { KbqSelect } from '@koobiq/components/select';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
-import { skip, merge, of, timer, concat } from 'rxjs';
-import { take, takeUntil, map, defaultIfEmpty, catchError, takeWhile, concatMap, ignoreElements } from 'rxjs/operators';
+import { startWith, debounceTime, of, timer, merge, concat } from 'rxjs';
+import { take, map, defaultIfEmpty, catchError, takeWhile, concatMap, ignoreElements, takeUntil } from 'rxjs/operators';
 
-const KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION = trigger('panelAnimation', [
-    transition(':enter', [
-        style({ transform: 'translateY(100%)', opacity: 0 }),
-        animate(`${KbqAnimationDurations.Instant} ${KbqAnimationCurves.DecelerationCurve}`, style({ transform: 'translateY(0%)', opacity: 1 }))
-    ])
-]);
 const baseClass = 'kbq-inline-edit';
 /**
  * Fallback delay before showing the validation tooltip if `scrollend` never fires — e.g. the browser doesn't
@@ -38,41 +32,20 @@ const ENTER_ACTIVATED_SELECTORS = 'button,input[type="button"],input[type="submi
 const kbqInlineEditSaveProgressDelay = 100;
 /** Minimum time the save progress state stays once it has appeared. */
 const kbqInlineEditSaveProgressMinimumDuration = 300;
+/**
+ * Every live inline edit, keyed by its host element, so Tab-chaining can call the neighbour's public API
+ * instead of driving it through the DOM with a fabricated `KeyboardEvent`.
+ */
+const inlineEditRegistry = new WeakMap();
+const isValueAccessor = (control) => typeof control.writeValue === 'function';
 /** Reports every failed save the same way across the application. Declare it in the root injector. */
 const KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER = new InjectionToken('KbqInlineEditSaveErrorHandler');
-/** @docs-private */
-class KbqFocusRegionItem {
-    constructor() {
-        this.tabOut = output();
-        this.isFocused = false;
-    }
-    onTabOut(event) {
-        if (this.isFocused) {
-            this.tabOut.emit(event);
-        }
-        this.isFocused = !this.isFocused;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFocusRegionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqFocusRegionItem, isStandalone: true, selector: "[kbqFocusRegionItem]", outputs: { tabOut: "tabOut" }, host: { listeners: { "focusin": "isFocused = true", "keydown.tab": "onTabOut($event)", "keydown.shift.tab": "onTabOut($event)" } }, exportAs: ["kbqFocusRegionItem"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqFocusRegionItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqFocusRegionItem]',
-                    host: {
-                        '(focusin)': 'isFocused = true',
-                        '(keydown.tab)': 'onTabOut($event)',
-                        '(keydown.shift.tab)': 'onTabOut($event)'
-                    },
-                    exportAs: 'kbqFocusRegionItem'
-                }]
-        }], propDecorators: { tabOut: [{ type: i0.Output, args: ["tabOut"] }] } });
 /** Directive for easy using styles of inline edit placeholder publicly. */
 class KbqInlineEditPlaceholder {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqInlineEditPlaceholder, isStandalone: true, selector: "[kbqInlineEditPlaceholder]", host: { classAttribute: "kbq-inline-edit__placeholder" }, exportAs: ["kbqInlineEditPlaceholder"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqInlineEditPlaceholder, isStandalone: true, selector: "[kbqInlineEditPlaceholder]", host: { classAttribute: "kbq-inline-edit__placeholder" }, exportAs: ["kbqInlineEditPlaceholder"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqInlineEditPlaceholder]',
@@ -92,10 +65,10 @@ class KbqInlineEditMenu {
         /** @docs-private */
         this.dropdownTrigger = inject(KbqDropdownTrigger, { optional: true });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqInlineEditMenu, isStandalone: true, selector: "[kbqInlineEditMenu]", host: { attributes: { "role": "button" }, listeners: { "click": "$event.stopPropagation()", "keydown.enter": "$event.stopPropagation()", "keydown.space": "$event.stopPropagation()" }, properties: { "class.kbq-active": "dropdownTrigger?.opened" }, classAttribute: "kbq-inline-edit__menu" }, exportAs: ["kbqInlineEditMenu"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqInlineEditMenu, isStandalone: true, selector: "[kbqInlineEditMenu]", host: { attributes: { "role": "button" }, listeners: { "click": "$event.stopPropagation()", "keydown.enter": "$event.stopPropagation()", "keydown.space": "$event.stopPropagation()" }, properties: { "class.kbq-active": "dropdownTrigger?.opened" }, classAttribute: "kbq-inline-edit__menu" }, exportAs: ["kbqInlineEditMenu"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqInlineEditMenu]',
@@ -117,16 +90,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class KbqInlineEdit {
     constructor() {
-        /** Texts of the save status announcements. */
-        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
+        /** Accessible names for the icon-only save/cancel buttons and for the view mode itself. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
         this.overlay = inject(Overlay);
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
         this.document = inject(DOCUMENT);
         this.window = inject(KBQ_WINDOW);
         this.resizeObserver = inject(SharedResizeObserver);
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
+        this.pendingTasks = inject(PendingTasks);
         this.scrollDispatcher = inject(ScrollDispatcher);
         this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        this.contentObserver = inject(ContentObserver);
+        this.interactivityChecker = inject(InteractivityChecker);
+        this.focusMonitor = inject(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
@@ -134,120 +113,135 @@ class KbqInlineEdit {
          * 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
          */
         this.validationTooltipScrollStrategy = () => this.overlay.scrollStrategies.reposition();
         /**
-         * 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`.
          */
-        this.showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.showActions = input(false, { ...(ngDevMode ? { debugName: "showActions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether to automatically show validation error tooltips on save attempts.
-         * @default true
+         * Has no effect unless `validationTooltip` is set. Defaults to `true`.
          */
-        this.showTooltipOnError = input(true, ...(ngDevMode ? [{ debugName: "showTooltipOnError", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.showTooltipOnError = input(true, { ...(ngDevMode ? { debugName: "showTooltipOnError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Custom validation tooltip message. */
-        this.validationTooltip = input(...(ngDevMode ? [undefined, { debugName: "validationTooltip" }] : []));
+        this.validationTooltip = input(...(ngDevMode ? [undefined, { debugName: "validationTooltip" }] : /* istanbul ignore next */ []));
         /**
          * Disables the component, preventing interaction and mode switching. Only allows menu dropdown.
-         * @default false
+         * Defaults to `false`.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Custom width in pixels for the edit mode overlay. Auto-calculated if not set. */
-        this.editModeWidth = input(undefined, ...(ngDevMode ? [{ debugName: "editModeWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.editModeWidth = input(undefined, { ...(ngDevMode ? { debugName: "editModeWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** User-defined tooltip placement */
-        this.tooltipPlacement = input(...(ngDevMode ? [undefined, { debugName: "tooltipPlacement" }] : []));
+        this.tooltipPlacement = input(...(ngDevMode ? [undefined, { debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []));
         /** Classes to be passed to the inline edit panel. */
-        this.overlayPanelClass = input('', ...(ngDevMode ? [{ debugName: "overlayPanelClass" }] : []));
+        this.overlayPanelClass = input('', ...(ngDevMode ? [{ debugName: "overlayPanelClass" }] : /* istanbul ignore next */ []));
         /** Handler function to retrieve the current value */
-        this.getValueHandler = input(...(ngDevMode ? [undefined, { debugName: "getValueHandler" }] : []));
+        this.getValueHandler = input(...(ngDevMode ? [undefined, { debugName: "getValueHandler" }] : /* istanbul ignore next */ []));
         /** Handler function to update the value */
-        this.setValueHandler = input(...(ngDevMode ? [undefined, { debugName: "setValueHandler" }] : []));
+        this.setValueHandler = input(...(ngDevMode ? [undefined, { debugName: "setValueHandler" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         /**
          * 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.
          * A failed save is always retried, however the values compare.
          */
-        this.compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
+        this.compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
         /**
          * Saves a valid value in the background: edit mode closes right away and view mode reports how the request
          * went. Without it, a valid value is saved immediately.
          */
-        this.saveHandler = input(...(ngDevMode ? [undefined, { debugName: "saveHandler" }] : []));
+        this.saveHandler = input(...(ngDevMode ? [undefined, { debugName: "saveHandler" }] : /* istanbul ignore next */ []));
         /**
          * Reaction to a failed save for this inline edit alone. Defaults to `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`;
          * bind `null` to leave it without one.
          */
-        this.saveErrorHandler = input(inject(KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, { optional: true }), ...(ngDevMode ? [{ debugName: "saveErrorHandler" }] : []));
+        this.saveErrorHandler = input(inject(KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, { optional: true }), ...(ngDevMode ? [{ debugName: "saveErrorHandler" }] : /* istanbul ignore next */ []));
         /** Customizable function that checks if saving on enter available. */
         this.canSaveOnEnter = input((event) => {
             // A control that runs its own action on Enter would otherwise fire it and save at the same time.
             if (isElement(event.target) && event.target.closest(ENTER_ACTIVATED_SELECTORS))
                 return false;
             return hasModifierKey(event, 'ctrlKey', 'metaKey') || !(event.target instanceof HTMLTextAreaElement);
-        }, ...(ngDevMode ? [{ debugName: "canSaveOnEnter" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "canSaveOnEnter" }] : /* istanbul ignore next */ []));
         /**
          * CSS selectors for elements in view mode that should handle clicks instead of opening edit mode.
          * 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']">
+         * ```
          */
-        this.interactiveSelectors = input(['a', 'kbq-tag'], ...(ngDevMode ? [{ debugName: "interactiveSelectors" }] : []));
+        this.interactiveSelectors = input(['a', 'kbq-tag'], ...(ngDevMode ? [{ debugName: "interactiveSelectors" }] : /* istanbul ignore next */ []));
         /** Emitted when the inline edit is saved successfully. */
         this.saved = output();
         /** Emitted when the inline edit is canceled and changes are discarded. */
         this.canceled = output();
         /** Emitted when a `saveHandler` request fails. Silent once the row is destroyed; `saveErrorHandler` is not. */
         this.saveError = output();
-        /** Emitted when mode switched to edit/view */
-        this.modeChange = output();
+        /**
+         * Current mode. Two-way bindable: `[(mode)]` opens and closes the editor programmatically, and
+         * `(modeChange)` alone reports every transition.
+         */
+        this.mode = model('view', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.menu = contentChild(KbqInlineEditMenu, ...(ngDevMode ? [{ debugName: "menu" }] : []));
+        this.menu = contentChild(KbqInlineEditMenu, ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.label = contentChild(KbqLabel, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = contentChild(KbqLabel, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.formFieldRef = computed(() => this.formFieldRefList()[0], ...(ngDevMode ? [{ debugName: "formFieldRef" }] : []));
+        this.formFieldRef = computed(() => this.formFieldRefList()[0], ...(ngDevMode ? [{ debugName: "formFieldRef" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.formFieldRefList = contentChildren(KbqFormField, ...(ngDevMode ? [{ debugName: "formFieldRefList", descendants: true }] : [{ descendants: true }]));
+        this.formFieldRefList = contentChildren(KbqFormField, { ...(ngDevMode ? { debugName: "formFieldRefList" } : /* istanbul ignore next */ {}), descendants: true });
         /** @docs-private */
-        this.selectRef = contentChild(KbqSelect, ...(ngDevMode ? [{ debugName: "selectRef", descendants: true }] : [{ descendants: true }]));
+        this.selectRef = contentChild(KbqSelect, { ...(ngDevMode ? { debugName: "selectRef" } : /* istanbul ignore next */ {}), descendants: true });
         /**
          * 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
          */
         this.isSingleSelect = computed(() => {
             const select = this.selectRef();
             return !!select && !select.multiple && !select.multiline();
-        }, ...(ngDevMode ? [{ debugName: "isSingleSelect" }] : []));
-        /** @docs-private */
-        this.overlayOrigin = this.elementRef.nativeElement;
+        }, ...(ngDevMode ? [{ debugName: "isSingleSelect" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.tooltipTrigger = viewChild.required(KbqTooltipTrigger);
         /** @docs-private */
         this.viewContainer = viewChild.required('viewContainer');
         /** @docs-private */
-        this.overlayDir = viewChild.required(CdkConnectedOverlay);
-        /** @docs-private */
-        this.regionItems = viewChildren(KbqFocusRegionItem, ...(ngDevMode ? [{ debugName: "regionItems" }] : []));
-        /** @docs-private */
-        this.mode = signal('view', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.viewContent = viewChild.required('viewContent');
+        /** Present only while the view content is interactive, where it stands in as the field's tab stop. */
+        this.focusAnchor = viewChild('focusAnchor', ...(ngDevMode ? [{ debugName: "focusAnchor" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.overlayWidth = signal('', ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
-        /** @docs-private */
-        this.scrollStrategy = signal(this.overlay.scrollStrategies.reposition(), ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
+        this.overlayDir = viewChild.required(CdkConnectedOverlay);
         /** @docs-private */
-        this.modeAsReadonly = computed(() => this.mode(), ...(ngDevMode ? [{ debugName: "modeAsReadonly" }] : []));
-        this.saveStatusSource = signal('idle', ...(ngDevMode ? [{ debugName: "saveStatusSource" }] : []));
+        this.overlayWidth = signal('', ...(ngDevMode ? [{ debugName: "overlayWidth" }] : /* istanbul ignore next */ []));
+        /** Distance the panel is pulled up by so that it covers the view it replaces. */
+        this.overlayOffsetY = signal(0, ...(ngDevMode ? [{ debugName: "overlayOffsetY" }] : /* istanbul ignore next */ []));
+        /**
+         * 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
+         */
+        this.scrollStrategy = computed(() => this.overlay.scrollStrategies.reposition(), ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+        this.saveStatusSource = signal('idle', ...(ngDevMode ? [{ debugName: "saveStatusSource" }] : /* istanbul ignore next */ []));
         /** State of the background save started by `saveHandler`. */
         this.saveStatus = this.saveStatusSource.asReadonly();
         /** @docs-private */
-        this.isSaving = computed(() => this.saveStatus() === 'pending' || this.saveStatus() === 'progress', ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+        this.isSaving = computed(() => this.saveStatus() === 'pending' || this.saveStatus() === 'progress', ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
         /**
          * 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
          */
         this.saveStatusMessage = computed(() => {
@@ -255,15 +249,17 @@ class KbqInlineEdit {
             if (this.saveStatus() === 'progress')
                 return a11y.saving;
             return this.saveStatus() === 'error' ? a11y.saveFailed : '';
-        }, ...(ngDevMode ? [{ debugName: "saveStatusMessage" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "saveStatusMessage" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.overlayOrigin = computed(() => this.label() ? this.viewContainer().nativeElement : this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.className = computed(() => `${baseClass}_${this.mode()}`, ...(ngDevMode ? [{ debugName: "className" }] : []));
+        this.className = computed(() => `${baseClass}_${this.mode()}`, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.isEditMode = computed(() => this.mode() === 'edit', ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+        this.isEditMode = computed(() => this.mode() === 'edit', ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.hasInteractiveContent = signal(false, ...(ngDevMode ? [{ debugName: "hasInteractiveContent" }] : []));
+        this.hasInteractiveContent = signal(false, ...(ngDevMode ? [{ debugName: "hasInteractiveContent" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.anchorFocused = signal(false, ...(ngDevMode ? [{ debugName: "anchorFocused" }] : []));
+        this.anchorFocused = signal(false, ...(ngDevMode ? [{ debugName: "anchorFocused" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.tabIndex = computed(() => {
             // Saving is deliberately absent: like `kbq-dropdown-item`, a row in progress keeps its place in the tab
@@ -271,38 +267,75 @@ class KbqInlineEdit {
             if (this.isEditMode() || this.disabled() || this.hasInteractiveContent())
                 return -1;
             return 0;
-        }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * 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
+         */
+        this.viewContentRole = computed(() => (this.hasInteractiveContent() ? null : 'button'), ...(ngDevMode ? [{ debugName: "viewContentRole" }] : /* istanbul ignore next */ []));
+        /** Falls back on an empty `aria-label` too, which would otherwise leave the control with no name. */
+        this.accessibleName = computed(() => this.ariaLabel() || this.a11yLocaleConfiguration().edit, ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.placements = PopUpPlacements;
         /** @docs-private */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** @docs-private */
         this.colors = KbqComponentColors;
         this.destroyed = false;
         /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
         this.validationTooltipScrollHandle = null;
-        // The save outlives the row, so its outputs have to fall silent with the view they belong to.
-        this.destroyRef.onDestroy(() => (this.destroyed = true));
-        toObservable(this.mode)
-            .pipe(skip(1), takeUntilDestroyed())
-            .subscribe((currentMode) => this.modeChange.emit(currentMode));
+        /** How edit mode was entered, so leaving it restores the same focus style. */
+        this.editModeOrigin = null;
+        /** Set while Tab-chaining, where the next inline edit — not this one — has to end up focused. */
+        this.chainingToNextInlineEdit = false;
+        inlineEditRegistry.set(this.elementRef.nativeElement, this);
+        this.destroyRef.onDestroy(() => {
+            // The save outlives the row, so its outputs have to fall silent with the view they belong to.
+            this.destroyed = true;
+            inlineEditRegistry.delete(this.elementRef.nativeElement);
+            this.validationTooltipScrollHandle?.cancel();
+        });
+        // The panel is pulled up by exactly the height of the view it replaces. Measured on every entry
+        // into edit mode, including an external `[(mode)]` write that never passes through `toggleMode()`,
+        // and before the overlay is attached — reading it from a template binding would force a layout
+        // flush on every tick.
         effect(() => {
-            this.overlayOrigin = this.label() ? this.viewContainer().nativeElement : this.elementRef.nativeElement;
+            if (this.mode() !== 'edit')
+                return;
+            untracked(() => this.overlayOffsetY.set(-this.overlayOrigin().offsetHeight));
         });
         effect((onCleanup) => {
             const selectors = this.interactiveSelectors();
-            const timeoutId = setTimeout(() => this.detectInteractiveContent(selectors));
-            onCleanup(() => clearTimeout(timeoutId));
+            const viewContent = this.viewContent().nativeElement;
+            // Projected content can arrive long after the first pass — a value fetched from a server, or
+            // the `@if (value) { … } @else { placeholder }` shape every example uses — so detection has to
+            // follow the content rather than run once. `debounceTime` also defers the first pass out of the
+            // current change detection, which is what the one-shot timeout used to do.
+            const subscription = this.contentObserver
+                .observe(viewContent)
+                .pipe(startWith(null), debounceTime(0))
+                .subscribe(() => this.detectInteractiveContent(viewContent, selectors));
+            onCleanup(() => subscription.unsubscribe());
         });
     }
     /** Manually switch mode. Does nothing while a `saveHandler` request is in flight. */
     toggleMode() {
-        if (this.isSaving())
-            return;
-        this.mode.update((mode) => (mode === 'view' ? 'edit' : 'view'));
+        // Untracked, as `commit()`, `retrySave()` and `rollback()`: called from a consumer's `effect()`, the state read
+        // on the way — the mode, the save status, the inputs — would make the effect run again whenever it changes.
+        untracked(() => {
+            if (this.isSaving())
+                return;
+            this.mode.update((currentMode) => (currentMode === 'edit' ? 'view' : 'edit'));
+        });
     }
     /**
      * 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() {
@@ -310,25 +343,29 @@ class KbqInlineEdit {
     }
     /** Saves the current value, running the same validation as a normal save. */
     commit() {
-        this.save();
+        untracked(() => this.save());
     }
     /** Repeats the request for a value the server rejected. Does nothing unless the last save failed. */
     retrySave() {
-        const saveHandler = this.saveHandler();
-        if (this.saveStatus() !== 'error' || !saveHandler)
-            return;
-        this.startSave(saveHandler());
+        untracked(() => {
+            const saveHandler = this.saveHandler();
+            if (this.saveStatus() !== 'error' || !saveHandler)
+                return;
+            this.startSave(saveHandler());
+        });
     }
     /** Discards the value the server rejected, restoring the last saved one and closing the editor. */
     rollback() {
-        if (this.saveStatus() !== 'error')
-            return;
-        this.setValue(this.lastSavedValue);
-        this.initialValue = this.lastSavedValue;
-        this.saveStatusSource.set('idle');
-        if (this.isEditMode()) {
-            this.toggleMode();
-        }
+        untracked(() => {
+            if (this.saveStatus() !== 'error')
+                return;
+            this.setValue(this.lastSavedValue);
+            this.initialValue = this.lastSavedValue;
+            this.saveStatusSource.set('idle');
+            if (this.isEditMode()) {
+                this.toggleMode();
+            }
+        });
     }
     /** @docs-private */
     onClick(event) {
@@ -338,28 +375,37 @@ class KbqInlineEdit {
             return;
         event.preventDefault();
         event.stopPropagation();
+        this.editModeOrigin = event instanceof KeyboardEvent ? 'keyboard' : 'mouse';
         this.toggleMode();
     }
     /** @docs-private */
     onAttach() {
+        // `cdkConnectedOverlay` creates and attaches the overlay in one go, so this is the first point it exists.
+        this.overlayLayers.adopt(this.overlayDir().overlayRef, this.elementRef.nativeElement);
         this.setOverlayWidth();
-        this.setOverlayKeydownListener();
+        // Hides the validation tooltip once the controls accept their values. Ended with the session by hand: an
+        // effect otherwise lives as long as its injector, and the tooltip only as long as the panel.
+        const validationTooltipWatcher = effect(() => {
+            this.formFieldRefList().forEach((ref) => {
+                ref.control().errorState();
+                ref.control().value();
+            });
+            untracked(() => {
+                const tooltipTrigger = this.tooltipTrigger();
+                if (tooltipTrigger.isOpen && !this.isInvalid()) {
+                    tooltipTrigger.hide();
+                }
+            });
+        }, { ...(ngDevMode ? { debugName: "validationTooltipWatcher" } : /* istanbul ignore next */ {}), injector: this.injector });
         this.overlayDir()
             .overlayRef.detachments()
             .pipe(take(1))
-            .subscribe(() => this.validationTooltipScrollHandle?.cancel());
-        const formFieldRefList = this.formFieldRefList();
-        merge(...formFieldRefList.map((ref) => ref.control().stateChanges))
-            .pipe(takeUntil(this.overlayDir().overlayRef.detachments()))
             .subscribe(() => {
-            if (!this.isInvalid()) {
-                const tooltipTrigger = this.tooltipTrigger();
-                if (tooltipTrigger?.isOpen) {
-                    tooltipTrigger.hide();
-                }
-            }
+            validationTooltipWatcher.destroy();
+            this.validationTooltipScrollHandle?.cancel();
         });
-        setTimeout(() => {
+        this.watchTabOutsideThePanel();
+        this.defer(() => {
             // Captured before the form-field checks below: an editor built on `setValueHandler` alone has no
             // `KbqFormField`, and `cancel()` and `rollback()` still have to restore something other than undefined.
             this.initialValue = this.getValue();
@@ -376,7 +422,7 @@ class KbqInlineEdit {
             if (this.initialValue)
                 input?.select();
             this.openPanel(formFieldRef);
-        }, 0);
+        });
     }
     /** @docs-private */
     save($event) {
@@ -384,6 +430,9 @@ class KbqInlineEdit {
         // same interaction — without this, the second call would toggle back into edit mode.
         if (!this.isEditMode())
             return;
+        // Saving is what makes the controls touched, not typing into them: the display state has to be
+        // caught up before the error styling is allowed to appear.
+        this.markAllAsTouched();
         if (this.isInvalid()) {
             $event?.stopPropagation();
             if (this.showTooltipOnError() && this.validationTooltip()) {
@@ -396,14 +445,17 @@ class KbqInlineEdit {
         // without a handler `saved` keeps meaning "the user committed".
         if (saveHandler && this.isUnchanged()) {
             this.toggleMode();
+            this.restoreFocus();
             return;
         }
         // Started before the mode switch: a handler that throws is a bug in the application, and folding that into
         // the save result would report it as the server's refusal.
         const request$ = saveHandler?.();
         // Client-side validation has passed, so editing is over either way: with a handler the request runs in the
-        // background, and view mode reports how it went.
+        // background, and view mode reports how it went. Focus goes back with the mode, not with the response,
+        // which lands long after the user has moved on.
         this.toggleMode();
+        this.restoreFocus();
         if (request$) {
             this.startSave(request$);
             return;
@@ -462,7 +514,8 @@ class KbqInlineEdit {
      * positioning.
      */
     isOverlayOriginFullyVisible() {
-        const rect = this.overlayOrigin.getBoundingClientRect();
+        const overlayOrigin = this.overlayOrigin();
+        const rect = overlayOrigin.getBoundingClientRect();
         const isWithin = (container) => rect.top >= container.top &&
             rect.left >= container.left &&
             rect.bottom <= container.bottom &&
@@ -471,7 +524,7 @@ class KbqInlineEdit {
             return false;
         }
         return this.scrollDispatcher
-            .getAncestorScrollContainers(this.overlayOrigin)
+            .getAncestorScrollContainers(overlayOrigin)
             .every((scrollable) => isWithin(scrollable.getElementRef().nativeElement.getBoundingClientRect()));
     }
     /**
@@ -481,11 +534,10 @@ class KbqInlineEdit {
      * 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.
      */
     showValidationTooltip() {
+        // 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.
         // save() can fire repeatedly while the control stays invalid (Save button + onOverlayOutsideClick on
         // every outside click) — let an in-flight request finish rather than stacking a second scroll/listener/timer.
         if (this.validationTooltipScrollHandle)
@@ -504,19 +556,17 @@ class KbqInlineEdit {
             }
         };
         const onScrollEnd = () => {
+            const wasShown = shown;
+            shown = true;
             clearFallbackTimer();
-            if (!shown) {
-                shown = true;
-                removeScrollEndListener();
-                this.validationTooltipScrollHandle = null;
-                this.ngZone.run(() => this.showValidationTooltipIfStillInvalid());
-                return;
-            }
-            // Already shown via the fallback timeout at a stale position — this late scrollend corrects it
-            // instead of re-showing (which would re-trigger the enter animation).
-            removeScrollEndListener();
-            this.validationTooltipScrollHandle = null;
+            this.validationTooltipScrollHandle?.cancel();
             this.ngZone.run(() => {
+                if (!wasShown) {
+                    this.showValidationTooltipIfStillInvalid();
+                    return;
+                }
+                // Already shown via the fallback timeout at a stale position — this late scrollend corrects
+                // it instead of re-showing (which would re-trigger the enter animation).
                 if (this.isInvalid() && this.tooltipTrigger()?.isOpen) {
                     this.tooltipTrigger()?.updatePosition(true);
                 }
@@ -525,10 +575,9 @@ class KbqInlineEdit {
         const onTimeout = () => {
             timeoutId = null;
             shown = true;
-            this.validationTooltipScrollHandle = null;
+            // The handle deliberately stays installed: the scrollend listener is still armed so a late
+            // scrollend can correct the stale position, and `cancel()` is the only thing that removes it.
             this.ngZone.run(() => this.showValidationTooltipIfStillInvalid());
-            // Deliberately keep the scrollend listener alive: a late scrollend still corrects the stale
-            // position via the branch above. Removed by cancel() or the next onScrollEnd call.
         };
         this.ngZone.runOutsideAngular(() => {
             this.window.addEventListener('scrollend', onScrollEnd, { capture: true });
@@ -541,7 +590,7 @@ class KbqInlineEdit {
                 this.validationTooltipScrollHandle = null;
             }
         };
-        this.overlayOrigin.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
+        this.overlayOrigin().scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' });
     }
     showValidationTooltipIfStillInvalid() {
         if (!(this.isInvalid() && this.showTooltipOnError() && this.validationTooltip()))
@@ -557,21 +606,29 @@ class KbqInlineEdit {
         }
         this.toggleMode();
         this.canceled.emit();
+        this.restoreFocus();
+    }
+    /** @docs-private */
+    onPanelEscape(event) {
+        // Also bound on the panel: the overlay dispatches its keys from `<body>`, after a container around an
+        // overlay layer, such as a modal, has handled them. A key spent in the panel cancels nothing more.
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.cancel();
     }
     /** @docs-private */
     onOverlayKeydown(event) {
-        this.markAllAsTouched();
         const canSaveOnEnter = this.canSaveOnEnter();
         switch (event.key) {
             case 'Escape': {
-                this.cancel();
+                this.onPanelEscape(event);
                 break;
             }
             case 'Enter': {
                 if (canSaveOnEnter(event)) {
                     event.preventDefault();
-                    this.markAllAsTouched();
-                    setTimeout(() => this.save(event));
+                    this.defer(() => this.save(event));
                 }
                 break;
             }
@@ -580,9 +637,29 @@ class KbqInlineEdit {
             }
         }
     }
+    /**
+     * Tab off the panel's first or last tabbable control saves and moves to the tab stop next to the field.
+     *
+     * @docs-private
+     */
+    onPanelTab(event, panel, backwards) {
+        if (!isElement(event.target))
+            return;
+        const tabbable = this.getTabbableElements(panel);
+        const boundary = backwards ? tabbable.at(0) : tabbable.at(-1);
+        if (!boundary || boundary !== event.target)
+            return;
+        // A control that moved the focus itself has spent the key; one that only prevented the default has not.
+        if (event.defaultPrevented && this.document.activeElement !== boundary)
+            return;
+        // The panel detaches before the browser resolves the key, and Tab from a detached element restarts at the top.
+        event.preventDefault();
+        this.saveAndFocusAdjacentTabStop(event, backwards);
+    }
     /**
      * Block propagation of overlay outside click.
      * Used to prevent reopening when target is inline edit itself.
+     *
      * @docs-private
      */
     onOverlayOutsideClick($event) {
@@ -592,48 +669,168 @@ class KbqInlineEdit {
         }
         this.save($event);
     }
-    detectInteractiveContent(selectors) {
-        if (!selectors.length) {
-            this.hasInteractiveContent.set(false);
+    /** A select's options sit in an overlay of their own, so the panel's `(keydown.tab)` never fires. */
+    watchTabOutsideThePanel() {
+        const select = this.selectRef();
+        if (!select)
             return;
+        const onKeydown = (event) => {
+            if (event.key !== 'Tab' || hasModifierKey(event, 'ctrlKey', 'metaKey', 'altKey'))
+                return;
+            const overlayElement = this.overlayDir()?.overlayRef?.overlayElement;
+            // A Tab inside the panel is the normal case, already handled by `onPanelTab`.
+            if (isElement(event.target) && overlayElement?.contains(event.target))
+                return;
+            const backwards = event.shiftKey;
+            // Deferred by one task: the select also uses Tab to walk its own footer, and stays open when
+            // it does. That is its business, and only the next task can tell the two apart.
+            this.defer(() => {
+                if (select.panelOpen || !this.isEditMode())
+                    return;
+                this.ngZone.run(() => this.saveAndFocusAdjacentTabStop(event, backwards));
+            });
+        };
+        this.ngZone.runOutsideAngular(() => {
+            this.document.addEventListener('keydown', onKeydown, { capture: true });
+        });
+        this.overlayDir()
+            .overlayRef.detachments()
+            .pipe(take(1))
+            .subscribe(() => this.document.removeEventListener('keydown', onKeydown, { capture: true }));
+    }
+    getTabbableElements(panel) {
+        return Array.from(panel.querySelectorAll('*')).filter((element) => this.isTabStop(element));
+    }
+    isTabStop(element) {
+        return this.interactivityChecker.isTabbable(element) && !this.interactivityChecker.isDisabled(element);
+    }
+    /** Offers focus to each next tab stop in turn: `isTabbable` passes hidden controls that then refuse it. */
+    focusAdjacentTabStop(backwards) {
+        let candidate = this.findAdjacentTabStop(backwards, this.elementRef.nativeElement);
+        while (candidate) {
+            this.focusMonitor.focusVia(candidate, 'keyboard');
+            // `contains` rather than equality: a candidate may hand the focus to a control of its own.
+            if (candidate.contains(this.document.activeElement))
+                return candidate;
+            candidate = this.findAdjacentTabStop(backwards, candidate);
         }
-        const viewContent = this.viewContainer().nativeElement.querySelector('.kbq-inline-edit__view-content');
-        this.hasInteractiveContent.set(!!viewContent?.querySelector(selectors.join(',')));
+        return null;
+    }
+    /** The tab stop next to `from` in document order, walked out of the host rather than collected page-wide. */
+    findAdjacentTabStop(backwards, from) {
+        const host = this.elementRef.nativeElement;
+        const overlayElement = this.overlayDir()?.overlayRef?.overlayElement;
+        const walker = this.document.createTreeWalker(this.document.body, NodeFilter.SHOW_ELEMENT);
+        walker.currentNode = from;
+        const step = () => (backwards ? walker.previousNode() : walker.nextNode());
+        for (let node = step(); node; node = step()) {
+            // CDK's checker and `focusVia` are typed for `HTMLElement`; an SVG tab stop answers both the same.
+            const element = node;
+            // Only the subtree: backwards the walk climbs the ancestors, where a tab stop is where Shift+Tab belongs.
+            if (host.contains(element) || overlayElement?.contains(element) || !this.isTabStop(element))
+                continue;
+            // Another overlay — a neighbour's panel, a dialog — is not part of the sequence this field is leaving.
+            const overlayContainer = element.closest('.cdk-overlay-container');
+            if (overlayContainer && !overlayContainer.contains(host))
+                continue;
+            return element;
+        }
+        return null;
     }
-    isInteractiveElement(target) {
-        const selectors = this.interactiveSelectors();
-        if (!selectors.length)
-            return false;
-        return isElement(target) && !!target.closest(selectors.join(','));
+    /**
+     * 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.
+     */
+    restoreFocus() {
+        if (this.chainingToNextInlineEdit)
+            return;
+        const activeElement = this.document.activeElement;
+        const overlayElement = this.overlayDir()?.overlayRef?.overlayElement;
+        if (!(activeElement === this.document.body || !!overlayElement?.contains(activeElement)))
+            return;
+        const origin = this.editModeOrigin;
+        this.editModeOrigin = null;
+        this.defer(() => {
+            if (!this.elementRef.nativeElement.isConnected)
+                return;
+            this.focusViewTabStop(origin ?? 'program');
+        });
     }
     /**
-     * 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.
+     * 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.
      */
-    setOverlayKeydownListener() {
-        const regionItems = this.regionItems();
-        if (regionItems.length === 0)
+    defer(fn) {
+        const removeTask = this.pendingTasks.add();
+        setTimeout(() => {
+            try {
+                if (!this.destroyRef.destroyed)
+                    fn();
+            }
+            finally {
+                removeTask();
+            }
+        });
+    }
+    /** Focuses the tab stop of view mode, resolved at call time: the focus anchor is a new node on every return. */
+    focusViewTabStop(origin) {
+        this.focusMonitor.focusVia(this.focusAnchor()?.nativeElement ?? this.viewContent().nativeElement, origin);
+    }
+    /** Brings focus back into the editor a rejected value keeps open; only the select path can lose it. */
+    focusRejectedEditor() {
+        const panel = this.overlayDir()?.overlayRef?.overlayElement;
+        if (!panel || panel.contains(this.document.activeElement))
             return;
-        const firstItem = regionItems.at(0);
-        const lastItem = regionItems.at(regionItems.length - 1);
-        if (regionItems.length === 1) {
-            firstItem?.tabOut.subscribe((event) => this.saveAndFocusNextInlineEdit(event));
+        this.getTabbableElements(panel).at(0)?.focus();
+    }
+    detectInteractiveContent(viewContent, selectors) {
+        this.hasInteractiveContent.set(!!selectors.length && !!viewContent.querySelector(selectors.join(',')));
+    }
+    isInteractiveElement(target) {
+        const selectors = this.interactiveSelectors();
+        if (!selectors.length || !isElement(target))
+            return false;
+        const match = target.closest(selectors.join(','));
+        // The walk has to stop at the component: an inline edit rendered inside an `<a>` — a clickable table
+        // row, say — would otherwise read every click as interactive and could never be opened by pointer.
+        return !!match && this.elementRef.nativeElement.contains(match);
+    }
+    /** Saves and hands focus to the tab stop next to the field, opening it when it belongs to another inline edit. */
+    saveAndFocusAdjacentTabStop(event, backwards) {
+        this.chainingToNextInlineEdit = true;
+        // A throwing handler of the application's must not leave the flag set: `restoreFocus()` reads it.
+        try {
+            this.save(event);
         }
-        else {
-            firstItem?.tabOut.subscribe((event) => hasModifierKey(event, 'shiftKey') && this.saveAndFocusNextInlineEdit(event));
-            lastItem?.tabOut.subscribe((event) => !hasModifierKey(event, 'shiftKey') && this.saveAndFocusNextInlineEdit(event));
+        finally {
+            this.chainingToNextInlineEdit = false;
         }
-    }
-    saveAndFocusNextInlineEdit(event) {
-        this.save(event);
-        if (this.isInvalid())
+        if (this.isInvalid()) {
+            this.focusRejectedEditor();
             return;
-        setTimeout(() => {
-            const activeElement = this.document.activeElement;
-            if (activeElement?.classList?.contains('kbq-inline-edit')) {
-                activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        }
+        // The chain goes around `restoreFocus()`, which normally consumes it, and into the next session.
+        this.editModeOrigin = null;
+        // Deferred until view mode is rendered: until then the field's own tab stop — the fallback — is missing.
+        this.defer(() => {
+            if (!this.elementRef.nativeElement.isConnected)
+                return;
+            const target = this.focusAdjacentTabStop(backwards);
+            // Nothing took the focus: taking it back beats leaving it on `<body>`, where the next Tab starts over.
+            if (!target) {
+                this.focusViewTabStop('keyboard');
+                return;
             }
+            // An interactive view's tab stop is the anchor beside it, so the neighbour comes from the host element.
+            const host = target.closest(`.${baseClass}`);
+            const next = host ? inlineEditRegistry.get(host) : undefined;
+            if (!next || next === this || next.disabled() || next.mode() !== 'view')
+                return;
+            // Tab got us here, so the neighbour has to restore a keyboard focus on the way out — without
+            // this it would fall back to `program` and leave a keyboard user without a focus ring.
+            next.editModeOrigin = 'keyboard';
+            next.toggleMode();
         });
     }
     /** Whether saving would send back the value the editor opened with. */
@@ -652,11 +849,16 @@ class KbqInlineEdit {
         }
         return runCompareWith(compareWith, current, initial);
     }
+    /**
+     * 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.
+     */
     isInvalid() {
         const formFieldRefList = this.formFieldRefList();
         if (!formFieldRefList.length)
             return false;
-        return formFieldRefList.some((ref) => ref.invalid);
+        return formFieldRefList.some((ref) => this.getFormControl(ref)?.invalid ?? ref.invalid);
     }
     getValue() {
         const getValueHandler = this.getValueHandler();
@@ -665,7 +867,10 @@ class KbqInlineEdit {
         const formFieldRefList = this.formFieldRefList();
         if (!formFieldRefList.length)
             return;
-        return this.formFieldRefList().map((ref) => this.coerceControl(ref)?.value);
+        return this.formFieldRefList().map((ref) => {
+            const control = this.coerceControl(ref);
+            return control instanceof AbstractControl ? control.value : control.value();
+        });
     }
     setValue(value) {
         const setValue = this.setValueHandler();
@@ -678,22 +883,28 @@ class KbqInlineEdit {
             return;
         value.forEach((controlValue, index) => {
             const control = this.coerceControl(formFieldRefList[index]);
-            if (!control)
-                return;
             if (control instanceof AbstractControl) {
                 control.setValue(controlValue);
             }
-            else {
-                control.value = controlValue;
+            else if (isWritableSignal(control.value)) {
+                // A control without a form control can still hold a value code writes, as `kbqInput` does.
+                control.value.set(controlValue);
+            }
+            else if (isValueAccessor(control)) {
+                // One holding its value read-only, as the pickers and the tree select do, takes it as from a form.
+                control.writeValue(controlValue);
             }
         });
     }
     coerceControl(formFieldRef) {
-        const control = formFieldRef.control();
-        if (control.ngControl instanceof NgControl) {
-            return control.ngControl.control;
-        }
-        return control;
+        return this.getFormControl(formFieldRef) ?? formFieldRef.control();
+    }
+    getFormControl(formFieldRef) {
+        const { ngControl } = formFieldRef.control();
+        // The pickers hand over the form control itself: they are value accessors, which cannot inject `NgControl`.
+        if (ngControl instanceof AbstractControl)
+            return ngControl;
+        return ngControl instanceof NgControl ? ngControl.control : null;
     }
     setOverlayWidth() {
         const editModeWidth = this.editModeWidth();
@@ -711,6 +922,7 @@ class KbqInlineEdit {
                 .pipe(takeUntil(overlayRef.detachments()))
                 .subscribe(() => {
                 this.overlayWidth.set(element.offsetWidth);
+                this.overlayOffsetY.set(-this.overlayOrigin().offsetHeight);
                 overlayRef.updatePosition();
             });
         }
@@ -724,23 +936,23 @@ class KbqInlineEdit {
         return this.overlayDir()?.overlayRef.overlayElement.querySelector('input:not([type="file"]),textarea') ?? null;
     }
     markAllAsTouched() {
-        this.formFieldRefList().forEach((formField) => formField.control().ngControl?.control?.markAsTouched());
+        this.formFieldRefList().forEach((formField) => this.getFormControl(formField)?.markAsTouched());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEdit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqInlineEdit, isStandalone: true, selector: "kbq-inline-edit", inputs: { showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTooltipOnError: { classPropertyName: "showTooltipOnError", publicName: "showTooltipOnError", isSignal: true, isRequired: false, transformFunction: null }, validationTooltip: { classPropertyName: "validationTooltip", publicName: "validationTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editModeWidth: { classPropertyName: "editModeWidth", publicName: "editModeWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayPanelClass: { classPropertyName: "overlayPanelClass", publicName: "overlayPanelClass", isSignal: true, isRequired: false, transformFunction: null }, getValueHandler: { classPropertyName: "getValueHandler", publicName: "getValueHandler", isSignal: true, isRequired: false, transformFunction: null }, setValueHandler: { classPropertyName: "setValueHandler", publicName: "setValueHandler", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, saveHandler: { classPropertyName: "saveHandler", publicName: "saveHandler", isSignal: true, isRequired: false, transformFunction: null }, saveErrorHandler: { classPropertyName: "saveErrorHandler", publicName: "saveErrorHandler", isSignal: true, isRequired: false, transformFunction: null }, canSaveOnEnter: { classPropertyName: "canSaveOnEnter", publicName: "canSaveOnEnter", isSignal: true, isRequired: false, transformFunction: null }, interactiveSelectors: { classPropertyName: "interactiveSelectors", publicName: "interactiveSelectors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", canceled: "canceled", saveError: "saveError", modeChange: "modeChange" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "attr.tabindex": "tabIndex()", "class": "className()", "class.kbq-inline-edit_with-label": "!!label()", "class.kbq-inline-edit_with-menu": "!!menu()", "class.kbq-inline-edit_disabled": "disabled()", "class.kbq-inline-edit_anchor-focused": "anchorFocused()", "class.kbq-inline-edit_select": "isSingleSelect()", "class.kbq-inline-edit_save-error": "saveStatus() === \"error\"", "class.kbq-progress": "saveStatus() === \"progress\"" }, classAttribute: "kbq-inline-edit" }, providers: [{ provide: KBQ_CONNECTED_OVERLAY_ORIGIN, useExisting: forwardRef((() => KbqInlineEdit)) }], queries: [{ propertyName: "menu", first: true, predicate: KbqInlineEditMenu, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: KbqLabel, descendants: true, isSignal: true }, { propertyName: "formFieldRefList", predicate: KbqFormField, descendants: true, isSignal: true }, { propertyName: "selectRef", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "regionItems", predicate: KbqFocusRegionItem, descendants: true, isSignal: true }], exportAs: ["kbqInlineEdit"], hostDirectives: [{ directive: i1.CdkMonitorFocus }], ngImport: i0, template: "<div class=\"kbq-inline-edit__focus_container\">\n    <div class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ saveStatusMessage() }}</div>\n\n    @if (label()) {\n        <div class=\"kbq-inline-edit__label\">\n            <ng-content select=\"kbq-label\" />\n        </div>\n    }\n\n    <div #viewContainer class=\"kbq-inline-edit__view-container\">\n        <div class=\"kbq-inline-edit__view-content\">\n            <ng-content select=\"[kbqInlineEditViewMode]\" />\n        </div>\n\n        @if (hasInteractiveContent() && mode() === 'view' && !disabled()) {\n            <div\n                class=\"kbq-inline-edit__focus-anchor cdk-visually-hidden\"\n                tabindex=\"0\"\n                (focus)=\"anchorFocused.set(true)\"\n                (blur)=\"anchorFocused.set(false)\"\n            ></div>\n        }\n\n        @if (menu() && mode() === 'view') {\n            <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n                <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n                <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n                    <ng-content select=\"[kbqInlineEditMenu]\" />\n                </div>\n            </div>\n        }\n\n        <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayLockPosition\n            [cdkConnectedOverlayOpen]=\"isEditMode()\"\n            [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n            [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n            [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n            [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClass()\"\n            [cdkConnectedOverlayHasBackdrop]=\"false\"\n            (attach)=\"onAttach()\"\n            (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n            (overlayKeydown)=\"onOverlayKeydown($event)\"\n        >\n            <div class=\"cdk-visually-hidden\" aria-hidden=\"true\" kbqFocusRegionItem tabindex=\"0\"></div>\n            <div\n                class=\"kbq-inline-edit__panel\"\n                cdkTrapFocusAutoCapture\n                [class.kbq-inline-edit__panel_select]=\"isSingleSelect()\"\n                [cdkTrapFocus]=\"false\"\n            >\n                <div\n                    class=\"kbq-inline-edit__control-container\"\n                    [kbqTooltipColor]=\"colors.Error\"\n                    [kbqTooltip]=\"validationTooltip() ?? ''\"\n                    [kbqTooltipDisabled]=\"!validationTooltip()\"\n                    [kbqTooltipArrow]=\"false\"\n                    [kbqTrigger]=\"'manual'\"\n                    [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n                    [kbqTooltipScrollStrategy]=\"validationTooltipScrollStrategy\"\n                >\n                    <ng-content select=\"[kbqInlineEditEditMode]\" />\n                </div>\n\n                @if (showActions()) {\n                    <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n                                <i kbq-icon=\"kbq-check_16\"></i>\n                            </button>\n                        </div>\n\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button kbq-button [color]=\"'contrast-fade'\" (click)=\"cancel()\">\n                                <i kbq-icon=\"kbq-xmark_16\"></i>\n                            </button>\n                        </div>\n                    </div>\n                }\n            </div>\n            <div class=\"cdk-visually-hidden\" aria-hidden=\"true\" kbqFocusRegionItem tabindex=\"0\"></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);background:var(--kbq-inline-edit-background)}.kbq-inline-edit:focus-visible{outline:none}.kbq-inline-edit.cdk-keyboard-focused,.kbq-inline-edit.kbq-inline-edit_anchor-focused{box-shadow:inset 0 0 .1px 1px var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error{--kbq-inline-edit-background: var(--kbq-inline-edit-error-background)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);--kbq-mask-background: var(--kbq-states-background-error-less-hover)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-error-less-active);--kbq-mask-background: var(--kbq-states-background-error-less-active)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width))}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container,.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-content{text-overflow:ellipsis}.kbq-inline-edit.kbq-inline-edit_select.kbq-inline-edit_edit{--kbq-inline-edit-background: var(--kbq-states-background-transparent-active)}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask,.kbq-inline-edit.kbq-inline-edit_anchor-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit{position:relative}.kbq-inline-edit .kbq-mask{display:flex;position:absolute;top:calc(var(--kbq-size-border-width) * -1);right:calc(var(--kbq-size-border-width) * -1)}.kbq-inline-edit .kbq-mask .kbq-mask__fade{background:var(--kbq-mask-background, transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black, var(--kbq-black-default)));mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black, var(--kbq-black-default)))}.kbq-inline-edit .kbq-mask .kbq-mask__container{background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask{opacity:0;height:calc(100% + 2 * var(--kbq-size-border-width));justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel.kbq-inline-edit__panel_select .kbq-inline-edit__control-container{display:none}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{box-shadow:var(--kbq-shadow-popup);background-color:var(--kbq-background-bg);border-radius:var(--kbq-size-border-radius)}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: calc(var(--kbq-size-3xl) - 2 * var(--kbq-size-border-width));--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-s) - var(--kbq-size-border-width));--kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);--kbq-inline-edit-error-background: var(--kbq-background-error-less)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqFocusRegionItem, selector: "[kbqFocusRegionItem]", outputs: ["tabOut"], exportAs: ["kbqFocusRegionItem"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEdit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqInlineEdit, isStandalone: true, selector: "kbq-inline-edit", inputs: { showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTooltipOnError: { classPropertyName: "showTooltipOnError", publicName: "showTooltipOnError", isSignal: true, isRequired: false, transformFunction: null }, validationTooltip: { classPropertyName: "validationTooltip", publicName: "validationTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editModeWidth: { classPropertyName: "editModeWidth", publicName: "editModeWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayPanelClass: { classPropertyName: "overlayPanelClass", publicName: "overlayPanelClass", isSignal: true, isRequired: false, transformFunction: null }, getValueHandler: { classPropertyName: "getValueHandler", publicName: "getValueHandler", isSignal: true, isRequired: false, transformFunction: null }, setValueHandler: { classPropertyName: "setValueHandler", publicName: "setValueHandler", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, saveHandler: { classPropertyName: "saveHandler", publicName: "saveHandler", isSignal: true, isRequired: false, transformFunction: null }, saveErrorHandler: { classPropertyName: "saveErrorHandler", publicName: "saveErrorHandler", isSignal: true, isRequired: false, transformFunction: null }, canSaveOnEnter: { classPropertyName: "canSaveOnEnter", publicName: "canSaveOnEnter", isSignal: true, isRequired: false, transformFunction: null }, interactiveSelectors: { classPropertyName: "interactiveSelectors", publicName: "interactiveSelectors", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", canceled: "canceled", saveError: "saveError", mode: "modeChange" }, host: { attributes: { "cdkMonitorSubtreeFocus": "" }, listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class": "className()", "class.kbq-inline-edit_with-label": "!!label()", "class.kbq-inline-edit_with-menu": "!!menu()", "class.kbq-inline-edit_disabled": "disabled()", "class.kbq-inline-edit_anchor-focused": "anchorFocused()", "class.kbq-inline-edit_select": "isSingleSelect()", "class.kbq-inline-edit_save-error": "saveStatus() === \"error\"", "class.kbq-progress": "saveStatus() === \"progress\"", "attr.aria-label": "null" }, classAttribute: "kbq-inline-edit" }, providers: [{ provide: KBQ_CONNECTED_OVERLAY_ORIGIN, useExisting: forwardRef((() => KbqInlineEdit)) }], queries: [{ propertyName: "menu", first: true, predicate: KbqInlineEditMenu, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: KbqLabel, descendants: true, isSignal: true }, { propertyName: "formFieldRefList", predicate: KbqFormField, descendants: true, isSignal: true }, { propertyName: "selectRef", first: true, predicate: KbqSelect, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, isSignal: true }, { propertyName: "viewContent", first: true, predicate: ["viewContent"], descendants: true, isSignal: true }, { propertyName: "focusAnchor", first: true, predicate: ["focusAnchor"], descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], exportAs: ["kbqInlineEdit"], hostDirectives: [{ directive: i1.CdkMonitorFocus }, { directive: i2.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<div class=\"kbq-inline-edit__focus_container\">\n    <div class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ saveStatusMessage() }}</div>\n\n    @if (label()) {\n        <div class=\"kbq-inline-edit__label\">\n            <ng-content select=\"kbq-label\" />\n        </div>\n    }\n\n    <div #viewContainer class=\"kbq-inline-edit__view-container\">\n        <div\n            #viewContent\n            class=\"kbq-inline-edit__view-content\"\n            [attr.role]=\"viewContentRole()\"\n            [attr.tabindex]=\"tabIndex()\"\n            [attr.aria-label]=\"viewContentRole() ? accessibleName() : null\"\n            [attr.aria-expanded]=\"viewContentRole() ? isEditMode() : null\"\n            [attr.aria-disabled]=\"viewContentRole() && disabled() ? true : null\"\n        >\n            <ng-content select=\"[kbqInlineEditViewMode]\" />\n        </div>\n\n        @if (hasInteractiveContent() && mode() === 'view' && !disabled()) {\n            <!-- `aria-expanded` is static: the anchor only exists in view mode, so it is never expanded. -->\n            <div\n                #focusAnchor\n                class=\"kbq-inline-edit__focus-anchor cdk-visually-hidden\"\n                aria-expanded=\"false\"\n                role=\"button\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"accessibleName()\"\n                (focus)=\"anchorFocused.set(true)\"\n                (blur)=\"anchorFocused.set(false)\"\n            ></div>\n        }\n\n        @if (menu() && mode() === 'view') {\n            <div class=\"kbq-inline-edit__menu-mask\">\n                <div class=\"kbq-inline-edit__menu-mask-fade\"></div>\n                <div class=\"kbq-inline-edit__menu-mask-container\">\n                    <ng-content select=\"[kbqInlineEditMenu]\" />\n                </div>\n            </div>\n        }\n\n        <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayLockPosition\n            [cdkConnectedOverlayOpen]=\"isEditMode()\"\n            [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n            [cdkConnectedOverlayOffsetY]=\"overlayOffsetY()\"\n            [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n            [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClass()\"\n            [cdkConnectedOverlayHasBackdrop]=\"false\"\n            (attach)=\"onAttach()\"\n            (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n            (overlayKeydown)=\"onOverlayKeydown($event)\"\n        >\n            <div\n                #panel\n                class=\"kbq-inline-edit__panel\"\n                cdkTrapFocusAutoCapture\n                [class.kbq-inline-edit__panel_select]=\"isSingleSelect()\"\n                [cdkTrapFocus]=\"false\"\n                (keydown.escape)=\"onPanelEscape($event)\"\n                (keydown.tab)=\"onPanelTab($event, panel, false)\"\n                (keydown.shift.tab)=\"onPanelTab($event, panel, true)\"\n            >\n                <div\n                    class=\"kbq-inline-edit__control-container\"\n                    [kbqTooltipColor]=\"colors.Error\"\n                    [kbqTooltip]=\"validationTooltip() ?? ''\"\n                    [kbqTooltipDisabled]=\"!validationTooltip()\"\n                    [kbqTooltipArrow]=\"false\"\n                    [kbqTrigger]=\"'manual'\"\n                    [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n                    [kbqTooltipScrollStrategy]=\"validationTooltipScrollStrategy\"\n                >\n                    <ng-content select=\"[kbqInlineEditEditMode]\" />\n                </div>\n\n                @if (showActions()) {\n                    <div\n                        animate.enter=\"kbq-inline-edit__action-buttons_enter\"\n                        class=\"kbq-inline-edit__action-buttons\"\n                        role=\"group\"\n                        [class.kbq-animations-disabled]=\"animationsDisabled\"\n                    >\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button\n                                kbq-button\n                                [attr.aria-label]=\"a11yLocaleConfiguration().save\"\n                                [color]=\"'contrast'\"\n                                (click)=\"save($event)\"\n                            >\n                                <i kbq-icon=\"kbq-check_16\"></i>\n                            </button>\n                        </div>\n\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button\n                                kbq-button\n                                [attr.aria-label]=\"a11yLocaleConfiguration().cancel\"\n                                [color]=\"'contrast-fade'\"\n                                (click)=\"cancel()\"\n                            >\n                                <i kbq-icon=\"kbq-xmark_16\"></i>\n                            </button>\n                        </div>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-inline-edit{display:flex;position:relative;flex-direction:column;justify-content:center;box-sizing:border-box;border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-inline-edit{padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);background:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__view-content:focus,.kbq-inline-edit .kbq-inline-edit__focus-anchor:focus{outline:none}.kbq-inline-edit.cdk-keyboard-focused:not(:has(:focus:not(.kbq-inline-edit__view-content,.kbq-inline-edit__focus-anchor))),.kbq-inline-edit.kbq-inline-edit_anchor-focused{box-shadow:inset 0 0 .1px 1px var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error{--kbq-inline-edit-background: var(--kbq-inline-edit-error-background)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);--kbq-mask-background: var(--kbq-states-background-error-less-hover)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-error-less-active);--kbq-mask-background: var(--kbq-states-background-error-less-active)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width))}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container,.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-content{text-overflow:ellipsis}.kbq-inline-edit.kbq-inline-edit_select.kbq-inline-edit_edit{--kbq-inline-edit-background: var(--kbq-states-background-transparent-active)}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask,.kbq-inline-edit.kbq-inline-edit_anchor-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit .kbq-inline-edit__menu-mask{display:flex;position:absolute;top:calc(var(--kbq-size-border-width) * -1);right:calc(var(--kbq-size-border-width) * -1);opacity:0;height:calc(100% + 2 * var(--kbq-size-border-width));justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit .kbq-inline-edit__menu-mask{corner-shape:squircle;border-top-right-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2);border-bottom-right-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px;background:var(--kbq-mask-background, transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black));mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black))}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit;corner-shape:inherit;background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter{animation:kbq-inline-edit-action-buttons-enter 50ms cubic-bezier(0,0,.2,1)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter{animation:none;transition:none}}.kbq-inline-edit__panel.kbq-inline-edit__panel_select .kbq-inline-edit__control-container{display:none}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{box-shadow:var(--kbq-inline-edit-panel-shadow);background-color:var(--kbq-background-bg);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}@keyframes kbq-inline-edit-action-buttons-enter{0%{transform:translateY(100%);opacity:0}}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: calc(var(--kbq-size-3xl) - 2 * var(--kbq-size-border-width));--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-s) - var(--kbq-size-border-width));--kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);--kbq-inline-edit-error-background: var(--kbq-background-error-less)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEdit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEdit, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-inline-edit', imports: [
                         CdkConnectedOverlay,
                         KbqButtonModule,
                         KbqIcon,
                         KbqTooltipTrigger,
-                        KbqFocusRegionItem,
                         CdkTrapFocus
                     ], providers: [{ provide: KBQ_CONNECTED_OVERLAY_ORIGIN, useExisting: forwardRef((() => KbqInlineEdit)) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: baseClass,
-                        '[attr.tabindex]': 'tabIndex()',
+                        // The widget semantics live on the view content, so the focus ring has to follow the subtree.
+                        cdkMonitorSubtreeFocus: '',
                         '[class]': 'className()',
                         '[class.kbq-inline-edit_with-label]': '!!label()',
                         '[class.kbq-inline-edit_with-menu]': '!!menu()',
@@ -750,11 +962,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-inline-edit_save-error]': 'saveStatus() === "error"',
                         // The background save is reported on the row itself, which by then is back in view mode.
                         '[class.kbq-progress]': 'saveStatus() === "progress"',
+                        // `aria-label` is an input, and the host itself carries no role, where naming is prohibited.
+                        '[attr.aria-label]': 'null',
                         '(click)': 'onClick($event)',
                         '(keydown.enter)': 'onClick($event)',
                         '(keydown.space)': 'onClick($event)'
-                    }, hostDirectives: [CdkMonitorFocus], animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], exportAs: 'kbqInlineEdit', template: "<div class=\"kbq-inline-edit__focus_container\">\n    <div class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ saveStatusMessage() }}</div>\n\n    @if (label()) {\n        <div class=\"kbq-inline-edit__label\">\n            <ng-content select=\"kbq-label\" />\n        </div>\n    }\n\n    <div #viewContainer class=\"kbq-inline-edit__view-container\">\n        <div class=\"kbq-inline-edit__view-content\">\n            <ng-content select=\"[kbqInlineEditViewMode]\" />\n        </div>\n\n        @if (hasInteractiveContent() && mode() === 'view' && !disabled()) {\n            <div\n                class=\"kbq-inline-edit__focus-anchor cdk-visually-hidden\"\n                tabindex=\"0\"\n                (focus)=\"anchorFocused.set(true)\"\n                (blur)=\"anchorFocused.set(false)\"\n            ></div>\n        }\n\n        @if (menu() && mode() === 'view') {\n            <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n                <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n                <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n                    <ng-content select=\"[kbqInlineEditMenu]\" />\n                </div>\n            </div>\n        }\n\n        <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayLockPosition\n            [cdkConnectedOverlayOpen]=\"isEditMode()\"\n            [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n            [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n            [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n            [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClass()\"\n            [cdkConnectedOverlayHasBackdrop]=\"false\"\n            (attach)=\"onAttach()\"\n            (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n            (overlayKeydown)=\"onOverlayKeydown($event)\"\n        >\n            <div class=\"cdk-visually-hidden\" aria-hidden=\"true\" kbqFocusRegionItem tabindex=\"0\"></div>\n            <div\n                class=\"kbq-inline-edit__panel\"\n                cdkTrapFocusAutoCapture\n                [class.kbq-inline-edit__panel_select]=\"isSingleSelect()\"\n                [cdkTrapFocus]=\"false\"\n            >\n                <div\n                    class=\"kbq-inline-edit__control-container\"\n                    [kbqTooltipColor]=\"colors.Error\"\n                    [kbqTooltip]=\"validationTooltip() ?? ''\"\n                    [kbqTooltipDisabled]=\"!validationTooltip()\"\n                    [kbqTooltipArrow]=\"false\"\n                    [kbqTrigger]=\"'manual'\"\n                    [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n                    [kbqTooltipScrollStrategy]=\"validationTooltipScrollStrategy\"\n                >\n                    <ng-content select=\"[kbqInlineEditEditMode]\" />\n                </div>\n\n                @if (showActions()) {\n                    <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n                                <i kbq-icon=\"kbq-check_16\"></i>\n                            </button>\n                        </div>\n\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button kbq-button [color]=\"'contrast-fade'\" (click)=\"cancel()\">\n                                <i kbq-icon=\"kbq-xmark_16\"></i>\n                            </button>\n                        </div>\n                    </div>\n                }\n            </div>\n            <div class=\"cdk-visually-hidden\" aria-hidden=\"true\" kbqFocusRegionItem tabindex=\"0\"></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);background:var(--kbq-inline-edit-background)}.kbq-inline-edit:focus-visible{outline:none}.kbq-inline-edit.cdk-keyboard-focused,.kbq-inline-edit.kbq-inline-edit_anchor-focused{box-shadow:inset 0 0 .1px 1px var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error{--kbq-inline-edit-background: var(--kbq-inline-edit-error-background)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);--kbq-mask-background: var(--kbq-states-background-error-less-hover)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-error-less-active);--kbq-mask-background: var(--kbq-states-background-error-less-active)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width))}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container,.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-content{text-overflow:ellipsis}.kbq-inline-edit.kbq-inline-edit_select.kbq-inline-edit_edit{--kbq-inline-edit-background: var(--kbq-states-background-transparent-active)}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask,.kbq-inline-edit.kbq-inline-edit_anchor-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit{position:relative}.kbq-inline-edit .kbq-mask{display:flex;position:absolute;top:calc(var(--kbq-size-border-width) * -1);right:calc(var(--kbq-size-border-width) * -1)}.kbq-inline-edit .kbq-mask .kbq-mask__fade{background:var(--kbq-mask-background, transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black, var(--kbq-black-default)));mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black, var(--kbq-black-default)))}.kbq-inline-edit .kbq-mask .kbq-mask__container{background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask{opacity:0;height:calc(100% + 2 * var(--kbq-size-border-width));justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel.kbq-inline-edit__panel_select .kbq-inline-edit__control-container{display:none}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{box-shadow:var(--kbq-shadow-popup);background-color:var(--kbq-background-bg);border-radius:var(--kbq-size-border-radius)}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: calc(var(--kbq-size-3xl) - 2 * var(--kbq-size-border-width));--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-s) - var(--kbq-size-border-width));--kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);--kbq-inline-edit-error-background: var(--kbq-background-error-less)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTooltipOnError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltipOnError", required: false }] }], validationTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editModeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "editModeWidth", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], overlayPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPanelClass", required: false }] }], getValueHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "getValueHandler", required: false }] }], setValueHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "setValueHandler", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], saveHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveHandler", required: false }] }], saveErrorHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveErrorHandler", required: false }] }], canSaveOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSaveOnEnter", required: false }] }], interactiveSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveSelectors", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], saveError: [{ type: i0.Output, args: ["saveError"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], menu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqInlineEditMenu), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqLabel), { isSignal: true }] }], formFieldRefList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqFormField), { ...{ descendants: true }, isSignal: true }] }], selectRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelect), { ...{ descendants: true }, isSignal: true }] }], tooltipTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], viewContainer: [{ type: i0.ViewChild, args: ['viewContainer', { isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], regionItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqFocusRegionItem), { isSignal: true }] }] } });
+                    }, hostDirectives: [
+                        CdkMonitorFocus,
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqInlineEdit', template: "<div class=\"kbq-inline-edit__focus_container\">\n    <div class=\"cdk-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ saveStatusMessage() }}</div>\n\n    @if (label()) {\n        <div class=\"kbq-inline-edit__label\">\n            <ng-content select=\"kbq-label\" />\n        </div>\n    }\n\n    <div #viewContainer class=\"kbq-inline-edit__view-container\">\n        <div\n            #viewContent\n            class=\"kbq-inline-edit__view-content\"\n            [attr.role]=\"viewContentRole()\"\n            [attr.tabindex]=\"tabIndex()\"\n            [attr.aria-label]=\"viewContentRole() ? accessibleName() : null\"\n            [attr.aria-expanded]=\"viewContentRole() ? isEditMode() : null\"\n            [attr.aria-disabled]=\"viewContentRole() && disabled() ? true : null\"\n        >\n            <ng-content select=\"[kbqInlineEditViewMode]\" />\n        </div>\n\n        @if (hasInteractiveContent() && mode() === 'view' && !disabled()) {\n            <!-- `aria-expanded` is static: the anchor only exists in view mode, so it is never expanded. -->\n            <div\n                #focusAnchor\n                class=\"kbq-inline-edit__focus-anchor cdk-visually-hidden\"\n                aria-expanded=\"false\"\n                role=\"button\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"accessibleName()\"\n                (focus)=\"anchorFocused.set(true)\"\n                (blur)=\"anchorFocused.set(false)\"\n            ></div>\n        }\n\n        @if (menu() && mode() === 'view') {\n            <div class=\"kbq-inline-edit__menu-mask\">\n                <div class=\"kbq-inline-edit__menu-mask-fade\"></div>\n                <div class=\"kbq-inline-edit__menu-mask-container\">\n                    <ng-content select=\"[kbqInlineEditMenu]\" />\n                </div>\n            </div>\n        }\n\n        <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayLockPosition\n            [cdkConnectedOverlayOpen]=\"isEditMode()\"\n            [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n            [cdkConnectedOverlayOffsetY]=\"overlayOffsetY()\"\n            [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n            [cdkConnectedOverlayDisableClose]=\"true\"\n            [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n            [cdkConnectedOverlayPanelClass]=\"overlayPanelClass()\"\n            [cdkConnectedOverlayHasBackdrop]=\"false\"\n            (attach)=\"onAttach()\"\n            (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n            (overlayKeydown)=\"onOverlayKeydown($event)\"\n        >\n            <div\n                #panel\n                class=\"kbq-inline-edit__panel\"\n                cdkTrapFocusAutoCapture\n                [class.kbq-inline-edit__panel_select]=\"isSingleSelect()\"\n                [cdkTrapFocus]=\"false\"\n                (keydown.escape)=\"onPanelEscape($event)\"\n                (keydown.tab)=\"onPanelTab($event, panel, false)\"\n                (keydown.shift.tab)=\"onPanelTab($event, panel, true)\"\n            >\n                <div\n                    class=\"kbq-inline-edit__control-container\"\n                    [kbqTooltipColor]=\"colors.Error\"\n                    [kbqTooltip]=\"validationTooltip() ?? ''\"\n                    [kbqTooltipDisabled]=\"!validationTooltip()\"\n                    [kbqTooltipArrow]=\"false\"\n                    [kbqTrigger]=\"'manual'\"\n                    [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n                    [kbqTooltipScrollStrategy]=\"validationTooltipScrollStrategy\"\n                >\n                    <ng-content select=\"[kbqInlineEditEditMode]\" />\n                </div>\n\n                @if (showActions()) {\n                    <div\n                        animate.enter=\"kbq-inline-edit__action-buttons_enter\"\n                        class=\"kbq-inline-edit__action-buttons\"\n                        role=\"group\"\n                        [class.kbq-animations-disabled]=\"animationsDisabled\"\n                    >\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button\n                                kbq-button\n                                [attr.aria-label]=\"a11yLocaleConfiguration().save\"\n                                [color]=\"'contrast'\"\n                                (click)=\"save($event)\"\n                            >\n                                <i kbq-icon=\"kbq-check_16\"></i>\n                            </button>\n                        </div>\n\n                        <div class=\"kbq-inline-edit__action-button\">\n                            <button\n                                kbq-button\n                                [attr.aria-label]=\"a11yLocaleConfiguration().cancel\"\n                                [color]=\"'contrast-fade'\"\n                                (click)=\"cancel()\"\n                            >\n                                <i kbq-icon=\"kbq-xmark_16\"></i>\n                            </button>\n                        </div>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.kbq-inline-edit{display:flex;position:relative;flex-direction:column;justify-content:center;box-sizing:border-box;border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-inline-edit{padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);background:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__view-content:focus,.kbq-inline-edit .kbq-inline-edit__focus-anchor:focus{outline:none}.kbq-inline-edit.cdk-keyboard-focused:not(:has(:focus:not(.kbq-inline-edit__view-content,.kbq-inline-edit__focus-anchor))),.kbq-inline-edit.kbq-inline-edit_anchor-focused{box-shadow:inset 0 0 .1px 1px var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error{--kbq-inline-edit-background: var(--kbq-inline-edit-error-background)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);--kbq-mask-background: var(--kbq-states-background-error-less-hover)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_save-error:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-error-less-active);--kbq-mask-background: var(--kbq-states-background-error-less-active)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width))}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container,.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-content{text-overflow:ellipsis}.kbq-inline-edit.kbq-inline-edit_select.kbq-inline-edit_edit{--kbq-inline-edit-background: var(--kbq-states-background-transparent-active)}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask,.kbq-inline-edit.kbq-inline-edit_anchor-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit .kbq-inline-edit__menu-mask{display:flex;position:absolute;top:calc(var(--kbq-size-border-width) * -1);right:calc(var(--kbq-size-border-width) * -1);opacity:0;height:calc(100% + 2 * var(--kbq-size-border-width));justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit .kbq-inline-edit__menu-mask{corner-shape:squircle;border-top-right-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2);border-bottom-right-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px;background:var(--kbq-mask-background, transparent);-webkit-mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black));mask-image:linear-gradient(90deg,transparent,var(--kbq-plt-black))}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit;corner-shape:inherit;background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter{animation:kbq-inline-edit-action-buttons-enter 50ms cubic-bezier(0,0,.2,1)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-inline-edit__panel .kbq-inline-edit__action-buttons_enter{animation:none;transition:none}}.kbq-inline-edit__panel.kbq-inline-edit__panel_select .kbq-inline-edit__control-container{display:none}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{box-shadow:var(--kbq-inline-edit-panel-shadow);background-color:var(--kbq-background-bg);border-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-button{corner-shape:squircle;border-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}@keyframes kbq-inline-edit-action-buttons-enter{0%{transform:translateY(100%);opacity:0}}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: calc(var(--kbq-size-3xl) - 2 * var(--kbq-size-border-width));--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-s) - var(--kbq-size-border-width));--kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);--kbq-inline-edit-error-background: var(--kbq-background-error-less)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTooltipOnError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltipOnError", required: false }] }], validationTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editModeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "editModeWidth", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], overlayPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPanelClass", required: false }] }], getValueHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "getValueHandler", required: false }] }], setValueHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "setValueHandler", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], saveHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveHandler", required: false }] }], saveErrorHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveErrorHandler", required: false }] }], canSaveOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSaveOnEnter", required: false }] }], interactiveSelectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveSelectors", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], saveError: [{ type: i0.Output, args: ["saveError"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], menu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqInlineEditMenu), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqLabel), { isSignal: true }] }], formFieldRefList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqFormField), { ...{ descendants: true }, isSignal: true }] }], selectRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelect), { ...{ descendants: true }, isSignal: true }] }], tooltipTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], viewContainer: [{ type: i0.ViewChild, args: ['viewContainer', { isSignal: true }] }], viewContent: [{ type: i0.ViewChild, args: ['viewContent', { isSignal: true }] }], focusAnchor: [{ type: i0.ViewChild, args: ['focusAnchor', { isSignal: true }] }], overlayDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
 const COMPONENTS = [
     KbqInlineEdit,
@@ -762,15 +979,15 @@ const COMPONENTS = [
     KbqInlineEditMenu
 ];
 class KbqInlineEditModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit,
             KbqInlineEditPlaceholder,
             KbqInlineEditMenu], exports: [KbqInlineEdit,
             KbqInlineEditPlaceholder,
             KbqInlineEditMenu] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqInlineEditModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqInlineEditModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -782,5 +999,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=koobiq-components-inline-edit.mjs.map