@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -2,14 +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 }) => {
     const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
     const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
-    return (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 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", { 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: {
@@ -39,18 +59,53 @@ export class DuetLogo {
          * Own Properties.
          */
         this.logoId = createID("DuetLogo");
+        this.isTurva2 = false;
+        /**
+         * Theme of the logo.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Use inverse version of the logo (white logo on dark background).
+         */
         this.inverse = false;
+        /**
+         * Size variation of the logo.
+         */
         this.size = "medium";
+        /**
+         * Where the logo links to.
+         */
         this.href = "/";
+        /**
+         * Default translations for accessible label.
+         */
         this.accessibleLabelDefaults = {
             fi: "Siirry etusivulle.",
             sv: "Gå till förstasidan.",
             en: "Go to front page.",
         };
+        /**
+         * Accessible label. Defaults to what is in accessibleLabelDefaults prop.
+         */
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * The language of the logo.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * @internal
+         * Renders only the symbol
+         */
+        this.onlySymbol = false;
+    }
+    setTurva2State() {
+        this.isTurva2 = getTurva2();
     }
     /**
      * Component lifecycle events.
@@ -60,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
@@ -79,13 +148,15 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '755522a4d8a0d79b25a402de924b39757c3eff92', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '03328ec8c5569b1f4203846cbbdc3014028a36ea', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '9aa8d797449d771c669f1b489937b72f4f334346', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'e217a8575a7d1511925d6d3f53c57463f8569cc5', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
+                "duet-logo-inverse": this.inverse,
+                "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"; }
@@ -103,6 +174,7 @@ export class DuetLogo {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -123,12 +195,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -149,12 +221,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "inverse": {
                 "type": "boolean",
+                "attribute": "inverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -169,12 +241,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverse",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLogoSize",
@@ -195,12 +267,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -215,12 +287,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": true,
                 "defaultValue": "\"/\""
             },
             "accessibleLabelDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-defaults",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -245,6 +317,7 @@ export class DuetLogo {
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -259,12 +332,12 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -291,12 +364,39 @@ export class DuetLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "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": {

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

@@ -4,24 +4,28 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 .duet-menu-bar {
@@ -76,7 +80,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 +95,7 @@
 .duet-menu-bar.horizontal-nav .more-right {
   position: absolute;
   top: 0;
-  right: -1px;
+  right: 0;
   z-index: 1;
   width: 56px;
   height: 49px;
@@ -129,6 +133,32 @@
   width: 0;
   height: 0;
 }
+.duet-menu-bar .container duet-logo.large,
+.duet-menu-bar .container duet-logo.only-symbol {
+  display: none;
+}
+.duet-menu-bar .container.with-info-text duet-logo.medium {
+  display: none;
+}
+.duet-menu-bar .container.with-info-text duet-logo.only-symbol {
+  display: block;
+}
+@media (min-width: 48em) {
+  .duet-menu-bar .container.with-info-text duet-logo.medium {
+    display: block;
+  }
+  .duet-menu-bar .container.with-info-text duet-logo.only-symbol {
+    display: none;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-menu-bar .container duet-logo.medium {
+    display: none;
+  }
+  .duet-menu-bar .container duet-logo.large {
+    display: block;
+  }
+}
 @media (min-width: 62em) {
   .duet-menu-bar .container {
     height: 5rem;
@@ -150,13 +180,26 @@
   height: 100%;
 }
 .duet-menu-bar .container > :first-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-start;
+  width: auto;
+  height: 40px;
+}
+@media (min-width: 76.25em) {
+  .duet-menu-bar .container > :first-child {
+    height: 48px;
+  }
+}
+.duet-menu-bar .container > :first-child:has(.duet-logo-info-text) {
+  flex-grow: 8;
+}
+.duet-menu-bar .container > :first-child:has(.duet-logo-info-text) duet-paragraph {
+  max-height: 100%;
 }
 .duet-menu-bar .container > :last-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-end;
 }
 .duet-menu-bar .container ::slotted(*) {
@@ -165,6 +208,34 @@
   justify-content: center;
   height: 100%;
 }
+.duet-menu-bar .container .duet-logo-info-text {
+  max-height: 2.8875rem;
+  padding-left: 16px;
+  margin-left: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  color: rgb(62, 84, 102);
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  border-left: 1px solid rgb(212, 223, 229);
+}
+.duet-menu-bar .container .duet-logo-info-text.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(71, 78, 101);
+  border-left-color: rgb(222, 224, 228);
+}
+@media (min-width: 48em) {
+  .duet-menu-bar .container .duet-logo-info-text {
+    max-height: 3.3rem;
+    font-size: 1rem;
+  }
+}
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
   box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);
@@ -174,6 +245,26 @@
     box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
 }
+.duet-menu-bar.duet-menu-bar-slim .container duet-logo.medium {
+  display: block;
+}
+.duet-menu-bar.duet-menu-bar-slim .container duet-logo.large {
+  display: none;
+}
+.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium {
+  display: none;
+}
+.duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol {
+  display: block;
+}
+@media (min-width: 48em) {
+  .duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.medium {
+    display: block;
+  }
+  .duet-menu-bar.duet-menu-bar-slim .container.with-info-text duet-logo.only-symbol {
+    display: none;
+  }
+}
 @media (min-width: 62em) {
   .duet-menu-bar.duet-menu-bar-slim .container {
     height: 4rem;
@@ -200,4 +291,15 @@
 .duet-theme-turva .right {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .center {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .right {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text {
+  color: rgb(53, 79, 101);
+  border-left-color: rgb(212, 221, 226);
 }