@fluid-topics/ft-chip-choice 2.0.16 → 2.0.18

package/build/ft-chip-choice-option.d.ts

@@ -1,4 +1,3 @@
-import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtChipChoiceOptionProperties } from "./ft-chip-choice-option.properties";
 import { FtChip } from "@fluid-topics/ft-chip";
@@ -20,7 +19,5 @@ export declare class FtChipChoiceOption extends FtLitElement implements FtChipCh
     chip: FtChip;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
-    private onKeyDown;
-    protected update(changedProperties: PropertyValues): void;
-    private onChange;
+    private onInputChange;
 }

package/build/ft-chip-choice-option.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { property, query, } from "lit/decorators.js";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
 import { optionStyles } from "./ft-chip-choice-option.styles";
 import { FtChip } from "@fluid-topics/ft-chip";
+import { FtIcons } from "ft-icon/build";
 export class FtChipChoiceOptionChangeEvent extends CustomEvent {
     constructor(value, selected) {
         super("ft-chip-choice-option-change", { detail: { value: value, selected: selected }, bubbles: true, composed: true });
@@ -27,39 +28,33 @@ export class FtChipChoiceOption extends FtLitElement {
     }
     render() {
         return html `
-            <ft-chip clickable
-                     part="chip"
-                     icon=${this.selected ? "CHECK" : ""}
-                     label=${this.label}
-                     ?dense=${this.dense}
-                     ?highlighted=${this.selected}
-                     ?multiLine=${this.multiLine}
-                     @click=${this.onChange}
-                     @keydown=${this.onKeyDown}>
-                <slot></slot>
-            </ft-chip>
+            <label>
+                <input
+                    type="${this.role === "radio" ? "radio" : "checkbox"}"
+                    name="${this.name}"
+                    value="${this.value}"
+                    .checked=${this.selected}
+                    aria-label="${this.label}"
+                    @change=${this.onInputChange}
+                />
+                <ft-chip
+                    icon="${this.selected ? FtIcons.CHECK : ""}"
+                    label="${this.label}"
+                    ?dense=${this.dense}
+                    ?highlighted=${this.selected}
+                    ?multiLine=${this.multiLine}>
+                    <slot></slot>
+                </ft-chip>
+            </label>
         `;
     }
-    onKeyDown(e) {
-        // Prevent the page from scrolling on space by default
-        if (e.key == " ") {
-            e.preventDefault();
-        }
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has("selected")) {
-            this.ariaChecked = this.selected ? "true" : "false";
-        }
-    }
-    onChange(event) {
-        event.preventDefault();
-        this.selected = !this.selected;
+    onInputChange(event) {
+        this.selected = event.target.checked;
         this.dispatchEvent(new FtChipChoiceOptionChangeEvent(this.value, this.selected));
     }
 }
 FtChipChoiceOption.elementDefinitions = {
-    "ft-chip": FtChip
+    "ft-chip": FtChip,
 };
 FtChipChoiceOption.styles = optionStyles;
 __decorate([
@@ -81,7 +76,7 @@ __decorate([
     property({ type: Boolean })
 ], FtChipChoiceOption.prototype, "multiLine", void 0);
 __decorate([
-    property({ reflect: true, attribute: "role" })
+    property()
 ], FtChipChoiceOption.prototype, "role", void 0);
 __decorate([
     query("ft-chip")

package/build/ft-chip-choice-option.styles.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtChipCssVariables, FtChipHighlightedCssVariables } from "@fluid-topics/ft-chip/build/ft-chip.styles";
+import { designSystemVariables, FtCssVariableFactory, setVariable, } from "@fluid-topics/ft-wc-utils";
+import { FtChipCssVariables, FtChipHighlightedCssVariables, } from "@fluid-topics/ft-chip/build/ft-chip.styles";
 export const FtChipChoiceOptionCssVariables = {
     color: FtCssVariableFactory.create("--ft-chip-choice-option--color", "", "COLOR", designSystemVariables.colorOnSurface),
     borderColor: FtCssVariableFactory.create("--ft-chip-choice-option--border-color", "", "COLOR", designSystemVariables.colorOutline),
@@ -10,7 +10,26 @@ export const FtChipChoiceOptionCssVariables = {
 };
 // language=CSS
 export const optionStyles = css `
-    [part="chip"] {
+    label {
+        display: contents;
+    }
+
+    input {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    input:focus + ft-chip::part(chip) {
+        outline: 2px solid ${designSystemVariables.colorPrimary};
+        outline-offset: 2px;
+    }
+
+    ft-chip::part(chip) {
         ${setVariable(FtChipCssVariables.color, FtChipChoiceOptionCssVariables.color)};
         ${setVariable(FtChipCssVariables.borderColor, FtChipChoiceOptionCssVariables.borderColor)};
         ${setVariable(FtChipCssVariables.backgroundColor, FtChipChoiceOptionCssVariables.backgroundColor)};