@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-button-toggle.mjs

@@ -1,18 +1,20 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
+import { CdkObserveContent } from '@angular/cdk/observers';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ChangeDetectorRef, input, booleanAttribute, contentChildren, output, Input, Directive, ElementRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { forwardRef, input, booleanAttribute, contentChildren, output, signal, computed, untracked, Directive, inject, ChangeDetectorRef, ElementRef, viewChild, effect, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@koobiq/components/button';
-import { KbqButton, KbqButtonModule } from '@koobiq/components/button';
-import { getNodesWithoutComments } from '@koobiq/components/core';
+import { KbqButton, KbqButtonModule, KbqButtonPrefix, KbqButtonSuffix } from '@koobiq/components/button';
+import { getContentNodes, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, HOME, END } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { KbqTitleDirective, KbqTitleModule } from '@koobiq/components/title';
 
 /**
  * Provider Expression that allows kbq-button-toggle-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
+ *
  * @docs-private
  */
 const KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
@@ -20,282 +22,568 @@ const KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => KbqButtonToggleGroup),
     multi: true
 };
-/** Change event object emitted by MсButtonToggle. */
+/**
+ * Whether two group values describe the same selection. An unset value and an empty selection are
+ * the same thing, which is what keeps a multiple-selection group from announcing `[]` over a
+ * `[(value)]` binding that still holds `undefined`.
+ */
+const sameValue = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    const toArray = (value) => (Array.isArray(value) ? value : value == null ? [] : null);
+    const arrayA = toArray(a);
+    const arrayB = toArray(b);
+    return !!arrayA && !!arrayB && arrayA.length === arrayB.length && arrayA.every((item, i) => item === arrayB[i]);
+};
+/** Change event object emitted by KbqButtonToggle. */
 class KbqButtonToggleChange {
     constructor(
-    /** The MсButtonToggle that emits the event. */
+    /** The KbqButtonToggle that emits the event. */
     source, 
-    /** The value assigned to the MсButtonToggle. */
+    /** The value assigned to the KbqButtonToggle. */
     value) {
         this.source = source;
         this.value = value;
     }
 }
-/** Exclusive selection button toggle group that behaves like a radio-button group. */
+/**
+ * Selection group for `KbqButtonToggle`.
+ *
+ * By default it behaves like a radio-button group — one toggle at a time, announced as a
+ * `radiogroup` and walked with the arrow keys. With `multiple` the toggles become independent
+ * toggle buttons and the group is announced as a plain `group`.
+ *
+ * Name it with a plain `aria-label`/`aria-labelledby` attribute. The host is the very element the
+ * consumer writes, so an input aliased to the same name would only write back what is already
+ * there — and would wipe an `[attr.aria-label]` binding, which never reaches the input.
+ */
 class KbqButtonToggleGroup {
     constructor() {
-        this._changeDetector = inject(ChangeDetectorRef);
+        /** Whether the toggle group is vertical. */
+        this.vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the toggle group stretches to fill its container width, with toggles sharing equal space. */
-        this.stretched = input(false, ...(ngDevMode ? [{ debugName: "stretched", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.stretched = input(false, { ...(ngDevMode ? { debugName: "stretched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether multiple button toggles can be selected. */
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Child button toggle buttons. */
-        this.buttonToggles = contentChildren(forwardRef(() => KbqButtonToggle), ...(ngDevMode ? [{ debugName: "buttonToggles" }] : []));
+        this.buttonToggles = contentChildren(forwardRef(() => KbqButtonToggle), ...(ngDevMode ? [{ debugName: "buttonToggles" }] : /* istanbul ignore next */ []));
         /**
          * Event that emits whenever the value of the group changes.
          * Used to facilitate two-way data binding.
+         *
          * @docs-private
          */
         this.valueChange = output();
         /** Event emitted when the group's value changes. */
         this.change = output();
-        this._vertical = false;
-        this._multiple = false;
-        this._disabled = false;
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Selection of `selectionModel`, mirrored into a signal. It is what makes a toggle's `checked`
+         * state reactive: a toggle derives its own state from here instead of being told, one by one,
+         * to check itself again.
+         */
+        this.selectedToggles = signal([], ...(ngDevMode ? [{ debugName: "selectedToggles" }] : /* istanbul ignore next */ []));
+        /** Value the selection alone describes, with nothing said about an assignment waiting for its toggle. */
+        this.selectedValue = computed(() => {
+            const selected = this.selectedToggles();
+            return this.multiple() ? selected.map((toggle) => toggle.value) : selected[0]?.value;
+        }, ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Computed once per selection change, so a repeated read hands back the same array reference.
+         *
+         * The selection is authoritative for the toggles it holds; whatever the assignment names beyond
+         * them is appended, because those toggles may still be rendered. Reporting the empty selection
+         * instead would push `undefined` back through a `[(value)]` binding and leave `NG0100` behind.
+         */
+        this.currentValue = computed(() => {
+            const selected = this.selectedValue();
+            const assigned = this.rawValue();
+            if (this.multiple()) {
+                const values = selected;
+                const pending = (Array.isArray(assigned) ? assigned : []).filter((value) => !values.includes(value));
+                // A fresh array every time: the assigned one belongs to the consumer, and handing it
+                // back would let them mutate what feeds their own `[value]` binding.
+                return [...values, ...pending];
+            }
+            return selected !== undefined ? selected : assigned;
+        }, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+        this.currentSelection = computed(() => {
+            const selected = this.selectedToggles();
+            return this.multiple() ? [...selected] : selected[0] || null;
+        }, ...(ngDevMode ? [{ debugName: "currentSelection" }] : /* istanbul ignore next */ []));
+        /** ARIA role of the group: a radio group in single-selection mode, a plain grouping otherwise. */
+        this.role = computed(() => (this.multiple() ? 'group' : 'radiogroup'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /**
+         * Layout of the group, announced alongside its role so that the arrow-key affordance a screen
+         * reader describes matches the direction the toggles actually run in.
+         *
+         * A radio group is the only mode that has one: `role="group"` does not support `aria-orientation`
+         * (AXE `aria-allowed-attr`), and with `multiple` there are no arrow keys to describe anyway.
+         */
+        this.ariaOrientation = computed(() => {
+            if (this.multiple())
+                return null;
+            return this.vertical() ? 'vertical' : 'horizontal';
+        }, ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the group has been destroyed. A selected toggle schedules its own removal from the
+         * selection on a microtask, which outlives a teardown of the whole group.
+         */
+        this.destroyed = false;
         /**
-         * The method to be called in order to update ngModel.
-         * Now `ngModel` binding is not supported in multiple selection mode.
+         * Value the consumer assigned, kept for as long as it is not represented by the selection: the
+         * toggle it names may be created later — behind an `@if`, or simply after the assignment, which
+         * always lands before `ngOnInit` and so before there is a selection model to apply it to.
+         *
+         * An interaction replaces it, so a value the user has moved off cannot resurface on a toggle
+         * rendered afterwards.
+         */
+        this.rawValue = signal(undefined, ...(ngDevMode ? [{ debugName: "rawValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+         * `ngModel` binding is not supported in multiple selection mode.
+         *
+         * @docs-private
          */
         this.controlValueAccessorChangeFn = () => { };
-        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.onTouched = () => { };
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
     }
-    /** Whether the toggle group is vertical. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get vertical() {
-        return this._vertical;
-    }
-    set vertical(value) {
-        this._vertical = coerceBooleanProperty(value);
-    }
-    /** Value of the toggle group. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Value of the toggle group: an array in multiple-selection mode, a single value otherwise.
+     *
+     * An accessor rather than a `model()`: writing it walks the toggles to find the ones that match,
+     * and reading it reports the selection. `[(value)]` works all the same.
+     *
+     * An assigned value that corresponds to no toggle is kept and reported as is, so that it applies
+     * to a toggle rendered later — the same contract as `KbqRadioGroup`. It follows that `value` can
+     * name a toggle `selected` does not hold: `selected` only ever reports toggles that exist.
+     */
     get value() {
-        const selected = this.selectionModel ? this.selectionModel.selected : [];
-        if (this.multiple) {
-            return selected.map((toggle) => toggle.value);
-        }
-        return selected[0] ? selected[0].value : undefined;
+        return this.currentValue();
     }
     set value(newValue) {
+        // Untracked, as `emitChangeEvent()`, `syncButtonToggle()` and the toggles' `checked` setter and
+        // `onToggleClick()`: called from a consumer's `effect()`, the selection read on the way would make the effect
+        // run again whenever the user picks another toggle.
+        untracked(() => this.assignValue(newValue));
+    }
+    /** Body of the `value` setter. */
+    assignValue(newValue) {
         this.setSelectionByValue(newValue);
-        this.valueChange.emit(this.value);
+        // A write the group answers with the value it was given has nothing to announce: the binding
+        // slot already holds it, and echoing the group's own normalisation of it back over that slot
+        // — `[]` for an unset multiple-selection group — is the `NG0100` this guards.
+        if (sameValue(newValue, this.value)) {
+            this.reportedValue = this.value;
+            return;
+        }
+        this.emitValueChange();
     }
-    /** Selected button toggles in the group. */
+    /**
+     * Selected button toggles in the group: an array in multiple-selection mode, one toggle otherwise.
+     * Only toggles that exist, so a `value` waiting for its toggle is not represented here.
+     */
     get selected() {
-        const selected = this.selectionModel.selected;
-        return this.multiple ? selected : selected[0] || null;
-    }
-    /** Whether multiple button toggles can be selected. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get multiple() {
-        return this._multiple;
+        return this.currentSelection();
     }
-    set multiple(value) {
-        this._multiple = coerceBooleanProperty(value);
-    }
-    /** Whether multiple button toggle group is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the whole button toggle group is disabled. */
     get disabled() {
-        return this._disabled;
+        return this._disabled();
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        const buttonToggles = this.buttonToggles();
-        if (!buttonToggles) {
-            return;
+        this._disabled.set(value);
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, a bound `undefined` included;
+        // unbound, it leaves what code wrote.
+        if (changes['valueInput']) {
+            this.value = this.valueInput();
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
         }
-        buttonToggles.forEach((toggle) => toggle.markForCheck());
     }
     ngOnInit() {
-        this.selectionModel = new SelectionModel(this.multiple, undefined, false);
+        this.selectionModel = new SelectionModel(this.multiple(), undefined, false);
     }
-    ngAfterContentInit() {
-        this.selectionModel.select(...this.buttonToggles().filter((toggle) => toggle.checked));
-        this.disabled = this._disabled;
+    ngOnDestroy() {
+        this.destroyed = true;
     }
     /**
      * Sets the model value. Implemented as part of ControlValueAccessor.
+     *
      * @param value Value to be set to the model.
      */
     writeValue(value) {
         this.value = value;
-        this._changeDetector.markForCheck();
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Registers the callback that reports a value change to the form model.
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnChange(fn) {
         this.controlValueAccessorChangeFn = fn;
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Registers the callback that marks the form control as touched.
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Disables the group from the form model.
+     * Implemented as part of ControlValueAccessor.
+     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    /** Dispatch change event with current selection and group value. */
-    emitChangeEvent() {
-        const selected = this.selected;
-        const source = Array.isArray(selected) ? selected[selected.length - 1] : selected;
-        const event = new KbqButtonToggleChange(source, this.value);
-        this.controlValueAccessorChangeFn(event.value);
-        this.change.emit(event);
+    /**
+     * Dispatches a change event for the group value.
+     *
+     * @param source Toggle the change originated from. Taken from the interaction rather than from the
+     * selection, which is empty whenever the last selected toggle of a multiple-selection group is
+     * unchecked — there is no "last selected" toggle left to report then.
+     */
+    emitChangeEvent(source) {
+        untracked(() => {
+            const event = new KbqButtonToggleChange(source, this.value);
+            this.controlValueAccessorChangeFn(event.value);
+            this.change.emit(event);
+        });
     }
     /**
      * Syncs a button toggle's selected state with the model value.
+     *
      * @param toggle Toggle to be synced.
      * @param select Whether the toggle should be selected.
      * @param isUserInput Whether the change was a result of a user interaction.
      */
     syncButtonToggle(toggle, select, isUserInput = false) {
-        // Deselect the currently-selected toggle, if we're in single-selection
-        // mode and the button being toggled isn't selected at the moment.
-        if (!this.multiple && this.selected && !toggle.checked) {
-            this.selected.checked = false;
+        untracked(() => this.applyToggleSelection(toggle, select, isUserInput));
+    }
+    /** Body of `syncButtonToggle()`. */
+    applyToggleSelection(toggle, select, isUserInput) {
+        // A destroyed toggle drops itself from the selection on a microtask, which still runs when
+        // the whole group is torn down: there is nothing left to sync and nobody left to notify.
+        if (this.destroyed) {
+            return;
         }
+        // The previously selected toggle of a single-selection group is dropped by the selection
+        // model itself, and re-renders from the selection: unchecking it by hand would re-enter here
+        // and announce the empty selection it leaves behind for the length of one call.
         if (select) {
             this.selectionModel.select(toggle);
         }
         else {
             this.selectionModel.deselect(toggle);
         }
+        this.publishSelection();
+        if (isUserInput) {
+            // The interaction is the new assignment: anything the consumer assigned before it has
+            // been answered, and keeping it would let it come back on a toggle rendered later.
+            this.rawValue.set(this.selectedValue());
+        }
+        else if (!select) {
+            this.dropPendingValue(toggle.value);
+        }
         // Only emit the change event for user input.
         if (isUserInput) {
-            this.emitChangeEvent();
+            this.emitChangeEvent(toggle);
         }
-        // Note: we emit this one no matter whether it was a user interaction, because
-        // it is used by Angular to sync up the two-way data binding.
-        this.valueChange.emit(this.value);
+        // Note: this one is not limited to user interactions, because it is what Angular syncs the
+        // two-way data binding up with — an interaction is only one of the things that move a value.
+        this.emitValueChange();
+    }
+    /**
+     * Reports the new value of a selected toggle, which changes the value of the group, as an interaction would.
+     *
+     * @internal
+     */
+    followToggleValue(toggle, previous) {
+        if (this.destroyed || !this.selectionModel?.isSelected(toggle))
+            return;
+        this.renamePendingValue(previous, toggle.value);
+        // On a microtask, as the removal of a destroyed toggle: a `[value]` binding changes during change detection,
+        // which has already checked the binding `[(value)]` writes the report to.
+        Promise.resolve().then(() => {
+            const value = this.value;
+            if (this.destroyed || sameValue(this.reportedValue, value))
+                return;
+            // Not to the form: the user picked nothing, and a report would mark the control dirty.
+            this.emitValueChange();
+        });
     }
     /** Checks whether a button toggle is selected. */
     isSelected(toggle) {
-        return this.selectionModel.isSelected(toggle);
+        return this.selectedToggles().includes(toggle);
     }
-    /** Determines whether a button toggle should be checked on init. */
+    /** Determines whether a button toggle should be checked on init, from the value waiting for it. */
     isPrechecked(toggle) {
-        if (this.rawValue === undefined) {
+        const rawValue = this.rawValue();
+        if (rawValue === undefined || toggle.value == null) {
             return false;
         }
-        if (this.multiple && Array.isArray(this.rawValue)) {
-            return this.rawValue.some((value) => toggle.value != null && value === toggle.value);
-        }
-        return toggle.value === this.rawValue;
+        return this.multiple() && Array.isArray(rawValue) ? rawValue.includes(toggle.value) : toggle.value === rawValue;
     }
-    /** Updates the selection state of the toggles in the group based on a value. */
-    setSelectionByValue(value) {
-        this.rawValue = value;
-        if (!this.selectionModel) {
-            return;
+    /** Mirrors the selection model into the signal the toggles derive their state from. */
+    publishSelection() {
+        this.selectedToggles.set([...this.selectionModel.selected]);
+    }
+    /**
+     * Forgets a value that a toggle has just stopped representing. A value only waits for a toggle
+     * until one takes it: a toggle leaving the selection — destroyed, or unchecked from code —
+     * answers it, and keeping it would make it resurface on the next toggle rendered with it.
+     */
+    dropPendingValue(value) {
+        const assigned = this.rawValue();
+        if (!this.multiple()) {
+            if (assigned === value) {
+                this.rawValue.set(undefined);
+            }
         }
-        if (this.multiple && value) {
-            if (!Array.isArray(value)) {
-                throw Error('Value must be an array in multiple-selection mode.');
+        else if (Array.isArray(assigned) && assigned.includes(value)) {
+            this.rawValue.set(assigned.filter((item) => item !== value));
+        }
+    }
+    /** Follows a selected toggle whose value changed in the assignment, which would hold the old value otherwise. */
+    renamePendingValue(previous, value) {
+        const assigned = this.rawValue();
+        if (!this.multiple()) {
+            if (assigned === previous) {
+                this.rawValue.set(value);
             }
-            this.clearSelection();
-            value.forEach((currentValue) => this.selectValue(currentValue));
         }
-        else {
-            this.clearSelection();
-            this.selectValue(value);
+        else if (Array.isArray(assigned) && assigned.includes(previous)) {
+            this.rawValue.set(assigned.map((item) => (item === previous ? value : item)));
         }
     }
-    /** Clears the selected toggles. */
-    clearSelection() {
-        this.selectionModel.clear();
-        this.buttonToggles().forEach((toggle) => (toggle.checked = false));
+    /** Announces the current value, unless it is the one already reported. */
+    emitValueChange() {
+        const value = this.value;
+        if (sameValue(this.reportedValue, value)) {
+            return;
+        }
+        this.reportedValue = value;
+        this.valueChange.emit(value);
     }
-    /** Selects a value if there's a toggle that corresponds to it. */
-    selectValue(value) {
-        const correspondingOption = this.buttonToggles().find((toggle) => {
-            return toggle.value != null && toggle.value === value;
-        });
-        if (correspondingOption) {
-            correspondingOption.checked = true;
-            this.selectionModel.select(correspondingOption);
+    /**
+     * Updates the selection state of the toggles in the group based on a value. Resolved in one pass:
+     * walking the toggles one by one would publish an intermediate empty selection and announce it.
+     */
+    setSelectionByValue(value) {
+        if (this.multiple() && value && !Array.isArray(value)) {
+            throw Error('Value must be an array in multiple-selection mode.');
         }
+        this.rawValue.set(value);
+        if (!this.selectionModel) {
+            return;
+        }
+        const values = this.multiple() ? (value ?? []) : [value];
+        const matched = this.buttonToggles().filter((toggle) => toggle.value != null && values.includes(toggle.value));
+        this.selectionModel.clear();
+        this.selectionModel.select(...(this.multiple() ? matched : matched.slice(0, 1)));
+        this.publishSelection();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.30", type: KbqButtonToggleGroup, isStandalone: true, selector: "kbq-button-toggle-group", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: false, isRequired: false, transformFunction: null }, stretched: { classPropertyName: "stretched", publicName: "stretched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", change: "change" }, host: { properties: { "class.kbq-button-toggle_vertical": "vertical", "class.kbq-button-toggle-group_stretched": "stretched()" }, classAttribute: "kbq-button-toggle-group" }, providers: [KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], queries: [{ propertyName: "buttonToggles", predicate: i0.forwardRef(() => KbqButtonToggle), isSignal: true }], exportAs: ["kbqButtonToggleGroup"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqButtonToggleGroup, isStandalone: true, selector: "kbq-button-toggle-group", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, stretched: { classPropertyName: "stretched", publicName: "stretched", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", change: "change" }, host: { properties: { "class.kbq-button-toggle_vertical": "vertical()", "class.kbq-button-toggle-group_stretched": "stretched()", "attr.role": "role()", "attr.aria-orientation": "ariaOrientation()" }, classAttribute: "kbq-button-toggle-group" }, providers: [KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], queries: [{ propertyName: "buttonToggles", predicate: i0.forwardRef(() => KbqButtonToggle), isSignal: true }], exportAs: ["kbqButtonToggleGroup"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-button-toggle-group',
                     providers: [KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
                     host: {
                         class: 'kbq-button-toggle-group',
-                        '[class.kbq-button-toggle_vertical]': 'vertical',
-                        '[class.kbq-button-toggle-group_stretched]': 'stretched()'
+                        '[class.kbq-button-toggle_vertical]': 'vertical()',
+                        '[class.kbq-button-toggle-group_stretched]': 'stretched()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-orientation]': 'ariaOrientation()'
                     },
                     exportAs: 'kbqButtonToggleGroup'
                 }]
-        }], propDecorators: { vertical: [{
-                type: Input
-            }], stretched: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretched", required: false }] }], value: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], buttonToggles: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqButtonToggle), { isSignal: true }] }], disabled: [{
-                type: Input
-            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+        }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], stretched: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretched", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], buttonToggles: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqButtonToggle), { isSignal: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /** Single button inside of a toggle group. */
 class KbqButtonToggle {
-    constructor() {
-        this.buttonToggleGroup = inject(KbqButtonToggleGroup, { optional: true });
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.focusMonitor = inject(FocusMonitor);
-        this.element = inject(ElementRef);
-        this.icons = contentChildren(KbqIcon, ...(ngDevMode ? [{ debugName: "icons", descendants: true }] : [{ descendants: true }]));
-        this.iconType = '';
-        this.mcButton = viewChild.required(KbqButton);
-        /** Tabindex for the toggle. */
-        this.tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
-        /** Event emitted when the group value changes. */
-        this.change = output();
-        this.isSingleSelector = false;
-        this._checked = false;
-        this._disabled = false;
-    }
     /** Whether the button is checked. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get checked() {
-        return this.buttonToggleGroup ? this.buttonToggleGroup.isSelected(this) : this._checked;
+        return this.checkedState();
     }
     set checked(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (newValue !== this._checked) {
-            this._checked = newValue;
+        untracked(() => {
+            // Against the effective state rather than `_checked`, which a grouped toggle does not own:
+            // its group selects it directly, so the two drift apart the moment a value is assigned.
+            if (value === this.checked) {
+                return;
+            }
+            this._checked.set(value);
             if (this.buttonToggleGroup) {
-                this.buttonToggleGroup.syncButtonToggle(this, this._checked);
+                this.buttonToggleGroup.syncButtonToggle(this, value);
             }
-            this.changeDetectorRef.markForCheck();
-        }
+        });
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /**
+     * Whether the toggle acts as a radio button (a single-selection group) or as a checkbox
+     * (a multiple-selection group, or a standalone toggle).
+     */
+    get type() {
+        return this.isSingleSelector() ? 'radio' : 'checkbox';
+    }
+    /**
+     * Whether the toggle holds icons only (`-icon`), icons beside a label (`-icon-text`) or no icon
+     * at all (`''`). Rendered as the `.kbq-button-toggle-icon`/`.kbq-button-toggle-icon-text` host
+     * class, which is the only signal a stylesheet gets: CSS cannot see text nodes, so a selector can
+     * never tell an icon-only toggle from a label that happens to contain an icon.
+     */
+    get iconType() {
+        return this._iconType();
+    }
+    /** Value of the toggle. The value of a selected toggle is the value of its group. */
+    get value() {
+        return this._value();
+    }
+    set value(value) {
+        untracked(() => {
+            const previous = this._value();
+            if (value === previous)
+                return;
+            this._value.set(value);
+            this.buttonToggleGroup?.followToggleValue(this, previous);
+        });
+    }
+    /** Whether the toggle is disabled. A toggle inside a disabled group is disabled as well. */
     get disabled() {
-        return this._disabled || (this.buttonToggleGroup && this.buttonToggleGroup.disabled);
+        return this.disabledState();
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+        this._disabled.set(value);
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, a bound `undefined` included;
+        // unbound, it leaves what code wrote.
+        if (changes['valueInput']) {
+            this.value = this.valueInput();
+        }
+        if (changes['checkedInput']) {
+            const checked = this.checkedInput();
+            if (checked !== undefined)
+                this.checked = checked;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
+    constructor() {
+        /** Group the toggle belongs to, or `null` for a standalone toggle. */
+        this.buttonToggleGroup = inject(KbqButtonToggleGroup, { optional: true });
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this.element = inject(ElementRef);
+        this.directionality = inject(Directionality, { optional: true });
+        this.icons = contentChildren(KbqIcon, { ...(ngDevMode ? { debugName: "icons" } : /* istanbul ignore next */ {}), descendants: true });
+        this.button = viewChild.required(KbqButton);
+        /** Tabindex for the toggle. `null` leaves the toggle at its default position in the tab order. */
+        this.tabIndex = input(null, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        /** Accessible name of the toggle. Required when the toggle projects nothing but icons. */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /** Id of the element that labels the toggle. */
+        this.ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+        /** Event emitted when the group value changes. */
+        this.change = output();
+        this._value = signal(undefined, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+        this._checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._iconType = signal('', ...(ngDevMode ? [{ debugName: "_iconType" }] : /* istanbul ignore next */ []));
+        /** Whether the missing-accessible-name warning has already been emitted for this toggle. */
+        this.accessibleNameWarned = false;
+        /** Whether the toggle behaves like a radio button, i.e. sits in a single-selection group. */
+        this.isSingleSelector = computed(() => !!this.buttonToggleGroup && !this.buttonToggleGroup.multiple(), ...(ngDevMode ? [{ debugName: "isSingleSelector" }] : /* istanbul ignore next */ []));
+        this.checkedState = computed(() => this.buttonToggleGroup ? this.buttonToggleGroup.isSelected(this) : this._checked(), ...(ngDevMode ? [{ debugName: "checkedState" }] : /* istanbul ignore next */ []));
+        this.disabledState = computed(() => this._disabled() || !!this.buttonToggleGroup?.disabled, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /**
+         * A radio group is a single tab stop: Tab reaches the selected toggle — or the first enabled one
+         * while nothing is selected — and the arrow keys move within the group from there. A
+         * multiple-selection group is a set of independent toggle buttons, so every one of them stays in
+         * the tab order.
+         */
+        this.tabIndexValue = computed(() => {
+            const own = this.tabIndex() ?? 0;
+            if (!this.isSingleSelector()) {
+                return own;
+            }
+            const toggles = this.buttonToggleGroup.buttonToggles().filter((toggle) => !toggle.disabled);
+            return (toggles.find((toggle) => toggle.checked) ?? toggles[0]) === this ? own : -1;
+        }, ...(ngDevMode ? [{ debugName: "tabIndexValue" }] : /* istanbul ignore next */ []));
+        /**
+         * A toggle in a single-selection group is a radio button; anywhere else it is a toggle button,
+         * which is what a native `<button>` already is — it only needs its pressed state.
+         */
+        this.role = computed(() => (this.isSingleSelector() ? 'radio' : null), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /** Selected state of a radio; `null` outside a single-selection group, where `aria-pressed` says it. */
+        this.ariaChecked = computed(() => (this.isSingleSelector() ? this.checkedState() : null), ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+        /** Pressed state of a toggle button; `null` in a single-selection group, where `aria-checked` says it. */
+        this.ariaPressed = computed(() => (this.isSingleSelector() ? null : this.checkedState()), ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /** @docs-private */
+        this.checkedInput = input(undefined, { ...(ngDevMode ? { debugName: "checkedInput" } : /* istanbul ignore next */ {}), alias: 'checked',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        // The content query only tracks KbqIcon instances, while `iconType` also depends on the text
+        // nodes beside them, which the query cannot see — those are covered by the MutationObserver
+        // in the template. This effect covers icons appearing or disappearing (e.g. via @if) without
+        // waiting for the observer.
+        effect(() => {
+            this.icons();
+            untracked(() => this.updateIconType());
+        });
     }
     ngOnInit() {
-        this.isSingleSelector = this.buttonToggleGroup && !this.buttonToggleGroup.multiple;
-        this.type = this.isSingleSelector ? 'radio' : 'checkbox';
         if (this.buttonToggleGroup && this.buttonToggleGroup.isPrechecked(this)) {
             this.checked = true;
         }
     }
     ngAfterContentInit() {
-        const icons = this.icons();
-        if (icons.length) {
-            const nodesWithoutComments = getNodesWithoutComments(this.element.nativeElement.querySelector('.kbq-button-toggle-wrapper').childNodes).length;
-            this.iconType = nodesWithoutComments === icons.length ? '-icon' : '-icon-text';
-        }
+        this.updateIconType();
+    }
+    /**
+     * Refreshes `iconType`, which tells whether the toggle holds icons only or icons beside a label.
+     *
+     * No selector can work this out: CSS cannot see text nodes, so it can never tell an icon-only
+     * toggle from a label that happens to contain an icon.
+     *
+     * @docs-private
+     */
+    updateIconType() {
+        const wrapper = this.element.nativeElement.querySelector('.kbq-button-toggle-wrapper');
+        const label = wrapper?.querySelector('.kbq-button-toggle-text');
+        if (!wrapper || !label)
+            return;
+        const iconElements = this.icons().map((icon) => icon.getHostElement());
+        // The label box belongs to the template rather than to the projected content, so it is
+        // flattened out: an icon marked with `kbqButtonPrefix`/`kbqButtonSuffix` sits beside the box
+        // and a legacy one inside it, and both have to be counted the same way. Same shape as
+        // `KbqButtonCssStyler`, which flattens `.kbq-button-text` for the same reason.
+        const nodes = getContentNodes(wrapper).flatMap((node) => (node === label ? getContentNodes(node) : [node]));
+        this._iconType.set(iconElements.length ? (nodes.length === iconElements.length ? '-icon' : '-icon-text') : '');
+        this.warnIfIconOnlyHasNoAccessibleName();
     }
     ngAfterViewInit() {
         this.focusMonitor.monitor(this.element.nativeElement, true);
@@ -311,36 +599,100 @@ class KbqButtonToggle {
     }
     /** Focuses the button. */
     focus() {
-        this.element.nativeElement.focus();
+        this.button().focus();
+    }
+    /** Focuses the button as if the user had reached it with the keyboard, showing the focus ring. */
+    focusViaKeyboard() {
+        this.button().focusViaKeyboard();
     }
     /** Checks the button toggle due to an interaction with the underlying native button. */
     onToggleClick() {
+        untracked(() => this.toggleByUser());
+    }
+    /** Body of `onToggleClick()`. */
+    toggleByUser() {
         if (this.disabled) {
             return;
         }
-        const newChecked = this.isSingleSelector ? true : !this._checked;
-        if (newChecked !== this._checked) {
-            this._checked = newChecked;
+        const newChecked = this.isSingleSelector() ? true : !this.checked;
+        if (newChecked !== this.checked) {
+            this._checked.set(newChecked);
             if (this.buttonToggleGroup) {
-                this.buttonToggleGroup.syncButtonToggle(this, this._checked, true);
+                this.buttonToggleGroup.syncButtonToggle(this, newChecked, true);
                 this.buttonToggleGroup.onTouched();
             }
         }
-        // Emit a change event when it's the single selector
+        // Emitted for every interaction, including a re-click of an already selected radio, which
+        // changes nothing: the toggle reports that it was activated, while the group above only
+        // reports an actual change of value.
         this.change.emit(new KbqButtonToggleChange(this, this.value));
     }
     /**
      * Marks the button toggle as needing checking for change detection.
-     * This method is exposed because the parent button toggle group will directly
-     * update bound properties of the radio button.
+     *
+     * Kept for back-compatibility. A toggle now derives `checked` and `disabled` from signals owned
+     * by its group, so it re-renders on its own and nothing in the library calls this any more.
      */
     markForCheck() {
-        // When the group value changes, the button will not be notified.
-        // Use `markForCheck` to explicit update button toggle's status.
+        // Kept at the DS-2196 review: the button-toggle review step of the migration guide promises it stays.
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqButtonToggle, isStandalone: true, selector: "kbq-button-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class": "\"kbq-button-toggle\" + iconType", "class.kbq-disabled": "disabled", "class.kbq-selected": "checked" }, classAttribute: "kbq-button-toggle" }, queries: [{ propertyName: "icons", predicate: KbqIcon, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mcButton", first: true, predicate: KbqButton, descendants: true, isSignal: true }], exportAs: ["kbqButtonToggle"], ngImport: i0, template: `
+    /**
+     * Walks a radio group with the arrow keys, moving focus and selection together, as the WAI-ARIA
+     * radiogroup pattern expects. A multiple-selection group is a set of independent toggle buttons
+     * that Tab reaches one by one, so it needs no key handling of its own.
+     */
+    onKeydown(event) {
+        if (!this.isSingleSelector())
+            return;
+        const toggles = this.buttonToggleGroup.buttonToggles().filter((toggle) => !toggle.disabled);
+        const current = toggles.indexOf(this);
+        if (current === -1)
+            return;
+        const rtl = this.directionality?.value === 'rtl';
+        const { keyCode } = event;
+        let next;
+        if (keyCode === DOWN_ARROW || keyCode === (rtl ? LEFT_ARROW : RIGHT_ARROW)) {
+            next = (current + 1) % toggles.length;
+        }
+        else if (keyCode === UP_ARROW || keyCode === (rtl ? RIGHT_ARROW : LEFT_ARROW)) {
+            next = (current - 1 + toggles.length) % toggles.length;
+        }
+        else if (keyCode === HOME) {
+            next = 0;
+        }
+        else if (keyCode === END) {
+            next = toggles.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const target = toggles[next];
+        target.focusViaKeyboard();
+        target.onToggleClick();
+    }
+    /**
+     * `KbqIcon` renders a decorative glyph, so an icon-only toggle carries no text. Without an
+     * `aria-label`/`aria-labelledby` its button has no accessible name at all (AXE `button-name`).
+     * `KbqButtonCssStyler` cannot warn about it here: a toggle projects its icons through its own
+     * wrapper, so the button's own content query never sees them.
+     *
+     * A `title` on the host is deliberately not accepted as a name: the host is not the element the
+     * accessible name is computed for — the inner button is — and the attribute never reaches it.
+     */
+    warnIfIconOnlyHasNoAccessibleName() {
+        if (!isDevMode() || this.accessibleNameWarned || this._iconType() !== '-icon')
+            return;
+        if (this.ariaLabel() || this.ariaLabelledby())
+            return;
+        const host = this.element.nativeElement;
+        this.accessibleNameWarned = true;
+        // eslint-disable-next-line no-console
+        console.warn('KbqButtonToggle: icon-only toggle has no accessible name. Add [aria-label] or [aria-labelledby] to it.', host);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqButtonToggle, isStandalone: true, selector: "kbq-button-toggle", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.kbq-button-toggle-icon": "iconType === \"-icon\"", "class.kbq-button-toggle-icon-text": "iconType === \"-icon-text\"", "class.kbq-disabled": "disabled", "class.kbq-selected": "checked" }, classAttribute: "kbq-button-toggle" }, queries: [{ propertyName: "icons", predicate: KbqIcon, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: KbqButton, descendants: true, isSignal: true }], exportAs: ["kbqButtonToggle"], usesOnChanges: true, ngImport: i0, template: `
         <button
             kbq-button
             kbq-title
@@ -348,18 +700,28 @@ class KbqButtonToggle {
             [kbqStyle]="'transparent'"
             [class.kbq-selected]="checked"
             [disabled]="disabled"
-            [tabIndex]="tabIndex() || 0"
+            [tabIndex]="tabIndexValue()"
+            [attr.role]="role()"
+            [attr.aria-checked]="ariaChecked()"
+            [attr.aria-pressed]="ariaPressed()"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             (click)="onToggleClick()"
         >
-            <div #kbqTitleText class="kbq-button-toggle-wrapper">
-                <ng-content />
+            <div class="kbq-button-toggle-wrapper" (cdkObserveContent)="updateIconType()">
+                <ng-content select="[kbqButtonPrefix]" />
+                <span #kbqTitleContainer #kbqTitleText class="kbq-button-toggle-text">
+                    <ng-content />
+                </span>
+                <ng-content select="[kbqButtonSuffix]" />
             </div>
         </button>
-    `, isInline: true, styles: [".kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal);border-radius:var(--kbq-button-toggle-size-container-border-radius);padding:var(--kbq-button-toggle-size-container-padding-vertical) var(--kbq-button-toggle-size-container-padding-horizontal)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;justify-content:flex-start;align-items:center;overflow:visible;min-width:0;box-sizing:content-box;height:var(--kbq-button-toggle-size-item-height);min-height:var(--kbq-button-toggle-size-item-height);border-radius:var(--kbq-button-toggle-size-item-border-radius);border:var(--kbq-size-border-width) solid transparent}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{height:inherit;min-height:inherit;border-radius:var(--kbq-button-toggle-size-item-border-radius);border-width:0;padding:calc(var(--kbq-button-toggle-size-item-padding-vertical) - var(--kbq-button-toggle-size-item-focus-outline-width)) calc(var(--kbq-button-toggle-size-item-padding-horizontal) - var(--kbq-button-toggle-size-item-focus-outline-width))}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon:before{content:\"\";position:absolute}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;justify-content:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.cdk-keyboard-focused,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.cdk-keyboard-focused{outline:none}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon:before{inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon:before{inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle-group_stretched{width:100%}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle{flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon{width:100%;flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{justify-content:center}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:block}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius)}.kbq-button-toggle-group{background:var(--kbq-button-toggle-container-background)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-icon-button{background:var(--kbq-button-toggle-item-default-background);color:var(--kbq-button-toggle-item-default-text)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-default-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-hover-background);color:var(--kbq-button-toggle-item-states-hover-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-hover-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-active-background);color:var(--kbq-button-toggle-item-states-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-background);color:var(--kbq-button-toggle-item-states-selected-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-active-background);color:var(--kbq-button-toggle-item-states-selected-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-disabled-background);color:var(--kbq-button-toggle-item-states-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-disabled-background);color:var(--kbq-button-toggle-item-states-selected-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{border-color:var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle .kbq-button-toggle-wrapper{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button-toggle-group{--kbq-button-toggle-size-container-border-radius: var(--kbq-size-border-radius);--kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-height: 22px;--kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);--kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);--kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);--kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);--kbq-button-toggle-size-item-hit-area-gap: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2 );--kbq-button-toggle-size-item-hit-area-horizontal: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal) );--kbq-button-toggle-size-item-hit-area-vertical: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical) );--kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);--kbq-button-toggle-item-default-background: var(--kbq-background-transparent);--kbq-button-toggle-item-default-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-default-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-toggle-item-states-hover-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-toggle-item-states-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-background: var(--kbq-background-card);--kbq-button-toggle-item-states-selected-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-active-background: var(--kbq-states-background-transparent-active);--kbq-button-toggle-item-states-selected-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-disabled-background: var(--kbq-states-background-disabled);--kbq-button-toggle-item-states-selected-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-selected-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-disabled-background: none;--kbq-button-toggle-item-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-focused-outline: var(--kbq-states-line-focus-theme)}\n"], dependencies: [{ kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal);border-radius:var(--kbq-button-toggle-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-container-border-radius) * 1.85,var(--kbq-button-toggle-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-container-border-radius) * 2)}}.kbq-button-toggle-group{padding:var(--kbq-button-toggle-size-container-padding-vertical) var(--kbq-button-toggle-size-container-padding-horizontal)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;justify-content:flex-start;align-items:center;overflow:visible;min-width:0;box-sizing:content-box;height:var(--kbq-button-toggle-size-item-height);min-height:var(--kbq-button-toggle-size-item-height);border-radius:var(--kbq-button-toggle-size-item-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group .kbq-button-toggle{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-item-border-radius) * 1.85,var(--kbq-button-toggle-size-item-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-item-border-radius) * 2)}}.kbq-button-toggle-group .kbq-button-toggle{border:var(--kbq-size-border-width) solid transparent}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{outline:1px solid var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{height:inherit;min-height:inherit;border-radius:var(--kbq-button-toggle-size-item-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-item-border-radius) * 1.85,var(--kbq-button-toggle-size-item-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-item-border-radius) * 2)}}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-width:0;padding:calc(var(--kbq-button-toggle-size-item-padding-vertical) - var(--kbq-button-toggle-size-item-focus-outline-width)) calc(var(--kbq-button-toggle-size-item-padding-horizontal) - var(--kbq-button-toggle-size-item-focus-outline-width))}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon:before{content:\"\";position:absolute}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;justify-content:center;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper>.kbq-button-prefix,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper>.kbq-button-prefix{margin-right:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper>.kbq-button-suffix,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper>.kbq-button-suffix{margin-left:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-text,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-text:has(>.kbq-icon),.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-text:has(>.kbq-icon){display:flex;align-items:center;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.cdk-keyboard-focused,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.cdk-keyboard-focused{outline:none}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon:before{inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon:before{inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle-group_stretched{width:100%}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle{flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon{width:100%;flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{justify-content:center}.kbq-button-toggle-group .kbq-button-toggle>:is(.kbq-button,.kbq-button-icon).kbq-button_no-label .kbq-button-toggle-text{display:flex;align-items:center}.kbq-button-toggle-group .kbq-button-toggle>:is(.kbq-button,.kbq-button-icon) .kbq-button-toggle-text:empty{display:none}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%}.kbq-button-toggle-group{background:var(--kbq-button-toggle-container-background)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-default-background);color:var(--kbq-button-toggle-item-default-text)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-default-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-hover-background);color:var(--kbq-button-toggle-item-states-hover-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-hover-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-active-background);color:var(--kbq-button-toggle-item-states-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-background);color:var(--kbq-button-toggle-item-states-selected-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-active-background);color:var(--kbq-button-toggle-item-states-selected-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-disabled-background);color:var(--kbq-button-toggle-item-states-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-disabled-background);color:var(--kbq-button-toggle-item-states-selected-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{border-color:var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle .kbq-button-toggle-wrapper{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button-toggle-group{--kbq-button-toggle-size-container-border-radius: var(--kbq-size-border-radius);--kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-height: 22px;--kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);--kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);--kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);--kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);--kbq-button-toggle-size-item-hit-area-gap: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2 );--kbq-button-toggle-size-item-hit-area-horizontal: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal) );--kbq-button-toggle-size-item-hit-area-vertical: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical) );--kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);--kbq-button-toggle-item-default-background: var(--kbq-background-transparent);--kbq-button-toggle-item-default-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-default-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-toggle-item-states-hover-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-toggle-item-states-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-background: var(--kbq-background-card);--kbq-button-toggle-item-states-selected-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-active-background: var(--kbq-states-background-transparent-active);--kbq-button-toggle-item-states-selected-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-disabled-background: var(--kbq-states-background-disabled);--kbq-button-toggle-item-states-selected-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-selected-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-disabled-background: none;--kbq-button-toggle-item-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-focused-outline: var(--kbq-states-line-focus-theme)}\n"], dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-button-toggle', imports: [
+                        CdkObserveContent,
                         KbqTitleDirective,
                         KbqButtonModule
                     ], template: `
@@ -370,26 +732,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             [kbqStyle]="'transparent'"
             [class.kbq-selected]="checked"
             [disabled]="disabled"
-            [tabIndex]="tabIndex() || 0"
+            [tabIndex]="tabIndexValue()"
+            [attr.role]="role()"
+            [attr.aria-checked]="ariaChecked()"
+            [attr.aria-pressed]="ariaPressed()"
+            [attr.aria-label]="ariaLabel()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             (click)="onToggleClick()"
         >
-            <div #kbqTitleText class="kbq-button-toggle-wrapper">
-                <ng-content />
+            <div class="kbq-button-toggle-wrapper" (cdkObserveContent)="updateIconType()">
+                <ng-content select="[kbqButtonPrefix]" />
+                <span #kbqTitleContainer #kbqTitleText class="kbq-button-toggle-text">
+                    <ng-content />
+                </span>
+                <ng-content select="[kbqButtonSuffix]" />
             </div>
         </button>
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-button-toggle',
-                        '[class]': '"kbq-button-toggle" + iconType',
+                        '[class.kbq-button-toggle-icon]': 'iconType === "-icon"',
+                        '[class.kbq-button-toggle-icon-text]': 'iconType === "-icon-text"',
                         '[class.kbq-disabled]': 'disabled',
-                        '[class.kbq-selected]': 'checked'
-                    }, exportAs: 'kbqButtonToggle', styles: [".kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal);border-radius:var(--kbq-button-toggle-size-container-border-radius);padding:var(--kbq-button-toggle-size-container-padding-vertical) var(--kbq-button-toggle-size-container-padding-horizontal)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;justify-content:flex-start;align-items:center;overflow:visible;min-width:0;box-sizing:content-box;height:var(--kbq-button-toggle-size-item-height);min-height:var(--kbq-button-toggle-size-item-height);border-radius:var(--kbq-button-toggle-size-item-border-radius);border:var(--kbq-size-border-width) solid transparent}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{height:inherit;min-height:inherit;border-radius:var(--kbq-button-toggle-size-item-border-radius);border-width:0;padding:calc(var(--kbq-button-toggle-size-item-padding-vertical) - var(--kbq-button-toggle-size-item-focus-outline-width)) calc(var(--kbq-button-toggle-size-item-padding-horizontal) - var(--kbq-button-toggle-size-item-focus-outline-width))}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon:before{content:\"\";position:absolute}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;justify-content:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.cdk-keyboard-focused,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.cdk-keyboard-focused{outline:none}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon:before{inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon:before{inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle-group_stretched{width:100%}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle{flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon{width:100%;flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{justify-content:center}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:block}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%;border-radius:var(--kbq-button-toggle-size-item-border-radius)}.kbq-button-toggle-group{background:var(--kbq-button-toggle-container-background)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-icon-button{background:var(--kbq-button-toggle-item-default-background);color:var(--kbq-button-toggle-item-default-text)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-default-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-hover-background);color:var(--kbq-button-toggle-item-states-hover-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-hover-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-active-background);color:var(--kbq-button-toggle-item-states-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-background);color:var(--kbq-button-toggle-item-states-selected-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-icon-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-active-background);color:var(--kbq-button-toggle-item-states-selected-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-icon-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-disabled-background);color:var(--kbq-button-toggle-item-states-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-icon-button{background:var(--kbq-button-toggle-item-states-selected-disabled-background);color:var(--kbq-button-toggle-item-states-selected-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-icon-button .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{border-color:var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle .kbq-button-toggle-wrapper{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button-toggle-group{--kbq-button-toggle-size-container-border-radius: var(--kbq-size-border-radius);--kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-height: 22px;--kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);--kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);--kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);--kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);--kbq-button-toggle-size-item-hit-area-gap: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2 );--kbq-button-toggle-size-item-hit-area-horizontal: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal) );--kbq-button-toggle-size-item-hit-area-vertical: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical) );--kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);--kbq-button-toggle-item-default-background: var(--kbq-background-transparent);--kbq-button-toggle-item-default-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-default-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-toggle-item-states-hover-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-toggle-item-states-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-background: var(--kbq-background-card);--kbq-button-toggle-item-states-selected-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-active-background: var(--kbq-states-background-transparent-active);--kbq-button-toggle-item-states-selected-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-disabled-background: var(--kbq-states-background-disabled);--kbq-button-toggle-item-states-selected-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-selected-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-disabled-background: none;--kbq-button-toggle-item-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-focused-outline: var(--kbq-states-line-focus-theme)}\n"] }]
-        }], propDecorators: { icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { ...{ descendants: true }, isSignal: true }] }], checked: [{
-                type: Input
-            }], mcButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], value: [{
-                type: Input
-            }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], disabled: [{
-                type: Input
-            }], change: [{ type: i0.Output, args: ["change"] }] } });
+                        '[class.kbq-selected]': 'checked',
+                        '(keydown)': 'onKeydown($event)'
+                    }, exportAs: 'kbqButtonToggle', styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-button-toggle-group{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;gap:var(--kbq-button-toggle-size-container-content-gap-horizontal);border-radius:var(--kbq-button-toggle-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-container-border-radius) * 1.85,var(--kbq-button-toggle-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-container-border-radius) * 2)}}.kbq-button-toggle-group{padding:var(--kbq-button-toggle-size-container-padding-vertical) var(--kbq-button-toggle-size-container-padding-horizontal)}.kbq-button-toggle-group .kbq-button-toggle{display:flex;justify-content:flex-start;align-items:center;overflow:visible;min-width:0;box-sizing:content-box;height:var(--kbq-button-toggle-size-item-height);min-height:var(--kbq-button-toggle-size-item-height);border-radius:var(--kbq-button-toggle-size-item-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group .kbq-button-toggle{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-item-border-radius) * 1.85,var(--kbq-button-toggle-size-item-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-item-border-radius) * 2)}}.kbq-button-toggle-group .kbq-button-toggle{border:var(--kbq-size-border-width) solid transparent}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{outline:1px solid var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{height:inherit;min-height:inherit;border-radius:var(--kbq-button-toggle-size-item-border-radius)}@supports (corner-shape: squircle){.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{corner-shape:squircle;border-radius:clamp(var(--kbq-button-toggle-size-item-border-radius) * 1.85,var(--kbq-button-toggle-size-item-border-radius) * 2.3 - 3.6px,var(--kbq-button-toggle-size-item-border-radius) * 2)}}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon{border-width:0;padding:calc(var(--kbq-button-toggle-size-item-padding-vertical) - var(--kbq-button-toggle-size-item-focus-outline-width)) calc(var(--kbq-button-toggle-size-item-padding-horizontal) - var(--kbq-button-toggle-size-item-focus-outline-width))}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon:before{content:\"\";position:absolute}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{width:100%}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper{display:inline-flex;justify-content:center;align-items:center;width:100%;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper>.kbq-button-prefix,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper>.kbq-button-prefix{margin-right:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-wrapper>.kbq-button-suffix,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-wrapper>.kbq-button-suffix{margin-left:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-text,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button .kbq-button-toggle-text:has(>.kbq-icon),.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon .kbq-button-toggle-text:has(>.kbq-icon){display:flex;align-items:center;gap:var(--kbq-button-toggle-size-item-content-gap-horizontal)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.cdk-keyboard-focused,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.cdk-keyboard-focused{outline:none}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon{max-width:100%;height:var(--kbq-button-toggle-size-item-height)}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle>.kbq-button-icon:before{inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group:not(.kbq-button-toggle_vertical) .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-inline-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button:before,.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon:before{inset-inline:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));inset-block:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:first-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-start:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle_vertical .kbq-button-toggle:last-of-type>:is(.kbq-button,.kbq-button-icon):before{inset-block-end:calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical))}.kbq-button-toggle-group.kbq-button-toggle-group_stretched{width:100%}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle{flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon{width:100%;flex:1}.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button .kbq-button-wrapper,.kbq-button-toggle-group.kbq-button-toggle-group_stretched .kbq-button-toggle>.kbq-button-icon .kbq-button-wrapper{justify-content:center}.kbq-button-toggle-group .kbq-button-toggle>:is(.kbq-button,.kbq-button-icon).kbq-button_no-label .kbq-button-toggle-text{display:flex;align-items:center}.kbq-button-toggle-group .kbq-button-toggle>:is(.kbq-button,.kbq-button-icon) .kbq-button-toggle-text:empty{display:none}.kbq-button-toggle_vertical{flex-direction:column}.kbq-button-toggle_vertical .kbq-button-toggle{width:100%}.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button,.kbq-button-toggle_vertical .kbq-button-toggle>.kbq-button-icon{width:100%}.kbq-button-toggle-group{background:var(--kbq-button-toggle-container-background)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-default-background);color:var(--kbq-button-toggle-item-default-text)}.kbq-button-toggle-group .kbq-button-toggle>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-default-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-hover-background);color:var(--kbq-button-toggle-item-states-hover-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:hover:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-hover-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-active-background);color:var(--kbq-button-toggle-item-states-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle:active:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-background);color:var(--kbq-button-toggle-item-states-selected-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled)>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button-icon.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-active-background);color:var(--kbq-button-toggle-item-states-selected-active-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled).kbq-active>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-selected:not(.kbq-disabled):active>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-active-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-disabled-background);color:var(--kbq-button-toggle-item-states-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button.kbq-button_transparent,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button-icon.kbq-button_transparent{background:var(--kbq-button-toggle-item-states-selected-disabled-background);color:var(--kbq-button-toggle-item-states-selected-disabled-text)}.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button.kbq-button_transparent .kbq-icon.kbq-empty,.kbq-button-toggle-group .kbq-button-toggle.kbq-disabled.kbq-selected>.kbq-button-icon.kbq-button_transparent .kbq-icon.kbq-empty{color:var(--kbq-button-toggle-item-states-selected-disabled-icon)}.kbq-button-toggle-group .kbq-button-toggle.cdk-keyboard-focused{border-color:var(--kbq-button-toggle-item-states-focused-outline)}.kbq-button-toggle .kbq-button-toggle-wrapper{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}\n", ".kbq-button-toggle-group{--kbq-button-toggle-size-container-border-radius: var(--kbq-size-border-radius);--kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-height: 22px;--kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);--kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);--kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);--kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);--kbq-button-toggle-size-item-hit-area-gap: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2 );--kbq-button-toggle-size-item-hit-area-horizontal: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal) );--kbq-button-toggle-size-item-hit-area-vertical: calc( var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical) );--kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);--kbq-button-toggle-item-default-background: var(--kbq-background-transparent);--kbq-button-toggle-item-default-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-default-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-button-toggle-item-states-hover-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-active-background: var(--kbq-states-background-contrast-fade-active);--kbq-button-toggle-item-states-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-background: var(--kbq-background-card);--kbq-button-toggle-item-states-selected-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-active-background: var(--kbq-states-background-transparent-active);--kbq-button-toggle-item-states-selected-active-text: var(--kbq-foreground-contrast);--kbq-button-toggle-item-states-selected-active-icon: var(--kbq-icon-contrast-fade);--kbq-button-toggle-item-states-selected-disabled-background: var(--kbq-states-background-disabled);--kbq-button-toggle-item-states-selected-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-selected-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-disabled-background: none;--kbq-button-toggle-item-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-button-toggle-item-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-button-toggle-item-states-focused-outline: var(--kbq-states-line-focus-theme)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { ...{ descendants: true }, isSignal: true }] }], button: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqButton), { isSignal: true }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Entry point for `KbqButtonToggleGroup`/`KbqButtonToggle`. Both are standalone, so a bare
@@ -397,15 +764,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * `KbqButtonModule`/`KbqTitleModule` and re-exports the slot markers.
  */
 class KbqButtonToggleModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleModule, imports: [KbqButtonModule, KbqTitleModule, KbqButtonToggleGroup, KbqButtonToggle], exports: [KbqButtonToggleGroup, KbqButtonToggle] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleModule, imports: [KbqButtonModule, KbqTitleModule, KbqButtonToggle] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleModule, imports: [KbqButtonModule, KbqTitleModule, KbqButtonToggleGroup, KbqButtonToggle], exports: [KbqButtonToggleGroup, KbqButtonToggle, KbqButtonPrefix, KbqButtonSuffix] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleModule, imports: [KbqButtonModule, KbqTitleModule, KbqButtonToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqButtonToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqButtonToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqButtonModule, KbqTitleModule, KbqButtonToggleGroup, KbqButtonToggle],
-                    exports: [KbqButtonToggleGroup, KbqButtonToggle]
+                    // The slot markers are re-exported because a toggle projects them itself: they are what keeps an
+                    // icon outside the truncated label.
+                    exports: [KbqButtonToggleGroup, KbqButtonToggle, KbqButtonPrefix, KbqButtonSuffix]
                 }]
         }] });