@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-chip/duet-chip.js

@@ -4,10 +4,11 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { enableUserIsTabbing, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetChip {
     constructor() {
+        this.focus = false;
         /**
          * Own Properties.
          */
@@ -22,6 +23,47 @@ export class DuetChip {
             en: "Selected, remove with backspace",
             sv: "Valt, ta bort med backsteg",
         };
+        this.inputChipHover = false;
+        this.inputChipDeleteFocus = false;
+        /**
+         * Variation of the chip.
+         * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
+         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
+         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         */
+        this.variation = "button";
+        /**
+         * Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button.
+         */
+        this.size = "medium";
+        /**
+         * Icon to display to the left of the chip content.
+         */
+        this.icon = "";
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected
+         * chip. If a chip is not selected, backspace key should select it.
+         * @internal
+         */
+        this.selected = false;
+        /**
+         * Checked state of the filter chip.
+         */
+        this.checked = false;
+        /**
+         * Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action.
+         * Not available for the input variation.
+         */
+        this.disabled = false;
+        /**
+         * Use this property to add an aria-haspopup attribute.
+         */
+        this.accessiblePopup = "false";
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -41,7 +83,7 @@ export class DuetChip {
             radioInput.addEventListener("blur", this.onBlur);
         };
         this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=input]");
+            const slotInput = this.element.querySelector("input");
             const radioInput = slotInput || document.createElement("input");
             radioInput.slot = "input";
             radioInput.ariaDisabled = this.disabled ? "true" : undefined;
@@ -50,6 +92,7 @@ export class DuetChip {
             radioInput.name = this.name;
             radioInput.value = this.value;
             radioInput.checked = this.checked;
+            radioInput.ariaLabel = this.element.textContent;
             if (slotInput) {
                 this.radioInputListenersRemove(radioInput);
             }
@@ -186,25 +229,6 @@ export class DuetChip {
             });
             this.element.remove();
         };
-        this.focus = false;
-        this.popupElement = undefined;
-        this.popupOpen = undefined;
-        this.inputChipHover = false;
-        this.inputChipDeleteFocus = false;
-        this.accessibleLabel = undefined;
-        this.variation = "button";
-        this.size = "medium";
-        this.popup = undefined;
-        this.icon = "";
-        this.theme = "";
-        this.identifier = undefined;
-        this.value = undefined;
-        this.name = undefined;
-        this.selected = false;
-        this.checked = false;
-        this.disabled = false;
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "false";
     }
     clearOtherRadioButtons() {
         if (this.variation === "radio" && this.checked) {
@@ -216,11 +240,17 @@ export class DuetChip {
             });
         }
     }
+    removeDisabledAttributeWhenFalse() {
+        if (!this.disabled) {
+            this.element.removeAttribute("disabled");
+        }
+    }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.removeDisabledAttributeWhenFalse();
         this.popupSetUp();
         this.enforceNoDisabledSelected();
     }
@@ -262,6 +292,7 @@ export class DuetChip {
      * Sets focus. Use this method instead of the global focus().
      */
     async setFocus(options) {
+        enableUserIsTabbing();
         setTimeout(() => this.focusableElement.focus(options), 200);
     }
     /**
@@ -301,7 +332,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'c807c6a1d6acd3d0962de84a928a38cf53236a5a', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '654486c3496a0967a02987d40d8b8bd03c8d1670', class: classes }, h("button", Object.assign({ key: '819d1fadbf81a1e7deea06efc7c8ad55544f77bb', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '043b8a685b69fd201c8a081902f6197c87201d95', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7ca324221a0d9408218d525187d3dcda8e006946', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '0cda4e568fc73c0e51053068649a1d1fb4fc1177' })))), this.variation === "input" && (h("span", { key: '4bdfa14a7478fe54a31d6d3519fe7a38a28e8a64', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '60f136d595f23bec8a342b725826b824f72be70d', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '8e9e702baeb8b2fe5fdc3767e679dbe938adf2c8', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '799c6adbd554313f3500698037c0441bd784ec14', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b1b7649a3beff52e78f0d2007446b4284c13301d' })), h("button", { key: 'b28b696e73ece749bc5c3ac0a731eb12a74da0fb', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '77be3ad13c9f382af3f937ed5b1310b966e51a9f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '93b90e998c5a818f72f0d6d93d236ca292027a2f', class: classes }, h("input", Object.assign({ key: 'fbc7ce95bc52c216fa093d8f8626953ffb813329', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '820f38348fd3237fa736c42db58592aceecbc6d8', htmlFor: identifier }, this.icon && (h("span", { key: '8053c7905e2d4b3e307122ed0019abf487f33ddb', class: "duet-chip-icon-container" }, h("duet-icon", { key: '62b6b611984e54ec22ac7f893e913a13ed79f183', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'bc6cc9a473b6e2ff0579bf2ed90bb9b93676217c', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '6acef4f05a0f83c4678687dd3ca78cdaf1b85047' }), this.popupElement && (h("span", { key: '04fd8374230c5f07247d141543e6ed469d5a2f3e', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '2bda624c98b44339a4107b9619873ce1cc3257b6', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'fb27bb6b3d1d4bbb71a2f5f3da20fdce13e1f3dc', class: classes }, h("slot", { key: 'a1a2b8eabfae06bcbbab88b3578598cceac14be7', name: "input" }), h("label", { key: 'e81d7abd6774b9980454d70548c8c23ffb62a083', htmlFor: identifier }, this.icon && (h("span", { key: 'ef056f08b0f3aa56ec9403066f9c49c106405d42', class: "duet-chip-icon-container" }, h("duet-icon", { key: '1e7dc968a93057da85bfad2d9311f9cb1345671e', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'fc5ecbe16b5154635cfbb6bd4d1422eaf118b837', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'bec129dc84a1a901d84dfd5b57bf3f0f455e1822' }))))));
+        return (h(Host, { key: 'fec47aedb512eead9eb64575e8f98b678e53f41d', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'eff19ffc79c16ebd3bacbbdf5fb02ce1feb26c49', class: classes }, h("button", Object.assign({ key: '7e2f2da2eb55db53d182bab0283746543bbf7052', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '8ed98fe02241fe8ba40388532df90c056697a8eb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'c9e40650866119a9c8609bce2525fb2e0ae7a4b7', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '91d3860bd84c5665487440a84dc7139cc057da9b' })))), this.variation === "input" && (h("span", { key: '0edd53d2a0b5eaf47e8a7ba9260997ab8a893a90', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '1390d0b60f05efe534ce7a93e0fd1e1013b4fcf7', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'a77442337da66dcca7e46eac520ea2601a0f200e', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'a95497c8e5dd1fbeb97715f19678c66448fc3981', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b4d281bfb01a611d911b4ee1780c1c36df499943' })), h("button", { key: '621d6fc5dc6d2f820ab8f570921ee8335d6992dd', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: 'bc8ef1b7a5026b38f088507488e372eb94fe24d3', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'a23d77fb07a75d9dad213738cde1b8f7fc065a75', class: classes }, h("input", Object.assign({ key: 'bece465fae4c3428c895cb1e28f5bb370f7226d7', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'c8ca07278535a0735aaf0b3609b057b7b07d73a7', htmlFor: identifier }, this.icon && (h("span", { key: 'b2040b8ad45d57cae370db873126f6af04103e35', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'de63c47bcd290a7bb278d18044dcbb59f3d36bdd', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'e85e6a5937affd776ad433d0fff928e2985606f6', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'be966f534808d4c13283c7a428b8bd5f220f57ac' }), this.popupElement && (h("span", { key: '1f3d21e7eba82aa859081602aa42a9f84d320de2', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'af6883b215be51bbfd4d4a763f9a7f93a3196368', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '30bd7e485658623c6bb9ee6f72f6e90a145fcd62', class: classes }, h("slot", { key: 'da5cb9135a68d3d76a81d5c129b4065dc79dcb58', name: "input" }), h("label", { key: 'bc19df62252b9a253d26bc989c6c8120c89d56a3', htmlFor: identifier }, this.icon && (h("span", { key: 'd35af1432d982b9ba952abed1395b90748501f11', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'd75598a3891d73aaac169b59201294c462fe3e5c', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '88a3bbd9d095a53fef6b723f96fc3818b28889db', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '7c2b2e07d9b91726f23248f13abe2c7a0816ddfe' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -319,6 +350,7 @@ export class DuetChip {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -333,11 +365,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChipVariation",
@@ -358,12 +390,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"button\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChipSize",
@@ -384,12 +416,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "popup": {
                 "type": "string",
+                "attribute": "popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -404,11 +436,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "popup",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -429,12 +461,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -455,12 +487,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -475,11 +507,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -494,11 +526,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -513,11 +545,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -535,12 +567,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -555,12 +587,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -575,12 +607,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -595,11 +627,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -614,7 +646,6 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
             }
@@ -787,6 +818,9 @@ export class DuetChip {
         return [{
                 "propName": "checked",
                 "methodName": "clearOtherRadioButtons"
+            }, {
+                "propName": "disabled",
+                "methodName": "removeDisabledAttributeWhenFalse"
             }];
     }
 }

package/lib/collection/components/duet-choice/duet-checkmark.css

@@ -71,4 +71,8 @@
     height: 11.8518518519px;
     opacity: 1;
   }
+}
+:host(.duet-theme-turva2.duet-theme-turva) .checked .duet-checkmark-container {
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59) !important;
 }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -5,10 +5,25 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 export class DuetCheckmark {
     constructor() {
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Checked
+         */
         this.checked = false;
+        /**
+         * Checked
+         */
         this.presentationOnly = false;
+        /**
+         * Checked
+         */
         this.center = false;
+        /**
+         * Type
+         */
         this.type = "checkbox";
     }
     /**
@@ -18,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '3335002173407bc53f41ea2f00546e1bd2d7409a', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '425322a3f86e075e76d6d3bcd17580954b4e0b32', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'd4fe569278f4c88e090bbbafd65e5422027a0551', class: {
+        return (h(Host, { key: '9f320db3e8549d7d12de134f013789c1f412b947', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'a8fe605a230fd34d9714bd5194c281b87394bd24', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '91fabdc145a023efc8317ef543296d4e5e2509d9', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'ad4abd3130942074b35869850cc3b386a8ae5dde', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '9a418c3b3cd7c451f52003eb5efe16e90a4d5841', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {
@@ -39,6 +54,7 @@ export class DuetCheckmark {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -59,12 +75,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -79,12 +95,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "presentationOnly": {
                 "type": "boolean",
+                "attribute": "presentation-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -99,12 +115,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "presentation-only",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "center": {
                 "type": "boolean",
+                "attribute": "center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -119,12 +135,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceType",
@@ -145,7 +161,6 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"checkbox\""
             }