@duetds/components 7.0.13 → 7.1.0

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

@@ -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 DuetChip {
   constructor() {
     /**
@@ -11,12 +12,11 @@ export class DuetChip {
      */
     this.chipId = createID("DuetChip");
     this.popupSetUp = () => {
-      const popup = this.element.querySelector("duet-popup-menu");
+      const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
       if (popup) {
-        this.popup = popup;
+        this.popupElement = popup;
         popup.controller = this.element;
-        const labelSpan = this.element.querySelector("span");
-        const originalText = labelSpan.textContent;
+        const originalText = this.element.textContent;
         const originalValue = this.value;
         if (!popup.id) {
           popup.id = "popup-menu";
@@ -36,13 +36,13 @@ export class DuetChip {
             if (!item.active) {
               clearActive();
               item.active = true;
-              labelSpan.textContent = item.innerText;
+              this.element.textContent = item.innerText;
               this.value = value;
               this.checked = true;
             }
             else {
               clearActive();
-              labelSpan.textContent = originalText;
+              this.element.textContent = originalText;
               this.value = originalValue;
               this.checked = false;
             }
@@ -51,8 +51,8 @@ export class DuetChip {
             // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
             // open the popup again. Firefox does not have this behavior.
             setTimeout(() => {
-              if (this.popup.isOpen()) {
-                this.popup.hide();
+              if (this.popupElement.isOpen()) {
+                this.popupElement.hide();
               }
             });
           });
@@ -113,10 +113,10 @@ export class DuetChip {
         evt.preventDefault();
         return;
       }
-      if (this.popup) {
+      if (this.popupElement) {
         evt.stopPropagation();
         evt.preventDefault();
-        this.popup.toggle();
+        this.popupElement.toggle();
       }
     };
     /**
@@ -128,10 +128,11 @@ export class DuetChip {
       this.element.remove();
     };
     this.focus = false;
-    this.popup = undefined;
+    this.popupElement = undefined;
     this.popupOpen = undefined;
     this.accessibleLabel = undefined;
     this.variation = "button";
+    this.popup = undefined;
     this.icon = "";
     this.theme = "";
     this.identifier = undefined;
@@ -157,6 +158,9 @@ export class DuetChip {
     inheritGlobalTheme(this);
     this.popupSetUp();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -171,7 +175,7 @@ export class DuetChip {
       [`duet-chip-${this.variation}`]: true,
       "duet-chip-focus": this.focus,
       "duet-chip-has-icon": !!this.icon,
-      "duet-chip-has-popup": this.variation === "filter" && !!this.popup,
+      "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
       "duet-chip-radio-checked": this.variation === "radio" && this.checked,
@@ -183,7 +187,7 @@ export class DuetChip {
       onBlur: this.onBlur,
       ref: el => (this.focusableElement = el),
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popupElement && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
   }
   static get is() { return "duet-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -239,6 +243,23 @@ export class DuetChip {
         "reflect": false,
         "defaultValue": "\"button\""
       },
+      "popup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the DuetPopupMenu that is controlled by the chip."
+        },
+        "attribute": "popup",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -377,7 +398,7 @@ export class DuetChip {
   static get states() {
     return {
       "focus": {},
-      "popup": {},
+      "popupElement": {},
       "popupOpen": {}
     };
   }

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

@@ -9,6 +9,7 @@ import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-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 label - Label content.
@@ -140,6 +141,9 @@ export class DuetChoice {
     this.hasLabel = hasSlot(this.element, "label");
     this.hasBeforeText = hasSlot(this.element, "before-text");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },

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

@@ -3,6 +3,7 @@
  */
 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 {
@@ -87,6 +88,9 @@ export class DuetChoiceGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Local methods
    */

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

@@ -7,6 +7,7 @@ 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
@@ -81,6 +82,9 @@ 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,6 +4,7 @@
 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() {
     /**
@@ -32,6 +33,9 @@ export class DuetContactCard {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetCookieConsent {
   constructor() {
     this.handleClick = e => {
@@ -28,6 +29,9 @@ 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,6 +6,7 @@ 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";
@@ -176,6 +177,9 @@ 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,6 +6,7 @@ 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() {
@@ -66,6 +67,9 @@ 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,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetEmptyState {
   constructor() {
     this.theme = "";
@@ -15,6 +16,9 @@ export class DuetEmptyState {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -111,4 +115,5 @@ export class DuetEmptyState {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

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

@@ -5,6 +5,7 @@ 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.
@@ -34,6 +35,9 @@ 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,6 +8,7 @@ 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" },
@@ -85,6 +86,9 @@ 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,6 +14,7 @@ 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";
@@ -258,6 +259,9 @@ 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,6 +3,7 @@
  */
 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";
 /**
@@ -25,6 +26,9 @@ 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.css

@@ -124,6 +124,21 @@
   margin: 0;
   background: none;
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 490px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 540px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-campaign, .duet-hero.duet-hero-section {
+    min-height: 620px;
+  }
+}
 .duet-hero.duet-hero-campaign .background-area, .duet-hero.duet-hero-section .background-area {
   height: 1px;
   margin-bottom: -1px;
@@ -490,6 +505,21 @@
     margin: 8rem 0 13rem;
   }
 }
+@media (min-width: 48em) {
+  .duet-hero.duet-hero-section {
+    min-height: 490px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-section {
+    min-height: auto;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-hero.duet-hero-section {
+    min-height: 560px;
+  }
+}
 @media (min-width: 62em) {
   .duet-hero.duet-hero-section .background img {
     width: 100%;

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

@@ -6,6 +6,7 @@ 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
@@ -71,6 +72,9 @@ 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,6 +3,7 @@
  */
 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 {
@@ -32,6 +33,9 @@ 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,6 +9,7 @@ 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,
@@ -226,6 +227,7 @@ export class DuetInput {
         this.isPasswordRevealed = false;
       });
     }
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);

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

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

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

@@ -7,6 +7,7 @@ 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";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part block-chevron - piercing selector for styling the block chevron
@@ -32,6 +33,9 @@ export class DuetLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",
@@ -372,4 +376,5 @@ export class DuetLink {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

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

@@ -4,6 +4,7 @@
 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.
@@ -111,6 +112,7 @@ 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,6 +4,7 @@
 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, ""))];
@@ -37,6 +38,9 @@ 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,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 DuetMenuBarDropdown {
   constructor() {
     /**
@@ -52,6 +53,9 @@ 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,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 DuetMenuBarDropdownLink {
   constructor() {
     this.getVariant = () => {
@@ -28,6 +29,9 @@ 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,6 +4,7 @@
 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() {
     /**
@@ -32,6 +33,9 @@ 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,6 +8,7 @@ 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.
@@ -115,6 +116,7 @@ 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,6 +6,7 @@ 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];
@@ -161,6 +162,9 @@ export class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }