@duetds/components 6.9.5 → 6.9.7

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

@@ -0,0 +1,51 @@
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+blockquote,
+figure {
+  margin: 0;
+}
+
+.duet-callout {
+  margin-bottom: 28px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-callout .container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  max-width: 688px;
+  text-align: center;
+}
+.duet-callout .callout-icon {
+  width: 50px;
+  padding-bottom: 8px;
+}
+.duet-callout .author {
+  color: rgb(0, 41, 77);
+}
+.duet-callout.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";
+}
+.duet-callout.duet-theme-turva .author {
+  color: rgb(23, 28, 58);
+}
+.duet-callout.duet-m-0 {
+  margin: 0 !important;
+}

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

@@ -0,0 +1,101 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+/**
+ * @slot default - Slot for text.
+ * @slot author - Slot for author information.
+ */
+export class DuetCallout {
+  constructor() {
+    this.hasAuthorSlot = false;
+    this.theme = "";
+    this.margin = "auto";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
+    </svg>
+    `;
+    return (h(Host, null, h("div", { class: {
+        "duet-callout": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-m-0": this.margin === "none",
+      } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none", theme: this.theme }, h("slot", null))), this.hasAuthorSlot && (h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" }))))))));
+  }
+  static get is() { return "duet-callout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-callout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-callout.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the caption."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -236,6 +236,8 @@ export class DuetChoice {
    * Always the last one in the class.
    */
   render() {
+    const choiceGroup = this.element.closest("duet-choice-group");
+    const choiceGroupLabel = choiceGroup ? choiceGroup.label : undefined;
     const identifier = this.identifier || this.choiceId;
     return (h(Host, { class: {
         horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
@@ -254,7 +256,7 @@ export class DuetChoice {
         info: this.isInfoOpen,
         collapsible: this.collapsible,
         "duet-p-0": this.padding === "none",
-      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
       }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {

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

@@ -103,7 +103,7 @@
   border-radius: 4px;
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-:host(.user-is-tabbing.duet-theme-turva) .duet-collapsible-heading:focus {
+:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 

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

@@ -1048,6 +1048,16 @@
     width: 80%;
   }
 }
+.duet-hero.duet-hero-content .duet-hero-text .duet-hero-pre {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-content .duet-hero-text .duet-hero-pre {
+    margin-top: 1.5rem;
+    margin-bottom: 0;
+  }
+}
 .duet-hero.duet-hero-content.duet-theme-turva {
   background: rgb(255, 255, 255);
 }

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

@@ -13,6 +13,7 @@ import { parsePossibleJSON } from "../../utils/string-utils";
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
  * @slot bottom - This is a slot for content under the main hero content.
+ * @slot pre-heading - This is a slot for pre-heading content inside the hero component.
  * @slot heading - This is a slot for heading content inside the hero component.
  * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
  */
@@ -70,6 +71,7 @@ export class DuetHero {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
     this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
@@ -172,7 +174,7 @@ export class DuetHero {
         href: this.processedBack.href,
         id: this.processedBack.id,
         analyticsId: this.processedBack.analyticsId,
-      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { name: "subheading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? this.preHeading : h("slot", { name: "pre-heading" }))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { name: "subheading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
       this.variation !== "image" &&
       !campaignOrSection &&
       this.variation !== "product" &&

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

@@ -3,7 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, rgbaColorFromRgb } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
   constructor() {
@@ -16,6 +16,8 @@ export class DuetIcon {
     this.responsive = true;
     this.color = "";
     this.background = "";
+    this.backgroundOpacity = 1;
+    this.backgroundRotation = 0;
     this.size = "medium";
     this.outline = "";
     this.shape = "circle";
@@ -57,11 +59,20 @@ export class DuetIcon {
     const color = this.color === "currentColor"
       ? "currentColor"
       : getColorByName(this.color, this.theme) || getColorByName(this.outline, this.theme);
-    const styles = {
-      color,
-      background: getColorByName(this.background, this.theme),
-      "border-color": getColorByName(this.outline, this.theme),
-    };
+    const backgroundRotationStyles = this.backgroundRotation
+      ? {
+        transform: `rotate(${this.backgroundRotation}deg)`,
+        "transform-origin": "center center",
+      }
+      : {};
+    const styles = Object.assign({ color, background: rgbaColorFromRgb(getColorByName(this.background, this.theme), this.backgroundOpacity), "border-color": getColorByName(this.outline, this.theme) }, backgroundRotationStyles);
+    const iconRotationStyles = this.backgroundRotation
+      ? {
+        transform: `rotate(-${this.backgroundRotation}deg)`,
+        "transform-origin": "center center",
+      }
+      : {};
+    const iconStyles = Object.assign({}, iconRotationStyles);
     const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
@@ -77,7 +88,7 @@ export class DuetIcon {
         [shapeStyle]: true,
         rotated: this.shape === "brand-rotated" && this.theme !== "turva",
         "duet-icon-not-responsive": !this.responsive,
-      } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent }))));
+      } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent, style: iconStyles }))));
   }
   static get is() { return "duet-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -260,6 +271,48 @@ export class DuetIcon {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "backgroundOpacity": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Opacity of the background. Possible value in between 0-1. For example 0.75."
+            }],
+          "text": ""
+        },
+        "attribute": "background-opacity",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "backgroundRotation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Rotation of the background. Possible value in between 0-360. For example 30."
+            }],
+          "text": ""
+        },
+        "attribute": "background-rotation",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -28,6 +28,12 @@
   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;
@@ -148,6 +154,12 @@
 }
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar.duet-theme-turva {
+    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+  }
 }
 
 .center {

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

@@ -92,11 +92,29 @@
     display: none;
   }
 }
-.duet-submenu-bar .items {
+.duet-submenu-bar .menu-container {
   position: absolute;
   z-index: 399;
   width: 100%;
-  max-height: 1000px;
+}
+.duet-submenu-bar .menu-container.hidden {
+  max-height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar .menu-container, .duet-submenu-bar .menu-container.hidden {
+    position: static;
+    z-index: auto;
+    max-height: unset;
+    overflow: visible;
+    visibility: visible;
+  }
+}
+.duet-submenu-bar .items {
+  width: 100%;
+  height: 70vh;
+  overflow-y: scroll;
   visibility: visible;
   background: rgb(243, 249, 252);
   border-bottom: 1px solid rgb(207, 210, 212);
@@ -124,11 +142,22 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    height: auto;
     max-height: unset;
     overflow: visible;
     visibility: visible;
     border: 0;
-    transition: none;
+  }
+}
+.duet-submenu-bar .mobile-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 41, 77, 0.6);
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar .mobile-background {
+    display: none;
   }
 }
 .duet-submenu-bar.duet-theme-turva {
@@ -140,4 +169,15 @@
 }
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 245, 247);
+}
+.duet-submenu-bar.duet-theme-turva .mobile-background {
+  background: rgba(23, 28, 58, 0.6);
+}
+.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
+    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+  }
 }

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

@@ -3,6 +3,7 @@
  */
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetSubmenuBar {
   constructor() {
@@ -11,15 +12,29 @@ export class DuetSubmenuBar {
     this.changeAriaProperties = () => {
       if (this.mql[0].matches) {
         this.mobile = false;
+        enableBodyScroll(this.element);
       }
       else {
         this.mobile = true;
+        if (!this.bodyScroll) {
+          disableBodyScroll(this.element, { reserveScrollBarGap: true });
+        }
       }
     };
     this.onClick = () => {
-      this.open = !this.open;
+      const open = this.open;
+      if (!open) {
+        this.bodyScroll = false;
+        disableBodyScroll(this.element, { reserveScrollBarGap: true });
+      }
+      else {
+        enableBodyScroll(this.element);
+        this.bodyScroll = true;
+      }
+      this.open = !open;
     };
     this.mobile = true;
+    this.bodyScroll = false;
     this.theme = "";
     this.open = false;
     this.accessibleLabel = undefined;
@@ -67,10 +82,13 @@ export class DuetSubmenuBar {
   render() {
     return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "shadow-container", role: "presentation" }, h("div", { class: "top-shadow" })), h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { class: {
+        "menu-container": true,
+        hidden: !this.open,
+      }, role: "presentation" }, h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
         items: true,
         hidden: !this.open,
-      } }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null))))));
+      } }, h("div", { class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", null))), h("div", { class: "mobile-background" })))));
   }
   static get is() { return "duet-submenu-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -148,7 +166,8 @@ export class DuetSubmenuBar {
   }
   static get states() {
     return {
-      "mobile": {}
+      "mobile": {},
+      "bodyScroll": {}
     };
   }
   static get methods() {