@duetds/components 7.1.3 → 8.0.1

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

@@ -5,7 +5,6 @@ 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() {
     /**
@@ -35,9 +34,6 @@ 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,7 +3,6 @@
  */
 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() {
@@ -25,9 +24,6 @@ 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,7 +3,6 @@
  */
 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() {
@@ -68,9 +67,6 @@ export class DuetRadioGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * Local methods.
    */

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

@@ -6,7 +6,6 @@ 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,
@@ -78,9 +77,6 @@ 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,7 +6,6 @@ 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
@@ -91,7 +90,6 @@ 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,7 +3,6 @@
  */
 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.
  */
@@ -58,7 +57,6 @@ export class DuetScrollable {
   }
   componentDidLoad() {
     this.resizeObserver.observe(this.tabListElement);
-    nudge(this);
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();

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

@@ -4,7 +4,6 @@
 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;
@@ -110,9 +109,6 @@ 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,7 +6,6 @@ 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");
@@ -73,9 +72,6 @@ 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

@@ -7,7 +7,7 @@ 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 { Teleport } from "../../utils/teleport";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
@@ -26,16 +26,18 @@ export class DuetSlideout {
       }
     };
     this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.openButton.setAttribute("aria-expanded", this.open.toString());
+      this.open = !this.open;
+      if (this.openButton) {
+        this.openButton.accessibleExpanded = this.open;
+      }
       this.duetSlideoutEvent.emit({
         originalEvent: e,
         data: { element: this.element, open: this.open },
         component: "duet-slideout",
       });
-      if (toggle) {
+      if (this.open) {
         const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        this.teleport.go(true);
         if (openPanel) {
           openPanel.setFocus();
           this.handleBodyScrolling();
@@ -49,8 +51,10 @@ export class DuetSlideout {
       }
       else {
         setTimeout(() => {
-          this.openButton.setFocus();
+          var _a;
+          (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.setFocus();
           this.handleBodyScrolling();
+          this.teleport.resume();
         }, 200);
       }
     };
@@ -61,6 +65,7 @@ export class DuetSlideout {
     this.displaying = false;
     this.theme = "";
     this.open = false;
+    this.opener = undefined;
     this.backgroundColor = "gray-lightest";
   }
   /**
@@ -73,30 +78,49 @@ export class DuetSlideout {
       this.closeButton.focus();
     }, 200);
   }
+  /**
+   * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
+   * the slideout so that focus can be moved back to this specific element when
+   * the slideout dialog is closed.
+   */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    const button = document.activeElement;
+    if (button) {
+      button.accessiblePopup = "true";
+      this.openButton = button;
+    }
+    this.toggleMenu(new CustomEvent("toggle"));
+  }
+  /**
+   * Hides the slideout dialog and puts focus back to the original element
+   * that triggered the slideout (if we’re still in the same view).
+   */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggleMenu(new CustomEvent("toggle"));
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    if (Build.isServer) {
-      const toggles = Array.from(this.element.children).filter(el => el.matches("[slot='toggle']"));
-      if (toggles.length > 0) {
-        this.openButton = toggles[0];
-      }
-    }
-    else {
-      this.openButton = this.element.querySelector(":scope > [slot='toggle']");
-    }
-    if (this.openButton) {
-      this.openButton.accessiblePopup = "true";
-      this.openButton.accessibleExpanded = false;
-      this.openButton.addEventListener("click", e => {
+    const button = this.opener && document.getElementById(this.opener);
+    if (button) {
+      button.accessiblePopup = "true";
+      button.accessibleExpanded = false;
+      button.addEventListener("click", e => {
         e.stopPropagation();
         e.preventDefault();
+        this.openButton = button;
         this.onClick(e);
       });
-      this.openButton = this.openButton;
     }
+    this.teleport = new Teleport(this.element);
   }
   async componentDidLoad() {
     if (Build.isServer) {
@@ -112,7 +136,6 @@ export class DuetSlideout {
       this.handleBodyScrolling();
     });
     this.intersectionObserver.observe(this.dialog);
-    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -137,7 +160,8 @@ export class DuetSlideout {
    * Sets focus. Use this method instead of the global focus().
    */
   async setFocus(options) {
-    this.openButton.focus(options);
+    var _a;
+    (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /**
    * render() function
@@ -148,7 +172,7 @@ export class DuetSlideout {
       background: getColorByName(this.backgroundColor, this.theme),
     };
     const exitTranslation = getLocaleString(this.exitLangObject);
-    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { class: {
+    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: {
         "desktop-bg": true,
         hidden: !this.open,
       }, onClick: () => {
@@ -219,6 +243,23 @@ export class DuetSlideout {
         "reflect": true,
         "defaultValue": "false"
       },
+      "opener": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the DuetMenuBarButton or DuetButton that opens the menu."
+        },
+        "attribute": "opener",
+        "reflect": false
+      },
       "backgroundColor": {
         "type": "string",
         "mutable": true,
@@ -294,6 +335,44 @@ export class DuetSlideout {
           "tags": []
         }
       },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "HTMLDuetButtonElement": {
+              "location": "global",
+              "id": "global::HTMLDuetButtonElement"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered\nthe slideout so that focus can be moved back to this specific element when\nthe slideout dialog is closed.",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the slideout dialog and puts focus back to the original element\nthat triggered the slideout (if we\u2019re still in the same view).",
+          "tags": []
+        }
+      },
       "setFocus": {
         "complexType": {
           "signature": "(options?: FocusOptions) => Promise<void>",

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

@@ -4,7 +4,6 @@
 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() {
     /**
@@ -24,9 +23,6 @@ export class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

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

@@ -3,7 +3,6 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
 export class DuetSlideoutLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -22,9 +21,6 @@ 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,7 +5,6 @@ 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() {
@@ -61,9 +60,6 @@ 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,7 +3,6 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
 export class DuetSlideoutPanelDropdown {
   constructor() {
     this.onClick = () => {
@@ -30,9 +29,6 @@ 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,7 +6,6 @@ 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.
@@ -48,9 +47,6 @@ 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,7 +4,6 @@
 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 = "";
@@ -42,9 +41,6 @@ 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,7 +5,6 @@ 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, ""))];
@@ -73,9 +72,6 @@ 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,7 +5,6 @@ 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() {
     /**
@@ -57,9 +56,6 @@ 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,7 +4,6 @@
 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 = "";
@@ -20,9 +19,6 @@ 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,7 +5,6 @@ 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() {
     /**
@@ -33,9 +32,6 @@ 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,7 +3,6 @@
  */
 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;
@@ -18,9 +17,6 @@ export class DuetTab {
   /**
    * Component lifecycle events.
    */
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
   }

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

@@ -6,7 +6,6 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button
@@ -119,7 +118,6 @@ export class DuetTabGroup {
   }
   componentDidLoad() {
     this.scrollToActive();
-    nudge(this);
   }
   /**
    * This method allows you to open any of the tabs by calling the method and

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

@@ -5,7 +5,6 @@ import { h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { nudge } from "../../utils/nudge";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
   if (maxlength == null) {
     return;
@@ -135,9 +134,6 @@ export class DuetTextarea {
       console.warn("[DUET WARNING]: counter requires counter-label to be set");
     }
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * Sets focus on the specified `duet-textarea`. Use this method instead of the global
    * `textarea.focus()`.

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

@@ -4,7 +4,6 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { nudge } from "../../utils/nudge";
 export class DuetToggle {
   constructor() {
     /**
@@ -54,9 +53,6 @@ export class DuetToggle {
       this.value = this.identifier;
     }
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * Sets focus on the specified `duet-toggle`. Use this method instead of the global
    * `input.focus()`.

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -4,7 +4,6 @@
 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 DuetToolbarDropdown {
   constructor() {
     this.onClick = () => {
@@ -28,9 +27,6 @@ export class DuetToolbarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       this.open = false;

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -4,7 +4,6 @@
 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 DuetToolbarDropdownLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -20,9 +19,6 @@ export class DuetToolbarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-toolbar-dropdown");

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

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