@duetds/components 6.10.3 → 6.10.4

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

@@ -221,7 +221,7 @@ export class DuetActionButton {
           "references": {
             "DuetActionButtonIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-action-button/duet-action-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-action-button/duet-action-button.tsx"
             }
           }
         },
@@ -529,7 +529,7 @@ export class DuetActionButton {
           "references": {
             "DuetActionButtonEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-action-button/duet-action-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-action-button/duet-action-button.tsx"
             }
           }
         }

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

@@ -356,7 +356,7 @@ export class DuetAlert {
           "references": {
             "DuetAlertEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-alert/duet-alert.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-alert/duet-alert.tsx"
             }
           }
         }

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

@@ -413,7 +413,7 @@ export class DuetButton {
           "references": {
             "DuetButtonVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -529,7 +529,7 @@ export class DuetButton {
           "references": {
             "DuetButtonTextCentering": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -552,7 +552,7 @@ export class DuetButton {
           "references": {
             "DuetButtonWrapping": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -856,7 +856,7 @@ export class DuetButton {
           "references": {
             "DuetButtonIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -879,7 +879,7 @@ export class DuetButton {
           "references": {
             "DuetButtonSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },

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

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

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

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

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

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

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

@@ -36,7 +36,6 @@
 .duet-chip-container {
   -webkit-user-select: none;
   user-select: none;
-  padding: 8px 16px 9px !important;
   position: relative;
   z-index: 100;
   display: block;
@@ -85,8 +84,11 @@
 }
 .duet-chip-container button,
 .duet-chip-container label {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
+  padding: 7px 16px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 0.875rem;
   font-weight: 600;
@@ -102,16 +104,21 @@
   color: rgb(0, 119, 179) !important;
 }
 .duet-chip-container .duet-chip-icon-container {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  height: 16px;
   padding: 0;
   transition: padding 300ms ease;
 }
-.duet-chip-container.duet-chip-has-icon {
-  padding-left: 12px !important;
-}
 .duet-chip-container.duet-chip-has-icon .duet-chip-icon-container {
+  width: 24px;
+  height: 16px;
   padding-right: 8px;
 }
+.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container {
+  padding-right: 11px;
+  padding-left: 3px;
+}
 .duet-chip-container duet-icon:not(.check-mark) {
   width: auto;
   transition: width 300ms ease, transform 300ms ease;
@@ -124,20 +131,19 @@
   transform: scaleX(0);
 }
 .duet-chip-container.duet-chip-filter-checked {
-  padding-left: 12px !important;
   background: rgb(230, 242, 248);
   border-color: rgb(230, 242, 248);
 }
 .duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container {
   padding-right: 8px;
 }
-.duet-chip-container.duet-chip-filter-checked duet-icon:not(.check-mark) {
+.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark) {
   width: 0;
   overflow: hidden;
   transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(0);
 }
-.duet-chip-container.duet-chip-filter-checked duet-icon.check-mark {
+.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon.check-mark {
   width: auto;
   transition: width 300ms ease, transform 300ms ease;
   transform: scaleX(1);
@@ -146,12 +152,34 @@
   background: rgb(245, 245, 247);
   border-color: rgb(245, 245, 247);
 }
+.duet-chip-container div.duet-chip-popup-disclosure {
+  padding-left: 8px;
+}
+.duet-chip-container div.duet-chip-popup-disclosure duet-icon {
+  transition: transform 300ms ease;
+}
+.duet-chip-container.duet-chip-filter-popup-open {
+  background: rgb(243, 249, 252);
+  border-color: rgb(243, 249, 252);
+}
+.duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva {
+  background: rgb(245, 245, 247);
+  border-color: rgb(245, 245, 247);
+}
+.duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon {
+  transform: rotate(180deg);
+}
 .duet-chip-container.duet-chip-input {
-  display: inline-flex;
+  display: flex;
+  align-items: center;
   padding-right: 0 !important;
 }
+.duet-chip-container.duet-chip-input .duet-chip-input-button {
+  flex-grow: 1;
+}
 .duet-chip-container.duet-chip-input .duet-chip-remove-button {
-  padding: 8px 12px;
+  width: 26px;
+  padding: 8px 16px 8px 0;
   margin: -8px 0;
 }
 

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

@@ -10,6 +10,55 @@ export class DuetChip {
      * Own Properties.
      */
     this.chipId = createID("DuetChip");
+    this.popupSetUp = () => {
+      const popup = this.element.querySelector("duet-popup-menu");
+      if (popup) {
+        this.popup = popup;
+        popup.controller = this.element;
+        const labelSpan = this.element.querySelector("span");
+        const originalText = labelSpan.textContent;
+        const originalValue = this.value;
+        if (!popup.id) {
+          popup.id = "popup-menu";
+        }
+        popup.addEventListener("duetToggle", (evt) => {
+          this.popupOpen = evt.detail.open;
+        });
+        const clearActive = () => {
+          popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+            item.active = false;
+          });
+        };
+        popup.querySelectorAll("duet-popup-menu-item").forEach(item => {
+          item.addEventListener("click", evt => {
+            var _a;
+            const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.innerText;
+            if (!item.active) {
+              clearActive();
+              item.active = true;
+              labelSpan.textContent = item.innerText;
+              this.value = value;
+              this.checked = true;
+            }
+            else {
+              clearActive();
+              labelSpan.textContent = originalText;
+              this.value = originalValue;
+              this.checked = false;
+            }
+            this.emitChange(evt);
+            // A workaround to the difference of event handling between the browers.
+            // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
+            // open the popup again. Firefox does not have this behavior.
+            setTimeout(() => {
+              if (this.popup.isOpen()) {
+                this.popup.hide();
+              }
+            });
+          });
+        });
+      }
+    };
     /**
      * Component event handling.
      */
@@ -31,21 +80,42 @@ export class DuetChip {
         component: "duet-chip",
       });
     };
-    this.toggleChecked = (ev) => {
-      this.checked = !this.checked;
+    this.emitChange = originalEvent => {
       this.duetChange.emit({
-        originalEvent: ev,
+        originalEvent,
         checked: this.checked,
         value: this.value,
         component: "duet-chip",
       });
     };
-    this.remove = (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
+    /**
+     * Change checked state and emit duetChange event.
+     */
+    this.onFilterChange = (evt) => {
+      this.checked = !this.checked;
+      this.emitChange(evt);
+    };
+    /**
+     * Stop propagation and prevent default if popup is present, as the popup controls value and checked state.
+     */
+    this.onFilterClick = (evt) => {
+      if (this.popup) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        this.popup.toggle();
+      }
+    };
+    /**
+     * Remove input chip
+     */
+    this.onRemoveClick = (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
       this.element.remove();
     };
     this.focus = false;
+    this.popup = undefined;
+    this.popupOpen = undefined;
     this.accessibleLabel = undefined;
     this.variation = "button";
     this.icon = "";
@@ -60,8 +130,10 @@ export class DuetChip {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.popupSetUp();
   }
   render() {
+    var _a;
     const identifier = this.identifier || this.chipId;
     const classes = {
       "duet-chip-container": true,
@@ -70,12 +142,13 @@ export class DuetChip {
       "duet-chip-has-icon": !!this.icon,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+      "duet-chip-filter-popup-open": this.popupOpen,
     };
     const focusHandlers = {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.remove }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onChange: this.toggleChecked }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xx-small", margin: "none", color: "currentColor" }))))))));
   }
   static get is() { return "duet-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -117,7 +190,7 @@ export class DuetChip {
           "references": {
             "DuetChipVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
             }
           }
         },
@@ -196,7 +269,7 @@ export class DuetChip {
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -250,7 +323,9 @@ export class DuetChip {
   }
   static get states() {
     return {
-      "focus": {}
+      "focus": {},
+      "popup": {},
+      "popupOpen": {}
     };
   }
   static get events() {
@@ -270,7 +345,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
             }
           }
         }
@@ -290,7 +365,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
             }
           }
         }
@@ -310,7 +385,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx"
             }
           }
         }

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

@@ -155,42 +155,42 @@
   opacity: 0.75;
   transition: none !important;
 }
-.checked .duet-choice-label {
+.checked > .duet-choice-label {
   color: rgb(0, 119, 179) !important;
   background: rgb(243, 249, 252);
   border-color: rgb(0, 119, 179) !important;
 }
-.checked .duet-choice-label .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .checked .duet-choice-label {
+.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;
 }
-.duet-theme-turva .checked .duet-choice-label .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(198, 12, 48);
 }
-.checked.collapsible .duet-choice-label, .collapsible-force-expanded.collapsible .duet-choice-label {
+.checked.collapsible > .duet-choice-label, .collapsible-force-expanded.collapsible > .duet-choice-label {
   padding-bottom: calc(1rem + 2px);
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   border-color: rgb(144, 149, 153);
 }
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+: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);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+.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);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+.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);
 }
-.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+.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);
 }
 
@@ -238,12 +238,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(116, 116, 117) !important;
 }
 
-.checked input[disabled] + .duet-choice-label {
+.checked > input[disabled] + .duet-choice-label {
   background: rgb(225, 227, 230) !important;
   border-color: rgb(225, 227, 230) !important;
 }
 
-.duet-theme-turva .checked input[disabled] + .duet-choice-label {
+.duet-theme-turva .checked > input[disabled] + .duet-choice-label {
   background: rgb(228, 228, 230) !important;
   border-color: rgb(228, 228, 230) !important;
 }
@@ -260,12 +260,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
 }
-.checked .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(0, 119, 179);
   border-color: rgb(0, 119, 179);
   transition: none;
 }
-.duet-theme-turva .checked .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58) !important;
 }
@@ -278,10 +278,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
   border-color: rgb(207, 207, 209) !important;
 }
-.checked [disabled] + label .duet-checkmark-container {
+.checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 210, 212) !important;
 }
-.duet-theme-turva .checked [disabled] + label .duet-checkmark-container {
+.duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 207, 209) !important;
 }
 
@@ -359,7 +359,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58);
 }
-.checked .duet-choice-card-info, .checked .duet-choice-card-collapsible {
+.checked > .duet-choice-card-info, .checked > .duet-choice-card-collapsible {
   display: block;
 }
 .duet-choice-card-info-expanded, .duet-choice-card-collapsible-expanded {
@@ -405,10 +405,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(144, 149, 153);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(116, 116, 117);
 }
 
@@ -457,7 +457,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 :host(.user-is-tabbing) .duet-choice-info-toggle:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-.checked .duet-choice-info-toggle {
+.checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
 .duet-choice-info-toggle duet-icon {
@@ -470,10 +470,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(198, 12, 48);
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+: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);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+.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);
 }
 

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

@@ -901,7 +901,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -921,7 +921,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -941,7 +941,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }

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

@@ -225,7 +225,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -248,7 +248,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleHeadingFontSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -345,7 +345,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         }

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

@@ -498,7 +498,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         },
@@ -618,7 +618,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         }
@@ -642,7 +642,7 @@ export class DuetCombobox {
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           },
           "return": "Promise<string>"