@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
@@ -19,11 +19,141 @@ import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
  */
 export class DuetChoice {
     constructor() {
+        this.focus = false;
         this.hasHeader = false;
         this.choiceId = createID("DuetChoice");
         this.expandId = createID("DuetChoiceExpand");
         this.headerId = createID("DuetChoiceHeader");
         this.infoButtonId = createID("DuetChoiceInfoButton");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.isHovering = false;
+        this.isInfoOpen = false;
+        /**
+         * Theme of the choice.
+         */
+        this.theme = "";
+        /**
+         * Label for the choice button.
+         */
+        this.label = "label";
+        /**
+         * Property to change accessibleLabelInfoButton defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelInfoButton when needed
+         */
+        this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
+        /**
+         * Accessible label that is read for screen reader users in the info toggle trigger button.
+         * Not visible for normal users.
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
+        /**
+         * Aria Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Additional caption to show inside the label of the choice button.
+         */
+        this.caption = "";
+        /**
+         * Type of the choice button. You can set the type of the choice to be either
+         * “radio” or “checkbox”. Depending on this selection we convey the selection
+         * type to assistive technologies as well. When type “radio” is chosen it is
+         * required to place the choices inside Choice Group component.
+         */
+        this.type = "checkbox";
+        /**
+         * Checked state of the choice button.
+         */
+        this.checked = false;
+        /**
+         * Makes the choice button open a new section underneath it when clicked or
+         * tapped. This new section can be used to show more options related to this
+         * choice. Please note that this feature can’t be used together with the "info"
+         * functionality and that it only accepts plain dom nodes (no shadow dom elements
+         * such as duet-paragraph can be used as this will break accessibility)
+         */
+        this.collapsible = false;
+        /**
+         * This attribute works only when the 'collapsible' attribute is set to true.
+         * It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
+         */
+        this.collapsibleForceExpanded = false;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Icon to display to the left of the choice button label.
+         */
+        this.icon = "";
+        /**
+         * Expands the choice button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Controls the padding of the component.
+         */
+        this.padding = "auto";
+        /**
+         * Makes the choice component disabled. This prevents users from being able to
+         * interact with the choice, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Accessible info label defaults
+         */
+        this.infoLabelDefaults = {
+            fi: "Lisätietoja vaihtoehdosta",
+            en: "More information about",
+            sv: "Mera information om",
+        };
+        /**
+         * Accessible info label
+         * @default  {
+         *     fi: "Lisätietoja vaihtoehdosta",
+         *     en: "More information about",
+         *     sv: "Mera information om",
+         *   }
+         */
+        this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
+        /**
+         * Accessible collapsible notification defaults
+         */
+        this.collapsibleNotificationDefaults = {
+            fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+            en: "This choice has additional information opened below",
+            sv: "Det här val har mer information som öppnades nedan",
+        };
+        /**
+         * Accessible collapsible notification. If a collapsible choice has no header, and contains other
+         * elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible
+         * notification of opening the collapsible content (added to aria-describedby).
+         * @default {
+         *    fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+         *    en: "This choice has additional information opened below",
+         *    sv: "Det här val har mer information som öppnades nedan",
+         *   }
+         */
+        this.collapsibleNotification = getLocaleString(this.collapsibleNotificationDefaults, getLanguage());
         this.radioInputListenersRemove = radioInput => {
             radioInput.removeEventListener("change", this.onChange);
             radioInput.removeEventListener("keydown", this.handleKeyDown);
@@ -36,45 +166,48 @@ export class DuetChoice {
             radioInput.addEventListener("focus", this.onFocus);
             radioInput.addEventListener("blur", this.onBlur);
         };
-        this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=choiceradioinput]");
-            const radioInput = slotInput || document.createElement("input");
-            radioInput.slot = "choiceradioinput";
-            radioInput.disabled = this.getDisabled();
-            radioInput.id = this.identifier || this.choiceId;
-            radioInput.type = "radio";
-            radioInput.name = this.name;
-            radioInput.value = this.value;
-            radioInput.checked = this.checked;
-            radioInput.required = this.required;
-            radioInput.ariaDescription = this.accessibleDescription;
+        this.inputSetUp = () => {
+            if (Build.isServer) {
+                return;
+            }
+            const slotInput = this.element.querySelectorAll(":scope > input");
+            const input = slotInput[slotInput.length - 1] || document.createElement("input");
+            input.slot = "choiceinput";
+            input.disabled = this.getDisabled();
+            input.id = this.identifier || this.choiceId;
+            input.type = this.type;
+            input.name = this.name;
+            input.value = this.value;
+            input.checked = this.checked;
+            input.required = this.required;
+            input.ariaDescription = this.accessibleDescription;
             if (this.accessibleControls) {
-                radioInput.setAttribute("aria-controls", this.accessibleControls);
+                input.setAttribute("aria-controls", this.accessibleControls);
             }
             if (this.accessibleActiveDescendant) {
-                radioInput.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
+                input.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
             }
             if (this.accessibleLabelledBy) {
-                radioInput.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+                input.setAttribute("aria-labelledby", this.accessibleLabelledBy);
             }
             if (this.accessibleDetails) {
-                radioInput.setAttribute("aria-details", this.accessibleDetails);
+                input.setAttribute("aria-details", this.accessibleDetails);
             }
             if (this.accessibleOwns) {
-                radioInput.setAttribute("aria-owns", this.accessibleOwns);
+                input.setAttribute("aria-owns", this.accessibleOwns);
             }
             if (this.getAriaDescribedby()) {
-                radioInput.setAttribute("aria-describedby", this.getAriaDescribedby());
+                input.setAttribute("aria-describedby", this.getAriaDescribedby());
             }
-            radioInput.ariaLabel = this.getLabel();
-            if (slotInput) {
-                this.radioInputListenersRemove(radioInput);
+            input.ariaLabel = this.getLabel();
+            if (slotInput.length > 0) {
+                this.radioInputListenersRemove(input);
             }
             else {
-                this.element.appendChild(radioInput);
+                this.element.appendChild(input);
             }
-            this.radioInputListenersAdd(radioInput);
-            this.focusableElement = radioInput;
+            this.radioInputListenersAdd(input);
+            this.focusableElement = input;
         };
         /**
          * Component event handling.
@@ -155,49 +288,6 @@ export class DuetChoice {
                 }, 150);
             }
         };
-        this.focus = false;
-        this.isHovering = false;
-        this.isInfoOpen = false;
-        this.theme = "";
-        this.label = "label";
-        this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.caption = "";
-        this.value = undefined;
-        this.type = "checkbox";
-        this.name = undefined;
-        this.checked = false;
-        this.collapsible = false;
-        this.collapsibleForceExpanded = false;
-        this.margin = "auto";
-        this.icon = "";
-        this.expand = false;
-        this.padding = "auto";
-        this.identifier = undefined;
-        this.groupDirection = undefined;
-        this.groupDisabled = undefined;
-        this.groupResponsive = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.infoLabelDefaults = {
-            fi: "Lisätietoja vaihtoehdosta",
-            en: "More information about",
-            sv: "Mera information om",
-        };
-        this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
-        this.collapsibleNotificationDefaults = {
-            fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
-            en: "This choice has additional information opened below",
-            sv: "Det här val har mer information som öppnades nedan",
-        };
-        this.collapsibleNotification = getLocaleString(this.collapsibleNotificationDefaults, getLanguage());
     }
     /**
      * Component lifecycle events.
@@ -221,14 +311,11 @@ export class DuetChoice {
         this.duetChoiceReady.emit();
     }
     componentDidRender() {
-        if (this.type === "radio") {
-            this.radioInputSetUp();
-        }
+        this.inputSetUp();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
         unsubscribeTabbingChange(this);
-        this.duetChoiceRemove.emit();
     }
     /**
      * Sets focus on the specified `duet-choice`. Use this method instead of the global
@@ -268,7 +355,7 @@ export class DuetChoice {
         if (this.accessibleDescribedBy) {
             return this.accessibleDescribedBy;
         }
-        if (this.collapsible || this.hasInfo) {
+        if ((this.collapsible || this.hasInfo) && this.getExpanded()) {
             if (this.hasHeader) {
                 return this.headerId;
             }
@@ -335,19 +422,19 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        const identifier = this.identifier || this.choiceId;
-        return (h(Host, { key: '95c3bf3494b8d33d7f30cd09b46a5542371c9252', class: {
+        return (h(Host, { key: '74c4b0c1afd04d78513d2f428df66aea0c755a30', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
-                "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
+                [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
+                "vertical-stretch": this.groupDirection === "horizontal",
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: '087bfe11a824d0dbe53285fddc1666b9b078fea7', class: {
+            } }, h("div", { key: '40f23ef0315551c972d13462c800fbc08170bb60', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'd0c3f8b55c14582927183cc12046d1bcf005031b', class: {
+            } }, h("div", { key: '0cc5f080734a81eb10bc8810c3416f8cc16a0d25', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -356,19 +443,19 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, this.type === "checkbox" && (h("input", { key: '2fcbc3765e11d789344ce8350afe6c0406d51a3e', class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-label": this.getLabel(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.focusableElement = input) })), h("slot", { key: '055e6d1ffd084a07626bace527c86fa830239818', name: "choiceradioinput" }), h("label", { key: '99586309cadfcf173411bb0533e78185835f4554', class: {
+            } }, h("slot", { key: '65d5bb2cd8c8c0b4f5ed9811b38b48b7335c0df4', name: "choiceinput" }), h("label", { key: '98b47986d36a16dc5349cd465c5273dc463aab1b', class: {
                 "duet-choice-label": true,
                 "has-before-text": this.hasBeforeText,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: 'c4cd8c27fe9d8b11e3db64e8964f8559dbd66130', name: "before-text" }), this.icon && (h("div", { key: '685779ca31a7d1f6827d0d7fe4bed7044aa0f2af', class: "duet-choice-card-icon" }, h("duet-icon", { key: '98804614219f404137fb630983a81bf08abc773a', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '6e5b7a8b3e5dbfa5d3f0a77104f2f2b1d332f6cc', class: "duet-choice-card-text" }, h("div", { key: '23e244b266355d1ea70ad12e9847903c59bb34e6' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: 'ddefb454ac0a3505a520dbb9484cd60b1a26827c' }, h("duet-spacer", { key: 'ae3957e6c8147bc379db21059f8584e44a55fd14', size: "xx-small" }), h("duet-caption", { key: 'f0a653783164ebc5b6d2bdd2acc537a9afd0b515', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '1665619173760a73a28ba685d950f737418d1ee5' }, h("duet-spacer", { key: '593fe55534da49906cc3a14ea4b13e8ff6903c0d', size: "xx-small" }), h("slot", { key: '8ea22bb8657c210bbddc57f03ce88fa5c23791e7', name: "additional" })))), h("div", { key: '4a5a62991e5e107bfe56e31e10509bb7bd5860ce' }, h("div", { key: 'ffd299c11348780fd2908d37cba9633a3946274a', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'b70b4052ee1b8479bbc98bcc4b55491b00fd1c94', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '0f7091a28c9ee79e5de07e72bb96d652f7dfed7c', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: 'b29fd679de70ab070b1b821dc4a2c8e091914073', name: "before-text" }), this.icon && (h("div", { key: '1881e659c9c7c4fbdb0935e54850f4f70c28975f', class: "duet-choice-card-icon" }, h("duet-icon", { key: '91d0be349f26a8c0f0bfae30ce809d6c98fdf833', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: 'e38af0b72bbd56517fc3cd08db6bd0e35d1941a0', class: "duet-choice-card-text" }, h("div", { key: 'afe1e13db8d21c88042eb740b03920c60ca3f0b8' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: 'db42771f819ba0b951458505be33fa27d96c626e' }, h("duet-spacer", { key: 'ece32f47f5c075f949156ae62ea4d53f2bc9a75a', size: "xx-small" }), h("duet-caption", { key: 'eb570008d5b29058acbe690a92e93cfaa66810e7', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: 'ddd0d7cf3e349528ae6ec6c013df72449aae340a' }, h("duet-spacer", { key: 'b8b542af5b875cb32591d12125726441bfc71927', size: "xx-small" }), h("slot", { key: '40409b224b5b2acdd0689cadc4332b8bff4750d9', name: "additional" })))), h("div", { key: 'ad56ee344580c7cb2a9abca5651375dd9d725e24' }, h("div", { key: '2c5bdf19e1001fd6bb57bfe3b2cdc44c217c64f7', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'cfea1353992716f4d965ce0db1869d9914db7bc6', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: 'c3073fdf9da1c74366e9fd43a07321587db86374', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'a6ce7e8b62192855cccf8989cf3f01abe95e32ef', class: "duet-choice-info-icon" }, h("duet-icon", { key: '62b112f3050dab7811bd7a0fb7354a88b60f702f', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: '4ffef77c7f061ecc78412b274b5974d37df32cd6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: '6fa70b3e97c81f44e8d4bdce9d1511680a19d674', class: "duet-choice-info-icon" }, h("duet-icon", { key: '2129ca97e0d1e45ca69cd17ad0dd5de7fd4dfafb', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: '4990fa0e4b60b0e87076113b5e302b06d55d566f', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
+            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
     }
     static get is() { return "duet-choice"; }
     static get encapsulation() { return "shadow"; }
@@ -386,6 +473,7 @@ export class DuetChoice {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -406,12 +494,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -426,12 +514,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "accessibleLabelInfoButtonDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-info-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -452,12 +540,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelInfoButton": {
                 "type": "string",
+                "attribute": "accessible-label-info-button",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -475,12 +563,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-button",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelInfoButtonDefaults)"
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -495,11 +583,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -514,11 +602,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -533,11 +621,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -552,11 +640,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -571,12 +659,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -591,12 +679,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -611,12 +699,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,12 +719,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -651,11 +739,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceType",
@@ -676,12 +764,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"checkbox\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -696,11 +784,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -715,12 +803,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "collapsible": {
                 "type": "boolean",
+                "attribute": "collapsible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -735,12 +823,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "collapsibleForceExpanded": {
                 "type": "boolean",
+                "attribute": "collapsible-force-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -755,12 +843,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible-force-expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -781,12 +869,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -801,12 +889,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -821,12 +909,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -847,12 +935,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -867,11 +955,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "groupDirection": {
                 "type": "string",
+                "attribute": "group-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -895,11 +983,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-direction",
                 "reflect": false
             },
             "groupDisabled": {
                 "type": "boolean",
+                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -917,33 +1005,39 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-disabled",
                 "reflect": false
             },
             "groupResponsive": {
-                "type": "boolean",
+                "type": "string",
+                "attribute": "group-responsive",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DuetChoiceGroupBreakpoint",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+                    "references": {
+                        "DuetChoiceGroupBreakpoint": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetChoiceGroupBreakpoint"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
-                            "text": "Determines whether the group has responsive behavior"
+                            "text": "Determines at which breakpoint the group has responsive behavior"
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-responsive",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -958,12 +1052,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -978,12 +1072,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "infoLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-info-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1004,12 +1098,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4tietoja vaihtoehdosta\",\n    en: \"More information about\",\n    sv: \"Mera information om\",\n  }"
             },
             "infoLabel": {
                 "type": "string",
+                "attribute": "info-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1027,12 +1121,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "info-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.infoLabelDefaults, getLanguage())"
             },
             "collapsibleNotificationDefaults": {
                 "type": "string",
+                "attribute": "accessible-collapsible-notification-default",
                 "mutable": false,
                 "complexType": {
                     "original": "| DuetLangObject\n    | string",
@@ -1053,12 +1147,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-collapsible-notification-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"T\u00E4m\u00E4 valinta sis\u00E4lt\u00E4\u00E4 lis\u00E4tietoja, jotka avautuivat alle\",\n    en: \"This choice has additional information opened below\",\n    sv: \"Det h\u00E4r val har mer information som \u00F6ppnades nedan\",\n  }"
             },
             "collapsibleNotification": {
                 "type": "string",
+                "attribute": "collapsible-notification",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1076,7 +1170,6 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible-notification",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.collapsibleNotificationDefaults,\n    getLanguage()\n  )"
             }
@@ -1110,26 +1203,6 @@ export class DuetChoice {
                         }
                     }
                 }
-            }, {
-                "method": "duetChoiceRemove",
-                "name": "duetChoiceRemove",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the component is removed from the DOM."
-                },
-                "complexType": {
-                    "original": "CustomEvent",
-                    "resolved": "CustomEvent<any>",
-                    "references": {
-                        "CustomEvent": {
-                            "location": "global",
-                            "id": "global::CustomEvent"
-                        }
-                    }
-                }
             }, {
                 "method": "duetChange",
                 "name": "duetChange",
@@ -1243,3 +1316,32 @@ export class DuetChoice {
     }
     static get elementRef() { return "element"; }
 }
+/*
+
+{this.type === "checkbox" && (
+              <input
+                class="duet-choice-input"
+                type={this.type}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+                onChange={this.onChange}
+                disabled={this.getDisabled()}
+                required={this.required}
+                id={identifier}
+                name={this.name}
+                value={this.value}
+                checked={this.checked}
+                aria-label={this.getLabel()}
+                aria-controls={this.accessibleControls}
+                aria-activedescendant={this.accessibleActiveDescendant}
+                aria-labelledby={this.accessibleLabelledBy}
+                aria-details={this.accessibleDetails}
+                aria-description={this.accessibleDescription}
+                aria-owns={this.accessibleOwns}
+                aria-describedby={this.getAriaDescribedby()}
+                onKeyDown={this.handleKeyDown}
+                ref={input => (this.focusableElement = input)}
+              ></input>
+            )}
+
+*/