@duetds/components 7.0.12 → 7.1.0

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

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetNotification {
   constructor() {
     this.language = getLanguage();
@@ -25,6 +26,9 @@ export class DuetNotification {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
   }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -5,6 +5,7 @@ import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
   constructor() {
@@ -46,6 +47,9 @@ export class DuetNotificationDrawer {
     inheritGlobalTheme(this);
     this.updateNotificationState();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.observer = new MutationObserver(this.updateNotificationState);
     this.observer.observe(this.element, { childList: true });

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

@@ -9,6 +9,7 @@ import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
+import { nudge } from "../../utils/nudge";
 export class DuetNumberInput {
   constructor() {
     this.inputId = createID("DuetInput");
@@ -234,6 +235,9 @@ export class DuetNumberInput {
       this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot heading - This is a slot for heading content.
  */
@@ -18,6 +19,9 @@ export class DuetPageHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -7,6 +7,7 @@ import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 /**
@@ -148,6 +149,7 @@ export class DuetPagination {
   }
   componentDidLoad() {
     this.firstRenderDone = true;
+    nudge(this);
   }
   componentWillRender() {
     if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {

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

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-paragraph - piercing selector for styling the paragraph
@@ -22,6 +23,9 @@ export class DuetParagraph {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -58,6 +58,7 @@ export class DuetPopupMenu {
   async handleKeyDown(evt) {
     if (this.open) {
       if (isArrowDownKey(evt)) {
+        evt.preventDefault();
         const current = await this.getFocusedItemIndex();
         if (current !== -1) {
           if (current < this.itemElements.length - 1) {
@@ -69,6 +70,7 @@ export class DuetPopupMenu {
         }
       }
       if (isArrowUpKey(evt)) {
+        evt.preventDefault();
         const current = await this.getFocusedItemIndex();
         if (current !== -1) {
           if (current === 0) {

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetPopupMenuItem {
   constructor() {
     /**
@@ -41,6 +42,9 @@ export class DuetPopupMenuItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */

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

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetProgress {
   constructor() {
     /**
@@ -34,6 +35,9 @@ export class DuetProgress {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
   }

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetPromoCard {
   constructor() {
@@ -24,6 +25,9 @@ export class DuetPromoCard {
     this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one of the class.

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetRadioGroup {
   constructor() {
@@ -67,6 +68,9 @@ export class DuetRadioGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Local methods.
    */

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -6,6 +6,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
+import { nudge } from "../../utils/nudge";
 const colors = {
   turva: {
     active: colorPrimaryTurva,
@@ -77,6 +78,9 @@ export class DuetRangeSlider {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
    * `input.focus()`.

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

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
  * @part range-numbers - this part enables style overrides for the range-numbers
@@ -90,6 +91,7 @@ export class DuetRangeStepper {
   }
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "ariaLabels", defaults: "ariaLabelsDefaults" });

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

@@ -3,6 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot collapse-button-label - This is to label collapse button.
  */
@@ -48,15 +49,16 @@ export class DuetScrollable {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.hasCollapseButtonLabelSlot = Build.isServer
-      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
-      : !!this.host.querySelector(":scope > [slot='collapse-button-label']");
+      ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
+      : !!this.element.querySelector(":scope > [slot='collapse-button-label']");
     const slotted = Build.isServer
-      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']"))
-      : this.host.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
+      ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']"))
+      : this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
     this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
   }
   componentDidLoad() {
     this.resizeObserver.observe(this.tabListElement);
+    nudge(this);
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
@@ -66,11 +68,11 @@ export class DuetScrollable {
    */
   getLastVisibleElement() {
     const clientWidth = this.tabListElement.clientWidth;
-    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
     return xValues;
   }
   getFirstVisibleElement() {
-    const buttonCollection = this.host.querySelectorAll("button");
+    const buttonCollection = this.element.querySelectorAll("button");
     // reverse the array because we want the first invisible element form the middle, not the first in the list
     const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
     const xValues = arrayOfXValues.findIndex(element => {
@@ -105,7 +107,7 @@ export class DuetScrollable {
     if (index < 0) {
       index = 0;
     }
-    const buttons = this.host.querySelectorAll("button");
+    const buttons = this.element.querySelectorAll("button");
     // store previous position
     let prevPosition = buttons[0].getBoundingClientRect().x;
     // iterations to run
@@ -304,7 +306,7 @@ export class DuetScrollable {
       "childrenData": {}
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "selected",

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
+import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
   return "options" in item;
@@ -109,6 +110,9 @@ export class DuetSelect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-select`. Use this method instead of the global
    * `select.focus()`.

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

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetShowMore {
   constructor() {
     this.contentId = createID("DuetShowMore");
@@ -72,6 +73,9 @@ export class DuetShowMore {
     inheritGlobalTheme(this);
     this.buttonAriaOpen = this.open;
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "showMoreLabel", defaults: "showMoreLabelDefaults" },

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

@@ -2,10 +2,12 @@
  * 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";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
@@ -15,6 +17,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 +38,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 +58,7 @@ export class DuetSlideout {
       this.toggleMenu(e);
     };
     this.language = getLanguage();
+    this.displaying = false;
     this.theme = "";
     this.open = false;
     this.backgroundColor = "gray-lightest";
@@ -84,11 +98,29 @@ 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);
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
+    enableBodyScroll(this.dialog);
+    this.intersectionObserver.disconnect();
   }
   /**
    * Component event handling.
@@ -121,7 +153,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 +245,8 @@ export class DuetSlideout {
   }
   static get states() {
     return {
-      "language": {}
+      "language": {},
+      "displaying": {}
     };
   }
   static get events() {

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutLang {
   constructor() {
     /**
@@ -23,6 +24,9 @@ export class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -21,6 +22,9 @@ export class DuetSlideoutLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideoutPanel {
   constructor() {
@@ -60,6 +61,9 @@ export class DuetSlideoutPanel {
     inheritGlobalTheme(this);
     this.updateLabel();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutPanelDropdown {
   constructor() {
     this.onClick = () => {
@@ -29,6 +30,9 @@ export class DuetSlideoutPanelDropdown {
       link.menuItem = true;
     });
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */

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

@@ -6,6 +6,7 @@ import { Build, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot heading-content - Step heading content. Use this slot to show additional content next to step heading.
@@ -47,6 +48,9 @@ export class DuetStep {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Programmatically shift focus to the step's heading.
    */

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
+import { nudge } from "../../utils/nudge";
 export class DuetStepper {
   constructor() {
     this.theme = "";
@@ -41,6 +42,9 @@ export class DuetStepper {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   async connectedCallback() {
     this.updateStepState();
   }

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

@@ -5,6 +5,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";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBar {
   constructor() {
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
@@ -72,6 +73,9 @@ export class DuetSubmenuBar {
       child.setAttribute("role", "listitem");
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
     this.hasItems = this.checkIfHasItems();

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

@@ -5,6 +5,7 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarDropdown {
   constructor() {
     /**
@@ -56,6 +57,9 @@ export class DuetSubmenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.checkIsDesktop();
     for (let i = 0; i < this.mql.length; i++) {

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarDropdownLink {
   constructor() {
     this.theme = "";
@@ -19,6 +20,9 @@ export class DuetSubmenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-submenu-bar-dropdown");

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

@@ -5,6 +5,7 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarLink {
   constructor() {
     /**
@@ -32,6 +33,9 @@ export class DuetSubmenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {

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

@@ -3,6 +3,7 @@
  */
 import { Build, h } from "@stencil/core";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetTab {
   constructor() {
     this.label = undefined;
@@ -17,6 +18,9 @@ export class DuetTab {
   /**
    * Component lifecycle events.
    */
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
   }
@@ -146,4 +150,5 @@ export class DuetTab {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }