@duetds/components 8.5.0 → 8.5.1

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

@@ -110,7 +110,7 @@
   position: relative;
   z-index: 100;
   display: flex;
-  gap: 1rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -157,7 +157,6 @@
 }
 .checked > .duet-choice-label {
   padding: 1rem;
-  color: rgb(0, 119, 179) !important;
   background: rgb(243, 249, 252);
   border-color: rgb(0, 119, 179) !important;
   border-width: 2px;
@@ -166,7 +165,6 @@
   border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .checked > .duet-choice-label {
-  color: rgb(23, 28, 58) !important;
   background: rgb(245, 245, 247);
   border-color: rgb(23, 28, 58) !important;
 }
@@ -174,7 +172,7 @@
   border-color: rgb(198, 12, 48);
 }
 .checked.collapsible > .duet-choice-label, .collapsible-force-expanded.collapsible > .duet-choice-label {
-  padding-bottom: calc(1rem + 1px);
+  padding-bottom: calc(1rem + 2px) !important;
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -188,7 +186,7 @@
   border-color: rgb(144, 149, 153);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(23, 28, 58);
 }
 .duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
@@ -227,6 +225,12 @@ input[disabled] + .duet-choice-label {
   background: rgb(245, 248, 250) !important;
   border-color: rgb(225, 227, 230) !important;
 }
+input[disabled] + .duet-choice-label .duet-choice-card-icon {
+  color: rgb(101, 119, 135);
+}
+.duet-theme-turva input[disabled] + .duet-choice-label .duet-choice-card-icon {
+  color: rgb(116, 116, 117);
+}
 input[disabled] + .duet-choice-label .duet-checkmark {
   border-color: rgb(101, 119, 135) !important;
 }
@@ -246,13 +250,11 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 
 .checked > input[disabled] + .duet-choice-label {
-  background: rgb(225, 227, 230) !important;
-  border-color: rgb(225, 227, 230) !important;
+  border-color: rgb(144, 149, 153) !important;
 }
 
 .duet-theme-turva .checked > input[disabled] + .duet-choice-label {
-  background: rgb(228, 228, 230) !important;
-  border-color: rgb(228, 228, 230) !important;
+  border-color: rgb(116, 116, 117) !important;
 }
 
 .duet-checkmark-container {
@@ -280,6 +282,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-radius: 50%;
 }
 [disabled] + label .duet-checkmark-container {
+  background: rgb(207, 210, 212) !important;
   border-color: rgb(207, 210, 212) !important;
 }
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
@@ -290,6 +293,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 207, 209) !important;
+  border-color: rgb(207, 207, 209) !important;
 }
 
 .duet-checkmark {
@@ -328,6 +332,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-icon {
   position: relative;
+  color: rgb(0, 119, 179);
+}
+.duet-theme-turva .duet-choice-card-icon {
+  color: rgb(173, 11, 43);
 }
 .duet-choice-card-icon duet-icon {
   display: block;
@@ -356,6 +364,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border: 1px solid rgb(225, 227, 230);
   border-top: 0;
   border-radius: 0 0 8px 8px;
+  transition: border-color 300ms ease;
 }
 @media (min-width: 36em) {
   .duet-choice-card-info, .duet-choice-card-collapsible {
@@ -382,9 +391,17 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 .duet-choice-card-collapsible.checked {
+  padding: 19px !important;
+  padding-top: 20px !important;
   border-color: rgb(0, 119, 179);
   border-width: 2px;
 }
+@media (min-width: 36em) {
+  .duet-choice-card-collapsible.checked {
+    padding: 27px !important;
+    padding-top: 28px !important;
+  }
+}
 .duet-choice-card-collapsible.checked.duet-theme-turva {
   border-color: rgb(23, 28, 58);
 }
@@ -412,13 +429,16 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   background: rgb(245, 245, 247);
   border-color: rgb(228, 228, 230);
 }
-.duet-choice-card-info .duet-choice-info-container:focus {
-  outline: none;
-}
 .duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container ::slotted(*) {
   display: none;
 }
 
+:host(.user-is-tabbing) .duet-choice-info-container:focus {
+  display: block;
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+
 :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(0, 119, 179);
   border-width: 2px;
@@ -427,6 +447,17 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(116, 116, 117);
 }
 
+:host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+  padding: 19px !important;
+  padding-top: 20px !important;
+}
+@media (min-width: 36em) {
+  :host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
+    padding: 27px !important;
+    padding-top: 28px !important;
+  }
+}
+
 .duet-choice-info-toggle {
   display: flex;
   flex-shrink: 0;

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

@@ -6,7 +6,6 @@ import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
-import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
@@ -25,6 +24,9 @@ export class DuetChoice {
         this.expandId = createID("DuetChoiceExpand");
         this.headerId = createID("DuetChoiceHeader");
         this.infoButtonId = createID("DuetChoiceInfoButton");
+        /**
+         * Component event handling.
+         */
         this.onMouseEnter = () => {
             this.isHovering = true;
         };
@@ -75,7 +77,6 @@ export class DuetChoice {
             if (this.getDisabled()) {
                 return;
             }
-            this.isInfoOpen = false;
             // if it's a radio button, and it's already checked
             // we shouldn't fire an event, so exit early
             if (this.type === "radio" && this.checked) {
@@ -95,12 +96,11 @@ export class DuetChoice {
                 setTimeout(() => {
                     var _a;
                     (_a = this.infoContainer) === null || _a === void 0 ? void 0 : _a.focus();
-                });
+                }, 150);
             }
         };
         this.isHovering = false;
         this.isInfoOpen = false;
-        this.isBlurred = false;
         this.theme = "";
         this.label = "label";
         this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
@@ -168,30 +168,6 @@ export class DuetChoice {
         unsubscribeTabbingChange(this);
         this.duetChoiceRemove.emit();
     }
-    /**
-     * Component event handling.
-     */
-    handleHostBlur(ev) {
-        /**
-         * When moving away from a choice, collapse the info bar to assist visually impared people on focusing
-         */
-        if (this.hasInfo && this.isInfoOpen && this.isKeyDown) {
-            // @ts-ignore
-            const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
-            if (!isTargetContainedInHost) {
-                this.toggleInfo();
-            }
-        }
-    }
-    handleHostKeyDown() {
-        this.isKeyDown = true;
-    }
-    handleHostKeyUp(ev) {
-        this.isKeyDown = false;
-        if (isEscapeKey(ev) && this.isInfoOpen) {
-            this.toggleInfo();
-        }
-    }
     /**
      * Sets focus on the specified `duet-choice`. Use this method instead of the global
      * `input.focus()`.
@@ -205,6 +181,16 @@ export class DuetChoice {
     async toggleInfoMethod() {
         this.isInfoOpen = !this.isInfoOpen;
     }
+    handleEscape(e) {
+        if (isEscapeKey(e)) {
+            if (this.isInfoOpen) {
+                this.isInfoOpen = false;
+                if (this.infoButtonEl) {
+                    this.infoButtonEl.focus();
+                }
+            }
+        }
+    }
     /**
      * Should the collapsible content be announced by screen readers
      */
@@ -272,8 +258,6 @@ export class DuetChoice {
         if (Build.isServer) {
             return;
         }
-        const choiceGroup = this.element.closest("duet-choice-group");
-        const choiceGroupLabel = choiceGroup ? choiceGroup.label : undefined;
         const identifier = this.identifier || this.choiceId;
         return (h(Host, { class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
@@ -295,13 +279,13 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container" }, h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))), this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
+            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
     }
     static get is() { return "duet-choice"; }
     static get encapsulation() { return "scoped"; }
@@ -954,8 +938,7 @@ export class DuetChoice {
     static get states() {
         return {
             "isHovering": {},
-            "isInfoOpen": {},
-            "isBlurred": {}
+            "isInfoOpen": {}
         };
     }
     static get events() {
@@ -1111,25 +1094,4 @@ export class DuetChoice {
         };
     }
     static get elementRef() { return "element"; }
-    static get listeners() {
-        return [{
-                "name": "blur",
-                "method": "handleHostBlur",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleHostKeyDown",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "handleHostKeyUp",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }];
-    }
 }

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

@@ -19,6 +19,52 @@ export class DuetCombobox {
                 // this.listElement.style.width = `${currentWidth + 1}px`
             }
         }, 100));
+        this.handleInputKeyDownEvent = (e) => {
+            //if selection is made, close the list and update internal and external values
+            // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+            // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+            this.input.accessibleActiveDescendant = undefined;
+            if (isEnterKey(e)) {
+                e.preventDefault();
+                this.selectActiveItem();
+                this.updateInputText(false);
+                this.listOpen = false;
+                return;
+            }
+            //tabbing out or escaping, restore initial state
+            if (isEscapeKey(e) || isTabKey(e)) {
+                this.updateInputText(true);
+                this.listOpen = false;
+                return;
+            }
+            //handle arrow up/down navigation
+            let nextActiveItem = this.activeItem;
+            if (isArrowUpKey(e)) {
+                e.preventDefault();
+                nextActiveItem = this.activeItem - 1;
+            }
+            else if (isArrowDownKey(e)) {
+                e.preventDefault();
+                nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+                this.listOpen = true;
+            }
+            if (isArrowDownKey(e) || isArrowUpKey(e)) {
+                const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+                if (nextActiveItem < 0 || !nextActiveItem) {
+                    nextActiveItem = 0;
+                }
+                if (nextActiveItem >= listItems.length) {
+                    nextActiveItem = listItems.length - 1;
+                }
+                // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+                // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+                this.input.accessibleActiveDescendant = "active_item";
+                this.activeItem = nextActiveItem;
+                this.scrollToActive();
+            }
+            this.announceActive();
+            return;
+        };
         this.processedItems = null;
         this.inputWidth = 0;
         this.inputValue = "";
@@ -108,7 +154,7 @@ export class DuetCombobox {
                 this.listOpen = !this.listOpen;
             }
         });
-        this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+        this.element.addEventListener("keydown", this.handleInputKeyDownEvent);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         //add correct aria attributes to the input element
         this.input.accessibleAutocomplete = "list";
@@ -121,7 +167,7 @@ export class DuetCombobox {
         }
         this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
         this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
-        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+        this.element.removeEventListener("keydown", this.handleInputKeyDownEvent);
         this.listElement.removeEventListener("click", e => {
             e.stopPropagation();
         });
@@ -230,52 +276,6 @@ export class DuetCombobox {
         this.inputValue = e.detail.value;
         this.listOpen = String(this.inputValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
-    handleInputKeyDownEvent(e) {
-        //if selection is made, close the list and update internal and external values
-        // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-        // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-        this.input.accessibleActiveDescendant = undefined;
-        if (isEnterKey(e)) {
-            e.preventDefault();
-            this.selectActiveItem();
-            this.updateInputText(false);
-            this.listOpen = false;
-            return;
-        }
-        //tabbing out or escaping, restore initial state
-        if (isEscapeKey(e) || isTabKey(e)) {
-            this.updateInputText(true);
-            this.listOpen = false;
-            return;
-        }
-        //handle arrow up/down navigation
-        let nextActiveItem = this.activeItem;
-        if (isArrowUpKey(e)) {
-            e.preventDefault();
-            nextActiveItem = this.activeItem - 1;
-        }
-        else if (isArrowDownKey(e)) {
-            e.preventDefault();
-            nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-            this.listOpen = true;
-        }
-        if (isArrowDownKey(e) || isArrowUpKey(e)) {
-            const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
-            if (nextActiveItem < 0 || !nextActiveItem) {
-                nextActiveItem = 0;
-            }
-            if (nextActiveItem >= listItems.length) {
-                nextActiveItem = listItems.length - 1;
-            }
-            // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
-            // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
-            this.input.accessibleActiveDescendant = "active_item";
-            this.activeItem = nextActiveItem;
-            this.scrollToActive();
-        }
-        this.announceActive();
-        return;
-    }
     selectActiveItem() {
         if (this.activeItem === undefined) {
             return;

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

@@ -24,7 +24,7 @@ export class DuetFieldset {
         this.compactLabel = false;
         this.error = undefined;
         this.accessibleLiveError = "polite";
-        this.labelHeadingLevel = "h3";
+        this.labelHeadingLevel = "span";
         this.labelHidden = false;
     }
     /**
@@ -210,8 +210,8 @@ export class DuetFieldset {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetHeadingLevel",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "original": "DuetHeadingLevel | \"span\"",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\"",
                     "references": {
                         "DuetHeadingLevel": {
                             "location": "import",
@@ -228,7 +228,7 @@ export class DuetFieldset {
                 },
                 "attribute": "label-heading-level",
                 "reflect": false,
-                "defaultValue": "\"h3\""
+                "defaultValue": "\"span\""
             },
             "labelHidden": {
                 "type": "boolean",

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

@@ -182,7 +182,7 @@ export class DuetHero {
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("div", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", null)), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&

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

@@ -150,19 +150,24 @@
   position: relative;
   height: 120px;
 }
+.duet-modal.loader .duet-modal-inner-slot-default {
+  position: relative;
+  backdrop-filter: blur(10px);
+}
 .duet-modal.loader duet-paragraph.duet-loader-message {
-  max-height: 0;
+  position: absolute;
   opacity: 0;
   transition: all 300ms ease;
-  transform: scale(0.9);
+  transform: scaleY(0);
+  transform-origin: top;
 }
 .duet-modal.loader duet-paragraph.duet-loader-message.show {
-  max-height: 100px;
   opacity: 1;
-  transform: scale(1);
+  transform: scaleY(1);
+  transform-origin: bottom;
 }
-.duet-modal.loader duet-paragraph.duet-loader-message:first-of-type::part(duet-paragraph) {
-  font-weight: 600;
+.duet-modal.loader duet-paragraph.duet-loader-message.show::part(duet-paragraph) {
+  backdrop-filter: blur(10px);
 }
 .duet-disable-transitions .duet-modal {
   transition: none;

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

@@ -180,11 +180,9 @@ export class DuetModal {
         const el = document.createElement(visible ? "duet-paragraph" : "duet-visually-hidden");
         el.textContent = message;
         el.classList.add("duet-loader-message");
-        if (this.variation === "loader" && visible) {
-            el.setAttribute("color", "gray-lightest");
-        }
         if (visible) {
             setTimeout(() => {
+                this.slotContainerEl.querySelectorAll(".duet-loader-message").forEach(el => el.classList.remove("show"));
                 el.classList.add("show");
             }, 10);
         }
@@ -224,7 +222,7 @@ export class DuetModal {
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open, dark: this.variation === "loader" }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -246,7 +244,7 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), this.variation === "loader" && (h("div", { class: "duet-modal-spinner" }, h("duet-spinner", { size: "large", color: "gray-lightest" }))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId, ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), this.variation === "loader" && (h("div", { class: "duet-modal-spinner" }, h("duet-spinner", { size: "large", color: "primary" }))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId, ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,14 @@
   opacity: 0;
 }
 .duet-overlay.dark {
-  opacity: 0.5;
+  opacity: 0.85;
+}
+.duet-overlay.white {
+  background: rgb(255, 255, 255);
+  opacity: 0.9;
+}
+.duet-overlay.white.duet-theme-turva {
+  background: rgb(255, 255, 255);
 }
 .duet-overlay.display-x-small {
   display: none;

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

@@ -22,7 +22,7 @@ export class DuetOverlay {
         this.displayDevice = "all";
         this.transition = "slowly";
         this.zIndex = "400";
-        this.dark = false;
+        this.variation = "default";
     }
     /**
      * Component lifecycle events.
@@ -46,7 +46,7 @@ export class DuetOverlay {
                 "display-large": this.getDisplayBreakpoint() === "large",
                 not: this.displayDevice.startsWith("not"),
                 hidden: !this.visible,
-                dark: this.dark,
+                [this.variation]: true,
             } })));
     }
     static get is() { return "duet-overlay"; }
@@ -201,23 +201,23 @@ export class DuetOverlay {
                 "reflect": false,
                 "defaultValue": "\"400\""
             },
-            "dark": {
-                "type": "boolean",
-                "mutable": true,
+            "variation": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "\"default\" | \"dark\" | \"white\"",
+                    "resolved": "\"dark\" | \"default\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Darker overlay allowing white text without background"
+                    "text": "Variation, dark and white can be used when we want to have text on the overlay"
                 },
-                "attribute": "dark",
+                "attribute": "variation",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"default\""
             }
         };
     }

package/lib/collection/utils/keyboard-utils.js

@@ -41,7 +41,8 @@ function listenMouse() {
 // start listening for mouse clicking (and tabbing through that) only if window is defined (i.e. not on server)
 if (typeof window !== "undefined") {
     window.addEventListener("mousedown", listenMouse, false);
-    window.addEventListener("blur", () => notifySubscribers(true));
+    // on blur, leave the window in tabbing state
+    window.addEventListener("blur", () => listenKeys({ key: "Tab" }));
 }
 export const subscribeTabbingChange = component => {
     tabbingChangeSubscribers.add(component);

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

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

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

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