@fluid-topics/ftds-checkbox 2.1.0

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

@@ -0,0 +1,10 @@
+export interface FtdsCheckboxProperties {
+    name: string;
+    value: string;
+    label: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    legendColor: string;
+    helper: string;
+}

package/build/ftds-checkbox.properties.js

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

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

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

package/build/ftds-checkbox.styles.js

@@ -0,0 +1,159 @@
+import { checkbox } from "@fluid-topics/ft-wc-utils";
+import { css } from "lit";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+import { FtdsIconCssVariables } from "@fluid-topics/ftds-icon";
+// language=CSS
+export const styles = css `
+    * {
+        box-sizing: border-box;
+        --input-size: calc(${checkbox.boxSize} + 2 * (${checkbox.focusOutlineOffset} + ${checkbox.focusOutlineWidth}));
+        --input-margin: calc(-1 * ${checkbox.focusOutlineOffset} - ${checkbox.focusOutlineWidth});
+    }
+
+    [part="checkbox-label-and-helper"] {
+        display: flex;
+        flex-direction: column;
+        align-items: self-start;
+        gap: ${checkbox.helperPaddingTop};
+    }
+
+    [part="checkbox-and-popover"] {
+        display: flex;
+        align-items: flex-start;
+        gap: ${checkbox.labelHorizontalGap};
+    }
+
+    [part="checkbox-popover"] {
+        flex: 0 0 auto;
+        height: ${checkbox.boxSize};
+
+    }
+
+    [part="checkbox-popover-wrapper"] {
+        margin-top: -5px;
+    }
+
+    [part="checkbox-helper"] {
+        display: block;
+        color: ${checkbox.helperTextColor};
+        margin-left: calc(${checkbox.boxSize} + ${checkbox.horizontalGap});
+
+        &.ftds-checkbox-helper--disabled {
+            background-color: transparent;
+            opacity: ${checkbox.uncheckedDisabledComponentOpacity};
+        }
+
+        &.ftds-checkbox-helper--disabled.ftds-checkbox-helper--checked, &.ftds-checkbox-helper--disabled.ftds-checkbox-helper--indeterminate {
+            background-color: transparent;
+            opacity: ${checkbox.checkedDisabledComponentOpacity};
+        }
+
+        &.ftds-checkbox-helper--legend-color-displayed {
+            margin-left: calc(${checkbox.boxSize} + (${checkbox.horizontalGap} * 2 + ${checkbox.colorLegendSize}));
+        }
+    }
+
+    .ftds-checkbox {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: ${checkbox.horizontalGap};
+        color: ${checkbox.color};
+
+        input {
+            opacity: 0;
+            position: absolute;
+            flex: 0 0 auto;
+            width: var(--input-size);
+            height: var(--input-size);
+            border-radius: ${checkbox.borderRadius};
+        }
+
+        .ftds-checkbox--box-container {
+            position: relative;
+            display: flex;
+            flex: 0 0 auto;
+            justify-content: center;
+            align-items: center;
+            width: var(--input-size);
+            height: var(--input-size);
+            margin: var(--input-margin);
+            border-radius: ${checkbox.borderRadius};
+        }
+
+        .ftds-checkbox--box-container:has(:focus-visible) {
+            outline: ${checkbox.focusOutlineWidth} solid ${checkbox.focusFocusRingColor};
+            outline-offset: calc(${checkbox.focusOutlineWidth} * -1);
+        }
+
+        .ftds-checkbox--box {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            box-shadow: inset 0 0 0 ${checkbox.borderWidth} ${checkbox.uncheckedBorderColor};
+            border-radius: ${checkbox.borderRadius};
+            width: ${checkbox.boxSize};
+            height: ${checkbox.boxSize};
+            color: ${checkbox.checkedIconColor};
+
+            ftds-icon {
+                ${FtdsIconCssVariables.size.set(checkbox.iconSize)};
+            }
+        }
+
+        &.ftds-checkbox--disabled {
+            background-color: transparent;
+            opacity: ${checkbox.uncheckedDisabledComponentOpacity};
+        }
+
+        ft-ripple {
+            flex: 0 0 auto;
+            z-index: 0;
+            ${FtRippleCssVariables.color.set(checkbox.uncheckedStateLayerColor)};
+            ${FtRippleCssVariables.backgroundColor.set(checkbox.uncheckedStateLayerColor)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(checkbox.uncheckedHoverStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(checkbox.uncheckedFocusStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfacePressed.set(checkbox.uncheckedActiveStateLayerOpacity)};
+            ${FtRippleCssVariables.borderRadius.set(checkbox.focusOutlineBorderRadius)};
+        }
+
+        [part="checkbox-legend-color"] {
+            flex: 0 0 auto;
+            margin-top: calc((${checkbox.boxSize} - ${checkbox.colorLegendSize}) / 2);
+            width: ${checkbox.colorLegendSize};
+            height: ${checkbox.colorLegendSize};
+            border-radius: 50%;
+        }
+    }
+
+    .ftds-checkbox--checked, .ftds-checkbox--indeterminate {
+        color: ${checkbox.color};
+
+        .ftds-checkbox--box {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: ${checkbox.checkedBackgroundColor};
+            box-shadow: inset 0 0 0 ${checkbox.borderWidth} ${checkbox.checkedBackgroundColor};
+            color: ${checkbox.checkedIconColor};
+        }
+
+        &.ftds-checkbox--disabled {
+            opacity: ${checkbox.checkedDisabledComponentOpacity};
+        }
+
+        .ftds-checkbox--checkmark {
+            opacity: 1;
+        }
+
+        ft-ripple {
+            z-index: 0;
+            ${FtRippleCssVariables.color.set(checkbox.checkedStateLayerColor)};
+            ${FtRippleCssVariables.backgroundColor.set(checkbox.checkedStateLayerColor)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(checkbox.checkedHoverStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(checkbox.checkedFocusStateLayerOpacity)};
+            ${FtRippleCssVariables.opacityContentOnSurfacePressed.set(checkbox.checkedActiveStateLayerOpacity)};
+            ${FtRippleCssVariables.borderRadius.set(checkbox.focusOutlineBorderRadius)};
+        }
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-checkbox.styles";
+export * from "./ftds-checkbox.properties";
+export * from "./ftds-checkbox";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-checkbox.styles";
+export * from "./ftds-checkbox.properties";
+export * from "./ftds-checkbox";
+import "./define";

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@fluid-topics/ftds-checkbox",
+    "version": "2.1.0",
+    "description": "The design system checkbox component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-checkbox.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-icon": "2.1.0",
+        "@fluid-topics/ftds-link": "2.1.0",
+        "@fluid-topics/ftds-popover": "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"
+}