@fluid-topics/ftds-radio 2.1.0

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

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

package/build/ftds-radio.properties.js

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

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

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

package/build/ftds-radio.styles.js

@@ -0,0 +1,112 @@
+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 styles = 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});
+    }
+
+    .ftds-radio {
+        box-sizing: border-box;
+        color: ${radio.color};
+        gap: ${radio.horizontalGap};
+    }
+
+    .ftds-radio--disabled:not(.ftds-radio--checked) {
+        opacity: ${radio.unselectedDisabledComponentOpacity}
+    }
+
+    .ftds-radio--disabled.ftds-radio--checked {
+        opacity: ${radio.selectedDisabledComponentOpacity}
+    }
+
+    input {
+        opacity: 0;
+        position: absolute;
+        width: var(--input-size);
+        height: var(--input-size);
+        margin: 0;
+    }
+
+    .ftds-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;
+    }
+
+    .ftds-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)};
+    }
+
+    .ftds-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)};
+    }
+
+    .ftds-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};
+    }
+
+    .ftds-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;
+    }
+
+    .ftds-radio--checked .ftds-radio--box {
+        border-color: ${radio.selectedRadioColor};
+    }
+
+
+    .ftds-radio--checked .ftds-radio--box:after {
+        transform: scale(1);
+    }
+
+    .ftds-radio--disabled .ftds-radio--box {
+        background-color: transparent;
+    }
+
+    .ftds-radio:has(:focus-visible) .ftds-radio--box {
+        outline: ${radio.focusOutlineWidth} solid ${radio.focusFocusRingColor};
+        outline-offset: ${radio.focusOutlineOffset};
+    }
+
+    .ftds-radio ftds-typography {
+        padding-right: 2px;
+    }
+`;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fluid-topics/ftds-radio",
+  "version": "2.1.0",
+  "description": "The design system radio component",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ftds-radio.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.js",
+    "build/**/*.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/design-system-variables": "3.5.0",
+    "@fluid-topics/ft-ripple": "2.1.0",
+    "@fluid-topics/ft-wc-utils": "2.1.0",
+    "@fluid-topics/ftds-typography": "2.1.0",
+    "lit": "3.1.0"
+  },
+  "devDependencies": {
+    "@fluid-topics/ft-wc-test-utils": "2.1.0"
+  },
+  "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}