npm - @duetds/components - Versions diffs - 7.0.13 → 7.1.0 - Mend

@duetds/components 7.0.13 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (828) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-item/duet-popup-menu-item.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -7,6 +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 { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
@@ -111,6 +112,7 @@ export class DuetSlideout {
       this.handleBodyScrolling();
     });
     this.intersectionObserver.observe(this.dialog);
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"; }
 }

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

@@ -6,6 +6,7 @@ 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
@@ -118,6 +119,7 @@ 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 CHANGED Viewed

@@ -5,6 +5,7 @@ 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;
@@ -134,6 +135,9 @@ 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 CHANGED Viewed

@@ -4,6 +4,7 @@
 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() {
     /**
@@ -53,6 +54,9 @@ 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 CHANGED Viewed

@@ -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 DuetToolbarDropdown {
   constructor() {
     this.onClick = () => {
@@ -27,6 +28,9 @@ 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 CHANGED Viewed

@@ -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 DuetToolbarDropdownLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -19,6 +20,9 @@ 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 CHANGED Viewed

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