@duetds/components 9.1.2 → 9.2.1

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

@@ -85,7 +85,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.1;
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   text-align: left;
   background: rgb(255, 255, 255);
   border-width: 1px;
@@ -122,7 +122,7 @@
   text-decoration: none;
   word-break: break-word;
   cursor: pointer;
-  border: 1px solid rgb(225, 227, 230);
+  border: 1px solid rgb(212, 223, 229);
   border-radius: 8px;
   transition: background-color 150ms ease, border-color 300ms ease;
 }
@@ -146,10 +146,10 @@
   border-bottom-left-radius: 0;
 }
 .duet-theme-turva .duet-choice-label {
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 .duet-theme-turva .info .duet-choice-label {
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 .duet-choice-label:active {
   opacity: 0.75;
@@ -157,7 +157,7 @@
 }
 .checked > .duet-choice-label {
   padding: 1rem;
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
   border-color: rgb(0, 119, 179) !important;
   border-width: 2px;
 }
@@ -165,7 +165,7 @@
   border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .checked > .duet-choice-label {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
   border-color: rgb(23, 28, 58) !important;
 }
 .duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
@@ -183,16 +183,16 @@
   border-width: 2px;
 }
 :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
-  border-color: rgb(144, 149, 153);
+  border-color: rgb(127, 150, 165);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   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);
+  border-color: rgb(143, 147, 158);
 }
 .duet-theme-turva .info :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(143, 147, 158);
 }
 
 :host(:not(.no-hover):not(.disabled):not([checked]):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
@@ -220,19 +220,19 @@ input:focus {
 }
 
 input[disabled] + .duet-choice-label {
-  color: rgb(101, 119, 135) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: default !important;
   background: rgb(245, 248, 250) !important;
-  border-color: rgb(225, 227, 230) !important;
+  border-color: rgb(212, 223, 229) !important;
 }
 input[disabled] + .duet-choice-label .duet-choice-card-icon {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 .duet-theme-turva input[disabled] + .duet-choice-label .duet-choice-card-icon {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 input[disabled] + .duet-choice-label .duet-checkmark {
-  border-color: rgb(101, 119, 135) !important;
+  border-color: rgb(98, 121, 138) !important;
 }
 input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label:active, input[disabled] + .duet-choice-label:focus {
   box-shadow: none !important;
@@ -241,20 +241,20 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 .duet-theme-turva input[disabled] + .duet-choice-label {
-  color: rgb(116, 116, 117) !important;
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(228, 228, 230) !important;
+  color: rgb(143, 147, 158) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(222, 224, 228) !important;
 }
 .duet-theme-turva input[disabled] + .duet-choice-label .duet-checkmark {
-  border-color: rgb(116, 116, 117) !important;
+  border-color: rgb(143, 147, 158) !important;
 }
 
 .checked > input[disabled] + .duet-choice-label {
-  border-color: rgb(144, 149, 153) !important;
+  border-color: rgb(127, 150, 165) !important;
 }
 
 .duet-theme-turva .checked > input[disabled] + .duet-choice-label {
-  border-color: rgb(116, 116, 117) !important;
+  border-color: rgb(143, 147, 158) !important;
 }
 
 .duet-checkmark-container {
@@ -262,12 +262,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   width: 20px;
   height: 20px;
   margin-left: auto;
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: border 300ms ease;
 }
 .duet-theme-turva .duet-checkmark-container {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(0, 119, 179);
@@ -282,18 +282,18 @@ 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;
+  background: rgb(181, 198, 208) !important;
+  border-color: rgb(181, 198, 208) !important;
 }
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
-  border-color: rgb(207, 207, 209) !important;
+  border-color: rgb(199, 202, 207) !important;
 }
 .checked > [disabled] + label .duet-checkmark-container {
-  background: rgb(207, 210, 212) !important;
+  background: rgb(181, 198, 208) !important;
 }
 .duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
-  background: rgb(207, 207, 209) !important;
-  border-color: rgb(207, 207, 209) !important;
+  background: rgb(199, 202, 207) !important;
+  border-color: rgb(199, 202, 207) !important;
 }
 
 .duet-checkmark {
@@ -335,7 +335,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-choice-card-icon {
-  color: rgb(173, 11, 43);
+  color: rgb(164, 4, 40);
 }
 .duet-choice-card-icon duet-icon {
   display: block;
@@ -360,8 +360,8 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   position: relative;
   width: 100%;
   font-weight: 400;
-  color: rgb(0, 41, 77);
-  border: 1px solid rgb(225, 227, 230);
+  color: rgb(8, 42, 77);
+  border: 1px solid rgb(212, 223, 229);
   border-top: 0;
   border-radius: 0 0 8px 8px;
   transition: border-color 300ms ease;
@@ -383,12 +383,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-collapsible {
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(225, 227, 230);
+  border: 1px solid rgb(212, 223, 229);
   border-top: 0;
 }
 .duet-choice-card-collapsible.duet-theme-turva {
   background: rgb(255, 255, 255);
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 .duet-choice-card-collapsible.checked {
   padding: 19px !important;
@@ -407,17 +407,17 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-collapsible-disabled {
   background: rgb(245, 248, 250);
-  border-color: rgb(225, 227, 230);
+  border-color: rgb(212, 223, 229);
 }
 .duet-choice-card-collapsible-disabled.checked {
-  border-color: rgb(225, 227, 230);
+  border-color: rgb(212, 223, 229);
 }
 .duet-choice-card-collapsible-disabled.duet-theme-turva {
-  background: rgb(245, 245, 247);
-  border-color: rgb(228, 228, 230);
+  background: rgb(245, 247, 250);
+  border-color: rgb(222, 224, 228);
 }
 .duet-choice-card-collapsible-disabled.duet-theme-turva.checked {
-  border-color: rgb(228, 228, 230);
+  border-color: rgb(222, 224, 228);
 }
 .duet-choice-card-info {
   font-size: 0.875rem;
@@ -426,8 +426,8 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   transition: 150ms ease-out;
 }
 .duet-choice-card-info.duet-theme-turva {
-  background: rgb(245, 245, 247);
-  border-color: rgb(228, 228, 230);
+  background: rgb(245, 247, 250);
+  border-color: rgb(222, 224, 228);
 }
 .duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container ::slotted(*) {
   display: none;
@@ -444,7 +444,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-width: 2px;
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 
 :host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
@@ -467,7 +467,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   padding-top: 1.25rem;
   cursor: pointer;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(225, 227, 230);
+  border: 1px solid rgb(212, 223, 229);
   border-left: 0 none;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
@@ -480,22 +480,22 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-bottom-right-radius: 0;
 }
 .duet-theme-turva .duet-choice-info-toggle[aria-expanded=true] {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-choice-info-toggle[disabled] {
   pointer-events: none;
   background: rgb(245, 248, 250) !important;
-  border-color: rgb(225, 227, 230) !important;
+  border-color: rgb(212, 223, 229) !important;
 }
 .duet-choice-info-toggle[disabled] .duet-choice-info-icon {
-  color: rgb(144, 149, 153) !important;
+  color: rgb(127, 150, 165) !important;
 }
 .duet-choice-info-toggle[disabled].duet-theme-turva {
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(228, 228, 230) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(222, 224, 228) !important;
 }
 .duet-choice-info-toggle[disabled].duet-theme-turva .duet-choice-info-icon {
-  color: rgb(116, 116, 117) !important;
+  color: rgb(143, 147, 158) !important;
 }
 .duet-choice-info-toggle:focus {
   outline: none;
@@ -520,10 +520,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
-  border-left-color: rgb(144, 149, 153);
+  border-left-color: rgb(127, 150, 165);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
-  border-left-color: rgb(116, 116, 117);
+  border-left-color: rgb(143, 147, 158);
 }
 
 .duet-choice-input {

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

@@ -30,7 +30,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 
 :host(.duet-theme-turva) {
@@ -53,7 +53,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 @media (max-width: 35.9375em) {
   .duet-collapsible-content {
@@ -77,7 +77,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   cursor: pointer;
   border-radius: 4px;
@@ -120,7 +120,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   transition: transform 300ms ease;
 }
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {

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

@@ -3,20 +3,16 @@
  */
 import { h } from "@stencil/core";
 import { regexEscape } from "../../utils/string-utils";
-export const DuetComboBoxSelect = ({ item, active, selected, label = undefined, clickHandler = e => {
+export const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();
 }, keyHandler = e => {
     e.preventDefault();
-}, search, isAndroidDevice, }) => {
+}, search, isAndroidDevice, id, }) => {
     const searchTerms = search
         .split(" ")
         .filter(term => !!term.trim())
         .map(term => regexEscape(term));
     const regEx = search !== "" ? new RegExp(`(${searchTerms.join("|")})`, "i") : undefined;
-    return (h("li", { class: {
-            "list-item": true,
-            option: true,
-            active: active,
-            selected: selected,
-        }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e) }, selected && h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }), regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight sc-duet-combobox">$&</span>') }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+    const highlightStyle = "text-decoration: underline";
+    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": activeDescendant ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant }, regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
 };

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

@@ -11,10 +11,10 @@
   display: inline-block;
   width: 100%;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 :host a {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   transition: none;
 }
 :host.duet-theme-turva {
@@ -24,85 +24,8 @@
 :host.duet-theme-turva a {
   color: rgb(23, 28, 58);
 }
-:host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.option .option-tags {
-  color: rgb(116, 116, 117);
-}
-:host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.option.selected {
-  background: rgb(244, 207, 214);
-}
-:host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(198, 12, 48);
-}
-:host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active .option-tags, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus .option-tags, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover .option-tags {
-  color: rgb(255, 255, 255);
-}
-:host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item.active a, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:focus a, :host.duet-theme-turva .duet-combobox-list .duet-combobox-listbox .list-item:hover a {
-  color: rgb(255, 255, 255);
-}
 
-.duet-combobox-list {
-  position: absolute;
-  top: calc(100% - 12px);
-  z-index: 700;
-  margin: 8px 0 0;
-  visibility: hidden;
-  background: rgb(255, 255, 255);
-  border-radius: 0 4px;
-  box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.1);
-  opacity: 0;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
-  transform: scale(0.96) translateZ(0) translateY(-20px);
-  transform-origin: top right;
-}
-.duet-combobox-list.open {
-  visibility: visible;
-  opacity: 1;
-  transition-property: transform, opacity;
-  transform: scale(1.0001) translateZ(0) translateY(0);
-}
-.duet-combobox-list .duet-combobox-listbox {
+.combobox-menu-container {
+  width: var(--popup-width);
   max-height: 200px;
-  padding: 0.75rem 0;
-  margin: 0;
-  overflow-y: scroll;
-  font-weight: 600;
-  list-style: none;
-  cursor: pointer;
-  scroll-behavior: smooth;
-}
-.duet-combobox-list .duet-combobox-listbox .list-item {
-  padding: 4px 0;
-}
-.duet-combobox-list .duet-combobox-listbox .list-item:not(.selected) {
-  padding-left: 16px;
-}
-.duet-combobox-list .duet-combobox-listbox .list-item:not(.selected) .highlight {
-  text-decoration: underline;
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.option .option-tags {
-  float: right;
-  padding-right: 0.875rem;
-  font-weight: 400;
-  color: rgb(144, 149, 153);
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.selected {
-  padding-left: 0;
-  background: rgb(205, 229, 241);
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.selected.option .option-icon {
-  padding: 0 8px 0 8px;
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.selected.option .option-tags {
-  color: rgb(144, 149, 153);
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.active, .duet-combobox-list .duet-combobox-listbox .list-item:focus, .duet-combobox-list .duet-combobox-listbox .list-item:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(0, 119, 179);
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.active .option-tags, .duet-combobox-list .duet-combobox-listbox .list-item:focus .option-tags, .duet-combobox-list .duet-combobox-listbox .list-item:hover .option-tags {
-  color: rgb(255, 255, 255);
-}
-.duet-combobox-list .duet-combobox-listbox .list-item.active a, .duet-combobox-list .duet-combobox-listbox .list-item:focus a, .duet-combobox-list .duet-combobox-listbox .list-item:hover a {
-  color: rgb(255, 255, 255);
 }

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

@@ -5,7 +5,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, isBackspaceKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
@@ -14,14 +14,16 @@ export class DuetCombobox {
     constructor() {
         var _a, _b;
         this.listBoxId = createID("duet-combobox-list-element");
+        this.inputId = createID("duet-combobox-input-id");
+        this.activeDescendantId = createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
-            var _a, _b;
+            var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
                 const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                this.listContainer.style.width = `${currentWidth + 1}px`;
-                // this.listElement.style.width = `${currentWidth + 1}px`
+                const popupMenuPadding = parseInt((_c = getComputedStyle(this.listContainer.shadowRoot.querySelector(".duet-popup-menu-list"))) === null || _c === void 0 ? void 0 : _c.padding);
+                this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
         this.onInputChange = async (e) => {
@@ -46,6 +48,9 @@ export class DuetCombobox {
             if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
                 this.selectedItems.clear();
             }
+            if (!this.force && !this.multiple && newValue === "") {
+                this.value = undefined;
+            }
             this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
         };
         this.onKeyDown = (e) => {
@@ -76,18 +81,14 @@ export class DuetCombobox {
                 return;
             }
             if (isEscapeKey(e) || isTabKey(e)) {
+                if (this.listOpen) {
+                    e.preventDefault();
+                }
                 this.updateInputText(true);
                 this.activeItem = undefined;
                 this.listOpen = false;
                 return;
             }
-            if (isBackspaceKey(e) && this.inputValue === "") {
-                if (this.multiple && this.selectedItems.size > 0) {
-                    const lastItem = Array.from(this.selectedItems).pop();
-                    this.removeSelectedItem(lastItem, true);
-                }
-                return;
-            }
             //handle arrow up/down navigation
             let nextActiveItem = this.activeItem;
             if (isArrowUpKey(e)) {
@@ -108,7 +109,7 @@ export class DuetCombobox {
                 }
                 // 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.input.accessibleActiveDescendant = this.activeDescendantId;
                 this.activeItem = nextActiveItem;
                 this.scrollToActive();
             }
@@ -149,8 +150,16 @@ export class DuetCombobox {
         this.openListOnClick = false;
         this.filterType = "startsWith";
     }
+    popupMenuOpenHandler() {
+        if (this.listOpen) {
+            this.listContainer.show();
+        }
+        else {
+            this.listContainer.hide();
+        }
+    }
     activeItemHandler(state) {
-        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+        this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? this.activeDescendantId : "";
     }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
@@ -267,6 +276,7 @@ export class DuetCombobox {
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
         this.input.accessibleControls = this.listBoxId;
+        this.input.id = this.inputId;
         this.element.addEventListener("keydown", this.onKeyDown);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         this.processListOpenChange();
@@ -321,6 +331,7 @@ export class DuetCombobox {
         this.value = this.processedItems.filter(item => this.selectedItems.has(item.id)).map(item => item.value);
         this.input.value = "";
         this.updateChips();
+        this.input.setFocus();
     }
     /**
      * Add item with id to the selectedItems set. Used only when multiple is true.
@@ -355,6 +366,8 @@ export class DuetCombobox {
         if (this.selectedItems.has(id)) {
             this.selectedItems.delete(id);
             this.value = undefined;
+            this.input.value = "";
+            await this.input.setFocus();
         }
         else {
             this.selectedItems.clear();
@@ -362,7 +375,7 @@ export class DuetCombobox {
             this.value = this.processedItems.find(item => item.id === id).value;
         }
         if (emitEvent) {
-            this.emitChangeEvent(id);
+            this.emitChangeEvent(this.value && id);
         }
         await this.updateInputText();
     }
@@ -379,6 +392,7 @@ export class DuetCombobox {
             if (!chipExists) {
                 const chip = document.createElement("duet-chip");
                 chip.variation = "input";
+                chip.role = "option";
                 chip.value = `${id}`;
                 chip.textContent = text;
                 chip.addEventListener("duetRemove", evt => {
@@ -426,6 +440,7 @@ export class DuetCombobox {
             this.input.value = ""; // set value to empty so that cursor position follows accordingly
             this.input.value = await this.getSelectedItemLabel();
             this.input.scrollLeft = this.input.scrollWidth;
+            await this.input.setFocus();
         }
     }
     // Event handlers
@@ -445,7 +460,7 @@ export class DuetCombobox {
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = this.listElement.querySelector(".active");
+        const activeElement = document.getElementById(`${this.activeDescendantId}`); // this is undefined on 1st keydown, make it be valid to fix the issue
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -520,16 +535,10 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", { class: {
-                "duet-combobox-list": true,
-                open: this.listOpen,
-            }, 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: this.listBoxId }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox" }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
-                return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
-            })))));
+                return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
+            }), h("duet-spacer", { size: "x-small" }))))));
     }
     static get is() { return "duet-combobox"; }
     static get encapsulation() { return "scoped"; }
@@ -746,7 +755,7 @@ export class DuetCombobox {
                     "text": "Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string."
                 },
                 "attribute": "value",
-                "reflect": true
+                "reflect": false
             },
             "minCharacters": {
                 "type": "number",
@@ -873,6 +882,9 @@ export class DuetCombobox {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "listOpen",
+                "methodName": "popupMenuOpenHandler"
+            }, {
                 "propName": "activeItem",
                 "methodName": "activeItemHandler"
             }, {

package/lib/collection/components/duet-contact-card/duet-contact-card.css

@@ -45,7 +45,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-contact-card.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'c532807993d52b8f0054daa3af2c7f80e61fa810', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'bdd79055f3abe795b0ea44a9d7fdf7b08c656b60', class: {
+        return (h(Host, { key: '27e103c0c5049f7fab515607764a54b61951c1e0', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c574b5e46c7fa008821587bb36154641b390b903', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'f8d9f6d95737f5c485222a502b9d2502ede2a1cb' }, this.name && (h("duet-heading", { key: '10f87bf9b703fc0a609424b9d29130331b6151d8', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '9681851717e78eda1148c1117abddb24b4c12aff', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '6bf8e40774ac3672d0e74b1e251e8c48e70762fb', class: "email" }, h("duet-icon", { key: '2065dcdc7368544f350baf4635052d8c52c4b79d', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '552d329f8d98ab48633a920b6ca39737a7fc1f75', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '8670d1b4a2672a8921f4e4a49291873094261b7b', class: "phone" }, h("duet-icon", { key: '3428663c19aeab970654ad2ddc5e9e33a0a41259', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'f314ea75ea7d635b4fc128716dcc0aee5ff7b254', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'e2345368c3ba15cd74835e2aa61923038b3a205f', class: "call-to-action" }, h("duet-button", { key: '921f29a51d7a163a2246b451c3cae550cee443d9', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '9d98b0a893846972eac2a2285ad39e6f09a52fde' }), h("slot", { key: 'cf3781665288e173c754529dce701b834631c3a1' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'ad527316cf8b63feb34bd4dd79f77324b7f48c80' }, this.name && (h("duet-heading", { key: '6774b39b0bbd63f84d262fcf3f2ecad255664ce0', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'f8dcb174650b2bc6f9ab36f8995c9e4629cd4cb7', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '73e0f30a03c566d15e338a87506fcf537f8c5cfd', class: "email" }, h("duet-icon", { key: '362a6a97716c3a14aee0aa4f922b46752a512fe0', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '86f261b33c3199a7e02d697417f835d70f3300fa', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fefe6fcb46d1113762849f95e2dcb7c4625d2472', class: "phone" }, h("duet-icon", { key: '55a47952ffee9a4d97c714aa749219bc6d7aa2b8', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '618acf848c98219d2a05233a8f072401a33c5507', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'bc881ffff92c8433241d886ebd054090356ffece', class: "call-to-action" }, h("duet-button", { key: '8147b7ed59d0c12d235059e6a1d1ec7551f1e184', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '1d06de992fe79882232166faca835f6468ce796f' }), h("slot", { key: 'ade5d1b926723e45fc1ff45faeef9fa14bd5af56' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }