@duetds/components 9.2.4 → 9.2.6

package/hydrate/index.js

@@ -479,7 +479,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   }
 };
 var parseClassListRegex = /\s/;
-var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var parseClassList=s=>("object"==typeof s&&"baseVal"in s&&(s=s.baseVal),s?s.split(parseClassListRegex):[]);
 var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
@@ -4301,6 +4301,42 @@ class DuetButton {
         registerInstance(this, hostRef);
         this.duetFocus = createEvent$2(this, "duetFocus", 7);
         this.duetBlur = createEvent$2(this, "duetBlur", 7);
+        this.proxyButtonSetUp = () => {
+            const slottedElement = this.element.querySelector("button[slot=proxybutton]");
+            const button = slottedElement || document.createElement("button");
+            if (this.url) {
+                if (slottedElement) {
+                    slottedElement.remove();
+                }
+                this.proxyButton = null;
+                return;
+            }
+            button.setAttribute("slot", "proxybutton");
+            button.style.display = "none";
+            button.type = this.getButtonType();
+            button.disabled = this.disabled;
+            button.setAttribute("form", this.form);
+            if (!this.form) {
+                button.removeAttribute("form");
+            }
+            // attributes should be removed in cases where name/value is not set
+            if (this.name != null) {
+                button.name = this.name;
+            }
+            else {
+                button.removeAttribute("name");
+            }
+            if (this.value != null) {
+                button.value = this.value;
+            }
+            else {
+                button.removeAttribute("value");
+            }
+            if (!slottedElement) {
+                this.element.appendChild(button);
+            }
+            this.proxyButton = button;
+        };
         /**
          * Component event handling.
          */
@@ -4309,7 +4345,7 @@ class DuetButton {
             // climb up the dom to see if we're in a <form>
             // and if so, then use JS to submit it.
             // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
-            if (!this.url && this.element.closest("form")) {
+            if (!this.url && (this.element.closest("form") || this.form) && ev.target === this.element) {
                 ev.preventDefault();
                 this.proxyButton.click();
             }
@@ -4336,6 +4372,7 @@ class DuetButton {
         this.negative = false;
         this.theme = "";
         this.margin = "auto";
+        this.form = undefined;
         this.padding = "auto";
         this.centerText = false;
         this.wrapping = "auto";
@@ -4370,9 +4407,6 @@ class DuetButton {
         }
     }
     connectedCallback() {
-        this.proxyButton = document.createElement("button");
-        this.proxyButton.style.display = "none";
-        this.syncToProxyButton();
         connectLanguageChangeObserver(this, [
             {
                 prop: "accessibleLabelExternal",
@@ -4383,36 +4417,18 @@ class DuetButton {
                 defaults: "accessibleLabelLoadingDefaults",
             },
         ]);
-        if (!this.url && this.element.closest("form")) {
-            this.element.insertAdjacentElement("beforebegin", this.proxyButton);
-        }
     }
     disconnectedCallback() {
         if (this.proxyButton) {
-            this.proxyButton.remove();
+            this.proxyButton = null;
         }
-        this.proxyButton = null;
         disconnectLanguageChangeObserver(this);
     }
-    syncToProxyButton() {
+    componentDidRender() {
         if (this.disabled === false) {
             this.element.removeAttribute("disabled");
         }
-        this.proxyButton.type = this.getButtonType();
-        this.proxyButton.disabled = this.disabled;
-        // attributes should be removed in cases where name/value is not set
-        if (this.name != null) {
-            this.proxyButton.name = this.name;
-        }
-        else {
-            this.proxyButton.removeAttribute("name");
-        }
-        if (this.value != null) {
-            this.proxyButton.value = this.value;
-        }
-        else {
-            this.proxyButton.removeAttribute("value");
-        }
+        this.proxyButtonSetUp();
     }
     getButtonType() {
         return this.submit ? "submit" : "button";
@@ -4450,12 +4466,12 @@ class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (hAsync("span", { key: '175bb8af989887b1f3c09549b95757984fafda22', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (hAsync("span", { key: 'c27d4012076d19e697ca12056499d02bbaaf5667', "aria-hidden": "true", class: {
+        const commonChildren = (hAsync("span", { key: '5a0c6410ac691a86fc5015ab7db83c969dc3bad1', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (hAsync("span", { key: 'e40d495dc3100c27f283c4e35c5e9a27c98464c2', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, hAsync("duet-icon", { key: '55ff5f4e621ff4396287b2478b626805f6b4cc18', size: "auto", margin: "none", name: icon, color: "currentColor" }))), hAsync("span", { key: '2686f673bf2aa13133b810e9aa8e2a2041e426b3', class: "duet-button-contents-slot" }, hAsync("slot", { key: '11a7a6dac5f579e19e7ded9914c954d0edd1e8db' }))));
+            } }, hAsync("duet-icon", { key: '96a0389f3704e534f2c4da39243f6f7b87038f6f', size: "auto", margin: "none", name: icon, color: "currentColor" }))), hAsync("span", { key: 'cbc6c347c96296ed4f4afa3963a12495fea09884', class: "duet-button-contents-slot" }, hAsync("slot", { key: '894a6a4e9f03f813a7e8918abf87ef9ceabecbc3' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -4490,7 +4506,7 @@ class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (hAsync(Host, { key: '00b0b4bff689bbe5c51d3fabdfb8093c13816cd0', onClick: this.handleClick, class: {
+        return (hAsync(Host, { key: '24621240c8dcf778398f04e79c780bade455090f', onClick: this.handleClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -4498,21 +4514,15 @@ class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, hAsync("span", { key: '21b30db85548fad9886350e172f74455407d9f6d', class: {
+            } }, hAsync("span", { key: 'ca827a33826b3c42662ccd5a079d8327b9b6175e', class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (hAsync("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && hAsync("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (hAsync("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && hAsync("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && hAsync("duet-spinner", { key: 'dc75e3801e61c06621520d7589945b59a61664fc', color: "currentColor" }))));
+            } }, this.url ? (hAsync("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && hAsync("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (hAsync("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && hAsync("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "), hAsync("slot", { name: "proxybutton" }))), this.loading && hAsync("duet-spinner", { key: '7e1e99a1cc8724ea6db15316084259e62926b82b', color: "currentColor" }))));
     }
     get element() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": ["syncToProxyButton"],
-        "submit": ["syncToProxyButton"],
-        "value": ["syncToProxyButton"],
-        "name": ["syncToProxyButton"]
-    }; }
     static get style() { return DuetButtonStyle0; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -4534,6 +4544,7 @@ class DuetButton {
             "negative": [4],
             "theme": [1025],
             "margin": [1],
+            "form": [1],
             "padding": [1],
             "centerText": [4, "center-text"],
             "wrapping": [1],
@@ -6546,7 +6557,7 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
     'default': tokens
 });
 
-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)}";
 var DuetCollapsibleStyle0 = duetCollapsibleCss;
 
 /**
@@ -6607,6 +6618,7 @@ class DuetCollapsible {
             });
         };
         this.theme = "";
+        this.negative = false;
         this.accessibleLabel = undefined;
         this.heading = "";
         this.headingFullWidth = false;
@@ -6646,14 +6658,14 @@ class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString$1(this.headingLevel) : "div";
-        return (hAsync(Host, { key: 'aafe219a93ff8b806e05ecf9c0203f7afd6929e1', class: { "duet-m-0": this.margin === "none" } }, hAsync(HeadingTagName, { key: 'c6f7409213132914e3ec49ba138a10aee197fb03' }, hAsync("button", { key: '988a8b779e70e27852ac15b271ee8ad6eeb53f52', class: {
+        return (hAsync(Host, { key: 'aff15bb7d7a183ad8717bd077ed5e692549479e2', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, hAsync(HeadingTagName, { key: '8c8b350ac427399cf5e694ae5045b5d757b17324' }, hAsync("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 }, hAsync("div", { key: '7ad9554421eb7d8777b207721224268ba575b832', class: "duet-collapsible-heading-icon" }, hAsync("duet-icon", { key: '057dd8ded09e313bc868f3f349d80b37d565f1da', margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), hAsync("div", { key: '4a929efd3b1cd2b1725e1d2dc3a68b3656ad32f3', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (hAsync("div", { key: 'a8a3051f9f9fa0e01619a2c8cf82dde1e117aa3e', part: "duet-collapsible-after-heading" }, hAsync("slot", { key: '5eb5fbcdacf0edcb52f3fcc4c196dc308a1c5ac2', name: "after-heading" }))))), hAsync("div", { key: '1cae60d79f74a0961eb0a280b3f31b457ba82c86', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, hAsync("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 }, hAsync("div", { key: 'e2943d02487fd97319e47030dba988b6e90ab8e8', class: "duet-collapsible-heading-icon" }, hAsync("duet-icon", { key: '2e80461c2e5eb1d3cae6552ebdae873e6430a433', margin: "none", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), hAsync("div", { key: 'fdaecea0fa4dbb325e7bc460d5ca016ccf083111', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (hAsync("div", { key: '3b1a1f5cd79b5cd31b1204ae9dd3db28601f8fa9', part: "duet-collapsible-after-heading" }, hAsync("slot", { key: '2c8a5041e7264addf9840a3cecf6c7ebbddeb871', name: "after-heading" }))))), hAsync("div", { key: '151b1f002a2745bf31ff97496f53b4a81c77b524', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, hAsync("slot", { key: '6b729485bb03d25d5529b23b4a2ce502d5a58a32' }))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetCollapsibleStyle0; }
@@ -6662,6 +6674,7 @@ class DuetCollapsible {
         "$tagName$": "duet-collapsible",
         "$members$": {
             "theme": [1025],
+            "negative": [4],
             "accessibleLabel": [1, "accessible-label"],
             "heading": [1],
             "headingFullWidth": [4, "heading-full-width"],
@@ -6728,6 +6741,7 @@ class DuetCombobox {
             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));
@@ -6736,7 +6750,10 @@ class DuetCombobox {
             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);
                     }
@@ -6770,6 +6787,9 @@ class DuetCombobox {
                 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;
@@ -6820,7 +6840,7 @@ class DuetCombobox {
         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";
     }
@@ -6835,6 +6855,15 @@ class DuetCombobox {
     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();
@@ -6942,7 +6971,11 @@ class DuetCombobox {
      * 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());
         }
@@ -7005,17 +7038,9 @@ class DuetCombobox {
      * 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);
         }
@@ -7102,7 +7127,7 @@ class DuetCombobox {
     }
     //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",
@@ -7178,6 +7203,7 @@ class DuetCombobox {
     static get watchers() { return {
         "listOpen": ["popupMenuOpenHandler", "processListOpenChange"],
         "activeItem": ["activeItemHandler"],
+        "inputValue": ["inputValueHandler"],
         "items": ["processItems"],
         "value": ["processValue"]
     }; }
@@ -7539,7 +7565,7 @@ function createShortcuts(shortcuts) {
     };
 }
 
-const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:relative;z-index:200;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:48px;color:rgb(8, 42, 77);cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-left-color:rgb(181, 198, 208);border-radius:0 4px 4px 0;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:rgb(23, 28, 58);border-color:rgb(199, 202, 207)}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-date-button.sc-duet-date-picker:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:not-allowed;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:rgb(245, 247, 250) !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-input-has-focus.sc-duet-date-picker .duet-date-button.sc-duet-date-picker,.duet-date-button.sc-duet-date-picker:focus{height:46px;color:rgb(0, 119, 179);border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-input-has-focus.sc-duet-date-picker .duet-date-button.sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:rgb(222, 224, 228)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{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\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{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-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker:focus{outline:none}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;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:400;font-variant-numeric:tabular-nums;line-height:2.6 !important;color:rgb(8, 42, 77) !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button.sc-duet-date-picker:hover{background:rgb(228, 241, 247) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:rgb(255, 227, 228) !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:rgb(0, 75, 129) !important;background:rgb(240, 247, 250) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:rgb(126, 2, 35) !important;background:rgb(255, 241, 241) !important;box-shadow:0 0 0 1px #171c3a !important}[aria-pressed=true].sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker,.sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;outline:0}.duet-theme-turva.sc-duet-date-picker [aria-pressed=true].sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important;box-shadow:0 0 5px 0 #171c3a !important}.sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{z-index:200;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(127, 150, 165) !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(143, 147, 158) !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:rgb(127, 150, 165) !important;pointer-events:none;cursor:default;background:rgb(245, 248, 250) !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:rgb(143, 147, 158);background:rgb(245, 247, 250);box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker .sc-duet-date-picker::part(button){border:0}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 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:1.25rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{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-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(181, 198, 208)}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:rgb(199, 202, 207)}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(8, 42, 77) !important;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:rgb(245, 247, 250) !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 247, 250) !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a !important}";
+const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:relative;z-index:200;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:48px;color:rgb(8, 42, 77);cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-left-color:rgb(181, 198, 208);border-radius:0 4px 4px 0;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:rgb(23, 28, 58);border-color:rgb(199, 202, 207)}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-date-button.sc-duet-date-picker:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:not-allowed;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:rgb(245, 247, 250) !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-input-has-focus.sc-duet-date-picker .duet-date-button.sc-duet-date-picker,.duet-date-button.sc-duet-date-picker:focus{height:46px;color:rgb(0, 119, 179);border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-input-has-focus.sc-duet-date-picker .duet-date-button.sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:rgb(23, 28, 58);box-shadow:0 0 0 2px #171c3a !important}.input-error.sc-duet-date-picker{border-top-color:rgb(214, 28, 82);border-right-color:rgb(214, 28, 82);border-bottom-color:rgb(214, 28, 82)}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:rgb(222, 224, 228)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{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\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{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-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker:focus{outline:none}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;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:400;font-variant-numeric:tabular-nums;line-height:2.6 !important;color:rgb(8, 42, 77) !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button.sc-duet-date-picker:hover{background:rgb(228, 241, 247) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:rgb(255, 227, 228) !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:rgb(0, 75, 129) !important;background:rgb(240, 247, 250) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:rgb(126, 2, 35) !important;background:rgb(255, 241, 241) !important;box-shadow:0 0 0 1px #171c3a !important}[aria-pressed=true].sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker,.sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;outline:0}.duet-theme-turva.sc-duet-date-picker [aria-pressed=true].sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important;box-shadow:0 0 5px 0 #171c3a !important}.sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{z-index:200;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .sc-duet-date-picker:focus .duet-date-table-button.sc-duet-date-picker{box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(127, 150, 165) !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:rgb(143, 147, 158) !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:rgb(127, 150, 165) !important;pointer-events:none;cursor:default;background:rgb(245, 248, 250) !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:rgb(143, 147, 158);background:rgb(245, 247, 250);box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker .sc-duet-date-picker::part(button){border:0}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 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:1.25rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{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-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(181, 198, 208)}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:rgb(199, 202, 207)}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(8, 42, 77) !important;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:rgb(245, 247, 250) !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:rgb(245, 247, 250) !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a !important}";
 var DuetDatePickerStyle0 = duetDatePickerCss;
 
 /**
@@ -7565,12 +7591,12 @@ class DuetDatePicker {
             },
             rangeUnderflow: {
                 en: "Date too early",
-                fi: "Päivämäärä liian aikainen",
+                fi: "Liian aikainen päivämäärä",
                 sv: "Datum för tidigt",
             },
             rangeOverflow: {
                 en: "Date too late",
-                fi: "Päivämäärä liian aikainen",
+                fi: "Liian myöhäinen päivämäärä",
                 sv: "Datum för sent",
             },
         };
@@ -10643,7 +10669,7 @@ function getAccessibleLinkLabel(component) {
     return null;
 }
 
-const duetLinkCss = "*,*::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:inline}:host(.duet-link-block){display:block}:host(.duet-link-button){margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}:host(.duet-link-button):last-child,:host(.duet-link-button):last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 97, 155);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-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(164, 4, 40)}.duet-link:hover{color:rgb(0, 75, 129);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-link:active{opacity:0.75;transition:none}button{font-size:inherit;cursor:pointer}.duet-link-is-external.duet-link:not(.block,.button),.duet-link-is-download.duet-link:not(.block,.button){text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-content,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block,.button):hover>.duet-link-content,.duet-link-is-download.duet-link:not(.block,.button):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button) .duet-link-icon-tail,.duet-link-is-download.duet-link:not(.block,.button) .duet-link-icon-tail{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(8, 42, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__icon{display:flex}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.button{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:14px 16px;line-height:1.25;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(181, 198, 208);border-radius:12px;outline:0 solid rgb(181, 198, 208);outline-offset:-2px;transition:all 300ms ease}.duet-link.button>*{flex-shrink:0}.duet-link.button .duet-link-content{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(8, 42, 77);text-align:left}.duet-link.button .icon-wrap{display:flex;align-items:center;justify-content:center}.duet-link.button.duet-link-has-icon-background{min-height:60px;padding:12px;padding-right:20px;line-height:1.5}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:36px;height:36px;border-radius:8px}.duet-link.button:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){.duet-link.button{min-height:50px}.duet-link.button.duet-link-has-icon-background{gap:16px;min-height:72px;border-radius:16px}.duet-link.button.duet-link-has-icon-background .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.button.duet-link-has-icon-background .duet-link-content{font-size:1.1rem}}.duet-link.button.duet-theme-turva{border-color:rgb(199, 202, 207)}.duet-link.button.duet-theme-turva .duet-link-content{color:rgb(23, 28, 58)}.duet-link.button.duet-theme-turva:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-link.button .block__chevron-icon{transition:300ms ease}.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}";
+const duetLinkCss = "*,*::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:inline}:host(.duet-link-block){display:block}:host(.duet-link-button){margin-right:8px !important;margin-bottom:12px !important;display:inline-block;width:100%}:host(.duet-link-button):last-child,:host(.duet-link-button):last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:rgb(0, 97, 155);text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-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(164, 4, 40)}.duet-link:hover{color:rgb(0, 75, 129);text-decoration:none}.duet-link:hover.duet-theme-turva{color:rgb(126, 2, 35)}.duet-link:active{opacity:0.75;transition:none}button{font-size:inherit;cursor:pointer}.duet-link-is-external.duet-link:not(.block,.button,.card),.duet-link-is-download.duet-link:not(.block,.button,.card){text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button,.card) .duet-link-content,.duet-link-is-download.duet-link:not(.block,.button,.card) .duet-link-content{text-decoration:underline}.duet-link-is-external.duet-link:not(.block,.button,.card):hover>.duet-link-content,.duet-link-is-download.duet-link:not(.block,.button,.card):hover>.duet-link-content{text-decoration:none}.duet-link-is-external.duet-link:not(.block,.button,.card) .duet-link-icon-tail,.duet-link-is-download.duet-link:not(.block,.button,.card) .duet-link-icon-tail{text-decoration:none;white-space:nowrap}.duet-tab-to-link{padding:15px 28px 16px !important;position:absolute;top:-100%;left:-100%;z-index:200;width:1px;min-width:190px;height:1px;overflow:hidden;font-weight:600;color:rgb(0, 119, 179);text-align:center;text-decoration:none;background:rgb(255, 255, 255);border-radius:4px;opacity:0;transition:none}.duet-tab-to-link.duet-theme-turva{min-width:120px;color:rgb(23, 28, 58)}@media (min-width: 106.25em){.duet-tab-to-link{margin-left:20px}}.duet-tab-to-link:focus{top:12px;left:20px;width:auto;height:auto;outline:0;opacity:1}.block.duet-link{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:16px;font-weight:600;color:rgb(8, 42, 77);text-decoration:none}.block.duet-link.duet-link-has-icon{grid-template-columns:auto 1fr auto}.block.duet-link.none{padding:0}.block .block__icon{display:flex}.block .block__content{position:relative;bottom:2px}.block .block__chevron{align-self:center}.block .block__chevron-icon{transition:300ms ease}.block:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.button,.duet-link.card{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:14px 16px;line-height:1.25;text-decoration:none;background-color:rgb(255, 255, 255);border:solid 1px rgb(181, 198, 208);border-radius:12px;outline:0 solid rgb(181, 198, 208);outline-offset:-2px;transition:all 300ms ease}.duet-link.button>*,.duet-link.card>*{flex-shrink:0}.duet-link.button .duet-link-content,.duet-link.card .duet-link-content{flex-grow:1;flex-shrink:1;font-size:1rem;font-weight:600;color:rgb(8, 42, 77);text-align:left}.duet-link.button .icon-wrap,.duet-link.card .icon-wrap{display:flex;align-items:center;justify-content:center}.duet-link.button.duet-link-has-icon-background,.duet-link.card.duet-link-has-icon-background{min-height:60px;padding:12px;padding-right:20px;line-height:1.5}.duet-link.button.duet-link-has-icon-background .icon-wrap,.duet-link.card.duet-link-has-icon-background .icon-wrap{width:36px;height:36px;border-radius:8px}.duet-link.button:hover,.duet-link.card:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179)}@media (min-width: 48em){.duet-link.button,.duet-link.card{min-height:50px}.duet-link.button.duet-link-has-icon-background,.duet-link.card.duet-link-has-icon-background{gap:16px;min-height:72px;border-radius:16px}.duet-link.button.duet-link-has-icon-background .icon-wrap,.duet-link.card.duet-link-has-icon-background .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.button.duet-link-has-icon-background .duet-link-content,.duet-link.card.duet-link-has-icon-background .duet-link-content{font-size:1.1rem}}.duet-link.button.duet-theme-turva,.duet-link.card.duet-theme-turva{border-color:rgb(199, 202, 207)}.duet-link.button.duet-theme-turva .duet-link-content,.duet-link.card.duet-theme-turva .duet-link-content{color:rgb(23, 28, 58)}.duet-link.button.duet-theme-turva:hover,.duet-link.card.duet-theme-turva:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-link.button .block__chevron-icon,.duet-link.card .block__chevron-icon{transition:300ms ease}.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon,.duet-link.card:not(.duet-link-is-external):hover .block__chevron-icon{transform:translateX(4px)}.duet-link.card{border-color:rgb(228, 236, 239);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-link.card.duet-theme-turva{border-color:rgb(234, 235, 239);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13)}.duet-link.card:not(.duet-link-has-icon){gap:12px;padding:16px}.duet-link.card .chevron-wrap{display:flex;align-items:center;height:100%}.duet-link.card.duet-link-has-icon{gap:12px;align-items:flex-start;padding:16px}.duet-link.card.duet-link-has-icon .icon-wrap{width:48px;height:48px;border-radius:12px}.duet-link.card.duet-link-has-icon .chevron-wrap{height:48px}@media (min-width: 48em){.duet-link.card:not(.duet-link-has-icon){gap:20px;padding:24px}.duet-link.card.duet-link-has-icon{gap:20px;padding:24px}.duet-link.card.duet-link-has-icon .icon-wrap{width:62px;height:62px;border-radius:16px}.duet-link.card.duet-link-has-icon .chevron-wrap{height:62px}}";
 var DuetLinkStyle0 = duetLinkCss;
 
 /**
@@ -10719,6 +10745,7 @@ class DuetLink {
     }
     screenTest(event) {
         this.isSmallScreen = event.matches;
+        this.isMediumScreen = event.matches;
     }
     resolveDownload() {
         if (this.download === "") {
@@ -10734,11 +10761,17 @@ class DuetLink {
     renderBlockContent() {
         return (hAsync(Fragment, null, this.icon && (hAsync("span", { class: "block__icon" }, hAsync("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), hAsync("span", { class: "block__content" }, this.renderDefaultContent()), hAsync("span", { class: "block__chevron", part: "block-chevron" }, hAsync("duet-icon", { class: "block__chevron-icon", icon: this.external ? actionNewWindow.svg : actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
-    renderButtonContent() {
+    renderButtonCardContent() {
         const iconWrapStyle = {
             "background-color": getColorByName(this.iconBackground, this.theme),
         };
-        return (hAsync(Fragment, null, hAsync("span", { class: "icon-wrap", style: iconWrapStyle }, hAsync("duet-icon", { size: !this.iconBackground || this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), hAsync("span", { class: "duet-link-content", part: "duet-link-content" }, hAsync("slot", null)), hAsync("duet-icon", { class: "block__chevron-icon", icon: this.external ? actionNewWindow.svg : actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" })));
+        const iconSize = () => {
+            if (this.variation === "button") {
+                return this.iconBackground && this.isMediumScreen ? "medium" : "small";
+            }
+            return this.isMediumScreen ? "large" : "medium";
+        };
+        return (hAsync(Fragment, null, this.icon && (hAsync("span", { class: "icon-wrap", style: iconWrapStyle }, hAsync("duet-icon", { size: iconSize(), name: this.icon, margin: "none", color: this.iconColor }))), hAsync("div", { class: "duet-link-content", part: "duet-link-content" }, hAsync("slot", null)), hAsync("span", { class: "chevron-wrap" }, hAsync("duet-icon", { class: "block__chevron-icon", icon: this.external ? actionNewWindow.svg : actionArrowRight.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderContent() {
         switch (this.variation) {
@@ -10747,7 +10780,8 @@ class DuetLink {
             case "block":
                 return this.renderBlockContent();
             case "button":
-                return this.renderButtonContent();
+            case "card":
+                return this.renderButtonCardContent();
         }
     }
     /**
@@ -10757,10 +10791,10 @@ class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (hAsync(Host, { key: 'aad1a5cfaf3fb8d502c12de032a4fed3069f3927', class: {
+        return (hAsync(Host, { key: '2025edd3774d559f0d6877498e0a806532fb310c', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, hAsync(Tag, { key: 'c4dc2d9716f29769b6aa60d07788ab96b4946f15', href: this.url, class: {
+            } }, hAsync(Tag, { key: 'ee013e25058fdfe22cf04784e06162181b9ff5a2', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -12222,7 +12256,7 @@ class DuetNav {
     }; }
 }
 
-const duetNotificationCss = "*,*::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%}:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:0.7}.duet-notification{display:block;padding:16px;cursor:pointer}:host(:first-of-type) .duet-notification{border-top-left-radius:8px;border-top-right-radius:8px}:host(:last-of-type) .duet-notification{border-bottom:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.duet-notification.duet-theme-turva{color:rgb(23, 28, 58);border-bottom-color:rgb(222, 224, 228)}.duet-notification.duet-notification-highlight{font-weight:600}.duet-notification.duet-notification-highlight.duet-theme-turva{background:rgb(245, 247, 250)}@media (min-width: 62em){.duet-notification:hover{background:rgb(240, 247, 250)}.duet-notification:hover.duet-theme-turva{background:rgb(245, 247, 250)}}.duet-notification a{text-decoration:none}.duet-notification a:focus{outline:0}:host(.user-is-tabbing) .duet-notification:focus-within{z-index:1;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-notification-container{position:relative;display:flex;border-bottom:1px solid rgb(212, 223, 229)}.duet-notification-badge-container{position:relative;width:16px}.duet-notification-badge{position:absolute;top:6px;left:-2px;width:8px;height:8px;background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-notification-badge{background:rgb(198, 12, 48)}.duet-notification-content{flex:1}.duet-notification-date{position:absolute;top:2px;right:0;width:96px;font-size:0.75rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:right;text-transform:uppercase;opacity:0.7}@media (max-width: 35.9375em){.duet-notification-date{width:auto}}.duet-theme-turva .duet-notification-date{color:rgb(113, 118, 132)}@media (min-width: 62em){:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:1}.duet-notification{border-bottom:1px solid rgb(212, 223, 229)}.duet-notification:hover{background:rgb(228, 241, 247)}.duet-notification.duet-notification-highlight{font-weight:600;background:rgb(240, 247, 250)}.duet-notification-container{border-bottom-style:none}}::slotted(duet-heading){padding-right:80px !important}::slotted(duet-paragraph){margin-bottom:2px !important}";
+const duetNotificationCss = "*,*::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%}:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:0.7}.duet-notification{display:block;padding:16px;padding-bottom:0;cursor:pointer}:host(:first-of-type) .duet-notification{border-top-left-radius:8px;border-top-right-radius:8px}:host(:last-of-type) .duet-notification{border-bottom:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.duet-notification.duet-theme-turva{color:rgb(23, 28, 58);border-bottom-color:rgb(222, 224, 228)}.duet-notification.duet-notification-highlight{font-weight:600}.duet-notification.duet-notification-highlight.duet-theme-turva{background:rgb(245, 247, 250)}@media (min-width: 62em){.duet-notification:hover{background:rgb(240, 247, 250)}.duet-notification:hover.duet-theme-turva{background:rgb(245, 247, 250)}}.duet-notification a{text-decoration:none}.duet-notification a:focus{outline:0}:host(.user-is-tabbing) .duet-notification:focus-within{z-index:1;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-notification-container{position:relative;display:flex;padding-bottom:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-notification-badge-container{position:relative;width:16px}.duet-notification-badge{position:absolute;top:6px;left:-2px;width:8px;height:8px;background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-notification-badge{background:rgb(198, 12, 48)}.duet-notification-content{flex:1}.duet-notification-date{position:absolute;top:2px;right:0;width:96px;font-size:0.75rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:right;text-transform:uppercase;opacity:0.7}@media (max-width: 35.9375em){.duet-notification-date{width:auto}}.duet-theme-turva .duet-notification-date{color:rgb(113, 118, 132)}@media (min-width: 62em){:host(:not([highlight])) ::slotted(duet-heading),:host(:not([highlight])) ::slotted(duet-paragraph){opacity:1}.duet-notification{padding:16px;border-bottom:1px solid rgb(212, 223, 229)}.duet-notification:hover{background:rgb(228, 241, 247)}.duet-notification.duet-notification-highlight{font-weight:600;background:rgb(240, 247, 250)}.duet-notification-container{padding-bottom:0;border-bottom-style:none}}::slotted(duet-heading){padding-right:80px !important}::slotted(duet-paragraph){margin-bottom:2px !important}";
 var DuetNotificationStyle0 = duetNotificationCss;
 
 class DuetNotification {
@@ -12508,7 +12542,7 @@ class DuetNumberInput {
                 this.subtract(ev);
             }
             else if (isBackspaceKey(ev)) {
-                this.clearValue();
+                this.clearValue(ev);
             }
         };
         this.handleChange = (ev) => {
@@ -12530,6 +12564,9 @@ class DuetNumberInput {
                     });
                 }
                 catch (e) {
+                    if (input.value !== "-") {
+                        this.clearValue(ev);
+                    }
                     this.duetInput.emit({
                         component: "duet-number-input",
                         originalEvent: ev,
@@ -12743,9 +12780,12 @@ class DuetNumberInput {
         const currentValue = SafeParseFloat(this.value, this.locale);
         return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
     }
-    clearValue() {
-        this.value = null;
+    clearValue(ev) {
         this.duetInputElement.value = "";
+        if (this.value !== null) {
+            this.value = null;
+            this.emitNull(ev);
+        }
     }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
@@ -14752,7 +14792,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const duetPopupMenuCss = "*,*::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}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
+const duetPopupMenuCss = "*,*::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}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
 var DuetPopupMenuStyle0 = duetPopupMenuCss;
 
 class DuetPopupMenu {
@@ -14808,6 +14848,7 @@ class DuetPopupMenu {
         this.mainAxisOffset = 0;
         this.crossAxisOffset = 0;
         this.controllerIcon = "action-arrow-down-small";
+        this.scrollLimit = undefined;
     }
     /**
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
@@ -14817,9 +14858,10 @@ class DuetPopupMenu {
         return this._controller;
     }
     set controller(value) {
-        if (this.controller === value) {
+        if (this._controller === value) {
             return;
         }
+        this._controller = value;
         if (typeof value === "string") {
             this.setOpenButton(document.getElementById(value));
             if (this.openButton) {
@@ -14870,7 +14912,6 @@ class DuetPopupMenu {
         if (this.open) {
             // When Esc is pressed the menu should be closed
             if (isEscapeKey(evt)) {
-                this.focusOpenButton();
                 this.hide();
             }
         }
@@ -14978,7 +15019,7 @@ class DuetPopupMenu {
             }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
-                    this.focusOpenButton();
+                    focusElement(this.openButton);
                 }
                 this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
                 if (this.accessibleRole !== "listbox") {
@@ -14987,14 +15028,18 @@ class DuetPopupMenu {
             }, 200);
         }
     }
-    focusOpenButton() {
-        if (this.open) {
-            focusElement(this.openButton);
-        }
-    }
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    get popupMenuStyleHeight() {
+        if (this.itemElements.length > 0 && this.scrollLimit) {
+            const paddings = Number(spaceXSmall.replace("px", "")) * 2;
+            return `${this.itemElements[0].offsetHeight * this.scrollLimit + paddings}px`;
+        }
+        else {
+            return "auto";
+        }
+    }
     async getFocusedItemIndex() {
         const items = this.itemElements;
         for (let i = 0; i < items.length; i++) {
@@ -15010,10 +15055,16 @@ class DuetPopupMenu {
             left: `${this.menuX}px`,
             position: this.position,
             overflowY: "auto",
+            height: this.popupMenuStyleHeight,
         };
-        return (hAsync(Host, { key: '1573445d7c27f2e19d2ce614aba54a6af305ff86' }, hAsync("div", { key: '15d45b18fb7164b94698327e601076a3f51b1216', ref: element => {
+        return (hAsync(Host, { key: '4754c8522cdd93a4e90398840cb321821636b489' }, hAsync("div", { key: '45ceb31093aa93bf21e61daed2c77c4ba816556f', ref: element => {
                 this.menuElement = element;
-            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, hAsync("slot", { key: 'ea1ea99244036c122bb61dff60cb09c0b4393979' }))));
+            }, style: styles, class: {
+                open: this.open,
+                "duet-popup-menu-list": true,
+                "duet-theme-turva": this.theme === "turva",
+                "scroll-visible": this.scrollLimit < this.itemElements.length,
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, hAsync("slot", { key: '88dde9607c352adc70eb6a27b5fab917585cef1e' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -15037,6 +15088,7 @@ class DuetPopupMenu {
             "mainAxisOffset": [2, "main-axis-offset"],
             "crossAxisOffset": [2, "cross-axis-offset"],
             "controllerIcon": [1, "controller-icon"],
+            "scrollLimit": [2, "scroll-limit"],
             "open": [32],
             "menuY": [32],
             "menuX": [32],
@@ -15119,11 +15171,11 @@ class DuetPopupMenuItem {
             "duet-theme-turva": this.theme === "turva",
             "active-descendant": this.activeDescendant,
         };
-        return (hAsync(Host, { key: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, hAsync(TagName, { key: 'aafbfd9c8bd9cab5f2b2ba259efc8c31964bad10', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" || "option" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (hAsync("duet-icon", { key: '571151b958d0ef9af6f52cda7785555978c9d942', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), hAsync("span", { key: '99b4a1e46f824fdc684531dfe55b7bc66e06370c', class: "duet-popup-menu-item-label" }, hAsync("slot", { key: 'f76853aa6c7b441dcca9193dd8e73a117a49916f' })), (this.trailingIcon || this.active || (this.url && this.external)) && (hAsync("duet-icon", { key: 'c0a0f628bec874ca8d2d1fe9f1a0992703cfd1c2', name: this.url && this.external
+        return (hAsync(Host, { key: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, hAsync(TagName, { key: 'ac6c8e523bb7dbd6ce78dfb8e5ba1a34c765f538', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (hAsync("duet-icon", { key: '003f72c807601366ce44ba41c92d01cc3867a995', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), hAsync("span", { key: '5936e48916d5c665070e490074e5310b52ad0cd9', class: "duet-popup-menu-item-label" }, hAsync("slot", { key: '4f365167fa1ae20a9a26f91352791b8b94007088' })), (this.trailingIcon || this.active || (this.url && this.external)) && (hAsync("duet-icon", { key: '52e54059ac3b56ad022ed42085029a58b7010806', name: this.url && this.external
                 ? actionNewWindowSmall.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && hAsync("span", { key: 'f4287b3ef8b66ce1512254aa8e6383907650283d', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && hAsync("span", { key: '16fb5260a8d79c5b20bc7dcbb0d6fb078d41f0d5', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     get element() { return getElement(this); }
     static get style() { return DuetPopupMenuItemStyle0; }
@@ -16881,11 +16933,6 @@ class DuetSlideout {
                 component: "duet-slideout",
             });
         };
-        this.bgOnClick = (e) => {
-            if (this.open) {
-                this.toggleMenu(e);
-            }
-        };
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
@@ -16896,6 +16943,7 @@ 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,
@@ -16942,7 +16990,7 @@ class DuetSlideout {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        if (this.dialog) {
+        if (this.dialog && this.modal) {
             enableBodyScroll(this.dialog);
         }
         if (this.mutationObserver) {
@@ -16963,7 +17011,9 @@ 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();
             }
@@ -16979,7 +17029,9 @@ class DuetSlideout {
             }
             setTimeout(() => {
                 focusElement(this.openButton);
-                enableBodyScroll(this.dialog);
+                if (this.modal) {
+                    enableBodyScroll(this.dialog);
+                }
                 this.teleport.removeInertFromSiblings();
             }, 200);
         }
@@ -16995,6 +17047,15 @@ 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().
      */
@@ -17044,15 +17105,15 @@ class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (hAsync(Host, { key: '289093e61e89d5724e3bb15cd7945fd39734ed53' }, hAsync("div", { key: '3514ce08bf8d7a529cfbff42be55b8bcf192cc8f', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, hAsync("duet-overlay", { key: 'b78a47d52483e0eb360dc0ccc9e657b5ccb9b030', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), hAsync("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 (hAsync(Host, { key: 'c5dc68c63efc7dfaae9700972fb7e804f113a5a7' }, hAsync("div", { key: '4af227670e861029e9e7991487c2210fcfa9ae63', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && hAsync("duet-overlay", { key: '6ffa8d92692ab324124f8ff994494faf9a981498', visible: this.open, "display-device": "large", zIndex: "600" }), hAsync("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 }, hAsync(FocusGuard, { key: '8d2774b7413c3a4348831ea8f3484763560496d4', moveFocusTo: this.closeButton }), hAsync("div", { key: '0ab02fea0fc88c1cad4e7964cf64ddd4e0991d3c', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, hAsync("div", { key: '12b34a66f05a9d7d65c8d06a36aab27b9190c8ac', class: "top" }, hAsync("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 }, hAsync(FocusGuard, { key: 'ba639a4f17cf9c92849bdad56a69a96948e46915', moveFocusTo: this.closeButton }), hAsync("div", { key: '76d1cc048043e127d91449e2d7570190c7668779', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, hAsync("div", { key: '1c0459f248a91c0a3c594b8f4970b700c9992e56', class: "top" }, hAsync("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 }, hAsync("duet-icon", { key: 'f25d28342f722a6d4b7705e45498a8036468bf74', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), hAsync("div", { key: '0162ecd6fc8db33a7053a1bf44bdb0b7b220ec6f', class: "sticky-header" }, hAsync("slot", { key: '6d47a428f6f63a9ea306af7b1553dcc5144e84c7', name: "sticky-header" }))), hAsync("div", { key: '7fe090f9ad0f6eb825809a17b8610f5aefbd2ab2', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, hAsync("duet-icon", { key: 'e0047f0d5c7d1780dd80c924da5f8cd31960efc8', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), hAsync("div", { key: '5ef0c4df0077b3af2a371fef1f22b5e6e344e6a4', class: "sticky-header" }, hAsync("slot", { key: '59db3342c0a3fc083c38d546fd02333344f363a1', name: "sticky-header" }))), hAsync("div", { key: 'b2be934939363da36c080b5d03b9f3137a026e6e', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, hAsync("slot", { key: 'bf013947faa4f1951dbb34616040b35d90e4770c' })), hAsync(FocusGuard, { key: '388318c3a94cd035f6e02eb83e49e0d97ad56995', moveFocusTo: this.closeButton })))));
+            } }, hAsync("slot", { key: '8ecd75055940b309d013a92406a4f8f3e51141e7' })), hAsync(FocusGuard, { key: 'e31a31d2d63ece57c247803e3ffa3fbb193af5ee', moveFocusTo: this.closeButton })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -17069,6 +17130,7 @@ class DuetSlideout {
             "opener": [6145],
             "controller": [6145],
             "backgroundColor": [1537, "background-color"],
+            "modal": [4],
             "language": [32],
             "displaying": [32],
             "openPanel": [32],
@@ -17077,7 +17139,7 @@ class DuetSlideout {
             "show": [64],
             "hide": [64]
         },
-        "$listeners$": [[8, "keyup", "handleKeyUp"]],
+        "$listeners$": [[8, "keyup", "handleKeyUp"], [4, "click", "handleDocumentClick"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["open", "open"], ["backgroundColor", "background-color"]]
     }; }