@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-icon.mjs

@@ -1,21 +1,22 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, SecurityContext, Injectable, ElementRef, ChangeDetectorRef, DestroyRef, input, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, signal, effect, booleanAttribute, NgModule } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import { KbqColorDirective } from '@koobiq/components/core';
-import { of, throwError, ReplaySubject, EMPTY } from 'rxjs';
-import { map, catchError, share, finalize, switchMap } from 'rxjs/operators';
+import { InjectionToken, inject, SecurityContext, Injectable, DestroyRef, Renderer2, input, booleanAttribute, computed, numberAttribute, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, isDevMode, NgModule } from '@angular/core';
+import { KbqColorDirective, KbqComponentColors } from '@koobiq/components/core';
+import { defer, of, throwError, Subscription } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
+import { map, catchError, share, finalize } from 'rxjs/operators';
 
 /**
  * Injection token used by `KbqIcon` to look up its `KbqIconErrorStateContext`.
+ *
  * @docs-private
  */
 const KBQ_ICON_ERROR_STATE_CONTEXT = new InjectionToken('KbqIconErrorStateContext');
 /**
  * Utility provider for `KBQ_ICON_ERROR_STATE_CONTEXT`, built from a factory that resolves the current host's `KbqIconErrorStateContext`.
+ *
  * @docs-private
  */
 const kbqIconErrorStateContextFactoryProvider = (factory) => ({
@@ -41,12 +42,17 @@ function kbqIconsResolverProvider(resolver) {
     return { provide: KBQ_ICON_RESOLVER, useValue: resolver, multi: true };
 }
 /**
- * Registers a name→SVG/URL dictionary as an icon resolver.
- * Values starting with `<` are treated as inline SVG (no HTTP request).
- * All other values are treated as URLs and fetched at runtime.
+ * Registers a name→URL dictionary as an icon resolver. Values are fetched at runtime through `HttpClient`.
+ *
+ * A value starting with `<` is taken as inline markup and passed through Angular's HTML sanitizer,
+ * which drops `<svg>` wholesale — register inline icons with
+ * `KbqIconRegistry.addSvgIconLiteral(name, sanitizer.bypassSecurityTrustHtml(svg))` instead, where the
+ * markup is a `SafeHtml` the application has explicitly vouched for.
  *
  * @example
- * kbqIconsDictProvider({ 'chevron-down-s_16': '<svg>...</svg>' })
+ * ```ts
+ * kbqIconsDictProvider({ 'chevron-down-s_16': '/assets/icons/chevron-down-s_16.svg' })
+ * ```
  */
 function kbqIconsDictProvider(dict) {
     return kbqIconsResolverProvider((name) => dict[name] ?? null);
@@ -123,8 +129,9 @@ class KbqIconRegistry {
         let resolvedNs = namespace;
         let resolvedName = name;
         if (resolvedName.trimStart().startsWith('<')) {
-            const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, resolvedName) ?? '';
-            return of(this.svgElementFromText(sanitized));
+            // `defer` so that unparsable markup arrives as an error notification: every failure of this
+            // class has to reach the caller through the same channel.
+            return defer(() => of(this.svgElementFromText(this.sanitizer.sanitize(SecurityContext.HTML, resolvedName) ?? '')));
         }
         const colonIndex = name.indexOf(':');
         if (colonIndex !== -1) {
@@ -171,9 +178,11 @@ class KbqIconRegistry {
             return of(cloneSvg(config.svgElement));
         }
         if (config.svgText) {
-            const svg = this.svgElementFromText(config.svgText, config.options);
-            config.svgElement = svg;
-            return of(cloneSvg(svg));
+            return defer(() => {
+                const svg = this.svgElementFromText(config.svgText, config.options);
+                config.svgElement = svg;
+                return of(cloneSvg(svg));
+            });
         }
         if (config.url) {
             return this.fetchUrl(config.url, config.options?.withCredentials).pipe(map((text) => {
@@ -239,7 +248,9 @@ class KbqIconRegistry {
         }));
     }
     extractIconFromSet(name, setElement) {
-        const symbol = setElement.querySelector(`#${name}`);
+        // Symbol ids come from the consumer's sprite, so they are not guaranteed to be valid CSS
+        // identifiers — `3d-view_16` alone would make `#${name}` throw. Matching on the id avoids escaping.
+        const symbol = Array.from(setElement.querySelectorAll('symbol')).find((element) => element.id === name);
         if (!symbol)
             return null;
         const svg = this.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -267,9 +278,11 @@ class KbqIconRegistry {
         return svg;
     }
     fetchUrl(url, withCredentials = false) {
+        // Every other failure in this class is an error notification; a synchronous throw here would
+        // escape `getNamedSvgIcon` at the call site, where no `catchError` can reach it.
         if (!this.httpClient) {
-            throw Error('KbqIconRegistry: HttpClient is required for loading icons from URLs. ' +
-                'Provide it via provideHttpClient() or HttpClientModule.');
+            return throwError(() => Error('KbqIconRegistry: HttpClient is required for loading icons from URLs. ' +
+                'Provide it via provideHttpClient() or HttpClientModule.'));
         }
         const urlStr = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, url);
         if (!urlStr) {
@@ -282,207 +295,427 @@ class KbqIconRegistry {
         this.inProgressUrlFetches.set(urlStr, fetch);
         return fetch;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconRegistry, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** Marks an injected `<svg>` with the name it renders, so hydration can recognize and adopt it. */
+const ICON_NAME_ATTRIBUTE = 'data-kbq-icon-name';
+/**
+ * Renders an icon on the element it is applied to: a `@koobiq/icons` font glyph by default, or an inline
+ * `<svg>` when the name resolves through a configured `KbqIconRegistry`. A name that does not resolve
+ * falls back to the font class, and every later name is resolved again.
+ *
+ * The host is `aria-hidden` by default: an icon carries no text of its own, and in nearly every place the
+ * library and its consumers use one it repeats a label that is already there. A meaningful icon opts out
+ * with `aria-hidden="false"`, and then has to supply its own `role="img"` and `aria-label`.
+ */
 class KbqIcon extends KbqColorDirective {
+    /**
+     * Whether `autoColor` takes the error color from the host's error state.
+     *
+     * @docs-private
+     */
+    get autoColorError() {
+        return this.autoColor && this.hostErrorState();
+    }
+    /**
+     * Name the inline SVG is resolved for, which is `iconName` however that was set.
+     *
+     * @docs-private
+     */
+    get svgIconName() {
+        return this.iconName;
+    }
     constructor() {
-        super(...arguments);
-        this.elementRef = inject(ElementRef);
+        super();
         /**
          * Host providing error state for `autoColor`, when the icon sits inside one (e.g. a form field).
+         *
          * @docs-private
          */
         this.errorStateContext = inject(KBQ_ICON_ERROR_STATE_CONTEXT, { optional: true });
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.registry = inject(KbqIconRegistry, { optional: true });
         this.destroyRef = inject(DestroyRef);
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
+        this.renderer = inject(Renderer2);
+        /**
+         * Whether the icon is hidden from assistive technology. Left unbound, it falls back to
+         * `defaultAriaHidden`, which is `true` for a decorative icon and `false` for an interactive one.
+         */
+        this.ariaHidden = input(undefined, { ...(ngDevMode ? { debugName: "ariaHidden" } : /* istanbul ignore next */ {}), alias: 'aria-hidden',
+            // `null` is how a template says "leave it unset" (`cond ? true : null`), so it means the default
+            // rather than `false` — `booleanAttribute(null)` would turn it into an explicit opt-out.
+            transform: (value) => (value == null ? undefined : booleanAttribute(value)) });
+        /** Whether an icon of this kind is decorative when the caller says nothing. Overridden by subclasses. */
+        this.defaultAriaHidden = true;
+        /** @docs-private */
+        this.resolvedAriaHidden = computed(() => {
+            const explicit = this.ariaHidden();
+            // An explicit value is the caller's, including "false" — reflecting it keeps the documented
+            // opt-out visible in the DOM. Only an unbound input falls back to the kind's default.
+            if (explicit !== undefined)
+                return String(explicit);
+            return this.defaultAriaHidden ? 'true' : null;
+        }, ...(ngDevMode ? [{ debugName: "resolvedAriaHidden" }] : /* istanbul ignore next */ []));
+        /**
+         * Rendered size of the icon in pixels. Left unset, the size is read from the `_<px>` suffix of the
+         * icon name (`kbq-plus_16` → 16), which is the `@koobiq/icons` convention; a name without one is
+         * rendered at whatever size the surrounding styles give it.
+         */
+        this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : /* istanbul ignore next */ {}), transform: (value) => {
+                const size = numberAttribute(value);
+                return Number.isNaN(size) ? undefined : size;
+            } });
+        /**
+         * Whether the icon follows the error state of the host it sits in (a form field, for one), painting
+         * itself red while that host reports an error.
+         */
         this.autoColor = false;
+        /**
+         * Whether the icon takes the error color whatever its `color` is. Set by a host that tints the icons
+         * it holds, such as `KbqEmptyState`.
+         */
         this.hasError = false;
-        this.name = 'KbqIcon';
+        // The host's error state through a signal of the icon's own: the host's control reads it in its host bindings, in
+        // the same reactive consumer as the icon's, where a signal read again after others costs a scan of all it has read
+        // so far.
+        this.hostErrorState = computed(() => !!this.errorStateContext?.errorState(), ...(ngDevMode ? [{ debugName: "hostErrorState" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether `color` is the error color. A signal of its own because the color class binding already reads
+         * `color`: the host bindings of every icon in a view run in that view's reactive consumer, which finds a
+         * signal read a second time by scanning all it has read so far, O(N²) per check across N icons.
+         *
+         * @internal
+         */
+        this.colorIsError = computed(() => this.color() === KbqComponentColors.Error, ...(ngDevMode ? [{ debugName: "colorIsError" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.autoColorInput = input(undefined, { ...(ngDevMode ? { debugName: "autoColorInput" } : /* istanbul ignore next */ {}), alias: 'autoColor',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.iconNameInput = input(undefined, { ...(ngDevMode ? { debugName: "iconNameInput" } : /* istanbul ignore next */ {}), alias: 'kbq-icon' });
+        /**
+         * Whether the host gets an inline `max-height` matching the icon size. Only the bare icon does: the
+         * button and the item size themselves through their own padding.
+         */
+        this.appliesMaxHeight = true;
         /**
          * True when icon is being rendered as inline SVG.
+         *
          * @docs-private
          */
-        this.svgIcon = false;
-        /** @docs-private */
-        this.svgIconName = new ReplaySubject(1);
-        this.updateState = () => {
-            this.hasError = !!this.errorStateContext?.errorState;
-            this.changeDetectorRef.markForCheck();
-        };
+        // Starts from the DOM, not `false`: on a hydrated page the svg is already there, and `false`
+        // would show the font class until the async resolution catches up.
+        this.svgIcon = signal(!!this.findTaggedSvg(), ...(ngDevMode ? [{ debugName: "svgIcon" }] : /* istanbul ignore next */ []));
+        /** Resolution of the inline SVG, replaced whenever the name changes. */
+        this.svgIconSubscription = Subscription.EMPTY;
+        /** The `<svg>` injected for the resolved name — or already on the host, tagged, from SSR. */
+        this.injectedSvg = this.findTaggedSvg();
+        /** Whether the content is initialized, which is when the inline SVG is first resolved. */
+        this.contentInitialized = false;
+        this.destroyRef.onDestroy(() => this.svgIconSubscription.unsubscribe());
     }
     getHostElement() {
         return this.elementRef.nativeElement;
     }
+    /** An `<svg>` already on the host, tagged with the name it renders — e.g. one SSR left behind. */
+    findTaggedSvg() {
+        return this.getHostElement().querySelector(`svg[${ICON_NAME_ATTRIBUTE}]`);
+    }
+    /**
+     * Sets the icon name from code and resolves its inline SVG again. Before the content is initialized,
+     * assigning `iconName` does the same.
+     *
+     * @docs-private
+     */
+    setIconName(name) {
+        this.iconName = name;
+        if (this.contentInitialized)
+            this.resolveSvgIcon();
+    }
+    /** @docs-private */
     updateMaxHeight() {
-        if (this.name !== 'KbqIcon') {
+        if (!this.appliesMaxHeight) {
             return;
         }
-        const size = this.parseIconSize();
-        if (size) {
-            this.getHostElement().style.maxHeight = `${size}px`;
+        const size = this.resolveIconSize();
+        const host = this.getHostElement();
+        if (size !== undefined) {
+            this.renderer.setStyle(host, 'max-height', `${size}px`);
+        }
+        else {
+            // Without this the ceiling written for the previous name keeps clipping the new glyph.
+            this.renderer.removeStyle(host, 'max-height');
         }
     }
     ngOnChanges(changes) {
-        if (changes.iconName) {
-            this.svgIconName.next(changes['iconName'].currentValue);
-        }
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        // A bound `undefined` is a value as well: auto color turns off and the icon is removed.
+        if (changes['autoColorInput'])
+            this.autoColor = this.autoColorInput() ?? false;
+        // A name change reaches the size through the resolution; an explicit size resolves nothing.
+        if (changes['iconSize'] && this.contentInitialized)
+            this.applyIconSize();
+        if (changes['iconNameInput'])
+            this.setIconName(this.iconNameInput() ?? '');
     }
     ngAfterContentInit() {
-        if (this.autoColor) {
-            this.errorStateContext?.stateChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateState);
-            this.updateState();
-        }
         this.updateMaxHeight();
-        this.svgIconName
-            .pipe(switchMap((name) => {
-            if (!this.registry || !name) {
-                this.svgIcon = false;
-                return EMPTY;
-            }
-            return this.registry.getNamedSvgIcon(name);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (svg) => {
-                this.svgIcon = true;
-                const host = this.getHostElement();
-                // Remove any previously injected SVG.
-                const existing = host.querySelector('svg');
-                if (existing) {
-                    host.removeChild(existing);
-                }
-                const size = this.parseIconSize();
-                if (size) {
-                    svg.setAttribute('width', `${size}`);
-                    svg.setAttribute('height', `${size}`);
-                }
-                host.insertBefore(svg, host.firstChild);
-                this.changeDetectorRef.markForCheck();
-            },
-            error: () => {
-                // Icon not registered — fall through to font-class path.
-                this.svgIcon = false;
-                this.updateMaxHeight();
-                this.changeDetectorRef.markForCheck();
-            }
+        this.contentInitialized = true;
+        this.resolveSvgIcon();
+    }
+    /** Renders `svgIconName` as inline SVG when the registry knows it, dropping a resolution still pending. */
+    resolveSvgIcon() {
+        const name = this.svgIconName;
+        this.svgIconSubscription.unsubscribe();
+        if (!this.registry || !name) {
+            this.renderSvgIcon(null);
+            return;
+        }
+        const registry = this.registry;
+        // Deferred so that a resolver or a literal that throws falls back to the font class as well, and the
+        // next name is resolved again.
+        this.svgIconSubscription = defer(() => registry.getNamedSvgIcon(name)).subscribe({
+            next: (svg) => this.renderSvgIcon(svg),
+            error: () => this.renderSvgIcon(null)
         });
     }
+    /** Injects the resolved `<svg>`, or drops back to the font class when the name did not resolve. */
+    renderSvgIcon(svg) {
+        const host = this.getHostElement();
+        const previous = this.injectedSvg;
+        // A matching svg is already there (SSR's, most likely) — leave it rather than replace it,
+        // which would duplicate it if the replacement raced the DOM it's reusing.
+        if (previous && svg && previous.getAttribute(ICON_NAME_ATTRIBUTE) === this.iconName) {
+            this.svgIcon.set(true);
+            this.applyIconSize();
+            return;
+        }
+        // Only the element injected here (or adopted above): an `<svg>` projected into the host is
+        // the consumer's content.
+        if (previous) {
+            this.renderer.removeChild(host, previous);
+        }
+        this.injectedSvg = svg;
+        this.svgIcon.set(!!svg);
+        if (svg) {
+            if (this.iconName) {
+                this.renderer.setAttribute(svg, ICON_NAME_ATTRIBUTE, this.iconName);
+            }
+            this.renderer.insertBefore(host, svg, host.firstChild);
+        }
+        this.applyIconSize();
+    }
+    /** Sizes the injected `<svg>` and the host's `max-height` to the resolved icon size. */
+    applyIconSize() {
+        const size = this.resolveIconSize();
+        const svg = this.injectedSvg;
+        if (svg && size !== undefined) {
+            this.renderer.setAttribute(svg, 'width', `${size}`);
+            this.renderer.setAttribute(svg, 'height', `${size}`);
+        }
+        this.updateMaxHeight();
+    }
+    resolveIconSize() {
+        return this.iconSize() ?? this.parseIconSize();
+    }
     parseIconSize() {
         const iconName = this.iconName;
         const baseName = iconName?.includes(':') ? iconName.split(':')[1] : iconName;
-        return parseInt(baseName?.split('_').pop() ?? '');
+        const size = parseInt(baseName?.split('_').pop() ?? '');
+        return Number.isNaN(size) ? undefined : size;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqIcon, isStandalone: true, selector: "[kbq-icon]", inputs: { small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "kbq-icon", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "svgIcon ? null : iconName", "class.kbq-error": "color === \"error\" || hasError" }, classAttribute: "kbq kbq-icon" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqIcon, isStandalone: true, selector: "[kbq-icon]", inputs: { ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, autoColorInput: { classPropertyName: "autoColorInput", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null }, iconNameInput: { classPropertyName: "iconNameInput", publicName: "kbq-icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "svgIcon() ? null : iconName", "class.kbq-error": "colorIsError() || hasError || autoColorError", "attr.aria-hidden": "resolvedAriaHidden()" }, classAttribute: "kbq kbq-icon" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color, var(--kbq-icon-contrast))}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color, var(--kbq-icon-theme))}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color, var(--kbq-icon-contrast))}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color, var(--kbq-icon-error))}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color, var(--kbq-icon-warning))}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color, var(--kbq-icon-success))}\n", "@charset \"UTF-8\";\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIcon, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-icon]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq kbq-icon',
-                        '[class]': 'svgIcon ? null : iconName',
-                        '[class.kbq-error]': 'color === "error" || hasError'
-                    }, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"] }]
-        }], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], autoColor: [{
-                type: Input
-            }], iconName: [{
-                type: Input,
-                args: [{ alias: 'kbq-icon' }]
-            }] } });
+                        '[class]': 'svgIcon() ? null : iconName',
+                        '[class.kbq-error]': 'colorIsError() || hasError || autoColorError',
+                        '[attr.aria-hidden]': 'resolvedAriaHidden()'
+                    }, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color, var(--kbq-icon-contrast))}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color, var(--kbq-icon-theme))}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color, var(--kbq-icon-contrast))}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade))}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color, var(--kbq-icon-error))}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color, var(--kbq-icon-warning))}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color, var(--kbq-icon-success))}\n", "@charset \"UTF-8\";\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], autoColorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColor", required: false }] }], iconNameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-icon", required: false }] }] } });
 
+/** Host elements that are already buttons, or already activated from the keyboard by the browser. */
+const NATIVELY_ACTIVATED_NODES = ['BUTTON', 'INPUT'];
+/**
+ * An icon that acts as a button. Applied to a native `<button>` it only adds the styling; applied to any
+ * other element — `<i>` is what the library itself mostly uses — it also supplies the semantics the
+ * element does not have: `role="button"` and `aria-disabled`. It does not synthesize Enter/Space
+ * activation itself — attach a `(keydown.enter)`/`(keydown.space)` listener where it is used.
+ *
+ * It has no text of its own, so give it an `aria-label` (or an `aria-labelledby`); in dev mode it warns
+ * when it has neither.
+ *
+ * It extends `KbqIcon` for the rendering, but deliberately does not register under that DI token: a
+ * `contentChild(KbqIcon)` is looking for a decorative icon to position or tint, and an interactive
+ * control is not one. See the note on `KbqIconItem`.
+ */
 class KbqIconButton extends KbqIcon {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Position of the button in the tab order. A disabled button is taken out of it entirely. */
     get tabindex() {
         return this.disabled ? null : this._tabindex;
     }
     set tabindex(value) {
         this._tabindex = value;
     }
-    // @todo 20 In the next major release this feature will be replaced on the input signal.
     /** Whether the button is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
-        return this._disabled;
+        return this.disabledSignal();
     }
     set disabled(value) {
         this.disabledSignal.set(value);
     }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        // A bound `undefined` or `null` restores the default tabindex instead of dropping the button out of the tab order.
+        if (changes['tabindexInput']) {
+            const tabindex = this.tabindexInput();
+            this.tabindex = tabindex === undefined ? 0 : tabindex;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
     constructor() {
         super();
+        /** An icon button is interactive and exposes its own name, so it is not decorative by default. */
+        this.defaultAriaHidden = false;
         this.focusMonitor = inject(FocusMonitor);
         /** Size of the icon button. */
-        this.size = input('normal', ...(ngDevMode ? [{ debugName: "size" }] : []));
-        /**
-         * @deprecated Use `size` input instead. Will be removed in the next major release (#DS-5338).
-         */
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
+        this.size = input('normal', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.isCompact = computed(() => this.size() === 'compact' || this.small(), ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+        this.iconNameInput = input(undefined, { ...(ngDevMode ? { debugName: "iconNameInput" } : /* istanbul ignore next */ {}), alias: 'kbq-icon-button' });
         this._tabindex = 0;
         /** @docs-private */
-        this.disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : []));
-        this.name = 'KbqIconButton';
-        // @todo 20 In the next major release this line will be deleted.
-        toObservable(this.disabledSignal).subscribe((value) => (this._disabled = value));
+        this.disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "disabledSignal" }] : /* istanbul ignore next */ []));
+        /** The button sizes itself through its own padding, so it never gets the bare icon's `max-height`. */
+        this.appliesMaxHeight = false;
+        /** @docs-private */
+        this.tabindexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabindexInput" } : /* istanbul ignore next */ {}), alias: 'tabindex',
+            // `numberAttribute` gives NaN for what it cannot parse, and `tabindex="NaN"` is an invalid attribute the
+            // browser ignores, so an unparsable value renders no tabindex at all.
+            transform: (value) => {
+                if (value == null)
+                    return undefined;
+                const tabindex = numberAttribute(value);
+                return Number.isNaN(tabindex) ? null : tabindex;
+            } });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         effect(() => (this.disabledSignal() ? this.stopFocusMonitor() : this.runFocusMonitor()));
     }
     ngAfterViewInit() {
         this.runFocusMonitor();
+        this.applyButtonRole();
+        this.warnIfMissingAccessibleName();
     }
     ngOnDestroy() {
         this.stopFocusMonitor();
     }
+    /**
+     * Whether the host already behaves like a button, so the browser activates it from the keyboard and
+     * announces it without help.
+     *
+     * Read on demand rather than captured in the constructor: `routerLink` and a bound `[attr.href]` both
+     * write the attribute during the update pass, so an anchor that navigates carries no `href` at all
+     * while directive constructors run.
+     */
+    isNativelyActivated() {
+        const host = this.getHostElement();
+        return NATIVELY_ACTIVATED_NODES.includes(host.nodeName) || (host.nodeName === 'A' && host.hasAttribute('href'));
+    }
+    /**
+     * A link that navigates keeps its own role; anything else is a button only because this component
+     * says so, and has to be announced as one.
+     *
+     * Written through the renderer instead of a host binding, because the binding is evaluated in the
+     * parent's update pass — before `routerLink` has set its `href` — and on an `OnPush` component it may
+     * never be evaluated again to correct itself.
+     */
+    applyButtonRole() {
+        const host = this.getHostElement();
+        if (this.isNativelyActivated() || host.hasAttribute('role'))
+            return;
+        this.renderer.setAttribute(host, 'role', 'button');
+    }
+    /**
+     * `KbqIcon` renders a decorative glyph, so an icon button carries no text. Without an
+     * `aria-label`/`aria-labelledby`/`title` it has no accessible name at all (AXE `button-name`).
+     *
+     * A host that opted into `aria-hidden="true"` is exempt: assistive technology never reaches it, so it
+     * has nothing to be named for. `KbqStepper` and the datepicker toggle are both built that way — a
+     * mouse-only affordance beside a control that already carries the keyboard interaction.
+     */
+    warnIfMissingAccessibleName() {
+        if (!isDevMode())
+            return;
+        const host = this.getHostElement();
+        if (host.getAttribute('aria-hidden') === 'true')
+            return;
+        const hasAccessibleName = !!host.textContent?.trim() ||
+            host.hasAttribute('aria-label') ||
+            host.hasAttribute('aria-labelledby') ||
+            host.hasAttribute('title');
+        if (hasAccessibleName)
+            return;
+        // eslint-disable-next-line no-console
+        console.warn('KbqIconButton has no accessible name. Add [aria-label] or [aria-labelledby] to it.', host);
+    }
     runFocusMonitor() {
         this.focusMonitor.monitor(this.getHostElement(), true);
     }
     stopFocusMonitor() {
         this.focusMonitor.stopMonitoring(this.getHostElement());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqIconButton, isStandalone: true, selector: "[kbq-icon-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "kbq-icon-button", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-disabled": "disabled", "class.kbq-icon-button_compact": "isCompact()", "class.kbq-icon-button_small": "isCompact()" }, classAttribute: "kbq kbq-icon-button" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small,.kbq-icon-button.kbq-icon-button_compact{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqIconButton, isStandalone: true, selector: "[kbq-icon-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconNameInput: { classPropertyName: "iconNameInput", publicName: "kbq-icon-button", 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 } }, host: { properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "attr.aria-disabled": "disabled || null", "class.kbq-disabled": "disabled", "class.kbq-icon-button_compact": "size() === 'compact'" }, classAttribute: "kbq kbq-icon-button" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_compact{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}@media(forced-colors:active){.kbq-icon-button.cdk-keyboard-focused{outline:1px solid;outline-offset:1px}}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: 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: KbqIconButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconButton, decorators: [{
             type: Component,
             args: [{ selector: `[kbq-icon-button]`, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq kbq-icon-button',
                         '[attr.tabindex]': 'tabindex',
                         '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-disabled]': 'disabled || null',
                         '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-icon-button_compact]': 'isCompact()',
-                        // @deprcated Will be removed in the next major release (#DS-5338)
-                        '[class.kbq-icon-button_small]': 'isCompact()'
-                    }, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small,.kbq-icon-button.kbq-icon-button_compact{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], iconName: [{
-                type: Input,
-                args: [{ alias: 'kbq-icon-button' }]
-            }], tabindex: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                        '[class.kbq-icon-button_compact]': "size() === 'compact'"
+                    }, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_compact{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}@media(forced-colors:active){.kbq-icon-button.cdk-keyboard-focused{outline:1px solid;outline-offset:1px}}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconNameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-icon-button", required: false }] }], tabindexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+/**
+ * An icon on a filled round background — the status badge of an alert or an empty state. Decorative like
+ * `KbqIcon`, and hidden from assistive technology by the same default.
+ *
+ * Host metadata is inherited from `KbqIcon` through `ɵɵInheritDefinitionFeature`; DI tokens are not, so a
+ * `contentChild(KbqIcon)` does not match an icon item. That is deliberate — a host that wants both asks
+ * for both, the way `KbqAlert` does, and telling them apart is what lets it report two projected icons.
+ */
 class KbqIconItem extends KbqIcon {
     constructor() {
         super(...arguments);
-        this.name = 'KbqIconItem';
-        this.fade = input(false, ...(ngDevMode ? [{ debugName: "fade" }] : []));
-        this.big = input(false, ...(ngDevMode ? [{ debugName: "big" }] : []));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqIconItem, isStandalone: true, selector: "[kbq-icon-item]", inputs: { iconName: { classPropertyName: "iconName", publicName: "kbq-icon-item", isSignal: false, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-icon-item_normal": "!big()", "class.kbq-icon-item_big": "big()", "class.kbq-icon-item_fade-off": "!fade()", "class.kbq-icon-item_fade-on": "fade()" }, classAttribute: "kbq kbq-icon-item kbq-icon-item_filled" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item>svg{fill:currentColor;vertical-align:middle}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        /** The item sizes itself through its own padding, so it never gets the bare icon's `max-height`. */
+        this.appliesMaxHeight = false;
+        /** @docs-private */
+        this.iconNameInput = input(undefined, { ...(ngDevMode ? { debugName: "iconNameInput" } : /* istanbul ignore next */ {}), alias: 'kbq-icon-item' });
+        /** Whether the background is the translucent "fade" variant of the color rather than the solid one. */
+        this.fade = input(false, ...(ngDevMode ? [{ debugName: "fade" }] : /* istanbul ignore next */ []));
+        /** Whether the item is rendered at the larger of its two sizes. */
+        this.big = input(false, ...(ngDevMode ? [{ debugName: "big" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqIconItem, isStandalone: true, selector: "[kbq-icon-item]", inputs: { iconNameInput: { classPropertyName: "iconNameInput", publicName: "kbq-icon-item", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-icon-item_normal": "!big()", "class.kbq-icon-item_big": "big()", "class.kbq-icon-item_fade-off": "!fade()", "class.kbq-icon-item_fade-on": "fade()" }, classAttribute: "kbq kbq-icon-item kbq-icon-item_filled" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item>svg{fill:currentColor;vertical-align:middle}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconItem, decorators: [{
             type: Component,
             args: [{ selector: `[kbq-icon-item]`, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq kbq-icon-item kbq-icon-item_filled',
@@ -491,10 +724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-icon-item_fade-off]': '!fade()',
                         '[class.kbq-icon-item_fade-on]': 'fade()'
                     }, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item>svg{fill:currentColor;vertical-align:middle}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"] }]
-        }], propDecorators: { iconName: [{
-                type: Input,
-                args: [{ alias: 'kbq-icon-item' }]
-            }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }] } });
+        }], propDecorators: { iconNameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbq-icon-item", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }] } });
 
 const COMPONENTS = [
     KbqIcon,
@@ -502,15 +732,15 @@ const COMPONENTS = [
     KbqIconItem
 ];
 class KbqIconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqIconModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqIconModule, imports: [KbqIcon,
             KbqIconButton,
             KbqIconItem], exports: [KbqIcon,
             KbqIconButton,
             KbqIconItem] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,