@koobiq/components 20.3.1 → 20.4.0

package/file-upload/file-upload.scss

@@ -17,24 +17,6 @@
         align-items: baseline;
         gap: var(--dropzone-gap, var(--kbq-file-upload-size-dropzone-content-gap-horizontal));
     }
-
-    .kbq-ellipsis-center {
-        position: relative;
-        display: flex;
-
-        .kbq-ellipsis-center_data-text-start {
-            flex: 0 1 auto;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: pre;
-        }
-
-        .kbq-ellipsis-center_data-text-end {
-            flex: 1 0 auto;
-            overflow: hidden;
-            white-space: pre;
-        }
-    }
 }
 
 .kbq-file-upload__hint {

package/file-upload/index.d.ts

@@ -129,7 +129,7 @@ declare class KbqFileList<T> {
     addArray(items: T[]): void;
     /** Replaces the current list with the specified items and emits event. */
     replace(items: T[]): void;
-    /** Removes the first occurrence of the specified item. Returns removed items and emits event. */
+    /** Removes every occurrence of the specified item. Returns the removed items. */
     remove(item: T): T[];
     /** Removes item at specified index. Returns removed items and emits event. */
     removeAt(index: number): T[];

package/file-upload/multiple-file-upload.component.scss

@@ -225,6 +225,13 @@
         align-items: center;
         flex: 1;
 
+        // The file name is rendered into `white-space: pre` spans by `kbqEllipsisCenter`, and the tail span
+        // is `flex-shrink: 0`. Under the default `min-width: auto` that intrinsic width propagates up
+        // through every flex item here, so a long name widens the row past the list instead of being
+        // truncated — and `kbqEllipsisCenter` measures the overflowed `clientWidth`, so it truncates to a
+        // width that is off-screen.
+        min-width: 0;
+
         .kbq-file-upload__grid-cell {
             padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
         }
@@ -235,9 +242,13 @@
             flex-grow: 1;
             gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
             padding-left: var(--kbq-size-m);
+            min-width: 0;
 
             .kbq-file-item__text {
-                width: 90%;
+                // Takes whatever is left between the icon and the size column. The `min-width: 0` and
+                // `overflow: hidden` that let it shrink below the name's intrinsic width come from
+                // `.kbq-ellipsis-center`, which this element also is.
+                flex: 1 1 auto;
             }
         }
 
@@ -253,8 +264,9 @@
             width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
-            flex-grow: 1;
-            flex-shrink: 1;
+            // The three widths above already pin the column, so growing and shrinking were both inert.
+            // Stated outright now that the file-name cell beside it actually shrinks.
+            flex: none;
             text-align: left;
         }
 

package/file-upload/single-file-upload.component.scss

@@ -113,17 +113,25 @@
 
         .kbq-file-item {
             width: 100%;
+            // The row sits beside the delete button in a flex container, and the wrapper below beside the
+            // size column. `min-width: auto` would let the file name's intrinsic width propagate up through
+            // both and push the row past the component instead of being shortened — and `kbqEllipsisCenter`
+            // measures the overflowed `clientWidth`, so it would shorten to a width that is off-screen.
+            min-width: 0;
 
             .kbq-file-item__text-wrapper {
                 display: flex;
                 align-items: center;
                 width: 100%;
+                min-width: 0;
 
                 gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
 
                 .kbq-file-item__text {
-                    width: 120px;
-                    flex-grow: 1;
+                    // Takes whatever is left beside the icon and the size column. The `min-width: 0` and
+                    // `overflow: hidden` that let it shrink below the name's intrinsic width come from
+                    // `.kbq-ellipsis-center`, which this element also is.
+                    flex: 1 1 auto;
                 }
             }
 

package/filter-bar/filter-bar-tokens.scss

@@ -1,5 +1,6 @@
 .kbq-filter-bar {
-    /* Maximum width of a pipe / filters trigger before its label truncates. */
+    /* Maximum width of a whole pipe, clear and remove buttons included, and of the filters trigger.
+       The input pipe keeps its own width. */
     --kbq-filter-bar-pipe-max-width: 320px;
     /* Fixed width of the input pipe's field. Unlike the other pipes it never shrink-wraps its
        content, so this is a width rather than a max-width. */

package/filter-bar/index.d.ts

@@ -63,6 +63,11 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
      * `undefined` leaves the list at the select-family default of 256px.
      */
     protected panelMaxHeight?: KbqPanelMaxHeight;
+    /**
+     * Whether the dropdown's option names and captions wrap instead of being truncated, forwarded from
+     * the pipe template. Only consumed by the select / multi-select pipe components.
+     */
+    protected multilineOptions?: boolean;
     /**
      * Whether the current platform is a Mac.
      *
@@ -125,6 +130,13 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBasePipe<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBasePipe<any>, never, never, {}, {}, never, never, true, never>;
 }
+/**
+ * Keeps a pipe part at its natural width while its text is shorter than `maxSymbolsForFitContent`.
+ *
+ * @deprecated A pipe lays its name and value out as two shrinkable grid tracks, which already keeps a
+ * short part intact; on a grid item this `min-width` only pushes the part past its track, where it is
+ * clipped without an ellipsis. Will be removed in the next major.
+ */
 declare class KbqPipeMinWidth {
     /** KbqFilterBar instance */
     protected readonly filterBar: KbqFilterBarHost | null;
@@ -293,7 +305,11 @@ interface KbqFilterBarHost {
     readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>;
     /** Internal pipe-template changes. */
     readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>;
-    /** Requests opening a pipe after it is added. */
+    /**
+     * Requests that an already-added pipe open its pop-up. A one-shot command handled synchronously by the
+     * pipes that exist when it is dispatched, not retained state — clear it back to `null` after `next`. A
+     * pipe that has not been rendered yet is opened with `openOnAdd` on the pipe itself, not through this.
+     */
     readonly openPipe: BehaviorSubject<string | number | null>;
     /** Emits when the filter is reset. */
     readonly onResetFilter: BehaviorSubject<boolean>;
@@ -307,7 +323,11 @@ interface KbqFilterBarHost {
  * `useExisting`, so pipes `inject(KBQ_FILTER_BAR_HOST)` instead of depending on the concrete bar.
  */
 declare const KBQ_FILTER_BAR_HOST: InjectionToken<KbqFilterBarHost>;
-/** Injection Token for providing pipes in filter-bar */
+/**
+ * Injection Token for providing pipes in filter-bar. Defaults to {@link defaultFilterBarPipes} so the
+ * standalone `KbqFilterBar` works without `KbqFilterBarModule`; override it with
+ * {@link kbqFilterBarPipesProvider} or a provider of your own.
+ */
 declare const KBQ_FILTER_BAR_PIPES: InjectionToken<Map<KbqPipeType, Type<KbqBasePipe<unknown>>>>;
 /** Utility provider for `KBQ_FILTER_BAR_PIPES`. */
 declare const kbqFilterBarPipesProvider: () => Provider;
@@ -337,6 +357,11 @@ interface KbqSelectValue {
     value: unknown;
     /** Optional stable identifier used by the select/multi-select pipe comparators. */
     id?: string | number;
+    /**
+     * Second line under `name` in the dropdown of the `select` / `multiselect` pipes. Ignored where a
+     * `valueTemplate` owns the option.
+     */
+    caption?: string;
 }
 interface KbqFilter {
     name: string;
@@ -401,6 +426,12 @@ interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> {
      * than scrolled. Ignored by other pipe types.
      */
     panelMaxHeight?: KbqPanelMaxHeight;
+    /**
+     * Whether option names and captions in the dropdown wrap instead of being truncated to one line.
+     * Applies to the `select` and `multiselect` pipes; ignored by the other pipe types. Unrelated to
+     * `KbqSelect.multiline`, which lays the trigger's values out in rows.
+     */
+    multilineOptions?: boolean;
     /**
      * 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
@@ -814,7 +845,7 @@ declare class KbqFilterBar implements KbqFilterBarHost {
     readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>;
     /** internal changes in templates */
     readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>;
-    /** this subject need for opens pipe after adding
+    /** Requests that an already-added pipe open its pop-up. See {@link KbqFilterBarHost.openPipe}.
      * @docs-private */
     readonly openPipe: BehaviorSubject<string | number | null>;
     constructor();
@@ -987,7 +1018,13 @@ declare class KbqPipeState<T> {
     /** KbqFilterBar instance
      * @docs-private */
     private readonly filterBar;
-    /** Pipe state used to calculate/update the button style. */
+    /**
+     * Pipe state the styled button belongs to.
+     *
+     * Carries the binding this directive's selector matches. Every binding passes the pipe's own `data`,
+     * which is mutated in place, so this value is a constant for the life of the pipe and the style is
+     * derived from `pipe.isEmpty` instead.
+     */
     readonly state: _angular_core.InputSignal<T | null>;
     constructor();
     private updateState;

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

@@ -5,27 +5,34 @@
     display: flex;
     flex-direction: row;
 
+    // Caps the whole pipe, clear and remove buttons included. The label's grid tracks have no
+    // min-content, so the trigger gives way down to its own paddings without `min-width: 0`.
+    max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
     max-height: 32px;
 
     & .kbq-select .kbq-select__trigger {
         height: unset;
     }
 
-    .kbq-button-wrapper {
-        max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
+    // The button's default slot is a flex row; a pipe puts its own two independently truncated parts
+    // (name + value) in there as two shrinkable grid tracks instead: as flex items they would give up
+    // the same percentage, which wipes out a short name long before a long value becomes unreadable.
+    // Qualified with `.kbq-button` on purpose: the base rule is `.kbq-button .kbq-button-text`, so a
+    // two-class selector would only win on source order, which differs between app bundles.
+    .kbq-button .kbq-button-text {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(0, max-content);
+        align-items: center;
     }
 
     .kbq-pipe__name {
         @include common.kbq-truncate-line();
-
-        flex: 1 1 auto;
     }
 
     .kbq-pipe__value {
         @include common.kbq-truncate-line();
 
-        flex: 1 1 auto;
-
         &:not(.kbq-pipe__value_empty) {
             margin-inline-start: 4px;
         }
@@ -83,4 +90,15 @@
     }
 }
 
+// The dropdown is portaled into the overlay, so it is reachable only through the pipe's `panelClass`.
+.kbq-pipe-select__panel_multiline,
+.kbq-pipe-multiselect__panel_multiline {
+    // `overflow: hidden` from `kbq-list-text()` stays: it gives the flex item a minimum size of 0, so the
+    // text shrinks to the option width instead of stretching the row.
+    .kbq-option-text {
+        white-space: normal;
+        overflow-wrap: break-word;
+    }
+}
+
 @include kbq-filter-bar-pipe-theme();

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

@@ -1,7 +1,9 @@
 .kbq-pipe.kbq-pipe__input {
     // Fall back like base-pipe.scss does for --kbq-filter-bar-pipe-max-width: the token is declared on
-    // .kbq-filter-bar, which a pipe rendered outside a bar never sees.
+    // .kbq-filter-bar, which a pipe rendered outside a bar never sees. The width is explicit, so the cap
+    // every other pipe takes from that token does not apply here.
     width: var(--kbq-filter-bar-pipe-input-width, 240px);
+    max-width: none;
     flex: none;
 
     .kbq-form-field {

package/inline-edit/index.d.ts

@@ -1,14 +1,46 @@
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef } from '@angular/core';
+import { InjectionToken, ElementRef, TemplateRef } from '@angular/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 { Observable } from 'rxjs';
 import * as i1 from '@angular/cdk/a11y';
 
+/** Delay before the save progress state appears, so a fast response causes no flicker. */
+declare const kbqInlineEditSaveProgressDelay = 100;
+/** Minimum time the save progress state stays once it has appeared. */
+declare const kbqInlineEditSaveProgressMinimumDuration = 300;
 type KbqInlineEditMode = 'view' | 'edit';
+/**
+ * Saves the edited value, e.g. sends it to a server. Only the first emission counts, and the observable must emit
+ * or complete: destroying the row does not cancel it, so one that never settles keeps the row in memory.
+ *
+ * Called without a receiver, so bind an arrow function rather than a method that relies on `this`.
+ */
+type KbqInlineEditSaveHandler = () => Observable<unknown>;
+/** State of the save request started by `saveHandler`. `progress` is `pending` past the indicator delay. */
+type KbqInlineEditSaveStatus = 'idle' | 'pending' | 'progress' | 'error';
+/** Recovery a failed-save notification can offer: retry, edit again, discard the unsaved value. */
+interface KbqInlineEditSaveRecovery {
+    retrySave(): void;
+    toggleMode(): void;
+    rollback(): void;
+}
+/** Failed save, reported through `saveError` and `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`. */
+interface KbqInlineEditSaveErrorContext<E = any> {
+    /** Parameterise the interface to type this. */
+    readonly error: E;
+    /** Inline edit whose save failed. */
+    readonly inlineEdit: KbqInlineEditSaveRecovery;
+}
+/** Reaction to a failed save, e.g. opening a toast. */
+type KbqInlineEditSaveErrorHandler = (context: KbqInlineEditSaveErrorContext) => void;
+/** Reports every failed save the same way across the application. Declare it in the root injector. */
+declare const KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER: InjectionToken<KbqInlineEditSaveErrorHandler>;
 /** @docs-private */
 declare class KbqFocusRegionItem {
     readonly tabOut: _angular_core.OutputEmitterRef<KeyboardEvent>;
@@ -38,7 +70,9 @@ 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 implements KbqConnectedOverlayOriginProvider {
+declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInlineEditSaveRecovery {
+    /** Texts of the save status announcements. */
+    protected readonly a11yLocaleConfiguration: _angular_core.Signal<_koobiq_components_core.KbqA11yLocaleConfiguration>;
     private readonly overlay;
     private readonly document;
     private readonly window;
@@ -46,6 +80,7 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly elementRef: ElementRef<HTMLElement>;
     private readonly ngZone;
     private readonly scrollDispatcher;
+    private readonly destroyRef;
     /**
      * 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
@@ -83,6 +118,22 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     readonly getValueHandler: _angular_core.InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
     readonly setValueHandler: _angular_core.InputSignal<((value: any) => void) | undefined>;
+    /**
+     * Whether the value still equals the one the editor opened with, in which case `saveHandler` is not called.
+     * The default suits text and numbers; bind your own for arrays and objects, or `null` to send every time.
+     * A failed save is always retried, however the values compare.
+     */
+    readonly compareWith: _angular_core.InputSignal<((a: any, b: any) => boolean) | null>;
+    /**
+     * Saves a valid value in the background: edit mode closes right away and view mode reports how the request
+     * went. Without it, a valid value is saved immediately.
+     */
+    readonly saveHandler: _angular_core.InputSignal<KbqInlineEditSaveHandler | undefined>;
+    /**
+     * Reaction to a failed save for this inline edit alone. Defaults to `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`;
+     * bind `null` to leave it without one.
+     */
+    readonly saveErrorHandler: _angular_core.InputSignal<KbqInlineEditSaveErrorHandler | null>;
     /** Customizable function that checks if saving on enter available. */
     readonly canSaveOnEnter: _angular_core.InputSignal<(event: KeyboardEvent) => boolean>;
     /**
@@ -97,6 +148,8 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly saved: _angular_core.OutputEmitterRef<void>;
     /** Emitted when the inline edit is canceled and changes are discarded. */
     protected readonly canceled: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when a `saveHandler` request fails. Silent once the row is destroyed; `saveErrorHandler` is not. */
+    protected readonly saveError: _angular_core.OutputEmitterRef<KbqInlineEditSaveErrorContext<any>>;
     /** Emitted when mode switched to edit/view */
     protected readonly modeChange: _angular_core.OutputEmitterRef<KbqInlineEditMode>;
     /** @docs-private */
@@ -133,6 +186,17 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly scrollStrategy: _angular_core.WritableSignal<ScrollStrategy>;
     /** @docs-private */
     readonly modeAsReadonly: _angular_core.Signal<KbqInlineEditMode>;
+    private readonly saveStatusSource;
+    /** State of the background save started by `saveHandler`. */
+    readonly saveStatus: _angular_core.Signal<KbqInlineEditSaveStatus>;
+    /** @docs-private */
+    protected readonly isSaving: _angular_core.Signal<boolean>;
+    /**
+     * Both save states are otherwise conveyed by colour alone. `aria-busy` cannot carry the first one: it is set
+     * on the row, which contains this region, and that tells assistive tech to hold the announcement back.
+     * @docs-private
+     */
+    protected readonly saveStatusMessage: _angular_core.Signal<string>;
     /** @docs-private */
     protected readonly className: _angular_core.Signal<string>;
     /** @docs-private */
@@ -148,10 +212,15 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     /** @docs-private */
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
+    /** Value sent by the in-flight `saveHandler` request, which becomes `lastSavedValue` once it succeeds. */
+    private submittedValue;
+    /** Last value the server accepted — what `rollback()` restores after a failed save. */
+    private lastSavedValue;
+    private destroyed;
     /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
     private validationTooltipScrollHandle;
     constructor();
-    /** Manually switch mode */
+    /** Manually switch mode. Does nothing while a `saveHandler` request is in flight. */
     toggleMode(): void;
     /**
      * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
@@ -160,14 +229,22 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
      * @docs-private
      */
     getConnectedOverlayOrigin(): ElementRef | undefined;
-    /** Saves the current value and returns to view mode, running the same validation as a normal save. */
+    /** Saves the current value, running the same validation as a normal save. */
     commit(): void;
+    /** Repeats the request for a value the server rejected. Does nothing unless the last save failed. */
+    retrySave(): void;
+    /** Discards the value the server rejected, restoring the last saved one and closing the editor. */
+    rollback(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */
     protected onAttach(): void;
     /** @docs-private */
     protected save($event?: Event): void;
+    /** Runs `saveHandler` once and maps its lifecycle onto `saveStatus`, holding the progress state steady. */
+    private startSave;
+    private onSaveSucceeded;
+    private onSaveFailed;
     /**
      * Whether `overlayOrigin` is fully within the viewport and every registered `CdkScrollable`
      * ancestor between it and the viewport. Ancestors without the `CdkScrollable` directive aren't
@@ -207,6 +284,8 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
      */
     private setOverlayKeydownListener;
     private saveAndFocusNextInlineEdit;
+    /** Whether saving would send back the value the editor opened with. */
+    private isUnchanged;
     private isInvalid;
     private getValue;
     private setValue;
@@ -216,7 +295,7 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     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", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "saveHandler": { "alias": "saveHandler"; "required": false; "isSignal": true; }; "saveErrorHandler": { "alias": "saveErrorHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "saveError": "saveError"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqInlineEditModule {
@@ -225,5 +304,5 @@ declare class KbqInlineEditModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqInlineEditModule>;
 }
 
-export { KbqFocusRegionItem, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder };
-export type { KbqInlineEditMode };
+export { KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, KbqFocusRegionItem, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder, kbqInlineEditSaveProgressDelay, kbqInlineEditSaveProgressMinimumDuration };
+export type { KbqInlineEditMode, KbqInlineEditSaveErrorContext, KbqInlineEditSaveErrorHandler, KbqInlineEditSaveHandler, KbqInlineEditSaveRecovery, KbqInlineEditSaveStatus };

package/inline-edit/inline-edit-tokens.scss

@@ -5,4 +5,5 @@
     --kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
     --kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);
     --kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-inline-edit-error-background: var(--kbq-background-error-less);
 }

package/inline-edit/inline-edit.scss

@@ -81,6 +81,31 @@
     }
 }
 
+/**
+ * A save the server rejected keeps the unsaved value marked until the user reacts to the notification, so the
+ * state outlives the request itself. Every state `_inline-edit-theme()` paints a background for is repeated here
+ * with the error color: each of its selectors is more specific than the plain `.kbq-inline-edit_save-error` rule,
+ * so leaving one out would drop the marking in that state.
+ */
+@mixin _inline-edit-save-error-theme {
+    &.kbq-inline-edit_view.kbq-inline-edit_save-error {
+        --kbq-inline-edit-background: var(--kbq-inline-edit-error-background);
+
+        &:not(.kbq-inline-edit_disabled) {
+            &:hover {
+                --kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);
+                --kbq-mask-background: var(--kbq-states-background-error-less-hover);
+            }
+
+            &:active,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-inline-edit-background: var(--kbq-states-background-error-less-active);
+                --kbq-mask-background: var(--kbq-states-background-error-less-active);
+            }
+        }
+    }
+}
+
 @mixin _inline-edit-typography {
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 }
@@ -97,6 +122,7 @@
     min-height: var(--kbq-inline-edit-height);
 
     @include _inline-edit-theme();
+    @include _inline-edit-save-error-theme();
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {

package/link/_link-theme.scss

@@ -1,7 +1,33 @@
+@use 'sass:string';
+
 @use '../core/styles/common/tokens' as *;
 
 @use './link-tokens';
 
+// Unquoted, so that the joiner reaches the CSS as an escape rather than as an invisible character
+$_kbq-link-word-joiner: string.unquote('"\\2060"');
+
+// The width of a 16px icon less half a pixel: Chromium lays out a line that ends in negative letter-spacing a
+// fraction wider than the max-content size it reports, so the full width would push the last word to the next
+// line in a shrink-to-fit container.
+$_kbq-link-trailing-icon-reserve: 15.5px;
+
+// The gap after the text. Before an icon it is part of the reserve instead of a margin: Firefox does not always
+// keep a margin together with the last word, and the icon could wrap alone again.
+@mixin _kbq-link-text-end-gap($gap) {
+    &:not(:last-child) {
+        margin-right: $gap;
+    }
+
+    &:has(+ .kbq-icon) {
+        margin-right: 0;
+
+        &::after {
+            padding-inline-end: calc($gap + $_kbq-link-trailing-icon-reserve);
+        }
+    }
+}
+
 @mixin kbq-link-geometry() {
     display: inline;
 
@@ -38,6 +64,21 @@
                 line-height: 0;
             }
         }
+
+        // A line may break right before an icon, as before any inline-block, and neither a no-break character
+        // nor white-space stops that in every engine. So the text reserves room for the icon after its last
+        // word, glued to it by a word joiner kept out of the accessible name, and the icon moves back into that
+        // room: the last word and the icon fit on the line together or wrap together.
+        .kbq-link__text:has(+ .kbq-icon) {
+            &::after {
+                content: $_kbq-link-word-joiner;
+                content: $_kbq-link-word-joiner / '';
+            }
+
+            + .kbq-icon {
+                margin-inline-start: -$_kbq-link-trailing-icon-reserve;
+            }
+        }
     }
 
     &.kbq-text-with-icon .kbq-link__text {
@@ -45,9 +86,7 @@
             margin-left: var(--kbq-link-size-normal-content-padding);
         }
 
-        &:not(:last-child) {
-            margin-right: var(--kbq-link-size-normal-content-padding);
-        }
+        @include _kbq-link-text-end-gap(var(--kbq-link-size-normal-content-padding));
     }
 
     &.kbq-link_compact {
@@ -65,9 +104,7 @@
                     margin-left: var(--kbq-link-size-compact-content-padding);
                 }
 
-                &:not(:last-child) {
-                    margin-right: var(--kbq-link-size-compact-content-padding);
-                }
+                @include _kbq-link-text-end-gap(var(--kbq-link-size-compact-content-padding));
             }
         }
     }
@@ -78,20 +115,18 @@
                 margin-left: var(--kbq-link-size-big-content-padding);
             }
 
-            &:not(:last-child) {
-                margin-right: var(--kbq-link-size-big-content-padding);
-            }
+            @include _kbq-link-text-end-gap(var(--kbq-link-size-big-content-padding));
         }
     }
 
     &.kbq-text-with-icon.kbq-link_external {
-        .kbq-link__text:not(:last-child) {
-            margin-right: 1px;
+        .kbq-link__text {
+            @include _kbq-link-text-end-gap(1px);
         }
 
         &.kbq-link_compact {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 0;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(0px);
             }
 
             .kbq-icon {
@@ -100,8 +135,8 @@
         }
 
         &.kbq-link_big {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 2px;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(2px);
             }
         }
     }