@duetds/components 7.0.11 → 7.0.13

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

@@ -146,20 +146,20 @@ export class DuetSelect {
     return (h(Host, { onClick: this.onClick, class: {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
-        "duet-select-variation-tiny": this.variation === "tiny",
+        [`duet-select-variation-${this.variation}`]: true,
       } }, h("div", { class: {
         "duet-select-container": true,
         "duet-label-hidden": this.labelHidden,
         "duet-theme-turva": this.theme === "turva",
-        "duet-select-variation-tiny": this.variation === "tiny",
+        [`duet-select-variation-${this.variation}`]: true,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
       } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
     }))), h("div", { class: {
         "duet-select": true,
-        "duet-select-variation-tiny": this.variation === "tiny",
-      }, "aria-hidden": "true" }, h("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        [`duet-select-variation-${this.variation}`]: true,
+      }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
   static get encapsulation() { return "scoped"; }
@@ -180,11 +180,11 @@ export class DuetSelect {
         "mutable": false,
         "complexType": {
           "original": "DuetSelectVariation",
-          "resolved": "\"default\" | \"tiny\"",
+          "resolved": "\"compact\" | \"default\" | \"tiny\"",
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -192,7 +192,7 @@ export class DuetSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variation of dropdown. -tiny is used for small numbers / tiny option ranges."
+          "text": "Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,\nlike with compact pagination."
         },
         "attribute": "variation",
         "reflect": false,
@@ -497,7 +497,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -646,7 +646,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -666,7 +666,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -686,7 +686,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -382,7 +382,7 @@ export class DuetShowMore {
           "references": {
             "DuetShowMoreToggleEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-show-more/duet-show-more.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx"
             }
           }
         }

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

@@ -106,7 +106,7 @@
 }
 .duet-slideout .dialog .top button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
@@ -129,12 +129,15 @@
     transition: 300ms ease;
   }
 }
+.duet-slideout.duet-theme-turva .dialog {
+  box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1) inset;
+}
 .duet-slideout.duet-theme-turva button {
   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);
 }
 .duet-slideout.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-slideout.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
@@ -143,7 +146,7 @@
   background: rgb(198, 12, 48);
 }
 .duet-slideout.duet-theme-turva .dialog .top button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 ::slotted(*) {

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

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, h, Host } from "@stencil/core";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
@@ -15,6 +16,14 @@ export class DuetSlideout {
       sv: "Avsluta menyn",
     };
     this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+    this.handleBodyScrolling = () => {
+      if (this.displaying && this.open) {
+        disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
+      }
+      else {
+        enableBodyScroll(this.dialog);
+      }
+    };
     this.toggleMenu = (e) => {
       const toggle = !this.open;
       this.open = toggle;
@@ -28,16 +37,19 @@ export class DuetSlideout {
         const openPanel = this.element.querySelector("duet-slideout-panel[open]");
         if (openPanel) {
           openPanel.setFocus();
+          this.handleBodyScrolling();
         }
         else {
           setTimeout(() => {
             this.closeButton.focus();
+            this.handleBodyScrolling();
           }, 200);
         }
       }
       else {
         setTimeout(() => {
           this.openButton.setFocus();
+          this.handleBodyScrolling();
         }, 200);
       }
     };
@@ -45,6 +57,7 @@ export class DuetSlideout {
       this.toggleMenu(e);
     };
     this.language = getLanguage();
+    this.displaying = false;
     this.theme = "";
     this.open = false;
     this.backgroundColor = "gray-lightest";
@@ -84,11 +97,28 @@ export class DuetSlideout {
       this.openButton = this.openButton;
     }
   }
+  async componentDidLoad() {
+    if (Build.isServer) {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        this.displaying = true;
+      }
+      else {
+        this.displaying = false;
+      }
+      this.handleBodyScrolling();
+    });
+    this.intersectionObserver.observe(this.dialog);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
+    enableBodyScroll(this.dialog);
+    this.intersectionObserver.disconnect();
   }
   /**
    * Component event handling.
@@ -121,7 +151,7 @@ export class DuetSlideout {
         hidden: !this.open,
       }, onClick: () => {
         this.open = false;
-      } }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "menubar", class: {
+      } }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "menubar", class: {
         dialog: true,
         hidden: !this.open,
       }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
@@ -213,7 +243,8 @@ export class DuetSlideout {
   }
   static get states() {
     return {
-      "language": {}
+      "language": {},
+      "displaying": {}
     };
   }
   static get events() {
@@ -233,7 +264,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -41,15 +41,15 @@
   text-align: left;
   text-decoration: none;
 }
-.duet-slideout-link.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-slideout-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-.duet-slideout-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+.duet-theme-turva .duet-slideout-link:focus, .duet-slideout-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-slideout-link.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-slideout-link.active span {
   position: relative;

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -78,7 +78,7 @@
 }
 .duet-slideout-panel .link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout-panel .link.active .label-text {
   position: relative;
@@ -129,7 +129,7 @@
 .duet-slideout-panel .top .back:focus,
 .duet-slideout-panel .top .close:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout-panel .top duet-icon {
   padding: 16px;
@@ -157,14 +157,14 @@
   color: rgb(23, 28, 58);
 }
 .duet-slideout-panel.duet-theme-turva .link:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
   background: rgb(198, 12, 48);
 }
 .duet-slideout-panel.duet-theme-turva .top .back:focus,
 .duet-slideout-panel.duet-theme-turva .top .close:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-slideout-panel.duet-theme-turva .top span {
   font-family: "turva-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-slideout-panel-dropdown/duet-slideout-panel-dropdown.css

@@ -68,7 +68,7 @@
 }
 .duet-slideout-panel-dropdown button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-slideout-panel-dropdown button.active .label::after {
   position: absolute;
@@ -111,7 +111,7 @@
   color: rgb(23, 28, 58);
 }
 .duet-slideout-panel-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
   background: rgb(198, 12, 48);

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },
@@ -95,7 +95,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },

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

@@ -95,7 +95,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
             }
           }
         },

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

@@ -73,10 +73,10 @@
   opacity: 0.75;
 }
 :host(.user-is-tabbing) .duet-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-step-heading:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .is-complete .duet-step-heading:hover .duet-step-counter, .is-disabled .duet-step-heading:hover .duet-step-counter {
   background-color: #005f8f;

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

@@ -193,7 +193,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         },
@@ -270,7 +270,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         }

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

@@ -223,7 +223,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
             }
           }
         }

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

@@ -53,7 +53,7 @@
   .duet-submenu-bar .shadow-container .top-shadow {
     top: -80px;
     height: 80px;
-    box-shadow: 0 3px 6px rgba(0, 41, 77, 0.1);
+    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
   }
 }
 @media (min-width: 62em) {
@@ -73,13 +73,13 @@
   line-height: 1.25;
   color: rgb(0, 41, 77);
 }
-.duet-submenu-bar button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
 }
+.duet-submenu-bar button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-submenu-bar button .label {
   position: relative;
   display: flex;
@@ -172,7 +172,7 @@
   border-bottom: 1px solid rgb(228, 228, 230);
 }
 .duet-submenu-bar.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-submenu-bar.duet-theme-turva .items {
   background: rgb(245, 245, 247);
@@ -181,10 +181,10 @@
   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);
+  box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);
 }
 @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);
+    box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
 }

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

@@ -9,7 +9,7 @@ export class DuetSubmenuBar {
   constructor() {
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
     this.boundMqlFunctions = [];
-    this.changeAriaProperties = () => {
+    this.handleMobileView = () => {
       if (this.mql[0].matches) {
         this.mobile = false;
         this.enableBodyScroll();
@@ -28,13 +28,17 @@ export class DuetSubmenuBar {
       if (this.nav) {
         enableBodyScroll(this.nav);
       }
-      enableBodyScroll(this.itemsContainer);
+      if (this.itemsContainer) {
+        enableBodyScroll(this.itemsContainer);
+      }
     };
     this.disableBodyScroll = () => {
       if (this.nav) {
         disableBodyScroll(this.nav, { reserveScrollBarGap: true });
       }
-      disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
+      if (this.itemsContainer) {
+        disableBodyScroll(this.itemsContainer, { reserveScrollBarGap: true });
+      }
     };
     this.checkIfHasItems = () => {
       const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
@@ -47,7 +51,7 @@ export class DuetSubmenuBar {
     this.open = false;
     this.accessibleLabel = undefined;
   }
-  watchLanguageStateHandler(newValue) {
+  watchOpenStateHandler(newValue) {
     const open = newValue;
     if (open) {
       this.bodyScroll = false;
@@ -71,11 +75,11 @@ export class DuetSubmenuBar {
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
     this.hasItems = this.checkIfHasItems();
-    this.changeAriaProperties();
+    this.handleMobileView();
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate
       if (this.mql[i].addEventListener) {
-        const bound = this.changeAriaProperties.bind(this);
+        const bound = this.handleMobileView.bind(this);
         this.mql[i].addEventListener("change", bound);
         this.boundMqlFunctions[i] = bound;
       }
@@ -222,7 +226,7 @@ export class DuetSubmenuBar {
   static get watchers() {
     return [{
         "propName": "open",
-        "methodName": "watchLanguageStateHandler"
+        "methodName": "watchOpenStateHandler"
       }];
   }
 }

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

@@ -69,10 +69,6 @@
   align-items: center;
   justify-content: center;
 }
-.duet-submenu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown button.open {
     background: rgb(230, 242, 248);
@@ -81,6 +77,10 @@
 .duet-submenu-bar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
+.duet-submenu-bar-dropdown button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-submenu-bar-dropdown button.active .label-text {
   position: relative;
 }
@@ -180,14 +180,14 @@
   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);
 }
-.duet-submenu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
     background: rgb(228, 228, 230);
   }
 }
+.duet-submenu-bar-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after {
   background: rgb(198, 12, 48);
 }

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

@@ -40,19 +40,19 @@
   text-align: center;
   text-decoration: none;
 }
+.duet-submenu-bar-dropdown-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-submenu-bar-dropdown-link:focus, .duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link {
     padding: 0.675rem 16px;
     font-size: 0.875rem;
   }
 }
-.duet-submenu-bar-dropdown-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-submenu-bar-dropdown-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-submenu-bar-dropdown-link.active .label {
   position: relative;
 }

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

@@ -45,6 +45,13 @@
   text-align: center;
   text-decoration: none;
 }
+.duet-submenu-bar-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-link {
     flex-direction: column;
@@ -55,13 +62,6 @@
     color: rgb(0, 77, 128);
   }
 }
-.duet-submenu-bar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-submenu-bar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-link.active {
     color: rgb(0, 119, 179);

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -173,10 +173,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tab-button:first-child {
   border-top-left-radius: 4px;
@@ -346,11 +346,10 @@
 }
 .duet-tab-group-content:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
-.duet-theme-turva .duet-tab-group-content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tab-group-content.checked-group-content {
   padding: 28px 0 28px 0;