@duetds/components 8.0.4 → 8.0.6

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -120,4 +120,42 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva .items {
   background: rgb(245, 245, 247);
+}
+.duet-toolbar-dropdown.negative button {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-dropdown.negative button:hover {
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-dropdown.negative button.active {
+  font-weight: 600;
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-dropdown.negative button.open {
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-dropdown.negative button duet-icon {
+  color: rgb(205, 229, 241);
+}
+.duet-toolbar-dropdown.duet-theme-turva.negative button {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-dropdown.duet-theme-turva.negative button:hover {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-dropdown.duet-theme-turva.negative button.active {
+  font-weight: 600;
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
+  color: rgb(244, 207, 214);
 }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -10,6 +10,7 @@ export class DuetToolbarDropdown {
       this.open = !this.open;
     };
     this.theme = "";
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.active = false;
     this.open = false;
@@ -48,10 +49,12 @@ export class DuetToolbarDropdown {
     if (this.element && this.element.parentElement) {
       itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
     }
+    const variation = this.variation === "negative" ? "negative" : "white";
     return (h(Host, null, h("div", { class: {
         "duet-toolbar-dropdown": true,
         "duet-theme-turva": this.theme === "turva",
         [itemsAlign]: true,
+        [variation]: true,
       } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
         active: this.active,
         open: this.open,
@@ -98,6 +101,24 @@ export class DuetToolbarDropdown {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "variation": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"default\" | \"negative\"",
+          "resolved": "\"default\" | \"negative\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.css

@@ -47,21 +47,49 @@
 .duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-link.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-link.negative duet-icon {
+  color: rgb(205, 229, 241);
+}
 .duet-toolbar-link.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";
   color: rgb(23, 28, 58);
 }
+.duet-toolbar-link.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-link.duet-theme-turva.negative duet-icon {
+  color: rgb(244, 207, 214);
+}
 .duet-toolbar-link:hover {
   color: rgb(0, 41, 77);
   background: rgb(243, 249, 252);
 }
+.duet-toolbar-link:hover.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
 .duet-toolbar-link:hover.duet-theme-turva {
   color: rgb(23, 28, 58);
   background: rgb(245, 245, 247);
 }
+.duet-toolbar-link:hover.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
 .duet-toolbar-link.active {
   color: rgb(0, 41, 77);
 }
+.duet-toolbar-link.active.negative {
+  font-weight: 600;
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-link.active.negative::after {
+  display: none;
+}
 .duet-toolbar-link.active::after {
   position: absolute;
   top: auto;
@@ -83,4 +111,8 @@
 }
 .duet-toolbar-link.active.duet-theme-turva::after {
   background: rgb(198, 12, 48);
+}
+.duet-toolbar-link.active.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
 }

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetToolbarLink {
   constructor() {
     this.theme = "";
+    this.variation = "default";
     this.active = false;
     this.href = "#";
     this.icon = undefined;
@@ -22,7 +23,13 @@ export class DuetToolbarLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
+    const variation = this.variation === "negative" ? "negative" : "white";
+    return (h(Host, null, h("a", { class: {
+        "duet-toolbar-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [variation]: true,
+      }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-toolbar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -62,6 +69,24 @@ export class DuetToolbarLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "variation": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"default\" | \"negative\"",
+          "resolved": "\"default\" | \"negative\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "active": {
         "type": "boolean",
         "mutable": true,

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-8647adfe.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-fe8a2205.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-c35effa1.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-1f56e02f.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-b1f13be3.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-d0987122.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { h } from './p-62c7d9d4.js';
 import { p as parsePossibleJSON } from './p-1a395a8d.js';
 import { g as getColorByName } from './p-e19d1e27.js';
-import { d as defineCustomElement$4 } from './p-6aed45b9.js';
-import { d as defineCustomElement$3 } from './p-d8d221c7.js';
-import { d as defineCustomElement$2 } from './p-0334f215.js';
+import { d as defineCustomElement$4 } from './p-c0af301d.js';
+import { d as defineCustomElement$3 } from './p-180c0d2d.js';
+import { d as defineCustomElement$2 } from './p-6c2e13f0.js';
 
 const DuetPicture = ({ img, sources }) => {
   return (h("picture", null,

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-4883df66.js';
-import { d as defineCustomElement$2 } from './p-d8d221c7.js';
+import { d as defineCustomElement$2 } from './p-180c0d2d.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { g as getLocaleString } from './p-4883df66.js';
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-5c0e51bf.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-2b1a35cd.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { d as defineCustomElement$3 } from './p-d8d221c7.js';
-import { d as defineCustomElement$2 } from './p-0334f215.js';
+import { d as defineCustomElement$3 } from './p-180c0d2d.js';
+import { d as defineCustomElement$2 } from './p-6c2e13f0.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.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\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-3f1f0ff0.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-e77f7fff.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { c as createID } from './p-45f71a69.js';
 import { i as isKeyboardClick } from './p-56ac3289.js';
 import { s as sanitizeString } from './p-1a395a8d.js';
 import { g as getColorByName } from './p-e19d1e27.js';
-import { d as defineCustomElement$3 } from './p-d8d221c7.js';
-import { d as defineCustomElement$2 } from './p-137115be.js';
+import { d as defineCustomElement$3 } from './p-180c0d2d.js';
+import { d as defineCustomElement$2 } from './p-3ccd454b.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-8b29f15f.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-03ac3eb3.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-dcf1150f.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-21b815ae.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-chip.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { c as createID } from './p-45f71a69.js';
-import { d as defineCustomElement$2 } from './p-d8d221c7.js';
+import { d as defineCustomElement$2 } from './p-180c0d2d.js';
 
 const duetChipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;display:inline-block;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}.duet-chip-container{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:1px;hyphens:none;line-height:1.1;color:rgb(0, 41, 77) !important;text-align:center;cursor:pointer;background:rgb(255, 255, 255);border-color:rgb(144, 149, 153);border-style:solid;border-width:1px;border-radius:8px;transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease}.duet-chip-container.duet-p-0{padding:0 !important}.duet-chip-container.duet-m-0{margin:0 !important}.duet-chip-container.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255);border-color:rgb(23, 28, 58)}.duet-chip-container.duet-theme-turva:hover{border-color:rgb(198, 12, 48)}.duet-chip-container:hover{padding:0 !important;border-color:rgb(0, 119, 179);border-width:2px}.duet-chip-container.duet-chip-disabled{color:rgb(101, 119, 135) !important;cursor:default;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-chip-container.duet-chip-disabled.duet-theme-turva{color:rgb(116, 116, 117) !important;background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled:hover{background:rgb(245, 248, 250);border-color:rgb(245, 248, 250)}.duet-chip-container.duet-chip-disabled:hover.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-disabled button,.duet-chip-container.duet-chip-disabled label{cursor:default}.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;color:rgb(0, 41, 77) !important;cursor:pointer}.duet-chip-container button:focus,.duet-chip-container label:focus{outline:none}.duet-chip-container .duet-chip-icon-container{display:flex;align-items:center;height:16px;padding:0;transition:padding 300ms ease}.duet-chip-container.duet-chip-has-icon .duet-chip-icon-container{width:24px;height:16px;padding-right:10px}.duet-chip-container.duet-chip-has-icon.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-has-icon.duet-chip-radio-checked .duet-chip-icon-container{padding-right:11px;padding-left:3px}.duet-chip-container.duet-chip-has-icon button,.duet-chip-container.duet-chip-has-icon label{padding-left:10px}.duet-chip-container.duet-chip-has-popup button,.duet-chip-container.duet-chip-has-popup label{padding-right:8px}.duet-chip-container duet-icon:not(.check-mark){width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container duet-icon.check-mark{width:0;overflow:hidden;transition:width 300ms ease, transform 300ms ease;transform:scaleX(0)}.duet-chip-container.duet-chip-filter-checked,.duet-chip-container.duet-chip-radio-checked{background:rgb(230, 242, 248);border-color:rgb(230, 242, 248)}.duet-chip-container.duet-chip-filter-checked:hover,.duet-chip-container.duet-chip-radio-checked:hover{background:rgb(205, 229, 241);border-color:rgb(205, 229, 241)}.duet-chip-container.duet-chip-filter-checked button,.duet-chip-container.duet-chip-filter-checked label,.duet-chip-container.duet-chip-radio-checked button,.duet-chip-container.duet-chip-radio-checked label{padding-left:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container{padding-right:10px}.duet-chip-container.duet-chip-filter-checked .duet-chip-icon-container duet-icon:not(.check-mark),.duet-chip-container.duet-chip-radio-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-chip-icon-container duet-icon.check-mark,.duet-chip-container.duet-chip-radio-checked .duet-chip-icon-container duet-icon.check-mark{width:auto;transition:width 300ms ease, transform 300ms ease;transform:scaleX(1)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva{background:rgb(245, 245, 247);border-color:rgb(245, 245, 247)}.duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover,.duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover{background:rgb(228, 228, 230);border-color:rgb(228, 228, 230)}.duet-chip-container div.duet-chip-popup-disclosure{padding-right:4.5px;padding-left:12.5px}.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: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{width:26px;padding:8px 16px 8px 0;margin:-8px 0}:host(.user-is-tabbing) .duet-chip-focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-chip-container input{position:absolute !important;top:0;left:0;z-index:-1;width:100%;height:100%;cursor:pointer;opacity:0}";
 

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
-import { d as defineCustomElement$8 } from './p-3f1f0ff0.js';
-import { d as defineCustomElement$7 } from './p-96f8add2.js';
-import { d as defineCustomElement$6 } from './p-d8d221c7.js';
-import { d as defineCustomElement$5 } from './p-e936af1e.js';
-import { d as defineCustomElement$4 } from './p-ead2c47b.js';
-import { d as defineCustomElement$3 } from './p-cc7ea20a.js';
-import { d as defineCustomElement$2 } from './p-69cee0e0.js';
+import { d as defineCustomElement$8 } from './p-e77f7fff.js';
+import { d as defineCustomElement$7 } from './p-64cd1abb.js';
+import { d as defineCustomElement$6 } from './p-180c0d2d.js';
+import { d as defineCustomElement$5 } from './p-e6b07569.js';
+import { d as defineCustomElement$4 } from './p-fd4877d1.js';
+import { d as defineCustomElement$3 } from './p-e4355989.js';
+import { d as defineCustomElement$2 } from './p-62e68de8.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 
@@ -57,6 +57,8 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
     this.breakpoint = "small";
     this.value = undefined;
     this.disabled = undefined;
+    this.required = false;
+    this.accessibleLiveError = "polite";
   }
   /**
    * Component lifecycle events.
@@ -84,6 +86,7 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
     // Walk the DOM in reverse order, since the last selected one wins
     for (const choice of this.choices) {
       choice.name = this.name;
+      choice.required = this.required;
       choice.groupDisabled = this.disabled;
       choice.groupDirection = this.direction;
       choice.groupResponsive = this.responsive;
@@ -118,7 +121,7 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
         "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
         "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
         "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-      } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+      } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -143,7 +146,9 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
     "responsive": [4],
     "breakpoint": [1],
     "value": [1537],
-    "disabled": [4]
+    "disabled": [4],
+    "required": [4],
+    "accessibleLiveError": [1, "accessible-live-error"]
   }, undefined, {
     "value": ["updateChoices"],
     "disabled": ["updateChoices"],

package/lib/dist-custom-elements/duet-choice.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { h as hasSlot } from './p-f8c76b25.js';
 import { D as DuetStringsExternalDefaults } from './p-274d11e3.js';
@@ -9,10 +9,10 @@ import { c as createID } from './p-45f71a69.js';
 import { F as FocusGuard } from './p-c5032d3a.js';
 import { i as isKeyboardClick, a as isQuestionKey, b as isEscapeKey } from './p-56ac3289.js';
 import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
-import { d as defineCustomElement$5 } from './p-3f1f0ff0.js';
-import { d as defineCustomElement$4 } from './p-d8d221c7.js';
-import { d as defineCustomElement$3 } from './p-137115be.js';
-import { d as defineCustomElement$2 } from './p-69cee0e0.js';
+import { d as defineCustomElement$5 } from './p-e77f7fff.js';
+import { d as defineCustomElement$4 } from './p-180c0d2d.js';
+import { d as defineCustomElement$3 } from './p-3ccd454b.js';
+import { d as defineCustomElement$2 } from './p-62e68de8.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
@@ -142,6 +142,12 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
       sv: "Mera information om",
     };
     this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
+    this.collapsibleNotificationDefaults = {
+      fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
+      en: "This choice has additional information opened below",
+      sv: "Det här val har mer information som öppnades nedan",
+    };
+    this.collapsibleNotification = getLocaleString(this.collapsibleNotificationDefaults, getLanguage());
   }
   /**
    * Component lifecycle events.
@@ -159,6 +165,7 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
       { prop: "infoLabel", defaults: "infoLabelDefaults" },
+      { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
     ]);
     this.duetChoiceReady.emit();
   }
@@ -203,6 +210,17 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
   async toggleInfoMethod() {
     this.isInfoOpen = !this.isInfoOpen;
   }
+  /**
+   * Should the collapsible content be announced by screen readers
+   */
+  isCollapsibleAnnounceable() {
+    if (!this.collapsible || !this.getExpanded()) {
+      return false;
+    }
+    const children = Array.from(this.element.querySelectorAll(`#${this.choiceId}-collapsible-content > *`) || []);
+    const announceableElements = ["duet-paragraph", "duet-heading", "duet-fieldset"];
+    return children.every(child => announceableElements.includes(child.tagName.toLowerCase()));
+  }
   getAriaDescribedby() {
     if (this.accessibleDescribedBy) {
       return this.accessibleDescribedBy;
@@ -211,9 +229,12 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
       if (this.hasHeader) {
         return this.headerId;
       }
-      else {
+      else if (this.isCollapsibleAnnounceable()) {
         return this.expandId;
       }
+      else {
+        return `${this.choiceId}-collapsible-notification`;
+      }
     }
     return null;
   }
@@ -279,10 +300,10 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
       } }, 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: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), 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, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: messagingInfo.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", null, 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" }, 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));
   }
   get element() { return this; }
   static get style() { return duetChoiceCss; }
@@ -317,6 +338,8 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H
     "required": [4],
     "infoLabelDefaults": [1, "accessible-label-info-default"],
     "infoLabel": [1025, "info-label"],
+    "collapsibleNotificationDefaults": [1, "accessible-collapsible-notification-default"],
+    "collapsibleNotification": [1025, "collapsible-notification"],
     "isHovering": [32],
     "isInfoOpen": [32],
     "isBlurred": [32],

package/lib/dist-custom-elements/duet-collapsible.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7247d0b2.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
 import { f as font_size_medium, t as tokens } from './p-64d43840.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
@@ -9,7 +9,7 @@ import { h as hasSlot } from './p-f8c76b25.js';
 import { c as createID } from './p-45f71a69.js';
 import { i as isKeyboardClick } from './p-56ac3289.js';
 import { s as sanitizeString } from './p-1a395a8d.js';
-import { d as defineCustomElement$2 } from './p-d8d221c7.js';
+import { d as defineCustomElement$2 } from './p-180c0d2d.js';
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=after-heading]){display:inline-block}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;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:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}:host(.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\";color:rgb(23, 28, 58)}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;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:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.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\";color:rgb(23, 28, 58)}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;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:1rem;font-weight:600;line-height:1.5;color:rgb(0, 41, 77);text-align:left;cursor:pointer;border-radius:4px}.duet-collapsible-heading.full-width{width:100%}.duet-collapsible-heading.duet-collapsible-heading-centered{margin:auto}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.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\";color:rgb(23, 28, 58)}.duet-collapsible-heading .duet-collapsible-heading-content{min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{margin-left:16px}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div.float-right{margin-left:auto}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:rgb(0, 41, 77);transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";
 

package/lib/dist-custom-elements/duet-combobox.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-64c4e84f.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-7247d0b2.js';
 import { i as inheritGlobalTheme } from './p-d48735b6.js';
 import { d as debounce } from './p-3d8d557b.js';
 import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isArrowDownKey } from './p-56ac3289.js';
 import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-4883df66.js';
 import { p as parsePossibleJSON } from './p-1a395a8d.js';
 import { h, F as Fragment } from './p-62c7d9d4.js';
-import { d as defineCustomElement$2 } from './p-d8d221c7.js';
+import { d as defineCustomElement$2 } from './p-180c0d2d.js';
 
 const SelectSingle = ({ item, search = "", selected }) => {
   const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
@@ -92,7 +92,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     const path = e.composedPath();
     const isClickOutside = path.every(el => el !== this.element);
     if (isClickOutside) {
-      this.updateInputText(true);
+      this.updateInputText(true, true);
       this.listOpen = false;
     }
   }
@@ -224,7 +224,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
    * Updates the input text based on the selected/clicked items.
    * @param bool -override to clear if invoked by "click outside"
    */
-  async updateInputText(isBlurred = false) {
+  async updateInputText(isBlurred = false, isClickOutside = false) {
     const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
     //if items changed and given id no longer exists
     if (item.length === 0 && this.selectedItems.size > 0) {
@@ -233,7 +233,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
       this.value = undefined;
       this.activeItem = undefined;
     }
-    if (this.selectedItems.size === 1) {
+    if (!isClickOutside && this.selectedItems.size === 1) {
       this.input.value = ""; // set value to empty so that cursor position follows accordingly
       this.input.value = await this.formatItem(item[0]);
       this.input.scrollLeft = this.input.scrollWidth;