@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-tags.mjs

@@ -1,22 +1,299 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { _IdGenerator, FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Directive, inject, ChangeDetectorRef, DestroyRef, ElementRef, input, booleanAttribute, contentChild, output, signal, contentChildren, forwardRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, ContentChildren, InjectionToken, NgModule } from '@angular/core';
-import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { InjectionToken, inject, ElementRef, signal, input, computed, output, booleanAttribute, untracked, Directive, ChangeDetectorRef, DestroyRef, Injector, contentChild, viewChild, contentChildren, forwardRef, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, linkedSignal, NgModule } from '@angular/core';
 import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, hasModifierKey, isNull, KBQ_TITLE_TEXT_REF, ErrorStateMatcher, FocusKeyManager, isSelectAll, ENTER as ENTER$1, TAB as TAB$1, SPACE as SPACE$1, COMMA, SEMICOLON, kbqInjectAutofilled } from '@koobiq/components/core';
-import { KbqCleaner, KbqFormFieldControl, KBQ_CLEANER_CONTEXT, KbqTrim } from '@koobiq/components/form-field';
-import { FocusMonitor } from '@angular/cdk/a11y';
+import { ENTER, TAB, SPACE, COMMA, SEMICOLON, kbqInjectAutofilled, ESCAPE, hasModifierKey, KbqFieldSizingContent, KbqColorDirective, kbqAnimationsDisabled, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, KbqLocaleOverridesDirective, kbqInjectA11yLocaleConfiguration, runClearPredicate, ErrorStateMatcher, KbqErrorStateTracker, kbqQueryListFrom, FocusKeyManager, kbqLeaveTabOrderOnTabOut, isSelectAll } from '@koobiq/components/core';
+import { KbqTrim, KbqCleaner, KbqFormFieldControl, kbqCleanerFactoryProvider } from '@koobiq/components/form-field';
 import { Directionality } from '@angular/cdk/bidi';
 import * as i2 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
-import { DELETE, SPACE, BACKSPACE, ENTER, ESCAPE, F2, LEFT_ARROW, RIGHT_ARROW, TAB, HOME, END } from '@angular/cdk/keycodes';
+import { DELETE, SPACE as SPACE$1, BACKSPACE, ENTER as ENTER$1, ESCAPE as ESCAPE$1, F2, LEFT_ARROW, RIGHT_ARROW, TAB as TAB$1, HOME, END } from '@angular/cdk/keycodes';
 import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { Subject, merge } from 'rxjs';
 import { startWith, takeUntil, filter } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
 import { PlatformModule } from '@angular/cdk/platform';
 
+const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = [
+    { symbol: /\r?\n/, key: 'Enter', keyCode: ENTER },
+    { symbol: /\t/, key: 'Tab', keyCode: TAB },
+    { symbol: / /, key: ' ', keyCode: SPACE },
+    { symbol: /,/, key: ',', keyCode: COMMA },
+    { symbol: /;/, key: ';', keyCode: SEMICOLON }
+];
+const KBQ_TAGS_DEFAULT_OPTIONS_CONFIG = { separatorKeyCodes: [ENTER] };
+/** Injection token to be used to override the default options. */
+const KBQ_TAGS_DEFAULT_OPTIONS = new InjectionToken('kbq-tags-default-options', {
+    providedIn: 'root',
+    factory: () => KBQ_TAGS_DEFAULT_OPTIONS_CONFIG
+});
+/** Utility provider for `KBQ_TAGS_DEFAULT_OPTIONS`. */
+const kbqTagsDefaultOptionsProvider = (options) => ({
+    provide: KBQ_TAGS_DEFAULT_OPTIONS,
+    useValue: { ...KBQ_TAGS_DEFAULT_OPTIONS_CONFIG, ...options }
+});
+/**
+ * Directive that adds tag-specific behaviors to an input element inside `<kbq-form-field>`.
+ * May be placed inside or outside of an `<kbq-tag-list>`.
+ */
+class KbqTagInput {
+    /** Whether the input is disabled. */
+    get disabled() {
+        return this._disabled() || (this._tagList && this._tagList.disabled());
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.defaultOptions = inject(KBQ_TAGS_DEFAULT_OPTIONS);
+        this.trimDirective = inject(KbqTrim, { optional: true, self: true });
+        /**
+         * The autocomplete trigger attached to the input, if any.
+         *
+         * @docs-private
+         */
+        this.autocompleteTrigger = inject(KbqAutocompleteTrigger, { optional: true, self: true });
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the control is focused.
+         *
+         * @docs-private
+         */
+        this.focused = this.focusedValue.asReadonly();
+        /** Whether the control's value was filled in by the browser. */
+        this.autofilled = kbqInjectAutofilled();
+        /**
+         * The list of key codes that will trigger a tagEnd event.
+         *
+         * Defaults to `[ENTER]`.
+         */
+        this.separatorKeyCodes = input(this.defaultOptions.separatorKeyCodes, { ...(ngDevMode ? { debugName: "separatorKeyCodes" } : /* istanbul ignore next */ {}), alias: 'kbqTagInputSeparatorKeyCodes',
+            transform: (value) => value ?? [] });
+        this.allSeparators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
+        /**
+         * The effective set of separators: entries gated by `keyCode` are included only when that
+         * code is present in `separatorKeyCodes`; entries without a `keyCode` (no single-keystroke
+         * equivalent, e.g. a run of whitespace) are always included.
+         *
+         * @docs-private
+         */
+        this.separators = computed(() => this.allSeparators.filter((separator) => separator.keyCode === undefined || this.separatorKeyCodes().includes(separator.keyCode)), ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+        /** Emitted when a tag is to be added. */
+        this.tagEnd = output({ alias: 'kbqTagInputTokenEnd' });
+        /** A value indicating whether allow/prevent tags duplication  */
+        this.distinct = input(false, { ...(ngDevMode ? { debugName: "distinct" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The input's placeholder text. */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Unique id for the input. */
+        this.id = input(inject(_IdGenerator).getId('kbq-tag-list-input-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Register input for tag list. */
+        this.tagList = input(undefined, { ...(ngDevMode ? { debugName: "tagList" } : /* istanbul ignore next */ {}), alias: 'kbqTagInputFor' });
+        /**
+         * Whether or not the tagEnd event will be emitted when the input is blurred.
+         */
+        this.addOnBlur = input(true, { ...(ngDevMode ? { debugName: "addOnBlur" } : /* istanbul ignore next */ {}), alias: 'kbqTagInputAddOnBlur', transform: booleanAttribute });
+        /**
+         * Whether the tagEnd event will be emitted when the text pasted. Defaults to `addOnPaste` of
+         * `KBQ_TAGS_DEFAULT_OPTIONS`, or `true`.
+         */
+        this.addOnPaste = input(this.defaultOptions.addOnPaste ?? true, { ...(ngDevMode ? { debugName: "addOnPaste" } : /* istanbul ignore next */ {}), alias: 'kbqTagInputAddOnPaste',
+            transform: booleanAttribute });
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /** Whether the input is empty. */
+        this.empty = this.emptyValue.asReadonly();
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.inputElement = this.elementRef.nativeElement;
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        const tagList = this.tagList();
+        // Registered here rather than in an effect or a computed. The tag list has no content query for its
+        // input and learns of it only through `registerInput()`, which has to land before the list's host
+        // bindings read the input on the first pass, and an effect runs after this hook. And
+        // `registerInput()` writes a signal, which a computed rejects with NG0600.
+        if (tagList && tagList !== this._tagList) {
+            this._tagList = tagList;
+            tagList.registerInput(this);
+        }
+    }
+    ngDoCheck() {
+        // The value changes without notice: the consumer clears the input once a tag is added.
+        this.emptyValue.set(!this.inputElement.value);
+    }
+    /** @docs-private */
+    onKeydown(event) {
+        const isSeparatorKey = this.matchesInputSeparator(event);
+        if (!this.inputElement.value) {
+            if (isSeparatorKey && event.keyCode !== TAB) {
+                event.preventDefault();
+            }
+            this._tagList.keydown(event);
+            // The tag list ignores Escape, and an autocomplete panel, which hears the key on `body`, or a dialog
+            // around the field still has to get it.
+            if (event.keyCode !== ESCAPE) {
+                event.stopPropagation();
+            }
+            return;
+        }
+        if (isSeparatorKey) {
+            if (event.keyCode === ENTER &&
+                this.autocompleteTrigger?.panelOpen &&
+                this.autocompleteTrigger?.activeOption) {
+                return;
+            }
+            this.emitTagEnd();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Checks to see if the blur should emit the (tagEnd) event.
+     *
+     * @docs-private
+     */
+    blur(event) {
+        this.focusedValue.set(false);
+        // Blur the tag list if it is not focused
+        if (!this._tagList.focused()) {
+            this._tagList.blur();
+        }
+        // Chromium fires `blur` synchronously when the input becomes disabled, so without this
+        // guard disabling a focused tag input would append whatever was typed.
+        if (!this.disabled && this.addOnBlur() && (this.autocompleteTrigger?.onInputBlur()(event) ?? true)) {
+            this.emitTagEnd();
+        }
+    }
+    /**
+     * Checks to see if the (tagEnd) event needs to be emitted.
+     *
+     * @docs-private
+     */
+    emitTagEnd() {
+        // Untracked: called from a consumer's `effect()`, the tags read here would make it run again on every change.
+        untracked(() => this.addTag(this.trimValue(this.inputElement.value), this.existingTagValues()));
+    }
+    /**
+     * Whether the current input value duplicates an existing tag.
+     *
+     * @docs-private
+     */
+    get hasDuplicates() {
+        return this.tagValues().has(this.trimValue(this.inputElement.value));
+    }
+    /** @docs-private */
+    onInput() {
+        this.emptyValue.set(!this.inputElement.value);
+    }
+    /** @docs-private */
+    onPaste($event) {
+        if (!$event.clipboardData) {
+            return;
+        }
+        const data = $event.clipboardData.getData('text');
+        if (!data || !this.addOnPaste()) {
+            return;
+        }
+        const separatorsInString = this.getPasteSeparatorPatterns(data);
+        // prettier-ignore
+        const dividedString = separatorsInString.length > 0 ?
+            [...data.split(new RegExp(`${separatorsInString.join('|')}`))] :
+            [data];
+        // Built once per paste, then updated as items are accepted, so a batch also dedupes
+        // against itself — `tags` is a QueryList that cannot refresh between iterations.
+        const existingValues = this.existingTagValues();
+        dividedString.forEach((item) => this.addTag(this.trimValue(item), existingValues));
+        $event.preventDefault();
+        $event.stopPropagation();
+    }
+    /** @docs-private */
+    onFocus() {
+        this.focusedValue.set(true);
+        this._tagList.unselectAll();
+    }
+    /** Focuses the input. */
+    focus() {
+        this.inputElement.focus();
+    }
+    /**
+     * Implemented as part of KbqTagTextControl.
+     *
+     * @docs-private
+     */
+    suppressAutocompleteOnNextFocus() {
+        this.autocompleteTrigger?.suppressOpenOnNextFocus();
+    }
+    getPasteSeparatorPatterns(value) {
+        return this.separators()
+            .filter((separator) => (!separator.appliesTo || separator.appliesTo.includes('paste')) &&
+            value.search(separator.symbol) > -1)
+            .map((separator) => separator.symbol.source);
+    }
+    /**
+     * Single path for adding a tag, shared by typed input, blur and paste.
+     * `existingValues` is `null` unless `distinct` is on, and is mutated as values are accepted.
+     */
+    addTag(value, existingValues) {
+        if (existingValues) {
+            if (existingValues.has(value))
+                return;
+            existingValues.add(value);
+        }
+        // An empty value adds nothing, so latching the flag here would make the next
+        // programmatic tags update look UI-initiated.
+        if (value) {
+            this._tagList?.notifyPendingTagChange();
+        }
+        this.tagEnd.emit({ input: this.inputElement, value });
+    }
+    /** Values to dedupe against, or `null` when duplicates are allowed. */
+    existingTagValues() {
+        return this.distinct() ? this.tagValues() : null;
+    }
+    tagValues() {
+        return new Set(this._tagList.tags.map(({ value }) => value));
+    }
+    trimValue(value) {
+        return (this.trimDirective ? this.trimDirective.trim(value) : value);
+    }
+    /** Checks whether a keydown event matches a separator that applies to typed input. */
+    matchesInputSeparator(event) {
+        return this.separators().some((separator) => separator.key === event.key &&
+            !hasModifierKey(event) &&
+            (!separator.appliesTo || separator.appliesTo.includes('input')));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: { classPropertyName: "separatorKeyCodes", publicName: "kbqTagInputSeparatorKeyCodes", isSignal: true, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tagList: { classPropertyName: "tagList", publicName: "kbqTagInputFor", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "kbqTagInputAddOnBlur", isSignal: true, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "kbqTagInputAddOnPaste", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id()", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder() || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[kbqTagInputFor]',
+                    host: {
+                        class: 'kbq-tag-input',
+                        '[id]': 'id()',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.placeholder]': 'placeholder() || null',
+                        '(keydown)': 'onKeydown($event)',
+                        '(blur)': 'blur($event)',
+                        '(focus)': 'onFocus()',
+                        '(input)': 'onInput()',
+                        '(paste)': 'onPaste($event)'
+                    },
+                    hostDirectives: [KbqFieldSizingContent],
+                    exportAs: 'kbqTagInput, kbqTagInputFor'
+                }]
+        }], ctorParameters: () => [], propDecorators: { separatorKeyCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputSeparatorKeyCodes", required: false }] }], tagEnd: [{ type: i0.Output, args: ["kbqTagInputTokenEnd"] }], distinct: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinct", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tagList: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputFor", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputAddOnBlur", required: false }] }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputAddOnPaste", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
 /**
  * Event object emitted by KbqTag when the tag is edited.
  */
@@ -41,13 +318,14 @@ const getTagEditInputMissingError = () => {
 };
 /**
  * Dummy directive to add CSS class to tag avatar.
+ *
  * @docs-private
  */
 class KbqTagAvatar {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-avatar, [kbqTagAvatar]',
@@ -56,19 +334,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /**
  * Dummy directive to add CSS class to tag trailing icon.
+ *
  * @docs-private
  */
 class KbqTagTrailingIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
                     host: { class: 'kbq-tag-trailing-icon' }
                 }]
         }] });
+/** Marks content to be projected into the prefix (leading) slot of a tag. */
+class KbqTagPrefix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagPrefix, isStandalone: true, selector: "[kbqTagPrefix]", host: { classAttribute: "kbq-tag-prefix" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqTagPrefix]',
+                    host: {
+                        class: 'kbq-tag-prefix'
+                    }
+                }]
+        }] });
+/** Marks content to be projected into the suffix (trailing) slot of a tag. */
+class KbqTagSuffix {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagSuffix, isStandalone: true, selector: "[kbqTagSuffix]", host: { classAttribute: "kbq-tag-suffix" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqTagSuffix]',
+                    host: {
+                        class: 'kbq-tag-suffix'
+                    }
+                }]
+        }] });
 /**
  * Directive to add submit behavior for the editable tag.
  */
@@ -77,10 +384,10 @@ class KbqTagEditSubmit {
         /** @docs-private */
         this.tag = inject(KbqTag);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], hostDirectives: [{ directive: KbqTagSuffix }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditSubmit]',
@@ -89,6 +396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.tabindex]': '-1',
                         '(click)': 'tag.submitEditing("click")'
                     },
+                    hostDirectives: [KbqTagSuffix],
                     exportAs: 'kbqTagEditSubmit'
                 }]
         }] });
@@ -106,19 +414,19 @@ class KbqTagEditInput {
     /** @docs-private */
     handleKeydown(event) {
         switch (event.keyCode) {
-            case ESCAPE: {
+            case ESCAPE$1: {
                 event.stopPropagation();
                 this.tag.cancelEditing('escape');
                 break;
             }
-            case ENTER: {
+            case ENTER$1: {
                 event.stopPropagation();
                 this.tag.submitEditing('enter');
                 break;
             }
             // We should prevent KbqTag from receiving these keydown events
             case BACKSPACE:
-            case SPACE:
+            case SPACE$1:
             case DELETE: {
                 event.stopPropagation();
                 break;
@@ -126,10 +434,10 @@ class KbqTagEditInput {
             default:
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagEditInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditInput]',
@@ -143,27 +451,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 }]
         }] });
 class KbqTag extends KbqColorDirective {
-    /** Whether the tag is editable. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get editable() {
-        return this._editable ?? !!this.tagList?.editable();
-    }
-    set editable(value) {
-        this._editable = value;
-    }
-    /** Whether the tag is selected. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get selected() {
-        return this._selected;
+    /**
+     * Whether the tag has focus.
+     *
+     * @docs-private
+     */
+    get hasFocus() {
+        return this._hasFocus();
     }
-    set selected(value) {
-        this.setSelectedState(value, { emitEvent: true });
+    /** @docs-private */
+    set hasFocus(value) {
+        this._hasFocus.set(value);
+    }
+    /**
+     * @docs-private
+     */
+    get textElement() {
+        return this.textElementQuery();
     }
     /** The value of the tag. Defaults to the content inside `<kbq-tag>` tags. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    // Stays an accessor: it falls back to the projected text content, which is DOM state.
     get value() {
         return this._value ?? this.elementRef.nativeElement.textContent?.trim();
     }
@@ -171,50 +478,30 @@ class KbqTag extends KbqColorDirective {
         this._value = value;
     }
     /**
-     * Whether the tag is selectable.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get selectable() {
-        return this._selectable || !!this.tagList?.selectable();
-    }
-    set selectable(value) {
-        this._selectable = value;
-    }
-    /**
-     * Determines whether the tag is removable.
+     * Whether the user may remove this tag through the controls the tag itself offers — the remove
+     * control and the `Delete` key. A disabled tag offers neither.
+     *
+     * This is the affordance, not the channel: `remove()` stays open so the list can still clear a
+     * disabled tag when `clearPredicate` asks for it.
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get removable() {
-        return this._removable && (this.tagList?.removable ?? true);
-    }
-    set removable(value) {
-        this._removable = value;
+    get canRemove() {
+        return this.removable() && !this.disabled;
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Tab order of the tag. */
     get tabindex() {
-        if (this.disabled)
-            return null;
-        if (this._tabindex === -1 && this.selectable && !this.tagList)
-            return 0;
-        return this._tabindex;
+        return this.tabindexState();
     }
     set tabindex(value) {
-        this._tabindex = value;
+        this._tabindex.set(value);
     }
-    /**
-     * Whether the tag is disabled.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the tag is disabled. */
+    // Stays a plain boolean: the focus key manager skips items by reading `item.disabled` as a value, so a
+    // signal - a function, always truthy - would skip every tag. It also folds in the tag list's form control.
     get disabled() {
-        return this._disabled || (this.tagList?.disabled ?? false);
+        return this.disabledState();
     }
     set disabled(value) {
-        this._disabled = value;
-        this.syncDragDisabledState();
+        this._disabled.set(value);
     }
     /**
      * Whether the tag is draggable.
@@ -222,7 +509,7 @@ class KbqTag extends KbqColorDirective {
      * @docs-private
      */
     get draggable() {
-        return (this.tagList?.draggable ?? false) && !this.disabled;
+        return this.draggableState();
     }
     constructor() {
         super();
@@ -231,6 +518,7 @@ class KbqTag extends KbqColorDirective {
         this.tagList = inject(KbqTagList, { optional: true });
         this.drag = inject(CdkDrag, { host: true });
         this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
         /** @docs-private */
         this.elementRef = inject(ElementRef);
         /**
@@ -247,15 +535,21 @@ class KbqTag extends KbqColorDirective {
         this.onBlur = new Subject();
         /** @docs-private */
         this.nativeElement = this.elementRef.nativeElement;
+        this._hasFocus = signal(false, ...(ngDevMode ? [{ debugName: "_hasFocus" }] : /* istanbul ignore next */ []));
         /**
-         * Whether the tag has focus.
+         * Backing input of `editable`. Bind through the `editable` attribute; read `editable`, which falls
+         * back to the tag list's `editable` while this is unbound.
+         * `undefined` only as the default: the transform never runs on it, so a bound value is always a boolean.
          *
          * @docs-private
          */
-        this.hasFocus = false;
+        this.editableInput = input(undefined, { ...(ngDevMode ? { debugName: "editableInput" } : /* istanbul ignore next */ {}), alias: 'editable',
+            transform: booleanAttribute });
+        /** Whether the tag is editable. */
+        this.editable = computed(() => this.editableInput() ?? !!this.tagList?.editable(), ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
         /** Whether the tag edits can't be submitted. */
-        this.preventEditSubmit = input(false, ...(ngDevMode ? [{ debugName: "preventEditSubmit", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.editInputElementRef = contentChild(KbqTagEditInput, ...(ngDevMode ? [{ debugName: "editInputElementRef", read: ElementRef }] : [{ read: ElementRef }]));
+        this.preventEditSubmit = input(false, { ...(ngDevMode ? { debugName: "preventEditSubmit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.editInputElementRef = contentChild(KbqTagEditInput, { ...(ngDevMode ? { debugName: "editInputElementRef" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * Emits event when the tag is edited.
          */
@@ -263,14 +557,15 @@ class KbqTag extends KbqColorDirective {
         /**
          * @docs-private
          */
-        this.editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+        this.editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+        this.textElementQuery = viewChild('kbqTitleText', ...(ngDevMode ? [{ debugName: "textElementQuery" }] : /* istanbul ignore next */ []));
         this.contentChildren = contentChildren(KbqIcon);
         /** The tag avatar */
-        this.avatar = contentChild(KbqTagAvatar, ...(ngDevMode ? [{ debugName: "avatar" }] : []));
+        this.avatar = contentChild(KbqTagAvatar, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
         /** The tag's trailing icon. */
-        this.trailingIcon = contentChild(KbqTagTrailingIcon, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
+        this.trailingIcon = contentChild(KbqTagTrailingIcon, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
         /** The tag's remove toggler. */
-        this.removeIcon = contentChild(forwardRef(() => KbqTagRemove), ...(ngDevMode ? [{ debugName: "removeIcon" }] : []));
+        this.removeIcon = contentChild(forwardRef(() => KbqTagRemove), ...(ngDevMode ? [{ debugName: "removeIcon" }] : /* istanbul ignore next */ []));
         /** Emitted when the tag is selected or deselected. */
         this.selectionChange = output();
         /** Emitted when the tag is destroyed and leaving the DOM. */
@@ -280,18 +575,94 @@ class KbqTag extends KbqColorDirective {
          * Fires on programmatic and UI removal (click or keyboard).
          */
         this.removed = output();
-        this._selected = false;
-        this._selectable = false;
-        this._removable = true;
-        this._tabindex = -1;
-        this._disabled = false;
-        this.color = KbqComponentColors.ContrastFade;
+        /**
+         * Backing input of `selected`. Bind through the `selected` attribute; read `selected`, which also
+         * reflects `select()`, `deselect()` and user interaction.
+         * A change of the binding is applied in `ngOnChanges` through `setSelectedState()`, so it emits
+         * `selectionChange` the way the old setter did - the tag list listens to it.
+         *
+         * @docs-private
+         */
+        this.selectedInput = input(false, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected', transform: booleanAttribute });
+        this._selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+        /** Whether the tag is selected. */
+        // Read-only rather than a `linkedSignal`: a binding change reset through a `linkedSignal` would skip
+        // `setSelectedState()` and never emit the `selectionChange` the tag list listens to.
+        this.selected = this._selected.asReadonly();
+        /**
+         * Backing input of `selectable`. Bind through the `selectable` attribute; read `selectable`, which is
+         * also true while the tag list is selectable.
+         *
+         * @docs-private
+         */
+        this.selectableInput = input(false, { ...(ngDevMode ? { debugName: "selectableInput" } : /* istanbul ignore next */ {}), alias: 'selectable', transform: booleanAttribute });
+        /** Whether the tag is selectable. */
+        this.selectable = computed(() => this.selectableInput() || !!this.tagList?.selectable(), ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        /**
+         * Backing input of `removable`. Bind through the `removable` attribute; read `removable`, which also
+         * requires the tag list to be removable.
+         *
+         * @docs-private
+         */
+        this.removableInput = input(true, { ...(ngDevMode ? { debugName: "removableInput" } : /* istanbul ignore next */ {}), alias: 'removable', transform: booleanAttribute });
+        /** Determines whether the tag is removable. */
+        this.removable = computed(() => this.removableInput() && (this.tagList?.removable() ?? true), ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+        this._tabindex = signal(-1, ...(ngDevMode ? [{ debugName: "_tabindex" }] : /* istanbul ignore next */ []));
+        this.tabindexState = computed(() => {
+            if (this.disabled)
+                return null;
+            if (this._tabindex() === -1 && this.selectable() && !this.tagList)
+                return 0;
+            return this._tabindex();
+        }, ...(ngDevMode ? [{ debugName: "tabindexState" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this._disabled() || (this.tagList?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /**
+         * Value of the `disabled` attribute.
+         *
+         * @internal
+         */
+        this.disabledAttribute = computed(() => this.disabled || null, ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+        this.draggableState = computed(() => (this.tagList?.draggable ?? false) && !this.disabled, ...(ngDevMode ? [{ debugName: "draggableState" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the tag moves into place without motion while the list is reordered.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /** @docs-private */
+        this.tabindexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabindexInput" } : /* istanbul ignore next */ {}), alias: 'tabindex' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         this.setDefaultColor(KbqComponentColors.ContrastFade);
         this.addHostClassName();
         this.setupDragInitialProperties();
     }
-    ngAfterContentInit() {
-        this.addClassModificatorForIcons();
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['valueInput']) {
+            const value = this.valueInput();
+            if (value !== undefined)
+                this.value = value;
+        }
+        if (changes['tabindexInput']) {
+            const tabindex = this.tabindexInput();
+            if (tabindex !== undefined)
+                this.tabindex = tabindex;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        // Only a change of this binding: `ngOnChanges` also fires for every other input, and re-applying the
+        // bound value then would undo a selection the user made by clicking.
+        if (changes['selectedInput']) {
+            this.setSelectedState(this.selectedInput(), { emitEvent: true });
+        }
     }
     ngAfterViewInit() {
         this.setupFocusMonitor();
@@ -301,7 +672,14 @@ class KbqTag extends KbqColorDirective {
         this.focusMonitor.stopMonitoring(this.elementRef);
         this.destroyed.emit({ tag: this });
     }
-    /** @docs-private */
+    /**
+     * Adds the legacy positional classes inferred from projected icons.
+     *
+     * @deprecated Use `KbqTagPrefix` and `KbqTagSuffix` to declare the position explicitly.
+     * Will be removed in 22.0.0.
+     *
+     * @docs-private
+     */
     addClassModificatorForIcons() {
         const icons = this.contentChildren().map((item) => item.elementRef.nativeElement);
         if (icons.length === 1) {
@@ -338,17 +716,23 @@ class KbqTag extends KbqColorDirective {
      * Selects the tag.
      */
     select() {
-        if (this.disabled || !this.selectable)
-            return;
-        this.setSelectedState(true, { emitEvent: true });
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — `selected`, `disabled`, focus, the inputs — would make the effect run again whenever it changes.
+        untracked(() => {
+            if (this.disabled || !this.selectable())
+                return;
+            this.setSelectedState(true, { emitEvent: true });
+        });
     }
     /**
      * Deselects the tag.
      */
     deselect() {
-        if (this.disabled || !this.selectable)
-            return;
-        this.setSelectedState(false, { emitEvent: true });
+        untracked(() => {
+            if (this.disabled || !this.selectable())
+                return;
+            this.setSelectedState(false, { emitEvent: true });
+        });
     }
     /**
      * Selects the tag and emits event with isUserInput flag.
@@ -356,24 +740,31 @@ class KbqTag extends KbqColorDirective {
      * @docs-private
      */
     selectViaInteraction() {
-        if (this.disabled || !this.selectable)
-            return;
-        this.setSelectedState(true, { isUserInput: true, emitEvent: true });
+        untracked(() => {
+            if (this.disabled || !this.selectable())
+                return;
+            this.setSelectedState(true, { isUserInput: true, emitEvent: true });
+        });
     }
     /**
      * Toggles the current selected state of the tag.
      */
     toggleSelected(isUserInput = false) {
-        if (this.disabled || !this.selectable)
-            return this.selected;
-        this.setSelectedState(!this.selected, { isUserInput, emitEvent: true });
-        return this.selected;
+        return untracked(() => {
+            if (this.disabled || !this.selectable())
+                return this.selected();
+            this.setSelectedState(!this.selected(), { isUserInput, emitEvent: true });
+            return this.selected();
+        });
     }
     /** Focuses the tag. */
     focus() {
-        if (this.disabled)
-            return;
-        this.elementRef.nativeElement.focus();
+        // The focus monitor reports the focus synchronously, and its handler reads the focus state.
+        untracked(() => {
+            if (this.disabled)
+                return;
+            this.elementRef.nativeElement.focus();
+        });
     }
     /**
      * Allows for programmatic removal of the tag. Called by the KbqTagList when the DELETE or
@@ -382,7 +773,7 @@ class KbqTag extends KbqColorDirective {
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove() {
-        if (this.removable) {
+        if (untracked(this.removable)) {
             this.removed.emit({ tag: this });
         }
     }
@@ -396,7 +787,7 @@ class KbqTag extends KbqColorDirective {
         // We should handle modifier-based selection only if tag is inside of a tag list.
         // Single tag can only be toggled on focus or blur.
         this.tagList &&
-            this.selectable &&
+            this.selectable() &&
             hasModifierKey(event, 'metaKey', 'ctrlKey', 'shiftKey')) {
             if (!event.shiftKey)
                 this.toggleSelected(true);
@@ -405,10 +796,10 @@ class KbqTag extends KbqColorDirective {
             event.stopPropagation();
             return;
         }
-        if (this.tagList && this.selectable) {
+        if (this.tagList && this.selectable()) {
             this.tagList.handleSelectionInteraction(this, false);
         }
-        if (!this.tagList && this.selectable) {
+        if (!this.tagList && this.selectable()) {
             this.toggleSelected(true);
         }
     }
@@ -430,7 +821,7 @@ class KbqTag extends KbqColorDirective {
                 event.preventDefault();
                 break;
             }
-            case SPACE: {
+            case SPACE$1: {
                 if (this.tagList) {
                     this.toggleSelected(true);
                     this.tagList.handleSelectionInteraction(this, false);
@@ -444,7 +835,7 @@ class KbqTag extends KbqColorDirective {
                 break;
             }
             case F2:
-            case ENTER:
+            case ENTER$1:
                 this.startEditing(event.key);
                 break;
             default:
@@ -452,43 +843,48 @@ class KbqTag extends KbqColorDirective {
     }
     /** @docs-private */
     blur() {
-        this.elementRef.nativeElement.blur();
+        untracked(() => this.elementRef.nativeElement.blur());
     }
     /** @docs-private */
     handleDblClick(event) {
-        if (this.disabled || !this.editable)
+        if (this.disabled || !this.editable())
             return;
         event.stopPropagation();
         this.startEditing('dblclick');
     }
     startEditing(reason) {
-        if (!this.editable || this.editing())
+        if (!this.editable() || this.editing())
             return;
         this.editing.set(true);
         this.editChange.emit({ tag: this, type: 'start', reason });
-        setTimeout(() => {
+        // The edit input exists once the editing state is rendered.
+        afterNextRender(() => {
             const input = this.editInputElementRef()?.nativeElement;
             if (!input)
                 throw getTagEditInputMissingError();
             this.focusMonitor.focusVia(this.elementRef.nativeElement, 'keyboard');
             input.select();
-        });
+        }, { injector: this.injector });
     }
     /** @docs-private */
     cancelEditing(reason) {
-        if (!this.editing())
-            return;
-        this.editing.set(false);
-        this.editChange.emit({ tag: this, type: 'cancel', reason });
-        this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
+        untracked(() => {
+            if (!this.editing())
+                return;
+            this.editing.set(false);
+            this.editChange.emit({ tag: this, type: 'cancel', reason });
+            this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
+        });
     }
     /** @docs-private */
     submitEditing(reason) {
-        if (!this.editing() || this.preventEditSubmit())
-            return;
-        this.editing.set(false);
-        this.editChange.emit({ tag: this, type: 'submit', reason });
-        this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
+        untracked(() => {
+            if (!this.editing() || this.preventEditSubmit())
+                return;
+            this.editing.set(false);
+            this.editChange.emit({ tag: this, type: 'submit', reason });
+            this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
+        });
     }
     /**
      * Sets the selected state of the tag.
@@ -497,27 +893,30 @@ class KbqTag extends KbqColorDirective {
      */
     setSelectedState(selected, options = {}) {
         const { isUserInput = false, emitEvent = false } = options;
-        if (selected !== this.selected) {
-            this._selected = selected;
-            if (emitEvent) {
-                this.selectionChange.emit({
-                    source: this,
-                    isUserInput,
-                    selected: this.selected
-                });
+        untracked(() => {
+            if (selected !== this.selected()) {
+                this._selected.set(selected);
+                if (emitEvent) {
+                    this.selectionChange.emit({
+                        source: this,
+                        isUserInput,
+                        selected: this.selected()
+                    });
+                }
             }
-            this.changeDetectorRef.markForCheck();
-        }
+        });
     }
     setupDragInitialProperties() {
-        this.syncDragDisabledState();
+        // Derived rather than pushed: `draggable` folds in the tag list's `draggable` and `disabled`, so a
+        // push from this tag's own setter never saw the list's `draggable` flip, and `CdkDrag` keeps an
+        // explicit `disabled = true` regardless of what its container says.
+        effect(() => {
+            this.drag.disabled = !this.draggable;
+        });
         this.drag.started.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.drag.data = { tag: this };
         });
     }
-    syncDragDisabledState() {
-        this.drag.disabled = !this.draggable;
-    }
     setupFocusMonitor() {
         this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => {
             if (this.disabled)
@@ -536,14 +935,13 @@ class KbqTag extends KbqColorDirective {
                     if (!this.tagList)
                         this.deselect();
                 }
-                this.changeDetectorRef.markForCheck();
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventEditSubmit: { classPropertyName: "preventEditSubmit", publicName: "preventEditSubmit", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar()", "class.kbq-tag-with-icon": "contentChildren()", "class.kbq-tag-with-trailing-icon": "trailingIcon() || removeIcon()", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentChildren", predicate: KbqIcon, isSignal: true }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true, isSignal: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true, isSignal: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editableInput: { classPropertyName: "editableInput", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, preventEditSubmit: { classPropertyName: "preventEditSubmit", publicName: "preventEditSubmit", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectableInput: { classPropertyName: "selectableInput", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, removableInput: { classPropertyName: "removableInput", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tabindexInput: { classPropertyName: "tabindexInput", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabledAttribute()", "class.kbq-selected": "selected()", "class.kbq-tag-with-avatar": "avatar()", "class.kbq-tag-with-icon": "contentChildren()", "class.kbq-tag-with-trailing-icon": "trailingIcon() || removeIcon()", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable()", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable()", "class.kbq-tag_selectable": "selectable()", "class.kbq-tag_draggable": "draggable", "class.kbq-animations-disabled": "animationsDisabled" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentChildren", predicate: KbqIcon, isSignal: true }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true, isSignal: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true, isSignal: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElementQuery", first: true, predicate: ["kbqTitleText"], descendants: true, isSignal: true }], exportAs: ["kbqTag"], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i2.CdkDrag }, { directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         <div class="kbq-tag__wrapper">
-            <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
+            <ng-content select="[kbqTagPrefix]" />
             <span #kbqTitleText class="kbq-tag__text">
                 @if (editing()) {
                     <ng-content select="[kbqTagEditInput]" />
@@ -554,18 +952,19 @@ class KbqTag extends KbqColorDirective {
             @if (editing()) {
                 <ng-content select="[kbqTagEditSubmit]" />
             } @else {
-                @if (removable) {
+                @if (canRemove) {
                     <ng-content select="[kbqTagRemove]" />
                 }
             }
+            <ng-content select="[kbqTagSuffix]" />
         </div>
-    `, isInline: true, styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-tag{-webkit-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px}@supports (corner-shape: squircle){.kbq-tag{corner-shape:squircle;border-radius:7.4px}}.kbq-tag{cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-tag-prefix{flex-shrink:0;margin-inline-start:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-suffix{flex-shrink:0}.kbq-tag .kbq-tag-suffix:not(.kbq-tag-remove,.kbq-tag-edit-submit){margin-inline-end:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag.cdk-drag-animating.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tag.cdk-drag-animating{animation:none;transition:none}}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', template: `
         <div class="kbq-tag__wrapper">
-            <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
+            <ng-content select="[kbqTagPrefix]" />
             <span #kbqTitleText class="kbq-tag__text">
                 @if (editing()) {
                     <ng-content select="[kbqTagEditInput]" />
@@ -576,52 +975,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             @if (editing()) {
                 <ng-content select="[kbqTagEditSubmit]" />
             } @else {
-                @if (removable) {
+                @if (canRemove) {
                     <ng-content select="[kbqTagRemove]" />
                 }
             }
+            <ng-content select="[kbqTagSuffix]" />
         </div>
     `, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tag',
+                        // No signal is read by two of these bindings, and none of the tag list's: the host bindings of every tag in a
+                        // view run in that view's reactive consumer, where a signal read again after others costs a scan of all it has
+                        // read so far, O(N²) per check across N tags. Each value that folds in `disabled` has a signal of its own.
                         '[attr.tabindex]': 'tabindex',
-                        '[attr.disabled]': 'disabled || null',
-                        '[class.kbq-selected]': 'selected',
+                        '[attr.disabled]': 'disabledAttribute()',
+                        '[class.kbq-selected]': 'selected()',
                         '[class.kbq-tag-with-avatar]': 'avatar()',
                         '[class.kbq-tag-with-icon]': 'contentChildren()',
                         '[class.kbq-tag-with-trailing-icon]': 'trailingIcon() || removeIcon()',
                         '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-tag_editable]': 'editable',
+                        '[class.kbq-tag_editable]': 'editable()',
                         '[class.kbq-tag_editing]': 'editing()',
-                        '[class.kbq-tag_removable]': 'removable',
-                        '[class.kbq-tag_selectable]': 'selectable',
+                        '[class.kbq-tag_removable]': 'removable()',
+                        '[class.kbq-tag_selectable]': 'selectable()',
                         '[class.kbq-tag_draggable]': 'draggable',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled',
                         '(dblclick)': 'handleDblClick($event)',
                         '(click)': 'handleClick($event)',
                         '(keydown)': 'handleKeydown($event)'
-                    }, hostDirectives: [CdkDrag], exportAs: 'kbqTag', styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { editable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], preventEditSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventEditSubmit", required: false }] }], editInputElementRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagEditInput), { ...{ read: ElementRef }, isSignal: true }] }], editChange: [{ type: i0.Output, args: ["editChange"] }], textElement: [{
-                type: ViewChild,
-                args: ['kbqTitleText']
-            }], contentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagAvatar), { isSignal: true }] }], trailingIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagTrailingIcon), { isSignal: true }] }], removeIcon: [{ type: i0.ContentChild, args: [forwardRef(() => KbqTagRemove), { isSignal: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], destroyed: [{ type: i0.Output, args: ["destroyed"] }], removed: [{ type: i0.Output, args: ["removed"] }], selected: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }], selectable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], removable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabindex: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                    }, hostDirectives: [
+                        CdkDrag,
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], exportAs: 'kbqTag', styles: ["@charset \"UTF-8\";.kbq-tag{-webkit-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px}@supports (corner-shape: squircle){.kbq-tag{corner-shape:squircle;border-radius:7.4px}}.kbq-tag{cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-tag-prefix{flex-shrink:0;margin-inline-start:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-suffix{flex-shrink:0}.kbq-tag .kbq-tag-suffix:not(.kbq-tag-remove,.kbq-tag-edit-submit){margin-inline-end:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag.cdk-drag-animating.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tag.cdk-drag-animating{animation:none;transition:none}}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], preventEditSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventEditSubmit", required: false }] }], editInputElementRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagEditInput), { ...{ read: ElementRef }, isSignal: true }] }], editChange: [{ type: i0.Output, args: ["editChange"] }], textElementQuery: [{ type: i0.ViewChild, args: ['kbqTitleText', { isSignal: true }] }], contentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagAvatar), { isSignal: true }] }], trailingIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagTrailingIcon), { isSignal: true }] }], removeIcon: [{ type: i0.ContentChild, args: [forwardRef(() => KbqTagRemove), { isSignal: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], destroyed: [{ type: i0.Output, args: ["destroyed"] }], removed: [{ type: i0.Output, args: ["removed"] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], removableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tabindexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
  *
  * Example:
@@ -636,6 +1021,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 class KbqTagRemove {
     constructor() {
         this.parentTag = inject(KbqTag);
+        this.elementRef = inject(ElementRef);
+        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
+        /** Accessible name of the button. Defaults to the localized "Remove". */
+        this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /** @docs-private */
+        this.accessibleName = computed(() => this.ariaLabel() || this.a11yLocaleConfiguration().remove, ...(ngDevMode ? [{ debugName: "accessibleName" }] : /* istanbul ignore next */ []));
+        /**
+         * Position of the control in the tab order.
+         *
+         * Defaults to `-1`, because in a tag list the tag itself is the tab stop and removal is reached from
+         * there. A tag rendered outside such a list — inside a select's trigger, for one — has to opt into a
+         * tab stop of its own, or the control is left mouse-only.
+         */
+        this.tabIndex = input(-1, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     }
     /** @docs-private */
     focus(event) {
@@ -647,7 +1046,7 @@ class KbqTagRemove {
      * @docs-private
      */
     handleClick(event) {
-        if (this.parentTag.removable) {
+        if (this.parentTag.canRemove) {
             this.parentTag.hasFocus = true;
             this.parentTag.remove();
         }
@@ -658,24 +1057,41 @@ class KbqTagRemove {
         // that the tag is being removed before the event bubbles up.
         event.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /**
+     * Activates the button from the keyboard by synthesizing a click, so that a `(click)` listener the
+     * host template put on this very element — the way `KbqSelect` and `KbqTreeSelect` deselect the
+     * option behind the tag — runs as well, and not only `handleClick` below.
+     */
+    handleKeydown(event) {
+        // Space scrolls the page, and both keys are acted on by the tag list and by the select the tag
+        // may be rendered in.
+        event.preventDefault();
+        event.stopPropagation();
+        this.elementRef.nativeElement.click();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)", "focus": "focus($event)", "keydown.enter": "handleKeydown($any($event))", "keydown.space": "handleKeydown($any($event))" }, properties: { "attr.aria-label": "accessibleName()", "attr.tabindex": "tabIndex()" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, hostDirectives: [{ directive: KbqTagSuffix }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagRemove]',
                     host: {
                         class: 'kbq-tag-remove kbq-tag-trailing-icon',
-                        '[attr.tabindex]': '-1',
+                        // The trailing icon is an icon-only control: without a role and an accessible name it is announced
+                        // as an unlabeled graphic, and with no keys bound it can only ever be operated with a pointer.
+                        role: 'button',
+                        '[attr.aria-label]': 'accessibleName()',
+                        '[attr.tabindex]': 'tabIndex()',
                         '(click)': 'handleClick($event)',
-                        '(focus)': 'focus($event)'
-                    }
+                        '(focus)': 'focus($event)',
+                        '(keydown.enter)': 'handleKeydown($any($event))',
+                        '(keydown.space)': 'handleKeydown($any($event))'
+                    },
+                    hostDirectives: [KbqTagSuffix]
                 }]
-        }] });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
 
-// Increasing integer for generating unique ids for tag-list components.
-let nextUniqueId$1 = 0;
 /** Change event object that is emitted when the tag list value has changed. */
 class KbqTagListChange {
     constructor(source, value) {
@@ -684,14 +1100,6 @@ class KbqTagListChange {
     }
 }
 class KbqTagList {
-    /**
-     * Combined stream of all of the child tags' selection change events.
-     *
-     * @docs-private
-     */
-    get tagSelectionChanges() {
-        return merge(...this.tags.map((tag) => outputToObservable(tag.selectionChange)));
-    }
     /**
      * Combined stream of all of the child tags' focus change events.
      *
@@ -738,120 +1146,83 @@ class KbqTagList {
      * @docs-private
      */
     get selected() {
-        return this.tags.filter(({ selected }) => selected);
+        return this.tags.filter((tag) => tag.selected());
     }
     /** @docs-private */
     get canShowCleaner() {
-        return !!this.cleaner() && this.tags.length > 0;
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this._value = value;
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    get id() {
-        return this.tagInput ? this.tagInput.id : this.uid;
+        return !!this.cleaner()?.canShow;
     }
     /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    /**
-     * Implemented as part of KbqFormFieldControl.
+     * Marks the list for a change-detection check.
+     *
+     * Kept for back-compatibility. The cleaner's visibility is derived from signals of the list and its
+     * tags, so the list re-renders on its own and nothing in the library calls this any more.
+     * Kept at the DS-2196 review, like `KbqButtonToggle.markForCheck()`, which the migration guide promises stays.
+     *
      * @docs-private
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get placeholder() {
-        return this.tagInput ? this.tagInput.placeholder : this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
-    /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
-    get focused() {
-        return (this.tagInput && this.tagInput.focused) || this.hasFocusedTag();
+    markForCheck() {
+        this.changeDetectorRef.markForCheck();
     }
     /**
-     * Implemented as part of KbqFormFieldControl.
+     * Whether the cleaner still has a tag to remove, and so is worth showing at all.
+     *
      * @docs-private
      */
-    get empty() {
-        return (!this.tagInput || this.tagInput.empty) && this.tags.length === 0;
+    get canClear() {
+        const predicate = this.clearPredicate();
+        // Read on every check, so it stops at the first accepted tag rather than building the whole list.
+        return !!this.tags?.some((tag) => this.isClearTarget(tag, predicate));
     }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    get shouldLabelFloat() {
-        return !this.empty || this.focused;
+    /** Tags the cleaner removes, in render order. */
+    get clearTargets() {
+        const predicate = this.clearPredicate();
+        return this.tags?.filter((tag) => this.isClearTarget(tag, predicate)) ?? [];
     }
-    /**
-     * Implemented as part of KbqFormFieldControl.
-     * @docs-private
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
+    /** Whether the cleaner removes this tag: the list must allow removal and the predicate must accept it. */
+    isClearTarget(tag, predicate) {
+        return tag.removable() && runClearPredicate(predicate, tag);
     }
-    set disabled(value) {
-        this._disabled = value;
-        this.syncDropListDisabledState();
-    }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the tags in the list can be reordered by dragging. */
     get draggable() {
-        return this._draggable && !this.disabled;
+        return this.draggableState();
     }
     set draggable(value) {
-        this._draggable = value;
+        this._draggable.set(value);
         this.syncDropListDisabledState();
     }
-    /** Whether the tags in the list are removable. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get removable() {
-        return this._removable;
-    }
-    set removable(value) {
-        this._removable = value;
-        this.syncTagsRemovableState();
-    }
     /**
      * Tab index of the tag list. This property is ignored when the tag list contains a tag input or is disabled.
      *
      * @docs-private
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
-        return this.disabled || this.tagInput ? null : this._tabIndex;
+        return this.resolvedTabIndex();
     }
     set tabIndex(value) {
         this.userTabIndex = value;
-        this._tabIndex = value;
+        this._tabIndex.set(value);
+    }
+    /**
+     * The tag components contained within this tag list.
+     *
+     * @docs-private
+     */
+    get tags() {
+        return this.tagsList();
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['draggableInput']) {
+            const draggable = this.draggableInput();
+            if (draggable !== undefined)
+                this.draggable = draggable;
+        }
+        if (changes['tabIndexInput']) {
+            const tabIndex = this.tabIndexInput();
+            if (tabIndex !== undefined)
+                this.tabIndex = tabIndex;
+        }
     }
     constructor() {
         this.elementRef = inject(ElementRef);
@@ -869,23 +1240,74 @@ class KbqTagList {
          *
          * @docs-private
          */
-        this.controlType = 'tag-list';
+        this.controlType = 'tag-list';
+        this.errorStateTracker = new KbqErrorStateTracker(this.defaultErrorStateMatcher, this.ngControl, this.parentFormGroup, this.parentForm);
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /**
+         * Implemented as part of KbqFormFieldControl. Set with `[value]`, by the form control and by the rendered
+         * tags.
+         *
+         * @docs-private
+         */
+        this.value = linkedSignal(() => this.valueInput(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.id = computed(() => this.registeredInput()?.id() ?? this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
         /**
-         * Emits whenever the component state changes and should cause the parent
-         * form-field to update. Implemented as part of `KbqFormFieldControl`.
+         * Implemented as part of KbqFormFieldControl. Taken from the `kbqTagInput` when there is one.
+         *
          * @docs-private
          */
-        this.stateChanges = new Subject();
-        this._required = false;
+        this.placeholder = computed(() => {
+            const tagInput = this.registeredInput();
+            return tagInput ? tagInput.placeholder() : this.placeholderInput();
+        }, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
+        // Derived from the current tags: one removed while focused fires no blur. Read from the query, as syncing
+        // `tags` emits `changes`, whose subscribers must not run inside a computed.
+        this.focused = computed(() => !!this.registeredInput()?.focused() || this.tagsQuery().some((tag) => tag.hasFocus), ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         /**
          * Implemented as part of KbqFormFieldControl. Forwarded from the registered `kbqTagInput`, which
          * is the element the browser actually autofills — the tag list itself is not an input.
          *
          * @docs-private
          */
-        this.autofilled = computed(() => this.registeredInput()?.autofilled?.() ?? false, ...(ngDevMode ? [{ debugName: "autofilled" }] : []));
-        this._disabled = false;
-        this._draggable = false;
+        this.autofilled = computed(() => this.registeredInput()?.autofilled?.() ?? false, ...(ngDevMode ? [{ debugName: "autofilled" }] : /* istanbul ignore next */ []));
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
+        this.empty = computed(() => {
+            const tagInput = this.registeredInput();
+            return (!tagInput || tagInput.empty()) && this.tagsQuery().length === 0;
+        }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /**
+         * Implemented as part of KbqFormFieldControl. Also set by the bound form control.
+         *
+         * @docs-private
+         */
+        this.disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this._draggable = signal(false, ...(ngDevMode ? [{ debugName: "_draggable" }] : /* istanbul ignore next */ []));
+        // One signal per host value. The host bindings of every tag list in a view run in that view's reactive consumer,
+        // where a signal read again by another binding costs a scan of everything the view has read.
+        this.draggableState = computed(() => this._draggable() && !this.disabled(), ...(ngDevMode ? [{ debugName: "draggableState" }] : /* istanbul ignore next */ []));
+        this.resolvedTabIndex = computed(() => this.disabled() || this.registeredInput() ? null : this._tabIndex(), ...(ngDevMode ? [{ debugName: "resolvedTabIndex" }] : /* istanbul ignore next */ []));
         /**
          * Emits when the user drops tag inside tag list container.
          */
@@ -894,19 +1316,36 @@ class KbqTagList {
          * Whether or not this tag list is selectable. When a tag list is not selectable,
          * the selected states for all the tags inside the tag list are always ignored.
          */
-        this.selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.selectable = input(true, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the tags in the list are editable. */
-        this.editable = input(false, ...(ngDevMode ? [{ debugName: "editable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this._removable = true;
-        this._tabIndex = 0;
+        this.editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Decides which tags the projected `KbqCleaner` removes: return `true` to clear the tag, `false` to
+         * keep it. Disabled tags are kept by default. Bind a stable reference — a new function on every change
+         * detection re-runs the predicate over every tag.
+         *
+         * A tag the list does not allow to be removed is never offered, whatever the predicate answers.
+         */
+        this.clearPredicate = input((tag) => !tag.disabled, { ...(ngDevMode ? { debugName: "clearPredicate" } : /* istanbul ignore next */ {}), transform: (fn) => {
+                if (typeof fn !== 'function') {
+                    throw Error('`clearPredicate` must be a function.');
+                }
+                return fn;
+            } });
+        /** Whether the tags in the list are removable. */
+        // Nothing is pushed onto the tags: each folds this into its own `removable` computed, and a push would
+        // overwrite a tag's own `[removable]="false"`, which Angular never re-writes.
+        this.removable = input(true, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this._tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
         /**
          * Event that emits whenever the raw value of the tag-list changes. This is here primarily
          * to facilitate the two-way binding for the `value` input.
+         *
          * @docs-private
          */
         this.valueChange = output();
         /** @docs-private */
-        this.uid = `kbq-tag-list-${nextUniqueId$1++}`;
+        this.uid = inject(_IdGenerator).getId('kbq-tag-list-');
         /**
          * User defined tab index.
          * When it is not null, use user defined tab index. Otherwise use tabIndex
@@ -914,21 +1353,25 @@ class KbqTagList {
          * @docs-private
          */
         this.userTabIndex = null;
+        /** An object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
         /** Event emitted when the selected tag list value has been changed by the user. */
         this.change = output();
         /** @docs-private */
-        this.cleaner = contentChild(KbqCleaner, ...(ngDevMode ? [{ debugName: "cleaner", descendants: false }] : [{ descendants: false }]));
+        this.cleaner = contentChild(KbqCleaner, { ...(ngDevMode ? { debugName: "cleaner" } : /* istanbul ignore next */ {}), descendants: false });
+        this.tagsQuery = contentChildren(forwardRef(() => KbqTag), { ...(ngDevMode ? { debugName: "tagsQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.tagsList = kbqQueryListFrom(this.tagsQuery);
         /**
          * Whether the component is in an error state.
          *
          * @docs-private
          */
-        this.errorState = false;
+        this.errorState = this.errorStateTracker.errorState;
         /**
          * The same control as `tagInput`, kept in a signal so `autofilled` can track it reactively —
          * `registerInput()` runs after the first read.
          */
-        this.registeredInput = signal(undefined, ...(ngDevMode ? [{ debugName: "registeredInput" }] : []));
+        this.registeredInput = signal(undefined, ...(ngDevMode ? [{ debugName: "registeredInput" }] : /* istanbul ignore next */ []));
         /** True when the next `tags.changes` emission is triggered by a UI action, not programmatic update. */
         this.pendingUIChange = false;
         /** Shared range selection state used by pointer and keyboard interactions. */
@@ -939,9 +1382,19 @@ class KbqTagList {
          * appropriate tag that should receive focus until the array of tags updated completely.
          */
         this.lastDestroyedTagIndex = null;
+        /**
+         * Tags the list has asked the consumer to drop. They stay rendered, and stay in `tags`, until the
+         * consumer's own view is re-checked, so until then they cannot be given focus.
+         */
+        this.pendingRemoval = new Set();
         /** Triggers unsubscription from all per-tags streams when tags are reset. */
         this.tagsSubscriptions$ = new Subject();
         /** @docs-private */
+        this.draggableInput = input(undefined, { ...(ngDevMode ? { debugName: "draggableInput" } : /* istanbul ignore next */ {}), alias: 'draggable',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex' });
+        /** @docs-private */
         this.onTouched = () => { };
         /** @docs-private */
         this.onChange = () => { };
@@ -949,6 +1402,11 @@ class KbqTagList {
             this.ngControl.valueAccessor = this;
         }
         this.setupDropListInitialProperties();
+        // A disabled list cannot be reordered.
+        effect(() => {
+            this.disabled();
+            untracked(() => this.syncDropListDisabledState());
+        });
     }
     ngDoCheck() {
         if (this.ngControl) {
@@ -968,22 +1426,13 @@ class KbqTagList {
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((dir) => this.keyManager.withHorizontalOrientation(dir));
         }
-        // Prevents the tag list from capturing focus and redirecting
-        // it back to the first tag when the user tabs out.
-        this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this._tabIndex = -1;
-            // Direct DOM write since the binding update is deferred with eventCoalescing.
-            this.elementRef.nativeElement.tabIndex = -1;
-            setTimeout(() => {
-                this._tabIndex = this.userTabIndex || 0;
-                this.changeDetectorRef.markForCheck();
-            });
-        });
+        kbqLeaveTabOrderOnTabOut(this.keyManager.tabOut, this.elementRef.nativeElement, () => this.tabIndex, this.destroyRef);
         // When the list changes, re-subscribe
         this.tags.changes
             .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
             .subscribe((currentTags) => {
             this.resetTags();
+            this.pendingRemoval.clear();
             if (this.rangeSelection) {
                 const tags = this.tags.toArray();
                 if (!tags.includes(this.rangeSelection.anchor) || !tags.includes(this.rangeSelection.activeEnd)) {
@@ -997,7 +1446,6 @@ class KbqTagList {
             // Defer setting the value in order to avoid the "Expression
             // has changed after it was checked" errors from Angular.
             Promise.resolve().then(() => {
-                this.stateChanges.next();
                 if (currentTags && this.pendingUIChange) {
                     this.pendingUIChange = false;
                     // The latch can survive a UI action the consumer rejected (nothing was
@@ -1011,25 +1459,21 @@ class KbqTagList {
             });
         });
     }
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.tagsList();
+    }
     ngAfterViewInit() {
         this.setupFocusMonitor();
     }
     ngOnDestroy() {
-        this.stateChanges.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
         this.tagsSubscriptions$.next();
     }
     /** @docs-private */
     updateErrorState() {
-        const oldState = this.errorState;
-        const parent = this.parentFormGroup || this.parentForm;
-        const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-        const control = this.ngControl ? this.ngControl.control : null;
-        const newState = matcher.isErrorState(control, parent);
-        if (newState !== oldState) {
-            this.errorState = newState;
-            this.stateChanges.next();
-        }
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
     /** Notifies that the next `tags.changes` emission is UI-initiated. */
     notifyPendingTagChange() {
@@ -1048,7 +1492,7 @@ class KbqTagList {
      * Implemented as part of ControlValueAccessor.
      */
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
     }
     /**
      * Implemented as part of ControlValueAccessor.
@@ -1066,8 +1510,7 @@ class KbqTagList {
      * Implemented as part of ControlValueAccessor.
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.stateChanges.next();
+        this.disabled.set(isDisabled);
     }
     /**
      * Implemented as part of KbqFormFieldControl.
@@ -1081,18 +1524,26 @@ class KbqTagList {
      * Focuses the tag list. If there is a tag input, focuses that instead.
      */
     focus() {
-        if (this.disabled)
+        // Untracked, like the other imperative methods: called from a consumer's `effect()`, the state read on the
+        // way — `disabled`, the tags and their state — would make the effect run again whenever it changes.
+        untracked(() => this.focusFirstTag());
+    }
+    focusFirstTag() {
+        if (this.disabled())
             return;
         if (this.tagInput) {
             this.focusInput();
-            this.stateChanges.next();
             return;
         }
-        if (this.tags.length > 0) {
-            this.keyManager.setFirstItemActive();
-            this.stateChanges.next();
+        // `tags` still lists the tags a pending removal has not rendered away yet, so handing focus to one
+        // of those gives it to a view about to be destroyed and it ends up on the body.
+        const index = this.tags?.toArray().findIndex((tag) => !this.pendingRemoval.has(tag) && !tag.disabled) ?? -1;
+        if (index > -1) {
+            this.keyManager.setActiveItem(index);
             return;
         }
+        // Nothing is left to take it, so keep focus on the list rather than lose it to the body.
+        this.elementRef.nativeElement.focus();
     }
     /**
      * Focuses the tag input inside the tag list.
@@ -1112,7 +1563,7 @@ class KbqTagList {
     handleSelectionInteraction(tag, extendRange) {
         const tags = this.tags.toArray();
         const tagIndex = tags.indexOf(tag);
-        if (this.disabled || !tag.selectable || tag.disabled || !this.isValidIndex(tagIndex))
+        if (this.disabled() || !tag.selectable() || tag.disabled || !this.isValidIndex(tagIndex))
             return;
         if (extendRange) {
             this.extendSelectionTo(tag);
@@ -1127,7 +1578,7 @@ class KbqTagList {
      */
     keydown(event) {
         const target = event.target;
-        if (this.disabled || isNull(target))
+        if (this.disabled() || isNull(target))
             return;
         const shouldSelectAll = this.selectable() && isSelectAll(event);
         const shouldUpdateKeyboardRange = this.selectable() &&
@@ -1140,7 +1591,7 @@ class KbqTagList {
         if (this.isInputEmpty(target)) {
             if (event.keyCode === BACKSPACE ||
                 event.keyCode === LEFT_ARROW ||
-                (event.keyCode === TAB && event.shiftKey)) {
+                (event.keyCode === TAB$1 && event.shiftKey)) {
                 this.keyManager.setLastItemActive();
                 event.preventDefault();
                 return;
@@ -1182,37 +1633,37 @@ class KbqTagList {
                     }
                 }
             }
-            this.stateChanges.next();
         }
     }
     /** When blurred, mark the field as touched when focus moved outside the tag list. */
     blur() {
-        if (!this.hasFocusedTag()) {
-            this.keyManager.setActiveItem(-1);
-        }
-        if (!this.disabled) {
-            if (this.tagInput) {
-                // If there's a tag input, we should check whether the focus moved to tag input.
-                // If the focus is not moved to tag input, mark the field as touched. If the focus moved
-                // to tag input, do nothing.
-                // Timeout is needed to wait for the focus() event trigger on tag input.
-                setTimeout(() => {
-                    if (!this.focused) {
-                        this.markAsTouched();
-                    }
-                });
+        untracked(() => {
+            if (!this.hasFocusedTag()) {
+                this.keyManager.setActiveItem(-1);
             }
-            else {
-                // If there's no tag input, then mark the field as touched.
-                this.markAsTouched();
+            if (!this.disabled()) {
+                if (this.tagInput) {
+                    // If there's a tag input, we should check whether the focus moved to tag input.
+                    // If the focus is not moved to tag input, mark the field as touched. If the focus moved
+                    // to tag input, do nothing.
+                    // Timeout is needed to wait for the focus() event trigger on tag input.
+                    setTimeout(() => {
+                        if (!this.focused()) {
+                            this.markAsTouched();
+                        }
+                    });
+                }
+                else {
+                    // If there's no tag input, then mark the field as touched.
+                    this.markAsTouched();
+                }
             }
-        }
+        });
     }
     /** Mark the field as touched */
     markAsTouched() {
         this.onTouched();
         this.changeDetectorRef.markForCheck();
-        this.stateChanges.next();
     }
     /**
      * Check the tab index as you should not be allowed to focus an empty list.
@@ -1221,7 +1672,7 @@ class KbqTagList {
      */
     updateTabIndex() {
         // If we have 0 tags, we should not allow keyboard focus
-        this._tabIndex = this.userTabIndex || (this.tags.length === 0 ? -1 : 0);
+        this._tabIndex.set(this.userTabIndex || (this.tags.length === 0 ? -1 : 0));
     }
     /**
      * If the amount of tags changed, we need to update the
@@ -1267,7 +1718,7 @@ class KbqTagList {
             this.tags
                 .toArray()
                 .reverse()
-                .find((tag) => tag.selectable && !tag.disabled));
+                .find((tag) => tag.selectable() && !tag.disabled));
     }
     /**
      * Unselects all tags in the list.
@@ -1275,7 +1726,7 @@ class KbqTagList {
      * @docs-private
      */
     unselectAll() {
-        this.tags.forEach((tag) => tag.setSelectedState(false));
+        untracked(() => this.tags.forEach((tag) => tag.setSelectedState(false)));
         this.rangeSelection = null;
     }
     /**
@@ -1284,20 +1735,39 @@ class KbqTagList {
      * @docs-private
      */
     removeSelected() {
-        this.selected.forEach((tag) => tag.remove());
+        untracked(() => this.selected.filter((tag) => tag.canRemove).forEach((tag) => tag.remove()));
+    }
+    /**
+     * Removes the tags `clearPredicate` accepts, which by default leaves the disabled ones in place.
+     *
+     * The tags belong to the consumer, so each one is asked to go through its `removed` output, the same
+     * output the remove control reports to. Unlike that control it will ask for a disabled tag too, when
+     * the predicate accepts one.
+     *
+     * @docs-private
+     */
+    clear() {
+        const targets = untracked(() => this.clearTargets);
+        targets.forEach((tag) => this.pendingRemoval.add(tag));
+        // `KbqCleaner` restores focus to the control right after this, and the autocomplete must not read
+        // that as the user asking for the option list.
+        this.tagInput?.suppressAutocompleteOnNextFocus?.();
+        // Last to first: every handler runs before anything re-renders, so removing by position would see
+        // the indices ahead of it shift if we went the other way.
+        targets.reverse().forEach((tag) => tag.remove());
     }
     /** Whether the rendered tags no longer match the value this control last reported. */
     hasTagsValueChanged() {
         const currentValue = this.tags.map(({ value }) => value);
-        if (!Array.isArray(this._value)) {
+        const value = this.value();
+        if (!Array.isArray(value)) {
             return currentValue.length > 0;
         }
-        return (this._value.length !== currentValue.length ||
-            currentValue.some((value, index) => value !== this._value[index]));
+        return value.length !== currentValue.length || currentValue.some((item, index) => item !== value[index]);
     }
     propagateTagsChanges() {
         const valueToEmit = this.tags.map((tag) => tag.value);
-        this._value = valueToEmit;
+        this.value.set(valueToEmit);
         this.change.emit(new KbqTagListChange(this, valueToEmit));
         this.valueChange.emit(valueToEmit);
         this.onChange(valueToEmit);
@@ -1317,22 +1787,16 @@ class KbqTagList {
                 this.keyManager.setFocusOrigin(origin);
                 this.keyManager.updateActiveItem(tagIndex);
             }
-            this.stateChanges.next();
-        });
-        this.tagBlurChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe(() => {
-            this.blur();
-            this.stateChanges.next();
         });
+        this.tagBlurChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe(() => this.blur());
     }
     listenToTagsRemoved() {
-        this.tagRemoveChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe((event) => {
-            const tag = event.tag;
-            const tagIndex = this.tags.toArray().indexOf(event.tag);
+        this.tagRemoveChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe(({ tag }) => {
             // In case the tag that will be removed is currently focused, we temporarily store
             // the index in order to be able to determine an appropriate sibling tag that will
-            // receive focus.
-            if (this.isValidIndex(tagIndex) && tag.hasFocus) {
-                this.lastDestroyedTagIndex = tagIndex;
+            // receive focus. Taken from the key manager: `tags` no longer holds a destroyed tag.
+            if (tag.hasFocus && this.keyManager.activeItem === tag) {
+                this.lastDestroyedTagIndex = this.keyManager.activeItemIndex;
             }
         });
         // Set the pending flag so the subsequent `tags.changes` is treated as UI action.
@@ -1349,9 +1813,6 @@ class KbqTagList {
     hasFocusedTag() {
         return this.tags.some((tag) => tag.hasFocus);
     }
-    syncTagsRemovableState() {
-        this.tags?.forEach((tag) => (tag.removable = this.removable));
-    }
     setupDropListInitialProperties() {
         this.syncDropListDisabledState();
         this.dropList.elementContainerSelector = '.kbq-tags-list__list-container';
@@ -1395,7 +1856,7 @@ class KbqTagList {
         const fromIndex = Math.min(anchorIndex, activeEndIndex);
         const toIndex = Math.max(anchorIndex, activeEndIndex);
         tags.forEach((tag, index) => {
-            if (tag.disabled || !tag.selectable)
+            if (tag.disabled || !tag.selectable())
                 return;
             const belongsToRange = index >= fromIndex && index <= toIndex;
             const belongedToPreviousRange = index >= previousFromIndex && index <= previousToIndex;
@@ -1408,12 +1869,21 @@ class KbqTagList {
     setRangeOrigin(anchor) {
         this.rangeSelection = anchor ? { anchor, activeEnd: anchor } : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable()", "class.kbq-tag-list_editable": "editable()", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, clearPredicate: { classPropertyName: "clearPredicate", publicName: "clearPredicate", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, draggableInput: { classPropertyName: "draggableInput", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled()", "class.kbq-invalid": "errorState()", "class.kbq-tag-list_selectable": "selectable()", "class.kbq-tag-list_editable": "editable()", "class.kbq-tag-list_removable": "removable()", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [
             { provide: KbqFormFieldControl, useExisting: KbqTagList },
-            // Tag-list cleaners use consumer-provided click handlers; do not also reset the outer form control.
-            { provide: KBQ_CLEANER_CONTEXT, useValue: null }
-        ], queries: [{ propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "tags", predicate: i0.forwardRef(() => KbqTag), descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
+            kbqCleanerFactoryProvider((() => {
+                const tagList = inject(KbqTagList);
+                return {
+                    get control() {
+                        return tagList;
+                    },
+                    clearByEscape: false,
+                    clear: (() => tagList.clear()),
+                    canClear: (() => tagList.canClear)
+                };
+            }))
+        ], queries: [{ propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "tagsQuery", predicate: i0.forwardRef(() => KbqTag), descendants: true, isSignal: true }], exportAs: ["kbqTagList"], usesOnChanges: true, hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
         <div class="kbq-tags-list__list-container">
             <ng-content />
         </div>
@@ -1423,9 +1893,9 @@ class KbqTagList {
                 <ng-content select="kbq-cleaner" />
             </div>
         }
-    `, isInline: true, styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";.kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{animation:none;transition:none}}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tag-list', template: `
         <div class="kbq-tags-list__list-container">
@@ -1439,364 +1909,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }
     `, providers: [
                         { provide: KbqFormFieldControl, useExisting: KbqTagList },
-                        // Tag-list cleaners use consumer-provided click handlers; do not also reset the outer form control.
-                        { provide: KBQ_CLEANER_CONTEXT, useValue: null }
+                        kbqCleanerFactoryProvider((() => {
+                            const tagList = inject(KbqTagList);
+                            return {
+                                get control() {
+                                    return tagList;
+                                },
+                                clearByEscape: false,
+                                clear: (() => tagList.clear()),
+                                canClear: (() => tagList.canClear)
+                            };
+                        }))
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tag-list',
-                        '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-invalid]': 'errorState',
+                        '[class.kbq-disabled]': 'disabled()',
+                        '[class.kbq-invalid]': 'errorState()',
                         '[class.kbq-tag-list_selectable]': 'selectable()',
                         '[class.kbq-tag-list_editable]': 'editable()',
-                        '[class.kbq-tag-list_removable]': 'removable',
+                        '[class.kbq-tag-list_removable]': 'removable()',
                         '[class.kbq-tag-list_draggable]': 'draggable',
                         '[attr.tabindex]': 'tabIndex',
                         '[id]': 'uid',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'keydown($event)'
-                    }, hostDirectives: [CdkDropList], exportAs: 'kbqTagList', styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], draggable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], removable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: Input
-            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{
-                type: Input
-            }], change: [{ type: i0.Output, args: ["change"] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], tags: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqTag), {
-                        // Need to use `descendants: true`,
-                        // Ivy will no longer match indirect descendants if it's left as false.
-                        descendants: true
-                    }]
-            }] } });
-
-const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = [
-    { symbol: /\r?\n/, key: 'Enter', keyCode: ENTER$1 },
-    { symbol: /\t/, key: 'Tab', keyCode: TAB$1 },
-    { symbol: / /, key: ' ', keyCode: SPACE$1 },
-    { symbol: /,/, key: ',', keyCode: COMMA },
-    { symbol: /;/, key: ';', keyCode: SEMICOLON }
-];
-const KBQ_TAGS_DEFAULT_OPTIONS_CONFIG = { separatorKeyCodes: [ENTER$1] };
-/** Injection token to be used to override the default options. */
-const KBQ_TAGS_DEFAULT_OPTIONS = new InjectionToken('kbq-tags-default-options', {
-    providedIn: 'root',
-    factory: () => KBQ_TAGS_DEFAULT_OPTIONS_CONFIG
-});
-/** Utility provider for `KBQ_TAGS_DEFAULT_OPTIONS`. */
-const kbqTagsDefaultOptionsProvider = (options) => ({
-    provide: KBQ_TAGS_DEFAULT_OPTIONS,
-    useValue: { ...KBQ_TAGS_DEFAULT_OPTIONS_CONFIG, ...options }
-});
-// Increasing integer for generating unique ids.
-let nextUniqueId = 0;
-/**
- * Directive that adds tag-specific behaviors to an input element inside `<kbq-form-field>`.
- * May be placed inside or outside of an `<kbq-tag-list>`.
- */
-class KbqTagInput {
-    /**
-     * The list of key codes that will trigger a tagEnd event.
-     *
-     * Defaults to `[ENTER]`.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set separatorKeyCodes(value) {
-        this._separatorKeyCodes = value || [];
-    }
-    /**
-     * The effective set of separators: entries gated by `keyCode` are included only when that
-     * code is present in `separatorKeyCodes`; entries without a `keyCode` (no single-keystroke
-     * equivalent, e.g. a run of whitespace) are always included.
-     * @docs-private
-     */
-    get separators() {
-        return this._separators.filter((separator) => separator.keyCode === undefined || this._separatorKeyCodes.includes(separator.keyCode));
-    }
-    /** Register input for tag list */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set tagList(value) {
-        if (value) {
-            this._tagList = value;
-            this._tagList.registerInput(this);
-        }
-    }
-    /**
-     * Whether or not the tagEnd event will be emitted when the input is blurred.
-     */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get addOnBlur() {
-        return this._addOnBlur;
-    }
-    set addOnBlur(value) {
-        this._addOnBlur = coerceBooleanProperty(value);
-    }
-    /** Whether the input is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled || (this._tagList && this._tagList.disabled);
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    /** Whether the input is empty. */
-    get empty() {
-        return !this.inputElement.value;
-    }
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.defaultOptions = inject(KBQ_TAGS_DEFAULT_OPTIONS);
-        this.trimDirective = inject(KbqTrim, { optional: true, self: true });
-        /**
-         * The form control instance bound to the input, if any.
-         *
-         * @deprecated Read only, and unused by the library: validation lives on the `<kbq-tag-list>`
-         * control. Binding `[formControl]`/`[ngModel]` to the input itself stays supported — it is what
-         * `kbqAutocomplete` drives the input through — only its validators are not consulted.
-         * Will be removed in a future major release.
-         * @docs-private
-         */
-        this.ngControl = inject(NgControl, { optional: true, self: true });
-        /**
-         * The autocomplete trigger attached to the input, if any.
-         * @docs-private
-         */
-        this.autocompleteTrigger = inject(KbqAutocompleteTrigger, { optional: true, self: true });
-        /**
-         * Whether the control is focused.
-         * @docs-private
-         */
-        this.focused = false;
-        /** Whether the control's value was filled in by the browser. */
-        this.autofilled = kbqInjectAutofilled();
-        this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
-        this._separators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
-        /** Emitted when a tag is to be added. */
-        this.tagEnd = output({ alias: 'kbqTagInputTokenEnd' });
-        /** A value indicating whether allow/prevent tags duplication  */
-        this.distinct = input(false, ...(ngDevMode ? [{ debugName: "distinct" }] : []));
-        /** The input's placeholder text. */
-        // TODO: Skipped for migration because:
-        //  This input overrides a field from a superclass, while the superclass field
-        //  is not migrated.
-        this.placeholder = '';
-        /** Unique id for the input. */
-        // TODO: Skipped for migration because:
-        //  This input overrides a field from a superclass, while the superclass field
-        //  is not migrated.
-        this.id = `kbq-tag-list-input-${nextUniqueId++}`;
-        this._addOnBlur = true;
-        /**
-         * Whether the tagEnd event will be emitted when the text pasted.
-         * @default true
-         */
-        this.addOnPaste = input(this.defaultOptions.addOnPaste ?? true, ...(ngDevMode ? [{ debugName: "addOnPaste", alias: 'kbqTagInputAddOnPaste',
-                transform: booleanAttribute }] : [{
-                alias: 'kbqTagInputAddOnPaste',
-                transform: booleanAttribute
-            }]));
-        this._disabled = false;
-        this.inputElement = this.elementRef.nativeElement;
-    }
-    ngOnChanges() {
-        this._tagList.stateChanges.next();
-    }
-    /** @docs-private */
-    onKeydown(event) {
-        const isSeparatorKey = this.matchesInputSeparator(event);
-        if (!this.inputElement.value) {
-            if (isSeparatorKey && event.keyCode !== TAB$1) {
-                event.preventDefault();
-            }
-            this._tagList.keydown(event);
-            event.stopPropagation();
-            return;
-        }
-        if (isSeparatorKey) {
-            if (event.keyCode === ENTER$1 &&
-                this.autocompleteTrigger?.panelOpen &&
-                this.autocompleteTrigger?.activeOption) {
-                return;
-            }
-            this.emitTagEnd();
-            event.preventDefault();
-        }
-    }
-    /**
-     * Checks to see if the blur should emit the (tagEnd) event.
-     * @docs-private
-     */
-    blur(event) {
-        this.focused = false;
-        // Blur the tag list if it is not focused
-        if (!this._tagList.focused) {
-            this._tagList.blur();
-        }
-        // Chromium fires `blur` synchronously when the input becomes disabled, so without this
-        // guard disabling a focused tag input would append whatever was typed.
-        if (!this.disabled && this.addOnBlur && (this.autocompleteTrigger?.onInputBlur()(event) ?? true)) {
-            this.emitTagEnd();
-        }
-        this._tagList.stateChanges.next();
-    }
-    /**
-     * @deprecated No-op. Validation belongs to the `<kbq-tag-list>` form control, which
-     * revalidates itself whenever its value changes. Will be removed in a future major release.
-     * @docs-private
-     */
-    triggerValidation() { }
-    /**
-     * Checks to see if the (tagEnd) event needs to be emitted.
-     * @docs-private
-     */
-    emitTagEnd() {
-        this.addTag(this.trimValue(this.inputElement.value), this.existingTagValues());
-    }
-    /**
-     * Whether the current input value duplicates an existing tag.
-     * @docs-private
-     */
-    get hasDuplicates() {
-        return this.tagValues().has(this.trimValue(this.inputElement.value));
-    }
-    /** @docs-private */
-    onInput() {
-        // Let tag list know whenever the value changes.
-        this._tagList.stateChanges.next();
-    }
-    /** @docs-private */
-    onPaste($event) {
-        if (!$event.clipboardData) {
-            return;
-        }
-        const data = $event.clipboardData.getData('text');
-        if (!data || !this.addOnPaste()) {
-            return;
-        }
-        const separatorsInString = this.getPasteSeparatorPatterns(data);
-        // prettier-ignore
-        const dividedString = separatorsInString.length > 0 ?
-            [...data.split(new RegExp(`${separatorsInString.join('|')}`))] :
-            [data];
-        // Built once per paste, then updated as items are accepted, so a batch also dedupes
-        // against itself — `tags` is a QueryList that cannot refresh between iterations.
-        const existingValues = this.existingTagValues();
-        dividedString.forEach((item) => this.addTag(this.trimValue(item), existingValues));
-        $event.preventDefault();
-        $event.stopPropagation();
-    }
-    /** @docs-private */
-    onFocus() {
-        this.focused = true;
-        this._tagList.unselectAll();
-        this._tagList.stateChanges.next();
-    }
-    /** Focuses the input. */
-    focus() {
-        this.inputElement.focus();
-    }
-    getPasteSeparatorPatterns(value) {
-        return this.separators
-            .filter((separator) => (!separator.appliesTo || separator.appliesTo.includes('paste')) &&
-            value.search(separator.symbol) > -1)
-            .map((separator) => separator.symbol.source);
-    }
-    /**
-     * Single path for adding a tag, shared by typed input, blur and paste.
-     * `existingValues` is `null` unless `distinct` is on, and is mutated as values are accepted.
-     */
-    addTag(value, existingValues) {
-        if (existingValues) {
-            if (existingValues.has(value))
-                return;
-            existingValues.add(value);
-        }
-        // An empty value adds nothing, so latching the flag here would make the next
-        // programmatic tags update look UI-initiated.
-        if (value) {
-            this._tagList?.notifyPendingTagChange();
-        }
-        this.tagEnd.emit({ input: this.inputElement, value });
-    }
-    /** Values to dedupe against, or `null` when duplicates are allowed. */
-    existingTagValues() {
-        return this.distinct() ? this.tagValues() : null;
-    }
-    tagValues() {
-        return new Set(this._tagList.tags.map(({ value }) => value));
-    }
-    trimValue(value) {
-        return (this.trimDirective ? this.trimDirective.trim(value) : value);
-    }
-    /** Checks whether a keydown event matches a separator that applies to typed input. */
-    matchesInputSeparator(event) {
-        return this.separators.some((separator) => separator.key === event.key &&
-            !hasModifierKey(event) &&
-            (!separator.appliesTo || separator.appliesTo.includes('input')));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: { classPropertyName: "separatorKeyCodes", publicName: "kbqTagInputSeparatorKeyCodes", isSignal: false, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tagList: { classPropertyName: "tagList", publicName: "kbqTagInputFor", isSignal: false, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "kbqTagInputAddOnBlur", isSignal: false, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "kbqTagInputAddOnPaste", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[kbqTagInputFor]',
-                    host: {
-                        class: 'kbq-tag-input',
-                        '[id]': 'id',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.placeholder]': 'placeholder || null',
-                        '(keydown)': 'onKeydown($event)',
-                        '(blur)': 'blur($event)',
-                        '(focus)': 'onFocus()',
-                        '(input)': 'onInput()',
-                        '(paste)': 'onPaste($event)'
-                    },
-                    hostDirectives: [KbqFieldSizingContent],
-                    exportAs: 'kbqTagInput, kbqTagInputFor'
-                }]
-        }], ctorParameters: () => [], propDecorators: { separatorKeyCodes: [{
-                type: Input,
-                args: ['kbqTagInputSeparatorKeyCodes']
-            }], tagEnd: [{ type: i0.Output, args: ["kbqTagInputTokenEnd"] }], distinct: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinct", required: false }] }], placeholder: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], tagList: [{
-                type: Input,
-                args: ['kbqTagInputFor']
-            }], addOnBlur: [{
-                type: Input,
-                args: ['kbqTagInputAddOnBlur']
-            }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputAddOnPaste", required: false }] }], disabled: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [CdkDropList], exportAs: 'kbqTagList', styles: ["@charset \"UTF-8\";.kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{animation:none;transition:none}}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], clearPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearPredicate", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], tagsQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqTag), { ...{ descendants: true }, isSignal: true }] }], draggableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }] } });
 
 const COMPONENTS = [
     KbqTagEditSubmit,
-    KbqTagEditInput
+    KbqTagEditInput,
+    KbqTagPrefix,
+    KbqTagSuffix
 ];
 class KbqTagsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
-            KbqTagEditInput, KbqTagList,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
+            KbqTagEditInput,
+            KbqTagPrefix,
+            KbqTagSuffix, KbqTagList,
             KbqTag,
             KbqTagInput,
             KbqTagTrailingIcon,
@@ -1807,10 +1958,12 @@ class KbqTagsModule {
             KbqTagTrailingIcon,
             KbqTagAvatar,
             KbqTagRemove, KbqTagEditSubmit,
-            KbqTagEditInput] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER$1] })], imports: [PlatformModule] }); }
+            KbqTagEditInput,
+            KbqTagPrefix,
+            KbqTagSuffix] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagsModule, providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER] })], imports: [PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1823,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqTagAvatar,
                         KbqTagRemove
                     ],
-                    providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER$1] })],
+                    providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER] })],
                     exports: [
                         KbqTagList,
                         KbqTag,
@@ -1840,5 +1993,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule, kbqTagsDefaultOptionsProvider };
+export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagPrefix, KbqTagRemove, KbqTagSelectionChange, KbqTagSuffix, KbqTagTrailingIcon, KbqTagsModule, kbqTagsDefaultOptionsProvider };
 //# sourceMappingURL=koobiq-components-tags.mjs.map