@duetds/components 6.8.6 → 6.8.8

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

@@ -48,7 +48,7 @@ export class DuetContactCard {
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
         "duet-contact-card": true,
         "duet-theme-turva": this.theme === "turva",
-      }, "aria-role": "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", null, this.name && (h("duet-heading", { class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { class: "call-to-action" }, h("duet-button", { variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", null), h("slot", null))));
+      }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", null, this.name && (h("duet-heading", { class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { class: "email" }, h("duet-icon", { name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { class: "phone" }, h("duet-icon", { name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { class: "call-to-action" }, h("duet-button", { variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", null), h("slot", null))));
   }
   static get is() { return "duet-contact-card"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -9,6 +9,8 @@ import { getLocaleString } from "../../utils/language-utils";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
+    this.hasHeadSlotFirst = false;
+    this.hasHeadSlotLast = false;
     this.sortableDefaultLabel = {
       fi: "Järjestä",
       en: "Click to sort",
@@ -58,6 +60,8 @@ export class DuetEditableTable {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
+    this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
   }
   createLabel(column) {
     const { sort_order, direction, index, label } = column;
@@ -149,7 +153,7 @@ export class DuetEditableTable {
         "duet-editable-table-actions": !!this.actions,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" }))), this.renderTableHeader(), h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" })))), h("tbody", null, this.renderTableBody()), h("tfoot", null, h("tr", null, h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" }))))))));
+      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), h("tfoot", null, h("tr", null, h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" }))))))));
   }
   static get is() { return "duet-editable-table"; }
   static get encapsulation() { return "scoped"; }

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

@@ -132,6 +132,9 @@
   position: absolute;
   right: 0;
   left: 0;
+  display: grid;
+  align-items: flex-start;
+  justify-content: center;
   overflow: hidden;
 }
 .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
@@ -144,7 +147,7 @@
 .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
   height: 100%;
 }
-@media (min-width: 106.25em) {
+@media (min-width: 1440px) {
   .duet-hero.duet-hero-campaign .background img, .duet-hero.duet-hero-section .background img {
     width: 100%;
     height: auto;
@@ -170,7 +173,7 @@
     height: 580px;
   }
 }
-@media (min-width: 106.25em) {
+@media (min-width: 1600px) {
   .duet-hero.duet-hero-campaign .background, .duet-hero.duet-hero-section .background {
     width: 1600px;
     overflow: hidden;
@@ -272,7 +275,21 @@
   .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
   .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
   .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
-    width: 65%;
+    width: 90%;
+  }
+}
+@media (min-width: 25em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
+    width: 80%;
+  }
+}
+@media (min-width: 30em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
+  .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
+    width: 70%;
   }
 }
 @media (min-width: 36em) {
@@ -413,13 +430,22 @@
     margin: 8rem 0 13rem;
   }
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-section .background img {
+    width: 100%;
+    height: auto;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-section .background {
+    width: 1400px;
     height: 436px;
+    overflow: hidden;
   }
 }
 @media (min-width: 76.25em) {
   .duet-hero.duet-hero-section .background {
+    width: 1536px;
     height: 516px;
   }
 }
@@ -431,38 +457,63 @@
 .duet-hero.duet-hero-product {
   position: relative;
   padding: 0 0 48px;
+  padding-top: 236px;
   margin: 0;
-  overflow: hidden;
   background: rgb(255, 255, 255);
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product {
+    padding-top: 250px;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product {
     min-height: 544px;
+    padding-top: 0;
+  }
+  .duet-hero.duet-hero-product.duet-hero-narrow {
+    padding-top: 200px;
   }
 }
+.duet-hero.duet-hero-product .background-area {
+  position: absolute;
+  top: -160px;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+}
 .duet-hero.duet-hero-product .background {
-  position: relative;
+  position: absolute;
+  top: 145px;
   width: 100%;
-  height: 236px;
+  overflow: visible;
 }
 .duet-hero.duet-hero-product .background .background-mask {
   display: none;
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product .background {
-    height: 290px;
+    top: 130px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background {
+    top: 35px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background.narrow {
+    top: 140px;
   }
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-product .background:not(.narrow) {
     position: absolute;
-    top: 0;
     right: 0;
     left: 0;
     max-width: 1440px;
     height: 100%;
     margin: 0 auto;
-    overflow: visible;
   }
 }
 .duet-hero.duet-hero-product .background .brand-shaped-image {
@@ -625,6 +676,24 @@
   max-width: 100%;
   margin: 0 auto;
 }
+.duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
+  margin-top: 1rem;
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
+    margin-top: 2rem;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
+    margin-top: 7rem;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product .duet-hero-wrapper .duet-hero-heading {
+    margin-top: 7rem;
+  }
+}
 .duet-hero.duet-hero-product .duet-hero-wrapper.fluid, .duet-hero.duet-hero-product .duet-hero-wrapper.narrow {
   padding: 0 16px;
 }
@@ -670,6 +739,11 @@
 .duet-hero.duet-hero-product.duet-theme-turva {
   background: rgb(255, 255, 255);
 }
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product.duet-theme-turva.duet-hero-narrow {
+    padding-top: 160px;
+  }
+}
 .duet-hero.duet-hero-product.duet-theme-turva .background-mask {
   position: absolute;
   top: 0;
@@ -711,17 +785,24 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image.narrow {
+    right: 40%;
+    left: auto;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image:not(.narrow) {
     top: -230px;
-    right: -128.15px;
+    right: -180px;
     left: auto;
-    width: 620px;
+    width: 675px;
     height: 675px;
     margin: 0;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image:not(.narrow) {
+    right: -120px;
     width: 736px;
   }
 }
@@ -736,18 +817,34 @@
   }
 }
 @media (min-width: 62em) {
-  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image .brand-shaped-image-bg {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image .brand-shaped-image-bg:not(.narrow) { /* stylelint-disable-line */
     width: 800px;
     height: 470px;
   }
 }
 .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon {
   top: 150px;
-  background: rgba(198, 12, 48, 0.75);
+  background: rgba(198, 12, 48, 0.9);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  mask-repeat: no-repeat;
+  transform: rotate(0deg);
+}
+.duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon duet-icon {
+  position: relative;
+  top: -10px;
+  transform: rotate(0deg);
+}
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon duet-icon {
+    top: -15px;
+  }
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon {
     top: 180px;
+    right: 20%;
   }
 }
 @media (min-width: 62em) {
@@ -757,33 +854,55 @@
 }
 @media (min-width: 76.25em) {
   .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon {
-    top: 292px;
+    top: 192px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon.narrow {
+    right: 40%;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-icon:not(.narrow) {
+    right: 340px;
   }
 }
 .duet-hero.duet-hero-content {
   padding: 0 0 48px;
-  overflow: hidden;
+  padding-top: 236px;
   background: rgb(255, 255, 255);
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-content {
+    padding-top: 384px;
+  }
+}
 .duet-hero.duet-hero-content:not(.duet-hero-has-image) {
   padding: 72px 0 48px;
 }
+.duet-hero.duet-hero-content .background-area {
+  position: absolute;
+  width: 100%;
+}
 .duet-hero.duet-hero-content .background {
-  position: relative;
-  height: 236px;
+  position: absolute;
+  top: -236px;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
 }
 .duet-hero.duet-hero-content .background .background-mask {
   display: none;
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background {
-    height: 384px;
+    top: -384px;
   }
 }
 .duet-hero.duet-hero-content .background .brand-shaped-image {
   position: absolute;
+  top: -165px;
   right: 0;
-  bottom: 50px;
   left: 30px;
   z-index: 0;
   width: 375px;
@@ -795,6 +914,7 @@
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shaped-image {
+    top: -325px;
     left: 250px;
     width: 687px;
     height: 687px;
@@ -908,8 +1028,8 @@
   }
 }
 .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+  top: -155px;
   right: 0;
-  bottom: -30px;
   left: 0;
   width: 420px;
   height: 420px;
@@ -923,6 +1043,7 @@
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+    top: -230px;
     width: 687px;
     height: 637px;
   }

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

@@ -105,9 +105,12 @@ export class DuetHero {
       transform: "translateX(-8px)",
     };
     let headingVisualLevel = this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1";
-    if (campaignOrSection || this.variation === "product") {
+    if (campaignOrSection) {
       headingVisualLevel = "h0";
     }
+    else if (this.variation === "product") {
+      headingVisualLevel = "h1";
+    }
     let headingColor = this.variation === "default" ? "gray-lightest" : "";
     if (campaignOrSection) {
       headingColor = "color-gray-lightest";
@@ -151,7 +154,8 @@ export class DuetHero {
         "duet-hero-gray-with-back": !!this.processedBack,
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))), this.variation === "content" && this.image && (h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles }))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+        "duet-hero-narrow": this.layout === "narrow",
+      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: "background-area" }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false })))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
       this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
         label: this.processedBack.label,
         href: this.processedBack.href,

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

@@ -51,14 +51,12 @@ input[type=search]::-webkit-search-cancel-button {
 }
 
 duet-tooltip {
-  position: absolute;
   top: 12px;
   right: 0;
 }
 @media (min-width: 48em) {
   duet-tooltip {
     position: relative;
-    top: 4px;
     right: auto;
   }
 }
@@ -147,6 +145,18 @@ duet-caption:not(:last-of-type) {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 
+.duet-input-label-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+@media (min-width: 48em) {
+  .duet-input-label-container {
+    justify-content: flex-start;
+  }
+}
+
 .duet-input {
   position: relative;
   z-index: 100;
@@ -307,26 +317,6 @@ duet-caption:not(:last-of-type) {
   margin-right: -28px;
 }
 
-.duet-label-has-tooltip {
-  display: inline-flex;
-}
-@media (min-width: 48em) {
-  .duet-label-has-tooltip {
-    display: inline;
-  }
-}
-.duet-label-has-tooltip::before {
-  display: block;
-  margin-top: 7px;
-  content: " ";
-}
-
-.duet-input-tooltip::after {
-  display: inline-block;
-  height: 49px;
-  content: " ";
-}
-
 .duet-input-help {
   display: block;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -312,7 +312,7 @@ export class DuetInput {
         "has-clear": this.clear,
         "has-focus": this.isFocused,
         disabled: this.disabled,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+      } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip))), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",

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

@@ -5,7 +5,7 @@ import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTur
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
@@ -44,8 +44,19 @@ export class DuetLogo {
     this.inverse = false;
     this.size = "medium";
     this.href = "/";
+    this.accessibleLabelDefaults = {
+      fi: "Siirry LähiTapiolan etusivulle.",
+      sv: "Gå till LokalTapiola förstasidan.",
+      en: "Go to LocalTapiola front page.",
+    };
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     this.language = getLanguage();
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleLabel === this.accessibleLabelDefaults[oldValue]) {
+      this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults, newValue);
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -73,7 +84,7 @@ export class DuetLogo {
    */
   render() {
     const TagName = this.href ? "a" : "div";
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(TagName, { href: this.href, ref: link => (this.nativeLink = link), class: {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(TagName, { href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
         "duet-logo": true,
         [this.size]: true,
         "duet-theme-turva": this.theme === "turva",
@@ -200,6 +211,45 @@ export class DuetLogo {
         "reflect": true,
         "defaultValue": "\"/\""
       },
+      "accessibleLabelDefaults": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetLangObject",
+          "resolved": "DuetLangObject",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{\n    fi: \"Siirry L\u00E4hiTapiolan etusivulle.\",\n    sv: \"G\u00E5 till LokalTapiola f\u00F6rstasidan.\",\n    en: \"Go to LocalTapiola front page.\",\n  }"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessible-label",
+        "reflect": true,
+        "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
+      },
       "language": {
         "type": "string",
         "mutable": true,
@@ -258,4 +308,10 @@ export class DuetLogo {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
+      }];
+  }
 }

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

@@ -67,7 +67,7 @@
   top: 0;
   left: -1px;
   z-index: 1;
-  width: 36px;
+  width: 56px;
   height: 49px;
   background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
 }
@@ -81,7 +81,7 @@
   top: 0;
   right: -1px;
   z-index: 1;
-  width: 36px;
+  width: 56px;
   height: 49px;
   background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
 }
@@ -123,6 +123,13 @@
     overflow-x: visible;
   }
 }
+.duet-menu-bar .container .list {
+  height: 100%;
+  list-style-type: none;
+}
+.duet-menu-bar .container ::slotted(*) {
+  height: 100%;
+}
 .duet-menu-bar .container > * {
   display: flex;
   align-items: center;
@@ -149,24 +156,24 @@
   background: rgb(255, 255, 255);
 }
 
-slot[name=center] {
+.center {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
   color: rgb(0, 41, 77);
 }
-.duet-theme-turva slot[name=center] {
+.duet-theme-turva .center {
   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);
 }
 
-slot[name=right] {
+.right {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
   color: rgb(0, 77, 128);
 }
-.duet-theme-turva slot[name=right] {
+.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);
 }