@duetds/components 9.2.4 → 9.2.6

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

@@ -60,11 +60,6 @@ export class DuetSlideout {
                 component: "duet-slideout",
             });
         };
-        this.bgOnClick = (e) => {
-            if (this.open) {
-                this.toggleMenu(e);
-            }
-        };
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
@@ -75,6 +70,7 @@ export class DuetSlideout {
         this.accessibleRole = "menubar";
         this.open = false;
         this.backgroundColor = "gray-lightest";
+        this.modal = true;
     }
     /**
      * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
@@ -132,7 +128,7 @@ export class DuetSlideout {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        if (this.dialog) {
+        if (this.dialog && this.modal) {
             enableBodyScroll(this.dialog);
         }
         if (this.mutationObserver) {
@@ -153,7 +149,9 @@ export class DuetSlideout {
             }
             const openPanel = this.getOpenPanel();
             this.teleport.makeSiblingsInert();
-            disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
+            if (this.modal) {
+                disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
+            }
             if (openPanel) {
                 openPanel.setFocus();
             }
@@ -169,7 +167,9 @@ export class DuetSlideout {
             }
             setTimeout(() => {
                 focusElement(this.openButton);
-                enableBodyScroll(this.dialog);
+                if (this.modal) {
+                    enableBodyScroll(this.dialog);
+                }
                 this.teleport.removeInertFromSiblings();
             }, 200);
         }
@@ -185,6 +185,15 @@ export class DuetSlideout {
             }
         }
     }
+    handleDocumentClick(ev) {
+        if (!this.open) {
+            return;
+        }
+        const path = ev.composedPath();
+        if (!path.includes(this.dialog) && !path.includes(this.openButton)) {
+            this.toggleMenu(ev);
+        }
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -234,15 +243,15 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '289093e61e89d5724e3bb15cd7945fd39734ed53' }, h("div", { key: '3514ce08bf8d7a529cfbff42be55b8bcf192cc8f', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: 'b78a47d52483e0eb360dc0ccc9e657b5ccb9b030', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '95a7f2593ddf2def5019b3d6c84d5374f67fefb3', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'c5dc68c63efc7dfaae9700972fb7e804f113a5a7' }, h("div", { key: '4af227670e861029e9e7991487c2210fcfa9ae63', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6ffa8d92692ab324124f8ff994494faf9a981498', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'b387e5fbd6663d444332c9ca102d76ae953ab3ec', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '8d2774b7413c3a4348831ea8f3484763560496d4', moveFocusTo: this.closeButton }), h("div", { key: '0ab02fea0fc88c1cad4e7964cf64ddd4e0991d3c', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '12b34a66f05a9d7d65c8d06a36aab27b9190c8ac', class: "top" }, h("button", { key: '7ffb3f3bace1d7983094573171a38dbac5c8a410', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: 'ba639a4f17cf9c92849bdad56a69a96948e46915', moveFocusTo: this.closeButton }), h("div", { key: '76d1cc048043e127d91449e2d7570190c7668779', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '1c0459f248a91c0a3c594b8f4970b700c9992e56', class: "top" }, h("button", { key: 'd58f3070c1e5f371200d689cde0e2a09bedd0473', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'f25d28342f722a6d4b7705e45498a8036468bf74', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '0162ecd6fc8db33a7053a1bf44bdb0b7b220ec6f', class: "sticky-header" }, h("slot", { key: '6d47a428f6f63a9ea306af7b1553dcc5144e84c7', name: "sticky-header" }))), h("div", { key: '7fe090f9ad0f6eb825809a17b8610f5aefbd2ab2', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'e0047f0d5c7d1780dd80c924da5f8cd31960efc8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '5ef0c4df0077b3af2a371fef1f22b5e6e344e6a4', class: "sticky-header" }, h("slot", { key: '59db3342c0a3fc083c38d546fd02333344f363a1', name: "sticky-header" }))), h("div", { key: 'b2be934939363da36c080b5d03b9f3137a026e6e', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'bf013947faa4f1951dbb34616040b35d90e4770c' })), h(FocusGuard, { key: '388318c3a94cd035f6e02eb83e49e0d97ad56995', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '8ecd75055940b309d013a92406a4f8f3e51141e7' })), h(FocusGuard, { key: 'e31a31d2d63ece57c247803e3ffa3fbb193af5ee', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -417,6 +426,26 @@ export class DuetSlideout {
                 "attribute": "background-color",
                 "reflect": true,
                 "defaultValue": "\"gray-lightest\""
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "modal",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -545,6 +574,12 @@ export class DuetSlideout {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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-b2e2b6dc.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-8778bcdf.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-3b812ded.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-02e8f591.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-1cd26b78.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-5d5b0bf3.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-6142f327.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { h } from './p-993aea39.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-8b3decf2.js';
 import { p as parsePossibleJSON } from './p-9c3c64b9.js';
-import { g as getColorByName } from './p-9fa78368.js';
-import { d as defineCustomElement$3 } from './p-34992550.js';
-import { d as defineCustomElement$2 } from './p-91c13425.js';
+import { g as getColorByName } from './p-88ed3495.js';
+import { d as defineCustomElement$3 } from './p-8636a95c.js';
+import { d as defineCustomElement$2 } from './p-ab4a29e9.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-35375593.js';
-import { d as defineCustomElement$3 } from './p-91c13425.js';
-import { d as defineCustomElement$2 } from './p-8b3f67c1.js';
+import { d as defineCustomElement$3 } from './p-ab4a29e9.js';
+import { d as defineCustomElement$2 } from './p-64ab1e7f.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,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { g as getLocaleString } from './p-35375593.js';
-import { g as getColorByName } from './p-9fa78368.js';
+import { g as getColorByName } from './p-88ed3495.js';
 
 const duetBreadcrumbsCss = "*,*::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;display:block;width:100%}::slotted(*){font-weight:400}::slotted(:last-child){font-weight:600}:host([variation=plain]) ::slotted(:last-child){font-weight:400}.duet-breadcrumbs{position:relative;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 0;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 75, 129)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(212, 223, 229)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(8, 42, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-breadcrumbs.plain .container{max-width:none;min-height:auto;margin:0}.duet-breadcrumbs.plain .list{padding:0}.duet-breadcrumbs.plain .bottom-border{display:none}";
 const DuetBreadcrumbsStyle0 = duetBreadcrumbsCss;

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-905ec46b.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-58f4ac3e.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-6142f327.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-8b3decf2.js';
-import { d as defineCustomElement$2 } from './p-91c13425.js';
+import { d as defineCustomElement$2 } from './p-ab4a29e9.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 blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 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,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 const DuetCalloutStyle0 = duetCalloutCss;

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-c7c1a1b2.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-a9d05a98.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-6142f327.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
 import { s as sanitizeString } from './p-9c3c64b9.js';
-import { g as getColorByName } from './p-9fa78368.js';
-import { d as defineCustomElement$3 } from './p-91c13425.js';
-import { d as defineCustomElement$2 } from './p-8b3f67c1.js';
+import { g as getColorByName } from './p-88ed3495.js';
+import { d as defineCustomElement$3 } from './p-ab4a29e9.js';
+import { d as defineCustomElement$2 } from './p-64ab1e7f.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-9b7883f9.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-db58dd65.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-7ead8f48.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-247254f4.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as checkNamedSlotElement } from './p-8b3decf2.js';
-import { d as defineCustomElement$8 } from './p-c7c1a1b2.js';
-import { d as defineCustomElement$7 } from './p-d53e4d53.js';
-import { d as defineCustomElement$6 } from './p-91c13425.js';
-import { d as defineCustomElement$5 } from './p-9fe78f80.js';
-import { d as defineCustomElement$4 } from './p-01dc62e0.js';
-import { d as defineCustomElement$3 } from './p-c9787e5e.js';
-import { d as defineCustomElement$2 } from './p-18b56e3d.js';
+import { d as defineCustomElement$8 } from './p-a9d05a98.js';
+import { d as defineCustomElement$7 } from './p-6fcd56d1.js';
+import { d as defineCustomElement$6 } from './p-ab4a29e9.js';
+import { d as defineCustomElement$5 } from './p-bfa56fd6.js';
+import { d as defineCustomElement$4 } from './p-c9b46160.js';
+import { d as defineCustomElement$3 } from './p-561b46f4.js';
+import { d as defineCustomElement$2 } from './p-324773e2.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}";
 const DuetChoiceGroupStyle0 = duetChoiceGroupCss;

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

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { D as DuetStringsExternalDefaults } from './p-9df4cfa4.js';
 import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, a as isQuestionKey, s as subscribeTabbingChange, u as unsubscribeTabbingChange, b as isEscapeKey } from './p-ca700701.js';
 import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
 import { h as hasSlot } from './p-8b3decf2.js';
-import { d as defineCustomElement$4 } from './p-c7c1a1b2.js';
-import { d as defineCustomElement$3 } from './p-91c13425.js';
-import { d as defineCustomElement$2 } from './p-8b3f67c1.js';
+import { d as defineCustomElement$4 } from './p-a9d05a98.js';
+import { d as defineCustomElement$3 } from './p-ab4a29e9.js';
+import { d as defineCustomElement$2 } from './p-64ab1e7f.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>"};
 

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-6142f327.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ddaf17a4.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
 import { f as font_size_medium, t as tokens } from './p-f6000a03.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
@@ -9,9 +9,9 @@ import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
 import { h as hasSlot } from './p-8b3decf2.js';
 import { s as sanitizeString } from './p-9c3c64b9.js';
-import { d as defineCustomElement$2 } from './p-91c13425.js';
+import { d as defineCustomElement$2 } from './p-ab4a29e9.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(8, 42, 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(8, 42, 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(8, 42, 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(8, 42, 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)}";
+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(8, 42, 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(8, 42, 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(8, 42, 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(8, 42, 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)}:host(.negative) .duet-collapsible-heading,:host(.negative) .duet-collapsible-content,:host(.negative) .duet-collapsible-heading-icon{color:rgb(255, 255, 255)}";
 const DuetCollapsibleStyle0 = duetCollapsibleCss;
 
 const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class DuetCollapsible extends H {
@@ -68,6 +68,7 @@ const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class DuetCollapsible
             });
         };
         this.theme = "";
+        this.negative = false;
         this.accessibleLabel = undefined;
         this.heading = "";
         this.headingFullWidth = false;
@@ -107,19 +108,20 @@ const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class DuetCollapsible
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'aafe219a93ff8b806e05ecf9c0203f7afd6929e1', class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, { key: 'c6f7409213132914e3ec49ba138a10aee197fb03' }, h("button", { key: '988a8b779e70e27852ac15b271ee8ad6eeb53f52', class: {
+        return (h(Host, { key: 'aff15bb7d7a183ad8717bd077ed5e692549479e2', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '8c8b350ac427399cf5e694ae5045b5d757b17324' }, h("button", { key: '16304aab427f0c1493c1d464a5959d0c063433f8', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '7ad9554421eb7d8777b207721224268ba575b832', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '057dd8ded09e313bc868f3f349d80b37d565f1da', margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { key: '4a929efd3b1cd2b1725e1d2dc3a68b3656ad32f3', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'a8a3051f9f9fa0e01619a2c8cf82dde1e117aa3e', part: "duet-collapsible-after-heading" }, h("slot", { key: '5eb5fbcdacf0edcb52f3fcc4c196dc308a1c5ac2', name: "after-heading" }))))), h("div", { key: '1cae60d79f74a0961eb0a280b3f31b457ba82c86', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '1c8fb0d10608e14f55023891f331b4a7a538f527' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e2943d02487fd97319e47030dba988b6e90ab8e8', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '2e80461c2e5eb1d3cae6552ebdae873e6430a433', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { key: 'fdaecea0fa4dbb325e7bc460d5ca016ccf083111', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '3b1a1f5cd79b5cd31b1204ae9dd3db28601f8fa9', part: "duet-collapsible-after-heading" }, h("slot", { key: '2c8a5041e7264addf9840a3cecf6c7ebbddeb871', name: "after-heading" }))))), h("div", { key: '151b1f002a2745bf31ff97496f53b4a81c77b524', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '6b729485bb03d25d5529b23b4a2ce502d5a58a32' }))));
     }
     get element() { return this; }
     static get style() { return DuetCollapsibleStyle0; }
 }, [1, "duet-collapsible", {
         "theme": [1025],
+        "negative": [4],
         "accessibleLabel": [1, "accessible-label"],
         "heading": [1],
         "headingFullWidth": [4, "heading-full-width"],

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { d as debounce } from './p-9e371678.js';
@@ -10,20 +10,20 @@ import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObser
 import { g as getElementsFromDefaultSlot } from './p-8b3decf2.js';
 import { r as regexEscape, p as parsePossibleJSON } from './p-9c3c64b9.js';
 import { h } from './p-993aea39.js';
-import { d as defineCustomElement$f } from './p-905ec46b.js';
-import { d as defineCustomElement$e } from './p-c7c1a1b2.js';
-import { d as defineCustomElement$d } from './p-7e2739b2.js';
-import { d as defineCustomElement$c } from './p-91c13425.js';
-import { d as defineCustomElement$b } from './p-d2417cc3.js';
-import { d as defineCustomElement$a } from './p-0875d52d.js';
-import { d as defineCustomElement$9 } from './p-54fcbd1e.js';
-import { d as defineCustomElement$8 } from './p-cd3e7d26.js';
-import { d as defineCustomElement$7 } from './p-8b3f67c1.js';
-import { d as defineCustomElement$6 } from './p-152ae732.js';
-import { d as defineCustomElement$5 } from './p-9fe78f80.js';
-import { d as defineCustomElement$4 } from './p-01dc62e0.js';
-import { d as defineCustomElement$3 } from './p-c9787e5e.js';
-import { d as defineCustomElement$2 } from './p-18b56e3d.js';
+import { d as defineCustomElement$f } from './p-58f4ac3e.js';
+import { d as defineCustomElement$e } from './p-a9d05a98.js';
+import { d as defineCustomElement$d } from './p-5096f482.js';
+import { d as defineCustomElement$c } from './p-ab4a29e9.js';
+import { d as defineCustomElement$b } from './p-c14e6ca4.js';
+import { d as defineCustomElement$a } from './p-44576862.js';
+import { d as defineCustomElement$9 } from './p-839fb8d6.js';
+import { d as defineCustomElement$8 } from './p-5b74ff74.js';
+import { d as defineCustomElement$7 } from './p-64ab1e7f.js';
+import { d as defineCustomElement$6 } from './p-d71e24a5.js';
+import { d as defineCustomElement$5 } from './p-bfa56fd6.js';
+import { d as defineCustomElement$4 } from './p-c9b46160.js';
+import { d as defineCustomElement$3 } from './p-561b46f4.js';
+import { d as defineCustomElement$2 } from './p-324773e2.js';
 
 const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = undefined, clickHandler = e => {
     e.preventDefault();
@@ -92,6 +92,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
             this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
         };
         this.onKeyDown = (e) => {
+            var _a, _b, _c;
             //if selection is made, close the list and update internal and external values
             const listItems = this.returnFilteredOrNonFiltered();
             const listItemsSuggestions = listItems.filter(i => !this.selectedItems.has(i.id));
@@ -100,7 +101,10 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
             this.input.accessibleActiveDescendant = undefined;
             if (isEnterKey(e)) {
                 e.preventDefault();
-                if (this.listOpen && this.activeItem !== undefined && listItems[this.activeItem]) {
+                if (this.listOpen &&
+                    this.activeItem !== undefined &&
+                    listItems[this.activeItem] &&
+                    !this.selectedItems.has(listItems[this.activeItem].id)) {
                     if (this.multiple) {
                         this.addSelectedItem(listItems[this.activeItem].id, true);
                     }
@@ -134,6 +138,9 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
                 nextActiveItem = this.activeItem - 1;
             }
             else if (isArrowDownKey(e)) {
+                if (((_c = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < this.minCharacters) {
+                    return;
+                }
                 e.preventDefault();
                 nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
                 this.listOpen = true;
@@ -184,7 +191,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
         this.items = undefined;
         this.formatter = (item) => item && item.name ? item.name : "";
         this.value = undefined;
-        this.minCharacters = 1;
+        this.minCharacters = 0;
         this.openListOnClick = false;
         this.filterType = "startsWith";
     }
@@ -199,6 +206,15 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     activeItemHandler(state) {
         this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? this.activeDescendantId : "";
     }
+    inputValueHandler() {
+        setTimeout(async () => {
+            const label = await this.getSelectedItemLabel();
+            if (this.input.value == "" && label) {
+                this.input.value = "";
+                this.value = undefined;
+            }
+        }, 200);
+    }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
         const path = e.composedPath();
@@ -332,7 +348,11 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
      * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
      */
     shouldListBeFiltered() {
-        if (!this.multiple && this.selectedItems.size && this.input.value === this.inputValue) {
+        var _a;
+        if (!this.multiple &&
+            this.selectedItems.size &&
+            this.input.value === this.inputValue &&
+            ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) < this.minCharacters) {
             const item = this.processedItems.find(item => this.selectedItems.has(item.id));
             return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
         }
@@ -395,17 +415,9 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
      * Updates the selected item based on the item id. Used only when multiple is false.
      */
     async updateSelectedItem(id, emitEvent) {
-        if (this.selectedItems.has(id)) {
-            this.selectedItems.delete(id);
-            this.value = undefined;
-            this.input.value = "";
-            await this.input.setFocus();
-        }
-        else {
-            this.selectedItems.clear();
-            this.selectedItems.add(id);
-            this.value = this.processedItems.find(item => item.id === id).value;
-        }
+        this.selectedItems.clear();
+        this.selectedItems.add(id);
+        this.value = this.processedItems.find(item => item.id === id).value;
         if (emitEvent) {
             this.emitChangeEvent(this.value && id);
         }
@@ -492,7 +504,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = document.getElementById(`${this.activeDescendantId}`); // this is undefined on 1st keydown, make it be valid to fix the issue
+        const activeElement = document.getElementById(`${this.activeDescendantId}`);
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -573,6 +585,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     static get watchers() { return {
         "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
         "activeItem": ["activeItemHandler"],
+        "inputValue": ["inputValueHandler"],
         "items": ["processItems"],
         "value": ["processValue"]
     }; }
@@ -600,6 +613,7 @@ const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class DuetCombobox exten
     }, [[4, "click", "handleDocumentClick"]], {
         "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
         "activeItem": ["activeItemHandler"],
+        "inputValue": ["inputValueHandler"],
         "items": ["processItems"],
         "value": ["processValue"]
     }]);

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

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6142f327.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-ddaf17a4.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { d as defineCustomElement$8 } from './p-905ec46b.js';
-import { d as defineCustomElement$7 } from './p-34992550.js';
-import { d as defineCustomElement$6 } from './p-91c13425.js';
-import { d as defineCustomElement$5 } from './p-ed15e4de.js';
-import { d as defineCustomElement$4 } from './p-ed73a017.js';
-import { d as defineCustomElement$3 } from './p-152ae732.js';
-import { d as defineCustomElement$2 } from './p-18b56e3d.js';
+import { d as defineCustomElement$8 } from './p-58f4ac3e.js';
+import { d as defineCustomElement$7 } from './p-8636a95c.js';
+import { d as defineCustomElement$6 } from './p-ab4a29e9.js';
+import { d as defineCustomElement$5 } from './p-c92b6a37.js';
+import { d as defineCustomElement$4 } from './p-79508a54.js';
+import { d as defineCustomElement$3 } from './p-d71e24a5.js';
+import { d as defineCustomElement$2 } from './p-324773e2.js';
 
 const duetContactCardCss = "*,*::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-bottom:12px !important;display:block}:host(.duet-m-0){margin:0 !important}::slotted(*){padding-top:1.5rem}@media (min-width: 48em){::slotted(*){grid-column:2/span 2;padding-top:0}}.duet-contact-card{display:grid;grid-template-columns:100%;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(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\";color:rgb(23, 28, 58)}@media (min-width: 48em){.duet-contact-card{grid-template-columns:min-content minmax(0, 1fr) auto;gap:20px}}.duet-contact-card .image{width:4rem;height:4rem;margin-bottom:8px;border-radius:4px}@media (min-width: 48em){.duet-contact-card .image{width:6rem;height:6rem;padding-bottom:0}}.duet-contact-card .description{padding-bottom:8px}.duet-contact-card .email,.duet-contact-card .phone{display:grid;grid-template-columns:min-content auto;gap:8px;align-items:center;justify-content:flex-start;padding-bottom:8px;overflow-wrap:break-word}";
 const DuetContactCardStyle0 = duetContactCardCss;