@duetds/components 8.5.0 → 8.5.2

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-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-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, 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() {
@@ -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
-            }];
-    }
 }

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

@@ -44,18 +44,14 @@
 .duet-combobox-list {
   position: absolute;
   top: calc(100% - 12px);
-  height: 0;
-  overflow: hidden;
+  z-index: 700;
+  display: none;
   background: rgb(255, 255, 255);
   border-radius: 0 4px;
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.1);
-  opacity: 0;
 }
 .duet-combobox-list.open {
-  z-index: 700;
   display: block;
-  height: auto;
-  opacity: 1;
 }
 .duet-combobox-list .duet-combobox-listbox {
   max-height: 200px;

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

@@ -3,6 +3,7 @@
  */
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
@@ -10,6 +11,7 @@ import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
 export class DuetCombobox {
     constructor() {
+        this.listBoxId = createID("duet-combobox-list-element");
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b;
             // otherwise, something is wrong, expecting 1 element only
@@ -19,6 +21,52 @@ export class DuetCombobox {
                 // this.listElement.style.width = `${currentWidth + 1}px`
             }
         }, 100));
+        this.handleInputKeyDownEvent = (e) => {
+            //if selection is made, close the list and update internal and external values
+            // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+            // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+            this.input.accessibleActiveDescendant = undefined;
+            if (isEnterKey(e)) {
+                e.preventDefault();
+                this.selectActiveItem();
+                this.updateInputText(false);
+                this.listOpen = false;
+                return;
+            }
+            //tabbing out or escaping, restore initial state
+            if (isEscapeKey(e) || isTabKey(e)) {
+                this.updateInputText(true);
+                this.listOpen = false;
+                return;
+            }
+            //handle arrow up/down navigation
+            let nextActiveItem = this.activeItem;
+            if (isArrowUpKey(e)) {
+                e.preventDefault();
+                nextActiveItem = this.activeItem - 1;
+            }
+            else if (isArrowDownKey(e)) {
+                e.preventDefault();
+                nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+                this.listOpen = true;
+            }
+            if (isArrowDownKey(e) || isArrowUpKey(e)) {
+                const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+                if (nextActiveItem < 0 || !nextActiveItem) {
+                    nextActiveItem = 0;
+                }
+                if (nextActiveItem >= listItems.length) {
+                    nextActiveItem = listItems.length - 1;
+                }
+                // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+                // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+                this.input.accessibleActiveDescendant = "active_item";
+                this.activeItem = nextActiveItem;
+                this.scrollToActive();
+            }
+            this.announceActive();
+            return;
+        };
         this.processedItems = null;
         this.inputWidth = 0;
         this.inputValue = "";
@@ -86,6 +134,7 @@ export class DuetCombobox {
         if (this.openListOnClick) {
             this.input.icon = this.listOpen ? "action-arrow-up" : "action-arrow-down";
         }
+        this.input.accessibleExpanded = this.listOpen ? "true" : "false";
     }
     /**
      * Component lifecycle events.
@@ -108,11 +157,13 @@ export class DuetCombobox {
                 this.listOpen = !this.listOpen;
             }
         });
-        this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+        this.element.addEventListener("keydown", this.handleInputKeyDownEvent);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         //add correct aria attributes to the input element
+        this.input.role = "combobox";
+        this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
-        this.input.accessibleControls = "duet-combobox-list-element";
+        this.input.accessibleControls = this.listBoxId;
         this.processListOpenChange();
     }
     disconnectedCallback() {
@@ -121,7 +172,7 @@ export class DuetCombobox {
         }
         this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
         this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
-        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent);
         this.listElement.removeEventListener("click", e => {
             e.stopPropagation();
         });
@@ -215,13 +266,20 @@ export class DuetCombobox {
             this.activeItem = undefined;
             this.value = item[0].value;
         }
-        if (isBlurred && this.selectedItems.size === 0) {
-            //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
-            if (this.force) {
-                this.inputValue = "";
-                this.input.value = "";
+        if (isBlurred) {
+            if (this.selectedItems.size === 0) {
+                this.activeItem = undefined;
+                if (this.force) {
+                    this.inputValue = "";
+                    this.input.value = "";
+                }
+            }
+            else if (this.force) {
+                const selectedValueIndex = [...this.selectedItems][0];
+                const selectedValueLabel = await this.formatItem(this.items[selectedValueIndex]);
+                this.inputValue = selectedValueLabel;
+                this.input.value = selectedValueLabel;
             }
-            this.activeItem = undefined;
         }
         this.listOpen = false;
     }
@@ -230,52 +288,6 @@ export class DuetCombobox {
         this.inputValue = e.detail.value;
         this.listOpen = String(this.inputValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
-    handleInputKeyDownEvent(e) {
-        //if selection is made, close the list and update internal and external values
-        // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-        // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-        this.input.accessibleActiveDescendant = undefined;
-        if (isEnterKey(e)) {
-            e.preventDefault();
-            this.selectActiveItem();
-            this.updateInputText(false);
-            this.listOpen = false;
-            return;
-        }
-        //tabbing out or escaping, restore initial state
-        if (isEscapeKey(e) || isTabKey(e)) {
-            this.updateInputText(true);
-            this.listOpen = false;
-            return;
-        }
-        //handle arrow up/down navigation
-        let nextActiveItem = this.activeItem;
-        if (isArrowUpKey(e)) {
-            e.preventDefault();
-            nextActiveItem = this.activeItem - 1;
-        }
-        else if (isArrowDownKey(e)) {
-            e.preventDefault();
-            nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-            this.listOpen = true;
-        }
-        if (isArrowDownKey(e) || isArrowUpKey(e)) {
-            const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
-            if (nextActiveItem < 0 || !nextActiveItem) {
-                nextActiveItem = 0;
-            }
-            if (nextActiveItem >= listItems.length) {
-                nextActiveItem = listItems.length - 1;
-            }
-            // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-            // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-            this.input.accessibleActiveDescendant = "active_item";
-            this.activeItem = nextActiveItem;
-            this.scrollToActive();
-        }
-        this.announceActive();
-        return;
-    }
     selectActiveItem() {
         if (this.activeItem === undefined) {
             return;
@@ -357,7 +369,7 @@ export class DuetCombobox {
             return;
         }
         const selectElements = this.returnFilteredOrNonFiltered();
-        return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
+        return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
             } }, h("slot", null), h("div", { class: {
@@ -366,7 +378,7 @@ export class DuetCombobox {
             }, ref: el => (this.listContainer = el) }, h("ul", { class: {
                 "duet-combobox-listbox-open": this.listOpen,
                 "duet-combobox-listbox": true,
-            }, role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element" }, selectElements.map((item, index) => {
+            }, role: "listbox", ref: el => (this.listElement = el), id: this.listBoxId }, selectElements.map((item, index) => {
             return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, selectElements.length, this.items.length) }));
         })))));
     }
@@ -471,7 +483,7 @@ export class DuetCombobox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+                    "text": "Force the user to make a selection (typing things in the input field will only be used for list search).\nThis property also sync input value with selected value on blur."
                 },
                 "attribute": "force",
                 "reflect": false,