@koobiq/components 20.2.0 → 20.3.0

package/filter-bar/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, TemplateRef, InjectionToken, ModelSignal, Signal, OutputEmitterRef, Type, Provider, OnInit, AfterContentInit } from '@angular/core';
 import * as _koobiq_components_core from '@koobiq/components/core';
-import { PopUpPlacements, KbqComponentColors, PopUpSizes, KbqOption, DateAdapter, DateFormatter, KbqPseudoCheckboxState } from '@koobiq/components/core';
+import { KbqPanelMaxHeight, PopUpPlacements, KbqComponentColors, PopUpSizes, KbqOption, DateAdapter, DateFormatter, KbqPseudoCheckboxState } from '@koobiq/components/core';
 import { Subject, BehaviorSubject, Observable } from 'rxjs';
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { FormControl, FormGroup } from '@angular/forms';
@@ -36,8 +36,6 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     protected readonly elementRef: ElementRef<HTMLElement>;
     private readonly inputModalityDetector;
     private readonly document;
-    /** Last known focus origin within the pipe. Used to preserve the keyboard focus ring on restore. */
-    private focusOrigin;
     /**
      * Whether this pipe has been destroyed. Guards deferred (`setTimeout`) work that could otherwise
      * read view queries or mutate `data` after the pipe was removed or the filter switched.
@@ -54,6 +52,17 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
      * own id-based `compareByValue`.
      */
     protected optionCompareWith?: (o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => boolean;
+    /**
+     * Values forwarded from the pipe template whose selection the user cannot remove. Only consumed by
+     * the multi-select pipe components; other pipe types ignore it.
+     */
+    protected lockedValues?: unknown[];
+    /**
+     * Maximum height of the dropdown panel's scrollable list, forwarded from the pipe template to the
+     * underlying `kbq-select` / `kbq-tree-select`. Only consumed by the select-family pipe components;
+     * `undefined` leaves the list at the select-family default of 256px.
+     */
+    protected panelMaxHeight?: KbqPanelMaxHeight;
     /**
      * Whether the current platform is a Mac.
      *
@@ -80,10 +89,33 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     onRemove(): void;
     /** clears the pipe and triggers changes */
     onClear(): void;
+    /**
+     * Value a cleared pipe is left with. Overridden by pipes that keep part of their value across a clear
+     * — the multi-select pipes hold on to their locked options.
+     *
+     * @docs-private
+     */
+    protected clearedValue(): V | null;
+    /**
+     * Focus origin to hand to {@link FocusMonitor} whenever this pipe moves focus programmatically, so the
+     * `.cdk-keyboard-focused` ring is painted for keyboard navigation only and never for a mouse-driven one.
+     *
+     * `InputModalityDetector.mostRecentModality` reflects what the user is doing *right now*, and is the
+     * only source that stays correct while a panel is open: panel content lives in the CDK overlay
+     * container, which is not a DOM descendant of the pipe host, so a focus origin captured on the host
+     * itself would freeze at "how the trigger was focused" and couldn't tell a click inside the panel apart
+     * from the keypress that opened it. The detector reacts only to `keydown`/`mousedown`/`touchstart`
+     * (never to hover or scroll), so merely moving the mouse cannot strip a keyboard user's ring, and it
+     * maps a screen reader's synthetic mousedown to `keyboard`. It falls back to `'program'` only before any
+     * such interaction has ever occurred on the page — at which point no ring should be shown anyway.
+     *
+     * @docs-private
+     */
+    protected get currentFocusOrigin(): NonNullable<FocusOrigin>;
     /**
      * Restores focus to the pipe's trigger button after a value is chosen or the panel closes.
-     * Focuses via {@link FocusMonitor} with the captured origin so a keyboard-driven interaction
-     * keeps its focus ring, while a mouse-driven one does not.
+     * Focuses via {@link FocusMonitor} with `currentFocusOrigin` so a keyboard-driven interaction keeps
+     * its focus ring, while a mouse-driven one does not.
      *
      * @docs-private
      */
@@ -166,6 +198,8 @@ declare const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION: {
         customPeriodFrom: string;
         customPeriodTo: string;
         customPeriodErrorHint: string;
+        customPeriodMinIntervalErrorHint: string;
+        customPeriodMaxIntervalErrorHint: string;
         backToPeriodSelection: string;
     };
 };
@@ -218,6 +252,8 @@ declare const KBQ_FILTER_BAR_CONFIGURATION: InjectionToken<{
         customPeriodFrom: string;
         customPeriodTo: string;
         customPeriodErrorHint: string;
+        customPeriodMinIntervalErrorHint: string;
+        customPeriodMaxIntervalErrorHint: string;
         backToPeriodSelection: string;
     };
 }>;
@@ -342,6 +378,59 @@ interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> {
      * is used. Ignored by other pipe types.
      */
     compareWith?: (o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => boolean;
+    /**
+     * Options whose selection cannot be removed by the user: they are always selected, render as
+     * `disabled` with a checked checkbox, and survive both "select all" toggling and clearing the pipe.
+     *
+     * Entries have the same shape as the entries of the owning pipe's `value`: `KbqSelectValue` objects
+     * for the `multiselect` pipe (matched with `compareWith`, falling back to the pipe's id-based
+     * comparator), and raw node values for the `multi-tree-select` pipe. Locking a tree branch locks its
+     * whole subtree. Ignored by other pipe types.
+     */
+    lockedValues?: unknown[];
+    /**
+     * Maximum height of the dropdown panel's scrollable list, in pixels, forwarded to the underlying
+     * `kbq-select` / `kbq-tree-select` of the `select`, `multiselect`, `tree-select` and `multi-tree-select`
+     * pipes. Omitting it — or passing `null` — keeps the select-family default of 256px, i.e. exactly eight
+     * 32px options.
+     *
+     * The cap covers the scrollable list only, and the list's own padding is added on top of it, so a
+     * multiple of the option height fits without a scrollbar. The pipe's search field is rendered above the
+     * list and adds to the panel's total height, while the "select all" row scrolls with the options and is
+     * counted by the cap. A value taller than the room left in the viewport is clipped by the overlay rather
+     * than scrolled. Ignored by other pipe types.
+     */
+    panelMaxHeight?: KbqPanelMaxHeight;
+    /**
+     * Earliest selectable instant for the `date` / `datetime` pipe custom period. Accepts any value the
+     * configured `DateAdapter` can deserialize (with the default Luxon adapter: an ISO-8601 string, a
+     * `Date`, or a `DateTime`). The `date` pipe uses only its day (pinned to the start of day). Ignored by
+     * other pipe types.
+     */
+    minDateTime?: unknown;
+    /**
+     * Latest selectable instant for the `date` / `datetime` pipe custom period. See
+     * {@link KbqPipeTemplate.minDateTime}. The `date` pipe uses only its day (pinned to the end of day).
+     * Ignored by other pipe types.
+     */
+    maxDateTime?: unknown;
+    /**
+     * Minimum length of the `date` / `datetime` pipe custom period (`end − start`), as a Luxon
+     * duration-like object, e.g. `{ days: 1 }` or `{ hours: 2 }`. When the selected period is shorter, the
+     * editor shows an error and disables Apply. Ignored by other pipe types.
+     *
+     * Unlike {@link KbqPipeTemplate.minDateTime}, this value is NOT deserialized through the configured
+     * `DateAdapter` — it is applied directly via the date value's own `.plus()`, so this option currently
+     * assumes the default Luxon adapter and is not portable to other `DateAdapter` implementations (e.g.
+     * the Moment adapter).
+     */
+    minInterval?: unknown;
+    /**
+     * Maximum length of the `date` / `datetime` pipe custom period (`end − start`). See
+     * {@link KbqPipeTemplate.minInterval}. When the selected period is longer, the editor shows an error and
+     * disables Apply. Ignored by other pipe types.
+     */
+    maxInterval?: unknown;
 }
 interface KbqSaveFilterError {
     text?: string;
@@ -403,6 +492,8 @@ declare class KbqFilterReset {
  */
 declare class KbqFilterSavePopover implements AfterViewInit {
     private readonly changeDetectorRef;
+    private readonly focusMonitor;
+    private readonly inputModalityDetector;
     /** Popover trigger owned by the parent (`KbqFilters` main button). */
     readonly popoverTrigger: _angular_core.InputSignal<KbqPopoverTrigger>;
     /** Filter bar, used for the save payload, the current filter and localized strings. */
@@ -666,6 +757,8 @@ declare class KbqFilterBar implements KbqFilterBarHost {
             customPeriodFrom: string;
             customPeriodTo: string;
             customPeriodErrorHint: string;
+            customPeriodMinIntervalErrorHint: string;
+            customPeriodMaxIntervalErrorHint: string;
             backToPeriodSelection: string;
         };
     } | null;
@@ -813,6 +906,8 @@ declare class KbqFilterRefresher {
             customPeriodFrom: string;
             customPeriodTo: string;
             customPeriodErrorHint: string;
+            customPeriodMinIntervalErrorHint: string;
+            customPeriodMaxIntervalErrorHint: string;
             backToPeriodSelection: string;
         };
     };
@@ -929,12 +1024,53 @@ declare abstract class KbqPipeDateBaseComponent<D> extends KbqBasePipe<KbqDateTi
     protected showStartCalendar: boolean;
     /** @docs-private */
     protected showEndCalendar: boolean;
+    /**
+     * Lower bound instant applied to the calendars, date inputs and (datetime) timepickers.
+     * @docs-private
+     */
+    protected min: any;
+    /**
+     * Upper bound instant applied to the calendars, date inputs and (datetime) timepickers.
+     * @docs-private
+     */
+    protected max: any;
+    /** Minimum length of the custom period (`end − start`), resolved from the template as a duration-like object. */
+    private minInterval?;
+    /** Maximum length of the custom period (`end − start`), resolved from the template as a duration-like object. */
+    private maxInterval?;
+    /** Canonical duration units (largest-first) used to render an interval limit faithfully to its config. */
+    private static readonly INTERVAL_UNITS;
     /** @docs-private */
     readonly popover: _angular_core.Signal<KbqPopoverTrigger>;
     /** @docs-private */
-    readonly listSelection: _angular_core.Signal<KbqListSelection | undefined>;
+    readonly listSelection: _angular_core.Signal<KbqListSelection<any> | undefined>;
     /** @docs-private */
     readonly returnButton: _angular_core.Signal<KbqButton>;
+    /** Resolves the `minDateTime` / `maxDateTime` bounds from the pipe template matching this pipe. */
+    private updateDateBounds;
+    /**
+     * Deserializes a `minDateTime` / `maxDateTime` template value, treating an unset (`null`/`undefined`)
+     * value and an unparseable one alike as "no bound", so call sites need no own null-check.
+     */
+    private toValidDate;
+    /**
+     * Validates a `minInterval` / `maxInterval` template value, treating anything that isn't a genuine
+     * duration-like object — or that resolves to an invalid or sub-second span — as "no constraint"
+     * instead of letting it crash `validateInterval`/`formatInterval` downstream (both call `.plus()` on
+     * it directly). A bare number is rejected too: Luxon would silently read it as milliseconds, which
+     * would otherwise disable the constraint without any error (e.g. a `{ days: 5 }` typo'd as `5`).
+     */
+    private toValidInterval;
+    /** Clamps `value` into the configured `[min, max]` bounds using full-instant comparison. */
+    private clampToBounds;
+    /**
+     * Cross-field validator flagging the custom period when its length (`end − start`) is outside the
+     * configured `[minInterval, maxInterval]`. Intervals are applied via `DateTime.plus`, so calendar units
+     * (months/years) are respected; unset intervals impose no constraint.
+     */
+    private validateInterval;
+    /** Formats a duration-like interval as a locale-aware human string via the formatter, e.g. "7 дней". */
+    private formatInterval;
     /** formatted value for period */
     get formattedValue(): string;
     /** Whether the current pipe is disabled. */
@@ -947,6 +1083,42 @@ declare abstract class KbqPipeDateBaseComponent<D> extends KbqBasePipe<KbqDateTi
     get end(): D;
     /** default object for end */
     get defaultEnd(): D;
+    /**
+     * Computes the default `start`/`end` pair used when the pipe has no stored value, clamped into
+     * `[min, max]` and, unlike a plain clamp, also reconciled against `[minInterval, maxInterval]`: `end`
+     * is extended or shrunk to fit, falling back to pulling `start` back when `[min, max]` doesn't leave
+     * enough room past `start` to satisfy `minInterval`. If `[min, max]` is itself narrower than
+     * `minInterval`, the result may still violate it — that's a contradictory host configuration (the
+     * same class of issue as `min` configured later than `max`), not something to further engineer around.
+     */
+    private computeDefaultRange;
+    /**
+     * Upper bound for the START date input: the earlier of the END value and the configured `max`.
+     * @docs-private
+     */
+    get startMax(): any;
+    /**
+     * Whether the period is invalid specifically because it runs backwards (`start` later than `end`) —
+     * the one case `customPeriodErrorHint` actually describes. Deliberately compares the values rather
+     * than keying off the START control's `kbqDatepickerMax` error: `startMax` is `min(max, end)`, so that
+     * error fires both for a backwards period AND for a start beyond the configured `max`, and cannot
+     * tell them apart. Everything else that can invalidate a control here — a value outside
+     * `[min, max]` (`kbqDatepickerMin`/`kbqDatepickerMax`, `kbqTimepickerLowerThenMin`/
+     * `kbqTimepickerHigherThenMax`) or unparseable typed text (`kbqDatepickerParse`/`kbqTimepickerParse`)
+     * — is left to the field's own error styling instead of being mislabelled as an ordering problem.
+     * @docs-private
+     */
+    protected get isPeriodInverted(): boolean;
+    /**
+     * Localized "period too short" hint with the `minInterval` limit interpolated and locale-formatted.
+     * @docs-private
+     */
+    get minIntervalErrorHint(): string;
+    /**
+     * Localized "period too long" hint with the `maxInterval` limit interpolated and locale-formatted.
+     * @docs-private
+     */
+    get maxIntervalErrorHint(): string;
     /** Whether the current pipe is empty. */
     get isEmpty(): boolean;
     ngAfterViewInit(): void;
@@ -964,6 +1136,11 @@ declare abstract class KbqPipeDateBaseComponent<D> extends KbqBasePipe<KbqDateTi
     onFocusStartInput(): void;
     onFocusEndInput(): void;
     hideCalendars(): void;
+    /**
+     * Whether this pipe edits the time part (`datetime`) or only the date (`date`). Gates whether the
+     * `minDateTime` / `maxDateTime` bounds keep their time or are pinned to day edges.
+     */
+    protected abstract usesTime(): boolean;
     /** Formats the selected range for display. */
     protected abstract formatRange(start: D, end: D): string;
     /** Default start value used when the pipe has no stored `start`. */
@@ -976,6 +1153,7 @@ declare abstract class KbqPipeDateBaseComponent<D> extends KbqBasePipe<KbqDateTi
 }
 
 declare class KbqPipeDateComponent<D> extends KbqPipeDateBaseComponent<D> {
+    protected usesTime(): boolean;
     protected formatRange(start: D, end: D): string;
     protected getDefaultStart(): D;
     protected getDefaultEnd(): D;
@@ -984,6 +1162,7 @@ declare class KbqPipeDateComponent<D> extends KbqPipeDateBaseComponent<D> {
 }
 
 declare class KbqPipeDatetimeComponent<D> extends KbqPipeDateBaseComponent<D> {
+    protected usesTime(): boolean;
     protected formatRange(start: D, end: D): string;
     protected getDefaultStart(): D;
     protected getDefaultEnd(): D;
@@ -997,9 +1176,9 @@ declare class KbqPipeInputComponent extends KbqBasePipe<string | null> implement
     /**
      * Input control.
      *
-     * Must stay nullable: `reset()` — all `KbqFormField.clearValue()` and its Escape handler ever call —
-     * resolves to `defaultValue`, which is `null` only while `nonNullable` is unset. `{ nonNullable: true }`
-     * would make `reset()` yield `''` and silently break the cleaner bridge below.
+     * Must stay nullable: `KbqCleaner` resets the control, and `reset()` resolves to `defaultValue`, which is
+     * `null` only while `nonNullable` is unset. `{ nonNullable: true }` would make `reset()` yield `''` and silently
+     * break the cleaner bridge below.
      */
     readonly control: FormControl<string | null>;
     /**
@@ -1048,15 +1227,24 @@ declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]>
     get allVisibleOptionsSelected(): boolean;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    /**
+     * Selection tally restricted to the options the user can actually toggle — the one place the
+     * "ignore the locked options" rule of "select all" is expressed. `null` while there is nothing to
+     * tally: no options came from the pipe template yet, or the view is not up.
+     */
+    private get unlockedTally();
     get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
     private readonly multiSelect;
+    constructor();
     /** @docs-private */
     ngOnInit(): void;
     ngAfterViewInit(): void;
     /** @docs-private */
     onSelect(item: KbqSelectValue[]): void;
+    /** Whether the option cannot be deselected by the user. Template-only. */
+    protected isLocked(item: KbqSelectValue): boolean;
     /** @docs-private */
     onClear(): void;
     /** @docs-private */
@@ -1124,12 +1312,27 @@ declare class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase<KbqS
     get numberOfSelectedLeaves(): number;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    /**
+     * Selection tally restricted to the nodes the user can actually toggle — the one place the "ignore the
+     * locked nodes" rule of "select all" is expressed. `null` until the tree data has been built.
+     *
+     * `triggerValues` is derived from the very same selection model as `selected`, so either would do.
+     */
+    private get unlockedTally();
     get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
+    /** Flat nodes whose selection the user cannot remove, the subtree of a locked branch included. */
+    private get lockedDataNodes();
+    /**
+     * Values of every locked node, the subtree of a locked branch included. Resolved once per template
+     * change rather than on demand — `isEmpty` reads it on every change-detection pass.
+     */
+    private lockedNodeValues;
     private readonly multiSelect;
     constructor();
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     isNodeSelectAll(_: number, nodeData: KbqTreeSelectFlatNode): boolean;
     onSelect({ value: option }: {
         value: any;
@@ -1143,10 +1346,20 @@ declare class KbqPipeMultiTreeSelectComponent extends KbqTreeSelectPipeBase<KbqS
      */
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     onClear(): void;
+    /** Clearing keeps the locked values; with none configured the pipe resets to `null` as before. */
+    protected clearedValue(): KbqSelectValue[] | null;
     /** @docs-private */
     onClose(): void;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    /**
+     * Whether the node cannot be deselected: either its own value is locked, or it descends from a locked
+     * branch. Locking a branch has to lock its subtree — deselecting a child would otherwise switch the
+     * locked parent's own checkbox off.
+     */
+    private isLockedNode;
+    /** Puts back every locked node the tree's own cascades may have deselected. */
+    private enforceLockedNodes;
     private toggleParents;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqPipeMultiTreeSelectComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqPipeMultiTreeSelectComponent, "kbq-pipe-multi-tree-select", never, {}, {}, never, never, true, never>;

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -1,5 +1,3 @@
-@use '../filter-bar-theme' as *;
-
 .kbq-pipe__multi-tree-select {
     .kbq-pipe__value {
         margin-inline-start: var(--kbq-size-xxs);
@@ -15,7 +13,3 @@
         height: unset;
     }
 }
-
-.kbq-pipe-multi-tree-select__panel .kbq-select__content {
-    @include kbq-filter-bar-panel-content-max-height();
-}

package/filter-bar/pipes/pipe-multiselect.scss

@@ -1,5 +1,3 @@
-@use '../filter-bar-theme' as *;
-
 .kbq-pipe__multiselect {
     .kbq-pipe__value {
         margin-inline-start: var(--kbq-size-xxs);
@@ -11,7 +9,3 @@
         margin-inline-start: var(--kbq-size-xs);
     }
 }
-
-.kbq-pipe-multiselect__panel .kbq-select__content {
-    @include kbq-filter-bar-panel-content-max-height();
-}

package/filter-bar/pipes/pipe-tree-select.scss

@@ -1,9 +1,3 @@
-@use '../filter-bar-theme' as *;
-
-.kbq-pipe-tree-select__panel .kbq-tree-select__content {
-    @include kbq-filter-bar-panel-content-max-height();
-}
-
 .kbq-pipe__tree-select {
     .kbq-select__trigger {
         height: unset;

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;