@koobiq/components 20.1.0 → 20.3.0

package/form-field/_form-field-theme.scss

@@ -22,7 +22,18 @@
     .kbq-input,
     .kbq-tag-input,
     .kbq-textarea {
-        color: var(--kbq-form-field-#{$state-name}-text);
+        // Private, and only for the autofill rule near the bottom of this file. The browser forces
+        // `color` on an autofilled control with a UA `!important` rule, so that rule has to repaint
+        // through `-webkit-text-fill-color` — and to do that it has to know what *this* state
+        // wanted. Declared in the same rule as the `color` that reads it, so one cascade decides
+        // both and they cannot drift apart.
+        // Published as a variable rather than emitting an autofill rule per state: this mixin runs
+        // five times, once of them nested under eight `kbq-form-field-type-*` classes, so the
+        // per-state form compiled to 84 selectors for two declarations — and gave a text colour a
+        // specificity of (0,7,0), which no consumer could override without `!important`.
+        --kbq-form-field-resolved-text: var(--kbq-form-field-#{$state-name}-text);
+
+        color: var(--kbq-form-field-resolved-text);
 
         &::placeholder {
             color: var(--kbq-form-field-#{$state-name}-placeholder);
@@ -42,21 +53,47 @@
     .kbq-form-field {
         @include _kbq-form-field-state(default);
 
+        // `color-scheme` is what stops the browser painting its own autofill highlight from the
+        // light palette in a dark application. It is declared once for the whole theme in
+        // `kbq-core-theme()`, not here: scoping it to the form field inverted nested themes, since
+        // both the base and the dark rule land on the same specificity and the dark one then won on
+        // source order under any `.kbq-dark` ancestor, however near a `.kbq-light` was.
+
+        // The browser paints its own background on an autofilled control with a UA `!important`
+        // declaration that no author rule can out-rank. It is suppressed rather than painted over:
+        // a running transition sits *above* important-UA in the cascade, so animating
+        // `background-color` over an absurd duration parks its used value at the control's own
+        // transparent background — every control here is already transparent, `.kbq-input` and
+        // `.kbq-tag-input` through `kbq-reset-input`, `.kbq-textarea` in its own stylesheet — and
+        // the container's tint shows through untouched.
+        // https://css-tricks.com/almanac/selectors/a/autofill/
+
+        // Painting over it instead would be wrong: the tint token is translucent, so a second coat
+        // on the control would make its rectangle visibly darker than the container's padding
+        // around it, and would still not hide the UA colour underneath.
         & .kbq-input,
-        & .kbq-tag-input {
-            //https://css-tricks.com/almanac/selectors/a/autofill/
-            &:-webkit-autofill,
-            &:-webkit-autofill:hover,
-            &:-webkit-autofill:focus {
-                // set as transparent to not override container background-color;
-                --kbq-form-field-states-autofill-background: var(--kbq-background-transparent);
-                -webkit-box-shadow: inset 0 0 0 40rem var(--kbq-form-field-states-autofill-background);
-                -webkit-text-fill-color: var(--kbq-form-field-states-autofill-text);
-                caret-color: var(--kbq-form-field-states-autofill-text);
-
-                /* hide browser default autofill background, no matter what background color set */
-                transition: background-color 5000s ease-in-out;
-                background-color: var(--kbq-background-transparent) !important;
+        & .kbq-tag-input,
+        & .kbq-textarea {
+            // `:is()` takes a forgiving selector list, so every browser keeps whichever of the two
+            // spellings it knows. A plain comma list would not: one unknown pseudo-class
+            // invalidates the whole list.
+            &:is(:autofill, :-webkit-autofill) {
+                // Longhands rather than the shorthand, which would also reset `transition-delay`
+                // and `transition-timing-function`. Nothing transitions on these controls today,
+                // but the next thing that does should not break here.
+                // The duration has to outlast the page, not merely be large: a transition that
+                // *finishes* lands on its end value, which is the browser's own background, and
+                // there is no recovering it without a reload. At 5000s that happened after 83
+                // minutes — a dashboard left open over lunch.
+                transition-property: background-color;
+                transition-duration: 600000s;
+
+                // Repaints what the state cascade resolved above, so an autofilled control that is
+                // also invalid or disabled still gets that state's text colour. The fallback covers
+                // a control outside any state block, which cannot happen today because `default`
+                // always runs.
+                -webkit-text-fill-color: var(--kbq-form-field-resolved-text, var(--kbq-form-field-default-text));
+                caret-color: var(--kbq-form-field-resolved-text, var(--kbq-form-field-default-text));
             }
         }
 
@@ -68,6 +105,7 @@
         }
 
         &.kbq-form-field-type-input,
+        &.kbq-form-field-type-input-number,
         &.kbq-form-field-type-textarea,
         &.kbq-form-field-type-timepicker,
         &.kbq-form-field-type-datepicker,
@@ -107,11 +145,29 @@
             color: var(--kbq-form-field-label-color);
         }
 
-        // todo quick fix for bug DS-4060. Technical debt DS-4096
-        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill),
-        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill:hover),
-        & .kbq-form-field__container:has(:is(.kbq-input, .kbq-tag-input):-webkit-autofill:focus) {
-            background-color: var(--kbq-form-field-states-autofill-background) !important;
+        // Autofill says "the browser filled this in" and nothing more, so it contributes a tint and
+        // leaves every other channel — border, focus ring, text colour — to the state the field is
+        // actually in.
+
+        // The tint goes into `background-image` rather than `background-color`, and that is what
+        // makes the sentence above true. The state keeps ownership of `background-color`, the tint
+        // composites over whatever it resolved, and no priority conflict is possible: an invalid
+        // field stays error-red *and* tinted, a field in an overlay keeps its card background.
+        // Painting `background-color` instead is what DS-4060 did, and it needed `!important` to
+        // land — which is exactly why it then out-ranked error, disabled and the overlay.
+
+        // One arm, not three. The rule this replaces spelled out `:-webkit-autofill`,
+        // `:-webkit-autofill:hover` and `:-webkit-autofill:focus`, mirroring the UA's own selector
+        // list — but the extra two match the same elements as the bare pseudo-class, and nothing in
+        // the UA styles this container. The control rule above dropped them for the same reason.
+        &
+            .kbq-form-field__container:has(
+                :is(.kbq-input, .kbq-tag-input, .kbq-textarea):is(:autofill, :-webkit-autofill)
+            ) {
+            background-image: linear-gradient(
+                var(--kbq-form-field-states-autofill-background),
+                var(--kbq-form-field-states-autofill-background)
+            );
         }
 
         &.kbq-disabled {

package/form-field/fieldset.scss

@@ -20,6 +20,16 @@
     }
 
     .kbq-form-field {
+        // Force a single-token height, matching how the button computes its own height, so both
+        // round to the same pixel value. Without this, form-field's height is the sum of independently
+        // rounded border/padding/line-height values, which can drift 1px from the button's height after
+        // a resize-triggered subpixel layout recalculation, breaking the merged border line.
+        height: var(--kbq-form-field-size-height);
+
+        .kbq-form-field__content {
+            height: 100%;
+        }
+
         // set selector specifity to 0 , so focused state will override z-index
         :where(&.kbq-form-field_invalid, &.kbq-form-field_has-validate-directive.ng-invalid) {
             z-index: 2;

package/form-field/form-field-tokens.scss

@@ -36,9 +36,23 @@
     --kbq-form-field-states-error-placeholder: var(--kbq-foreground-error-tertiary);
     --kbq-form-field-states-error-text: var(--kbq-foreground-error);
     --kbq-form-field-states-error-focused-focus-outline: var(--kbq-states-line-focus-error);
-    --kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
+    /* Autofill only tints the background: it is a hint that the browser filled the field, not a
+       state of its own, so the border, the focus ring and the text colour stay with the state that
+       owns them. Background is the only one of these four the component reads; the other three are
+       declared and no longer read, and overriding them has no effect (#DS-4096). They are kept
+       rather than deleted because `@koobiq/design-tokens` publishes all four names globally
+       anyway — removing them here would not take the names out of the CSS a consumer loads — and
+       upstream already marks the set `deprecated`, so it retires them on its own schedule.
+       This file is nominally generated by tools/tokens/build-each-component.js, but has been
+       hand-maintained for a long time and no npm script runs the generator. Re-running it would
+       revert the background below to `theme-fade` (see DS-2873) and drop the size tokens above. */
     --kbq-form-field-states-autofill-background: var(--kbq-background-theme-less);
+    /* No longer read: it aliased the focus colour, so a merely filled field read as focused. */
+    --kbq-form-field-states-autofill-border-color: var(--kbq-states-line-focus-theme);
+    /* No longer read, and never observable: an autofilled field has a value, so no placeholder. */
     --kbq-form-field-states-autofill-placeholder: var(--kbq-foreground-contrast-tertiary);
+    /* No longer read: it forced one colour on every state, which is what lost the error and
+       disabled text colours. The state owns the text now. */
     --kbq-form-field-states-autofill-text: var(--kbq-foreground-contrast);
     --kbq-form-field-states-disabled-border-color: var(--kbq-states-line-disabled);
     --kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);

package/form-field/form-field.scss

@@ -91,6 +91,14 @@
             max-width: 100%;
         }
 
+        // The rule above drops the indent because the tags carry one of their own. A custom trigger
+        // replaces the tag list entirely, so nothing is left to provide it and the projected content
+        // would sit tighter to the border than a single select's value — put the indent back.
+        // Same specificity as the rule above, so it has to stay after it.
+        &:has(.kbq-select_multiple, .kbq-select_multiline):has(kbq-select-trigger, [kbq-select-trigger]) {
+            padding-left: var(--kbq-form-field-size-infix-left-padding);
+        }
+
         & .kbq-input,
         & .kbq-tag-input {
             padding-right: var(--kbq-form-field-size-infix-right-padding);
@@ -109,27 +117,15 @@
     &.cdk-focused,
     &.kbq-focused {
         z-index: 3;
-
-        .kbq-input {
-            &:-webkit-autofill,
-            &:-webkit-autofill:hover,
-            &:-webkit-autofill:focus {
-                min-height: calc(
-                    var(--kbq-form-field-size-height) - var(--kbq-form-field-size-border-width) *
-                        2 - var(--kbq-form-field-size-focus-outline-width) * 2
-                );
-
-                --kbq-input-size-padding-vertical: calc(
-                    var(--kbq-size-xs) - var(--kbq-form-field-size-border-width) - var(
-                            --kbq-form-field-size-focus-outline-width
-                        )
-                );
-
-                margin: var(--kbq-form-field-size-border-width) 0;
-            }
-        }
     }
 
+    // No autofill geometry here on purpose. DS-4950 shrank the autofilled control by twice the
+    // focus-outline width and handed the pixels back as margin, because the control's own autofill
+    // background was painting over the 1px ring the container draws as an inset shadow. It has
+    // nothing left to paint over: the control is transparent — the browser's background is
+    // suppressed, not replaced — and the tint lives on the container, under a shadow that is drawn
+    // above it. Reinstating any of it would only move the text on focus.
+
     &.kbq-form-field_without-borders .kbq-form-field__container,
     &.kbq-form-field_no-borders .kbq-form-field__container {
         border-color: transparent !important;

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
      */
@@ -565,5 +647,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/icon-button.scss

@@ -9,7 +9,9 @@
 
     padding: var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding);
 
-    &.kbq-icon-button_small {
+    // @deprcated Will be removed in the next major release (#DS-5338)
+    &.kbq-icon-button_small,
+    &.kbq-icon-button_compact {
         padding: var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding);
     }