@duetds/components 6.8.7 → 6.8.9

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 {
@@ -427,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;
   }
 }
@@ -445,38 +457,79 @@
 .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: 0;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background-area {
+    top: -112px;
+  }
+}
+.duet-hero.duet-hero-product .background-container {
+  position: absolute;
+  top: -150px;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-product .background-container {
+    top: -48px;
   }
 }
 .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 {
@@ -639,9 +692,17 @@
   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: 5rem;
+    margin-top: 7rem;
   }
 }
 @media (min-width: 76.25em) {
@@ -694,6 +755,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;
@@ -752,7 +818,7 @@
 }
 @media (min-width: 76.25em) {
   .duet-hero.duet-hero-product.duet-theme-turva .brand-shaped-image:not(.narrow) {
-    right: -100px;
+    right: -120px;
     width: 736px;
   }
 }
@@ -819,28 +885,40 @@
 }
 .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;
@@ -852,6 +930,7 @@
 }
 @media (min-width: 48em) {
   .duet-hero.duet-hero-content .background .brand-shaped-image {
+    top: -325px;
     left: 250px;
     width: 687px;
     height: 687px;
@@ -965,8 +1044,8 @@
   }
 }
 .duet-hero.duet-hero-content.duet-theme-turva .brand-shaped-image {
+  top: -155px;
   right: 0;
-  bottom: -30px;
   left: 0;
   width: 420px;
   height: 420px;
@@ -980,6 +1059,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-container" }, 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

@@ -28,12 +28,6 @@
   align-items: center;
   justify-content: center;
   background: rgb(255, 255, 255);
-  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
-}
-@media (min-width: 62em) {
-  .duet-menu-bar {
-    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
-  }
 }
 .duet-menu-bar .top {
   display: none;
@@ -67,7 +61,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 +75,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,11 +117,11 @@
     overflow-x: visible;
   }
 }
-.duet-menu-bar .container ul {
+.duet-menu-bar .container .list {
   height: 100%;
   list-style-type: none;
 }
-.duet-menu-bar .container li {
+.duet-menu-bar .container ::slotted(*) {
   height: 100%;
 }
 .duet-menu-bar .container > * {
@@ -155,9 +149,6 @@
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
 }
-.duet-menu-bar .hide {
-  display: none;
-}
 
 .center {
   font-size: 1rem;

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

@@ -18,23 +18,12 @@ export class DuetMenuBar {
       window.matchMedia(media_query_xx_large.replace(/'/g, "")),
     ];
     this.boundMqlFunctions = [];
-    this.observers = [];
-    this.setChildren = (children) => {
-      for (const child of children) {
-        if (child.getAttribute("slot") === "center") {
-          this.centerSlotChildren = Array.from(child.children);
-        }
-        else if (child.getAttribute("slot") === "right") {
-          this.rightSlotChildren = Array.from(child.children);
-        }
-      }
-    };
     this.scrollbarCheck = () => {
       this.leftMoreVisible = this.container.scrollLeft > 0;
       this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
     };
     this.scrollToActive = () => {
-      const actives = this.element.shadowRoot.querySelectorAll("[active]");
+      const actives = this.element.querySelectorAll("[active]");
       let active;
       actives.forEach(a => {
         if (a.active) {
@@ -68,11 +57,10 @@ export class DuetMenuBar {
     this.logoSize = "large";
     this.leftMoreVisible = false;
     this.rightMoreVisible = false;
-    this.centerSlotChildren = [];
-    this.rightSlotChildren = [];
     this.theme = "";
     this.logo = true;
     this.logoHref = undefined;
+    this.logoLinkAccessibleLabel = undefined;
     this.accessibleLabel = undefined;
   }
   /**
@@ -80,7 +68,19 @@ export class DuetMenuBar {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    this.setChildren(Array.from(this.element.children));
+    const children = Array.from(this.element.children);
+    for (const child of children) {
+      if (child.getAttribute("slot") === "center") {
+        for (const slotChild of Array.from(child.children)) {
+          slotChild.setAttribute("role", "listitem");
+        }
+      }
+      else if (child.getAttribute("slot") === "right") {
+        for (const slotChild of Array.from(child.children)) {
+          slotChild.setAttribute("role", "listitem");
+        }
+      }
+    }
   }
   connectedCallback() {
     this.changeLogoSize();
@@ -92,21 +92,6 @@ export class DuetMenuBar {
         this.boundMqlFunctions[i] = bound;
       }
     }
-    if (Build.isServer) {
-      return;
-    }
-    Array.from(this.element.children).forEach(child => {
-      const observer = new MutationObserver(() => {
-        this.setChildren(Array.from(this.element.children));
-      });
-      observer.observe(child, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-      });
-      this.observers = [...this.observers, observer];
-    });
   }
   disconnectedCallback() {
     for (let i = 0; i < this.mql.length; i++) {
@@ -116,11 +101,6 @@ export class DuetMenuBar {
       }
     }
     this.boundMqlFunctions = [];
-    if (Build.isServer) {
-      return;
-    }
-    this.observers.forEach(observer => observer.disconnect());
-    this.observers = [];
   }
   componentDidLoad() {
     if (Build.isServer || Build.isTesting) {
@@ -148,7 +128,7 @@ export class DuetMenuBar {
         "duet-menu-bar": true,
         "duet-theme-turva": this.theme === "turva",
         "horizontal-nav": isUsedAsAdditionalHorizontalNav,
-      }, "aria-label": this.accessibleLabel }, h("div", { class: "top" }), h("div", { class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", null, h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, onClick: this.handleLogoClick }))), h("ul", { class: "center" }, h("div", { class: "more-left", hidden: !this.leftMoreVisible }), this.centerSlotChildren.map(child => (h("li", { innerHTML: child.outerHTML }))), h("div", { class: "more-right", hidden: !this.rightMoreVisible })), h("ul", { class: "right" }, this.rightSlotChildren.map(child => (h("li", { innerHTML: child.outerHTML }))))), h("div", { class: "bottom" }), h("div", { class: "hide" }, h("slot", { name: "left" }), h("slot", { name: "right" })))));
+      }, "aria-label": this.accessibleLabel }, h("div", { class: "top" }), h("div", { class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", null, h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick }))), h("div", { class: "list center", role: "list" }, h("div", { class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { name: "center" }), h("div", { class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { class: "list right", role: "list" }, h("slot", { name: "right" }))), h("div", { class: "bottom" }))));
   }
   static get is() { return "duet-menu-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -222,6 +202,23 @@ export class DuetMenuBar {
         "attribute": "logo-href",
         "reflect": false
       },
+      "logoLinkAccessibleLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Logo link accessible label."
+        },
+        "attribute": "logo-link-accessible-label",
+        "reflect": false
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,
@@ -245,9 +242,7 @@ export class DuetMenuBar {
     return {
       "logoSize": {},
       "leftMoreVisible": {},
-      "rightMoreVisible": {},
-      "centerSlotChildren": {},
-      "rightSlotChildren": {}
+      "rightMoreVisible": {}
     };
   }
   static get events() {