@duetds/components 10.3.0 → 10.3.1

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -169,11 +169,11 @@
 }
 .duet-date-button:hover:not(:disabled) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva, .duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-date-button:disabled {
   pointer-events: none;
@@ -202,7 +202,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva {
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -371,7 +371,7 @@
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
 }
-.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva, .duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva {
+.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 :focus .duet-date-table-button {
@@ -380,7 +380,7 @@
   outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
 }
-.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva, .duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva {
+.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-date-table-button.disabled {
@@ -452,7 +452,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva, .duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva {
+.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -522,7 +522,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva, .duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva {
+.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -51,7 +51,6 @@ export class DuetDatePicker {
         this.focusedDay = new Date();
         this.inputValue = "";
         this.inputHasFocus = false;
-        this.internalValidityError = "";
         /**
          * Theme of the component.
          */
@@ -179,10 +178,9 @@ export class DuetDatePicker {
         this.handleBlur = (event) => {
             event.stopPropagation();
             this.inputHasFocus = false;
-            if (!this._validity.valid) {
-                this.value = null;
+            if (!this._validity.valid && !this.disableBuiltInErrors) {
                 const errorKey = Object.entries(this._validity).find(entry => !!entry[1])[0];
-                this.internalValidityError = getLocaleString(this.dateErrorMessages[errorKey]);
+                this.error = getLocaleString(this.dateErrorMessages[errorKey]);
             }
             this.duetBlur.emit({
                 component: "duet-date-picker",
@@ -258,7 +256,6 @@ export class DuetDatePicker {
         this.handleDaySelect = (_event, day) => {
             const min = parseISODate(this.min);
             const max = parseISODate(this.max);
-            this.determineValidity(day);
             if (inRange(day, min, max)) {
                 this.setValue(day);
                 this.hide();
@@ -273,10 +270,7 @@ export class DuetDatePicker {
         this.handleInputChange = (e) => {
             this.inputValue = e.detail.value;
             const parsed = parseDate(this.inputValue);
-            this.determineValidity(parsed);
-            if (parsed || this.inputValue === "") {
-                this.setValue(parsed);
-            }
+            this.setValue(parsed);
         };
     }
     /**
@@ -285,19 +279,15 @@ export class DuetDatePicker {
      * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
      */
     get validity() {
+        this.determineValidity();
         return this._validity;
     }
-    updateValidity(newValue, _oldValue, propName) {
-        if (propName === "value" && newValue === null) {
-            return;
-        }
-        this.determineValidity(parseISODate(this.value));
-        if (this._validity.valid) {
-            this.internalValidityError = "";
-        }
+    updateValidity() {
+        this.determineValidity();
     }
     updateInternalValue() {
-        if (this.value === null) {
+        // don't clear input when user has focus there
+        if (!this.value && this.inputHasFocus) {
             return;
         }
         const parsedValue = parseISODate(this.value);
@@ -316,7 +306,7 @@ export class DuetDatePicker {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.determineValidity(parseISODate(this.value));
+        this.determineValidity();
         this.updateInternalValue();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
@@ -403,13 +393,14 @@ export class DuetDatePicker {
     setFocusedDay(day) {
         this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
     }
-    determineValidity(date) {
+    determineValidity() {
         var _a, _b;
+        const valueAsDate = parseISODate(this.value);
         const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-        const badInput = inputValue !== "" && date == null;
-        const valueMissing = this.required && date == null;
-        const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
-        const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
+        const badInput = !valueAsDate && inputValue !== "";
+        const valueMissing = !valueAsDate && this.required;
+        const rangeOverflow = valueAsDate ? !inRange(valueAsDate, null, parseISODate(this.max)) : false;
+        const rangeUnderflow = valueAsDate ? !inRange(valueAsDate, parseISODate(this.min)) : false;
         this._validity = {
             patternMismatch: false,
             customError: false,
@@ -423,6 +414,9 @@ export class DuetDatePicker {
             valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
+        if (this._validity.valid) {
+            this.error = "";
+        }
     }
     setValue(date) {
         const newValue = printISODate(date);
@@ -430,6 +424,7 @@ export class DuetDatePicker {
             return;
         }
         this.value = newValue;
+        this.determineValidity();
         this.duetChange.emit({
             component: "duet-date-picker",
             value: this.value,
@@ -480,13 +475,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '2f9dd355a80f9ed65cc0cfa90d674f426bad4c59', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c023088cf474e2b460139486e85974f53963981', class: "duet-date" }, h(DatePickerInput, { key: '0c678c083138be043f01d6df1522e385a7ee122a', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error || (!this.disableBuiltInErrors && this.internalValidityError) || null, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'efec9f5c773e36d4e418dac06036390b50bff2a5', class: {
+        return (h(Host, { key: '5ebd34bf6ba1033b890138e5523f45fecd17eaf4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c4b995485be3c6b070ce738f3416db0d9683771', class: "duet-date" }, h(DatePickerInput, { key: 'c0b308099cd5c56790a1160d10a682551ce9da7e', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { key: 'cca008327d5a939054a1b2abd748b08170b19a07', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: '130f52a0f0194b1186619bf6426f97a68c079c11', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'b4c229e9d91c822d87702677e213f8753f344017', moveFocusTo: this.focusedDayNode }), h("div", { key: '3ce07367a559781b9872669665186af5572305ca', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '7740bce6549fc3423947947f68d7e8950baa440d', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '2d80551888be784d8ea12b74c43df593c4701e83', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '27d2994191b94efe00484fbd25d96537d6ed11b2', margin: "none" }, this.label), h("button", { key: '82cf74d2d7aff047562d13320496248d352c1e82', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '92b2e5fd52e4206c00acfd56e0d515d08e4527b1', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '738da11657cbac3ed52ef22490165f4ac76c6ea6' }, text.closeLabel))), h("div", { key: 'e8922fed8ac11149bb603c912d278c0b3843b214', class: "duet-date-dialog-header" }, h("div", { key: 'e922554dbea94dfa70e62983ee6a0b08f8e159d7', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '873ba9c661e3c280c88fffc510dcceab0b2d5863' }, h("h2", { key: 'c769e12a0c0c668164d25d7864a711d0f9268f09', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '5941e8d2cd0f5baec6001808c68cb4c51b37db86' }, h("label", { key: 'bee65da8486f65afe8d18e90b1daed308dda8864', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f9fd8b52eaa90fd555d737e2691b51260592101a', class: "duet-date-dialog-select" }, h("select", { key: '83b7003769bf0042228e2ed36ad4118e8f0f1ab2', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '1d9bbde4fcc96fbcaf2d714ecc34a58c755dfc7d', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '3c4be7bf8fefa6ee1f5cede7eeb34ebfeaae35a1' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: '4eece4a65cb58ba45a30e4fd2cf179d61b05625f', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '700e9f50a74a6113c33f149427169ae9917badc0' }, h("label", { key: 'c5f8403791830d9b0ad68ed66af8c3f1c26310e3', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '2c69022a45ab3effd4c907cc6d5c5a508bbb99f7', class: "duet-date-dialog-select" }, h("select", { key: 'fee0495e004775929f7b7aeb66278ac8b4fd003d', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'e50ff66c34ee36e965843e68e1fb3d26690ce1ed', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9808b372ac9fea0ce5c51acee5ee407d5906e3f1' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '90c5c74c91d9e3df13e70987f66c2964feca8cf5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'f66a8e9e9fba23a7a8c9d871f1ff0bbfa6b39b37', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'fe1df2d1456357c2ae731b66c302c45a33f40d06', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '86db10ad2c3d1ab190690ae65d4c778084194089', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: '741527916476f5959328595373dc3e11b02b0df2', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'de920ae43a19a7ca9790056fd3a9f51a08039d4f', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: 'fcb2d3f3fd5333529c2ebc82590a6a543112a5f4', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '0de38fdb796337ec9448bcff1bb652776fdf6f60', moveFocusTo: this.focusedDayNode }), h("div", { key: '9950afbc58987e498e2e6734fd6af177c65d94a8', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '2394f33f1efd2e0626b2a1bc3642a73193798b13', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '74b68ad35d92ab0c2616be5466ea6b8b2c1a1451', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '7385d9ef814cf4557cf903f705b38a7571369d0f', margin: "none" }, this.label), h("button", { key: '5ba61af3c6b024f1f3ef531b412e5c20243d83ca', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '14e320af49eb06c184cfe918a67f278bdac888bf', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'b58668ebd6f0849ae6e8f0454800b4ceb916443e' }, text.closeLabel))), h("div", { key: '79a07d6373ca479f45808ff3eef1ea6239148b26', class: "duet-date-dialog-header" }, h("div", { key: '6f08a300db74dd1562c658334c8220fc1569228c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '400b1451a2180e0a189a5c1e7c27139647ec5539' }, h("h2", { key: '47225d656584304da5b114f0430e17cb74a38e53', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'b66a24df41db7807ed3c0d3f36d380a897360fa6' }, h("label", { key: 'aae8cf780c5452e1399421e177309ad7a9179803', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f2bad2498489114a7bc0ffd6fc8c4f842b507e43', class: "duet-date-dialog-select" }, h("select", { key: '9d58e711523ace0781cc27947fb9ecc52bda8499', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '914f0bef1d172d4d5391991fd9f8206f7d0576df', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '7aebf3e0cbc22a117a5e155e0dd4518189f9b946' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'faf140d4032093b37db295f06e23ea761fa27c65', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '66399d5d57f605fe4db9c13ee13bcf89f4d38efd' }, h("label", { key: '76256efb6db83d4165a903420b70e9a6d43a2e49', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'e871aa90559d85cad33752f52a6e538571e6984f', class: "duet-date-dialog-select" }, h("select", { key: 'af2e90cb3d28123c36c83853753be30beff06400', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a1487d1853c56fc62c20bf2b3df60cc73d666017', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ad43c7efa4a93e4417c2051e000fe0f786b35612' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '5c42115e3dd7c4a48e5cae87b5f03ed274087ba5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'bc63edbea7a3b069774fc0b8766983f570479501', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e3cb3ade86eeedbaf914d104ce9b638109708eb6', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '3d1b9df7ab5852d770d6c98285b73e002a9f4468', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'fb66dbdf2065a158a265490a6f7c0ace038919d5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'b40a59659930ae4a47fb6d8dd45f334e5fcdf026', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -780,7 +775,7 @@ export class DuetDatePicker {
             "error": {
                 "type": "string",
                 "attribute": "error",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1154,8 +1149,7 @@ export class DuetDatePicker {
             "open": {},
             "focusedDay": {},
             "inputValue": {},
-            "inputHasFocus": {},
-            "internalValidityError": {}
+            "inputHasFocus": {}
         };
     }
     static get events() {

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

@@ -32,7 +32,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: 'fc0e7562cb30da77115c7a07938f9d586df909d5', class: {
+        return (h("div", { key: 'a833c22a31c93caea94753696848ad720b5dc06d', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -206,7 +206,7 @@ export class DuetEditableTable {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: '5b1b28e6321b07a1d385c1945f15b0c110a8b068', class: {
+        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -216,7 +216,7 @@ export class DuetEditableTable {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '47a4b4e9d3acf3ca83e70c1aa4e7758e1f6cbbbe', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '975344f17b9271b8ffa4264751aa2dae69279f45', role: this.accessibleRole }, h("caption", { key: 'e9039bfd4c5bf90f96856d13d993be7f13fa2d73' }, h("slot", { key: '38a7cd2c82e45ebcc080e1e20f3f77aa2a46973d', name: "tcaption" })), h("thead", { key: 'c4a02a18bfae96669f45328f6198dc52f43dd887' }, this.hasHeadSlotFirst && (h("tr", { key: 'af846dfeba040ddec43065803327195bea76a404' }, h("td", { key: 'c002827f8c8c6cce8d8d4415c80e4f39d4bb1ed6', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '5673bc937f4bc87b67f6112f59a1981ff7f02c79', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '79a45db93db0d6e5e35aade928f23032efdb821b' }, h("td", { key: 'fddd1434bf5a20188be229e5c3d9bde03b8d8dca', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '53b1ea3494b7e0f39426232f922a040eacf3a0f0', name: "thead-last" }))))), h("tbody", { key: 'b5d38eed528592d29f64f749e1938d0ff5b772b3' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'e2ef34f7d078a7ac7b4a38cd5953b449ce682a23' }, h("tr", { key: '9f2a92be2f425c419abd5fa1a0a7fb763cc0426b' }, h("td", { key: 'da2eeda1f65004cc2c197dad36038dc4a60c2e8e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: '988c400cb8046f0544293b8e1555f7b213f9def6', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
     }
     static get is() { return "duet-editable-table"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -29,11 +29,11 @@ export class DuetEmptyState {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6b61854be0ee8b668d513de66e117b928cb4671b' }, h("div", { key: '62ab8dddad16464e202f9225d080cee855a8193d', class: {
+        return (h(Host, { key: '9018087936c4abe5adead5d4fe62991ea84b3dc1' }, h("div", { key: 'a0aa84fb06673f4d741891019a98fd7d4f03b174', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '237ea5cd85e1be42a856c7b30e14022bb4cd824e', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '9bb0471dfd59d78fc51b71eccce4830d47506a42' }, h("slot", { key: 'cdf540cdcc74733367bfc04d13ec9659bd2adb52' })))));
+            } }, h("duet-icon", { key: '8d9265fb0946a832c1c386b139b28b775ade9936', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '87abfa72d165e96e3ca1798ab0023e13d540d757' }, h("slot", { key: 'fc437b4821cbc146906f8c33aa06d4718a0584b2' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ac0f503ac6d41953e774ad46b418c8ea39ff4708', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b564273ca16fac8fbb500ab8bfc9dff72e579770', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '150ed749bb02f820ab14416d153e67cea52dc29e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '17055f020b42050cfc12e5954edaac9c6658788e', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '607df92d8f78aaad01e4c80e33c17da55a52e20f', id: this.labelId }, h(this.labelHeadingLevel, { key: '33cee42411e380076885a046790cb8006088c5ed' }, this.label), this.caption && h("span", { key: '52c809bbe842c11a84e7d1a5c3083bfe92472d36' }, this.caption)), h("div", { key: 'aa297b27900d3a28a48bf8102b75e900896393ff', class: {
+            } }, h("legend", { key: '1cf7a2d88bbcea640fe06e19ce4b2d633be56c3b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'aec7db3663b9cc1c1ac2205ab103c708c56a0573' }, this.label), this.caption && h("span", { key: '849cec9875e1713b0c53ee81ffdcb33b501a78b1' }, this.caption)), h("div", { key: '319c243237ed47fe584e7498514a3f392d9b8b19', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '3af22b271c143a074adee18554408291e3faa660', class: "duet-fieldset-label" }, h("span", { key: '939a883743e233ba83e8ff3328b18842b0c4eae4', "aria-hidden": "true" }, this.label), h("slot", { key: '822892f650b6c0f733cc58a1aee1654e21d1f1f6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'bc40348b978fc775d1007cdf3949e95d4d3b54e0', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3119b1a7963015c24d6324d5de47fc53cdfd748e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'fa922540a117205680098064372a70aefc0953ae' }), h("span", { key: 'ad8d4d59379d7a9f89e618754d46404eb5c3c664', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c36abae3849393120d72e3781305cb2ce88b384c', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: 'c69484583f6027412eb7d50a33af3db48a4b9755', class: "duet-fieldset-label" }, h("span", { key: 'b8df8f29e780738665c0a054399d1d1f97f5e7ea', "aria-hidden": "true" }, this.label), h("slot", { key: '18d94da36179d4ba5b78c3ed6ac83f41d401c067', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5ceb8c432f19ab8b18d04ce12f6463e563a7459a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c6f433f3e47f2e2fdedcbc158d169ab6bea4a0a0', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b8a61deb6211c5abbc806d2762088fcedb936873' }), h("span", { key: 'a6c68e7ef61365792b92fc6ef7290d3b3a3cdd65', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '4fea45e086a99437a8f7ddc0e1617a3a6046beed', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -48,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '70aa98d57c2361a70abfd51e859679df65f68027' }, h("duet-visually-hidden", { key: '1c4899794b06709d24d5ff412141bf0e3714a8cb', "aria-hidden": "true" }, h("input", { key: 'ec3827c684ffbb3a4299720ef07f4c8590d0d6ed', ref: input => {
+        return (h(Host, { key: '4990de1bf699e3f0daea24f507a9b9e252b11d9a' }, h("duet-visually-hidden", { key: '0a226f6f53a8da89230e81df8be61a2413c44af1', "aria-hidden": "true" }, h("input", { key: 'a8a8e3bfc73847a74ea8dc8dff0da0c16d510e15', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -76,7 +76,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {

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

@@ -160,16 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: 'a1f13a9e8d015c33626dc35acfbac299d5d798b8', class: {
+        return (h("footer", { key: 'cded4930f82ba556fe630d4295e351cbbb2082e2', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '48ff4a3d5e8df21215a409def47ead6f70f697fa', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'a0cc027a05d4c054e0f99c2c2ad3fb6b34a58873', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '937096c43e34404c84fa15418efd41c5692f6ac1', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '865c6932f382aba543ca23c1bd4ab5aab4885b0a', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '3724f9ef6f0af6ca9812b4c9c2854209a80cb38b', class: "footer-top-logo" }, h("duet-logo", { key: '10e4b82fa2f117f130a2458a64249d36b5f99564', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '40ceb56a8366b96d5a9afc572984ff027249cfd0', class: "footer-top-right-container" }, h("slot", { key: 'e3f21c2f91e64c844a95d40344104e8aff352013', name: "info" }), h("div", { key: 'a2c5b4d2dad3aa29116a8fe5d2bd4525b6a6ad5c', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '0058cff0a643b85a2373c0b2633f5d8d293cf639', name: "extra" }), h("p", { key: '6e0623c40daaab7ecf2ba1abb3e6f5935bac445b', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'abb2319d06c15e6d423337f75f713e835188c326', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'f0b19fd6cc3da55c0519ab7e499f9d24df20ebc8', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '308c16b052419e8570fe7e39a5708f45bb58a00d' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '6308d6f3a762e1945a197a58efa9536c82412fdc', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: '5a4e9f746ddacca61409f6d398474e142ddffe81', class: "footer-top-logo" }, h("duet-logo", { key: '9a80fbca3c693fdc4a659b4644b0de9ed23c6773', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'ca9651a3a6c65b51931f237bc81d6f95fe779134', class: "footer-top-right-container" }, h("slot", { key: '7c84d38abbbc5618d311e8ef263a4a1aef8ae2b7', name: "info" }), h("div", { key: '488bde039351fbbf7618daaaa071b3420662e317', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '33805ebcfc7766486807318270595db1deedbb24', name: "extra" }), h("p", { key: '90ac218478d2659b7f74bb370d8066fd7ef7cf1c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '957a273602b782e88c3e4bd9ae639a68cfd8b966', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'd96e17ca5743ed26b331ecd377b6210dcf3e5a2a', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'b1495de197bbd8ab5a4ca4c0feddf656e4bfc0b3' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '8be41d3d9944acb6903a6f3caff06d6f8f9cd5cc', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,7 +203,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1a7bab03f61e124f9e7d90c4b32e16bfc3fba736', class: {
+        return (h(Host, { key: 'ad66e7c93a876e1c16fcd3e463dfbac854f9572b', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -230,7 +230,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '03ee25477d7ea8733b042bf85dc855f29f11dcc1' })));
+            } }, h("slot", { key: 'cb6c2453668b0a2ea8b90eb003a61f78585576a0' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '59b2546565c78716d981db97ba3a66b9f4b06104', style: {
+        return (h(Host, { key: '895153cc6a7fb2d33ea0fe30db592dc41dfe666e', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: '78c0ca977366f49a62d91c19e42b7140455c0e7e' })));
+            } }, h("slot", { key: 'e15b327861008131c15c1b804aecd2c0351afdf1' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -279,7 +279,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -347,7 +347,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -476,7 +476,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-header-button:hover {
@@ -662,7 +662,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-header-dropdown-toggle:active {
@@ -827,7 +827,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -902,7 +902,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva, .duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva {
+.duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -58,7 +58,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: 'da445e961c7a06c19d0a0522e4af2814b0ae9aa4', class: {
+        return (h(TagName, { key: '2f89171baca460e8b0b6b807a992856426a83838', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -69,7 +69,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: '7fffcae52939a894fd8c5ee37d67fccbbd0b4f16' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: 'aded9e6a879359f85d77f436736131a26188f4dc' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1423,7 +1423,7 @@ duet-heading + duet-button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva, .duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -284,7 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '0516fd4837dba53aae81d2ae0c78b70585422107', role: "region", class: {
+        return (h("div", { key: 'd5eeb3fa2ded961e10b0db110bc1606beadb5878', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -302,17 +302,17 @@ export class DuetHero {
                 "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
                 "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'c9519b4ff36fdb3ec68d569667065a743d57a360', class: "background-area" }, h("div", { key: 'ddb4386a162fe50a1ec65bfb5920194cd8b8247f', class: "background-container" }, h("div", { key: 'af9a1b99358098c95c9ca8ff11c8b4e8fed691db', class: "background" }, h("img", { key: 'caea4a0bec4b0fab914d327878fd82fc8937528d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '570fc51ca220622428a0d0ae0c0956c5f1ee0452', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '954467ff85417b30a4a6fc18c700464df609f586', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'a709338a6570cf245f37272263b03d7a27128f9e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'b93c7f5ac020bd754dba88132aaa9b7ea1ba4003', class: { background: true, [this.layout]: true } }, h("div", { key: '905662fbb3364da7510db2555f03de974562e505', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '262820358ecd29844c65be4a1d7e82549b45cee2', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '3d20072088e4a405b83d2f65268f2d488a5112ac', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e8c63df219322992bb8d722b01dcad205c044f9c', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '5b265dcc9db7e68c749b2b9c9d0e8fa4064f6b70', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '81e36645d1a21d9bc66fae4765e9ef3272537f03', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '504a1771e2e356783be5844509166ab29f78159d', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '97b506d236d0679f53696cac58503d7be257231f', class: "background-area" }, h("div", { key: '36890d9dc2a8f8b124420c7b3225ada20d01e35e', class: "background" }, h("div", { key: '1df015994f4bd85a884de6e1875be96408f599b7', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f68c97a4b3c8e4b03bac4bb2181e630ef63c8639', class: "brand-shape" }), h("div", { key: 'ba89b95cc6d1d2a55ca0681206266f0e52d10059', class: "brand-shaped-image" }, h("div", { key: '0c133b49c54fa275782754ac6ab44c468592b50b', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c9963f3b6134885b5cd4facc450e337fd3807749', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '6cd4723c1191be8841b3e72c186438d60b762165', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '76e6d63f430faa884dbe432dcf5241287edb6d94', class: "duet-hero-image-mask" }, h("div", { key: 'ac28833afeffb4273df030b71484549022dbcd7b', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3bd97c165b52eae5b07653f04508c94f3e2fbaa3', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'a3139ada0576c86e38608e8b3babde7bf1cb6428', class: "duet-hero-back" }, h("duet-button", { key: '18696adb6758e912d78507989319403a05031383', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'f1567b419987fa37b1bf3219d073b7407d68969a', class: "background-area" }, h("div", { key: '240fb437298bb4dbbe401c66c4b7ba4be218b793', class: "background-container" }, h("div", { key: '9bd3e01a06940f60f6edebe1b360afcfc6364c65', class: "background" }, h("img", { key: 'ece8321c4bd15e3eb89a58914373699cd5f74a6d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '2cbf71fbd70243c9e73dbf0be5cdcd74a4a6ae80', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'a92855b91f7460fe11771919b98613f2bc844c02', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '8eab8720aee4d33edb1ffc3e189ade31115cff0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '6a3b020ed0e975c55a1ef0a098900269282e0993', class: { background: true, [this.layout]: true } }, h("div", { key: '724ed47abbe45d42cdc24a15cf144ec92ebe7295', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'e34148e2264c68a7acce4cdd7ecd98b392f375f3', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '995d6c69d45d9b84e98afd7fbe143dd22c91ae93', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'f1adcd5407f731f243e920fd6d02e6307770c3b6', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'cbbd91e50a57b03cc9f1b2f8da143a73a5c9c23a', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '25750e275462cd216688306a684396609b4db5da', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '080dc04b7915092298dbfd71d85070db370553d2', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'f56fbc69d93eb69daf1a85bf4990d32babc011fd', class: "background-area" }, h("div", { key: '2e81ad46ab2d99734b33b3a5b275124199be6174', class: "background" }, h("div", { key: '67136b598ac80dabcefa7ece68e7152a444f6813', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '522590966eb8f2a919fbef1bd296d14cb7e47056', class: "brand-shape" }), h("div", { key: '64942939ee3b0cb08dbb8f9d3a0c50e3d6492fed', class: "brand-shaped-image" }, h("div", { key: '2a1c9671ff623f747a76ca2bf7eb7061f3e0ab77', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'c393815b6c10d63c768ac4af722df40ab1d611a8', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: 'fcf490f61e4a2c2fb88ce5804d7059d68789a5ad', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '026cece4736fb17a4f0809cc085ff131296eedcf', class: "duet-hero-image-mask" }, h("div", { key: 'd353ae243b8e1787ce2904cb50a8cb0f82f2b814', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '0f6bf9a85808413d9e9177bb4d6f4bdec1ebb372', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '882584ea7a07b3f5920a7ab308e42e5ac8d90956', class: "duet-hero-back" }, h("duet-button", { key: 'a0bb7347fc443bc2f4dbaa8a4359304c61a4a33d', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 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", { key: '28d192b8f069b4a32baa01a027abc42bdfb95887', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '012bf0e526bb27720cf999130cee18c48f154328', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '5cbbe391ce79e56835076065ebcffe0bab5228ba', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'b3e524e1dfb703166dabf2f84bbcc4114b55a30a', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'aa79305d862247ab6107539664112d93a239e8a7', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'd7be291d344c0357c68891dafcce35f2b39b5da5', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '32bb887d95e7bbf0c2037520f47080d4a4680bba', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd391fad4e9710b15fe3bbc98e8e22078f3a84972', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '927d16ef81835f367bda345400b4603d6c5dd36a', 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", { key: '05b8812b4a5f224422c0d102c9f6869bfcfe3a69', 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", { key: '512d50180bb9fba05bcde538b19fa87e70cf5a3a' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '1ca120e7175b467c0265513ecd4d32a30e5eaba8', 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", { key: 'd64fe12b0d99a21a97c3c01bf8a27c3d90168b06', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '6f59e43937274d798205e53bb5c8097707c84c7d', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '6e3a9999d6d9cfb00836f50d1f026f572c13d4d9', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '5a246252a9a3cffd670e27c7b34d62dbe81d99d1', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '9deaac254f1793d9cac59610b27e90cd67a1203a', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'f938dd95a754fa9749699793ce5a81a313cc94a8', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '719bb29e202df58c0cd542c6b2c72a8ced1157ea', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '36849331db1a89058aa564e686a46a9b7e975e1b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '553b3b961f3f23fdab788b84e63552d3c0686b37', 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", { key: 'af02b833ecfd90cfd09f0c48c071c41e935080db', 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", { key: '77cb919644b1a87eeff3ec753e4b075b3adb6e27' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'f5eed6109f77a64ee2ab2bafcc38c664a4bca2f9', 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" &&
-            this.variation !== "content" && h("div", Object.assign({ key: 'f49f23c4edbf72e479d8f7cf4cf2767d688c362b', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'a99b7943cc1408366bc93827beb41867aaf5fb01', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '4dbed5f231c2ffff11d5336b9ada8da3fefbdfce', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '3d48509557f9575a15947b37ab4fc30b768b5dbb', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'f6a74ccabd59055d22eec3654bde9c81fd4a9ce3', class: {
+        return (h(Host, { key: '2f6837b926530cee2afc83a590aa1ccb0dfeca03', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f2ea10e9ec8459d5a5995781e193c6d8df7fb1ef', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '6fa86044b5f3966537f38590bd12b28b698a080b', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '3d93b31d1831fa77b71a5f574a38d838636c7757', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '4ba33bca7da0ccbc0f11b1b5693e7912d0a0d45d', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }