@duetds/components 7.0.12 → 7.1.0

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

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

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

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

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

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

@@ -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.

package/lib/collection/components/duet-tooltip/duet-tooltip-button.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { nudge } from "../../utils/nudge";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -21,6 +22,9 @@ export class DuetTooltipButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   async setFocus(options) {
     if (this.buttonElement) {
       this.buttonElement.focus(options);

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

@@ -4,6 +4,8 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
+import { nudge } from "../../utils/nudge";
+import { Teleport } from "../../utils/teleport";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
@@ -20,11 +22,23 @@ export class DuetTooltipPopup {
     this.placement = undefined;
     this.accessibleCloseLabel = undefined;
   }
+  handleActiveChange() {
+    if (this.active) {
+      this.teleport.go();
+    }
+    else {
+      this.teleport.resume(200);
+    }
+  }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.teleport = new Teleport(this.element);
+  }
+  componentDidLoad() {
+    nudge(this);
   }
   async getArrowElement() {
     return this.arrowEl;
@@ -245,4 +259,10 @@ export class DuetTooltipPopup {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "handleActiveChange"
+      }];
+  }
 }

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { Teleport } from "../../utils/teleport";
+import { nudge } from "../../utils/nudge";
 export class DuetTooltip {
   constructor() {
     /**
@@ -25,7 +25,6 @@ export class DuetTooltip {
     this.openTooltip = () => {
       this.active = true;
       this.focusTarget = "tooltip";
-      this.teleport.go();
     };
     this.closeTooltip = (moveFocusToButton = false) => {
       this.active = false;
@@ -33,7 +32,6 @@ export class DuetTooltip {
         this.focusTarget = "trigger";
       }
       setTimeout(() => {
-        this.teleport.resume();
         this.updatePlacement();
       }, 200);
     };
@@ -102,7 +100,6 @@ export class DuetTooltip {
   async componentDidLoad() {
     this.arrowEl = await this.popupElement.getArrowElement();
     this.contentEl = await this.popupElement.getContentElement();
-    this.teleport = new Teleport(this.popupElement);
     if (!Build.isServer) {
       this.updatePlacement();
     }
@@ -111,6 +108,7 @@ export class DuetTooltip {
     }
     this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
     this.intersectionObserver.observe(this.element);
+    nudge(this);
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -173,7 +171,7 @@ export class DuetTooltip {
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
-      this.updatePlacement();
+      setTimeout(() => this.updatePlacement(), 10);
     }
     else {
       setTimeout(() => this.updatePlacement(), 300);

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

@@ -6,6 +6,7 @@ import { Fragment, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
  * @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.
@@ -56,6 +57,9 @@ export class DuetTray {
     inheritGlobalTheme(this);
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },

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

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import errorCodes from "./errorcodes.json";
 import { getI18nError } from "./errorcodes.utils";
 import { UploadItemHeader } from "./upload-item-header";
@@ -664,6 +665,9 @@ export class DuetUpload {
     this.onReady();
     this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   componentWillRender() {
     // listen to the events from the component
     this.verifyValidity();

package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetUploadAriaStatus {
   constructor() {
     /**
@@ -55,6 +56,12 @@ export class DuetUploadAriaStatus {
       this.getStatusMessage();
     }
   }
+  /**
+   * Component lifecycle events.
+   */
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -184,6 +191,7 @@ export class DuetUploadAriaStatus {
       "statusMessage": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "valid",

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getI18nError } from "../duet-upload/errorcodes.utils";
 import { formatBytes } from "../duet-upload/upload.helpers";
 export class DuetUploadItem {
@@ -40,6 +41,9 @@ export class DuetUploadItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * focusActionButton.
    */
@@ -300,4 +304,5 @@ export class DuetUploadItem {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -2,7 +2,11 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { nudge } from "../../utils/nudge";
 export class DuetVisuallyHidden {
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -22,4 +26,5 @@ export class DuetVisuallyHidden {
       "$": ["duet-visually-hidden.css"]
     };
   }
+  static get elementRef() { return "element"; }
 }

package/lib/collection/utils/nudge.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function is a workaround for a bug in Chromium-based browsers, where building the accessibility tree fails
+ * with nested shadow roots. See https://atlassian.lahitapiola.fi/jira/browse/DUET-780
+ */
+export function nudge(component) {
+  setTimeout(() => {
+    const el = document.createElement("template");
+    component.element.appendChild(el);
+    el.remove();
+  }, 10);
+}

package/lib/collection/utils/teleport.js

@@ -10,7 +10,6 @@
  */
 export class Teleport {
   constructor(element, target) {
-    this.isReact = this._isReact();
     this.isActive = false;
     this.element = element;
     this.target = target || document.body;
@@ -20,13 +19,12 @@ export class Teleport {
    * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
    */
   go(makeSiblingsInert = false) {
-    // Teleporting breaks modals in React
-    if (this.isReact && makeSiblingsInert) {
-      return;
+    // React handles teleporting itself with portals
+    if (!this.element.dataset.reactPortal) {
+      this.stub = document.createElement("template");
+      this.element.insertAdjacentElement("afterend", this.stub);
+      this.target.appendChild(this.element);
     }
-    this.stub = document.createElement("div");
-    this.element.insertAdjacentElement("afterend", this.stub);
-    this.target.appendChild(this.element);
     if (makeSiblingsInert) {
       this._makeSiblingsInert();
     }
@@ -47,8 +45,10 @@ export class Teleport {
     }
   }
   _resume() {
-    this.stub.insertAdjacentElement("beforebegin", this.element);
-    this.stub.remove();
+    if (!this.element.dataset.reactPortal) {
+      this.stub.insertAdjacentElement("beforebegin", this.element);
+      this.stub.remove();
+    }
     this._removeInertFromSiblings();
     this.deletionObserver.disconnect();
   }
@@ -92,7 +92,4 @@ export class Teleport {
       }
     });
   }
-  _isReact() {
-    return !!Object.keys(document).find(key => key.includes("react"));
-  }
 }

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-43198798.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-479fa83d.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-0aba8228.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-6816fd1b.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-4c347387.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-53fba128.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,12 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b74fb07.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { n as nudge } from './p-3ae39071.js';
 import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$4 } from './p-d7be7de5.js';
-import { d as defineCustomElement$3 } from './p-3186fb9f.js';
-import { d as defineCustomElement$2 } from './p-ed5d7c83.js';
+import { d as defineCustomElement$4 } from './p-99ec82e5.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-decdd69c.js';
 
 const duetBannerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 
@@ -35,6 +36,9 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     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/dist-custom-elements/duet-breadcrumb.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b74fb07.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-03baceb5.js';
-import { d as defineCustomElement$2 } from './p-3186fb9f.js';
+import { n as nudge } from './p-3ae39071.js';
+import { d as defineCustomElement$2 } from './p-e611a3df.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 
@@ -32,6 +33,9 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b74fb07.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-03baceb5.js';
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-2b7ac761.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-6a66573f.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,10 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1b74fb07.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-3186fb9f.js';
-import { d as defineCustomElement$2 } from './p-ed5d7c83.js';
+import { n as nudge } from './p-3ae39071.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-decdd69c.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 
@@ -24,6 +25,9 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-23e5fa7c.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-72c9e944.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-1b74fb07.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-1d90b10e.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
+import { n as nudge } from './p-3ae39071.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-03e72a70.js';
-import { d as defineCustomElement$3 } from './p-3186fb9f.js';
-import { d as defineCustomElement$2 } from './p-cb99a590.js';
+import { d as defineCustomElement$3 } from './p-e611a3df.js';
+import { d as defineCustomElement$2 } from './p-cedaa97e.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";
@@ -65,6 +66,9 @@ const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     this.hasHeadingSlot = !!this.element.querySelector(":scope > [slot='heading']");
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-33120def.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-67b279fa.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-1b13f80e.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-c2533c03.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;