@duetds/components 8.4.9 → 8.5.1

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

@@ -14,6 +14,19 @@ import { getColorByName } from "../../utils/token-utils";
  */
 export class DuetBanner {
     constructor() {
+        this.checkBannerSize = () => {
+            const elementSize = this.element.clientWidth;
+            if (elementSize < 500 || this.size === "small") {
+                this.currentSize = "small";
+            }
+            else if (elementSize < 900 || this.size === "medium") {
+                this.currentSize = "medium";
+            }
+            else {
+                this.currentSize = "large";
+            }
+            this.setButtonSize();
+        };
         /**
          * Default to smaller button size for small and medium banners.
          */
@@ -21,19 +34,20 @@ export class DuetBanner {
             if (this.hasActionSlot) {
                 const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
                 for (const button of buttons) {
-                    if (button && button.getAttribute("size") === null && this.size !== "large") {
+                    if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
                         button.size = "small";
                     }
                 }
             }
         };
+        this.currentSize = undefined;
         this.theme = "";
         this.margin = "auto";
         this.backgroundColor = "primary-lighter";
         this.iconColor = "gray-lightest";
         this.iconBackgroundColor = "primary";
         this.textColor = "secondary";
-        this.size = "auto";
+        this.size = "large";
         this.image = "";
         this.sources = undefined;
         this.icon = "";
@@ -49,6 +63,15 @@ export class DuetBanner {
         this.hasActionSlot = hasSlot(this.element, "action");
         checkNamedSlotElement(this.element, "heading", "span");
         this.setButtonSize();
+        setTimeout(() => {
+            this.checkBannerSize();
+        }, 0);
+    }
+    connectedCallback() {
+        window.addEventListener("resize", this.checkBannerSize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.checkBannerSize);
     }
     /**
      * render() function
@@ -68,8 +91,8 @@ export class DuetBanner {
         return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("aside", { class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
-                [this.size]: true,
-            }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.size === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.size === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
+                [this.currentSize]: true,
+            }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -233,19 +256,25 @@ export class DuetBanner {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "\"auto\" | \"small\" | \"medium\" | \"large\"",
-                    "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\"",
-                    "references": {}
+                    "original": "bannerSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "bannerSize": {
+                            "location": "local",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-banner/duet-banner.tsx",
+                            "id": "src/components/duet-banner/duet-banner.tsx::bannerSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the banner. \"large\" and \"medium\" are horizontal, \"small\" is vertical,\n\"auto\" is responsive and sets the size based on the window size."
+                    "text": "Maximum size of the banner. The banner will automatically switch to smaller sizes when space is not available.\nSizes \"large\" and \"medium\" are horizontal, \"small\" is vertical,"
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"auto\""
+                "defaultValue": "\"large\""
             },
             "image": {
                 "type": "string",
@@ -338,5 +367,10 @@ export class DuetBanner {
             }
         };
     }
+    static get states() {
+        return {
+            "currentSize": {}
+        };
+    }
     static get elementRef() { return "element"; }
 }

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

@@ -442,7 +442,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
                         }
                     }
@@ -562,7 +562,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonTextCentering": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
                         }
                     }
@@ -586,7 +586,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonWrapping": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
                         }
                     }
@@ -943,7 +943,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonIconSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
                         }
                     }
@@ -967,7 +967,7 @@ export class DuetButton {
                     "references": {
                         "DuetButtonSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
                             "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
                         }
                     }

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

@@ -118,7 +118,7 @@ export class DuetCaption {
                     "references": {
                         "DuetCaptionSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-caption/duet-caption.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-caption/duet-caption.tsx",
                             "id": "src/components/duet-caption/duet-caption.tsx::DuetCaptionSize"
                         }
                     }

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

@@ -190,7 +190,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardVariation"
                         }
                     }
@@ -361,7 +361,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardPadding": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardPadding"
                         }
                     }
@@ -484,7 +484,7 @@ export class DuetCard {
                     "references": {
                         "DuetCardToggleEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
                             "id": "src/components/duet-card/duet-card.tsx::DuetCardToggleEvent"
                         }
                     }

package/lib/collection/components/duet-checkbox/duet-checkbox.css

@@ -172,7 +172,8 @@
   color: rgb(224, 42, 13);
 }
 
-.duet-label-hidden .duet-label span {
+.duet-label-hidden .duet-label span,
+.duet-label-hidden .duet-checkbox-error span {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -535,7 +535,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -556,7 +556,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -577,7 +577,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }

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

@@ -260,7 +260,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
                         }
                     }
@@ -284,7 +284,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipSize"
                         }
                     }
@@ -512,7 +512,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -533,7 +533,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -554,7 +554,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }

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

@@ -110,7 +110,7 @@
   position: relative;
   z-index: 100;
   display: flex;
-  gap: 1rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -157,7 +157,6 @@
 }
 .checked > .duet-choice-label {
   padding: 1rem;
-  color: rgb(0, 119, 179) !important;
   background: rgb(243, 249, 252);
   border-color: rgb(0, 119, 179) !important;
   border-width: 2px;
@@ -166,7 +165,6 @@
   border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .checked > .duet-choice-label {
-  color: rgb(23, 28, 58) !important;
   background: rgb(245, 245, 247);
   border-color: rgb(23, 28, 58) !important;
 }
@@ -174,7 +172,7 @@
   border-color: rgb(198, 12, 48);
 }
 .checked.collapsible > .duet-choice-label, .collapsible-force-expanded.collapsible > .duet-choice-label {
-  padding-bottom: calc(1rem + 1px);
+  padding-bottom: calc(1rem + 2px) !important;
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -188,7 +186,7 @@
   border-color: rgb(144, 149, 153);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(23, 28, 58);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
@@ -227,6 +225,12 @@ input[disabled] + .duet-choice-label {
   background: rgb(245, 248, 250) !important;
   border-color: rgb(225, 227, 230) !important;
 }
+input[disabled] + .duet-choice-label .duet-choice-card-icon {
+  color: rgb(101, 119, 135);
+}
+.duet-theme-turva input[disabled] + .duet-choice-label .duet-choice-card-icon {
+  color: rgb(116, 116, 117);
+}
 input[disabled] + .duet-choice-label .duet-checkmark {
   border-color: rgb(101, 119, 135) !important;
 }
@@ -246,13 +250,11 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 .checked > input[disabled] + .duet-choice-label {
-  background: rgb(225, 227, 230) !important;
-  border-color: rgb(225, 227, 230) !important;
+  border-color: rgb(144, 149, 153) !important;
 }
 
 .duet-theme-turva .checked > input[disabled] + .duet-choice-label {
-  background: rgb(228, 228, 230) !important;
-  border-color: rgb(228, 228, 230) !important;
+  border-color: rgb(116, 116, 117) !important;
 }
 
 .duet-checkmark-container {
@@ -280,6 +282,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-radius: 50%;
 }
 [disabled] + label .duet-checkmark-container {
+  background: rgb(207, 210, 212) !important;
   border-color: rgb(207, 210, 212) !important;
 }
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
@@ -290,6 +293,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 207, 209) !important;
+  border-color: rgb(207, 207, 209) !important;
 }
 
 .duet-checkmark {
@@ -328,6 +332,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-icon {
   position: relative;
+  color: rgb(0, 119, 179);
+}
+.duet-theme-turva .duet-choice-card-icon {
+  color: rgb(173, 11, 43);
 }
 .duet-choice-card-icon duet-icon {
   display: block;
@@ -356,6 +364,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border: 1px solid rgb(225, 227, 230);
   border-top: 0;
   border-radius: 0 0 8px 8px;
+  transition: border-color 300ms ease;
 }
 @media (min-width: 36em) {
   .duet-choice-card-info, .duet-choice-card-collapsible {
@@ -382,9 +391,17 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 .duet-choice-card-collapsible.checked {
+  padding: 19px !important;
+  padding-top: 20px !important;
   border-color: rgb(0, 119, 179);
   border-width: 2px;
 }
+@media (min-width: 36em) {
+  .duet-choice-card-collapsible.checked {
+    padding: 27px !important;
+    padding-top: 28px !important;
+  }
+}
 .duet-choice-card-collapsible.checked.duet-theme-turva {
   border-color: rgb(23, 28, 58);
 }
@@ -412,13 +429,16 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   background: rgb(245, 245, 247);
   border-color: rgb(228, 228, 230);
 }
-.duet-choice-card-info .duet-choice-info-container:focus {
-  outline: none;
-}
 .duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container ::slotted(*) {
   display: none;
 }
 
+:host(.user-is-tabbing) .duet-choice-info-container:focus {
+  display: block;
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+
 :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(0, 119, 179);
   border-width: 2px;
@@ -427,6 +447,17 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(116, 116, 117);
 }
 
+:host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+  padding: 19px !important;
+  padding-top: 20px !important;
+}
+@media (min-width: 36em) {
+  :host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+    padding: 27px !important;
+    padding-top: 28px !important;
+  }
+}
+
 .duet-choice-info-toggle {
   display: flex;
   flex-shrink: 0;

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

@@ -6,7 +6,6 @@ import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
-import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
@@ -25,6 +24,9 @@ export class DuetChoice {
         this.expandId = createID("DuetChoiceExpand");
         this.headerId = createID("DuetChoiceHeader");
         this.infoButtonId = createID("DuetChoiceInfoButton");
+        /**
+         * Component event handling.
+         */
         this.onMouseEnter = () => {
             this.isHovering = true;
         };
@@ -75,7 +77,6 @@ export class DuetChoice {
             if (this.getDisabled()) {
                 return;
             }
-            this.isInfoOpen = false;
             // if it's a radio button, and it's already checked
             // we shouldn't fire an event, so exit early
             if (this.type === "radio" && this.checked) {
@@ -95,12 +96,11 @@ export class DuetChoice {
                 setTimeout(() => {
                     var _a;
                     (_a = this.infoContainer) === null || _a === void 0 ? void 0 : _a.focus();
-                });
+                }, 150);
             }
         };
         this.isHovering = false;
         this.isInfoOpen = false;
-        this.isBlurred = false;
         this.theme = "";
         this.label = "label";
         this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
@@ -168,30 +168,6 @@ export class DuetChoice {
         unsubscribeTabbingChange(this);
         this.duetChoiceRemove.emit();
     }
-    /**
-     * Component event handling.
-     */
-    handleHostBlur(ev) {
-        /**
-         * When moving away from a choice, collapse the info bar to assist visually impared people on focusing
-         */
-        if (this.hasInfo && this.isInfoOpen && this.isKeyDown) {
-            // @ts-ignore
-            const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
-            if (!isTargetContainedInHost) {
-                this.toggleInfo();
-            }
-        }
-    }
-    handleHostKeyDown() {
-        this.isKeyDown = true;
-    }
-    handleHostKeyUp(ev) {
-        this.isKeyDown = false;
-        if (isEscapeKey(ev) && this.isInfoOpen) {
-            this.toggleInfo();
-        }
-    }
     /**
      * Sets focus on the specified `duet-choice`. Use this method instead of the global
      * `input.focus()`.
@@ -205,6 +181,16 @@ export class DuetChoice {
     async toggleInfoMethod() {
         this.isInfoOpen = !this.isInfoOpen;
     }
+    handleEscape(e) {
+        if (isEscapeKey(e)) {
+            if (this.isInfoOpen) {
+                this.isInfoOpen = false;
+                if (this.infoButtonEl) {
+                    this.infoButtonEl.focus();
+                }
+            }
+        }
+    }
     /**
      * Should the collapsible content be announced by screen readers
      */
@@ -272,8 +258,6 @@ export class DuetChoice {
         if (Build.isServer) {
             return;
         }
-        const choiceGroup = this.element.closest("duet-choice-group");
-        const choiceGroupLabel = choiceGroup ? choiceGroup.label : undefined;
         const identifier = this.identifier || this.choiceId;
         return (h(Host, { class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
@@ -295,13 +279,13 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("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-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.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            } }, h("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-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.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { 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, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { 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", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { 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" }, h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))), this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
+            } }, 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));
     }
     static get is() { return "duet-choice"; }
     static get encapsulation() { return "scoped"; }
@@ -954,8 +938,7 @@ export class DuetChoice {
     static get states() {
         return {
             "isHovering": {},
-            "isInfoOpen": {},
-            "isBlurred": {}
+            "isInfoOpen": {}
         };
     }
     static get events() {
@@ -1015,7 +998,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1036,7 +1019,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1057,7 +1040,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1111,25 +1094,4 @@ export class DuetChoice {
         };
     }
     static get elementRef() { return "element"; }
-    static get listeners() {
-        return [{
-                "name": "blur",
-                "method": "handleHostBlur",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleHostKeyDown",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "handleHostKeyUp",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }];
-    }
 }