@duetds/components 9.3.2 → 9.4.1

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

@@ -56,6 +56,15 @@ export class DuetCollapsible {
                     return "xx-small";
             }
         };
+        this.getAccessibleLabel = () => {
+            if (this.accessibleLabel) {
+                return this.accessibleLabel;
+            }
+            if (this.heading && this.caption) {
+                return `${this.heading}. ${this.caption}`;
+            }
+            return this.heading || null;
+        };
         this.handleClick = (e) => {
             e.preventDefault();
             this.open = !this.open;
@@ -68,6 +77,7 @@ export class DuetCollapsible {
         this.negative = false;
         this.accessibleLabel = undefined;
         this.heading = "";
+        this.caption = "";
         this.headingFullWidth = false;
         this.centerHeading = false;
         this.headingWeight = "semibold";
@@ -105,14 +115,15 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '090d561d82276fca138aa9c40b0c60cb40a7ded1', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '92d18884482ee68a80396709c618f2c76ae6b155' }, h("button", { key: '1a24fa1fb6aa053736ec11a5cfe6cbbd37339833', class: {
+        return (h(Host, { key: 'b6781c86d34d4f4b9560b111474a413c954818d2', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '1b59bc43bad54d7ba36951b5fc5cb27c8d197498' }, h("button", { key: '073aa9d20b4f508e991443273c16f43b15577183', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '75b6c89fb1198b6ebaa72dfe0bf388a864966896', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'a0215c9b69a2d6536d0a1b5c562b8ae59ce47b1e', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'e5d8b120ee539a47e9de0c662bf1d1d886f1940f', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'aee7dc1e055552a166bd15da474fbfad7f8ab8dc', part: "duet-collapsible-after-heading" }, h("slot", { key: 'f217b06da41c7d830043069d6afe808c9df81aa4', name: "after-heading" }))))), h("div", { key: '77d2d647d46cac2189b6eec069289cb996b86aff', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '3be38b8eca20e29c3f79f33fccef630a6666d175' }))));
+                "has-caption": !!this.caption,
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'b584a9f03de635516bab995166943fbe55139177', class: "duet-collapsible-heading-wrapper" }, h("div", { key: 'ebd0e8c2d793c6eaf9afcfeefde3822025b0f591', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'cb40e56e922d146a4c799d307a36bcb5de2bf909', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '29f73be47a8506407f8e151b103c0d953a175448', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '26c25d0365c8243c7ea36101f6e49743346363bb', part: "duet-collapsible-after-heading" }, h("slot", { key: 'f1a9005c38fd4310d76dfeea3f50a695bb732195', name: "after-heading" })))), this.caption && (h("div", { key: '7d8785de6f4478030bc6422749201f23f3625e3f', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '2f930fc5ca5fb0169c5b16f181ce5b7267ebc4ca', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'fb0d95a53dfa760ec0aa59d2b7e8eab8d9fe5313', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '8df7d36426b0c3390fba071740ca60ddc2ee4931' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -213,6 +224,26 @@ export class DuetCollapsible {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The caption text to display below the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "caption",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "headingFullWidth": {
                 "type": "boolean",
                 "mutable": false,

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '71daad66c023075159b00d6dc104eab79c4b160d', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'acf3ea2fa7c3cdd7e0363a19a18a60d74d393a6c', class: {
+        return (h(Host, { key: '4e145f7fe0409bb47b6ea71c0cf970e436b7a520', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'da28555843c0a763d34c7ddef8727090e373da67', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '196c215165b051901fe5d4f2052da20c5ca455f2' }, this.name && (h("duet-heading", { key: '0007ee7244e68c15517bb124c7b78f9d4e6c6dd3', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f59b617f8c2f6b37d6c82ce48faac52e06f7cb2', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'fb3b0b7fac964d9e8c8362392645f0c8c1bc87df', class: "email" }, h("duet-icon", { key: '893fabcc55e9b009d431952357e1fede755e61fb', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '7677f46f07ff869d2056aa234934991adcda3eff', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'c06e9f451420ef3e92664dd46e8ed78dd2bd5f74', class: "phone" }, h("duet-icon", { key: 'ebc081064f01efb5e3ea31fc8d8782bd22bbcef0', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '5eef45c250e181259b3452eb21d6ef619db8aa9a', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'd5cec8afd4d4288052f14f20204f0b934663e4b4', class: "call-to-action" }, h("duet-button", { key: '946e16a6a6648d433e59cb91ff1742c7804b84dc', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '34a2419381529d6a2800016e5b899b92ca196674' }), h("slot", { key: '33b9196a872c10dd4bfd5533cb6663b06aeb2692' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'e161cae8447cf17c85499d5b8ac46d7eda58172c' }, this.name && (h("duet-heading", { key: '454c6abe2d28decaa07122742bee22e711c3f81b', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '4dfc4f572e57af544c10b32c66e9afb93eac8080', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '96f61bbb0c884d374d10e94bf4aefb0b63adafb0', class: "email" }, h("duet-icon", { key: '2f6608cc7d1e2a2b5da95109823d2e1bab216005', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'd4e80f8aee1fc9997b959e005935fdffafc6dfdb', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '374a1f36f5a62d9888b932000a52a10b63ac7cd4', class: "phone" }, h("duet-icon", { key: '2d3c419e0d321f361a9993116fed27845238801f', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '07d80aaadfd5963717d64d3733d0ae886c71bc6b', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '15123cac72ca836226d307ada922cf2f8544a1d3', class: "call-to-action" }, h("duet-button", { key: 'a254a916c0f5916e8e39f76cae6724b73198d017', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6c527c0e2c594d19b06fb842c4d8a0967b7f04b6' }), h("slot", { key: '8291bc130ee09e6b1aa1e71bd15ccf6024c7d3c2' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -40,7 +40,7 @@ export class DuetCookieConsent {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ba657b582c7e36fe289d60fdbcdceda17ef1c854', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '2b680212ac0f1834f391a28a1ffc9320ef339889', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '6c881c1cf1281d744d38da802b8e8fc39bda913f', class: "duet-cookie-consent-content" }, h("div", { key: '11ec4babd89db60e2457d8c53e7cd7c568eebcf4', class: "expand" }, h("slot", { key: 'd9b95a15ab5ddb779fea42974ed9fe0c515be16b' })), h("duet-spacer", { key: '93b5f4d507e332d0703d03b5a04b8e1333dbde3f', size: "large", direction: "horizontal" }), h("div", { key: '213584e8c479edd36a9d35c179abf68c913035f9' }, h("duet-button", { key: 'b8f9fba11afbaa3b06da03fee781a279ad77e783', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: 'b30b45dd5bc6022a8da609883e28a272bf823c6c', tabindex: "0", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '457f367350cef4ec39f323925e64518b0b5a056f', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '681bb01d1031d8e7cdfac21539f49a9445a22fac', class: "duet-cookie-consent-content" }, h("div", { key: '6bc301cad7c45d36c5d7846bf96abe989a185ef1', class: "expand" }, h("slot", { key: '55da0877e4c6e55b827af651416e6eaeb908c550' })), h("duet-spacer", { key: 'bf00aa77836feb5b8cacbc6c76712e6a3b4aa451', size: "large", direction: "horizontal" }), h("div", { key: '86ed0f3ff48a2c916fa4174417677a6dfa737a0a' }, h("duet-button", { key: '75003f25f1f75e9d40ff2143b4a53441be2ed54f', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     static get is() { return "duet-cookie-consent"; }
     static get encapsulation() { return "shadow"; }

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

@@ -128,7 +128,7 @@
   outline: 0;
   box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
+.duet-theme-turva.duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px #171c3a !important;
 }

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

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

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

@@ -20,11 +20,11 @@ export class DuetEmptyState {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '71695aef6ccc177f6ee64bf983f3b7804ad48e9a' }, h("div", { key: '37fa981612523d137531585f970a2dd053aa13be', class: {
+        return (h(Host, { key: '227d54f00e9a51140efcb258a3b9aabd0403e53c' }, h("div", { key: 'ec272041ba4a302da9529e32cd67fc782102a783', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: 'cf95919f2fafcac684eb58f23f84a19d954e3bd8', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '902c40f812f728963756ff1939df300b2ad47762' }, h("slot", { key: 'd256a82414798539a4adcf52d2cb18cbd465271e' })))));
+            } }, h("duet-icon", { key: '0a04c1df954274e9e5371101e9756eafacfc803c', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: 'be984ad3dd5092ed1ae6207f72e383cd4398cdc4' }, h("slot", { key: '440fab721d208b694cab78140c322242812e708f' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,20 +39,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0458c4e50d24da4af3af8113caa38616adc77760', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '22fb700f4f1d215ef9d4606fbb43c69557d12798', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '157a9e3785dd0d5d73a7e5e2de69f367a89542a4', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '99df4bd364f76865e2faff62363fd808a48721e5', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: 'e765ac7a4130bfb53598e8338c717049998d6c5d', id: this.labelId }, h(this.labelHeadingLevel, { key: '186f844695e29b7a9473c1bd8288ba1b6f703e06' }, this.label), this.caption && h("span", { key: '6f427b409fe6e0867a43dac1df4d7ebf713f7276' }, this.caption)), h("div", { key: '5de6480a2da4fad61741586dea079cf527331cf3', class: {
+            } }, h("legend", { key: '068d96c7fc93e8ce64c9e22dd1bcbfe160d34920', id: this.labelId }, h(this.labelHeadingLevel, { key: 'e7cdb11c3979b3cdeebd80b7dc856b97ad037207' }, this.label), this.caption && h("span", { key: '80e0de6c351bc8450455812b961a08c43f0bdf92' }, this.caption)), h("div", { key: 'db529ad1162564e990f7ccbb03fedf4735507c83', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '2737a9a315e1ca8718f7a27d18c494226a7f1ff3', class: "duet-fieldset-label" }, h("span", { key: '659b075a7859fd6dc81bb37654cc4ad7c26afaf0', "aria-hidden": "true" }, this.label), h("slot", { key: '6a1a329c16e4700c8bd13495208a50f3cd9f3caf', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'ace3d407eb37d5bdf1e138d3f83ade490557d2d9', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3512ec5c46a20001a2cacdc2d5ab666c56bd41ae', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '974c3c4d2c83f771727d0fa4e5a570b8afa356b2' }), h("span", { key: 'c51b519da01660363f7f05108a2ffb6c0df0df43', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '7393b6770d0b0033df71fc98b44ca2e2e24b1577' }, this.error)))));
+            } }, h("div", { key: 'a0cc74b7472ca06a305a45924c8e39c945b05243', class: "duet-fieldset-label" }, h("span", { key: '46f40ac902b5e8d166f6673f538b93d7b4126426', "aria-hidden": "true" }, this.label), h("slot", { key: '328d6c4b910ee12d2a3219f863fff82f9df10bb3', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '7ba9fbacf0b68889efe22cb4859b5bd1da3a2667', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '0e83f76e722791658c7c05ac99c9ba8affb52d95', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '81e9a395cd365be7ded540edd8eb68c83a9cc6a0' }), h("span", { key: '007112c1b89077612e5478a1d71ecdbf62ad2b36', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f93d85eb2d47ac6261a6a3cf1367f22c09656f92' }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '9d8249a9d87b3bf8168ccccde88d37a4b8041e9e' }, h("duet-visually-hidden", { key: '533a54082210a7342e55fc3154e66427195462dd', "aria-hidden": "true" }, h("input", { key: '741edfe15384ebdfbc41ab87896c6eeaa5619f82', ref: input => {
+        return (h(Host, { key: '763537ba02066999a44d5b150b78e695137c94e3' }, h("duet-visually-hidden", { key: '35d3f42318db029c6d554809ecf5ac14088ac89d', "aria-hidden": "true" }, h("input", { key: '14ab29860cfe7da2b3c62da7649a73f6ca33c261', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -116,15 +116,15 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '5e5ce617086534a829187dfcc98bdc410b38fe8c', class: {
+        return (h("footer", { key: '8fd345b0b7ccb794b603dc1fa9164ebf8c495060', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '943eb7486bde901469c3d38bc8f47f45873061a1', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '97ea7a84f34b7f2f6dd1b7cc5459f6f3a8ec0697', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '773caa00c8f629d512537cfab5771e918c78ba57', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '4541d65907daf88fe8fd3c740eabd4bd9ad82307', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '69e42a6e7e0b9a33783030805b677974cfaf2675', class: "footer-top-logo" }, h("duet-logo", { key: '3b13cceb42bd3d42b35ec79d474f902715b32469', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '0f50be10f253b901ea15babfe2e65972ee4e1bf5', class: "footer-top-right-container" }, h("slot", { key: 'fff546c5fd473c9777b2981d8e9b234d63424fe2', name: "info" }), h("div", { key: 'd344981599f0d422f5c8b8426cd6eef8e55fca73', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: '549ec0600b48e174d161cbdfe01544126440da66', class: "footer-top-logo" }, h("duet-logo", { key: '840cb0600e17103f1501cb248b89dd819f7a661e', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '3327e1009bfc9721b5e2529dcc938cc8f4257854', class: "footer-top-right-container" }, h("slot", { key: 'a00901969c97143af27151402579f4ca5c12a84e', name: "info" }), h("div", { key: 'e2e6e62fd027d2b77460546d9ab74f69a9f258bb', class: "footer-top-items" }, this.processedItems &&
             this.processedItems.map((item, index) => {
                 var _a, _b, _c, _d, _e, _f;
                 return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
@@ -134,7 +134,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: 'df707047134c97f909836d8f230b9afc286bf92b', name: "extra" }), h("p", { key: 'eeac2d838f28bd02c934465562ec7d4fc4186bc0', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd0490746b5085399784da40b62f9d0aee94c41d7', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'd6c3eec9132128503493b6fed1da4e8ceed436bc', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'cf44e482a16ec1ddbe8b7b7affa91f7a54250c4b' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: 'af9233433eea11f52bb1fb600323f2c8475303da', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '288da5793cca9b97494edad50ec731ebdb8cd008', name: "extra" }), h("p", { key: 'd6e5f190770d85f7f23997fb3010940568a11da9', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd03cd42008101259ae77c5dfadad2fc719c3bc6f', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'abf31941139f2bfcaa290710ce02a3151815d6f5', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '45e583b238584d4f699cf8d80d7e8c77d4204eea' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '673765574f21e139f2e25c722cf7e3f38fd7b2d3', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,6 +35,7 @@
   line-height: 1.25;
   color: rgb(8, 42, 77);
   text-decoration: none;
+  text-wrap: balance;
   letter-spacing: -0.01rem;
   word-break: break-word;
 }

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

@@ -33,7 +33,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: '254585b23310b58e9fa3c75de98c1bdd62283ae9', class: {
+        return (h(TagName, { key: '9a91dd0a097a00c6412b6b759df13aaa814430e8', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -44,7 +44,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, style: { color }, part: "duet-heading" }, h("slot", { key: '408af76a0856d17891671ef22c16277d368902f6' })));
+            }, style: { color }, part: "duet-heading" }, h("slot", { key: '01f466dbadd345dac83e12dea63809ad46a70f2b' })));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -158,7 +158,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '042faa3515dd2b2a3413df6646b8721837571bf9', role: "region", class: {
+        return (h("div", { key: 'c35513eb060ccad4d0be7152579a8c1ef1843ce7', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +176,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'e2f9ad908b71bbdae666b98ec16b0b86fa1019c4', class: "background-area" }, h("div", { key: 'dc010fb66ed6094a9f3c5fb50480aabe8e27df1e', class: "background-container" }, h("div", { key: '30e68b81f449aefc9909dbe9d3c85a5db96eb875', class: "background" }, h("img", { key: '37c6413d57c6d2b0d1e4e3757595548ae958ec8c', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'aa7c28ff5dfe2416f0a17170e84152dc3880e6d3', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '5c4edeeeea2594031e72a9392e1780adb10b7b5b', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '2de78135fb229eee2f247265f025584c7dc05ea3', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'cc35df8e4eb5113c183c71f7ae0ef7416cdea82c', class: { background: true, [this.layout]: true } }, h("div", { key: '532040a219f6b2501581ba79858ccdc0cef1621e', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '5af3197b05be3f76c8e1b3b692b61976525a4c86', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'be29d2c5ed5d37e2ac2c337b999f482342111d42', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '45fc7f8aec41aa72b3449fc6f1bc4916322d351e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '28491ef470b0c4194a103a5a900b75f87cc9db75', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '34e01d6e835e9481e5ca81fd474eac306fed5c59', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '376283255281543db424c9a5f58e070730862fe6', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'e252acf13371ed78175cb0b94622bc63ccd7d045', class: "background-area" }, h("div", { key: '49e9baf84444ab01c8e0cbe7594011a8698e6eec', class: "background" }, h("div", { key: '2bcceb2336dcfe8374a7cf60fa35dbd4ce52490e', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '52634cfe76a69e40b04b97f24e59479431c72dc8', class: "brand-shape" }), h("div", { key: '8a14aaedb374b4cf2544c3964060a390d842634a', class: "brand-shaped-image" }, h("div", { key: 'df369fc19adf5d50a5382be8c5aeb261c61facdf', class: "brand-shaped-image-wrapper" }, h("div", { key: 'fa987dc1145cdcb6e2a94fc229951cb69f4be7cc', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '550e54f44b106bc7f17170fc2cadde053115946d', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '15936336c629c699a2a8ffc51ce4caa27490e5d0', class: "duet-hero-image-mask" }, h("div", { key: '86c4a59bca1022566f12904a9e703892d16ae6a4', class: "duet-hero-image-wrapper" }, h("div", { key: 'e5f4e326722827fe61a25a1eb065ebc2fc70b823', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '8b51c232e3324becc735a3e01f9885068a1d0164', class: "duet-hero-back" }, h("duet-button", { key: '8d3e72057c2ffdf9676d09adafddc220dea418bc', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '27e85adc78bb62294cbb7d9dc59a8444bee27e5e', class: "background-area" }, h("div", { key: '181d77ba32e718bf11e087391ebec1de91a0f436', class: "background-container" }, h("div", { key: '4a83099c17f49e81652b150776eb96cf030f13ca', class: "background" }, h("img", { key: '6a7248c64c31e24f90145362bb9f846c91bf8375', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'b4eb38ad6851945f2d29b24329ba465a0c0563a2', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'cc3cb69b3e1f33c09eb1017af5c2d373f03b68ec', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'd6965e50c72e29e3503d5308a0ff7fa8770607c2', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '2a124e12ce9cce7f1d581c787f5006ce7403dfd4', class: { background: true, [this.layout]: true } }, h("div", { key: '2bd79bb7fadcca8400f1133e05d4b4193eadcf9d', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '39e6fb6705c3799d1b09b5ad2ea0f637926cfa19', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '3177707b2a5c89884edf3ab2bb2951f56871532b', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'e1059a46a707b5f23a2963bf1006d80f348ac57a', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'f049418b2d2d39e7d69181d3780a8683002ed844', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '429e6ca56f295e1a3e04209a473a8c7ca07ca127', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'a324ce3be8d51d6848bf82609a8443b637f7c7e9', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '20ced3a9311746eb034ba4efba7cdb0176157dd1', class: "background-area" }, h("div", { key: 'a6d3a68bb41519b1924f59fd4ad03159af93a582', class: "background" }, h("div", { key: '6f96b2049aec609732afe98450ec5f3e7022e9b1', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '72e6e5d2e797abaf09dd722327fb5bdba7715b44', class: "brand-shape" }), h("div", { key: '21a64cef40034dd82aea23a2480fc7a5ef223f55', class: "brand-shaped-image" }, h("div", { key: '7c3e55707f87964db8ea0917b74d253c9d695abc', class: "brand-shaped-image-wrapper" }, h("div", { key: '895025e62003249bc64ea166629961963d81e88a', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '0e72a22d7b52754a6ce5f31a4add3f6704079b5b', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '28eaa864dab07e83921548498cfd9290fedacc34', class: "duet-hero-image-mask" }, h("div", { key: 'f7205d85c99bf061e83559976c132ac0a079591a', class: "duet-hero-image-wrapper" }, h("div", { key: '12b774da3703ea05be8f8d53476af5704d0fe2c4', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'd1421d7dc9f15977eba7c662979bb871d495a98f', class: "duet-hero-back" }, h("duet-button", { key: 'e24850de6b220e820248e612bb64fbc94c4fdc99', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'e97587c28931d1b2241dd7f6c2b87af2369dfe27', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '861d9fe8b7c1dbb0c7320b2349aa3a8a5d557deb', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '2a4e5c820973928c6535fdae500e61e1e48c20b9', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'a6351115bab75f50d9788de544279ab250263bea', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'fa3fd8018b9ece1dda122e328f257febe562c4cf', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '35f2d525dfc0ab9114d631d4d924f7168800f17e', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '5ae76dc039702e2ded036c96281d92a7677fa7fa', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '9505d79cbb4aebe18cfc17188ab26b51261d3030', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '08b42059a383c572e35770ac58675e52835e6ca4', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '9d012b0ea1508ed5ca0a7014eae62310790a5966', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'd01b15af27908460f842849056c3674d15c5657b' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'be292afbb69089eaf0e8da5177ce24ebc43e6df5', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'b077407e1c34a48740ce354c5481dac73b654e3d', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '631a6b29fe9919cf69720cb81573e801dd36d99b', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '92b822dc6914886aab5ae1b0528fc285695c0be2', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '3216721c8773b44c4f3d8635fe5eea31ba9489a7', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '75e19684ffefb463170efcc7067969e952099230', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '9b7567102fe9d70e1bc20806cd1a953c2330e731', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'da172940a007cfa192370d8c268bcbf88e0950d6', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'bcd14cbbda4449532fd26b2233706371d362558d', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'e79783580f4c322fb7d0ba7851d25e15f785f5dc', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '8c03af3ace34f2f0b1138e9a32f7ce01515fbd36', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '2fd60c758679df458ef2feed22817bf1e932446f' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'ee562f5589037be7d2de3491c62de4795cd00d66', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: 'fdb280d9ab7d830528568ee8027de7d79db61f7f', class: "duet-hero-image", style: styles }), h("slot", { key: '5c6c4892f700e257e5bcef89be26c5c52e43e402', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: 'a1d05e33342d55d19db68851c3bd6109aff70182', class: "duet-hero-image", style: styles }), h("slot", { key: '04f905e4192d1b6542d830398f024b04ed0fe521', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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: '4285b685fba78ac61f4d1c44a046ef443d660f40', class: {
+        return (h(Host, { key: '2c8d063e4f6194f02c63a231c7905ce4477ebefe', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '6faea3bc218085a73ff1bdb5415b0d88eebc428b', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '9d9b159d2531f6269a434a617d95533d65a33fff', "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: 'a27e478af2767dd7de7215108413bce96e6e9d80', "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: 'ca9fce62fea6508b49944defe645c230de66b14f', "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-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: '815cf46b505a58a4f1db64f0737eb2461fffe1b4', class: {
+        return (h(Host, { key: '77e2f191178d05f54711416debb0c7f64780a0fd', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '0db8d45f16f7bec516c0b831393cb05f962bfdb8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'b65a92ce153b41318cb757b3457dfc470c11c4c6', class: {
+            } }, h("div", { key: '905dcf1de42b34427d89e098f157126507d12aa5', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'aff4d94915e6db5fec05f1591702ddf5d32309b8', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '777fc5b75ff85428b7234d94739f7471f5dc8011', class: "duet-layout-top-wrapper" }, h("slot", { key: '513fa6d80b00980efc02c454889726f24b3af6a9', name: "top" })))), h("div", { key: '8d24cdd9f0a38cadf71cf74df0f44c547a9fb4f3', class: {
+            } }, h("div", { key: 'e9a78a2f90f64572d0f9eb0095696f7292231b90', class: "duet-layout-top-wrapper" }, h("slot", { key: '5c8632796fc97f96a9db17cb193730d394d63bc6', name: "top" })))), h("div", { key: '7e0243ab692a0f95ae46a7f41afaac27ab6f8c2f', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'e98b4d6704819e6a07f5ccc7b29227d6623e2bc2', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '642f458827bfce2732c708d5cff00b382180a202', name: "page-heading" }), h("slot", { key: '929847b72cf01ed5be66b9fdc6e0e204281d0eab', name: "main" })), this.hasSidebar && (h("aside", { key: '9cf127c89c37b47642d7d3234476c16d5c38fd11', class: "duet-sidebar" }, h("div", { key: '043863761695cf57b596ab6759e99ae32e09f432', class: {
+            } }, h("main", { key: 'e0eb98840d79da68f19c18dfb6b0b738c50a8563', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'a8dc3953ae2de7c4d6cdfb7b732a0a2f6ff59ba8', name: "page-heading" }), h("slot", { key: '9dc9657dba0718b7553aa79d2ba525fdfeb14279', name: "main" })), this.hasSidebar && (h("aside", { key: '2ca95869b0244da856be5a537d4781fcba395eda', class: "duet-sidebar" }, h("div", { key: '63c6ea53fff4a0f22940410c70619ce468179c20', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '772f164951137306ec8289a095a829fd2fc0a87b', name: "sidebar" }))))))));
+            } }, h("slot", { key: '7329e6f47779d50e1ce873a0bb93e67b3a5cdcfb', 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: '6bcdceb6f32843e5474b9a1d00f9afef631afc5b', class: {
+        return (h(Host, { key: '70bc31e1d10efda3453e16b689e38d3a4834a4bc', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '8e65e4745097d5253535f228d9a2d61f9961cceb', href: this.url, class: {
+            } }, h(Tag, { key: '1989da3829486cf23e4a50a7e36d93156f816404', 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: 'be789bab546df8b0ac070d09a5f5c47f5f428afe', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '645ee0c7c623eeed042e25ac2ea7aab51ef1a2bc' })));
+        return (h("dl", { key: 'fb75b5a512a993e8478f5c82e38b8b82a5e199cc', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: 'b8c6ed37ea89e194ef5a2f9fb603b60cd204ff69' })));
     }
     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: '4d92cde8114cd83fd9d52008a16ce57a934eeb4f', class: {
+        return (h(Host, { key: '22e6cfe329bfdf6f2f1c374bbf9bf9ab79241c52', 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: '58c9679805f2a50dbf3c847157d0a1799feaeeed' }, h("slot", { key: '2f167529b2c16e01e0430267dfe564ad8d9aed6c', name: "label" })), h("dd", { key: '11b92167d9b42d5e5d97b1e056ecc08a25aa1f6e' }, h("slot", { key: '7bb89dc78c1a571df7d27a285435d7c596d3d6f8', name: "value" }))));
+            } }, h("dt", { key: 'ac210602fa781f3a400b0268c29612b3feda2882' }, h("slot", { key: '3e79d41cc7272db352845896debfd271df16fb70', name: "label" })), h("dd", { key: '441336e69ff97fb2b7b94e19ce909b7936bc9519' }, h("slot", { key: '884a75fd16b595aaf8ca7aeaec1d345e2760e4b4', 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: 'cd53d85f163bc76250be1e5514b00bf6769e7f54', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '8ec59c6823257e298b0e298a7d6eda2c40725d83', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'cf1b972f91235031706d26f97708213a8f7a2f8e', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'a88838e36a8db0445b441e1e5a18239e70f91672', 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: 'a65c23ad487b0568d090ce557e371efd6d9c327e' }, h("nav", { key: '21e9511d958e4399c027bd8c22f2fa5d55b787ea', class: {
+        return (h(Host, { key: 'f0983936612609fc2eb5721734a11d4618360b8b' }, h("nav", { key: '4a139907bbd7f3112c033121a2ce4362ba9d1188', 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: 'eb917b1c926da1afdb46bd394dd8b9c8c8ffa61e', class: "top" }), h("div", { key: 'cf6bbcdfc49a0d74801a526cbc90adb45540845f', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '68e1850c9b52d150b6e4d62fefd5c6dcac8729cc' }, h("duet-logo", { key: '403fb778a1ab49bca29520ca8ed3e29a7608036c', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '66972c33fef9180083b6823f0eb2e6249df46a42', class: "list center", role: "list" }, h("div", { key: '5b141c33b3b4e7bf836bba115e06f6657e4d2d9e', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'a31a813255f7e37f17734297331b69db14d84ac2', name: "center" }), h("div", { key: '0380979146e17aa48f702e5b333465591b7a7d32', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '425ef8602860673db531601f0518859444eabe8b', class: "list right", role: "list" }, h("slot", { key: 'c9f71431b68616e5f53b695322da1918e64779de', name: "right" }))), h("div", { key: '2acd626dc57ba7286fc5112c54d1bb137bb8b700', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '72a48c9a4298ea62c6e14bbead3fef3c829dbe3a', class: "top" }), h("div", { key: '2a140a16fd5dd3724b6c53c3d13bbf4e4eac9b2d', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '755606dfd3f93aa8971497b5faba2e8be2f67d8b' }, h("duet-logo", { key: 'a6ea5582749cdebfe07c9dbd4a119c5397a57303', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '6b788322e94a6726a42bc19fc96111fa99f17408', class: "list center", role: "list" }, h("div", { key: 'f4fc7bf613930378d1c8b84968172dd5b44ae53e', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'b79f7d3d752f470fc1fc87f4003d83154b2358c0', name: "center" }), h("div", { key: '01255600e64d3264bf78760ce1049064c51e0061', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '99b7c6a681d0431553a70b3a4850c76c6f76b0cf', class: "list right", role: "list" }, h("slot", { key: '5a99bf4c8ff6fea38e35ef57ace64cbc56912485', name: "right" }))), h("div", { key: 'f2d6d6177bee8c76572eba30f79901df2be090bd', 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: '82464805ea51559084ea355862b4f31c8f7e54b4', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'f0fa86fc2049ffc2c50d1373f983bfda5016f0dd', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '004d0d4f86fba40f9fad10254bbd9a67fde481b3', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '93260868022fcff94e5594b0982729e449aaaf0d', 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: 'cf6e2dbf37f362d520925c642768d962d4215ad7', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '20d6d69e5e34eb70dc3dd61dcaf100c51862ac02' }))));
+            }, "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: '09c43d7c0dc7ee3887710f7fc88a0b290160dd7d', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'b4a30a15fa55995016084db6437987aeec8ff925' }))));
     }
     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: '14604da439d8f76ce91c6ee608491a1e35dbb6cf', role: "listitem" }, h("div", { key: '894acf67c028837682296e787b78815f20536fe8', class: {
+        return (h(Host, { key: 'b66d07696fb73e08c25ee747d2580d086a1f6034', role: "listitem" }, h("div", { key: 'a76407d0613c128ca1c106ab93e5559923b86c60', 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: '27975670c14a7f50d462c16c311d92e1b7f015e8', 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: '2821837c6d54d1312e3a9722a426b76d94973aa9', 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: 'da16731cb49afdd761eba05ed7ccd4c022eb5be7', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'a86e2f65da4100756c193ff0a63b0787ae0c458d', class: "label" }, h("slot", { key: 'd8e977ae62ec554a0c41c2e92bfe724a33a36af9', name: "label" }), h("duet-icon", { key: 'd1fd9a923165aeb594c076448f16ca20369f92a9', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'cb6c675efba2ccf218e275d5ba0a9e22b9338706', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'a9e0ee9ccdd4e2e93db53969c5af2e38e3cd40fa', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '65580cab4fb839ee4b520f56e4a048d6d0bae122', class: "label" }, h("slot", { key: 'c62365b60d57413f850d9f1abed85bc109285145', name: "label" }), h("duet-icon", { key: 'be8eea0170768c101754a5bb6244280ed0c431e0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'be1513d3702db6f94611e3108415b37f0707ab9a', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'f27720a15f413ff6193f40f99c760378c13901e3' })))));
+            } }, h("slot", { key: '2bebbcac98c6087f9e03ac9a40a897ecf5d778e6' })))));
     }
     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: '8d112f638049058d29ae3ba9ab00d6acbb52f857' }, h("a", { key: '39954a1d2940510a100fc6d20302767612d0bfd0', class: {
+        return (h(Host, { key: '65d409311019e93c176030ae276b74b780f0722c' }, h("a", { key: '71abec43b5213cece2f6f537220c28f28c174cbe', 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: '488d03db430f04af7c2c6a13f31ae5932a57e40e', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'b42533bc5fd7ccc2557d1cb2b2ad7dc8bed68b30' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'abcb3dd527aed658cd2b4bbd23edb20edfce91eb', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '7732547ae2fc62149c2250780e40bbe6c108a49a' }))));
     }
     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: '564cec69e1e6e84d349582f746e7a4398980d788', role: "listitem" }, h(TagName, { key: '3c025a87721de91b523330f2f609064e0e0f973f', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'bbb7ab55c67b4db51e15236bca4d88bb424285ac', role: "listitem" }, h(TagName, { key: 'fe5e350f27ee0bc5f7284a1a4f042ca07cf8ff09', 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: 'c615dc0da6804efce3f5e038f578314ce7963a05', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '0944adf559c68a55cbedb75bc8a4d038197dc4fe' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '81b6caf00069e39948f9c1f69370144367bbaf12', 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: 'e726aadf242af86b56407416f363f337830cca5b', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '752e9b002c53afc4a7bc62227afe1f3222e72602' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'b983d7aad90a67857c92d864f4c807fe3f7a7a16', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,