@duetds/components 10.0.0-alpha.7 → 10.0.0-alpha.9

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

@@ -97,11 +97,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: 'ba913d023fc90de87a4aeedd212ab947e32c98bc', class: {
+        return (h(Host, { key: '719ad0e70de0dbcab6332a0c0d4ce9ef490e9303', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'ff5089fa99e7ca86ffa923013622115e774f2df8', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '0c75b949e51281ff96e7758fc3f29d61b5f34af4', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -110,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '1c8eea6c12ca3cc85caa5e6cdba5924737bc80ed', "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: '188ea6dc92da8b973315b53e58482380475fdc34', "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"; }

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

@@ -450,11 +450,13 @@ duet-caption:not(:last-of-type) {
   width: 100%;
 }
 
-.duet-input-variation-button {
+.duet-input-variation-button,
+.duet-input-variation-button-left {
   position: relative;
   width: 100%;
 }
-.duet-input-variation-button .duet-input-relative {
+.duet-input-variation-button .duet-input-relative,
+.duet-input-variation-button-left .duet-input-relative {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -463,16 +465,45 @@ duet-caption:not(:last-of-type) {
   justify-content: flex-start;
   width: auto;
 }
-.duet-input-variation-button .duet-input-relative duet-button {
+.duet-input-variation-button .duet-input-relative duet-button,
+.duet-input-variation-button-left .duet-input-relative duet-button {
   z-index: 250;
   margin-bottom: 0;
 }
+
+.duet-input-variation-button-left .duet-input-relative {
+  border-radius: 4px;
+}
+.duet-input-variation-button-left.has-focus .duet-input-relative {
+  border-color: rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
+}
+.duet-input-variation-button-left.duet-theme-turva.has-focus .duet-input-relative {
+  border-color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #171c3a !important;
+}
+.duet-input-variation-button-left:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #909599;
+}
+.duet-input-variation-button-left.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
+  box-shadow: 0 0 0 1px #747475;
+}
+.duet-input-variation-button-left .duet-input:focus, .duet-input-variation-button-left .duet-input:hover:not(.disabled) {
+  box-shadow: none !important;
+}
+
 .duet-input-variation-button .duet-input-relative .duet-input {
   border-right-width: 0 !important;
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
 
+.duet-input-variation-button-left .duet-input-relative .duet-input {
+  border-left-width: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
 .duet-input-variation-revealable {
   position: relative;
   width: 100%;

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

@@ -433,7 +433,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '30f2d51ce9cf22d995c492aa76cddf1763a06ba4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '500ec6c47a364ea47eb8d5a4878ccca8279d005c', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '7a4605252b120f12f95b974bd36e9eb7a8d5659d', class: {
+        return (h(Host, { key: 'd0b04b19187f9aba6d3db243ba94e675ae9a9e1d', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'c70a995ae5e64ad348ac4b56c572abe20bdd0084', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '73f06e392e23e530bcbd4744a7cb2e29cef9b199', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -447,7 +447,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '0db61c868f468f44b3e0a7776e549ee6df70de74', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '97a6188e387a1f49e302d465f00d4ed7c81784d1', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '4ec20c176c94e329898a0f248fb4b69f3ba79033', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '4d38724943676cd57a9804b773b13d0d6b9d32b5', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c92ea06068811cd93aa2fa00ae0eb362456c3637', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'a7542580d3550ed8f9161b5318187af455f0b2e9', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'e3614b13a63f079bfdddaf2c7ee21a256793f6ec', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '7adb551b1fc88b2d26f324f3891e72587285dbe5', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '402e4a5f8ba98a98cde01517f5de6d1da030ea99', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: 'bcad83ea5d955affdb9185a2764e33bd08d5c3f1', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'bb48970141e2ac6d514f8e97ed7d3b2336b01605', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '661651ef6107332614fbbc5c1f797a87b3f178ce', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '7e6ee0cb94d09434c67d8d6097d73176f2882fac', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c942fd0d043194baf1f9f711be7b15f63442c13f', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'b1d24bb9fde1ead6720ccfb3f81be9b27bd3fb56', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3121d1a70b4c35b96ea10adfc142034376ca5c46', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '997a33289366e1361a91d225a50b704847d64653', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '50367d85d0768215f127619d9d253f4459f278b6', name: "button-left" }), h("input", Object.assign({ key: '21fe19ad88326f7ab0b3d12501cee8681949908a', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -455,16 +455,16 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '798619aa635e7789dd4419652dcd89704c39114f', class: "duet-input-icon" }, h("duet-icon", { key: '4a5df88168231feca08b81a2fd2635fd320112a9', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'bb4670b4ad2d2817c806250ff3d2c7b42e58ceb5', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '073c81d796b322ab02ea19cdca462860b7c03c21', class: "duet-input-icon" }, h("duet-icon", { key: 'ce4215d934358fcbaa0cd80d94d9ab5b3f1df114', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'efaf82f9f2c24b1ffd5d2bece9007bd413124319', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { key: '59c76b456cba12de6154d25e3a2a3262bda01061', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f5cc20be9e09fef88c8513197efc8069a344f259', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '175b9fd1bb2442763e39cb1cb97e159d5901ceca', class: "duet-input-icon" }, h("duet-icon", { key: '50a769358470f6e22060a0c61a771389f3c8b0cb', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a07c5ccb6051d103db9c8c57473e8daefe4b9767', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '5b042e2c7aed368dc38beb4e4d4be8c770aba69c', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '7e37c8e85d027bb8b6c7612ada14a74393c9d3b2', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '3b11bc5f23d4adb05d1bd7364242df0749c0833b', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '5ecd6aa9de04386694cd43d8b09f62d2c2aac83f', class: "duet-input-icon" }, h("duet-icon", { key: '4ef808e474a8a83beaa5664c5cb708842c768159', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '197946e80efc48ea90055f40ab37e0d8a5897651', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '2c45edd5b02477999858dba80c03ee100a1a6c99', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'b4d5037e04f713694e18a084323f2a1cbda34b48' }, h("span", { key: '8ca0267032a66e0b196d1cf33e4ad10c51921789', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'b4a8e3167899794dec8d8226fdcbd4dac5b4cd01' }, h("span", { key: '0a3a2efdf243ba4f6b70a64b15aedc342911127e', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '67d7a13c0288e43bf19523ae9378cbaf83070b60' })), h("span", { key: '185873830140ac2c758297f42532c8afa12f1ac5', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '65dc92ec1a22c205ba1ba2cf56e1c32df4324e30', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '32584b0b73cb3ea2897432dfa8a9473b62020665' })), h("span", { key: '84ed3f4d4fb55ff951d2eb1ee496270fb266a288', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f73ada51b32993e0f853961ff21de9816bdefbff', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -982,7 +982,7 @@ export class DuetInput {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVariationType",
-                    "resolved": "\"button\" | \"default\" | \"revealable\"",
+                    "resolved": "\"button\" | \"button-left\" | \"default\" | \"revealable\"",
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
@@ -995,7 +995,7 @@ export class DuetInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
+                    "text": "Variation of button. Use \"button\" to render a button element next to the input, \"button-left\" to render a button on\nthe left edge of the input, and \"revealable\" to render a button that reveals the password."
                 },
                 "getter": false,
                 "setter": false,
@@ -1250,7 +1250,7 @@ export class DuetInput {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputComponentType",
-                    "resolved": "\"date\" | \"input\" | \"number\"",
+                    "resolved": "\"date\" | \"input\" | \"number\" | \"phone\"",
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",

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

@@ -59,9 +59,6 @@
   width: 100%;
 }
 
-:host(.duet-middle) {
-  display: flex;
-}
 :host(.duet-middle) .duet-layout {
   padding: 36px 28px !important;
 }

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

@@ -43,24 +43,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7218422a05742981b63dc1e8b29f181d753f4866', class: {
+        return (h(Host, { key: '6df96b7ef73ffe08517cac9c411df27f1b1fcaaf', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'cf7447fd76b23d18b34fb6ee903b2763fcf250e4', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'acb4ce1658b34788d6185b8357d8f28f2631a5bc', class: {
+            } }, h("div", { key: '9c6a118735c2765b76fa2b65e70ca63ccde44937', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '0a863c3b7bfe92b0fafe43262e04d302ae7691bc', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '726d75940090578a42eb72a0916f1fd5e2fabc31', class: "duet-layout-top-wrapper" }, h("slot", { key: '1b07000c7910ef711a9bbcb264efa2ea56678278', name: "top" })))), h("div", { key: 'b0befaba96f73bc0e57cecabb62029b6662ef41e', class: {
+            } }, h("div", { key: 'a2d571f9389ca5d0c72c97f9ad76b431dd9229f9', class: "duet-layout-top-wrapper" }, h("slot", { key: '9aad36c7b8a3b69f68fe6c30c90ff836d9fcce60', name: "top" })))), h("div", { key: '34850a920b940617a268daf5395dd44a22e870a7', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'c1484df68a8e58a5bb941f8024854476c07c35e5', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'e01015df6e7aaa17ce4d357d0c61483136f0da67', name: "page-heading" }), h("slot", { key: 'e9f75c0feba0cb007c15f1df99d50aa20a08a760', name: "main" })), this.hasSidebar && (h("aside", { key: '275de6ce686959cb5a9a330710b4f14459a57eb6', class: "duet-sidebar" }, h("div", { key: '6b282d8fee11ef6e150d2b79525cbfdb15413e8c', class: {
+            } }, h("main", { key: '4abc6bed12355c5620c2135f30e9cc723c971bfa', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '6be22e03f8ebf355196421a6b79ca8f753a2c370', name: "page-heading" }), h("slot", { key: '0a45d788f1fabadf98ccc1ce62583124cd6d7e42', name: "main" })), this.hasSidebar && (h("aside", { key: 'd4b7a9ed1f43d2d4f16a522538b8274fa9a36be7', class: "duet-sidebar" }, h("div", { key: 'd7c85f94d219f52f80f50ab632f11dc7139f0d0d', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '05f1c2bd333da745c79c863e75c1ebbbd2745995', name: "sidebar" }))))))));
+            } }, h("slot", { key: '166994601d8377c853ea68857e7e78ce09df356d', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,10 +106,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '8fc712b819ec0f95da99033d8f5e70ff50d2a33d', class: {
+        return (h(Host, { key: 'd4a64a7d050644cd79fe524ecf41cc9886fa8a9c', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'fc3d7a5b8c2bd18d44be23a475da66b5f4a886e1', href: this.url, class: {
+            } }, h(Tag, { key: '2bc9879af9717295281034124b5a2ebb2058f9bd', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -72,7 +72,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: 'e1c99a3ea4313763539690c8ae38611b8ebe635b', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '918fcee3a91abaeeb937560a776f11f22af358ec' })));
+        return (h("dl", { key: '059c5420b262de645b7645407359301d15baff34', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '4a21a4f0923309997c6526393632ccd9559f27b5' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,14 +16,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3569cf0fab6a726538fc23cfac4bc201380594d9', class: {
+        return (h(Host, { key: 'df53e40d49897cce2ee5e1979afa9abce6a6824b', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'dd3487c1ba2dafb84718cf94b7782660d9373bc6' }, h("slot", { key: '32ea82913c63caab905b8c9725a77ab7091d44ce', name: "label" })), h("dd", { key: 'e0dee0bceb289d0134820ef951d0c5202a1080f4' }, h("slot", { key: 'e5570466329cf196c13cb36b2999c4094017713f', name: "value" }))));
+            } }, h("dt", { key: '8b5d902f86288be859d8fce358cef7e03773c124' }, h("slot", { key: '01bbfe056a318f68092938601686113f068c71f2', name: "label" })), h("dd", { key: 'ab28871db561a05fa732736b4dbf063e507a9537' }, h("slot", { key: 'c4f3b4f9681c837262e19f431a14a2121f097044', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,7 +79,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '333d34ee98d57ba47a801761a275852962d33dfb', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'c4eb5b2578fa0ebb2ca8ac5519dedbe53d494ef1', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '25ddd0c72d8dde68045f0cb4308cffe47bb31185', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'e44d0487372a03ecd8790f08943601e9e2ce5c92', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -76,7 +76,7 @@
 .duet-menu-bar.horizontal-nav .more-left {
   position: absolute;
   top: 0;
-  left: -1px;
+  left: 0;
   z-index: 1;
   width: 56px;
   height: 49px;
@@ -91,7 +91,7 @@
 .duet-menu-bar.horizontal-nav .more-right {
   position: absolute;
   top: 0;
-  right: -1px;
+  right: 0;
   z-index: 1;
   width: 56px;
   height: 49px;

package/lib/collection/components/duet-menu-bar/duet-menu-bar.js

@@ -47,6 +47,7 @@ export class DuetMenuBar {
             this.centerSlotUsed = !!centerSlot;
         };
         this.changeLogoSize = () => {
+            this.checkCenterSlot();
             if (this.mql[1].matches && this.centerSlotUsed) {
                 this.logoSize = "large";
             }
@@ -153,14 +154,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '4c14c6c4303d1ce9dfb4460ce71a9baab57e7972' }, h("nav", { key: '0f976a3757ecf00685bcf5be4d5f34c851cb6fe9', class: {
+        return (h(Host, { key: 'cc4b481362cbe14d19105680da21abf7e1ab19d1' }, h("nav", { key: 'fe1efbbaeea324870ebfe2ab1016109de0032b50', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '9e745e5fc21e8c4541f5231f34e437e1dfb41d0e', class: "top" }), h("div", { key: 'd3b52c054d9793cad8b3523ddd13c531a7253d2b', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'd6cf3454ca9178b46e9c2afcfe3b951fc23a9f8a' }, h("duet-logo", { key: '811a33c0b0d0e52d9d38602e970d2e2bade5f527', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '23426b2b29e9765da3952d10a2fbcf3ae9257239', class: "list center", role: "list" }, h("div", { key: '1efffb3eba8ec62d510be4b0de6f91b847a06a50', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '3f8f4e93a960452c9965bedfdb96a9eb33225565', name: "center" }), h("div", { key: '8fb904825c12a5c19e8a9db21968fe381517c60b', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b61f3351ccde5fdc98ca42f2fbffc55c8ebfe154', class: "list right", role: "list" }, h("slot", { key: 'f030c4eebee43c6e29422b7794b4c04ed2bc2d6d', name: "right" }))), h("div", { key: 'f7b272e273c0eae005bfb74456d1979c1b165f8f', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '262314a0a4c3bc112de48cebd90cc92978e04737', class: "top" }), h("div", { key: '47af4a8dbe49f0eb2fad3e2c9795c778aaa4316e', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '81831c54aad6d097544fdc473ee9ced4d03202fb' }, h("duet-logo", { key: 'c602193b93bea7b49ad089c12597ecd778720483', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'defb5267cde1feb5499d27f47b6329dc936c4ddb', class: "list center", role: "list" }, h("div", { key: 'c41bcc439bb1e6bf4d2fe4b192fa28e35dcade36', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'bdd435f059485a7fa0a83387577e6eb0d29a8532', name: "center" }), h("div", { key: '53af8993610b44bfb0b20e923402dcdea304036c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'dbfbc72a5b6140a455f2730827a01bfde5cb3258', class: "list right", role: "list" }, h("slot", { key: '0ac7e62804751859d1d6de0dc2e4cea90ee0968b', name: "right" }))), h("div", { key: '527927e8d7408f0462f1c735b75c6c6cbc0c63ee', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6f75ab90994003945faaf606213177956d65b5a7', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '259db22bec0d03f4c8f68529b35927af44655cec', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '98d5de27841db07197972c3536153f1702535cfd', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'ba0f809adfd404d71d2846751761f34364c40fd8', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: 'c2182470252c2c09577655c562a32e2515383c4f', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '18d7084e040b500c7558ea574bc5a6cf43a036d0' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '602a6879bf24fde5cc3506af5fa0fae351ff1b11', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f8268e403f02c185c2648f649650174c8ab51f45' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f2ae6a8b45e78de018708287c1ec61b7648af786', role: "listitem" }, h("div", { key: 'af551d08605c82f1f1cda7b81c99081152dd4678', class: {
+        return (h(Host, { key: 'f91709b2fb4cc2d11619bdb411fddb28a2bdde23', role: "listitem" }, h("div", { key: 'c24c6b50bf3db6223f8469e272dd6fccfbcda2ad', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: 'c98ba81cf3d27c93922378a1ed42c6795e5560f7', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'b4fd808615b8491c4e67a46be7ac42353b1574a9', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '68312f16c0510c96693965ebdee514b9ab58ae29', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'f877d5f7298eaae83f061306be1e61b358017e47', class: "label" }, h("slot", { key: '1e9e1ddda50dd7be9204235502c5541477d2b26c', name: "label" }), h("duet-icon", { key: '60a75a216d897ae68c78146adaa4b17fa7220ea5', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ac48d2e83152837d5865559c85987640751033b7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'cc5a9da099d0d752277493cbe37ee569dbcf5995', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '257d4b3c93c8e537a4ec464b05c5834f457f326d', class: "label" }, h("slot", { key: '98c8c5f8a315b1962fa92df6b5f4bd2f04d1546f', name: "label" }), h("duet-icon", { key: '43982939881e255cdcf8e7d71cfa31aadd197ec4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '391aca84848c8e6d27082779fe59819a4d6bf731', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'c423d7b527bc674cc8fcf895ef228ab3dcc14c27' })))));
+            } }, h("slot", { key: 'a9e945573e8981db9cb7b18561861821df73383a' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b39d6abeefb119284682cca93010dbe3de43db7c' }, h("a", { key: '74baeaeef4fd9523c156b10c62e4fd783869b541', class: {
+        return (h(Host, { key: 'c39eb5b049d115901470418d1e8614bc3b6e704e' }, h("a", { key: '3c329055ee4b90b36bf877a26fc6c9ca5b820b0e', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '9893a49e6d869071ab120a38392e6d8b192a3ba4', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '4cf3bc62d7951ed784aae771602e15f03e4d2e92' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '1013f122671df20aab0c622d41934702e4d6193b', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '805279a11b2be95b569b8a48edaa407ae539a579' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.js

@@ -48,11 +48,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'be2ac6c17db91d8f654fd1e4db67e762ff9f351f', role: "listitem" }, h(TagName, { key: '4780ca4c189bbaa5168f119852c80c8c73893cab', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'd0d1d66ae37940a4dd04e3d31b0c1131d95acd51', role: "listitem" }, h(TagName, { key: '903f68191b7ed0ef1774a65ef609ee24144cda5e', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '2c737fc960440322ea9a8c6948043da1c720f111', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '6315635508b240d5cccd6a68a766ca93dadadcfc' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '914d56c5769b607d79727925e4a24f0ac9adc3e8', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'a95ab784abc59a74b8cd517e70f58f0504563234', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '109a5169f518fe5959ee49d6c0ce39a3d80abcfb' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '528e49e98b5a56950ae991cdb53c00b4555e5a41', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '73fa38bbe6bd2a1ab5c43148c47183a41cc149a2', role: "listitem" }, h("a", { key: 'b0066b2b752490798a03ec6481c87ba9b0172509', class: {
+        return (h(Host, { key: 'fdaeb3bbc3139a6031ea4b61f161d459206fc6d8', role: "listitem" }, h("a", { key: 'e2163ec995b08f3745ac33a2f456fde9a10de8f1', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '58c53cacc9c3350d819ded713740f6145534ec14', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '9c3f4910e64a251b3d28cc1bc7da48fea680b3f6' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'e41a7f68a2184de5ed830ec665c80df3db14ed05', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '2b0673f8f66eb2d40694e33f031c5c2e5e85bade' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,18 +249,18 @@ export class DuetModal {
         var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
-        const closingButton = (h("div", { key: '12d0600dd47ad71b53d67e07b03f4f21b8d1676e', class: "duet-modal-close" }, h("duet-button", { key: '3e7e6c2de9c2bb1953cb9795650b44b289751ff1', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        const closingButton = (h("div", { key: '45dd7731d75aeb6fedf103bb8457fc832f032778', class: "duet-modal-close" }, h("duet-button", { key: '1af55ce7ee031845b5a33669886b156f5680a08c', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { key: 'e2d3037d4a7c15fa4d8d9c3163a56b9e7cf0fbdc', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        return (h("div", { key: '1442df676dcf6278cefffca3c0f25206b58c6461', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '976c237ef7d725ddf14da1239317a71b423a0c10', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '7799b43bbf0ca9e3c99eefe055de532d3245bc12', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: 'acce69123fb59c968dc1aafe5f378060ce9edf96', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'eec2947c7ab2f7abfa84d3e776afefb7fc73e166', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +271,18 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '1bbd6a5de7f1825247c3b5b5b39699d3e9f2878c', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '4ef00e1b973363768e873732fd970f91f4a78283', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '97704800433d96483426cee10199d9b4f1aef6ca' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '5adeac36992b90facc4e0a4b6e1c8142dad400be', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '76c8f349c9a72824b09e2e2d5e0b3de29d88c799' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '829f91a47c3d628a7e3610400626d0254c163a3a', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '5b5e690c58eb853d61c47423546b40942b5b72f8', class: "duet-modal-header" }, h("span", { key: '4e9f14358805f29720b24697c40a337ffcddd996', class: "duet-modal-inner-slot-top" }, h("slot", { key: '09e527317ab1fc7d2df380b347b763f10455f11b', name: "top" })), this.icon && h("duet-icon", { key: '7918bb0b133f11223d78e317cedb3bd5fd66af61', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '17e29ab216102ebab742419a60045da93c8e1cae', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '8a8d1033e6701d1aa6dcfbfbeac3b70bdf3c4bf5', class: "duet-modal-spinner" }, h("duet-spinner", { key: '30560762720fe600c0fc37dff777d0fdb8d045ff', size: "large", color: "primary" }))), h("div", { key: '7f9c15fd58424d32ffb007dff3bb70b1be0776b1', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '9c0d0cf9ef3af041a099ecf34383fe295da3892e' })))))));
+            } }, h("div", { key: 'f54c84d48480b113238d5592529d942f32e1ae41', class: "duet-modal-header" }, h("span", { key: 'a1ba41463c134abe5ba3bbbddec0e5cbc6183e12', class: "duet-modal-inner-slot-top" }, h("slot", { key: '3fa09af98d06d4cb8d6a5fa60074305e8d9a1f5b', name: "top" })), this.icon && h("duet-icon", { key: '3f8704d72960a1b347efd6eb0ed68a083731e50d', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '2577f299ec0fdf00deb41e4a8e1324b5f52e0fc8', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'a6c9f6320ba5192ace8a86679a3f81e229a0b511', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'a98b8d5cf3a61911f7ded60a1816f08a8a56bdf3', size: "large", color: "primary" }))), h("div", { key: 'ce3c0737a4fb1e3320ff2d243e648ecacc648eba', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '20e1700541dd27a2404858fba3503a0d2c5576d3' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -224,23 +224,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '5d017a79aadce631aa5c9251872a182a0e491015', class: {
+        return (h(Host, { key: '1b13e9b24543872be153e64448b3bb2b39e6ecfa', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'b875be7a1e4421072693bc6ee8778a32159eb094', class: {
+            } }, h("div", { key: '148190880c310174f1ed2dc45c1b7c5ca7982b7e', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: 'e0147745416105b9bff568c52e136e716269aa8e', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'd6ffc795317baa390e5bb6f811364331d8d7b440', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'b6854970107c5b14ae38cc396d03b06d3ad84c53', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'fb29c0a8623e29564a7d862ab8984ca70025ce29', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6f1645115046a6e76121205634b070de17abfa2e', class: "duet-multiselect-wrapper" }, h("button", { key: '08e87a02ca938e9a5e2c01c82f058828572dc3ae', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'af006372492c64cb96b5bce439334233f0e55440', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: 'a181e326d65edc70e509978fd407e12e05dc0c07', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'fb64529244f7a615752ab433ed20480ecfc44c29' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'dc8bfcf2b11fe884eea40065098c455bf75c6e04', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fbf8716bb708f7c4b3e27704adfa765e80c32291', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '3bb0b8f59ba18dda12e5255d2ba998850e83f2af', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '35cd85ac5dc7968e292e5eb933ed48b019dfc082', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '452e8f79d16ed35179561fd9fa825e801c507feb', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '32f0a1109ad84ef710d7a2aace8e03f379c5b9b1', name: "tooltip" }), this.caption && (h("duet-caption", { key: '9ba0a2c54c3ad861040ae2e14125a3ddc6cd5b92', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'bee1499120506543ecbac607eb0b0306f7fcfbd3', class: "duet-multiselect-wrapper" }, h("button", { key: 'b3e6894a5a491d6e356cf50dfd58ed57db236fd0', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'b865f7a0b5603a2a935e2649ad7b3ae854abe6d8', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: 'e8bc27379ed2a2c31bee87eed60d21b7cb9557a7', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '6e21a7842a61e51aec25e639404c7bf077e16a92' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'e69223cfb0e77ad42d993efe14e38b545cf3a229', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a03919b6f6aec79f2b154c6cbdec5394c1ceaf41', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'd30b64085be0ade634ec6e386eb5e783eb3b79f0', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: 'bcaf6d6270e60955e821862802e6c4a002924558', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '5c5b09d605e7e747f749badeb8ecec5e3276eafb', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '474904c95ec11ca07d787d8230f713a4bf4f1bea', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '40ad894b3d59aa5abf6fa669f5618b437cc00f4b', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '358f2c22e2464177f04a70259dfa600769259fdb', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '46e3c1b0935603c8d55dde1b42b74c29e9eeb37c', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '3e4534b685beb3eb865b792f449b88b9b94ceba2', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '07fb86b8e0a2a18ddfb5697cd214411c81adad80' }, this.error)))));
+            })))))), h("span", { key: 'c3c35d45455da55d81b525e818ca55637515947e', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '2ae201bcc57bb193bdd5124911af931a2694817a' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2c03379783619c25bf1a1896d5901373dd417734' }, h("div", { key: 'ddc6fae5174e7dd79df64ce41a01f3347ea92413', class: { container: true, sticky: this.sticky } }, h("slot", { key: '48dffb7720542cebf6e1f4a8e110ebbc110670e6' }), h("slot", { key: '6ab8b61c898ed50369224bbea740a37318deff01', name: "mobile" }), h("slot", { key: 'ee8ccd38a284bc220ed533e78f76009bc5234333', name: "desktop" }))));
+        return (h(Host, { key: '18c30d07ccac6e0656b4ba4c6feb5ddb07c6b06c' }, h("div", { key: '16eac13a9c78bccfdac8a70aff193d775ec1a1e6', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6b0fbbbab38fb9fc7e634878f424d238f8f6fab4' }), h("slot", { key: 'b6cf57d0876c972a5ccbce533217241277c402bf', name: "mobile" }), h("slot", { key: '2ad38e43fa1db17085c50ba3cfc3423dc0fdd880', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '5cb0c4c6bc826e292ff1e666fa51f468e93fd0e1', role: "listitem", class: {
+        return (h("div", { key: '53bf3fb42fabb1085aaa8de5091a92d3f2e2ff2a', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'fbffe9a2754428d30ec66b88640e365d2073c8b7', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '0fac71553225edaf964a46529e4a45a800ea4cfe', class: "duet-notification-container" }, h("div", { key: '57f79649f38d7f728257019b7f1e6818dbbff7f8', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'faf1346775bae9263da603fdc346ef3bc891dc11', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '27157c7f34075c2a7255611c7b375a88c6ba572a' }, this.accessibleLabelUnread, ":")))), h("div", { key: '15b30893e3f39f29e77c8c6f430d28481ae62215', class: "duet-notification-content" }, h("slot", { key: 'fcb2eac6c69d57425d278270514c62c3d8fd1228' })), h("div", { key: 'aad0535eeb257c822f0762915d9160e6cd522fc4', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: 'fbe3d967cc547d2af9d278c4932020280f13cbf7', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'adcc72e86dfef46c9236b2ce62c3e6c4ebf09356', class: "duet-notification-container" }, h("div", { key: 'aaf3d1dc837c9e164542046406e7e3420272634c', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '6982bb6d18d19f198c4ac129764a5f9aa7642109', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '49beecb60f8a1bade31c9c1a99808778ae1855df' }, this.accessibleLabelUnread, ":")))), h("div", { key: '5af9a7fc09f3a855d94527067934ea3af667056d', class: "duet-notification-content" }, h("slot", { key: '344506570c443641459719001e49ba16bfefbcb5' })), h("div", { key: '3597fe58bd170ae199f8a1cf0a0b4643b26fca53', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -96,10 +96,10 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'cd4e6b527b0e2f7953969021f8438f2f86b01b3d', class: {
+        return (h("div", { key: '684aa1ca53fe55ed070c4c196fd3c43deb08e687', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'c3ae8bcf17188593df34431967d2371a40783ffc', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '23679cbfbbc510f4be0b0627e9e62c2eeede3d53', class: "duet-drawer-icon" }, h("duet-icon", { key: '44a2f4501558f1c1606b2dd824da09ef29fbdc06', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: 'a86ee2afbfe08de83f1490d3a975336228ce939a', class: "duet-drawer-badge" }))), h("span", { key: 'df792c009c2b2d37011a01691ddd831238109a77', class: "duet-drawer-label" }, this.label), h("div", { key: '774e310c6e9263b438df99dafdcb2c9e381a078c', class: "duet-drawer-caret" }, h("duet-icon", { key: '28efba90ced1b7daf0dbd75f75ff174c9276838c', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '038e12f34d6a437643b2ae6c3d62846c7ff10984', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '6b4409fd5268778305473af525a945d47d9c39da', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'c9267c1af9c1c5915c7d6ede76e91ca27f50a9b5', class: "duet-drawer-icon" }, h("duet-icon", { key: '2ef2cadda49403ad82f2cd6954f04042b2428f54', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '163a12602500df35689a05fbcde4c58cbd55afc7', class: "duet-drawer-badge" }))), h("span", { key: '154857b69805d0d6cfe60e1559b34ce1a8b8e576', class: "duet-drawer-label" }, this.label), h("div", { key: '03cfd2876e6313e194f1092491135389b2c67aa2', class: "duet-drawer-caret" }, h("duet-icon", { key: '13706101d1d24e17c8e295b632de914dea29e653', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '731f3d300edc47c3ee18617d848b51720c63bff6', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",