@fluid-topics/ft-radio 1.3.14 → 1.3.16

package/build/ft-base-radio-group.d.ts

@@ -0,0 +1,30 @@
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues } from "lit";
+import { FtBaseRadio } from "./ft-radio";
+export interface FtBaseRadioGroupProperties {
+    name?: string;
+    role?: string;
+    tabIndex?: number;
+    ariaLabelledBy?: string;
+}
+export declare class FtBaseRadioGroup extends FtLitElement implements FtBaseRadioGroupProperties {
+    static elementDefinitions: {};
+    name: string;
+    role: string;
+    tabIndex: number;
+    ariaLabelledBy: string;
+    assignedElements?: Array<Element>;
+    get radioButtons(): Array<FtBaseRadio>;
+    currentSelectedIndex: number;
+    protected render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onSlotChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private onFocus;
+    private onFocusOut;
+    private onChange;
+    private onKeyDown;
+    private resolveCurrentSelectedIndex;
+    private focusCurrentChecked;
+}

package/build/ft-base-radio-group.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { html } from "lit";
+class FtBaseRadioGroup extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.role = "radiogroup";
+        this.tabIndex = 0;
+        this.ariaLabelledBy = "";
+        this.currentSelectedIndex = 0;
+        this.onFocus = () => {
+            if (this.tabIndex == 0) {
+                this.tabIndex = -1;
+                setTimeout(() => this.focusCurrentChecked(), 100);
+            }
+        };
+        this.onFocusOut = (e) => {
+            const nextFocusOutsideOfGroup = !this.contains(e.relatedTarget);
+            if (nextFocusOutsideOfGroup) {
+                this.tabIndex = 0;
+            }
+        };
+    }
+    get radioButtons() {
+        var _a, _b;
+        return (_b = (_a = this.assignedElements) === null || _a === void 0 ? void 0 : _a.flatMap((e) => e.matches("ft-radio,ftds-radio")
+            ? [e]
+            : [...e.querySelectorAll("ft-radio,ftds-radio")])) !== null && _b !== void 0 ? _b : [];
+    }
+    render() {
+        return html `
+            <slot @slotchange=${this.onSlotChange}
+                  @change=${this.onChange}
+                  @keydown=${this.onKeyDown}
+            ></slot>
+        `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focus", this.onFocus);
+        this.addEventListener("focusout", this.onFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("focus", this.onFocus);
+        this.removeEventListener("focusout", this.onFocusOut);
+    }
+    onSlotChange() {
+        this.radioButtons.forEach((rb) => rb.name = this.name);
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        this.radioButtons.forEach((rb) => rb.setInputTabIndex(-1)); // RadioButton is no more selectable alone
+        this.resolveCurrentSelectedIndex();
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.radioButtons.forEach((rb) => rb.checked = event.detail.value === rb.value);
+        this.dispatchEvent(new CustomEvent("change", { detail: event.detail.value }));
+        this.resolveCurrentSelectedIndex();
+    }
+    onKeyDown(event) {
+        let blockUnwhishedReaction = false;
+        switch (event.key) {
+            case "ArrowUp":
+            case "ArrowLeft": {
+                blockUnwhishedReaction = true;
+                const indexToFocus = this.currentSelectedIndex - 1;
+                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].select();
+                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].focus();
+                break;
+            }
+            case "ArrowDown":
+            case "ArrowRight": {
+                blockUnwhishedReaction = true;
+                const indexToFocus = this.currentSelectedIndex + 1;
+                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].select();
+                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].focus();
+                break;
+            }
+            case "Enter": {
+                this.radioButtons[this.currentSelectedIndex].select();
+            }
+        }
+        if (blockUnwhishedReaction) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    resolveCurrentSelectedIndex() {
+        const checkedButtonIndex = this.radioButtons.findIndex((rb) => rb.checked);
+        if (checkedButtonIndex == -1) {
+            this.currentSelectedIndex = 0;
+            this.radioButtons[0].select();
+        }
+        else {
+            this.currentSelectedIndex = checkedButtonIndex;
+        }
+    }
+    focusCurrentChecked() {
+        this.radioButtons[this.currentSelectedIndex].focus();
+    }
+}
+FtBaseRadioGroup.elementDefinitions = {};
+__decorate([
+    property()
+], FtBaseRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, attribute: "role" })
+], FtBaseRadioGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], FtBaseRadioGroup.prototype, "tabIndex", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-labelledby" })
+], FtBaseRadioGroup.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    queryAssignedElements()
+], FtBaseRadioGroup.prototype, "assignedElements", void 0);
+__decorate([
+    state()
+], FtBaseRadioGroup.prototype, "currentSelectedIndex", void 0);
+export { FtBaseRadioGroup };

package/build/ft-base-radio.d.ts

@@ -0,0 +1,37 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+export declare class FtRadioChangeEvent extends CustomEvent<{
+    value: string;
+    checked: boolean;
+}> {
+    constructor(value: string, checked: boolean);
+}
+export interface FtBaseRadioProperties {
+    value?: string;
+    name?: string;
+    checked?: boolean;
+    ariaChecked?: string;
+    disabled?: boolean;
+}
+export declare class FtBaseRadio extends FtLitElement implements FtBaseRadioProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    value: string;
+    name: string;
+    checked: boolean;
+    ariaChecked: string;
+    disabled: boolean;
+    private container?;
+    private ripple?;
+    private input?;
+    get radioClasses(): ClassInfo;
+    get typographyVariant(): string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private onChange;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    select(): void;
+    setInputTabIndex(index: number): void;
+    focus(): void;
+    onClick(e: Event): void;
+}

package/build/ft-base-radio.js

@@ -0,0 +1,135 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+export class FtRadioChangeEvent extends CustomEvent {
+    constructor(value, checked) {
+        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+    }
+}
+class FtBaseRadio extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.name = "";
+        this.checked = false;
+        this.ariaChecked = "false";
+        this.disabled = false;
+    }
+    get radioClasses() {
+        return {
+            "ft-radio": true,
+            "ft-radio--checked": this.checked,
+            "ft-radio--disabled": this.disabled,
+        };
+    }
+    get typographyVariant() {
+        return "";
+    }
+    render() {
+        // We use aria-hidden on the input to prevent the "radio" role to be present twice in the aria tree
+        return html `
+            <div class="${classMap(this.radioClasses)}"
+                 @click=${this.onClick}>
+                <div class="ft-radio--box-container">
+                    <ft-ripple
+                        ?disabled=${this.disabled}
+                        ?primary=${this.checked}
+                        unbounded>
+                    </ft-ripple>
+                    <div class="ft-radio--box">
+                    </div>
+                    <input id="radio-button"
+                           type="radio"
+                           name="${this.name}"
+                           value="${this.value}"
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                           aria-hidden="true">
+                </div>
+                <label for="radio-button">
+                    <ft-typography variant="${this.typographyVariant}">
+                        <slot></slot>
+                    </ft-typography>
+                </label>
+            </div>
+        `;
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("checked")) {
+            this.ariaChecked = this.checked ? "true" : "false";
+        }
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.checked = event.target.checked;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+    }
+    contentAvailableCallback(props) {
+        var _a;
+        super.contentAvailableCallback(props);
+        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
+    }
+    select() {
+        this.checked = true;
+        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
+    }
+    setInputTabIndex(index) {
+        if (this.input) {
+            this.input.tabIndex = index;
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => { var _a; return (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.forceFocusUpdate(); }, 0);
+    }
+    onClick(e) {
+        var _a;
+        if (e.target === this.input) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
+    }
+}
+FtBaseRadio.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
+__decorate([
+    property()
+], FtBaseRadio.prototype, "value", void 0);
+__decorate([
+    property()
+], FtBaseRadio.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtBaseRadio.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: "aria-checked", reflect: true })
+], FtBaseRadio.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseRadio.prototype, "disabled", void 0);
+__decorate([
+    query(".ft-radio")
+], FtBaseRadio.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtBaseRadio.prototype, "ripple", void 0);
+__decorate([
+    query("input")
+], FtBaseRadio.prototype, "input", void 0);
+export { FtBaseRadio };

package/build/ft-radio-group.d.ts

@@ -1,26 +1,5 @@
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { PropertyValues } from "lit";
-import { FtRadio } from "./ft-radio";
-import { FtRadioGroupProperties } from "./ft-radio-group.properties";
-export declare class FtRadioGroup extends FtLitElement implements FtRadioGroupProperties {
-    static elementDefinitions: {};
-    name: string;
-    role: string;
-    tabIndex: number;
-    ariaLabelledBy: string;
-    assignedElements?: Array<Element>;
-    get radioButtons(): Array<FtRadio>;
-    currentSelectedIndex: number;
+import { FtBaseRadioGroup, FtBaseRadioGroupProperties } from "./ft-base-radio-group";
+export * from "./ft-base-radio-group";
+export declare class FtRadioGroup extends FtBaseRadioGroup implements FtBaseRadioGroupProperties {
     static styles: import("lit").CSSResult;
-    protected render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onSlotChange;
-    protected contentAvailableCallback(props: PropertyValues): void;
-    private onFocus;
-    private onFocusOut;
-    private onChange;
-    private onKeyDown;
-    private resolveCurrentSelectedIndex;
-    private focusCurrentChecked;
 }

package/build/ft-radio-group.js

@@ -1,130 +1,7 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { property, queryAssignedElements, state } from "lit/decorators.js";
-import { html } from "lit";
+import { FtBaseRadioGroup } from "./ft-base-radio-group";
 import { groupStyles } from "./ft-radio-group.styles";
-class FtRadioGroup extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "";
-        this.role = "radiogroup";
-        this.tabIndex = 0;
-        this.ariaLabelledBy = "";
-        this.currentSelectedIndex = 0;
-        this.onFocus = () => {
-            if (this.tabIndex == 0) {
-                this.tabIndex = -1;
-                setTimeout(() => this.focusCurrentChecked(), 100);
-            }
-        };
-        this.onFocusOut = (e) => {
-            let nextFocusOutsideOfGroup = !this.contains(e.relatedTarget);
-            if (nextFocusOutsideOfGroup) {
-                this.tabIndex = 0;
-            }
-        };
-    }
-    get radioButtons() {
-        var _a, _b;
-        return (_b = (_a = this.assignedElements) === null || _a === void 0 ? void 0 : _a.flatMap(e => e.matches("ft-radio") ? [e] : [...e.querySelectorAll("ft-radio")])) !== null && _b !== void 0 ? _b : [];
-    }
-    render() {
-        return html `
-            <slot @slotchange=${this.onSlotChange}
-                  @change=${this.onChange}
-                  @keydown=${this.onKeyDown}
-            ></slot>
-        `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("focus", this.onFocus);
-        this.addEventListener("focusout", this.onFocusOut);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("focus", this.onFocus);
-        this.removeEventListener("focusout", this.onFocusOut);
-    }
-    onSlotChange() {
-        this.radioButtons.forEach(rb => rb.name = this.name);
-    }
-    contentAvailableCallback(props) {
-        super.contentAvailableCallback(props);
-        this.radioButtons.forEach(rb => rb.setInputTabIndex(-1)); // RadioButton is no more selectable alone
-        this.resolveCurrentSelectedIndex();
-    }
-    onChange(event) {
-        event.stopPropagation();
-        this.radioButtons.forEach(rb => rb.checked = event.detail.value === rb.value);
-        this.dispatchEvent(new CustomEvent("change", { detail: event.detail.value }));
-        this.resolveCurrentSelectedIndex();
-    }
-    onKeyDown(event) {
-        let blockUnwhishedReaction = false;
-        switch (event.key) {
-            case "ArrowUp":
-            case "ArrowLeft": {
-                blockUnwhishedReaction = true;
-                let indexToFocus = this.currentSelectedIndex - 1;
-                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].select();
-                this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].focus();
-                break;
-            }
-            case "ArrowDown":
-            case "ArrowRight": {
-                blockUnwhishedReaction = true;
-                let indexToFocus = this.currentSelectedIndex + 1;
-                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].select();
-                this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].focus();
-                break;
-            }
-            case "Enter": {
-                this.radioButtons[this.currentSelectedIndex].select();
-            }
-        }
-        if (blockUnwhishedReaction) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    resolveCurrentSelectedIndex() {
-        let checkedButtonIndex = this.radioButtons.findIndex(rb => rb.checked);
-        if (checkedButtonIndex == -1) {
-            this.currentSelectedIndex = 0;
-            this.radioButtons[0].select();
-        }
-        else {
-            this.currentSelectedIndex = checkedButtonIndex;
-        }
-    }
-    focusCurrentChecked() {
-        this.radioButtons[this.currentSelectedIndex].focus();
-    }
+export * from "./ft-base-radio-group";
+class FtRadioGroup extends FtBaseRadioGroup {
 }
-FtRadioGroup.elementDefinitions = {};
 FtRadioGroup.styles = groupStyles;
-__decorate([
-    property()
-], FtRadioGroup.prototype, "name", void 0);
-__decorate([
-    property({ reflect: true, attribute: "role" })
-], FtRadioGroup.prototype, "role", void 0);
-__decorate([
-    property({ reflect: true })
-], FtRadioGroup.prototype, "tabIndex", void 0);
-__decorate([
-    property({ reflect: true, attribute: "aria-labelledby" })
-], FtRadioGroup.prototype, "ariaLabelledBy", void 0);
-__decorate([
-    queryAssignedElements()
-], FtRadioGroup.prototype, "assignedElements", void 0);
-__decorate([
-    state()
-], FtRadioGroup.prototype, "currentSelectedIndex", void 0);
 export { FtRadioGroup };

package/build/ft-radio.d.ts

@@ -1,29 +1,6 @@
-import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtRadioProperties } from "./ft-radio.properties";
-export declare class FtRadioChangeEvent extends CustomEvent<{
-    value: string;
-    checked: boolean;
-}> {
-    constructor(value: string, checked: boolean);
-}
-export declare class FtRadio extends FtLitElement implements FtRadioProperties {
-    static elementDefinitions: ElementDefinitionsMap;
+import { FtBaseRadio, FtBaseRadioProperties } from "./ft-base-radio";
+export * from "./ft-base-radio";
+export declare class FtRadio extends FtBaseRadio implements FtBaseRadioProperties {
     static styles: import("lit").CSSResult;
-    value: string;
-    name: string;
-    checked: boolean;
-    ariaChecked: string;
-    disabled: boolean;
-    role: string;
-    private container?;
-    private ripple?;
-    private input?;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected update(changedProperties: PropertyValues): void;
-    private onChange;
-    protected contentAvailableCallback(props: PropertyValues): void;
-    select(): void;
-    setInputTabIndex(index: number): void;
-    focus(): void;
+    get typographyVariant(): string;
 }

package/build/ft-radio.js

@@ -1,135 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { classMap } from "lit/directives/class-map.js";
-import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTypography } from "@fluid-topics/ft-typography";
-import { styles } from "./ft-radio.styles";
-export class FtRadioChangeEvent extends CustomEvent {
-    constructor(value, checked) {
-        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
+import { FtBaseRadio } from "./ft-base-radio";
+import { classicStyles } from "./ft-radio.styles";
+import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
+export * from "./ft-base-radio";
+class FtRadio extends FtBaseRadio {
+    get typographyVariant() {
+        return FtTypographyVariants.body2;
     }
 }
-class FtRadio extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.value = "";
-        this.name = "";
-        this.checked = false;
-        this.ariaChecked = "false";
-        this.disabled = false;
-        this.role = "radio";
-    }
-    render() {
-        const classes = {
-            "ft-radio": true,
-            "ft-radio--checked": this.checked,
-            "ft-radio--disabled": this.disabled,
-        };
-        return html `
-            <div class="${classMap(classes)}">
-                <div class="ft-radio--box-container">
-                    <ft-ripple
-                        ?disabled=${this.disabled}
-                        ?primary=${this.checked}
-                        unbounded>
-                    </ft-ripple>
-                    <div class="ft-radio--box">
-                    </div>
-                    <input id="radio-button"
-                           type="radio"
-                           name="${this.name}"
-                           value="${this.value}"
-                           .checked=${this.checked}
-                           .disabled=${this.disabled}
-                           @change=${this.onChange}
-                    >
-                </div>
-                <label for="radio-button" @click=${(e) => {
-            var _a;
-            e.stopPropagation();
-            e.preventDefault();
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
-            // This should be the normal behaviour, but chrome have an issue with click transmission in shadowRoot
-            // https://issues.chromium.org/issues/325161644
-        }}>
-                    <ft-typography variant="body2">
-                        <slot></slot>
-                    </ft-typography>
-                </label>
-            </div>
-        `;
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has("checked")) {
-            this.ariaChecked = this.checked ? "true" : "false";
-        }
-    }
-    onChange(event) {
-        event.stopPropagation();
-        this.checked = event.target.checked;
-        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
-    }
-    contentAvailableCallback(props) {
-        var _a;
-        super.contentAvailableCallback(props);
-        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
-    }
-    select() {
-        this.checked = true;
-        this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
-    }
-    setInputTabIndex(index) {
-        if (this.input) {
-            this.input.tabIndex = index;
-        }
-    }
-    focus() {
-        var _a;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-        setTimeout(() => {
-            var _a;
-            (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.forceFocusUpdate();
-        }, 0);
-    }
-}
-FtRadio.elementDefinitions = {
-    "ft-ripple": FtRipple,
-    "ft-typography": FtTypography
-};
-FtRadio.styles = styles;
-__decorate([
-    property()
-], FtRadio.prototype, "value", void 0);
-__decorate([
-    property()
-], FtRadio.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FtRadio.prototype, "checked", void 0);
-__decorate([
-    property({ attribute: "aria-checked", reflect: true })
-], FtRadio.prototype, "ariaChecked", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtRadio.prototype, "disabled", void 0);
-__decorate([
-    property({ reflect: true, attribute: "role" })
-], FtRadio.prototype, "role", void 0);
-__decorate([
-    query(".ft-radio")
-], FtRadio.prototype, "container", void 0);
-__decorate([
-    query("ft-ripple")
-], FtRadio.prototype, "ripple", void 0);
-__decorate([
-    query("input")
-], FtRadio.prototype, "input", void 0);
+FtRadio.styles = classicStyles;
 export { FtRadio };