@duetds/components 9.12.2 → 9.13.0

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

@@ -102,11 +102,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: '7c3946b2a0a32d4db77a562b34e11e3d25b06c8a', class: {
+        return (h(Host, { key: '94bf4741af1d392b8fe4900a1e664e340f3fee89', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'c350d54898ee66594fd5825eb2b9cc72dea28e58', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: 'f53d65724789fb4b1c2dc689a8b754870c082094', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -115,7 +115,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '8cfefce3649e521e715779b736b5f3842a6ce6c1', "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: 'ee9df8b00f92eab8dc364e15db86d954a936e15b', "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-link/duet-link.js

@@ -122,10 +122,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '4a88142674554658affc1d30f3768a219fe6cf81', class: {
+        return (h(Host, { key: 'cd7310c88a581cfb5afd755bc4cd1b03f68c67d2', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'af4ce006460b99458976ab723981aeefc1cd0c84', href: this.url, class: {
+            } }, h(Tag, { key: 'fb5d0c7cdc5bfe931be67c3a685934d5f2f979b7', 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-item/duet-list-item.js

@@ -21,7 +21,7 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6c13dd9dfcc83c4c21a09accb3d1263e51ef7685', class: {
+        return (h(Host, { key: '99e9fde88b277b57fe0eb123a4a9393665fc5c3b', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -29,7 +29,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: 'db16f474643cbb2a074de19ed7a4a4ccfb302e4f' }, h("slot", { key: '1ca0f7fe8ac90882c0835df5e8d907eeb743fb47', name: "label" })), h("dd", { key: 'f4d207347f0995fe1188503a13b45adcacc39ad5' }, h("slot", { key: 'dbbcde25c28d4c8f5019c5a6ff90af3e3254965b', name: "value" }))));
+            } }, h("dt", { key: 'd28e5c24d737ac46d7b11a0babf2b9842cbe60a5' }, h("slot", { key: '197933a372139678a7e2e5cb5d78412e5d49835d', name: "label" })), h("dd", { key: 'ba1679ecc75e002e8fe7038d4c0ca97ca19e64aa' }, h("slot", { key: '9dbe5076b03b9791f55c9172609a42f050931c1a', 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;
         this.theme = "";
         this.margin = "auto";
         this.inverse = false;
@@ -54,6 +72,10 @@ export class DuetLogo {
         };
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
         this.language = getLanguage();
+        this.onlySymbol = false;
+    }
+    setTurva2State() {
+        this.isTurva2 = getTurva2();
     }
     /**
      * Component lifecycle events.
@@ -63,9 +85,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
@@ -82,13 +118,14 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: 'e2be654fa774bc533a7a4a4b1a983368901e1d42', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '8a5fc145b623f33eb5ec1526b0b5b90f5c6ff7fa', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: 'd13dacb8208ebc04186228277d6a0eb4ef3cfeb7', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '92f33026307d3230324abdc39694b7a5207c04c3', 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"; }
@@ -297,9 +334,37 @@ export class DuetLogo {
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
+            },
+            "onlySymbol": {
+                "type": "boolean",
+                "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,
+                "attribute": "only-symbol",
+                "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

@@ -129,6 +129,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;
@@ -153,6 +179,19 @@
   flex-basis: 0;
   flex-grow: 1;
   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;
@@ -165,6 +204,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;
+  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;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  line-height: 1.1;
+  color: rgb(62, 84, 102);
+  text-overflow: ellipsis;
+  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 +241,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;
@@ -207,4 +294,8 @@
 }
 :host(.duet-theme-turva2) .duet-theme-turva .right {
   color: #172a3b;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text {
+  color: #354f65;
+  border-left-color: #d4dde2;
 }

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

@@ -1,7 +1,6 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLanguage } from "../../utils/language-utils";
@@ -11,14 +10,6 @@ import { getLanguage } from "../../utils/language-utils";
  */
 export class DuetMenuBar {
     constructor() {
-        /**
-         * Own Properties.
-         */
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_xx_large.replace(/'/g, "")),
-        ];
-        this.boundMqlFunctions = [];
         this.previousYScroll = 0;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
@@ -46,15 +37,6 @@ export class DuetMenuBar {
             const centerSlot = this.element.querySelector('[slot="center"]');
             this.centerSlotUsed = !!centerSlot;
         };
-        this.changeLogoSize = () => {
-            this.checkCenterSlot();
-            if (this.mql[1].matches && this.centerSlotUsed) {
-                this.logoSize = "large";
-            }
-            else {
-                this.logoSize = "medium";
-            }
-        };
         this.handleLogoClick = (e) => {
             this.duetEvent.emit({
                 name: "logoClick",
@@ -71,11 +53,13 @@ export class DuetMenuBar {
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
         this.centerSlotUsed = false;
+        this.mediaQueryMediumMatches = false;
         this.theme = "";
         this.language = getLanguage();
         this.logo = true;
         this.logoHref = undefined;
         this.logoLinkAccessibleLabel = undefined;
+        this.logoInfoText = undefined;
         this.accessibleLabel = undefined;
         this.hideOnScroll = false;
     }
@@ -111,26 +95,8 @@ export class DuetMenuBar {
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        this.changeLogoSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeLogoSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
         this.checkCenterSlot();
     }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     componentDidLoad() {
         if (Build.isServer || Build.isTesting) {
             return;
@@ -154,14 +120,17 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '664846aed5fa5418883aa8e7d285f43bca31b9b7' }, h("nav", { key: '67eb2be48aa07d8839de507ac2e7a3d549a7bf1b', class: {
+        return (h(Host, { key: '5f05a259d0950cb2cdbc37222b1007ba49d5fe53' }, h("nav", { key: '24398b2d0d6d01c22eef86430e0f7db7c6b97171', 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: 'e4cb471892ccd3b07e2ba137cfe5f09d2aede935', class: "top" }), h("div", { key: 'a3956e49657add3b004a7f48c1039c95e768cf3f', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daa83bf253d89d2691a128d4449ec3bd27a0fd1c' }, h("duet-logo", { key: '519732ee4b3a9e8db70315d561859b569c3acf9d', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '7baa6a6cfbfcfe80e4965d9a2ba8fbd5c2e908fb', class: "list center", role: "list" }, h("div", { key: '214ec3b02204a0ff8f09f5ebe8545b3b52e4b27a', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '8f039e09a7b69764151356d5697a2ab65e7b5a2e', name: "center" }), h("div", { key: '25fb60d81a3cb648049e51f9497282feddf24d48', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b86943b205d836a309c61260e20599ff95bf1a1a', class: "list right", role: "list" }, h("slot", { key: '16eaaf4fb82ae25c9fd3d8324134f100b0b77c19', name: "right" }))), h("div", { key: '637eb362a07458d226c916447385262fb2b0c32d', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'abf2962527bf92ead5a89f8648ff3b88a73fbc55', class: "top" }), h("div", { key: '068d450752f636f98e7cdeb5043e6bf9297b4c3d', class: { container: true, "with-info-text": !!this.logoInfoText && !this.centerSlotUsed }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '7e5b816d6ae4e36268ee911cadf56358a864e264' }, h("duet-logo", { key: 'c1a02ba4230ab960c1e01d20636a23d015823580', class: "medium", size: "medium", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'fa3ba5116af9eecd8d886f546c4bdef922bbdd4d', class: "large", size: "large", margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), h("duet-logo", { key: 'a3593373202664a79f8095931fa53d72e1f6c188', class: "only-symbol", onlySymbol: true, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }), this.logoInfoText && !this.centerSlotUsed && (h("div", { key: 'ebf9c252a82db480eff2fca195f87dfcd2a186f4', class: {
+                "duet-logo-info-text": true,
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.logoInfoText)))), h("div", { key: '980619619bf98cc80c36dc5c8d27042f97ff492d', class: "list center", role: "list" }, h("div", { key: 'b6f5e67dd04a56da886a3795b21b2f3f4d7e0393', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'f5bc728c183398eba439475b6a29771476944b5b', name: "center" }), h("div", { key: 'bf7274db341938f7f0a8fa7784985a6239a5fcc6', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '6e3343fcef3b45b1a6e741c673d072b994cf4110', class: "list right", role: "list" }, h("slot", { key: '3a76e5089f8cc4a1e04786a61c2f8e9cb1160426', name: "right" }))), h("div", { key: '6041af35982542751bb94df6ebc8725dd17a6349', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -293,6 +262,25 @@ export class DuetMenuBar {
                 "attribute": "logo-link-accessible-label",
                 "reflect": false
             },
+            "logoInfoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional information text to show next to the logo. Show only when the center slot is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "logo-info-text",
+                "reflect": false
+            },
             "accessibleLabel": {
                 "type": "string",
                 "mutable": false,
@@ -341,7 +329,8 @@ export class DuetMenuBar {
             "logoSize": {},
             "leftMoreVisible": {},
             "rightMoreVisible": {},
-            "centerSlotUsed": {}
+            "centerSlotUsed": {},
+            "mediaQueryMediumMatches": {}
         };
     }
     static get events() {

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: '50f598983e907d97ef1316160ee05bfd3fa162d4', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '1107dec87cb815440ec64f4a87cb16d256a9d35a', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '2df6c1b32a0a028fd5a562baa4733c2dfef93af6', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '364c82e9d7ef3b5aed9f7df9608e234f474834cd', 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: 'abe6328ef09cfb22c2901b72b93b3cdf7b4b5471', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e2f0498c80acf9f4047b46566fc9d68f70f59726' }))));
+            }, "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: 'a143660e0d58efd3eea99181d39e183c2ad2cffe', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '121e0ad7aeb96564c2bbdf6d07c05b4502532eac' }))));
     }
     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: 'edccb5f70ded057833cc2daa2a9e5122fcf693b0', role: "listitem" }, h("div", { key: 'd40f575e077c90cf83800312ee3ab06ac9562dd2', class: {
+        return (h(Host, { key: '50016c8e96de112a895ab6c1a619cd51db1a1144', role: "listitem" }, h("div", { key: '84f1d55a04eb2ce6da85eaa3a2098709d72f904a', 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: 'be04861fb3c8c5e3f0fe82672151e7a194115a66', 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: '635deadc4d4430289b7b0b9457d621caef017ee8', 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: 'a7f63c0c5c011afaec3755be92610be9cbf13000', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '62b2d4b3c6adc5aba4f07d628305d375ad079d82', class: "label" }, h("slot", { key: '89466557605d586e66bc4425cc60b9ca69436c02', name: "label" }), h("duet-icon", { key: '04c5c890603c2f2627e92efc3348addcd462799e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '310c646170237d500ed801356fe24891e6101803', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '199fc78e9de9a2411dbdcac2a7cf3cdd7741896c', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '47bf8dee8211ea4b73157c3ff6abb4d1765af81d', class: "label" }, h("slot", { key: 'cf7592834315d69ab2606208943b57c814c364df', name: "label" }), h("duet-icon", { key: '59f13d4cd703bb83c454fe4772beaceecff32186', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'ec6ee4c08d94947327d1414068ec363843d4abd7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'cc9c367154155a88ca285bb85e71f4da4f1aea99' })))));
+            } }, h("slot", { key: 'e5381a251537978629b818d3771f648122b39968' })))));
     }
     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: '6b17eecb66ad5162a6848b2f88445fa4fd72bb10' }, h("a", { key: '3b3d5c0b9e51f2186e3f9dd6c3fc9847555c543d', class: {
+        return (h(Host, { key: '586e3ed079d09bf899c1f02c3799e1d46f60bbef' }, h("a", { key: '4480061d9f4de3372052169867f6694c272498ff', 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: 'a79948b652be6b2ed15d4ad8728c1658bc1c061d', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'abe75d54c989cfcca99640f4f54bbb79869fa052' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '3dcfc8679e4a1454f6a50efb8aa277ad22faabff', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: 'c0d05484db5c3de1e32454f3c2025797e240bfcc' }))));
     }
     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: '78cb2d5a9f36203918418ade091de2156c3a290e', role: "listitem" }, h(TagName, { key: '90b92ad5dc5b77d425d19471f115aa94179428c4', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'f8206907f5f09a383f7a11536920b76490ac0eb4', role: "listitem" }, h(TagName, { key: '11894268ceca0e4efac53ea2bb9eb1cf61c84989', 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: '69d0ae59d451360c14945e1517c26e9d017f4d7a', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a7903797ed84cb566185ca79f8bacfae5d88bb28' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c300697850a2cd3bd6b9236e29be7433fcec7e45', 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: 'e7988c04b52df45cd3976e8f1532cad225b0b6ca', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'fbbf9404fa7b6d949c7d89bb478957eff14da090' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'c2c2f060f59df74561faba1bd596fa43caaa54a7', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a253a92fe5b3c7bd02870ef60733f31208778829', role: "listitem" }, h("a", { key: '6cc592290262edf3bf027c15be55aea0d05b2185', class: {
+        return (h(Host, { key: '5397f75d25382c49004777cc9673b92eb4ebb3c5', role: "listitem" }, h("a", { key: 'd5adf4f588f0108f4bfa82329e5499597e2efbae', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '8a6c8ee57536ab2a5edee32c75c86988277a7b49', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'f8c916a98522baae5e70febed4316c6cd3daa3dc' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '49866f87807a448bec494ece51eac8ba7cb525cf', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'e566b40e827773a58939b25a6f85b69b16aeb59b' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }