@fluid-topics/ft-radio 0.3.12 → 0.3.13

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

@@ -0,0 +1,3 @@
+export declare const FtRadioGroupCssVariables: {};
+export declare const groupStyles: import("lit").CSSResult;
+//# sourceMappingURL=ft-radio-group.css.d.ts.map

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

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const FtRadioGroupCssVariables = {};
+// language=CSS
+export const groupStyles = css `
+    :host {
+        display: contents;
+    }
+`;
+//# sourceMappingURL=ft-radio-group.css.js.map

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

@@ -1,6 +1,7 @@
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtRadio } from "./ft-radio";
-export declare class FtRadioGroup extends FtLitElement {
+import { FtRadioGroupProperties } from "./ft-radio-group.properties";
+export declare class FtRadioGroup extends FtLitElement implements FtRadioGroupProperties {
     static elementDefinitions: {};
     name: string;
     radioButtons: Array<FtRadio>;

package/build/ft-radio-group.js

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { property, queryAssignedElements } from "lit/decorators.js";
-import { css, html } from "lit";
+import { html } from "lit";
+import { groupStyles } from "./ft-radio-group.css";
 export class FtRadioGroup extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -55,12 +56,7 @@ export class FtRadioGroup extends FtLitElement {
     }
 }
 FtRadioGroup.elementDefinitions = {};
-// language=CSS
-FtRadioGroup.styles = css `
-        :host {
-            display: contents;
-        }
-    `;
+FtRadioGroup.styles = groupStyles;
 __decorate([
     property()
 ], FtRadioGroup.prototype, "name", void 0);

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

@@ -0,0 +1,4 @@
+export interface FtRadioGroupProperties {
+    name: string;
+}
+//# sourceMappingURL=ft-radio-group.properties.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-radio-group.properties.js.map

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

@@ -0,0 +1,9 @@
+export declare const FtRadioCssVariables: {
+    textColor: 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;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-radio.css.d.ts.map

package/build/ft-radio.css.js

@@ -0,0 +1,91 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtRadioCssVariables = {
+    textColor: FtCssVariableFactory.extend("--ft-radio-text-color", designSystemVariables.colorOnSurfaceHigh),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnPrimary: FtCssVariableFactory.external(designSystemVariables.colorOnPrimary, "Design system"),
+    borderColor: FtCssVariableFactory.extend("--ft-radio-border-color", designSystemVariables.colorOnSurfaceMedium),
+    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    * {
+        box-sizing: border-box;
+    }
+
+    .ft-radio {
+        box-sizing: border-box;
+        color: ${FtRadioCssVariables.textColor};
+
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .ft-radio--disabled {
+        color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+    }
+
+    input {
+        opacity: 0;
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        margin: 0;
+    }
+
+    .ft-radio--box-container {
+        position: relative;
+        width: 40px;
+        height: 40px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .ft-radio--box {
+        border: 2px solid ${FtRadioCssVariables.borderColor};
+        border-radius: 50%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 20px;
+        height: 20px;
+    }
+
+    .ft-radio--box:after {
+        content: " ";
+        background-color: ${FtRadioCssVariables.colorPrimary};
+
+        border-radius: 50%;
+
+        width: 12px;
+        height: 12px;
+
+        transform: scale(0);
+        transition: transform 100ms ease;
+    }
+
+    .ft-radio--checked .ft-radio--box {
+        border-color: ${FtRadioCssVariables.colorPrimary};
+    }
+
+
+    .ft-radio--checked .ft-radio--box:after {
+        transform: scale(1);
+    }
+
+    .ft-radio--disabled .ft-radio--box {
+        border-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+        background-color: transparent;
+    }
+
+    .ft-radio--disabled .ft-radio--box:after {
+        background-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
+    }
+`;
+//# sourceMappingURL=ft-radio.css.js.map

package/build/ft-radio.d.ts

@@ -1,17 +1,6 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export interface FtRadioProperties {
-    value: string;
-    checked: boolean;
-    disabled: boolean;
-}
-export declare const FtRadioCssVariables: {
-    textColor: 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;
-};
+import { FtRadioProperties } from "./ft-radio.properties";
 export declare class FtRadioChangeEvent extends CustomEvent<{
     value: string;
     checked: boolean;

package/build/ft-radio.js

@@ -4,19 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html } from "lit";
+import { html } from "lit";
 import { property, query } from "lit/decorators.js";
-import { designSystemVariables, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
+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 const FtRadioCssVariables = {
-    textColor: FtCssVariableFactory.extend("--ft-radio-text-color", designSystemVariables.colorOnSurfaceHigh),
-    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
-    colorOnPrimary: FtCssVariableFactory.external(designSystemVariables.colorOnPrimary, "Design system"),
-    borderColor: FtCssVariableFactory.extend("--ft-radio-border-color", designSystemVariables.colorOnSurfaceMedium),
-    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
-};
+import { styles } from "./ft-radio.css";
 export class FtRadioChangeEvent extends CustomEvent {
     constructor(value, checked) {
         super("change", { detail: { value: value, checked: checked }, bubbles: true, composed: true });
@@ -87,87 +81,7 @@ FtRadio.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography
 };
-// language=CSS
-FtRadio.styles = css `
-        * {
-            box-sizing: border-box;
-        }
-
-        .ft-radio {
-            box-sizing: border-box;
-            color: ${FtRadioCssVariables.textColor};
-
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .ft-radio--disabled {
-            color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
-        }
-
-        input {
-            opacity: 0;
-            position: absolute;
-            width: 40px;
-            height: 40px;
-            margin: 0;
-        }
-
-        .ft-radio--box-container {
-            position: relative;
-            width: 40px;
-            height: 40px;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-shrink: 0;
-        }
-
-        .ft-radio--box {
-            border: 2px solid ${FtRadioCssVariables.borderColor};
-            border-radius: 50%;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            width: 20px;
-            height: 20px;
-        }
-
-        .ft-radio--box:after {
-            content: " ";
-            background-color: ${FtRadioCssVariables.colorPrimary};
-
-            border-radius: 50%;
-
-            width: 12px;
-            height: 12px;
-
-            transform: scale(0);
-            transition: transform 100ms ease;
-        }
-
-        .ft-radio--checked .ft-radio--box {
-            border-color: ${FtRadioCssVariables.colorPrimary};
-        }
-
-
-        .ft-radio--checked .ft-radio--box:after {
-            transform: scale(1);
-        }
-
-        .ft-radio--disabled .ft-radio--box {
-            border-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
-            background-color: transparent;
-        }
-
-        .ft-radio--disabled .ft-radio--box:after {
-            background-color: ${FtRadioCssVariables.colorOnSurfaceDisabled};
-        }
-    `;
+FtRadio.styles = styles;
 __decorate([
     property()
 ], FtRadio.prototype, "value", void 0);