@duetds/components 10.0.0-alpha.23 → 10.0.0-alpha.25

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -53,14 +53,14 @@ export class DuetBreadcrumb {
      */
     render() {
         var _a;
-        return (h(Host, { key: '7194507758c2976af05092483e20590e29db18fa', role: "listitem" }, h("div", { key: '374e39bb1fa8204da40d6ed3e769ff342efcc186', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'f2ec6918a8783ae7756616987690073deb2674ca', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'aca45e2ad535926d21ad808020d03efe5611a9f4', class: {
+        return (h(Host, { key: '1ea751b77b703d6054db7aa48bdeb9ac2a7cf742', role: "listitem" }, h("div", { key: '147ae3c1a0ff6744d0d363ce2162b0acf8083535', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: 'd1642e1065ca32cc3b05d2724fbb3a1fae48fe2d', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: '43ab506c5a641b44b99b9589eb7afdf7dc12172e', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: 'e7d45f42e8ae3f1071999352e45030c57536fc07', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'f29d0e58ace81d0ea40bc1a4e8252bf3b0d965a6', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '9bf27c8c6bb3400fe828e4e8e917fd244453eea2' })))));
+            h("duet-icon", { key: '73e448e620cf4284d620295ee791e8ebf8d8f491', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: '9b0715738cc45d50d03a74f3310b654566fa0d59', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: '67cd2c6250927322b997b23a199c5ea758e2829e' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,11 +62,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'fcaa6da538d472de9ef49a1da0cbf32d85e5f558' }, h("nav", { key: '54dfb6d38387be36de31194f85187dac77620c43', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: 'a33196239b9b8f6933f6e8b46df005591cd7234c' }, h("nav", { key: 'e132c17465eefb28d91c1a2a98fb6fa6bf812c92', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: 'e0c10e3f3175cfe53baf88d3279785795394eb54', class: "container" }, h("div", { key: '490c08445579f837599571654281c1ea0f336f80', role: "list", class: "list", style: { color } }, h("slot", { key: 'bda3d6a84edc3c372360a215d090ae9d902297a1' })), h("div", { key: '280b605ac1160140dde18540efcc18c04c7449c2', class: "bottom-border bottom-border--container" })), h("div", { key: 'f4a30ee98a7540c7c8d260e8a3dae32a33a75b0a', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '515e61b4523d016aeaf79f9785f335793f3fd8a7', class: "container" }, h("div", { key: '5cc015e840532c3e5450d2f99ea6dbfe16da9e21', role: "list", class: "list", style: { color } }, h("slot", { key: '712824b51a9798d5df687a5146e7564c32e3b192' })), h("div", { key: '6c669b82b4d9bebfec76cd852e422df64fc378f7', class: "bottom-border bottom-border--container" })), h("div", { key: '04cb09bd7682b668fd9ca24ddd91efea24da9bf6', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -456,14 +456,14 @@
 .duet-button.plain.duet-p-0 .duet-button-contents {
   height: auto;
 }
-.duet-button.plain[disabled] {
+.duet-button.plain[disabled], .duet-button.plain[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: transparent !important;
 }
-.duet-theme-turva .duet-button.plain[disabled] {
-  color: transparent !important;
+.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: rgb(113, 118, 132) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: rgb(222, 224, 228) !important;
@@ -661,7 +661,15 @@
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
   color: #e61740 !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled] {
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative {
+  color: rgb(255, 255, 255) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
+  color: #8c001e !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: #5f7a8f !important;
+  background: transparent !important;
   border-color: #fbe1d1 !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
@@ -675,6 +683,13 @@
   border-color: #e61740;
   outline-color: #e61740;
 }
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
+  color: #7891a4 !important;
+  cursor: not-allowed;
+  background: #d4dde2 !important;
+  border-color: #d4dde2 !important;
+  outline-color: #d4dde2 !important;
+}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
   color: #e61740;
 }

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

@@ -257,12 +257,12 @@ export class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { key: 'dad881c4e315cee7e2fa16020ab44f3b8518ce8b', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("span", { key: '08d196d1bc190ccb57d8f4961a78e1999f69a6f1', "aria-hidden": "true", class: {
+        const commonChildren = (h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: '24ffeda883152bfe0123a828ed037aa7bdf365aa', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '60cbc950fc893b105e13e98769341697d3065e87', class: "duet-button-contents-slot" }, h("slot", { key: '236c0748e32a96046fe4bf1c79b6822ebf5c0b9d' }))));
+            } }, h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -297,7 +297,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: '2f71565d21679c2161cbebaa8b3bfaa7aa4183a0', class: {
+        return (h(Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -305,13 +305,13 @@ export class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, h("span", { key: '2a2d449975f67608f602eaca489e4ff865496ed8', onClick: this.handleClick, class: {
+            } }, h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'e27fdd855b9191cdd22c9b74746f3144890d3837', color: "currentColor" })), h("slot", { key: '5f1fec755bfdf56ed261b893fa647308c1e21a7f', name: "proxybutton" })));
+            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,11 +37,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: 'dd2f1fd88d16b07c38c22e1be1ba4c3c660ccc46' }, h("div", { key: 'f6dfced51062e5c3b5c557b797bd4d2fb18c7413', class: {
+        return (h(Host, { key: 'c491469b698a73c9a411cf3f660770be81879bd7' }, h("div", { key: '4c7e1af2f3c229e617d04c0aaf1355bce04a2d6d', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '8b86c87b9a8e679696e1bdb4d3e60ac1814de56f', class: "container" }, h("duet-icon", { key: '7b1f65ce4124a8e87bf1ef4c6bb05b83778f9d44', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'd88a7a4cb73b03b0edce0b73d85d793a07f95809' }, h("slot", { key: 'e20a3393f6c921615280dc67bae58dd86c737849' })), this.hasAuthorSlot && (h("figcaption", { key: '3e77db76e9ffe2faf357f7d63e389f0a68aab8e3', class: "author" }, h("span", { key: '8d726ffb6c4ddaeb397e7b39ef2b75b4f1aad3a1' }, "\u2014 "), h("slot", { key: '60d48ada87a9b5e8bdcb703f99a508efc7e04bf9', name: "author" })))))));
+            } }, h("figure", { key: 'eb03690c450a0d767e18bffdbce24d83e3334e65', class: "container" }, h("duet-icon", { key: '1695f3f5c59f29b3497a9df3269e791bc19095a6', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '6297aefa621ef90e3cb100bcfd07c798cf9b378a' }, h("slot", { key: '14186875763fbf1989d9de9cb90706be15de8508' })), this.hasAuthorSlot && (h("figcaption", { key: 'c17e4fe83fb3c067c4c91369ee6d80a2a6abf3a8', class: "author" }, h("span", { key: 'fac4c2303e1ff78e28fd1538ab43d1b19e84610f' }, "\u2014 "), h("slot", { key: '648acac653c20369d7d52a5537c43175cb4dbd5d', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '11d25d52de0620d44b9f713a4ca5756f6a30ae4c', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '9a1c182d1cb6bdb9e953a39a4be54a66b8b3b415', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '57ea20983cfb4e2e1300ff93298e0328f01fb41b', class: {
+        return (h(Host, { key: '9a2512992413ec797c17d55d2a41908cda0e6307', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'f95a151961586c89597dd2d31436deecc0cabf4d', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '42f1b50012a17910a3c1d91bac31bfc370c73abf', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'ecedb0a4f3d0be121b2c191d7fd4a448ecb489da', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: 'ed62491f54edf398da1c22ae672683107b6aa8bc', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -174,14 +174,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8b2e050e3166f2172d5b4e72022b756fda7b22b4', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
+        return (h(Host, { key: 'd339b389eb4a7e9867dc0646ad760bce3e835714', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '01fcf59a160e4caa9839e744f04193b129422958', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '74785ebe148e13e564dc43a932b14d902961d824', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '71c8ce1af4060565925ca5b806f20677a1d75742', name: "tooltip" }), h("div", { key: '164390a522e1aaca8d76f32b648075c4f261c48f', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'ef80ec0aff09effe8174f69b4a63f85bf8f9acc6' })))));
+            } }, h("duet-fieldset", { key: '00a0c17d4dda00d8482933db51e713995820d82d', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '3d4ef32226b7f822175c071479f2e3339fbfdf6b', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '89e8ef0c51e053463d12ed01ba61b814b28623ec', name: "tooltip" }), h("div", { key: 'a86be50bed561647750f76764f9998567360318d', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '629c8b4458323f78742eedebe2807010079ccec0' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,10 +47,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '49001d0648f3abff62bded8ab167531062eb86ec', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd9c1d16500db663bb12ce2330afb0b49e2c80f53', class: {
+        return (h(Host, { key: 'a08fac4daef7586a885d4556d27260feb027d4fb', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd70cc29e06be46210e3150661f16bcf19fab27b1', 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: '01853a1b0a3d92821488609466b83d5546e4b649' }, this.name && (h("duet-heading", { key: 'bd5bfa39d39bc5ddcdaa2e42e2ad22cf19cf6bbc', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'c69b4bc8205f7e3807d26dd0d1f1ad0843c2b07e', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'e37e13f86035c0f518c3208461da38fa0984eaab', class: "email" }, h("duet-icon", { key: '373c02584c161bad7786ce1b7df2bdb536e52397', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'c20b32b57d573f66f48f6672adf98c8052dde8ea', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'b3395640f50686dc2a48ab11958fe3824cd72757', class: "phone" }, h("duet-icon", { key: '67ce53bc8fa4da3563047331ded6d67d7cd058e0', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b1da0db75f70361153b7c10739770a46846d282a', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '6672b5eebda78fa5c27298da7de780516e28a12d', class: "call-to-action" }, h("duet-button", { key: '58d4ab74338af6f06d75f42fec41a8863bbe64c0', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '613ab34a7f869b136951ce5e3f536cb8becb832c' }), h("slot", { key: '04f75fbf47ec89b661cc174c26b68f0039b209fe' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '4cde139368ebb252e83638d0634671f2167b14a0' }, this.name && (h("duet-heading", { key: 'c91fe7f5ef066de893cfa2fb4018e9b17e5e66af', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '9ef8bdab5f11c125115cfa147428327131e6086a', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'd07bbb21d8963247655a3b172e26c9f1becc2fd2', class: "email" }, h("duet-icon", { key: 'd25b13911b29302d0eabc8f715e13ff59b473c7f', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '2765a6cbc0fb671c3cb8a37d7ac2fe578f369cfe', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fcbed4d2a82ed0ee1e90665f5e42f10bfdcaf344', class: "phone" }, h("duet-icon", { key: '17233a8a4863c68255e207c23de3667437bd1177', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '0a49811728ddfd13096701fe9d33c54722554107', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'eb199cf8f4f83cb7ebebbfb2e791c78b6424091e', class: "call-to-action" }, h("duet-button", { key: 'c8e0d2d72d5b15a74b0d7fd79a595c6ffddf6f7e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '5e2f0915b883c85ad3bca3f54b62347af8250749' }), h("slot", { key: '388383ea2ca2a756a28d13bdbf521cd85094526a' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,20 +71,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '076936b60dd66fa8bb513f6aaadf86120092cefa', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'd4874ff584f7ab378b41df3ee8d073bd1a2dd1ec', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'c761c38f09035452c65fd2a660bc83eb9f0325a7', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'c62cd3a0354883251b153612cd9a685059205638', "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: '7a9bdbb5b527b4edbaf0db71470f710da6810288', id: this.labelId }, h(this.labelHeadingLevel, { key: 'a438129b00c7930cbd0c7a73488c66b66acb0a45' }, this.label), this.caption && h("span", { key: '5983948b527a865afc3beab987d5edc194b6c31d' }, this.caption)), h("div", { key: '93b710340d6b343bf537ada55061d986c550cc1a', class: {
+            } }, h("legend", { key: 'a67feca7ba42a9de83e3eacfa41bb9c53de0185d', id: this.labelId }, h(this.labelHeadingLevel, { key: '98598e545d1ac5d30cead1818c2831285e21fd59' }, this.label), this.caption && h("span", { key: '44d72ba880fb2ba4b2e9826389ca0b23a4c09446' }, this.caption)), h("div", { key: 'd6680f823096d1510778845d46bcf10f3070064c', 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: '1ea6435a3d7df0ecac602c2b62dc3550dfb93714', class: "duet-fieldset-label" }, h("span", { key: 'd57374901ce9fe948da8f7806d84aa8698619d49', "aria-hidden": "true" }, this.label), h("slot", { key: 'bb9063c1a1f044910fb9ed5a09b7124892b35aae', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '2a217a213bb99d85f23d22a045317d4c0b28d47d', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'b286a98fe49f0112f85ab1c1467c83442ba24eee', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '7ca13c72b24b6ed4b8b9a37fc3a16786abda5cc6' }), h("span", { key: 'ef0873457b1a239d43fa2a2a60ab6a8c3cfc6b94', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '77b745f51b535685987767788a059036730c0788', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '126ab7bb76240a4da7d9b647955a8a804875e375', class: "duet-fieldset-label" }, h("span", { key: 'ff60e083f1776471163c59d196d5a98e32279456', "aria-hidden": "true" }, this.label), h("slot", { key: '06eb238c6e9921dca17ca43ae38a1de2351af119', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5a7a0bcb4167f6ffbf89880060e05f82e032012b', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '7781c0787fe4ff082d80e9bc2e7ea2280da13d7e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'd6227947f219d39ca25e5a3ac582e4459e58d504' }), h("span", { key: 'ecf7f364237951e9bceacf067e854118b5676009', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'e7a456498d709f36eba051c5ce891f5b9b39c5fb', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4d170d8c612af35b7530f97ab4fff187e68f2318', style: {
+        return (h(Host, { key: '116018aebb0122341885d5c189c49e80651a9c8d', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: '7c6e04ce84dd74448415c4ad01d11f825fd2cdfb' })));
+            } }, h("slot", { key: '8f0abe7f48298866dc52e646b8d08bbeaf4ce234' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1227,6 +1227,9 @@ button {
 :host(.duet-theme-turva2) .duet-theme-turva .duet-header-top .duet-header-region {
   border-color: #b2c2cd;
 }
+:host(.duet-theme-turva2) .duet-theme-turva .duet-header-top duet-logo {
+  margin-top: 0 !important;
+}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-header-bottom {
   background: #fdf7f2;
 }

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

@@ -15,6 +15,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
+import { postfixTheme } from "../../utils/token-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
 import { DuetHeaderIcon } from "./duet-header-icon";
@@ -516,7 +517,7 @@ export class DuetHeader {
         const skipToLabel = () => this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
         const logo = () => (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
         const largeLogo = () => (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-        const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: this.theme === "turva" ? "primary-turva" : "primary" }))))))))) : null;
+        const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" }, item.label, Build.isBrowser && item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-header-link-external" }, h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: postfixTheme("primary", this.theme) }))))))))) : null;
         const languageDropdown = () => this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
         const processedUserWithLink = () => this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
         const processedUserWithoutLink = () => this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" }, h(DuetHeaderIcon, { icon: userIcon.svg }), h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
@@ -530,7 +531,7 @@ export class DuetHeader {
                     "duet-theme-turva": this.theme === "turva",
                     "duet-header-back": true,
                     "duet-header-inactive": true,
-                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: this.theme === "turva" ? "secondary-turva" : "secondary", icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
+                }, part: "header" }, h("div", { class: "duet-header-top" }, skipToLabel(), h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: postfixTheme("secondary", this.theme), icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label), logo(), h("slot", { name: "logo-utility" }))))));
         }
         const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
         const isSecondLevelActive = this.processedItems &&

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

@@ -324,4 +324,9 @@
 }
 :host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-has-background {
   color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-icon.duet-theme-turva.duet-icon-shape-brand {
+  -webkit-mask-image: none;
+  mask-image: none;
+  border-radius: 16%;
 }

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

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

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

@@ -42,7 +42,7 @@ export class DuetLabel {
         if (Build.isServer) {
             return;
         }
-        const color = getColorByName(this.color);
+        const color = getColorByName(this.color, this.theme);
         return (h(Host, { class: {
                 "duet-label": true,
                 "duet-label-small": this.size === "small",

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

@@ -178,12 +178,13 @@ export class DuetLink {
      * Always the last one in the class.
      */
     render() {
-        const Tag = !this.url ? "button" : "a";
+        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: 'a9fddd138f64a17b494e02bcefc679cd1a0d4051', class: {
+        return (h(Host, { key: 'eae1c61afe3b8413b109313020b9757cfe7f2e42', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'c8cbf018a9ab3660f0c32053503c82fe725d41cd', href: this.url, class: {
+            } }, h(Tag, { key: '973984aeb4ef7dd331df49218b1552a4955b80c2', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -194,7 +195,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.ariaLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.ariaLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined, role: role }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     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: '8b3943e8c6c0ff91b8405bfedb46b4612da7451b', class: {
+        return (h(Host, { key: '47185c0399f547a7d80ac43adf617b617e33e604', 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: '587ef41965121757aa51fc12391e17fd7f5563fd' }, h("slot", { key: '466137ac7d5182f8d0223429f0c5159677d4330b', name: "label" })), h("dd", { key: '4f85ab7cd34ecf8d528857c07e214dbd023d0465' }, h("slot", { key: '3d270b99641b4b152556402d5818216f6d34c5fa', name: "value" }))));
+            } }, h("dt", { key: '6ae3c144789f6f61efd296b660b88b180a5e0e38' }, h("slot", { key: 'c33e76c13b822b05a938e421d6eb53ef95e403f7', name: "label" })), h("dd", { key: '31bda43d4a91ec3b4a44746a0ddde2f7b91845c2' }, h("slot", { key: 'c1ce54a0b9a7dd7256a7dcf3a32bef70bb063621', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,6 +77,10 @@
   width: 149.6px;
   height: 54.4px;
 }
+.duet-logo.duet-logo-only-symbol {
+  width: 28px;
+  height: 28px;
+}
 
 :host(.duet-theme-turva2) .duet-logo {
   width: 92px;
@@ -85,4 +89,8 @@
 :host(.duet-theme-turva2) .duet-logo.large {
   width: 124.3243243243px;
   height: 30px;
+}
+:host(.duet-theme-turva2) .duet-logo.duet-logo-only-symbol {
+  width: 28px;
+  height: 28px;
 }

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

@@ -2,17 +2,34 @@
  * Built with Duet Design System
  */
 import { colorBrandGrayTurva, colorGrayLightest, colorPrimary, colorPrimaryTurva } from "@duetds/tokens";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+const getTurva2 = () => { var _a; return (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"); };
 const TurvaLogo = ({ inverse, logoId }) => {
-    var _a;
     const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
     const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
     const turva2LogoColor = inverse ? colorGrayLightest : "#e61740"; // turva2-red-600 - hard coded as not yet available as token
+    const isTurva2 = getTurva2();
+    return isTurva2 ? (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 460 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: turva2LogoColor, d: "M376.31,6.532L353.12,6.532C351.181,6.585 348.968,6.454 348.169,8.504L335.005,45.585C335.005,45.585 332.621,52.566 331.6,56.371C330.84,59.194 327.113,59.305 326.432,56.299C325.588,52.559 323.119,45.637 323.119,45.637L311.311,9.316C310.439,6.572 308.979,6.539 306.53,6.539L279.678,6.539C277.262,6.539 277.537,7.803 277.963,8.884L313.177,98.22C314.323,101.049 315.633,101.455 317.945,101.455L338.98,101.455C341.869,101.455 342.707,99.195 343.132,98.22L378.425,9.715C378.773,8.818 379.362,6.539 376.297,6.539L376.31,6.532Z" }), h("path", { fill: turva2LogoColor, d: "M459.516,96.346C454.277,83.268 433.732,31.15 425.821,9.722C424.662,6.821 423.686,6.539 421.689,6.539L399.651,6.539C397.647,6.539 396.783,7.541 395.885,9.925C387.024,33.495 362.341,94.31 361.535,96.346C360.704,98.455 360.717,101.455 363.277,101.455L387.358,101.455C389.52,101.455 389.827,100.63 391.032,98.22C391.36,97.558 394.097,91.461 395.034,89.103C395.329,88.357 396.049,87.872 396.848,87.872L422.298,87.813C423.084,87.813 423.791,88.271 424.099,88.992C425.225,91.605 428.598,98.815 428.932,99.621C429.574,101.167 430.235,101.455 432.095,101.455L457.768,101.455C460.328,101.455 460.341,98.455 459.51,96.346L459.516,96.346ZM417.916,66.253L402.559,66.286C401.144,66.286 400.463,65.075 400.974,63.529C401.308,62.52 408.224,43.574 408.551,42.611C408.551,42.592 408.571,42.579 408.584,42.559C408.925,41.485 409.272,40.365 409.501,39.507C409.809,38.354 411.452,38.387 411.714,39.553C411.898,40.352 412.376,41.937 412.52,42.408C413.064,44.209 419.449,63.313 419.508,63.49C420.019,65.035 419.344,66.247 417.923,66.247L417.916,66.253Z" }), h("path", { fill: turva2LogoColor, d: "M162.312,28.57L162.312,27.3C162.312,25.734 163.838,24.719 165.122,25.44C168.953,27.575 173.662,29.389 178.96,30.843C179.432,30.974 179.897,30.613 179.897,30.129L179.897,9.748C179.897,7.148 179.327,6.46 176.616,6.46L153.15,6.46C150.432,6.46 149.869,7.148 149.869,9.748L149.869,60.327C149.869,75.547 142.207,78.356 136.457,78.356C130.707,78.356 123.031,74.99 123.031,60.327L123.031,9.748C123.031,7.148 122.461,6.46 119.75,6.46L96.311,6.46C93.593,6.46 93.03,7.148 93.03,9.748L93.03,65.599C93.03,99.621 125.493,104.618 136.496,104.618C149.057,104.618 179.897,100.158 179.897,65.599L179.897,51.511C179.897,50.974 179.602,50.483 179.13,50.215C169.019,44.504 162.306,36.553 162.306,28.563L162.312,28.57Z" }), h("path", { fill: turva2LogoColor, d: "M282.593,98.252C279.561,93.989 261.976,67.203 261.976,67.203C258.662,62.213 263.967,65.854 271.472,55.546C283.497,39.022 275.684,11.68 252.166,7.823C244.025,6.153 235.492,6.467 231.025,6.467L199,6.467C196.282,6.467 195.719,7.155 195.719,9.755L195.719,33.338C195.719,33.718 196.001,34.039 196.381,34.078C201.371,34.628 206.558,34.91 211.817,34.91C230.174,34.91 247.771,31.432 258.512,25.446C259.795,24.732 261.321,25.741 261.321,27.306L261.321,28.577C261.321,43.666 237.417,58.604 211.817,58.604C206.623,58.604 201.502,57.989 196.63,56.882C196.165,56.777 195.719,57.124 195.719,57.602L195.719,98.174C195.719,100.774 196.289,101.461 199,101.461L221.739,101.461C224.457,101.461 225.02,100.774 225.02,98.174L225.039,71.047C225.039,69.954 229.44,70.111 230.776,71.702C235.086,76.843 242.899,92.928 246.547,96.857C248.852,99.346 253.011,101.461 260.287,101.461L278.958,101.461C281.231,101.461 283.765,99.916 282.586,98.265L282.593,98.252Z" }), h("path", { fill: turva2LogoColor, d: "M77.377,6.388L3.281,6.388C0.563,6.388 0,7.076 0,9.676L0,31.556C0,33.809 0,34.7 2.331,34.7L24.297,34.7C26.432,34.7 26.491,35.46 26.491,37.359L26.504,98.174C26.504,100.774 27.074,101.461 29.785,101.461L51.24,101.461C53.958,101.461 54.521,100.774 54.521,98.174L54.521,37.221C54.521,35.427 54.632,34.7 56.715,34.7L78.026,34.7C80.161,34.7 80.665,33.665 80.665,31.936L80.665,9.682C80.665,7.083 80.095,6.395 77.384,6.395L77.377,6.388Z" }))) : (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }), h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }), h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
+};
+const TurvaLogoSymbol = ({ inverse, logoId }) => {
+    var _a;
+    const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
+    const turva2LogoColor = inverse ? colorGrayLightest : "#e61740"; // turva2-red-600 - hard coded as not yet available as token
     const isTurva2 = (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2");
-    return isTurva2 ? (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 460 111" }, h("path", { fill: turva2LogoColor, d: "M376.31,6.532L353.12,6.532C351.181,6.585 348.968,6.454 348.169,8.504L335.005,45.585C335.005,45.585 332.621,52.566 331.6,56.371C330.84,59.194 327.113,59.305 326.432,56.299C325.588,52.559 323.119,45.637 323.119,45.637L311.311,9.316C310.439,6.572 308.979,6.539 306.53,6.539L279.678,6.539C277.262,6.539 277.537,7.803 277.963,8.884L313.177,98.22C314.323,101.049 315.633,101.455 317.945,101.455L338.98,101.455C341.869,101.455 342.707,99.195 343.132,98.22L378.425,9.715C378.773,8.818 379.362,6.539 376.297,6.539L376.31,6.532Z" }), h("path", { fill: turva2LogoColor, d: "M459.516,96.346C454.277,83.268 433.732,31.15 425.821,9.722C424.662,6.821 423.686,6.539 421.689,6.539L399.651,6.539C397.647,6.539 396.783,7.541 395.885,9.925C387.024,33.495 362.341,94.31 361.535,96.346C360.704,98.455 360.717,101.455 363.277,101.455L387.358,101.455C389.52,101.455 389.827,100.63 391.032,98.22C391.36,97.558 394.097,91.461 395.034,89.103C395.329,88.357 396.049,87.872 396.848,87.872L422.298,87.813C423.084,87.813 423.791,88.271 424.099,88.992C425.225,91.605 428.598,98.815 428.932,99.621C429.574,101.167 430.235,101.455 432.095,101.455L457.768,101.455C460.328,101.455 460.341,98.455 459.51,96.346L459.516,96.346ZM417.916,66.253L402.559,66.286C401.144,66.286 400.463,65.075 400.974,63.529C401.308,62.52 408.224,43.574 408.551,42.611C408.551,42.592 408.571,42.579 408.584,42.559C408.925,41.485 409.272,40.365 409.501,39.507C409.809,38.354 411.452,38.387 411.714,39.553C411.898,40.352 412.376,41.937 412.52,42.408C413.064,44.209 419.449,63.313 419.508,63.49C420.019,65.035 419.344,66.247 417.923,66.247L417.916,66.253Z" }), h("path", { fill: turva2LogoColor, d: "M162.312,28.57L162.312,27.3C162.312,25.734 163.838,24.719 165.122,25.44C168.953,27.575 173.662,29.389 178.96,30.843C179.432,30.974 179.897,30.613 179.897,30.129L179.897,9.748C179.897,7.148 179.327,6.46 176.616,6.46L153.15,6.46C150.432,6.46 149.869,7.148 149.869,9.748L149.869,60.327C149.869,75.547 142.207,78.356 136.457,78.356C130.707,78.356 123.031,74.99 123.031,60.327L123.031,9.748C123.031,7.148 122.461,6.46 119.75,6.46L96.311,6.46C93.593,6.46 93.03,7.148 93.03,9.748L93.03,65.599C93.03,99.621 125.493,104.618 136.496,104.618C149.057,104.618 179.897,100.158 179.897,65.599L179.897,51.511C179.897,50.974 179.602,50.483 179.13,50.215C169.019,44.504 162.306,36.553 162.306,28.563L162.312,28.57Z" }), h("path", { fill: turva2LogoColor, d: "M282.593,98.252C279.561,93.989 261.976,67.203 261.976,67.203C258.662,62.213 263.967,65.854 271.472,55.546C283.497,39.022 275.684,11.68 252.166,7.823C244.025,6.153 235.492,6.467 231.025,6.467L199,6.467C196.282,6.467 195.719,7.155 195.719,9.755L195.719,33.338C195.719,33.718 196.001,34.039 196.381,34.078C201.371,34.628 206.558,34.91 211.817,34.91C230.174,34.91 247.771,31.432 258.512,25.446C259.795,24.732 261.321,25.741 261.321,27.306L261.321,28.577C261.321,43.666 237.417,58.604 211.817,58.604C206.623,58.604 201.502,57.989 196.63,56.882C196.165,56.777 195.719,57.124 195.719,57.602L195.719,98.174C195.719,100.774 196.289,101.461 199,101.461L221.739,101.461C224.457,101.461 225.02,100.774 225.02,98.174L225.039,71.047C225.039,69.954 229.44,70.111 230.776,71.702C235.086,76.843 242.899,92.928 246.547,96.857C248.852,99.346 253.011,101.461 260.287,101.461L278.958,101.461C281.231,101.461 283.765,99.916 282.586,98.265L282.593,98.252Z" }), h("path", { fill: turva2LogoColor, d: "M77.377,6.388L3.281,6.388C0.563,6.388 0,7.076 0,9.676L0,31.556C0,33.809 0,34.7 2.331,34.7L24.297,34.7C26.432,34.7 26.491,35.46 26.491,37.359L26.504,98.174C26.504,100.774 27.074,101.461 29.785,101.461L51.24,101.461C53.958,101.461 54.521,100.774 54.521,98.174L54.521,37.221C54.521,35.427 54.632,34.7 56.715,34.7L78.026,34.7C80.161,34.7 80.665,33.665 80.665,31.936L80.665,9.682C80.665,7.083 80.095,6.395 77.384,6.395L77.377,6.388Z" }))) : (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }), h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }), h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
+    return isTurva2 ? (h("svg", { id: "a", xmlns: "http://www.w3.org/2000/svg", width: "500", height: "500", viewBox: "0 0 500 500" }, h("title", { id: logoId }, "Turva"), h("circle", { cx: "250", cy: "250", r: "250", fill: turva2LogoColor }), h("path", { d: "M346.35,113.78h-190.26c-6.97,0-8.43,1.76-8.43,8.44v.19s0,55.98,0,55.98c0,5.78,0,8.06,5.98,8.06h51.63c5.49,0,5.63,1.95,5.63,6.82l.03,94.19c0,6.68,1.46,8.44,8.43,8.44h64.6c6.97,0,8.43-1.76,8.43-8.44v-94.53c0-5.51.98-6.47,6.43-6.47h49.17c5.49,0,6.78-2.66,6.78-7.1v-57.14c0-6.68-1.46-8.44-8.43-8.44Z", fill: "#fff" }), h("path", { d: "M250,339.02c-62.43,0-122.26-11.83-158.77-32.18-4.37-2.44-9.56,1.01-9.56,6.33v4.32c0,51.3,81.28,102.09,168.33,102.09s168.33-50.79,168.33-102.09v-4.32c0-5.32-5.18-8.76-9.56-6.33-36.51,20.35-96.34,32.18-158.77,32.18Z", fill: "#fff" }))) : (h("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("title", { id: logoId }, "Turva"), h("path", { d: "M9.56842 10.8425V14.8074H17.259V27.617C16.2117 27.867 15.1199 28 13.9966 28C6.2665 28 0 21.7324 0 14C0 6.26802 6.2665 0 13.9966 0C20.6416 0 26.2045 4.63095 27.6359 10.8425H9.56842Z", fill: logoColor }), h("path", { d: "M27.9695 14.8073C27.7012 19.5272 25.0971 23.6203 21.2944 25.9486V14.8073H27.9695Z", fill: logoColor })));
+};
+const ltTitle = {
+    fi: "LähiTapiola",
+    sv: "LokalTapiola",
+    en: "LocalTapiola",
+};
+const DefaultLogoSymbol = ({ inverse, logoId, language }) => {
+    const logoColor = inverse ? colorGrayLightest : colorPrimary;
+    const title = ltTitle[language];
+    return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 81 81" }, h("title", { id: logoId }, title), h("path", { fill: logoColor, d: "M5.164,53.864C-1.721,46.977 -1.721,35.816 5.164,28.927L28.93,5.164C34.364,-0.27 42.466,-1.417 49.024,1.73L48.979,1.773L48.921,1.83L25.541,25.21L25.484,25.268C23.198,27.554 23.198,31.262 25.484,33.548C27.77,35.834 31.478,35.834 33.766,33.548L37.915,29.396C40.257,27.055 42.595,27.011 44.631,29.049L53.557,37.931C55.983,40.356 56.229,42.367 53.557,45.036L45.102,53.492C42.757,55.834 40.553,56.052 37.995,53.492L21.766,37.262C19.481,34.979 15.773,34.979 13.487,37.265C11.201,39.551 11.201,43.258 13.487,45.544L34.13,66.187C38.183,70.239 44.747,70.239 48.798,66.186L66.25,48.734C70.302,44.685 70.302,38.117 66.25,34.064L52.918,20.735C50.836,18.65 51.023,16.29 53.139,14.175L57.431,9.882C57.626,9.685 57.803,9.478 57.967,9.264L74.647,25.946C83.18,34.479 83.18,48.314 74.647,56.844L56.85,74.644C48.314,83.179 34.48,83.179 25.946,74.644L5.164,53.864Z" })));
 };
 const i18n = {
     fi: {
@@ -42,6 +59,7 @@ export class DuetLogo {
          * Own Properties.
          */
         this.logoId = createID("DuetLogo");
+        this.isTurva2 = false;
         /**
          * Theme of the logo.
          */
@@ -80,6 +98,14 @@ export class DuetLogo {
          * @default "fi"
          */
         this.language = getLanguage();
+        /**
+         * @internal
+         * Renders only the symbol
+         */
+        this.onlySymbol = false;
+    }
+    setTurva2State() {
+        this.isTurva2 = getTurva2();
     }
     /**
      * Component lifecycle events.
@@ -89,9 +115,23 @@ export class DuetLogo {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
+        if (!Build.isServer) {
+            this.classMutationObserver = new MutationObserver(this.setTurva2State.bind(this));
+            this.classMutationObserver.observe(this.element, {
+                subtree: false,
+                childList: false,
+                characterData: false,
+                attributes: true,
+                attributeFilter: ["class"],
+                attributeOldValue: true,
+            });
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        if (!Build.isServer) {
+            this.classMutationObserver.disconnect();
+        }
     }
     /**
      * Sets focus on the specified `duet-logo`. Use this method instead of the global
@@ -108,13 +148,14 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '79e576b071b49326a95d2d5ab7c6e113d1688670', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '41f68531196f1418719916208cd9a223f98813b7', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'ee59f65171b71ff2296eb5ee774b83710183aaf5', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'a07977483cf71755d653ba0ed887c2fb46c9df37', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
+                "duet-logo-only-symbol": this.onlySymbol,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-logo-en": this.language === "en",
                 "duet-logo-sv": this.language === "sv",
-            } }, this.theme === "turva" ? (h(TurvaLogo, { logoId: this.logoId, inverse: this.inverse })) : (h(DefaultLogo, { logoId: this.logoId, inverse: this.inverse, language: this.language })))));
+            } }, this.theme === "turva" ? (this.onlySymbol ? (h(TurvaLogoSymbol, { logoId: this.logoId, inverse: this.inverse })) : (h(TurvaLogo, { logoId: this.logoId, inverse: this.inverse }))) : this.onlySymbol ? (h(DefaultLogoSymbol, { logoId: this.logoId, inverse: this.inverse, language: this.language })) : (h(DefaultLogo, { logoId: this.logoId, inverse: this.inverse, language: this.language })))));
     }
     static get is() { return "duet-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -324,9 +365,37 @@ export class DuetLogo {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "getLanguage()"
+            },
+            "onlySymbol": {
+                "type": "boolean",
+                "attribute": "only-symbol",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Renders only the symbol"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "isTurva2": {}
+        };
+    }
     static get methods() {
         return {
             "setFocus": {