@fluid-topics/ft-radio 1.3.15 → 1.3.16

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

@@ -6,4 +6,4 @@ export declare const FtRadioCssVariables: {
     borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
-export declare const styles: import("lit").CSSResult;
+export declare const classicStyles: import("lit").CSSResult;

package/build/ft-radio.styles.js

@@ -10,7 +10,7 @@ export const FtRadioCssVariables = {
     colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
 };
 // language=CSS
-export const styles = css `
+export const classicStyles = css `
     * {
         box-sizing: border-box;
     }

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

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

@@ -0,0 +1,15 @@
+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";
+class FtdsRadioGroup extends toFtdsBase(FtBaseRadioGroup) {
+    constructor() {
+        super(...arguments);
+        this.family = DesignSystemFamily.brand;
+    }
+}
+FtdsRadioGroup.styles = [
+    safariEllipsisFix,
+    designSystemGroupStyles,
+];
+export { FtdsRadioGroup };

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

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

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

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

@@ -0,0 +1,11 @@
+import { FtBaseRadio, FtBaseRadioProperties } from "./ft-base-radio";
+import { ClassInfo } from "lit/directives/class-map.js";
+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 {
+    family: DesignSystemFamily;
+    static styles: import("lit").CSSResult[];
+    get radioClasses(): ClassInfo;
+    get typographyVariant(): string;
+}
+export {};

package/build/ftds-radio.js

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

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 designSystemStyles: import("lit").CSSResult;

package/build/ftds-radio.styles.js

@@ -0,0 +1,113 @@
+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;
+        --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};
+
+        display: inline-flex;
+        align-items: center;
+        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-typography {
+        padding-right: 2px;
+    }
+`;

package/build/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./ft-radio";
 export * from "./ft-radio.styles";
-export * from "./ft-radio.properties";
+export * from "./ftds-radio";
+export * from "./ftds-radio.styles";
 export * from "./ft-radio-group";
 export * from "./ft-radio-group.styles";
-export * from "./ft-radio-group.properties";
+export * from "./ftds-radio-group";
+export * from "./ftds-radio-group.styles";

package/build/index.js

@@ -1,11 +1,17 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtRadio } from "./ft-radio";
+import { FtdsRadio } from "./ftds-radio";
 import { FtRadioGroup } from "./ft-radio-group";
+import { FtdsRadioGroup } from "./ftds-radio-group";
 export * from "./ft-radio";
 export * from "./ft-radio.styles";
-export * from "./ft-radio.properties";
+export * from "./ftds-radio";
+export * from "./ftds-radio.styles";
 export * from "./ft-radio-group";
 export * from "./ft-radio-group.styles";
-export * from "./ft-radio-group.properties";
+export * from "./ftds-radio-group";
+export * from "./ftds-radio-group.styles";
 customElement("ft-radio")(FtRadio);
+customElement("ftds-radio")(FtdsRadio);
 customElement("ft-radio-group")(FtRadioGroup);
+customElement("ftds-radio-group")(FtdsRadioGroup);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-radio",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "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": "1.3.15",
-    "@fluid-topics/ft-typography": "1.3.15",
-    "@fluid-topics/ft-wc-utils": "1.3.15",
+    "@fluid-topics/ft-ripple": "1.3.16",
+    "@fluid-topics/ft-typography": "1.3.16",
+    "@fluid-topics/ft-wc-utils": "1.3.16",
     "lit": "3.1.0"
   },
-  "gitHead": "5aa2861244264a93f9ce941c3541191eb22a4650"
+  "gitHead": "092d409b397263ffef1f860386137eea8e5f7c2c"
 }

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

@@ -1,3 +0,0 @@
-export interface FtRadioGroupProperties {
-    name: string;
-}

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

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

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

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

package/build/ft-radio.properties.js

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