@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-radio.mjs

@@ -1,12 +1,12 @@
-import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
+import { _IdGenerator, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { Platform } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ChangeDetectorRef, input, output, booleanAttribute, ContentChildren, Input, Directive, viewChild, numberAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { KbqColorDirective } from '@koobiq/components/core';
+import { forwardRef, untracked, inject, Injector, input, signal, booleanAttribute, computed, contentChild, contentChildren, Renderer2, output, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormGroupDirective, NgForm, NgControl } from '@angular/forms';
+import { KbqColorDirective, KbqErrorStateTracker, ErrorStateMatcher, kbqQueryListFrom, kbqOptionalNumberAttribute } from '@koobiq/components/core';
+import { KbqError, KbqHint } from '@koobiq/components/form-field';
 
-// Increasing integer for generating unique ids for radio components.
-let nextUniqueId = 0;
 /** Change event object emitted by KbqRadio. */
 class KbqRadioChange {
     constructor(
@@ -21,6 +21,7 @@ class KbqRadioChange {
 /**
  * Provider Expression that allows kbq-radio-group to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
+ *
  * @docs-private
  */
 const KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
@@ -28,122 +29,237 @@ const KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => KbqRadioGroup),
     multi: true
 };
-class KbqRadioGroup {
+/**
+ * Selection group for `KbqRadioButton`.
+ *
+ * The host is a `radiogroup`, which is not a name-from-content role, so it reaches assistive
+ * technology unnamed unless the consumer names it. Name it with a plain `aria-label` /
+ * `aria-labelledby` attribute pointing at the visible group label: 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.
+ *
+ * To show a validation error, bind the group to a form control and put the error text in a `kbq-error` inside the
+ * group. A `kbq-hint` put inside the group is shown under the options, below the error.
+ */
+class KbqRadioGroup extends KbqColorDirective {
+    /** Value of the radio button. */
+    // `value`, `selected` and `disabled` are accessors over signals, fed by aliased inputs, because code outside the
+    // template writes them too: `writeValue` and `setDisabledState` the first and last, the buttons their selection
+    // back into `selected`. `disabled` is no `model()` because it coerces with `booleanAttribute`, which a `model()`
+    // cannot carry; `value` is none because `writeValue` has to resolve the checked button synchronously before the
+    // first render, and a `model()` would also publish a `valueChange` output that duplicates `change`.
+    get value() {
+        return this._value();
+    }
+    set value(newValue) {
+        // Untracked, as the other setters and methods that select: called from a consumer's `effect()`, the selection
+        // read on the way — the group's and its buttons' — would make the effect run again whenever the user picks
+        // another button.
+        untracked(() => {
+            if (this._value() !== newValue) {
+                // Set this before proceeding to ensure no circular loop occurs with selection.
+                this._value.set(newValue);
+                this.updateSelectedRadioFromValue();
+                this.checkSelectedRadioButton();
+            }
+        });
+    }
+    /** Whether the radio button is selected. */
+    get selected() {
+        return this._selected();
+    }
+    set selected(selected) {
+        untracked(() => {
+            this._selected.set(selected);
+            this.value = selected ? selected.value : null;
+            this.checkSelectedRadioButton();
+        });
+    }
+    /** Whether the radio group is disabled */
+    get disabled() {
+        return this._disabled();
+    }
+    set disabled(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['selectedInput']) {
+            this.selected = this.selectedInput() ?? null;
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
+    /** Child radio buttons. */
+    get radios() {
+        return this.radiosList();
+    }
+    checkSelectedRadioButton() {
+        untracked(() => {
+            const selected = this._selected();
+            if (selected && !selected.checked) {
+                selected.checked = true;
+            }
+        });
+    }
     constructor() {
-        this.changeDetector = inject(ChangeDetectorRef);
-        this.big = input(false, ...(ngDevMode ? [{ debugName: "big" }] : []));
-        this._disabled = false;
-        /** Whether the radio group is required. */
-        this._required = false;
+        super();
+        this.injector = inject(Injector);
+        // The control is resolved in `ngOnInit`: `NgControl` injects the group as its value accessor, so injecting it
+        // back from the constructor is a cyclic dependency.
+        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }));
+        /** Whether the radio group is in an error state. */
+        this.errorState = this.errorStateTracker.errorState;
+        /** An object used to control when the error state is shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        this.big = input(false, ...(ngDevMode ? [{ debugName: "big" }] : /* istanbul ignore next */ []));
+        /**
+         * Name of the radio button group. All radio buttons inside this group will use this name,
+         * unless they were given one of their own.
+         */
+        this.name = input(inject(_IdGenerator).getId('kbq-radio-group-'), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
+        this.labelPosition = input('after', { ...(ngDevMode ? { debugName: "labelPosition" } : /* istanbul ignore next */ {}), transform: (value) => (value === 'before' ? 'before' : 'after') });
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        /** @docs-private */
+        this.selectedInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** Whether the radio group is required */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Value of `aria-invalid`: set whenever the group is painted as invalid.
+         *
+         * @internal
+         */
+        this.ariaInvalid = computed(() => (this.errorState() || this.color() === 'error' ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+        /** Error text projected into the group. */
+        this.error = contentChild(KbqError, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * Whether the projected `kbq-error` is shown. Without one, nothing is rendered under the options.
+         *
+         * @internal
+         */
+        this.showError = computed(() => this.errorState() && !!this.error(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+        /**
+         * Id of the element wrapping the projected `kbq-error`.
+         *
+         * @internal
+         */
+        this.errorId = inject(_IdGenerator).getId('kbq-radio-group-error-');
+        /**
+         * Hints of the group itself, shown under the options. The hints of the buttons are their own.
+         *
+         * @internal
+         */
+        this.hints = contentChildren(KbqHint, { ...(ngDevMode ? { debugName: "hints" } : /* istanbul ignore next */ {}), descendants: false });
+        /** Ids the group last added to `aria-describedby` of the host, so the consumer's own survive an update. */
+        this.ownDescribedByIds = [];
+        this.renderer = inject(Renderer2);
+        this.isBrowser = inject(Platform).isBrowser;
         /**
          * Event emitted when the group value changes.
          * Change events are only emitted when the value changes due to user interaction with
          * a radio button (the same behavior as `<input type-"radio">`).
          */
         this.change = output();
+        this.radiosQuery = contentChildren(forwardRef(() => KbqRadioButton), { ...(ngDevMode ? { debugName: "radiosQuery" } : /* istanbul ignore next */ {}), descendants: true });
+        this.radiosList = kbqQueryListFrom(this.radiosQuery);
         /**
          * Selected value for group. Should equal the value of the selected radio button if there *is*
          * a corresponding radio button with a matching value. If there is *not* such a corresponding
          * radio button, this value persists to be applied in case a new radio button is added with a
          * matching value.
          */
-        this._value = null;
-        /** The HTML name attribute applied to radio buttons in this group. */
-        this._name = `kbq-radio-group-${nextUniqueId++}`;
+        this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
         /** The currently selected radio button. Should match value. */
-        this._selected = null;
+        this._selected = signal(null, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
         /** Whether the `value` has been set to its initial value. */
         this.isInitialized = false;
-        /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
-        this._labelPosition = 'after';
-        /** The method to be called in order to update ngModel */
+        /**
+         * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
         this.controlValueAccessorChangeFn = () => { };
         /**
          * onTouch function registered via registerOnTouch (ControlValueAccessor).
+         *
          * @docs-private
          */
         this.onTouched = () => { };
+        // Written by hand rather than bound: the host is the element the consumer writes, and a host binding would
+        // overwrite an `[attr.aria-describedby]` the consumer binds on it. Not on the server: after hydration the ids
+        // it wrote would be read back as the consumer's own.
+        effect(() => {
+            if (!this.isBrowser)
+                return;
+            const ids = [...(this.showError() ? [this.errorId] : []), ...this.hints().map((hint) => hint.id())];
+            untracked(() => this.setDescribedByIds(ids));
+        });
     }
-    /** Name of the radio button group. All radio buttons inside this group will use this name. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get name() {
-        return this._name;
-    }
-    set name(value) {
-        this._name = value;
-        this.updateRadioButtonNames();
-    }
-    /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get labelPosition() {
-        return this._labelPosition;
-    }
-    set labelPosition(v) {
-        this._labelPosition = v === 'before' ? 'before' : 'after';
-        this.markRadiosForCheck();
-    }
-    /** Value of the radio button. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (this._value !== newValue) {
-            // Set this before proceeding to ensure no circular loop occurs with selection.
-            this._value = newValue;
-            this.updateSelectedRadioFromValue();
-            this.checkSelectedRadioButton();
+    ngOnInit() {
+        this.errorStateTracker.ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
+    }
+    ngDoCheck() {
+        // Re-evaluated on every check: a submit of the parent form notifies nothing a signal could follow.
+        if (this.errorStateTracker.ngControl)
+            this.updateErrorState();
+    }
+    /** Updates the error state based on the error state matcher. */
+    updateErrorState() {
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
+    }
+    /** Writes the error and the hints of the group to `aria-describedby` of the host, after the consumer's own ids. */
+    setDescribedByIds(ids) {
+        const element = this.elementRef.nativeElement;
+        const consumerIds = (element.getAttribute('aria-describedby') ?? '')
+            .split(/\s+/)
+            .filter((id) => id && !this.ownDescribedByIds.includes(id));
+        const next = [...consumerIds, ...ids];
+        this.ownDescribedByIds = ids;
+        if (next.length) {
+            this.renderer.setAttribute(element, 'aria-describedby', next.join(' '));
         }
-    }
-    /** Whether the radio button is selected. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get selected() {
-        return this._selected;
-    }
-    set selected(selected) {
-        this._selected = selected;
-        this.value = selected ? selected.value : null;
-        this.checkSelectedRadioButton();
-    }
-    /** Whether the radio group is disabled */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        this.markRadiosForCheck();
-    }
-    /** Whether the radio group is required */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = value;
-        this.markRadiosForCheck();
-    }
-    checkSelectedRadioButton() {
-        if (this._selected && !this._selected.checked) {
-            this._selected.checked = true;
+        else {
+            this.renderer.removeAttribute(element, 'aria-describedby');
         }
     }
-    /**
-     * Initialize properties once content children are available.
-     * This allows us to propagate relevant attributes to associated buttons.
-     */
     ngAfterContentInit() {
         // Mark this component as initialized in AfterContentInit because the initial value can
         // possibly be set by NgModel on KbqRadioGroup, and it is possible that the OnInit of the
         // NgModel occurs *after* the OnInit of the KbqRadioGroup.
         this.isInitialized = true;
     }
+    /**
+     * Initialize properties once content children are available.
+     * This allows us to propagate relevant attributes to associated buttons.
+     */
+    ngAfterContentChecked() {
+        // Syncs the list here so `changes` emits after the projected items are bound and before the host bindings.
+        this.radiosList();
+    }
+    /**
+     * Moves focus to the checked radio button, or to the first enabled one when nothing is checked —
+     * the same rule the browser follows when the group is reached with <kbd>Tab</kbd>.
+     */
+    focus(origin = 'program') {
+        untracked(() => {
+            const target = this._selected() ?? this.radios?.find((radio) => !radio.disabled);
+            target?.focus(origin);
+        });
+    }
     /**
      * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
      * radio buttons upon their blur.
@@ -156,10 +272,17 @@ class KbqRadioGroup {
     /** Dispatch change event with current selection and group value. */
     emitChangeEvent() {
         if (this.isInitialized) {
-            this.change.emit(new KbqRadioChange(this._selected, this._value));
+            this.change.emit(new KbqRadioChange(untracked(this._selected), untracked(this._value)));
         }
     }
+    /**
+     * Marks every radio button of the group for a change-detection check.
+     *
+     * Kept for back-compatibility. A button derives `checked` and `disabled` from signals, its own and its
+     * group's, so it re-renders on its own and nothing in the library calls this any more.
+     */
     markRadiosForCheck() {
+        // Kept at the DS-2196 review, like `KbqButtonToggle.markForCheck()`, which the migration guide promises stays.
         if (this.radios) {
             this.radios.forEach((radio) => radio.markForCheck());
         }
@@ -169,11 +292,11 @@ class KbqRadioGroup {
      */
     writeValue(value) {
         this.value = value;
-        this.changeDetector.markForCheck();
     }
     /**
      * Registers a callback to be triggered when the model value changes.
      * Implemented as part of ControlValueAccessor.
+     *
      * @param fn Callback to be registered.
      */
     registerOnChange(fn) {
@@ -182,6 +305,7 @@ class KbqRadioGroup {
     /**
      * Registers a callback to be triggered when the control is touched.
      * Implemented as part of ControlValueAccessor.
+     *
      * @param fn Callback to be registered.
      */
     registerOnTouched(fn) {
@@ -189,158 +313,229 @@ class KbqRadioGroup {
     }
     /**
      * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     *
      * @param isDisabled Whether the control should be disabled.
      */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this.changeDetector.markForCheck();
-    }
-    updateRadioButtonNames() {
-        this.radios?.forEach((radio) => (radio.name = this.name));
     }
     /** Updates the `selected` radio button from the internal _value state. */
     updateSelectedRadioFromValue() {
         // If the value already matches the selected radio, do nothing.
-        const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
-        if (this.radios != null && !isAlreadySelected) {
-            this._selected = null;
+        const selected = this._selected();
+        const isAlreadySelected = selected !== null && selected.value === this._value();
+        // Before the content is initialized the buttons are not bound yet; each one reads the group value itself.
+        if (this.isInitialized && !isAlreadySelected) {
+            this._selected.set(null);
             this.radios.forEach((radio) => {
                 radio.checked = this.value === radio.value;
                 if (radio.checked) {
-                    this._selected = radio;
+                    this._selected.set(radio);
                 }
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqRadioGroup, isStandalone: true, selector: "kbq-radio-group", inputs: { big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.kbq-radio-group_normal": "!big()", "class.kbq-radio-group_big": "big()" }, classAttribute: "kbq-radio-group" }, providers: [KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "radios", predicate: i0.forwardRef(() => KbqRadioButton), descendants: true }], exportAs: ["kbqRadioGroup"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqRadioGroup, isStandalone: true, selector: "kbq-radio-group", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" }, properties: { "class.kbq-radio-group_normal": "!big()", "class.kbq-radio-group_big": "big()", "class.kbq-radio-group_label-before": "labelPosition() === 'before'", "class.kbq-invalid": "errorState()", "attr.aria-required": "required() ? 'true' : null", "attr.aria-invalid": "ariaInvalid()" }, classAttribute: "kbq-radio-group" }, providers: [KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "error", first: true, predicate: KbqError, isSignal: true }, { propertyName: "hints", predicate: KbqHint, isSignal: true }, { propertyName: "radiosQuery", predicate: i0.forwardRef(() => KbqRadioButton), descendants: true, isSignal: true }], exportAs: ["kbqRadioGroup"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ng-content />
+
+        <!--
+            Under the options, as in a form field: the error first, rendered only in the error state so that
+            assistive technology announces the alert as it appears, then the hints of the group.
+        -->
+        @if (showError() || hints().length) {
+            <div class="kbq-radio-group__subscript">
+                @if (showError()) {
+                    <div class="kbq-radio-group__error" [id]="errorId">
+                        <ng-content select="kbq-error" />
+                    </div>
+                }
+
+                <ng-content select="kbq-hint" />
+            </div>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioGroup, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioGroup, decorators: [{
+            type: Component,
             args: [{
                     selector: 'kbq-radio-group',
+                    // Styled by `radio.scss`, which the buttons carry: the error and the hints of a group stand under its buttons.
+                    template: `
+        <ng-content />
+
+        <!--
+            Under the options, as in a form field: the error first, rendered only in the error state so that
+            assistive technology announces the alert as it appears, then the hints of the group.
+        -->
+        @if (showError() || hints().length) {
+            <div class="kbq-radio-group__subscript">
+                @if (showError()) {
+                    <div class="kbq-radio-group__error" [id]="errorId">
+                        <ng-content select="kbq-error" />
+                    </div>
+                }
+
+                <ng-content select="kbq-hint" />
+            </div>
+        }
+    `,
                     providers: [KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                     host: {
                         role: 'radiogroup',
                         class: 'kbq-radio-group',
                         '[class.kbq-radio-group_normal]': '!big()',
-                        '[class.kbq-radio-group_big]': 'big()'
+                        '[class.kbq-radio-group_big]': 'big()',
+                        '[class.kbq-radio-group_label-before]': "labelPosition() === 'before'",
+                        '[class.kbq-invalid]': 'errorState()',
+                        '[attr.aria-required]': "required() ? 'true' : null",
+                        // A signal of its own: the color class binding reads `color` first, and the host bindings of every group in a
+                        // view run in that view's reactive consumer, where a signal read again after others costs a scan of all it has
+                        // read so far.
+                        '[attr.aria-invalid]': 'ariaInvalid()'
                     },
                     exportAs: 'kbqRadioGroup'
                 }]
-        }], propDecorators: { big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }], name: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], change: [{ type: i0.Output, args: ["change"] }], radios: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqRadioButton), { descendants: true }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqError), { ...{ descendants: false }, isSignal: true }] }], hints: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqHint), { ...{ descendants: false }, isSignal: true }] }], change: [{ type: i0.Output, args: ["change"] }], radiosQuery: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqRadioButton), { ...{ descendants: true }, isSignal: true }] }] } });
 class KbqRadioButton extends KbqColorDirective {
     /** Whether this radio button is checked. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get checked() {
-        return this._checked;
+        return this._checked();
     }
     set checked(value) {
-        if (this._checked !== value) {
-            this._checked = value;
-            if (value && this.radioGroup && this.radioGroup.value !== this.value) {
-                this.radioGroup.selected = this;
-            }
-            else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
-                // When unchecking the selected radio button, update the selected radio
-                // property on the group.
-                this.radioGroup.selected = null;
-            }
-            if (value) {
-                // Notify all radio buttons with the same name to un-check.
-                this.radioDispatcher.notify(this.id, this.name);
+        // Untracked, as the `value` setter: called from a consumer's `effect()`, the selection read on the way — the
+        // button's, its group's and its siblings' — would make the effect run again whenever the user picks another
+        // button.
+        untracked(() => {
+            if (this._checked() !== value) {
+                this._checked.set(value);
+                if (value && this.radioGroup && this.radioGroup.value !== this.value) {
+                    this.radioGroup.selected = this;
+                }
+                else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
+                    // When unchecking the selected radio button, update the selected radio
+                    // property on the group.
+                    this.radioGroup.selected = null;
+                }
+                if (value) {
+                    // Notify all radio buttons with the same name to un-check.
+                    this.radioDispatcher.notify(this.id(), this.name);
+                }
             }
-            this.changeDetector.markForCheck();
-        }
+        });
     }
     /** The value of this radio button. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
-        return this._value;
+        return this._value();
     }
     set value(value) {
-        if (this._value !== value) {
-            this._value = value;
-            if (this.radioGroup != null) {
-                if (!this.checked) {
-                    // Update checked when the value changed to match the radio group's value
-                    this.checked = this.radioGroup.value === value;
-                }
-                if (this.checked) {
-                    this.radioGroup.selected = this;
+        untracked(() => {
+            if (this._value() !== value) {
+                this._value.set(value);
+                if (this.radioGroup) {
+                    if (!this.checked) {
+                        // Update checked when the value changed to match the radio group's value
+                        this.checked = this.radioGroup.value === value;
+                    }
+                    if (this.checked) {
+                        this.radioGroup.selected = this;
+                    }
                 }
             }
-        }
+        });
     }
-    /** Whether the radio button is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the radio button is disabled. A button inside a disabled group is disabled as well. */
     get disabled() {
-        return this._disabled || (this.radioGroup != null && this.radioGroup.disabled);
+        return this._disabled() || !!this.radioGroup?.disabled;
     }
     set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this.changeDetector.markForCheck();
-        }
+        this._disabled.set(value);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Tabindex of the native input. A disabled button is taken out of the tab order. */
     get tabIndex() {
-        return this.disabled ? -1 : this._tabIndex;
+        return this.disabled ? -1 : this._tabIndex();
     }
     set tabIndex(value) {
-        this._tabIndex = value;
+        this._tabIndex.set(value);
     }
-    /** Whether the radio button is required. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Whether the radio button is required. A button inside a required group is required as well. */
     get required() {
-        return this._required || (this.radioGroup && this.radioGroup.required);
+        return this._required() || !!this.radioGroup?.required();
     }
     set required(value) {
-        this._required = value;
+        this._required.set(value);
     }
     /** Whether the label should appear after or before the radio button. Defaults to 'after' */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get labelPosition() {
-        return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after';
+        return this._labelPosition() || this.radioGroup?.labelPosition() || 'after';
     }
     /** @docs-private */
     set labelPosition(value) {
-        this._labelPosition = value;
+        this._labelPosition.set(value);
+    }
+    /**
+     * Analog to HTML 'name' attribute used to group radios for unique selection. Defaults to the
+     * parent group's name, or — outside a group — to an id unique to this button.
+     */
+    // An accessor rather than a plain field: the app-global UniqueSelectionDispatcher isolates its
+    // listeners by name alone, so a button that resolved to `undefined` would share one selection
+    // group with every other unnamed radio button in the application. Resolving the group's name here
+    // rather than copying it in `ngOnInit` is also what keeps an explicitly bound `[name]` alive.
+    get name() {
+        return this._name() ?? this.radioGroup?.name() ?? this.uniqueId;
+    }
+    set name(value) {
+        this._name.set(value);
     }
-    /** ID of the native input element inside `<kbq-radio-button>` */
-    get inputId() {
-        return `${this.id || this.uniqueId}-input`;
+    /**
+     * The `value` attribute of the native input. An `<input type="radio">` with no `value` submits the
+     * literal string `"on"`, so only string-like values round-trip through native form submission.
+     */
+    get nativeValue() {
+        const value = this._value();
+        return value == null ? null : String(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;
+        }
+        if (changes['tabIndexInput'])
+            this.tabIndex = this.tabIndexInput() ?? 0;
+        if (changes['requiredInput']) {
+            const required = this.requiredInput();
+            if (required !== undefined)
+                this.required = required;
+        }
+        if (changes['labelPositionInput']) {
+            this.labelPosition = this.labelPositionInput();
+        }
+        if (changes['nameInput']) {
+            this.name = this.nameInput();
+        }
     }
     constructor() {
-        const radioGroup = inject(KbqRadioGroup, { optional: true });
         super();
         this.changeDetector = inject(ChangeDetectorRef);
         this.focusMonitor = inject(FocusMonitor);
         this.radioDispatcher = inject(UniqueSelectionDispatcher);
-        this._tabIndex = 0;
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
+        /** Whether this radio is required. */
+        this._required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
         /** The native `<input type=radio>` element */
         this.inputElement = viewChild.required('input');
         /**
@@ -349,19 +544,58 @@ class KbqRadioButton extends KbqColorDirective {
          * the radio button (the same behavior as `<input type-"radio">`).
          */
         this.change = output();
-        this.isFocused = input(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-        this.uniqueId = `kbq-radio-${++nextUniqueId}`;
+        /** The parent radio group. `null` when the button is used outside one. */
+        this.radioGroup = inject(KbqRadioGroup, { optional: true });
+        /**
+         * Whether the button takes the big size of its group.
+         *
+         * @internal
+         */
+        this.big = computed(() => !!this.radioGroup?.big(), ...(ngDevMode ? [{ debugName: "big" }] : /* istanbul ignore next */ []));
+        this.uniqueId = inject(_IdGenerator).getId('kbq-radio-');
+        /**
+         * A unique id for the radio button. If none is supplied — or `null` is bound explicitly — it is
+         * auto-generated, so a read always yields the id the element actually carries.
+         */
+        this.id = input(this.uniqueId, { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), transform: (value) => value || this.uniqueId });
+        /** ID of the native input element inside `<kbq-radio-button>` */
+        this.inputId = computed(() => `${this.id()}-input`, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        /**
+         * ID of the element holding the option text. The native input points its `aria-labelledby` at it,
+         * so the accessible name is the option text alone rather than everything the wrapping `<label>`
+         * contains — the projected hint included.
+         */
+        this.labelId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        /** Hint projected into the button, referenced by the native input's `aria-describedby`. */
+        this.hint = contentChild(KbqHint, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this._labelPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "_labelPosition" }] : /* istanbul ignore next */ []));
+        this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : /* 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 });
+        /** @docs-private */
+        this.tabIndexInput = input(undefined, { ...(ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {}), alias: 'tabIndex',
+            transform: kbqOptionalNumberAttribute });
+        /** @docs-private */
+        this.requiredInput = input(undefined, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.labelPositionInput = input(undefined, { ...(ngDevMode ? { debugName: "labelPositionInput" } : /* istanbul ignore next */ {}), alias: 'labelPosition' });
+        /** @docs-private */
+        this.nameInput = input(undefined, { ...(ngDevMode ? { debugName: "nameInput" } : /* istanbul ignore next */ {}), alias: 'name' });
         /** Whether this radio is checked. */
-        this._checked = false;
+        this._checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
         /** Value assigned to this radio. */
-        this._value = null;
+        this._value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
         /** Unregister function for _radioDispatcher */
         this.removeUniqueSelectionListener = () => { };
-        const radioDispatcher = this.radioDispatcher;
-        this.id = this.uniqueId;
-        this.radioGroup = radioGroup;
-        this.removeUniqueSelectionListener = radioDispatcher.listen((id, name) => {
-            if (id !== this.id && name === this.name) {
+        this.removeUniqueSelectionListener = this.radioDispatcher.listen((id, name) => {
+            if (id !== this.id() && name === this.name) {
                 this.checked = false;
             }
         });
@@ -369,9 +603,7 @@ class KbqRadioButton extends KbqColorDirective {
     ngOnInit() {
         if (this.radioGroup) {
             // If the radio is inside a radio group, determine if it should be checked
-            this.checked = this.radioGroup.value === this._value;
-            // Copy name from parent radio group
-            this.name = this.radioGroup.name;
+            this.checked = this.radioGroup.value === this._value();
         }
     }
     ngAfterViewInit() {
@@ -385,18 +617,23 @@ class KbqRadioButton extends KbqColorDirective {
         this.focusMonitor.stopMonitoring(this.elementRef);
         this.removeUniqueSelectionListener();
     }
-    /** Focuses the radio button. */
-    focus() {
-        this.inputElement().nativeElement.focus();
+    /**
+     * Focuses the radio button.
+     *
+     * Routed through the `FocusMonitor` so the origin is recorded: the focus ring is keyed off
+     * `.cdk-keyboard-focused`, which a bare `element.focus()` never produces.
+     */
+    focus(origin = 'program') {
+        this.focusMonitor.focusVia(this.inputElement(), origin);
     }
     /**
      * Marks the radio button as needing checking for change detection.
-     * This method is exposed because the parent radio group will directly
-     * update bound properties of the radio button.
+     *
+     * Kept for back-compatibility. A button derives its state from signals, its own and its group's, so it
+     * re-renders on its own and nothing in the library calls this any more.
      */
     markForCheck() {
-        // When group value changes, the button will not be notified. Use `markForCheck` to explicit
-        // update radio button's status
+        // Kept at the DS-2196 review, like `KbqButtonToggle.markForCheck()`, which the migration guide promises stays.
         this.changeDetector.markForCheck();
     }
     onInputClick(event) {
@@ -428,48 +665,30 @@ class KbqRadioButton extends KbqColorDirective {
     }
     /** Dispatch change event with current value. */
     emitChangeEvent() {
-        this.change.emit(new KbqRadioChange(this, this._value));
+        this.change.emit(new KbqRadioChange(this, this._value()));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqRadioButton, isStandalone: true, selector: "kbq-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "attr.id": "id", "class.kbq-radio-button_big": "radioGroup?.big()", "class.kbq-selected": "checked", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-radio-button" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], exportAs: ["kbqRadioButton"], usesInheritance: true, ngImport: i0, template: "<label #label class=\"kbq-radio-label\" [attr.for]=\"inputId\">\n    <input\n        #input\n        type=\"radio\"\n        class=\"kbq-radio-input cdk-visually-hidden\"\n        [attr.name]=\"name\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        [required]=\"required\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onInputChange($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n\n    <div class=\"kbq-radio-label-content\" [class.kbq-radio-label-before]=\"labelPosition === 'before'\">\n        <div class=\"kbq-radio-button__outer-circle\">\n            <div class=\"kbq-radio-button__inner-circle\"></div>\n        </div>\n\n        <div class=\"kbq-radio__text-container\">\n            <span class=\"kbq-radio__text\">\n                <ng-content />\n            </span>\n\n            <ng-content select=\"kbq-hint\" />\n        </div>\n    </div>\n</label>\n", styles: [".kbq-radio-group{display:inline-flex;flex-direction:column}.kbq-radio-group.kbq-radio-group_normal{gap:var(--kbq-radio-size-normal-vertical-gap)}.kbq-radio-group.kbq-radio-group_big{gap:var(--kbq-radio-size-big-vertical-gap)}.kbq-radio-button{display:inline-flex}.kbq-radio-label{display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer;width:100%}.kbq-radio-label-content{display:inline-flex;position:relative;order:0;line-height:inherit;padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2);padding-right:0}.kbq-radio-label-content .kbq-radio-button__outer-circle,.kbq-radio-label-content .kbq-radio-button__inner-circle{box-sizing:content-box;position:absolute;display:flex;content:\"\";border-style:solid;border-radius:50%}.kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-normal-outer-circle-border-width);left:0;top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-radio-size-normal-outer-size) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-normal-outer-size);height:var(--kbq-radio-size-normal-outer-size)}.kbq-radio-label-content .kbq-radio-button__inner-circle{position:relative;margin:auto;width:var(--kbq-radio-size-normal-inner-size);height:var(--kbq-radio-size-normal-inner-size)}.kbq-radio-label-content .kbq-radio__text-container{display:flex;flex-direction:column}.kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-normal-vertical-content-padding)}.kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-label-content.kbq-radio-label-before .kbq-radio-button__outer-circle{left:unset;right:0}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content{padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-big-outer-circle-border-width);top:calc((var(--kbq-typography-text-big-line-height) - var(--kbq-radio-size-big-outer-size) - var(--kbq-radio-size-big-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-big-outer-size);height:var(--kbq-radio-size-big-outer-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__inner-circle{width:var(--kbq-radio-size-big-inner-size);height:var(--kbq-radio-size-big-inner-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-big-vertical-content-padding)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button .kbq-radio-button__inner-circle{border-width:0!important}.kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-default-outer-circle-border);background:var(--kbq-radio-theme-default-outer-circle-background)}.kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-default-inner-circle-background)}.kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-hover-outer-circle-border);background:var(--kbq-radio-theme-states-hover-outer-circle-background)}.kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-hover-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-focused-outer-circle-border);background:var(--kbq-radio-theme-states-focused-outer-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-focused-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-outer-circle-border);background:var(--kbq-radio-theme-states-checked-outer-circle-background)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-focused-outer-circle-border);background:var(--kbq-radio-theme-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button{color:var(--kbq-foreground-contrast)}.kbq-radio-button.kbq-error .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-button.kbq-error .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-button.kbq-error .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error{color:var(--kbq-foreground-contrast)}.kbq-radio-button{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-button .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-button.kbq-radio-button_big{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-radio-button.kbq-radio-button_big .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-radio-group{--kbq-radio-size-big-vertical-gap: var(--kbq-size-m);--kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);--kbq-radio-size-big-top: var(--kbq-size-3xs);--kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-default-inner-circle-background: transparent;--kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);--kbq-radio-theme-states-hover-inner-circle-background: transparent;--kbq-radio-theme-states-checked-outer-circle-border: transparent;--kbq-radio-theme-states-checked-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-hover-outer-circle-border: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-outer-circle-background: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-theme-states-focused-outer-circle-border: transparent;--kbq-radio-theme-states-focused-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-states-focused-inner-circle-background: transparent;--kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;--kbq-radio-theme-states-checked-focused-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-focused-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-disabled-inner-circle-background: transparent;--kbq-radio-theme-states-disabled-caption: var(--kbq-states-foreground-disabled);--kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-default-inner-circle-background: transparent;--kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);--kbq-radio-error-states-hover-inner-circle-background: transparent;--kbq-radio-error-states-checked-outer-circle-border: transparent;--kbq-radio-error-states-checked-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-hover-outer-circle-border: transparent;--kbq-radio-error-states-checked-hover-outer-circle-background: var(--kbq-states-background-error-hover);--kbq-radio-error-states-checked-hover-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-error-states-focused-outer-circle-border: transparent;--kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-states-focused-inner-circle-background: transparent;--kbq-radio-error-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-checked-focused-outer-circle-border: transparent;--kbq-radio-error-states-checked-focused-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-focused-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-disabled-inner-circle-background: transparent;--kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled)}.kbq-radio-button{--kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-normal-outer-size: calc( var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2 );--kbq-radio-size-normal-inner-size: var(--kbq-size-xs);--kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-radio-size-normal-top: 0;--kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);--kbq-radio-size-big-inner-size: var(--kbq-size-xs);--kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqRadioButton, isStandalone: true, selector: "kbq-radio-button", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, tabIndexInput: { classPropertyName: "tabIndexInput", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, labelPositionInput: { classPropertyName: "labelPositionInput", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "attr.id": "id()", "class.kbq-radio-button_big": "big()", "class.kbq-selected": "checked", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-radio-button" }, queries: [{ propertyName: "hint", first: true, predicate: KbqHint, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], exportAs: ["kbqRadioButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label #label class=\"kbq-radio-label\" [attr.for]=\"inputId()\">\n    <!--\n        The wrapping label would fold everything it contains \u2014 the projected hint included \u2014 into the\n        accessible name, so the name is overridden with an explicit `aria-labelledby` pointing at the\n        option text alone, and the hint arrives as a description instead.\n    -->\n    <input\n        #input\n        type=\"radio\"\n        class=\"kbq-radio-input cdk-visually-hidden\"\n        [attr.aria-describedby]=\"hint()?.id() ?? null\"\n        [attr.aria-labelledby]=\"labelId()\"\n        [attr.name]=\"name\"\n        [attr.value]=\"nativeValue\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId()\"\n        [required]=\"required\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onInputChange($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n\n    <div class=\"kbq-radio-label-content\" [class.kbq-radio-label-before]=\"labelPosition === 'before'\">\n        <div class=\"kbq-radio-button__outer-circle\">\n            <div class=\"kbq-radio-button__inner-circle\"></div>\n        </div>\n\n        <div class=\"kbq-radio__text-container\">\n            <span class=\"kbq-radio__text\" [id]=\"labelId()\">\n                <ng-content />\n            </span>\n\n            <ng-content select=\"kbq-hint\" />\n        </div>\n    </div>\n</label>\n", styles: [".kbq-radio-group{display:inline-flex;flex-direction:column}.kbq-radio-group.kbq-radio-group_normal{gap:var(--kbq-radio-size-normal-vertical-gap)}.kbq-radio-group.kbq-radio-group_big{gap:var(--kbq-radio-size-big-vertical-gap)}.kbq-radio-group__subscript{display:flex;flex-direction:column;gap:var(--kbq-radio-size-normal-vertical-content-padding);margin-top:calc(var(--kbq-radio-size-normal-vertical-content-padding) - var(--kbq-radio-size-normal-vertical-gap));padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-group_label-before .kbq-radio-group__subscript{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-group_big .kbq-radio-group__subscript{margin-top:calc(var(--kbq-radio-size-big-vertical-content-padding) - var(--kbq-radio-size-big-vertical-gap));padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-group_big.kbq-radio-group_label-before .kbq-radio-group__subscript{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button{display:inline-block}.kbq-radio-label{position:relative;display:inline-flex;align-items:center;vertical-align:top;cursor:pointer;width:100%}.kbq-radio-label-content{display:inline-flex;position:relative;order:0;line-height:inherit;padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2);padding-right:0}.kbq-radio-label-content .kbq-radio-button__outer-circle,.kbq-radio-label-content .kbq-radio-button__inner-circle{box-sizing:content-box;position:absolute;display:flex;border-radius:50%}.kbq-radio-label-content .kbq-radio-button__outer-circle{border-style:solid;border-width:var(--kbq-radio-size-normal-outer-circle-border-width);left:0;top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-radio-size-normal-outer-size) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-normal-outer-size);height:var(--kbq-radio-size-normal-outer-size)}.kbq-radio-label-content .kbq-radio-button__inner-circle{position:relative;margin:auto;width:var(--kbq-radio-size-normal-inner-size);height:var(--kbq-radio-size-normal-inner-size)}.kbq-radio-label-content .kbq-radio__text-container{display:flex;flex-direction:column}.kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-normal-vertical-content-padding)}.kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-label-content.kbq-radio-label-before .kbq-radio-button__outer-circle{left:unset;right:0}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content{padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-big-outer-circle-border-width);top:calc((var(--kbq-typography-text-big-line-height) - var(--kbq-radio-size-big-outer-size) - var(--kbq-radio-size-big-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-big-outer-size);height:var(--kbq-radio-size-big-outer-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__inner-circle{width:var(--kbq-radio-size-big-inner-size);height:var(--kbq-radio-size-big-inner-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-big-vertical-content-padding)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-default-outer-circle-border);background:var(--kbq-radio-theme-default-outer-circle-background)}.kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-default-inner-circle-background)}.kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-hover-outer-circle-border);background:var(--kbq-radio-theme-states-hover-outer-circle-background)}.kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-hover-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-focused-outer-circle-border);background:var(--kbq-radio-theme-states-focused-outer-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-focused-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-outer-circle-border);background:var(--kbq-radio-theme-states-checked-outer-circle-background)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-focused-outer-circle-border);background:var(--kbq-radio-theme-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button{color:var(--kbq-foreground-contrast)}.kbq-radio-button.kbq-error .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-button.kbq-error .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-button.kbq-error .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error{color:var(--kbq-foreground-contrast)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-hint .kbq-hint__text,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-group.kbq-error .kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-error .kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-error .kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-label,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-group__subscript .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-button .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-button.kbq-radio-button_big{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-radio-button.kbq-radio-button_big .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-group_normal .kbq-radio-group__subscript .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-group_big .kbq-radio-group__subscript .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-radio-group{--kbq-radio-size-big-vertical-gap: var(--kbq-size-m);--kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);--kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-default-inner-circle-background: transparent;--kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);--kbq-radio-theme-states-hover-inner-circle-background: transparent;--kbq-radio-theme-states-checked-outer-circle-border: transparent;--kbq-radio-theme-states-checked-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-hover-outer-circle-border: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-outer-circle-background: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-theme-states-focused-outer-circle-border: transparent;--kbq-radio-theme-states-focused-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-states-focused-inner-circle-background: transparent;--kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;--kbq-radio-theme-states-checked-focused-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-focused-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-disabled-inner-circle-background: transparent;--kbq-radio-theme-states-disabled-caption: var(--kbq-states-foreground-disabled);--kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-default-inner-circle-background: transparent;--kbq-radio-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);--kbq-radio-error-states-hover-inner-circle-background: transparent;--kbq-radio-error-states-checked-outer-circle-border: transparent;--kbq-radio-error-states-checked-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-hover-outer-circle-border: transparent;--kbq-radio-error-states-checked-hover-outer-circle-background: var(--kbq-states-background-error-hover);--kbq-radio-error-states-checked-hover-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-error-states-focused-outer-circle-border: transparent;--kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-states-focused-inner-circle-background: transparent;--kbq-radio-error-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-checked-focused-outer-circle-border: transparent;--kbq-radio-error-states-checked-focused-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-focused-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-disabled-inner-circle-background: transparent;--kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled)}.kbq-radio-button,.kbq-radio-group__subscript{--kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-normal-outer-size: calc( var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2 );--kbq-radio-size-normal-inner-size: var(--kbq-size-xs);--kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);--kbq-radio-size-big-inner-size: var(--kbq-size-xs);--kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioButton, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-radio-button',
-                        '[attr.id]': 'id',
-                        '[class.kbq-radio-button_big]': 'radioGroup?.big()',
+                        '[attr.id]': 'id()',
+                        // The group's `big` through a signal of the button's own: the group's host bindings read `big`, and they run in
+                        // the same reactive consumer, where a signal read again after others costs a scan of all it has read so far.
+                        '[class.kbq-radio-button_big]': 'big()',
                         '[class.kbq-selected]': 'checked',
                         '[class.kbq-disabled]': 'disabled'
-                    }, exportAs: 'kbqRadioButton', template: "<label #label class=\"kbq-radio-label\" [attr.for]=\"inputId\">\n    <input\n        #input\n        type=\"radio\"\n        class=\"kbq-radio-input cdk-visually-hidden\"\n        [attr.name]=\"name\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        [required]=\"required\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onInputChange($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n\n    <div class=\"kbq-radio-label-content\" [class.kbq-radio-label-before]=\"labelPosition === 'before'\">\n        <div class=\"kbq-radio-button__outer-circle\">\n            <div class=\"kbq-radio-button__inner-circle\"></div>\n        </div>\n\n        <div class=\"kbq-radio__text-container\">\n            <span class=\"kbq-radio__text\">\n                <ng-content />\n            </span>\n\n            <ng-content select=\"kbq-hint\" />\n        </div>\n    </div>\n</label>\n", styles: [".kbq-radio-group{display:inline-flex;flex-direction:column}.kbq-radio-group.kbq-radio-group_normal{gap:var(--kbq-radio-size-normal-vertical-gap)}.kbq-radio-group.kbq-radio-group_big{gap:var(--kbq-radio-size-big-vertical-gap)}.kbq-radio-button{display:inline-flex}.kbq-radio-label{display:inline-flex;align-items:center;vertical-align:middle;cursor:pointer;width:100%}.kbq-radio-label-content{display:inline-flex;position:relative;order:0;line-height:inherit;padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2);padding-right:0}.kbq-radio-label-content .kbq-radio-button__outer-circle,.kbq-radio-label-content .kbq-radio-button__inner-circle{box-sizing:content-box;position:absolute;display:flex;content:\"\";border-style:solid;border-radius:50%}.kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-normal-outer-circle-border-width);left:0;top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-radio-size-normal-outer-size) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-normal-outer-size);height:var(--kbq-radio-size-normal-outer-size)}.kbq-radio-label-content .kbq-radio-button__inner-circle{position:relative;margin:auto;width:var(--kbq-radio-size-normal-inner-size);height:var(--kbq-radio-size-normal-inner-size)}.kbq-radio-label-content .kbq-radio__text-container{display:flex;flex-direction:column}.kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-normal-vertical-content-padding)}.kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-label-content.kbq-radio-label-before .kbq-radio-button__outer-circle{left:unset;right:0}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content{padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-big-outer-circle-border-width);top:calc((var(--kbq-typography-text-big-line-height) - var(--kbq-radio-size-big-outer-size) - var(--kbq-radio-size-big-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-big-outer-size);height:var(--kbq-radio-size-big-outer-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__inner-circle{width:var(--kbq-radio-size-big-inner-size);height:var(--kbq-radio-size-big-inner-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-big-vertical-content-padding)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button .kbq-radio-button__inner-circle{border-width:0!important}.kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-default-outer-circle-border);background:var(--kbq-radio-theme-default-outer-circle-background)}.kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-default-inner-circle-background)}.kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-hover-outer-circle-border);background:var(--kbq-radio-theme-states-hover-outer-circle-background)}.kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-hover-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-focused-outer-circle-border);background:var(--kbq-radio-theme-states-focused-outer-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-focused-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-outer-circle-border);background:var(--kbq-radio-theme-states-checked-outer-circle-background)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-focused-outer-circle-border);background:var(--kbq-radio-theme-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button{color:var(--kbq-foreground-contrast)}.kbq-radio-button.kbq-error .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-button.kbq-error .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-button.kbq-error .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error{color:var(--kbq-foreground-contrast)}.kbq-radio-button{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-button .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-button.kbq-radio-button_big{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-radio-button.kbq-radio-button_big .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-radio-group{--kbq-radio-size-big-vertical-gap: var(--kbq-size-m);--kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);--kbq-radio-size-big-top: var(--kbq-size-3xs);--kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-default-inner-circle-background: transparent;--kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);--kbq-radio-theme-states-hover-inner-circle-background: transparent;--kbq-radio-theme-states-checked-outer-circle-border: transparent;--kbq-radio-theme-states-checked-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-hover-outer-circle-border: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-outer-circle-background: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-theme-states-focused-outer-circle-border: transparent;--kbq-radio-theme-states-focused-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-states-focused-inner-circle-background: transparent;--kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;--kbq-radio-theme-states-checked-focused-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-focused-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-disabled-inner-circle-background: transparent;--kbq-radio-theme-states-disabled-caption: var(--kbq-states-foreground-disabled);--kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-default-inner-circle-background: transparent;--kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);--kbq-radio-error-states-hover-inner-circle-background: transparent;--kbq-radio-error-states-checked-outer-circle-border: transparent;--kbq-radio-error-states-checked-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-hover-outer-circle-border: transparent;--kbq-radio-error-states-checked-hover-outer-circle-background: var(--kbq-states-background-error-hover);--kbq-radio-error-states-checked-hover-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-error-states-focused-outer-circle-border: transparent;--kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-states-focused-inner-circle-background: transparent;--kbq-radio-error-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-checked-focused-outer-circle-border: transparent;--kbq-radio-error-states-checked-focused-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-focused-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-disabled-inner-circle-background: transparent;--kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled)}.kbq-radio-button{--kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-normal-outer-size: calc( var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2 );--kbq-radio-size-normal-inner-size: var(--kbq-size-xs);--kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-radio-size-normal-top: 0;--kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);--kbq-radio-size-big-inner-size: var(--kbq-size-xs);--kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], labelPosition: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], change: [{ type: i0.Output, args: ["change"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }], id: [{
-                type: Input
-            }] } });
+                    }, exportAs: 'kbqRadioButton', template: "<label #label class=\"kbq-radio-label\" [attr.for]=\"inputId()\">\n    <!--\n        The wrapping label would fold everything it contains \u2014 the projected hint included \u2014 into the\n        accessible name, so the name is overridden with an explicit `aria-labelledby` pointing at the\n        option text alone, and the hint arrives as a description instead.\n    -->\n    <input\n        #input\n        type=\"radio\"\n        class=\"kbq-radio-input cdk-visually-hidden\"\n        [attr.aria-describedby]=\"hint()?.id() ?? null\"\n        [attr.aria-labelledby]=\"labelId()\"\n        [attr.name]=\"name\"\n        [attr.value]=\"nativeValue\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId()\"\n        [required]=\"required\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onInputChange($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n\n    <div class=\"kbq-radio-label-content\" [class.kbq-radio-label-before]=\"labelPosition === 'before'\">\n        <div class=\"kbq-radio-button__outer-circle\">\n            <div class=\"kbq-radio-button__inner-circle\"></div>\n        </div>\n\n        <div class=\"kbq-radio__text-container\">\n            <span class=\"kbq-radio__text\" [id]=\"labelId()\">\n                <ng-content />\n            </span>\n\n            <ng-content select=\"kbq-hint\" />\n        </div>\n    </div>\n</label>\n", styles: [".kbq-radio-group{display:inline-flex;flex-direction:column}.kbq-radio-group.kbq-radio-group_normal{gap:var(--kbq-radio-size-normal-vertical-gap)}.kbq-radio-group.kbq-radio-group_big{gap:var(--kbq-radio-size-big-vertical-gap)}.kbq-radio-group__subscript{display:flex;flex-direction:column;gap:var(--kbq-radio-size-normal-vertical-content-padding);margin-top:calc(var(--kbq-radio-size-normal-vertical-content-padding) - var(--kbq-radio-size-normal-vertical-gap));padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-group_label-before .kbq-radio-group__subscript{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-group_big .kbq-radio-group__subscript{margin-top:calc(var(--kbq-radio-size-big-vertical-content-padding) - var(--kbq-radio-size-big-vertical-gap));padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-group_big.kbq-radio-group_label-before .kbq-radio-group__subscript{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button{display:inline-block}.kbq-radio-label{position:relative;display:inline-flex;align-items:center;vertical-align:top;cursor:pointer;width:100%}.kbq-radio-label-content{display:inline-flex;position:relative;order:0;line-height:inherit;padding-left:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2);padding-right:0}.kbq-radio-label-content .kbq-radio-button__outer-circle,.kbq-radio-label-content .kbq-radio-button__inner-circle{box-sizing:content-box;position:absolute;display:flex;border-radius:50%}.kbq-radio-label-content .kbq-radio-button__outer-circle{border-style:solid;border-width:var(--kbq-radio-size-normal-outer-circle-border-width);left:0;top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-radio-size-normal-outer-size) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-normal-outer-size);height:var(--kbq-radio-size-normal-outer-size)}.kbq-radio-label-content .kbq-radio-button__inner-circle{position:relative;margin:auto;width:var(--kbq-radio-size-normal-inner-size);height:var(--kbq-radio-size-normal-inner-size)}.kbq-radio-label-content .kbq-radio__text-container{display:flex;flex-direction:column}.kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-normal-vertical-content-padding)}.kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-normal-outer-size) + var(--kbq-radio-size-normal-horizontal-content-padding) + var(--kbq-radio-size-normal-outer-circle-border-width) * 2)}.kbq-radio-label-content.kbq-radio-label-before .kbq-radio-button__outer-circle{left:unset;right:0}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content{padding-left:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__outer-circle{border-width:var(--kbq-radio-size-big-outer-circle-border-width);top:calc((var(--kbq-typography-text-big-line-height) - var(--kbq-radio-size-big-outer-size) - var(--kbq-radio-size-big-outer-circle-border-width) * 2) / 2);width:var(--kbq-radio-size-big-outer-size);height:var(--kbq-radio-size-big-outer-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-radio-button__inner-circle{width:var(--kbq-radio-size-big-inner-size);height:var(--kbq-radio-size-big-inner-size)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content .kbq-hint{margin-top:var(--kbq-radio-size-big-vertical-content-padding)}.kbq-radio-button.kbq-radio-button_big .kbq-radio-label-content.kbq-radio-label-before{padding-left:0;padding-right:calc(var(--kbq-radio-size-big-outer-size) + var(--kbq-radio-size-big-horizontal-content-padding) + var(--kbq-radio-size-big-outer-circle-border-width) * 2)}.kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-default-outer-circle-border);background:var(--kbq-radio-theme-default-outer-circle-background)}.kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-default-inner-circle-background)}.kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-hover-outer-circle-border);background:var(--kbq-radio-theme-states-hover-outer-circle-background)}.kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-hover-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-focused-outer-circle-border);background:var(--kbq-radio-theme-states-focused-outer-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-focused-inner-circle-background)}.kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-outer-circle-border);background:var(--kbq-radio-theme-states-checked-outer-circle-background)}.kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-focused-outer-circle-border);background:var(--kbq-radio-theme-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-theme-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-theme-states-disabled-outer-circle-border);background:var(--kbq-radio-theme-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-theme-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-theme-states-disabled-caption)}.kbq-radio-button{color:var(--kbq-foreground-contrast)}.kbq-radio-button.kbq-error .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-button.kbq-error .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-button.kbq-error .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__outer-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-button.kbq-error:hover .kbq-radio-button__inner-circle,.kbq-radio-button.kbq-error.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-button.kbq-error.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-button.kbq-error{color:var(--kbq-foreground-contrast)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-default-outer-circle-border);background:var(--kbq-radio-error-default-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-default-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button .kbq-hint .kbq-hint__text,.kbq-radio-group.kbq-invalid .kbq-radio-button .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-default-caption)}.kbq-radio-group.kbq-error .kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-error .kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button:hover .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-hovered .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-hover-outer-circle-border);background:var(--kbq-radio-error-states-hover-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-error .kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button:hover .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-hovered .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-hover-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-focused-outer-circle-border);background:var(--kbq-radio-error-states-focused-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-focused-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.cdk-keyboard-focused .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-focused-outer-circle-shadow)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-outer-circle-border);background:var(--kbq-radio-error-states-checked-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-focused-outer-circle-border);background:var(--kbq-radio-error-states-checked-focused-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-focused-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.cdk-keyboard-focused:not(.kbq-disabled) .kbq-radio-button__outer-circle{box-shadow:var(--kbq-radio-error-states-checked-focused-outer-circle-shadow)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-checked-disabled-outer-circle-border);background:var(--kbq-radio-error-states-checked-disabled-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-selected.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-checked-disabled-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-button__outer-circle{border-color:var(--kbq-radio-error-states-disabled-outer-circle-border);background:var(--kbq-radio-error-states-disabled-outer-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-button__inner-circle{background:var(--kbq-radio-error-states-disabled-inner-circle-background)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-radio-label,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-radio-label{cursor:default;color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-group.kbq-error .kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text,.kbq-radio-group.kbq-invalid .kbq-radio-button.kbq-disabled .kbq-hint .kbq-hint__text{color:var(--kbq-radio-error-states-disabled-caption)}.kbq-radio-group__subscript .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text{color:var(--kbq-radio-theme-default-caption)}.kbq-radio-button{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-button .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-button.kbq-radio-button_big{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-radio-button.kbq-radio-button_big .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-radio-group_normal .kbq-radio-group__subscript .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-radio-group_big .kbq-radio-group__subscript .kbq-hint__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-radio-group{--kbq-radio-size-big-vertical-gap: var(--kbq-size-m);--kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);--kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-default-inner-circle-background: transparent;--kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);--kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);--kbq-radio-theme-states-hover-inner-circle-background: transparent;--kbq-radio-theme-states-checked-outer-circle-border: transparent;--kbq-radio-theme-states-checked-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-hover-outer-circle-border: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-outer-circle-background: var(--kbq-states-background-theme-hover);--kbq-radio-theme-states-checked-hover-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-theme-states-focused-outer-circle-border: transparent;--kbq-radio-theme-states-focused-outer-circle-background: var(--kbq-background-bg);--kbq-radio-theme-states-focused-inner-circle-background: transparent;--kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;--kbq-radio-theme-states-checked-focused-outer-circle-background: var(--kbq-background-theme);--kbq-radio-theme-states-checked-focused-inner-circle-background: var(--kbq-foreground-white);--kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-theme);--kbq-radio-theme-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-theme-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-theme-states-disabled-inner-circle-background: transparent;--kbq-radio-theme-states-disabled-caption: var(--kbq-states-foreground-disabled);--kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-default-inner-circle-background: transparent;--kbq-radio-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);--kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);--kbq-radio-error-states-hover-inner-circle-background: transparent;--kbq-radio-error-states-checked-outer-circle-border: transparent;--kbq-radio-error-states-checked-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-hover-outer-circle-border: transparent;--kbq-radio-error-states-checked-hover-outer-circle-background: var(--kbq-states-background-error-hover);--kbq-radio-error-states-checked-hover-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-checked-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-checked-disabled-inner-circle-background: var(--kbq-states-icon-disabled);--kbq-radio-error-states-focused-outer-circle-border: transparent;--kbq-radio-error-states-focused-outer-circle-background: var(--kbq-background-error-less);--kbq-radio-error-states-focused-inner-circle-background: transparent;--kbq-radio-error-states-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-checked-focused-outer-circle-border: transparent;--kbq-radio-error-states-checked-focused-outer-circle-background: var(--kbq-background-error);--kbq-radio-error-states-checked-focused-inner-circle-background: var(--kbq-icon-white);--kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 .1px 2px var(--kbq-states-line-focus-error);--kbq-radio-error-states-disabled-outer-circle-border: var(--kbq-states-line-disabled);--kbq-radio-error-states-disabled-outer-circle-background: var(--kbq-states-background-disabled);--kbq-radio-error-states-disabled-inner-circle-background: transparent;--kbq-radio-error-states-disabled-caption: var(--kbq-states-foreground-disabled)}.kbq-radio-button,.kbq-radio-group__subscript{--kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-normal-outer-size: calc( var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2 );--kbq-radio-size-normal-inner-size: var(--kbq-size-xs);--kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);--kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);--kbq-radio-size-big-inner-size: var(--kbq-size-xs);--kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], change: [{ type: i0.Output, args: ["change"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hint: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqHint), { isSignal: true }] }], 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 }] }], tabIndexInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], labelPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 class KbqRadioModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioModule, imports: [A11yModule, KbqRadioGroup, KbqRadioButton], exports: [KbqRadioGroup, KbqRadioButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioModule, imports: [A11yModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioModule, imports: [A11yModule, KbqRadioGroup, KbqRadioButton], exports: [KbqRadioGroup, KbqRadioButton] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioModule, imports: [A11yModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [A11yModule, KbqRadioGroup, KbqRadioButton],