@koobiq/components 20.2.0 → 20.3.1

package/form-field/index.d.ts

@@ -1,20 +1,108 @@
-import { KbqIconButton } from '@koobiq/components/icon';
 import * as i0 from '@angular/core';
-import { Signal, AfterContentInit, QueryList, AfterViewInit, OnDestroy, ChangeDetectorRef, TemplateRef, OutputEmitterRef, InjectionToken, Provider, AfterContentChecked, ElementRef } from '@angular/core';
-import { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';
-import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { Signal, InjectionToken, AfterContentInit, Provider, QueryList, AfterViewInit, OnDestroy, ChangeDetectorRef, TemplateRef, OutputEmitterRef, AfterContentChecked, ElementRef } from '@angular/core';
+import { KbqIconButton } from '@koobiq/components/icon';
 import { NgControl } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
+import { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 
+/** An interface which allows a control to work inside of a `KbqFormField`. */
+declare abstract class KbqFormFieldControl<T> {
+    /** The value of the control. */
+    value: T | null;
+    /**
+     * Stream that emits whenever the state of the control changes such that the parent `KbqFormField`
+     * needs to run change detection.
+     */
+    readonly stateChanges: Observable<void>;
+    /** The element ID for this control. */
+    readonly id: string;
+    /** The placeholder for this control. */
+    readonly placeholder: string;
+    /** Gets the NgControl for this control. */
+    readonly ngControl: NgControl | null;
+    /** Whether the control is focused. */
+    readonly focused: boolean;
+    /** Whether the control is empty. */
+    readonly empty: boolean;
+    /** Whether the control is required. */
+    readonly required: boolean;
+    /** Whether the control is disabled. */
+    readonly disabled: boolean;
+    /** Whether the control is in an error state. */
+    readonly errorState: boolean;
+    /**
+     * Whether the control's value was filled in by the browser.
+     *
+     * Implement it only where autofill is reachable: on a control that is itself a text input or a
+     * textarea, or — like `KbqTagList` — on a wrapper that forwards the state of the input it hosts.
+     * Leave it out on controls the browser never fills.
+     *
+     * A signal rather than a plain property because the form field reads it from a host binding and
+     * runs `OnPush`: a signal read there marks the form field dirty on its own.
+     */
+    readonly autofilled?: Signal<boolean>;
+    /**
+     * An optional name for the control type that can be used to distinguish `kbq-form-field` elements
+     * based on their control type. The form field will add a class,
+     * `kbq-form-field-type-{{controlType}}` to its root element.
+     */
+    readonly controlType?: string;
+    /** Handles a click on the control's container. */
+    abstract onContainerClick(event: MouseEvent): void;
+    /** Focuses the control. */
+    abstract focus(options?: FocusOptions): void;
+    /** Opens control's overlay. */
+    abstract open?(): void;
+}
+
+/** @docs-private */
+interface KbqCleanerContext {
+    readonly control: KbqFormFieldControl<unknown>;
+    readonly keydownTarget: HTMLElement;
+    readonly clearByEscape: boolean;
+    /** Overrides the default `cleanerControl.ngControl?.reset()` behavior when the cleaner is activated. */
+    clear?(): void;
+}
+/** @docs-private */
+declare const KBQ_CLEANER_CONTEXT: InjectionToken<KbqCleanerContext | null>;
+/**
+ * Utility provider for `KBQ_CLEANER_CONTEXT`, built from a factory that resolves the current host's `KbqCleanerContext`.
+ * @docs-private
+ */
+declare const kbqCleanerFactoryProvider: (factory: () => KbqCleanerContext) => Provider;
+/** @docs-private */
+declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError(): Error;
 /**
  * Element to be placed in end of the form field.
  * Resets form control by click.
  */
-declare class KbqCleaner extends KbqIconButton {
+declare class KbqCleaner extends KbqIconButton implements AfterContentInit {
+    private readonly context;
+    /**
+     * Whether the cleaner can be displayed for the current control state.
+     * @docs-private
+     */
+    get canShow(): boolean;
+    private readonly a11yLocaleConfiguration;
+    /** Accessible name of the cleaner. Defaults to the localized "Clear". */
+    readonly ariaLabel: i0.InputSignal<string | undefined>;
+    /** @docs-private */
+    protected readonly accessibleName: i0.Signal<string>;
     constructor();
+    ngAfterContentInit(): void;
+    /**
+     * Clears the owning control in response to pointer or keyboard activation.
+     * @docs-private
+     */
+    clear(event: Event): void;
+    /**
+     * Clears the focused control when Escape handling is enabled.
+     */
+    private onKeyDown;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Hint text to be shown below the form field control. */
@@ -64,45 +152,6 @@ declare class KbqFieldset {
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqFieldset, "kbq-fieldset", never, {}, {}, ["legend"], ["[kbqLegend]", "*", "kbq-error", "kbq-hint, kbq-password-hint, kbq-reactive-password-hint"], true, never>;
 }
 
-/** An interface which allows a control to work inside of a `KbqFormField`. */
-declare abstract class KbqFormFieldControl<T> {
-    /** The value of the control. */
-    value: T | null;
-    /**
-     * Stream that emits whenever the state of the control changes such that the parent `KbqFormField`
-     * needs to run change detection.
-     */
-    readonly stateChanges: Observable<void>;
-    /** The element ID for this control. */
-    readonly id: string;
-    /** The placeholder for this control. */
-    readonly placeholder: string;
-    /** Gets the NgControl for this control. */
-    readonly ngControl: NgControl | null;
-    /** Whether the control is focused. */
-    readonly focused: boolean;
-    /** Whether the control is empty. */
-    readonly empty: boolean;
-    /** Whether the control is required. */
-    readonly required: boolean;
-    /** Whether the control is disabled. */
-    readonly disabled: boolean;
-    /** Whether the control is in an error state. */
-    readonly errorState: boolean;
-    /**
-     * An optional name for the control type that can be used to distinguish `kbq-form-field` elements
-     * based on their control type. The form field will add a class,
-     * `kbq-form-field-type-{{controlType}}` to its root element.
-     */
-    readonly controlType?: string;
-    /** Handles a click on the control's container. */
-    abstract onContainerClick(event: MouseEvent): void;
-    /** Focuses the control. */
-    abstract focus(options?: FocusOptions): void;
-    /** Opens control's overlay. */
-    abstract open?(): void;
-}
-
 declare enum PasswordRules {
     Length = 0,
     UpperLatin = 1,
@@ -157,14 +206,20 @@ declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewIn
     protected readonly nativeElement: HTMLElement;
     protected readonly focusMonitor: FocusMonitor;
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    private readonly a11yLocaleConfiguration;
     private readonly formField;
     readonly tabindex: i0.InputSignalWithTransform<number, unknown>;
     /**
      * @docs-private
      */
     readonly icon: i0.Signal<KbqIconButton>;
+    /**
+     * Tooltip shown while the password is visible. Reading it resolves to the tooltip matching the current
+     * visibility, so that the base trigger renders the right one.
+     */
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
+    /** Tooltip shown while the password is hidden. */
     readonly kbqTooltipHidden: i0.InputSignal<string | TemplateRef<any>>;
     protected hasError: boolean;
     /** Form field password control. */
@@ -181,23 +236,24 @@ declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewIn
      * @docs-private
      */
     get visibility(): 'hidden' | 'visible';
-    constructor();
     /**
+     * Accessible name of the icon-only toggle, describing the action it performs.
+     *
      * @docs-private
      */
+    protected get accessibleName(): string;
+    constructor();
     ngAfterContentInit(): void;
-    /**
-     * @docs-private
-     */
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     /**
      * @docs-private
      */
-    ngOnDestroy(): void;
+    toggle(event: Event): void;
     /**
-     * @docs-private
+     * Toggles password visibility for the Alt+F8 shortcut.
      */
-    toggle(event: KeyboardEvent): void;
+    private onFormFieldKeyDown;
     private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -209,10 +265,16 @@ declare class KbqPrefix {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[kbqPrefix]", ["kbqPrefix"], {}, {}, never, never, true, never>;
 }
 
-type KbqNumberInput = KbqFormFieldControl<unknown> & {
+/**
+ * Narrow structural contract for the control hosted by `kbqNumberInput`, duck-typed here to avoid
+ * a circular dependency between `@koobiq/components/form-field` and `@koobiq/components/input`.
+ */
+type KbqStepperControl = KbqFormFieldControl<unknown> & {
+    readonly controlType: 'input-number';
+    readonly step: number;
     stepUp: (step: number) => void;
+    /** Decreases the value by `step`. */
     stepDown: (step: number) => void;
-    step: number;
 };
 /**
  * Timeout duration when clicking the up/down arrow
@@ -228,6 +290,7 @@ declare const KBQ_STEPPER_INTERVAL_DELAY = 75;
 declare class KbqStepper {
     private readonly formField;
     private readonly document;
+    private readonly destroyRef;
     /** Emitted when the stepper is incremented. */
     readonly stepUp: OutputEmitterRef<void>;
     /** Emitted when the stepper is decremented. */
@@ -246,19 +309,21 @@ declare class KbqStepper {
      */
     private readonly longPress;
     /**
-     * Form field number control.
+     * Form field number control. Resolved once per control change instead of on every template read.
      *
      * @docs-private
      */
-    protected get control(): KbqNumberInput;
+    protected readonly control: i0.Signal<KbqStepperControl>;
+    constructor();
     /**
+     * @deprecated No longer required — `KbqStepper` resolves its control automatically via DI.
      * @docs-private
      */
-    connectTo(numberInput: KbqNumberInput): void;
+    connectTo(_: any): void;
     /** @docs-private */
-    onStepUp($event: MouseEvent): void;
+    onStepUp(event: MouseEvent): void;
     /** @docs-private */
-    onStepDown($event: MouseEvent): void;
+    onStepDown(event: MouseEvent): void;
     private handleStep;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", ["kbqStepper"], {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, true, never>;
@@ -272,8 +337,11 @@ declare class KbqSuffix {
 
 /** @docs-private */
 declare function getKbqFormFieldMissingControlError(): Error;
-/** @docs-private */
-declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError(): Error;
+/**
+ * Injection token used to access the owning `KbqFormField`.
+ * @docs-private
+ */
+declare const KBQ_FORM_FIELD: InjectionToken<KbqFormField>;
 /**
  * Default options for the kbq-form-field that can be configured using the `KBQ_FORM_FIELD_DEFAULT_OPTIONS`
  * injection token.
@@ -292,6 +360,7 @@ type KbqFormFieldDefaultOptions = Partial<{
 }>;
 /**
  * Injection token that can be used to configure the default options for all kbq-form-field's.
+ * @docs-private
  */
 declare const KBQ_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken<Partial<{
     /** Disables form field borders and shadows. */
@@ -313,6 +382,7 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
     private readonly changeDetectorRef;
     private readonly focusMonitor;
     private readonly defaultOptions;
+    private readonly customOverlayOrigin;
     /**
      * @docs-private
      */
@@ -376,6 +446,7 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
     hovered: boolean;
     /**
      * @docs-private
+     * @deprecated Unused. This property is no longer used by the form field and will be removed in a future version.
      */
     canCleanerClearByEsc: boolean;
     /** Whether the form field is invalid. */
@@ -457,6 +528,17 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
     get canShowCleaner(): boolean;
     /** Whether the form field is disabled. */
     get disabled(): boolean;
+    /**
+     * Whether the form field control's value was filled in by the browser. Controls that cannot be
+     * autofilled do not implement `autofilled`, and report `false` here.
+     *
+     * Reflected as `kbq-form-field_autofilled` for application code to key on. The autofill styling
+     * does not use it: CSS matches `:autofill` directly, in the same style pass the browser fills
+     * the field, where this arrives a frame or two later. Keeping the paint on one source also means
+     * a class left behind by a detached or re-attached control cannot tint a field the browser no
+     * longer considers autofilled.
+     */
+    get autofilled(): boolean;
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
@@ -475,10 +557,10 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
     onContainerClick(event: MouseEvent): void;
     /**
      * Handles keydown events.
-     *
+     * @deprecated Unused. This method is no longer called by the form field and will be removed in a future version.
      * @docs-private
      */
-    onKeyDown(event: KeyboardEvent): void;
+    onKeyDown(_event: KeyboardEvent): void;
     /**
      * @docs-private
      */
@@ -525,11 +607,9 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
  */
 declare class KbqTrim {
     private readonly noTrim;
-    private ngControl;
-    private original;
+    private readonly ngControl;
     constructor();
     trim(value: any): any;
-    private registerOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTrim, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, true, never>;
 }
@@ -565,5 +645,5 @@ declare class KbqFormFieldModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormFieldModule>;
 }
 
-export { KBQ_FORM_FIELD_DEFAULT_OPTIONS, KBQ_STEPPER_INITIAL_TIMEOUT, KBQ_STEPPER_INTERVAL_DELAY, KbqCleaner, KbqError, KbqFieldset, KbqFieldsetItem, KbqFormField, KbqFormFieldControl, KbqFormFieldModule, KbqHint, KbqLabel, KbqLegend, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqReactivePasswordHint, KbqStepper, KbqSuffix, KbqTrim, PasswordRules, getKbqFormFieldMissingControlError, getKbqFormFieldYouCanNotUseCleanerInNumberInputError, hasPasswordStrengthError, kbqFormFieldDefaultOptionsProvider, regExpPasswordValidator };
-export type { KbqFormFieldDefaultOptions };
+export { KBQ_CLEANER_CONTEXT, KBQ_FORM_FIELD, KBQ_FORM_FIELD_DEFAULT_OPTIONS, KBQ_STEPPER_INITIAL_TIMEOUT, KBQ_STEPPER_INTERVAL_DELAY, KbqCleaner, KbqError, KbqFieldset, KbqFieldsetItem, KbqFormField, KbqFormFieldControl, KbqFormFieldModule, KbqHint, KbqLabel, KbqLegend, KbqPasswordHint, KbqPasswordToggle, KbqPrefix, KbqReactivePasswordHint, KbqStepper, KbqSuffix, KbqTrim, PasswordRules, getKbqFormFieldMissingControlError, getKbqFormFieldYouCanNotUseCleanerInNumberInputError, hasPasswordStrengthError, kbqCleanerFactoryProvider, kbqFormFieldDefaultOptionsProvider, regExpPasswordValidator };
+export type { KbqCleanerContext, KbqFormFieldDefaultOptions };

package/icon/index.d.ts

@@ -1,11 +1,32 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, OnChanges, ElementRef, ChangeDetectorRef, DestroyRef, SimpleChanges, AfterViewInit, OnDestroy, InjectionToken, Provider } from '@angular/core';
+import { InjectionToken, Provider, AfterContentInit, OnChanges, ElementRef, ChangeDetectorRef, DestroyRef, SimpleChanges, AfterViewInit, OnDestroy } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqColorDirective } from '@koobiq/components/core';
 import { Observable, ReplaySubject } from 'rxjs';
+import { KbqColorDirective } from '@koobiq/components/core';
 import { SafeResourceUrl, SafeHtml } from '@angular/platform-browser';
 
+/**
+ * Narrow contract that lets `KbqIcon` react to a host's error state (e.g. `autoColor`) without
+ * depending on the host's concrete class.
+ * @docs-private
+ */
+interface KbqIconErrorStateContext {
+    /** Whether the host is currently in an error state. */
+    readonly errorState: boolean;
+    /** Emits whenever the host's state changes, prompting `KbqIcon` to re-check `errorState`. */
+    readonly stateChanges: Observable<void>;
+}
+/**
+ * Injection token used by `KbqIcon` to look up its `KbqIconErrorStateContext`.
+ * @docs-private
+ */
+declare const KBQ_ICON_ERROR_STATE_CONTEXT: InjectionToken<KbqIconErrorStateContext>;
+/**
+ * Utility provider for `KBQ_ICON_ERROR_STATE_CONTEXT`, built from a factory that resolves the current host's `KbqIconErrorStateContext`.
+ * @docs-private
+ */
+declare const kbqIconErrorStateContextFactoryProvider: (factory: () => KbqIconErrorStateContext) => Provider;
+
 interface KbqIconOptions {
     viewBox?: string;
     withCredentials?: boolean;
@@ -56,7 +77,11 @@ declare class KbqIconRegistry {
 
 declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnChanges {
     readonly elementRef: ElementRef<HTMLElement>;
-    protected readonly formField: _koobiq_components_core.KbqFormFieldRef | null;
+    /**
+     * Host providing error state for `autoColor`, when the icon sits inside one (e.g. a form field).
+     * @docs-private
+     */
+    protected readonly errorStateContext: KbqIconErrorStateContext | null;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly registry: KbqIconRegistry | null;
     protected readonly destroyRef: DestroyRef;
@@ -171,5 +196,5 @@ declare class KbqIconModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqIconModule>;
 }
 
-export { KBQ_ICONS_CONFIG, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
-export type { KbqIconButtonSize, KbqIconOptions, KbqIconResolver, KbqIconsConfig };
+export { KBQ_ICONS_CONFIG, KBQ_ICON_ERROR_STATE_CONTEXT, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconErrorStateContextFactoryProvider, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
+export type { KbqIconButtonSize, KbqIconErrorStateContext, KbqIconOptions, KbqIconResolver, KbqIconsConfig };

package/inline-edit/index.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, TemplateRef } from '@angular/core';
-import { CdkConnectedOverlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
+import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
+import { KbqSelect } from '@koobiq/components/select';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i1 from '@angular/cdk/a11y';
 
@@ -37,11 +38,24 @@ declare class KbqInlineEditMenu {
  * This component is projecting edit/view mode templates and adds keyboard/pointer handlers.
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
-declare class KbqInlineEdit {
+declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     private readonly overlay;
     private readonly document;
+    private readonly window;
     private readonly resizeObserver;
     protected readonly elementRef: ElementRef<HTMLElement>;
+    private readonly ngZone;
+    private readonly scrollDispatcher;
+    /**
+     * 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
+     * origin scrolls (including the programmatic scroll `showValidationTooltip()` uses to bring an
+     * invalid control into view), so it's overridden to `reposition()` here — passed directly as a
+     * per-instance override to this tooltip's `[kbqTooltipScrollStrategy]` input, rather than a DI
+     * override, so it doesn't leak into any `kbqTooltip` in projected content.
+     * @docs-private
+     */
+    protected readonly validationTooltipScrollStrategy: () => ScrollStrategy;
     /**
      * Whether to show save/cancel action buttons in edit mode.
      * @default false
@@ -94,6 +108,14 @@ declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly formFieldRefList: _angular_core.Signal<readonly KbqFormField[]>;
     /** @docs-private */
+    protected readonly selectRef: _angular_core.Signal<KbqSelect | undefined>;
+    /**
+     * Whether edit mode contains a single-value select. When true, edit mode shows only the
+     * dropdown panel instead of a bordered field - see the "Select-style editor" example.
+     * @docs-private
+     */
+    protected readonly isSingleSelect: _angular_core.Signal<boolean>;
+    /** @docs-private */
     protected overlayOrigin: HTMLElement;
     /** @docs-private */
     protected readonly tooltipTrigger: _angular_core.Signal<KbqTooltipTrigger>;
@@ -126,15 +148,46 @@ declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
+    /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
+    private validationTooltipScrollHandle;
     constructor();
     /** Manually switch mode */
     toggleMode(): void;
+    /**
+     * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
+     * anchor its overlay to this element instead of the form-field's own container.
+     * When no override is needed, the form-field falls back to its default.
+     * @docs-private
+     */
+    getConnectedOverlayOrigin(): ElementRef | undefined;
+    /** Saves the current value and returns to view mode, running the same validation as a normal save. */
+    commit(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */
     protected onAttach(): void;
     /** @docs-private */
     protected save($event?: Event): void;
+    /**
+     * Whether `overlayOrigin` is fully within the viewport and every registered `CdkScrollable`
+     * ancestor between it and the viewport. Ancestors without the `CdkScrollable` directive aren't
+     * visible to `ScrollDispatcher` and aren't checked — same limitation as the rest of overlay
+     * positioning.
+     */
+    private isOverlayOriginFullyVisible;
+    /**
+     * Shows the validation tooltip, scrolling the invalid control into view first if it isn't fully visible.
+     *
+     * `scrollIntoView({ behavior: 'smooth' })` finishes asynchronously — for a long scroll distance it can take
+     * a while — so showing the tooltip right away would anchor its overlay to a stale, pre-scroll position.
+     * `scrollend` reports when the scroll actually completes; the timeout is a fallback for browsers without
+     * `scrollend` support and cases where nothing ends up scrolling.
+     *
+     * TODO(DS-5420): "scroll an element into view, then act once settled" isn't inline-edit-specific — worth
+     * extracting into `packages/components/core` in a follow-up. Kept local to this fix for now.
+     */
+    private showValidationTooltip;
+    private showValidationTooltipIfStillInvalid;
     /** @docs-private */
     protected cancel(): void;
     /** @docs-private */
@@ -163,7 +216,7 @@ declare class KbqInlineEdit {
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqInlineEditModule {

package/inline-edit/inline-edit.scss

@@ -125,6 +125,12 @@
         }
     }
 
+    // Select-style editor: edit mode shows only the dropdown, not a bordered field, so the view
+    // text keeps showing through and just gets the "active" look instead.
+    &.kbq-inline-edit_select.kbq-inline-edit_edit {
+        --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
+    }
+
     &:hover,
     &.cdk-keyboard-focused,
     &.kbq-inline-edit_anchor-focused {
@@ -187,6 +193,10 @@
         padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
     }
 
+    &.kbq-inline-edit__panel_select .kbq-inline-edit__control-container {
+        display: none;
+    }
+
     .kbq-inline-edit__control-container,
     .kbq-inline-edit__action-button {
         box-shadow: var(--kbq-shadow-popup);

package/input/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, EventEmitter, OnChanges, DoCheck, ElementRef, Provider, SimpleChanges, InjectionToken } from '@angular/core';
+import { OnDestroy, EventEmitter, OnChanges, DoCheck, ElementRef, SimpleChanges, Provider, InjectionToken } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { ControlValueAccessor, NgControl, NgForm, FormGroupDirective, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { KbqNumberInputLocaleConfig, CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
@@ -38,7 +38,11 @@ declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAc
     empty: boolean;
     required: boolean;
     errorState: boolean;
-    controlType?: string | undefined;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    controlType: string;
     /**
      * Allows input and pasting of integers only.
      */
@@ -114,6 +118,11 @@ declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, OnDestroy
      * @docs-private
      */
     focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly autofilled: i0.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -248,6 +257,11 @@ declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, O
      * @docs-private
      */
     focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly autofilled: i0.Signal<boolean>;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -306,6 +320,7 @@ declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, O
     ngDoCheck(): void;
     updateErrorState(): void;
     checkRules(): void;
+    /** Toggles the native input type between password and text. */
     toggleType(): void;
     /** Focuses the input. */
     focus(): void;