@duetds/components 10.1.1 → 10.2.0

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

@@ -548,7 +548,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: '033cc6db5ed25606fc59aef36e6b24a442e950b8', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '63d867a2efb238c95919a39ba06e30f51896619f', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '1d0ca1e78d726dda697836bb89a9f1a8743a2793', class: {
+        return (h(Host, { key: '97c6c512b6c027ca8043a43672a95b94f03f6156', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'b822ea081dcf6540e2b68897ee048047aff84628', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '9e605485547ba28244c552f56e417b5601b54fe8', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -562,7 +562,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: 'b627415fb5e0c398093aefa6033c2931780180c9', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '86738583556e50cfb6d2fe39ccf1ee061bf86d51', 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: 'e2f664d678fd155116eb91a753760637c39fb3b1', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'a74a273958e5872b1038b9fa1b931487990ad672', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'e1edee0074b64adca33d4fa94b2f7a4379f9b8b5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'ed9178d96ea508970432e5364e660617e1a89a7a', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '8157259d2868feac97f59719c6692d39b1fe1cc5', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '8a4eefbdd77190e5b9e7cbaa7389e25f70fca1f6', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'ed4cca7071d94da4adc022c419491233938cb7f2', name: "button-left" }), h("input", Object.assign({ key: '53a5ef13592f5831740ab1680aaefb78eebeacdb', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '80b702bcab4580a325ba20786e5c4aabc2ed6097', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'c1deac7c8b5bb4a0b7f83b56300847e0320bbe5c', 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: 'c62963ee9ff47b91fa4380725a514df722c9d2a6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '024482e338a12e5e93c1a281c5780575f72986f5', name: "tooltip" })), this.caption && (h("duet-caption", { key: '38d05c2a565c01b678e55ffd8229387e67d313e5', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '211a0b1ea0a61065f35ba521c44656002a82af3d', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '48c712f9c9ac80bf82ced7d12b6e3d82a4fafd9a', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '94be7e517078792db305259a743d3e9f9b1ed78f', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '1c73512bd1cb13064dface542dd5c83c0ce0bb61', name: "button-left" }), h("input", Object.assign({ key: '2712744a1452a269a9cf149aaa6e6b5fc99cefe3', 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",
@@ -570,17 +570,17 @@ 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: 'cfa58fa19169ae178ac67e183186db6b89827738', class: "duet-input-icon" }, h("duet-icon", { key: '0f82e1c47f682f0c40395768b4fab513aaa7721d', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '76305ecbb22f11311cdf73c5fde052659f582349', 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: '080395d2f4005f5e2d40ebeadf5be30fb014e71d', class: "duet-input-icon" }, h("duet-icon", { key: '2a5bfe3a6d42a97e6cf451f833deeae80d852374', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '92a1308358fff9f5c6aed1a07e24053c7499e788', 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",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: 'e43277b053fe75ff5f52814a1e22d0423a595709', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '0e78724fa83566e2504fbd013017ad8d10f88e57', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '45f95e11754032af15cbe3fed396590f8eee7b21', class: "duet-input-icon" }, h("duet-icon", { key: '2e7042450fbe0867cc28dccbccac09bb3702123a', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'd805336c92c2f5a536aafad96bdc01c095588e05', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '435aacc403ca5daee908df7ea1c3a2636c6134a8', 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: 'b921d4ca4eb54fc267ad62f3c956a9acd9ea4487', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'bdea13847de38a2cfd7cab93aa5867dda090e8d0', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '4e49e31671b84ffbda56882870611aba296daab2', class: "duet-input-icon" }, h("duet-icon", { key: '8d95610824e317a5dd0c2a445f074a8845e118f9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a65627a7d986abbe186808402689fc99a08bf173', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'c1ae746e55b6cf639c28a8b510c399c390ab875e', 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: '618159ebdd08451e2b55291fea56b7628e874bab' }, h("span", { key: '67636b4bd907d7d9572124c38e253a0f6ff29f41', "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: '002a8f8fcab8184f130dc007637ef24216aadee3' }, h("span", { key: 'fd669556e6e64700f4c2347183e20e6cbeb5682b', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '36f5b432d50b1a6b20573b07a983c43e4dc09aca' })), h("span", { key: 'a0e213a2629faf679ec7271015ee0d2ec053b677', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'faa497dc1542d2d2b50aaa37e0b432e8c81922a8', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'cc9d622df88881cabca741a1dd95a162e955c349' })), h("span", { key: '31c73b30b14c89c56268c32102bb5427b9850ff1', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'b04cbeca6289a6b421013dde03381db825ac7a2c', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,24 +66,24 @@ export class DuetLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a2e2da10366f6be7ac33297fd517b70cccd91d3a', class: {
+        return (h(Host, { key: 'fe098e91c7bb01e0e85f187ba546f8f0c15cf657', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '963134d9ac0866556e457fb1559789b3fdc04ac9', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '2af6f591e1f2af28de75b5ad014d2465a227d6e8', class: {
+            } }, h("div", { key: 'da78ba19b431c58d4c317488d836973313b3205e', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '6e681d77a0e10bb86b110e92d2843a41a95f57b3', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: 'ada1feb7bcfd4aa2ad32163e551eb617ce6a3e0e', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c902eb9bd68adf934510fcd036e73ca221cc25a2', name: "top" })))), h("div", { key: '10a599002b1cd07f67085bfc6712ec55d70f9c6c', class: {
+            } }, h("div", { key: 'cb6263cad7fbb6bcd52af5be3286998c5e6f8ff3', class: "duet-layout-top-wrapper" }, h("slot", { key: 'c5c141ad0307a0c11bb7a03b5c78e45356b19945', name: "top" })))), h("div", { key: 'e524ed28fa4b2069b1bbbb3f603ba4e6101bd9b7', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'f1aa73887189771b2bd8fcfb91f1abbe85d91f32', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '972898b8f80d486dac54d3f02f746ea6453afde0', name: "page-heading" }), h("slot", { key: '916d907b26b5fc5c8cbc3b8e6c7bffbf044b2a09', name: "main" })), this.hasSidebar && (h("aside", { key: 'b153227de7fd9cd22c5101ca3b55e5f6c538cea2', class: "duet-sidebar" }, h("div", { key: '3de02670c41fff15245d73a5d6a1989ba1342a1c', class: {
+            } }, h("main", { key: 'c593638dad35304125cad8df76e2666a68c537b6', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9bf4eb387cc838260b36ba8d14ca567dd0ab084e', name: "page-heading" }), h("slot", { key: 'afb96493e079f8eb59c1ad43746c25d5a522e239', name: "main" })), this.hasSidebar && (h("aside", { key: '0c61d31a6c40af17a4c2831ea7e441d3625b23b0', class: "duet-sidebar" }, h("div", { key: '524ea0db179272409930c635aa1faca2716f88d4', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '70a65e789aeea0b965ca02ef0876070c6fa337ff', name: "sidebar" }))))))));
+            } }, h("slot", { key: '8e4836e0cc16d836afcdadf1fb31b5e8f9e81e45', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,20 +85,20 @@ button {
   cursor: pointer;
 }
 
-.duet-link-is-external.duet-link:not(.block, .button, .card),
-.duet-link-is-download.duet-link:not(.block, .button, .card) {
+.duet-link-is-external.duet-link:not(.block, .button, .card, .article-list),
+.duet-link-is-download.duet-link:not(.block, .button, .card, .article-list) {
   text-decoration: none;
 }
-.duet-link-is-external.duet-link:not(.block, .button, .card) .duet-link-content,
-.duet-link-is-download.duet-link:not(.block, .button, .card) .duet-link-content {
+.duet-link-is-external.duet-link:not(.block, .button, .card, .article-list) .duet-link-content,
+.duet-link-is-download.duet-link:not(.block, .button, .card, .article-list) .duet-link-content {
   text-decoration: underline;
 }
-.duet-link-is-external.duet-link:not(.block, .button, .card):hover > .duet-link-content,
-.duet-link-is-download.duet-link:not(.block, .button, .card):hover > .duet-link-content {
+.duet-link-is-external.duet-link:not(.block, .button, .card, .article-list):hover > .duet-link-content,
+.duet-link-is-download.duet-link:not(.block, .button, .card, .article-list):hover > .duet-link-content {
   text-decoration: none;
 }
-.duet-link-is-external.duet-link:not(.block, .button, .card) .duet-link-icon-tail,
-.duet-link-is-download.duet-link:not(.block, .button, .card) .duet-link-icon-tail {
+.duet-link-is-external.duet-link:not(.block, .button, .card, .article-list) .duet-link-icon-tail,
+.duet-link-is-download.duet-link:not(.block, .button, .card, .article-list) .duet-link-icon-tail {
   white-space: nowrap;
   text-decoration: none;
 }
@@ -442,6 +442,40 @@ button {
   }
 }
 
+.duet-link.article-list {
+  display: block;
+  padding: 20px 0;
+  margin-bottom: -1px;
+  text-decoration: none;
+  border: solid rgb(212, 223, 229);
+  border-width: 1px 0;
+  border-radius: 0;
+}
+.duet-link.article-list .duet-link-content {
+  font-weight: 600;
+  color: rgb(0, 75, 129);
+}
+.duet-link.article-list .duet-link-content-wrap {
+  display: flex;
+}
+.duet-link.article-list .duet-link-bullet {
+  width: 8px;
+  height: 8px;
+  margin-top: 8px;
+  margin-right: 16px;
+  border-radius: 2px;
+}
+.duet-link.article-list .duet-link-meta {
+  display: block;
+  margin-top: 4px;
+  font-weight: 400;
+  color: rgb(81, 105, 123);
+}
+.duet-link.article-list:focus .duet-link-content, .duet-link.article-list:hover .duet-link-content {
+  color: rgb(0, 97, 155);
+  text-decoration: underline;
+}
+
 :host(.duet-theme-turva2) .duet-theme-turva.duet-link {
   color: rgb(185, 3, 41);
 }

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

@@ -80,7 +80,8 @@ export class DuetLink {
          */
         this.iconColor = "currentColor";
         /**
-         * Color of the icon to display (only with "button" variation)
+         * Color of the icon to display (with "button" variation) or color of the bullet (with "article-list"
+         * variation). Not used for other variations.
          */
         this.iconBackground = null;
         /**
@@ -160,6 +161,9 @@ export class DuetLink {
         };
         return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
+    renderArticleListContent() {
+        return (h("div", { class: "duet-link-content-wrap" }, this.iconBackground && (h("div", { class: "duet-link-bullet", style: { background: getColorByName(this.iconBackground, this.theme) } })), h("span", null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-link-meta" }, h("slot", { name: "meta" })))));
+    }
     renderContent() {
         switch (this.variation) {
             case "default":
@@ -171,6 +175,8 @@ export class DuetLink {
             case "list-button":
             case "card":
                 return this.renderButtonCardContent();
+            case "article-list":
+                return this.renderArticleListContent();
         }
     }
     /**
@@ -181,10 +187,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: 'c9771c4890b8c42dd47c1b5794a9bd1bac35e26f', class: {
+        return (h(Host, { key: '63ea212c967fed116f28d316bf7b4dc6f7bed88d', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '63c398171aaf01ce55e54040fc911587749b4d0e', href: this.url, class: {
+            } }, h(Tag, { key: 'c799db0446fbca186340c781f23ccecaf58e4336', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -218,7 +224,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"block-center\" | \"button\" | \"card\" | \"default\" | \"list-button\"",
+                    "resolved": "\"article-list\" | \"block\" | \"block-center\" | \"button\" | \"card\" | \"default\" | \"list-button\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",
@@ -627,7 +633,7 @@ export class DuetLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the icon to display (only with \"button\" variation)"
+                    "text": "Color of the icon to display (with \"button\" variation) or color of the bullet (with \"article-list\"\nvariation). Not used for other variations."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -101,7 +101,7 @@ export class DuetList {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '42205f6f2133cfb3816496e3403c3c7f14a529c5', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'e143fa86e59cc12e24f1e695f92dfc2466e8b0c5' })));
+        return (h("dl", { key: '8cae41f240da2961c27153dc122763812b5fa34c', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'b99b56fcc934c6a52c71df3e77d60b91393ade02' })));
     }
     static get is() { return "duet-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e4cd01b6b0c03f3d82beba7c85400711e49f6582', class: {
+        return (h(Host, { key: '2fc646c6ec771484ba741b13db4e05af02190613', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -42,7 +42,7 @@ export class DuetListItem {
                 "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: '9644bd50dfb2d6b45bd136bedcb6968f9a2675ba' }, h("slot", { key: 'db3550984b29dd4dad07eb4ab7d047652e83ac22', name: "label" })), h("dd", { key: '1e01b0449b667d1de8e9ba3ed9593725c5ce8353' }, h("slot", { key: 'c0662c72ff8ba3c2a13041b741b15ee1f9b0f544', name: "value" }))));
+            } }, h("dt", { key: 'a6f04cd679b723dec94b73f49a1f01e765cc2c2c' }, h("slot", { key: '3406e6b4499bc4e1ccbb65c8c20861a940058120', name: "label" })), h("dd", { key: '12904de4492dd50e266c323d2d038a514e4ed4f1' }, h("slot", { key: '1b5922436da8b77d4687c2fe55e7f58c5af37647', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -148,7 +148,7 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '9aa8d797449d771c669f1b489937b72f4f334346', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'e217a8575a7d1511925d6d3f53c57463f8569cc5', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '45473fa278154204ad2358fcea7063bf90c56594', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '6311062a05dc397c72ffbd371c6443cf96e3438e', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
                 "duet-logo-inverse": this.inverse,

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

@@ -132,17 +132,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '9f357dd163db230760ba15408c721b345619e369' }, h("nav", { key: '515afdd6ce472b843bb59ab038fa87b76158743d', class: {
+        return (h(Host, { key: '0465c2eb195dcbd9b168a73646321e57fdbf6ac9' }, h("nav", { key: 'f0bfcd1ec120c1471fe1d32715b6892125f03baa', 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: 'd19d82b1e1c35dd8f0ac72fc3625058f939d2b66', class: "top" }), h("div", { key: '8bd01db2edc2ab2c43e931e07288e252a6838abc', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '28a65925e1aa7a73822e398a0aaa705de521cc66' }, h("duet-logo", { key: 'f7a068293211c3e3a7c091a084ecf4e7b3c2317c', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'dcb75e146d612870f0b65295df9f33a2be699d29', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '675cb30c9aaa18f8352d2c8d84978bb291f2337d', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: '48cd2679315bb52d535c58b1b54831bcc1120bd4', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'bc2ac882034c4d1ffc30fa989bf6d4927ecd50dc', class: "top" }), h("div", { key: '2495e91eb00325b4cb6d01814a13196916e62703', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '4eaa51862b000fb13b27c4abe9d4d44cc9ad2f1c' }, h("duet-logo", { key: '909c1992fd75363ff871776e4d948d295f21ee2e', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'e672f17cccb5ba665d93375746eda2427a43fd5a', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: '92864cb719cd05cf81b3e1a8513179daeceaae30', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: 'bdea5133ca4fe524e4514808a1233094a4427bd7', class: {
                 "duet-logo-info-text": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.logoInfoText)))), h("div", { key: '0cc0ebfc6fe8b9582f8677ca8eba79c7fb102a97', class: "list center", role: "list" }, h("div", { key: '8ed1c963529c2ad79182293ac831fc2a5c4ba308', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'c997b17308d679e6364b79e9549600ea88307ebe', name: "center" }), h("div", { key: 'e4d05f0c17fe62eb12a4708237703d32cb8ac339', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '438911a93d2bbcfd6a1084c095611bc031636313', class: "list right", role: "list" }, h("slot", { key: 'd8b922aca72f608f7acd42e29742efa50d0b2343', name: "right" }))), h("div", { key: 'cd333a535ef8eac9c224cd6ebc6a2a4145ba20bd', class: "bottom" }))));
+            } }, this.logoInfoText)))), h("div", { key: '05e4681d1eb7add830ec0dba6d8bf33df33e77a1', class: "list center", role: "list" }, h("div", { key: '6b29f783a3df400d7e2f8bfca9dba33321d658c6', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '938d6956b67e6a8a5592ea6f13e013a672af3f0a', name: "center" }), h("div", { key: '27897945987291e920d738a520fe16b2a82284f4', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '9cc2f6e6297e855cdac09b2a3fa5d6c3a42ecf9c', class: "list right", role: "list" }, h("slot", { key: '257a5853501bb6dde1d152842c77c4e8cd00b709', name: "right" }))), h("div", { key: '3a7b3b351b057060e8359a4acc7857fabe29ab3d', 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

@@ -49,10 +49,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0e1e537a15d9a7b7d94a2ce24a71281b4757b1d5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'c7ab5d711a28d54af476fdf133e8f92bce25f020', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '27fb2c633e88b04b7397830d15c881240d29a91b', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '29791cfd8473dc9407238460bcb1e169f183f074', 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: '922a6e2fa015b52aac218ce9e803c75a57465310', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd85350f1fb803be4e524803b0bea4acc62f569fb' }))));
+            }, "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: 'e037dac1385bef39b070602ba5bfb278470a49dd', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '95fd0aef38328dece2756ceed18c904c0c447d76' }))));
     }
     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

@@ -62,17 +62,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '549451747b5d958dcac03314e5571631ddb5681c', role: "listitem" }, h("div", { key: '91c7c1f71d878251370fd14fbe8a5f7e53a4d8bd', class: {
+        return (h(Host, { key: 'c46c77a3b37d72d4f026c5027a8bed6dc33621c5', role: "listitem" }, h("div", { key: 'bed24491075bfc2c5dcf225c5262a1af76e7a34f', 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: 'a1bc6d43c28b9070c8f351111312cf436b02b3a2', 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: 'bee18f72f97fe86364cdf6afa685602feea7f694', 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: '612895f551ed8c5045b2a5946b3528948fb34468', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '92d067edbc9fd30ed9113f20153943cfe99030fa', class: "label" }, h("slot", { key: '2dc4b402f56b0e45f4590a563bdbff368bf9e761', name: "label" }), h("duet-icon", { key: '97c55f40d40e52c267bdc2f0edf127c8868b91d2', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '625909f147e2f0d3ac7d74197d787621afd5ad5e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '9b5beb13681712fe262c14ba74de6b30ab481dff', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'debea3ea41d1b4358dbf774b54558d8921b92006', class: "label" }, h("slot", { key: 'fffcc54cdfb0032577c066e374c3465eafac3206', name: "label" }), h("duet-icon", { key: 'a36c591292ca2c2b445e04f53721f788a4005934', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '3794aa5366239e4db4286303ef75f30778e3b911', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '927e1629164029ae374bf2a0828246865e682f21' })))));
+            } }, h("slot", { key: '4a0657ee88ab885d6e177b654e0e9231d0027ec1' })))));
     }
     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

@@ -48,11 +48,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4f66b37f78e3221d96cc0189a2a8592e6b6f8fc6' }, h("a", { key: 'd6ad6af753be198a1601d09e82478a0e1d9ee172', class: {
+        return (h(Host, { key: '44c02bb0c92ca03579e70dc6f79178099f38de61' }, h("a", { key: '26b45ac19043800a070894afec67517d051b6ccc', 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: '4834a4159934c0525ed9e7b7d6ac28132ba2cf03', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'e3f4ac467c7e84ec2c9f0d8ac7f36800a299540f' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4d481450931bbf089d2f6d5ee7076aca7c3978f1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'b47043814429787c833949bac92bae95b2001419' }))));
     }
     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

@@ -71,11 +71,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'c8f1492389226bb51cdfb54ab5262d21292a19cb', role: "listitem" }, h(TagName, { key: '251da0ca6cb28157cb26ba5f90c770123cebc5c1', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '9feca792c6d12ed05344d17db4a5076ad037994e', role: "listitem" }, h(TagName, { key: '5ab6813f5290c5f323713e6015a46330089d555a', 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: 'bc34c4cc34cd814ec124013da71d619f32986bd7', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a913f29ab5fd5e0f3a9aeb2115bae74b83c51a7e' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'efb44346bf1cc026263a16f0982981b6420ad298', 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: '7b6541e7b7cab53fedf815feebc683b9f122e323', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'ab89cf87285d10e52798cd123c404acb69d6bf91' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '6bc587bed959b634caf6b25db7f3374ed538151c', 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

@@ -33,11 +33,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '997031f3159b6da185e25915d7241ba645b2b9d0', role: "listitem" }, h("a", { key: '8ef71373a7c481ca8dc93506eb8957c470489c2b', class: {
+        return (h(Host, { key: '044fd632f4ea61ecd3bbbb77e3c2d0eda50f16a4', role: "listitem" }, h("a", { key: 'b910e6d15c696910ab231b49facb9cd3250d66c4', 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: 'f0439bbfecdf854d05fa818663e7e7e93fffa404', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '426c1a3de2829a37aba8d4f30169d71425d81301' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '46ede326e61111856df4318b018a4128b7743658', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '774a0d744c12e5d43783123c2d07d450a0ad0472' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -338,14 +338,14 @@ export class DuetModal {
         var _a, _b;
         const iconColor = postfixTheme("primary", this.theme);
         const closeColor = postfixTheme("secondary", this.theme);
-        const closingButton = (h("div", { key: 'c025f6cdd3a46f67dabf96a33953cf975a4b7d23', class: "duet-modal-close" }, h("duet-button", { key: '07adb7bd15b71826eea2c5fe8fdd9675c34b10a2', 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 })));
-        return (h("div", { key: '34d84de0dff1153e1fa04d8b2d568edd06ed92a1', 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: {
+        const closingButton = (h("div", { key: '4e4871ea348d26b652ca2e5509de5c8109893bec', class: "duet-modal-close" }, h("duet-button", { key: 'a247c1d1de4f0eb6d17013ce97e1190f0e3cff98', 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 })));
+        return (h("div", { key: 'ea0d8046f113e79da769fdf27e90cc1564694a63', 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: '94c016b5e1d57159562e7b7bc75203976d56c133', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'fb081fde606dbe819fbd9f4dd85928e06b73fc4b', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '91332691051a8738a7278332558618d949b552cc', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '4068b2b99a1d7bc930812732a2fab135a99b4e1f', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -356,22 +356,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '35ff01594b4d85fae78d7ad2dda042d4b6fe3f18', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
+            } }, h("div", { key: '0e3bbd10ffbad50b58f85c04ffb742036d13ebc0', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, 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: '79e1b71a87689e6b8509b859836f039c9fef0a76' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '86c37c55bd8a7738e4a859815f24ee06fefcb53d', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'bc7e5211ee8205892ac64dcc5a6e638c47616077' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '8c34198b5e52ebd8325b1075c4fa544606902c57', 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",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'eddd353009b508fe5ecd04aa866f076a064626de', class: "duet-modal-header" }, h("span", { key: '696ad960d20a5e5bf68dc9ec9da5d59773accf10', class: "duet-modal-inner-slot-top" }, h("slot", { key: '28f0677621250a3da6899f055ba374dd78a17a35', name: "top" })), this.icon && h("duet-icon", { key: '7b9e797b9f5296effdfc0beaac29be90e0310436', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'ba31f51f36989421ecb8f741b285d7d2638f2f7a', "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: '2bae6fedd2f1ab7b40264c2d6c3b4f69f9627d2c', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'd5f27b579909233f930b09251b7faa6fd7d35a78', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: 'f667634f35e5048df2ea536709e76beca9cb3a49', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'bd3fccbb60f77e869f2d22bbcd1cba5727f95662', class: "duet-modal-header" }, h("span", { key: 'c39aa3dca41741380c1b447499bb8681c0a2740b', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'cbd305802019477236a92a4adde4146b614679f1', name: "top" })), this.icon && h("duet-icon", { key: 'c7c340547b899add045132774d8e6fc77cf0cc79', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '51be5028e374ffba2038f37e44c8e51167b0884a', "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: '0a2606eaa0bb824d069c58cebd3239015e34c700', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'ab388454ca70920a04b9dd71bd8bf122fad5709a', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '647661b913ea78f280eb668f0f475b202188f424', "aria-live": this.variation === "loader"
                 ? "assertive"
                 : this.accessibleAnnounceChanges === "body"
                     ? "polite"
-                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'c8523317779ddc6acd2de899022ea31535612291' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '510535d30879f5fe64414da8dfa065f119c02e5f' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -273,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '67ddcbeb2bcf7fd5b4c147097c5cabfba3613950', class: {
+        return (h(Host, { key: '97536f27fe14e8f81df263d98c9f053b698d8ddc', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'a54d376060dfbddff29662ae568673f2aead4a5a', class: {
+            } }, h("div", { key: '36b9eee52abd2ee6b61c75ed2ec841a0c93630f8', 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: '28d4d354951615891335fc0ea72267a95402b2a9', 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: '4abf88e4efcaa7d8ac7d3761389d291fb737bb90', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'd0fbab3c690c4c1049d402425942358644675442', name: "tooltip" }), this.caption && (h("duet-caption", { key: '80c6e3987c3d532129b62b8a101624a9650aa57d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'fd7d501c4304a998f90203a0fef97f69659d5aa6', class: "duet-multiselect-wrapper" }, h("button", { key: 'ab72d3ec292db9a86e2e165db427702697043d23', 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: '541f6bb2d46d313b0820aa608f3e8595e4d9d709', 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: '9de6b81f34e6b79bbe3f6d8cf825378a9cb1b840', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'c92f7fb9a3d4e14fbb655c1fb87250e9c69d5e01' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '210050ff44ce316b94dbaa156a7dffc7e4b65f3b', 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: '85ba92d7e5a4130d1bfa809e539132afe34d6d32', 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: 'b38ee820cc9e9340d0b369d7b52176567d628228', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '7a87af1d95f8aa21659cc54059eeee7a71381b9f', 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: 'd584d8069843723e09395b74acc855b8f1a03d3d', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '5e51e4a0911761a464051ead529bdec483ed718c', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'c49215d1d23717e096993ed92626ec74b08a30a7', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'fa1f2d08b30643f1eb4ef6ad82b2b43b38893023', class: "duet-multiselect-wrapper" }, h("button", { key: 'b3d1612d062847708718739c436922ebbeb0bbc5', 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: '0c69dbe9cabc1d5ceefacd2d39ebc2d367275e7b', 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: '6e6ec0afeae4d364fabf1d7e53405c16977345c1', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '9c800e36b854577c56b995aae33579d483d382cb' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '118e5e9a7038bc274546f8d1e15074228b1bfa51', 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: '3cdacabfaf82bb73eb9ae10d5266d6db8670b8f0', 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: '8b2cc52242d9b5c8171dc0b243431e85e12388c4', 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: 'cecb7f5fb535c40313928e7dffd071ead9b74d0e', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '34d051c56097c082c42e05c2f699e1f62bd4f238', 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: '3ec52e1f61e9ac1f6fd5c9b0d35d8525c28ffbf4', 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: '32afbde85cb3c09d2b1a83a4ce101eda57e10550', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'e249aa14b04681492b8d07a20b2bd527d9f5b43f', 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: '59b87660ba34d771407a4858406d56b296638d8f', 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: 'd2d8ae7ca08a4cfd5ea9c2bc5cca2b62ddb13cf9', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '180fb990985b0564ce82c53d3b3901552a529108' }, this.error)))));
+            })))))), h("span", { key: 'bce4068b2c0e9947a80c89a371b7c1d731c03e59', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '04505dc5e9d7558c05b5a7fb31641a30011d6520' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '524bb027510763efb06f908c78bb6dbc1ff1e24d' }, h("div", { key: '7c86cae3a491c2c568ec09ab7a7dacc935d906be', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'dae33a4dfc1ddd973d4639adc9b711a99bb0256c' }), h("slot", { key: 'ac0da76490e7c39bee65dc53ed368afdecb640a7', name: "mobile" }), h("slot", { key: '5081c449ebbba8d68dec069e18155f8fce9ad87e', name: "desktop" }))));
+        return (h(Host, { key: '7e22b4d7023564579ca7e937ea9b3e1c41383217' }, h("div", { key: 'cbd604f24c3d48b16771529aaf84590fbe2c349e', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6d354508134cf4f829922e1d12b9163ed8796753' }), h("slot", { key: '2cde080603a8252ec4015dedd7166b3d3c59b945', name: "mobile" }), h("slot", { key: '9654b2dfc61dbbb9833a8b5df624bdb92adadc15', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -79,11 +79,11 @@ export class DuetNotification {
         return `${indicatorText}${slottedText}${slottedText.endsWith(".") ? "" : "."} ${this.date}`;
     }
     render() {
-        return (h("div", { key: '8497858acf685b75adce100af83521ea62dad249', role: "listitem", class: {
+        return (h("div", { key: '0c265034a28ae5591df26cf2603ab3d045b45478', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'd055bb5cebbf8d33eb35d193d1bb1fa106c5ec49', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: '37b18aada4bbdcc07fbae2fb2a379e4ce499d1a2', class: "duet-notification-container" }, h("div", { key: 'd82a6a30c51dcbe9fa55d184f9475ee52824c960', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'ba8cf675f5f79738b621bb60be60e955648f72fb', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: '7616f1c0b61f842cb19959f8a26d972740d4983c', class: "duet-notification-content" }, h("slot", { key: '3d15bf405f3f7e6bb7b699835882720db81c60ac' })), h("div", { key: '479850eacc300888b148101759908b962db1d24a', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '8f26b04ba38b69dcb86b0ab8b6820ad63453c831', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self", "aria-label": this.getAriaLabelText() }, h("div", { key: 'e573dfed62263051b2841cb36cfe1b3c00db8e50', class: "duet-notification-container" }, h("div", { key: '0e4d1b7fec55b7c69043f3beebefff071f2d1e04', class: "duet-indicator-container" }, this.highlight && (h("duet-indicator", { key: 'e9086498a4ef7534f5a68956dad0a811486b41b1', variation: "new", "accessible-label": this.accessibleLabelUnread }))), h("div", { key: 'd02944064c8c7842fb5556f2eadef2fc11aad3bd', class: "duet-notification-content" }, h("slot", { key: 'f4de0aed88ff1f2545d2d630c299fa7e73e62a67' })), h("div", { key: '8486cd8ac2797612ceae89c720b184c3e2f52805', 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

@@ -126,13 +126,13 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'd4fa93920c2ed5c6dbde47edb4a06376a78c168d', class: {
+        return (h("div", { key: '0bba8232dd1ab609418b4de64933e3412c0c5c34', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '91cf715c35fa62f878e0f48052db7e949451ffd5', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '4b962dc86ccbf2964df8500071dbc18f02c963cd', ref: el => (this.drawerButtonEl = el), type: "button", class: {
                 "duet-drawer-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '3d590c90c7879a63935be538952e2680d4f86bfe', class: "duet-drawer-icon" }, h("duet-icon", { key: '2772c893d000888882576b557b5c440a1f3c4c05', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'cfaf4ba17a8c84ca5c4111afc7e9f7a2f9c212ec', variation: "change" }))), h("span", { key: '3482261cfcde71451f58ee0834e396c4b28c2116', class: "duet-drawer-label" }, this.label), h("div", { key: 'a9701f65c33155543085e7fc9c295c901f99d104', class: "duet-drawer-caret" }, h("duet-icon", { key: '71ea296b4ebbc97281106f896ec07c5d30c6932f', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '6bef1c7a6d6cd6edfc6d2668ffa62e8e69f1bbd9', id: "duet-drawer-content", class: {
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2f15bb497d2434af19730f4030d2745f91e02578', class: "duet-drawer-icon" }, h("duet-icon", { key: '483eb19eec9f4540d16229e443d3db9996f184b6', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: '69984a9e0d645cd642b80e0fb2c447c700c98649', variation: "change" }))), h("span", { key: '25f5d0416062bf12f288db0f3727e1b44b519133', class: "duet-drawer-label" }, this.label), h("div", { key: '0ce588f8ecba4ba197f2991b205ea869aa86b139', class: "duet-drawer-caret" }, h("duet-icon", { key: '26570a5e3a4b5bea09023b00801ead20e71eca9a', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '07b8e4be45d32367caf6c3c430e54117fc3d334b', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",