@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-radio-group.mjs

@@ -0,0 +1,469 @@
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, output, computed, HostAttributeToken, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, viewChild, contentChild, DestroyRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { SlField, SlFieldDefaultsSource, injectFieldDefaults } from '@slotted/angular/field';
+import { SlFieldGroup } from '@slotted/angular/field-group';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+const FALLBACK = {
+    labelPlacement: 'end',
+    orientation: 'vertical',
+    size: 'md',
+    variant: 'plain',
+};
+const RADIO_GROUP_DEFAULTS = new InjectionToken('slotted radio group defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its sets of choices flow, rather than
+ * repeating the same inputs on every group in a form. A group that states any
+ * of them itself still wins, and a field around it outranks this token for
+ * `size`.
+ */
+function provideRadioGroupDefaults(defaults) {
+    return {
+        provide: RADIO_GROUP_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a radio group renders as here, before it states anything of its own. */
+function injectRadioGroupDefaults() {
+    return inject(RADIO_GROUP_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ *
+ * It answers for the group's generated `name` as well as for each item's
+ * identifier, because both have to be stable across the two renders.
+ */
+class SlRadioGroupIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-radio-group-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioGroupIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioGroupIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioGroupIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * One choice out of a set.
+ *
+ * **The keyboard is the platform's, and that is why the items share a `name`.**
+ * Native radios in one form owner with one name already implement the APG's
+ * whole table: Tab lands on the checked item or on the first, `Space` checks,
+ * both arrow axes move focus and selection together, the set wraps, and
+ * disabled items are skipped — in a right-to-left document too. A roving
+ * `tabindex` written once per binding would reimplement all of it twice.
+ *
+ * **The role is conditional, and the condition is the field group.** A
+ * `field-group` is a `fieldset` with a `legend`, which is already a named group;
+ * a `radiogroup` inside it, named by the same legend, is the same set announced
+ * twice. A `role` the consumer wrote wins over both.
+ *
+ * **`readOnly` is enforced, because the platform has none.** A radio ignores
+ * `readonly`, so the group refuses the change on the item's own `click` — the
+ * one event a pointer and `Space` share — and announces `aria-readonly`.
+ */
+class SlRadioGroup {
+    /** Present means the consumer owns the choice. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value an uncontrolled group starts from, read once. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The submission name the set shares, and the reason the platform treats it
+     * as one group. Generated when it is not written, because grouping is by name
+     * within the form owner and an unnamed set is not a set.
+     */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    labelPlacement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPlacement" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the group defers to the field around it. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    required = input(undefined, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * One output for one transition. Its `previous` is `undefined` while nothing
+     * has been chosen, which is the state the APG asks a group to start in and
+     * which a request typed over `string` alone could not say.
+     */
+    valueChange = output();
+    field = inject(SlField, { optional: true });
+    fieldGroup = inject(SlFieldGroup, { optional: true });
+    defaults = injectRadioGroupDefaults();
+    /**
+     * The field defaults in force: a field group's, or the application's own.
+     * A group outside a field reads disabled and read-only from them, as React's
+     * reads them from FieldDefaultsProvider.
+     */
+    fieldDefaultsSource = inject(SlFieldDefaultsSource, { optional: true });
+    fieldDefaultsToken = injectFieldDefaults();
+    fieldDefaults = computed(() => this.fieldDefaultsSource?.fieldDefaults() ?? this.fieldDefaultsToken, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldDefaults" }] : /* istanbul ignore next */ []));
+    generatedName = inject(SlRadioGroupIdFactory).next();
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    items = new Set();
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    selection = computed(() => this.value() ?? this.own(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    resolvedName = computed(() => this.name() ?? this.generatedName, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ??
+        this.field?.resolvedSize() ??
+        this.fieldGroup?.resolvedSize() ??
+        this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedOrientation = computed(() => this.orientation() ?? this.defaults.orientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : /* istanbul ignore next */ []));
+    resolvedLabelPlacement = computed(() => this.labelPlacement() ?? this.defaults.labelPlacement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabelPlacement" }] : /* istanbul ignore next */ []));
+    /** Handed to every choice in the set: one plain box among four tiles is a
+        set nobody meant to write. */
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ??
+        this.formDisabled() ??
+        this.field?.resolvedDisabled() ??
+        this.fieldDefaults().disabled, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.field?.resolvedReadOnly() ?? this.fieldDefaults().readOnly, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => this.invalid() ?? this.field?.invalid() ?? this.fieldGroup?.invalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    resolvedRequired = computed(() => this.required() ?? this.field?.required() ?? this.fieldGroup?.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRequired" }] : /* istanbul ignore next */ []));
+    resolvedRole = computed(() => this.writtenRole ?? (this.fieldGroup === null ? 'radiogroup' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRole" }] : /* istanbul ignore next */ []));
+    /* A group has no element a label's for can reach, so inside a field the
+       field's label names it, unless the consumer named it themselves. */
+    labelledBy = computed(() => this.writtenLabelledBy ??
+        (this.writtenLabel === null ? (this.field?.ids().label ?? null) : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const merged = [this.writtenDescribedBy, this.field?.describedBy()].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => this.resolvedInvalid() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    ariaReadOnly = computed(() => this.resolvedReadOnly() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaReadOnly" }] : /* istanbul ignore next */ []));
+    ariaRequired = computed(() => this.resolvedRequired() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
+    /**
+     * Only where the root owns the role, and only when the group flows the other
+     * way: on an element with no role the attribute describes nothing, and
+     * `radiogroup` already implies `vertical`.
+     */
+    ariaOrientation = computed(() => this.resolvedRole() === 'radiogroup' && this.resolvedOrientation() === 'horizontal'
+        ? 'horizontal'
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        if (this.value() === undefined)
+            this.own.set(this.defaultValue());
+    }
+    /** An item joins the set, so the group can put every element back at once. */
+    register(item) {
+        this.items.add(item);
+    }
+    /** An item leaves the set. */
+    unregister(item) {
+        this.items.delete(item);
+    }
+    /**
+     * Writes every item's element from the value.
+     *
+     * The HTML standard's canceled activation behaviour for a radio restores the
+     * *clicked* element and nothing else, so the option that was chosen before
+     * the refused click stays unchecked: checking one radio unchecks its
+     * neighbours, and undoing the first half of that is all the platform offers.
+     * Angular writes a property binding only when its value changes, and the
+     * neighbour's did not, so the correction is made here — measured, in the
+     * first run of this family's Angular spec, as a controlled group that lost
+     * its choice after its consumer had said no.
+     */
+    restoreElements() {
+        for (const item of this.items)
+            item.syncElement();
+    }
+    /** Whether one value is the chosen one. Read by every item in the set. */
+    holds(value) {
+        return this.selection() === value;
+    }
+    /**
+     * Asks the group to move to one value. Returns whether the value actually
+     * moved — false while a consumer owns it, which is what tells the item to
+     * refuse the activation and let the platform put the element back.
+     */
+    select(value, reason, source) {
+        if (this.resolvedReadOnly() === true)
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.selection(),
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(value, reason, source);
+        if (cancelled || !moved)
+            return false;
+        this.own.set(value);
+        this.onChangeFn(value);
+        return true;
+    }
+    writeValue(value) {
+        this.own.set(value ?? undefined);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /** Marks the set touched, which an item calls when it loses focus. */
+    markTouched() {
+        this.onTouchedFn();
+    }
+    /**
+     * The group owns validity over the set, which no single item can see:
+     * "choose one" is a fact about the group and not about any one option.
+     */
+    validate(control) {
+        if (this.resolvedRequired() !== true)
+            return null;
+        const value = control.value;
+        return value === null || value === undefined || value === '' ? { required: true } : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlRadioGroup, isStandalone: true, selector: "[slRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-ui": "radio-group", "data-part": "root" }, properties: { "attr.role": "resolvedRole()", "attr.data-size": "resolvedSize()", "attr.data-orientation": "resolvedOrientation()", "attr.data-label-placement": "resolvedLabelPlacement()", "attr.data-variant": "resolvedVariant()", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.aria-labelledby": "labelledBy()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-readonly": "ariaReadOnly()", "attr.aria-required": "ariaRequired()", "attr.aria-orientation": "ariaOrientation()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlRadioGroup), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlRadioGroup), multi: true },
+        ], exportAs: ["slRadioGroup"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=radio-group][data-part=root]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_label-gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-radio-group-line-height, var(--slotted-line-height-md, 1.5));--_halo-spread: calc(var(--_label-gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);color:var(--slotted-radio-group-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-radio-group-gap, var(--_gap));line-height:var(--_line-height)}[data-ui=radio-group][data-part=root]:has([data-part=description]){row-gap:var(--slotted-radio-group-gap, calc(var(--_gap) * 2))}[data-ui=radio-group][data-part=root][data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;column-gap:calc(var(--_gap) * 2)}[data-ui=radio-group][data-part=root][data-size=sm]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-gap-sm, 6px);--_label-gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=radio-group][data-part=root][data-size=md]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_label-gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=radio-group][data-part=root][data-size=lg]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-gap-lg, 8px);--_label-gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=radio-group] [data-part=item]{align-content:start;display:grid;grid-template-columns:auto minmax(0,1fr);isolation:isolate;position:relative}[data-ui=radio-group][data-part=root]{--_direction: ltr}[data-ui=radio-group][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=radio-group] [data-part=control]{appearance:none;background-color:var(--slotted-radio-group-background, var(--slotted-surface, Canvas));border:var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-radio-group-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-radius-full, 9999px);block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group] [data-part=indicator]{--slotted-icon-size: var(--_size);block-size:var(--_size);color:var(--slotted-radio-group-mark-color, var(--slotted-tone-accent-solid));display:flex;grid-area:1 / 1;inline-size:var(--_size);margin-block-start:var(--_lift);opacity:0;pointer-events:none;scale:.6;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing),scale var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=radio-group] [data-part=control]:checked+[data-part=indicator]{opacity:1;scale:1}[data-ui=radio-group] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=radio-group] [data-part=item]:has(>[data-part=label]){column-gap:var(--_label-gap)}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_label-gap));position:absolute;z-index:-1}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-radio-group-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--_size) / 2 + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:empty:after{inset-inline-end:calc(var(--_label-gap) - var(--_halo-spread))}[data-ui=radio-group] [data-part=description]{color:var(--slotted-radio-group-description-color, var(--slotted-text-muted, GrayText));font-size:var( --slotted-radio-group-description-font-size, var(--slotted-font-size-xs, .75rem) );grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=item]{grid-template-columns:minmax(0,1fr) auto}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=control],[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label],[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_label-gap)));inset-inline-start:auto}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-radio-group-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-radio-group-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=radio-group] [data-part=control]:checked{border-color:var(--slotted-radio-group-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled){border-color:var( --slotted-radio-group-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled){border-color:var( --slotted-radio-group-checked-active-border-color, var(--slotted-tone-accent-solid-active) )}[data-ui=radio-group] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=radio-group][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-radio-group-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-radio-group-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ));border-color:var( --slotted-radio-group-invalid-border-color, var(--slotted-tone-danger-border) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked{border-color:var( --slotted-radio-group-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator]{color:var(--slotted-radio-group-invalid-mark-color, var(--slotted-tone-danger-solid))}[data-ui=radio-group][data-part=root][data-readonly] [data-part=control],[data-ui=radio-group][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=radio-group][data-part=root][data-readonly] [data-part=control]:not(:checked){background-color:var( --slotted-radio-group-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=radio-group][data-part=root][data-disabled] [data-part=control],[data-ui=radio-group] [data-part=control]:disabled{background-color:var( --slotted-radio-group-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-radio-group-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=radio-group] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-radio-group-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=radio-group][data-part=root][data-disabled] [data-part=label],[data-ui=radio-group][data-part=root][data-disabled] [data-part=description],[data-ui=radio-group] [data-part=control]:disabled~[data-part=label],[data-ui=radio-group] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-radio-group-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]{--_description-gap: var( --slotted-radio-group-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-radio-group-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-radio-group-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-radio-group-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:not(:disabled)):not(:has([data-part=control]:checked)):hover{--_tile-surface: var( --slotted-radio-group-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-radio-group-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:not(:disabled)):not(:has([data-part=control]:checked)):active{--_tile-surface: var( --slotted-radio-group-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]) [data-part=item]:has([data-part=control]:checked){--_tile-edge: var( --slotted-radio-group-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]) [data-part=item]:has([data-part=control]:checked){--_tile-surface: var( --slotted-radio-group-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:checked:not(:disabled)):hover{--_tile-edge: var( --slotted-radio-group-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]{--_tile-edge: var( --slotted-radio-group-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-radio-group-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]:has([data-part=control]:checked){--_tile-surface: var( --slotted-radio-group-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-radio-group-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-readonly] [data-part=item]{--_tile-surface: var( --slotted-radio-group-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var( --slotted-radio-group-tile-readonly-border-color, var(--slotted-border-strong) );cursor:default}[data-ui=radio-group][data-part=root][data-variant=tile][data-disabled] [data-part=item],[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-radio-group-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-radio-group-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=radio-group] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=radio-group] [data-part=control]:checked{background-color:Field;border-color:Highlight}[data-ui=radio-group] [data-part=control]:checked+[data-part=indicator]{color:Highlight}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked{background-color:Field;border-color:CanvasText}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator]{color:Highlight}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item],[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]:has([data-part=control]:checked){--_tile-edge: CanvasText}[data-ui=radio-group] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=radio-group] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: '[slRadioGroup]', standalone: true, exportAs: 'slRadioGroup', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlRadioGroup), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlRadioGroup), multi: true },
+                    ], host: {
+                        'data-ui': 'radio-group',
+                        'data-part': 'root',
+                        '[attr.role]': 'resolvedRole()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-orientation]': 'resolvedOrientation()',
+                        '[attr.data-label-placement]': 'resolvedLabelPlacement()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-invalid]': 'ariaInvalid()',
+                        '[attr.aria-readonly]': 'ariaReadOnly()',
+                        '[attr.aria-required]': 'ariaRequired()',
+                        '[attr.aria-orientation]': 'ariaOrientation()',
+                    }, styles: ["@layer slotted.components{[data-ui=radio-group][data-part=root]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_label-gap: var(--slotted-control-label-gap-md, 12px);--_line-height: var(--slotted-radio-group-line-height, var(--slotted-line-height-md, 1.5));--_halo-spread: calc(var(--_label-gap) / 2);--_target: var(--slotted-target-min, 24px);--_lift: calc((var(--_font-size) * var(--_line-height) - var(--_size)) / 2);--_description-gap: var(--slotted-space-3, .375rem);color:var(--slotted-radio-group-color, var(--slotted-text, CanvasText));display:flex;flex-direction:column;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--slotted-radio-group-gap, var(--_gap));line-height:var(--_line-height)}[data-ui=radio-group][data-part=root]:has([data-part=description]){row-gap:var(--slotted-radio-group-gap, calc(var(--_gap) * 2))}[data-ui=radio-group][data-part=root][data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;column-gap:calc(var(--_gap) * 2)}[data-ui=radio-group][data-part=root][data-size=sm]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-sm, 14px));--_font-size: var(--slotted-control-font-size-sm, 12px);--_gap: var(--slotted-control-gap-sm, 6px);--_label-gap: var(--slotted-control-label-gap-sm, 8px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-sm, 10px) )}[data-ui=radio-group][data-part=root][data-size=md]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));--_font-size: var(--slotted-control-font-size-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_label-gap: var(--slotted-control-label-gap-md, 12px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-md, 13px) )}[data-ui=radio-group][data-part=root][data-size=lg]{--_size: var(--slotted-radio-group-size, var(--slotted-selection-size-lg, 18px));--_font-size: var(--slotted-control-font-size-lg, 14px);--_gap: var(--slotted-control-gap-lg, 8px);--_label-gap: var(--slotted-control-label-gap-lg, 12px);--_tile-inset: var( --slotted-radio-group-tile-inset, var(--slotted-control-padding-inline-lg, 16px) )}[data-ui=radio-group] [data-part=item]{align-content:start;display:grid;grid-template-columns:auto minmax(0,1fr);isolation:isolate;position:relative}[data-ui=radio-group][data-part=root]{--_direction: ltr}[data-ui=radio-group][data-part=root]:dir(rtl){--_direction: rtl}[data-ui=radio-group] [data-part=control]{appearance:none;background-color:var(--slotted-radio-group-background, var(--slotted-surface, Canvas));border:var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) solid var(--slotted-radio-group-border-color, var(--slotted-border-strong, ButtonBorder));border-radius:var(--slotted-radius-full, 9999px);block-size:var(--_size);box-sizing:border-box;cursor:pointer;grid-area:1 / 1;inline-size:var(--_size);margin:0;margin-block-start:var(--_lift);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group] [data-part=indicator]{--slotted-icon-size: var(--_size);block-size:var(--_size);color:var(--slotted-radio-group-mark-color, var(--slotted-tone-accent-solid));display:flex;grid-area:1 / 1;inline-size:var(--_size);margin-block-start:var(--_lift);opacity:0;pointer-events:none;scale:.6;transition:opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing),scale var(--slotted-duration-medium) var(--slotted-control-transition-easing)}[data-ui=radio-group] [data-part=control]:checked+[data-part=indicator]{opacity:1;scale:1}[data-ui=radio-group] [data-part=label]{cursor:pointer;grid-column:2;grid-row:1;overflow-wrap:anywhere}[data-ui=radio-group] [data-part=item]:has(>[data-part=label]){column-gap:var(--_label-gap)}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]{justify-self:start;position:relative}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:before{block-size:var(--_target);content:\"\";direction:var(--_direction);inline-size:var(--_target);inset-block-start:calc(var(--_lift) + var(--_size) - var(--_target));inset-inline-start:calc((var(--_size) - var(--_target)) / 2 - var(--_size) - var(--_label-gap));position:absolute;z-index:-1}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:after{background-color:var(--slotted-radio-group-halo-color, var(--slotted-tone-accent-text));border-radius:calc(var(--_size) / 2 + var(--_halo-spread));content:\"\";direction:var(--_direction);inset-block:calc(var(--_lift) - var(--_halo-spread));inset-inline-end:calc(-1.5 * var(--_halo-spread));inset-inline-start:calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);z-index:-1}[data-ui=radio-group][data-part=root]:not([data-variant=tile]) [data-part=label]:empty:after{inset-inline-end:calc(var(--_label-gap) - var(--_halo-spread))}[data-ui=radio-group] [data-part=description]{color:var(--slotted-radio-group-description-color, var(--slotted-text-muted, GrayText));font-size:var( --slotted-radio-group-description-font-size, var(--slotted-font-size-xs, .75rem) );grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin:0;overflow-wrap:anywhere;padding-block-start:var(--_description-gap)}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=item]{grid-template-columns:minmax(0,1fr) auto}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=control],[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=indicator]{grid-area:1 / 2}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label],[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=description]{grid-column:1}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]{justify-self:stretch}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]:before{inset-inline-end:calc(-1 * (var(--_size) + var(--_label-gap)));inset-inline-start:auto}[data-ui=radio-group][data-part=root][data-label-placement=start] [data-part=label]:after{inset-inline-end:calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));inset-inline-start:calc(-1.5 * var(--_halo-spread))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled){border-color:var(--slotted-radio-group-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:hover:not(:disabled)~[data-part=label]:after,[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:not(:disabled)~[data-part=label]:hover:after{opacity:var(--slotted-selection-halo-opacity, .12)}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:active:not(:disabled){background-color:var( --slotted-radio-group-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=radio-group] [data-part=control]:checked{border-color:var(--slotted-radio-group-checked-border-color, var(--slotted-tone-accent-solid))}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:checked:hover:not(:disabled){border-color:var( --slotted-radio-group-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=radio-group][data-part=root]:not([data-readonly]) [data-part=control]:checked:active:not(:disabled){border-color:var( --slotted-radio-group-checked-active-border-color, var(--slotted-tone-accent-solid-active) )}[data-ui=radio-group] [data-part=control]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=radio-group][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-radio-group-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]{border-width:calc(var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) + var( --slotted-radio-group-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) ));border-color:var( --slotted-radio-group-invalid-border-color, var(--slotted-tone-danger-border) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked{border-color:var( --slotted-radio-group-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator]{color:var(--slotted-radio-group-invalid-mark-color, var(--slotted-tone-danger-solid))}[data-ui=radio-group][data-part=root][data-readonly] [data-part=control],[data-ui=radio-group][data-part=root][data-readonly] [data-part=label]{cursor:default}[data-ui=radio-group][data-part=root][data-readonly] [data-part=control]:not(:checked){background-color:var( --slotted-radio-group-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=radio-group][data-part=root][data-disabled] [data-part=control],[data-ui=radio-group] [data-part=control]:disabled{background-color:var( --slotted-radio-group-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-radio-group-disabled-border-color, var(--slotted-disabled-border));cursor:not-allowed}[data-ui=radio-group] [data-part=control]:disabled+[data-part=indicator]{color:var(--slotted-radio-group-disabled-mark-color, var(--slotted-disabled-foreground))}[data-ui=radio-group][data-part=root][data-disabled] [data-part=label],[data-ui=radio-group][data-part=root][data-disabled] [data-part=description],[data-ui=radio-group] [data-part=control]:disabled~[data-part=label],[data-ui=radio-group] [data-part=control]:disabled~[data-part=description]{color:var(--slotted-radio-group-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]{--_description-gap: var( --slotted-radio-group-tile-description-gap, var(--slotted-space-2, .25rem) );--_tile-surface: var(--slotted-radio-group-tile-background, var(--slotted-surface, Canvas));--_tile-edge: var( --slotted-radio-group-tile-border-color, var(--slotted-control-border-color, ButtonBorder) );--_tile-edge-width: var(--slotted-control-border-width, 1px);background-color:var(--_tile-surface);border-radius:var(--slotted-radio-group-tile-radius, var(--slotted-radius-md, 6px));box-shadow:var(--slotted-control-shadow, none);cursor:pointer;padding:var(--_tile-inset);position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:before{border:calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute;transition:border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item] [data-part=label]:after{content:\"\";inset:0;position:absolute}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:not(:disabled)):not(:has([data-part=control]:checked)):hover{--_tile-surface: var( --slotted-radio-group-tile-hover-background, var(--slotted-tone-accent-subtle-hover) );--_tile-edge: var( --slotted-radio-group-tile-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:not(:disabled)):not(:has([data-part=control]:checked)):active{--_tile-surface: var( --slotted-radio-group-tile-active-background, var(--slotted-tone-accent-subtle-active) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]) [data-part=item]:has([data-part=control]:checked){--_tile-edge: var( --slotted-radio-group-tile-checked-border-color, var(--slotted-tone-accent-solid) );--_tile-edge-width: var(--slotted-border-width-thick, 2px)}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]) [data-part=item]:has([data-part=control]:checked){--_tile-surface: var( --slotted-radio-group-tile-checked-background, var(--slotted-tone-accent-surface) )}[data-ui=radio-group][data-part=root][data-variant=tile]:not([data-readonly]):not([data-disabled]) [data-part=item]:has([data-part=control]:checked:not(:disabled)):hover{--_tile-edge: var( --slotted-radio-group-tile-checked-hover-border-color, var(--slotted-tone-accent-solid-hover) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]{--_tile-edge: var( --slotted-radio-group-tile-invalid-border-color, var(--slotted-tone-danger-border) );--_tile-invalid-edge: var( --slotted-radio-group-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]:has([data-part=control]:checked){--_tile-surface: var( --slotted-radio-group-tile-invalid-checked-background, var(--slotted-tone-danger-surface) );--_tile-edge: var( --slotted-radio-group-tile-invalid-checked-border-color, var(--slotted-tone-danger-solid) )}[data-ui=radio-group][data-part=root][data-variant=tile][data-readonly] [data-part=item]{--_tile-surface: var( --slotted-radio-group-tile-readonly-background, var(--slotted-tone-secondary-subtle-hover) );--_tile-edge: var( --slotted-radio-group-tile-readonly-border-color, var(--slotted-border-strong) );cursor:default}[data-ui=radio-group][data-part=root][data-variant=tile][data-disabled] [data-part=item],[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:has([data-part=control]:disabled){--_tile-surface: var( --slotted-radio-group-tile-disabled-background, var(--slotted-disabled-background) );--_tile-edge: var( --slotted-radio-group-tile-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;cursor:not-allowed}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=item]:has([data-part=control]:focus-visible){outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=radio-group][data-part=root][data-variant=tile] [data-part=control]:focus-visible{outline:none}@media(forced-colors:active){[data-ui=radio-group] [data-part=control]{background-color:Field;border-color:FieldText}[data-ui=radio-group] [data-part=control]:checked{background-color:Field;border-color:Highlight}[data-ui=radio-group] [data-part=control]:checked+[data-part=indicator]{color:Highlight}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked{background-color:Field;border-color:CanvasText}[data-ui=radio-group][data-part=root][data-invalid] [data-part=control]:checked+[data-part=indicator]{color:Highlight}[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item],[data-ui=radio-group][data-part=root][data-variant=tile][data-invalid] [data-part=item]:has([data-part=control]:checked){--_tile-edge: CanvasText}[data-ui=radio-group] [data-part=control]:disabled{background-color:Field;border-color:GrayText}[data-ui=radio-group] [data-part=control]:disabled+[data-part=indicator]{color:GrayText}}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labelPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlacement", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Help text under one item's label.
+ *
+ * It is a directive on the consumer's own element, so a `p`, a `span` or an
+ * `inline-message` all work and none of them loses its own semantics. It
+ * describes that item and not the set — what the set says belongs to the field
+ * group above it.
+ */
+class SlRadioDescription {
+    id = `${inject(SlRadioGroupIdFactory).next()}-description`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlRadioDescription, isStandalone: true, selector: "[slRadioDescription]", host: { attributes: { "data-part": "description" }, properties: { "attr.id": "id" } }, exportAs: ["slRadioDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadioDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slRadioDescription]',
+                    standalone: true,
+                    exportAs: 'slRadioDescription',
+                    host: {
+                        'data-part': 'description',
+                        '[attr.id]': 'id',
+                    },
+                }]
+        }] });
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports the
+ * click count. It is why `Space` and a pointer are told apart without a key
+ * listener existing anywhere in the family.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * One item of the set.
+ *
+ * It is a part of `radio-group` and not an entry point of its own: outside a
+ * group it has no exclusive set to belong to, and the platform's whole keyboard
+ * model is defined over the set. `SlRadioGroup` is injected without `optional`,
+ * so an item written outside one fails at construction rather than silently.
+ *
+ * The mark is a sibling of the control for the reason `checkbox` records —
+ * Firefox renders no pseudo-element on an `input` — and the label names the
+ * control through `for` so the description below it can be read without
+ * choosing anything.
+ */
+class SlRadio {
+    /** What this item selects. It is what the group's value holds. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Unstated rather than `false`, so the item defers to the group. */
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * The group the item belongs to. Injected without `optional`, and public
+     * because the template reads the shared name from it and a consumer reaching
+     * the item through `exportAs` may want the group's resolved step.
+     */
+    group = inject(SlRadioGroup);
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    element = viewChild.required('control', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    description = contentChild(SlRadioDescription, { ...(ngDevMode ? { debugName: "description" } : /* istanbul ignore next */ {}), descendants: true });
+    /** The identifier the label points at. A consumer's own wins. */
+    controlId = this.writtenId ?? inject(SlRadioGroupIdFactory).next();
+    checked = computed(() => this.group.holds(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.group.register(this);
+        inject(DestroyRef).onDestroy(() => this.group.unregister(this));
+    }
+    resolvedDisabled = computed(() => this.disabled() ?? this.group.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const merged = [this.writtenDescribedBy, this.description()?.id].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    disabledAttribute = computed(() => this.resolvedDisabled() === true ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []));
+    /** The native element, for `focus()` and `click()`. */
+    get inputElement() {
+        return this.element().nativeElement;
+    }
+    /** Writes this item's element from the group's value. */
+    syncElement() {
+        this.element().nativeElement.checked = this.checked();
+    }
+    /**
+     * Refusing the default undoes the platform's pre-click check of *this*
+     * element. It does not put the previously chosen neighbour back — checking a
+     * radio unchecks its neighbours, and the canceled activation behaviour undoes
+     * only the first half of that — so the group writes every element from the
+     * value afterwards.
+     */
+    onClick(event) {
+        if (this.group.select(this.value(), activationReason(event), event))
+            return;
+        event.preventDefault();
+        this.group.restoreElements();
+    }
+    onBlur() {
+        this.group.markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlRadio, isStandalone: true, selector: "[slRadio]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-checked": "checked() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null" } }, queries: [{ propertyName: "description", first: true, predicate: SlRadioDescription, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "element", first: true, predicate: ["control"], descendants: true, isSignal: true }], exportAs: ["slRadio"], ngImport: i0, template: `<input
+      #control
+      data-part="control"
+      type="radio"
+      [attr.id]="controlId"
+      [attr.name]="group.resolvedName()"
+      [attr.value]="value()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.disabled]="disabledAttribute()"
+      [checked]="checked()"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+    />
+    <span data-part="indicator"
+      ><span slIcon><svg slGlyph name="dot"></svg></span
+    ></span>
+    <label data-part="label" [attr.for]="controlId"><ng-content /></label>
+    <ng-content select="[slRadioDescription]" />`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slRadio]',
+                    standalone: true,
+                    exportAs: 'slRadio',
+                    imports: [SlGlyph, SlIcon],
+                    template: `<input
+      #control
+      data-part="control"
+      type="radio"
+      [attr.id]="controlId"
+      [attr.name]="group.resolvedName()"
+      [attr.value]="value()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.disabled]="disabledAttribute()"
+      [checked]="checked()"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+    />
+    <span data-part="indicator"
+      ><span slIcon><svg slGlyph name="dot"></svg></span
+    ></span>
+    <label data-part="label" [attr.for]="controlId"><ng-content /></label>
+    <ng-content select="[slRadioDescription]" />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'item',
+                        '[attr.data-checked]': "checked() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], element: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlRadioDescription), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RADIO_GROUP_DEFAULTS, SlRadio, SlRadioDescription, SlRadioGroup, SlRadioGroupIdFactory, injectRadioGroupDefaults, provideRadioGroupDefaults };
+//# sourceMappingURL=slotted-angular-radio-group.mjs.map