@duetds/components 7.1.3 → 8.0.1

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

@@ -3,18 +3,10 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
-import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
-const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 export class DuetChoiceGroup {
   constructor() {
     this.choiceGroupName = "duet-choice-group";
-    this.getChoices = () => {
-      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
-    };
-    this.isMyChoice = (choice) => {
-      return this.getChoices().includes(choice);
-    };
+    this.choices = new Set();
     /**
      * Component event handling.
      */
@@ -23,12 +15,21 @@ export class DuetChoiceGroup {
         return;
       }
       const selectedChoice = ev.target;
-      if (selectedChoice && this.isMyChoice(selectedChoice)) {
+      if (selectedChoice && this.choices.has(selectedChoice)) {
         this.value = selectedChoice.value;
       }
-      // Prevent events from bubbling up the DOM tree in case
-      // this group is a sub-group of another choice group.
-      ev.cancelBubble = true;
+    };
+    this.onChoiceReady = (ev) => {
+      const choice = ev.target;
+      if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
+        this.choices.add(choice);
+        this.updateChoices();
+      }
+    };
+    this.onChoiceRemove = (ev) => {
+      const choice = ev.target;
+      this.choices.delete(choice);
+      this.updateChoices();
     };
     this.direction = "vertical";
     this.margin = "auto";
@@ -52,28 +53,7 @@ export class DuetChoiceGroup {
     if (Build.isServer) {
       return;
     }
-    const el = this.element;
-    if (this.value === undefined) {
-      const choice = findCheckedOption(el, duetChoiceSelector);
-      if (choice !== undefined) {
-        await choice.componentOnReady();
-        if (this.value === undefined) {
-          this.value = choice.value;
-        }
-      }
-    }
-    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
-      if (newOption !== undefined) {
-        newOption.componentOnReady().then(() => {
-          if (this.isMyChoice(newOption)) {
-            this.value = newOption.value;
-          }
-        });
-      }
-      else {
-        this.updateChoices();
-      }
-    });
+    this.initialValue = this.value;
     this.updateChoices();
   }
   disconnectedCallback() {
@@ -88,23 +68,15 @@ export class DuetChoiceGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * Local methods
    */
   async updateChoices() {
     var _a;
-    /**
-     * Make sure we get all choices first so values are up to date prior
-     * to caching the choice group value
-     */
-    const choices = this.getChoices();
-    const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.element.getAttribute("value");
+    const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins
-    for (const choice of choices) {
+    for (const choice of this.choices) {
       choice.name = this.name;
       choice.groupDisabled = this.disabled;
       choice.groupDirection = this.direction;
@@ -114,6 +86,9 @@ export class DuetChoiceGroup {
         // and we haven't found a checked yet
         hasChecked = true;
         choice.checked = true;
+        if (typeof this.value === "undefined") {
+          this.value = value;
+        }
       }
       else {
         // This choice doesn't have the correct value or the choice group has been already checked
@@ -130,7 +105,7 @@ export class DuetChoiceGroup {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onDuetChange: this.onSelect, class: {
+    return (h(Host, { onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
         horizontal: this.direction === "horizontal",
         "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
         "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",

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

@@ -7,7 +7,6 @@ import { h, Host } from "@stencil/core";
 import { hasSlot, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
-import { nudge } from "../../utils/nudge";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
@@ -82,9 +81,6 @@ export class DuetCollapsible {
     inheritGlobalTheme(this);
     this.hasAfterHeading = hasSlot(this.element, "after-heading");
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
    * `collapsible.focus()`.

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

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

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

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

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -6,7 +6,6 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
 import { DatePickerMonth } from "./date-picker-month";
@@ -177,9 +176,6 @@ export class DuetDatePicker {
     this.determineValidity(parseISODate(this.value));
     this.updateInternalValue();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   componentDidUpdate() {
     // we want to run this code _after_ render
     // to ensure all elements are visible (and thus focusable)

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -6,7 +6,6 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { fieldSorter } from "../../utils/js-utils";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { TableData } from "./duet-editable-table-tabledata";
 export class DuetEditableTable {
   constructor() {
@@ -67,9 +66,6 @@ export class DuetEditableTable {
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
     this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

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

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

@@ -5,7 +5,6 @@ import { h, Host } from "@stencil/core";
 import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-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 tooltip - Use to place a tooltip alongside the fieldset label.
@@ -35,9 +34,6 @@ export class DuetFieldset {
     inheritGlobalTheme(this);
     this.checkHasTooltip();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -8,7 +8,6 @@ import { Build, Fragment, h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
@@ -86,9 +85,6 @@ export class DuetFooter {
       ? Array.from(this.element.children).filter(el => el.matches("[slot='info']")).length > 0
       : !!this.element.querySelector(":scope > [slot='info']");
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",

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

@@ -14,7 +14,6 @@ import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
@@ -259,9 +258,6 @@ export class DuetHeader {
     inheritGlobalTheme(this);
     this.refresh();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate

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

@@ -3,7 +3,6 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
 import { sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
@@ -26,9 +25,6 @@ export class DuetHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   /**
    * render() function
    * Always the last one in the class.

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

@@ -6,7 +6,6 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -74,9 +73,6 @@ export class DuetHero {
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",

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

@@ -3,7 +3,6 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
 import { getColorByName, rgbaColorFromRgb } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
@@ -33,9 +32,6 @@ export class DuetIcon {
     }
     this.loadIcon();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
     if (this.icon) {

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

@@ -9,7 +9,6 @@ import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -227,7 +226,6 @@ export class DuetInput {
         this.isPasswordRevealed = false;
       });
     }
-    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);

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

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

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

@@ -7,7 +7,6 @@ import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { breakpointToToken } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
@@ -39,9 +38,6 @@ export class DuetLink {
     inheritGlobalTheme(this);
     this.initMediaQuery();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",

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

@@ -4,7 +4,6 @@
 import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
-import { nudge } from "../../utils/nudge";
 /**
  * @slot center - Slot for content in center.
  * @slot right - Slot for content in right side.
@@ -112,7 +111,6 @@ export class DuetMenuBar {
       this.scrollbarCheck();
       this.scrollToActive();
     }, 0);
-    nudge(this);
   }
   onWindowResize() {
     clearTimeout(this.resizeTimer);

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -4,7 +4,6 @@
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { nudge } from "../../utils/nudge";
 export class DuetMenuBarButton {
   constructor() {
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
@@ -38,9 +37,6 @@ export class DuetMenuBarButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-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 DuetMenuBarDropdown {
   constructor() {
     /**
@@ -53,9 +52,6 @@ export class DuetMenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-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 DuetMenuBarDropdownLink {
   constructor() {
     this.getVariant = () => {
@@ -29,9 +28,6 @@ export class DuetMenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-menu-bar-dropdown");

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

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

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

@@ -8,7 +8,6 @@ import { createID } from "../../utils/create-id";
 import { focusElement, 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";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
@@ -116,7 +115,6 @@ export class DuetModal {
       this.open = true;
       this.modalEl.classList.add("duet-disable-transitions");
     }
-    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });

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

@@ -6,7 +6,6 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
-import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
   return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
@@ -162,9 +161,6 @@ export class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
-  componentDidLoad() {
-    nudge(this);
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

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

@@ -4,7 +4,6 @@
 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();
@@ -26,9 +25,6 @@ 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,7 +5,6 @@ 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() {
@@ -47,9 +46,6 @@ 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,7 +9,6 @@ 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");
@@ -235,9 +234,6 @@ 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,7 +3,6 @@
  */
 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.
  */
@@ -19,9 +18,6 @@ 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,7 +7,6 @@ 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 { parsePossibleJSON } from "../../utils/string-utils";
 import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
@@ -150,7 +149,6 @@ 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,7 +3,6 @@
  */
 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
@@ -23,9 +22,6 @@ 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

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