@fluid-topics/ft-radio 2.0.38 → 2.1.0

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

@@ -0,0 +1,7 @@
+export interface FtRadioProperties {
+    value?: string;
+    name?: string;
+    checked?: boolean;
+    ariaChecked?: string;
+    disabled?: boolean;
+}

package/build/ft-radio.properties.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,9 +1,9 @@
 export declare const FtRadioCssVariables: {
-    textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    textColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorPrimary: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorOnPrimary: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorOnSurfaceDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const classicStyles: import("lit").CSSResult;

package/build/ft-radio.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
 import { FtTypographyCssVariables } from "@fluid-topics/ft-typography";
 export const FtRadioCssVariables = {
     textColor: FtCssVariableFactory.extend("--ft-radio-text-color", "", designSystemVariables.colorOnSurfaceHigh),
@@ -96,7 +96,7 @@ export const classicStyles = css `
         outline-offset: -2px;
     }
 
-    .ft-radio ft-or-ftds-typography {
+    .ft-radio ft-typography {
         padding-right: 2px;
     }
 `;

package/build/index.d.ts

@@ -1,9 +1,7 @@
 export * from "./ft-radio";
+export * from "./ft-radio.properties";
 export * from "./ft-radio.styles";
-export * from "./ftds-radio";
-export * from "./ftds-radio.styles";
 export * from "./ft-radio-group";
+export * from "./ft-radio-group.properties";
 export * from "./ft-radio-group.styles";
-export * from "./ftds-radio-group";
-export * from "./ftds-radio-group.styles";
 import "./define";

package/build/index.js

@@ -1,9 +1,7 @@
 export * from "./ft-radio";
+export * from "./ft-radio.properties";
 export * from "./ft-radio.styles";
-export * from "./ftds-radio";
-export * from "./ftds-radio.styles";
 export * from "./ft-radio-group";
+export * from "./ft-radio-group.properties";
 export * from "./ft-radio-group.styles";
-export * from "./ftds-radio-group";
-export * from "./ftds-radio-group.styles";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-radio",
-    "version": "2.0.38",
+    "version": "2.1.0",
     "description": "A radio component",
     "keywords": [
         "Lit"
@@ -19,10 +19,10 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-ripple": "2.0.38",
-        "@fluid-topics/ft-typography": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

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

@@ -1,28 +0,0 @@
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { PropertyValues } from "lit";
-import { FtBaseRadio } from "./ft-radio";
-export interface FtBaseRadioGroupProperties {
-    name?: string;
-    role?: string;
-    ariaLabelledBy?: string;
-}
-export declare class FtBaseRadioGroup extends FtLitElement implements FtBaseRadioGroupProperties {
-    static elementDefinitions: {};
-    name: string;
-    role: string;
-    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

@@ -1,119 +0,0 @@
-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";
-export class FtBaseRadioGroup extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "";
-        this.role = "radiogroup";
-        this.ariaLabelledBy = "";
-        this.currentSelectedIndex = 0;
-        this.onFocus = () => {
-            setTimeout(() => this.focusCurrentChecked(), 100);
-        };
-        this.onFocusOut = (e) => {
-        };
-    }
-    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;
-        }
-        this.radioButtons[this.currentSelectedIndex].setInputTabIndex(0);
-    }
-    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, attribute: "aria-labelledby" })
-], FtBaseRadioGroup.prototype, "ariaLabelledBy", void 0);
-__decorate([
-    queryAssignedElements()
-], FtBaseRadioGroup.prototype, "assignedElements", void 0);
-__decorate([
-    state()
-], FtBaseRadioGroup.prototype, "currentSelectedIndex", void 0);

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

@@ -1,37 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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";
-export class FtRadioChangeEvent extends CustomEvent {
-    constructor(value, checked) {
-        super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
-    }
-}
-export 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 inert 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}
-                           >
-                </div>
-                <label for="radio-button" inert >
-                    <ft-or-ftds-typography variant="${this.typographyVariant}">
-                        <slot></slot>
-                    </ft-or-ftds-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,
-};
-__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);

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

@@ -1,8 +0,0 @@
-import { FtBaseRadioGroup, FtBaseRadioGroupProperties } from "./ft-base-radio-group";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-declare const FtdsRadioGroup_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtBaseRadioGroup>;
-export declare class FtdsRadioGroup extends FtdsRadioGroup_base implements FtBaseRadioGroupProperties {
-    family: DesignSystemFamily;
-    static styles: import("lit").CSSResult[];
-}
-export {};

package/build/ftds-radio-group.js

@@ -1,14 +0,0 @@
-import { FtBaseRadioGroup } from "./ft-base-radio-group";
-import { safariEllipsisFix, toFtdsBase } from "@fluid-topics/ft-wc-utils";
-import { designSystemGroupStyles } from "./ftds-radio-group.styles";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-export class FtdsRadioGroup extends toFtdsBase(FtBaseRadioGroup) {
-    constructor() {
-        super(...arguments);
-        this.family = DesignSystemFamily.brand;
-    }
-}
-FtdsRadioGroup.styles = [
-    safariEllipsisFix,
-    designSystemGroupStyles,
-];

package/build/ftds-radio-group.styles.d.ts

@@ -1 +0,0 @@
-export declare const designSystemGroupStyles: import("lit").CSSResult;

package/build/ftds-radio-group.styles.js

@@ -1,13 +0,0 @@
-import { css } from "lit";
-import { radio } from "@fluid-topics/ft-wc-utils";
-export const designSystemGroupStyles = css `
-    :host {
-        display: flex;
-        flex-direction: column;
-        gap: ${radio.verticalGap}
-    }
-
-    :host(:focus-visible) {
-        outline: none;
-    }
-`;

package/build/ftds-radio.d.ts

@@ -1,13 +0,0 @@
-import { FtBaseRadio, FtBaseRadioProperties } from "./ft-base-radio";
-import { ClassInfo } from "lit/directives/class-map.js";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-declare const FtdsRadio_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtBaseRadio>;
-export declare class FtdsRadio extends FtdsRadio_base implements FtBaseRadioProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    family: DesignSystemFamily;
-    static styles: import("lit").CSSResult[];
-    get radioClasses(): ClassInfo;
-    get typographyVariant(): string;
-}
-export {};

package/build/ftds-radio.js

@@ -1,28 +0,0 @@
-import { FtBaseRadio } from "./ft-base-radio";
-import { safariEllipsisFix, toFtdsBase } from "@fluid-topics/ft-wc-utils";
-import { designSystemStyles } from "./ftds-radio.styles";
-import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
-import { FtdsTypographyVariants, FtTypography } from "@fluid-topics/ft-typography";
-export class FtdsRadio extends toFtdsBase(FtBaseRadio) {
-    constructor() {
-        super(...arguments);
-        this.family = DesignSystemFamily.brand;
-    }
-    get radioClasses() {
-        return {
-            ...super.radioClasses,
-            ...this.getDesignSystemBaseClasses(),
-        };
-    }
-    get typographyVariant() {
-        return FtdsTypographyVariants.body2medium;
-    }
-}
-FtdsRadio.elementDefinitions = {
-    ...FtBaseRadio.elementDefinitions,
-    "ft-or-ftds-typography": FtTypography,
-};
-FtdsRadio.styles = [
-    safariEllipsisFix,
-    designSystemStyles,
-];

package/build/ftds-radio.styles.d.ts

@@ -1,3 +0,0 @@
-import { radio } from "@fluid-topics/ft-wc-utils";
-export { radio as FtdsRadioCssVariables };
-export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-radio.styles.js

@@ -1,112 +0,0 @@
-import { css } from "lit";
-import { radio, setVariable, } from "@fluid-topics/ft-wc-utils";
-import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
-export { radio as FtdsRadioCssVariables };
-export const designSystemStyles = css `
-    * {
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-        --input-size: calc(${radio.circleSize} + 2 * (${radio.focusOutlineOffset} + ${radio.focusOutlineWidth}));
-        --input-margin: calc(-1 * ${radio.focusOutlineOffset} - ${radio.focusOutlineWidth});
-    }
-
-    .ft-radio {
-        box-sizing: border-box;
-        color: ${radio.color};
-        gap: ${radio.horizontalGap};
-    }
-
-    .ft-radio--disabled:not(.ft-radio--checked) {
-        opacity: ${radio.unselectedDisabledComponentOpacity}
-    }
-
-    .ft-radio--disabled.ft-radio--checked {
-        opacity: ${radio.selectedDisabledComponentOpacity}
-    }
-
-    input {
-        opacity: 0;
-        position: absolute;
-        width: var(--input-size);
-        height: var(--input-size);
-        margin: 0;
-    }
-
-    .ft-radio--box-container {
-        position: relative;
-        width: var(--input-size);
-        height: var(--input-size);
-        margin: var(--input-margin);
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-    }
-
-    .ft-radio ft-ripple {
-        z-index: 0;
-        ${setVariable(FtRippleCssVariables.color, radio.unselectedStateLayerColor)};
-        ${setVariable(FtRippleCssVariables.backgroundColor, radio.unselectedStateLayerColor)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, radio.unselectedHoverStateLayerOpacity)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, radio.unselectedFocusStateLayerOpacity)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, radio.unselectedActiveStateLayerOpacity)};
-    }
-
-    .ft-radio--checked ft-ripple {
-        ${setVariable(FtRippleCssVariables.color, radio.selectedStateLayerColor)};
-        ${setVariable(FtRippleCssVariables.backgroundColor, radio.selectedStateLayerColor)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, radio.selectedHoverStateLayerOpacity)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceFocused, radio.selectedFocusStateLayerOpacity)};
-        ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, radio.selectedActiveStateLayerOpacity)};
-    }
-
-    .ft-radio--box {
-        z-index: 1;
-        border: 2px solid ${radio.unselectedBorderColor};
-        border-radius: 50%;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: ${radio.circleSize};
-        height: ${radio.circleSize};
-    }
-
-    .ft-radio--box:after {
-        content: " ";
-        background-color: ${radio.selectedRadioColor};
-
-        border-radius: 50%;
-
-        width: calc(${radio.circleSize} - 8px);
-        height: calc(${radio.circleSize} - 8px);
-
-        transform: scale(0);
-        transition: transform 100ms ease;
-    }
-
-    .ft-radio--checked .ft-radio--box {
-        border-color: ${radio.selectedRadioColor};
-    }
-
-
-    .ft-radio--checked .ft-radio--box:after {
-        transform: scale(1);
-    }
-
-    .ft-radio--disabled .ft-radio--box {
-        background-color: transparent;
-    }
-
-    .ft-radio:has(:focus-visible) .ft-radio--box {
-        outline: ${radio.focusOutlineWidth} solid ${radio.focusFocusRingColor};
-        outline-offset: ${radio.focusOutlineOffset};
-    }
-
-    .ft-radio ft-or-ftds-typography {
-        padding-right: 2px;
-    }
-`;