@duetds/components 8.5.1 → 8.5.3

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

@@ -5,8 +5,7 @@ import { Build, h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsPleaseWaitDefaults } from "../../common-strings";
-import { createID } from "../../utils/create-id";
-import { focusElement, FocusGuard } from "../../utils/focus-utils";
+import { focusElement } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
@@ -22,11 +21,6 @@ const TRANSITION_MS = 600;
 export class DuetModal {
     constructor() {
         var _a, _b;
-        /**
-         * Own Properties.
-         */
-        this.modalId = createID("DuetModal");
-        this.slotDefaultId = createID("DuetModal-default-slot");
         this.hasStickyHeader = false;
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
@@ -78,7 +72,7 @@ export class DuetModal {
             }
             this.focusedElBeforeOpen = document.activeElement;
             disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             this.slotContainerEl.querySelectorAll(".duet-loader-message").forEach(el => el.remove());
             setTimeout(() => {
                 if (this.variation === "loader") {
@@ -102,7 +96,7 @@ export class DuetModal {
             this.modalEl.classList.remove("duet-disable-transitions");
             enableBodyScroll(this.modalEl);
             this.duetClose.emit();
-            this.teleport.resume(TRANSITION_MS);
+            this.teleport.removeInertFromSiblings(TRANSITION_MS);
             setTimeout(() => {
                 focusElement(this.focusedElBeforeOpen);
             }, TRANSITION_MS);
@@ -125,7 +119,6 @@ export class DuetModal {
         if (Build.isServer) {
             return;
         }
-        this.teleport = new Teleport(this.element);
         if (this.active) {
             // This specific line below can’t be moved to componentWillLoad()
             // as it breaks body scroll enabling.
@@ -134,6 +127,15 @@ export class DuetModal {
         }
     }
     connectedCallback() {
+        if (Build.isServer) {
+            return;
+        }
+        if (!this.teleport) {
+            this.teleport = new Teleport(this.element);
+        }
+        if (this.teleport) {
+            this.teleport.activate();
+        }
         connectLanguageChangeObserver(this, [
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
             { prop: "accessibleLoaderAnnouncement", defaults: "accessibleLoaderAnnouncementDefaults" },
@@ -141,7 +143,9 @@ export class DuetModal {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        enableBodyScroll(this.modalEl);
+        if (this.modalEl) {
+            enableBodyScroll(this.modalEl);
+        }
     }
     /**
      * Component event handling.
@@ -208,7 +212,7 @@ export class DuetModal {
      * Always the last one in the class.
      */
     render() {
-        var _a;
+        var _a, _b;
         let iconColor = "primary";
         let closeColor = "secondary";
         const closingButton = (h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
@@ -216,13 +220,13 @@ export class DuetModal {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
         }
-        return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+        return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -244,7 +248,7 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), this.variation === "loader" && (h("div", { class: "duet-modal-spinner" }, h("duet-spinner", { size: "large", color: "primary" }))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId, ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { class: "duet-modal-spinner" }, h("duet-spinner", { size: "large", color: "primary" }))), h("div", { class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", null)))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -402,7 +406,7 @@ export class DuetModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "By default the heading is used as target for aria-labelledby, and it overrides this label.\nIf you wish to skip the heading, you must set this label."
+                    "text": "By default the heading is used aria-label for the modal.\nIf you wish to use something else then you must set this label."
                 },
                 "attribute": "accessible-label",
                 "reflect": false

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

@@ -35,7 +35,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("div", { style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { "aria-hidden": "true" }, h("div", { style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

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

@@ -59,7 +59,6 @@ export class DuetPopupMenu {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.teleport = new Teleport(this.element);
     }
     componentDidLoad() {
         if (!Build.isServer) {
@@ -68,6 +67,15 @@ export class DuetPopupMenu {
     }
     connectedCallback() {
         this.handleControllerChange(this.controller, null);
+        if (Build.isServer) {
+            return;
+        }
+        if (!this.teleport) {
+            this.teleport = new Teleport(this.element);
+        }
+        if (this.teleport) {
+            this.teleport.activate();
+        }
     }
     disconnectedCallback() {
         if (this.openButton) {
@@ -176,7 +184,7 @@ export class DuetPopupMenu {
             if (this.openButton) {
                 this.openButton.accessibleExpanded = true;
             }
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             this.updatePlacement();
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
@@ -194,7 +202,7 @@ export class DuetPopupMenu {
                     this.focusOpenButton();
                 }
                 this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                this.teleport.resume();
+                this.teleport.removeInertFromSiblings();
             }, 200);
         }
     }

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

@@ -85,13 +85,18 @@ export class DuetSlideout {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
-        this.teleport = new Teleport(this.element);
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
         if (Build.isServer) {
             return;
         }
+        if (!this.teleport) {
+            this.teleport = new Teleport(this.element);
+        }
+        if (this.teleport) {
+            this.teleport.activate();
+        }
         if (this.opener) {
             this.setOpenButton(document.getElementById(this.opener));
             if (this.openButton) {
@@ -106,7 +111,9 @@ export class DuetSlideout {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        enableBodyScroll(this.dialog);
+        if (this.dialog) {
+            enableBodyScroll(this.dialog);
+        }
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
@@ -124,7 +131,7 @@ export class DuetSlideout {
                 this.openButton.accessibleExpanded = true;
             }
             const openPanel = this.getOpenPanel();
-            this.teleport.go(true);
+            this.teleport.makeSiblingsInert();
             disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
             if (openPanel) {
                 openPanel.setFocus();
@@ -142,7 +149,7 @@ export class DuetSlideout {
             setTimeout(() => {
                 focusElement(this.openButton);
                 enableBodyScroll(this.dialog);
-                this.teleport.resume();
+                this.teleport.removeInertFromSiblings();
             }, 200);
         }
     }

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.css

@@ -61,6 +61,22 @@
   align-items: center;
   justify-content: center;
 }
+.duet-submenu-bar-item .leading-icon,
+.duet-submenu-bar-item .trailing-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar-item .leading-icon,
+  .duet-submenu-bar-item .trailing-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow {
+  width: 7px;
+  height: 7px;
+}
 .duet-submenu-bar-item .trailing-icon {
   position: absolute;
   right: 12px;

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.js

@@ -1,23 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-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";
 export class DuetSubmenuBarItem {
     constructor() {
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "small";
         this.theme = "";
         this.active = false;
         this.url = undefined;
@@ -33,26 +21,6 @@ export class DuetSubmenuBarItem {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     handleEscape(e) {
         if (isEscapeKey(e)) {
             const dropdown = this.element.closest("duet-submenu-bar");
@@ -72,10 +40,11 @@ export class DuetSubmenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { theme: this.theme, name: this.leadingIcon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { class: {
+        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { class: {
                 "trailing-icon": true,
+                "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : this.iconSize, color: "currentColor" }))))));
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: "auto", color: "currentColor" }))))));
     }
     static get is() { return "duet-submenu-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -252,11 +221,6 @@ export class DuetSubmenuBarItem {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
@@ -22,23 +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);
     }
     connectedCallback() {
         subscribeTabbingChange(this);
+        if (Build.isServer) {
+            return;
+        }
+        if (!this.teleport) {
+            this.teleport = new Teleport(this.element);
+        }
+        if (this.teleport) {
+            this.teleport.activate();
+        }
     }
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
@@ -269,10 +269,4 @@ 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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { media_query_large, media_query_medium } from "@duetds/tokens/lib/tokens.json";
-import { arrow, computePosition, flip, shift } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, shift } from "@floating-ui/dom";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
@@ -121,6 +121,7 @@ export class DuetTooltip {
         this.updatePlacement();
         if (this.active) {
             this.openTooltip();
+            await this.handleActiveChange(this.active);
         }
         this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
         this.intersectionObserver.observe(this.element);
@@ -134,23 +135,6 @@ export class DuetTooltip {
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
     }
-    /**
-     * Component event handling.
-     */
-    onScroll() {
-        clearTimeout(this.scrollTimer);
-        this.scrollTimer = setTimeout(() => {
-            if (this.active) {
-                this.updatePlacement();
-            }
-        }, 100);
-    }
-    handleWindowResize() {
-        clearTimeout(this.resizeTimer);
-        this.resizeTimer = setTimeout(() => {
-            this.updatePlacement();
-        }, 100);
-    }
     handleDocumentClick(e) {
         if (!this.active) {
             return;
@@ -173,10 +157,10 @@ export class DuetTooltip {
     }
     async handleActiveChange(newActiveValue) {
         if (newActiveValue) {
-            setTimeout(() => this.updatePlacement(), 10);
+            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
         }
         else {
-            setTimeout(() => this.updatePlacement(), 300);
+            this.autoUpdateCleanup();
         }
     }
     /**
@@ -554,18 +538,6 @@ export class DuetTooltip {
     }
     static get listeners() {
         return [{
-                "name": "scroll",
-                "method": "onScroll",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "handleWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
                 "name": "click",
                 "method": "handleDocumentClick",
                 "target": "document",

package/lib/collection/utils/teleport.js

@@ -3,10 +3,11 @@
  */
 /**
  * Teleport helps resolving z-index issues of overlapping popup elements.
- * Initiate it in your component's willLoad or didLoad lifecycle hook.
- * When you open the popup, call teleport.go() and move focus to the popup.
- * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
- * If your popup has closing animation, use the timeout parameter.
+ * Initiate it in your component's connectedCallback.
+ * Call activate() to teleport the object.
+ * Call deactivate() to resume the object to its original place.
+ * Call makeSiblingsInert() to add inert attribute to sibling elements.
+ * Call removeInertFromSiblings() to remove inert attribute from sibling elements.
  */
 export class Teleport {
     constructor(element, target) {
@@ -15,44 +16,51 @@ export class Teleport {
         this.target = target || document.body;
         this.teleportId = `${Math.random()}-${Date.now()}`.substring(2);
     }
-    /**
-     * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
-     */
-    go(makeSiblingsInert = false) {
-        const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport !== null && skipTeleport !== "false") {
+    activate() {
+        if (this._isTeleportSkipped() || this.isActive) {
             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);
-        }
-        if (makeSiblingsInert) {
-            this._makeSiblingsInert();
-        }
-        this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
-        this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
         this.isActive = true;
+        this._activate();
     }
-    resume(delay = 0) {
-        const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport !== null && skipTeleport !== "false") {
+    deactivate() {
+        if (this._isTeleportSkipped() || !this.isActive) {
+            return;
+        }
+        this.isActive = false;
+        this._deactivate();
+    }
+    makeSiblingsInert() {
+        if (this._isTeleportSkipped() || !this.isActive) {
             return;
         }
-        if (!this.isActive) {
+        this._makeSiblingsInert();
+    }
+    removeInertFromSiblings(delay = 0) {
+        if (this._isTeleportSkipped() || !this.isActive) {
             return;
         }
-        this.isActive = false;
         if (delay) {
-            setTimeout(this._resume.bind(this), delay);
+            setTimeout(this._removeInertFromSiblings.bind(this), delay);
         }
         else {
-            this._resume();
+            this._removeInertFromSiblings();
+        }
+    }
+    _isTeleportSkipped() {
+        const skipTeleport = this.element.getAttribute("skip-teleport");
+        return skipTeleport !== null && skipTeleport !== "false";
+    }
+    _activate() {
+        if (!this.element.dataset.reactPortal) {
+            this.stub = document.createElement("template");
+            this.element.insertAdjacentElement("afterend", this.stub);
+            this.target.appendChild(this.element);
         }
+        this.deletionObserver = new MutationObserver(this._deletionObserverCallback.bind(this));
+        this.deletionObserver.observe(document.documentElement, { childList: true, subtree: true });
     }
-    _resume() {
+    _deactivate() {
         if (!this.element.dataset.reactPortal) {
             this.stub.insertAdjacentElement("beforebegin", this.element);
             this.stub.remove();

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-ce8ea46e.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-cc32aec2.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-c622edcc.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-4c8393bf.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-47534dc7.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-e20d474e.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-e61e745f.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-17cca138.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-33937fd7.js';
 import { h as hasSlot, c as checkNamedSlotElement } from './p-d87f6dd5.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { g as getColorByName } from './p-25c80cdb.js';
-import { d as defineCustomElement$3 } from './p-2a725cd8.js';
-import { d as defineCustomElement$2 } from './p-e8ab4056.js';
+import { d as defineCustomElement$3 } from './p-9d84642c.js';
+import { d as defineCustomElement$2 } from './p-b6978bc4.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,
@@ -73,9 +73,6 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
         this.hasActionSlot = hasSlot(this.element, "action");
         checkNamedSlotElement(this.element, "heading", "span");
         this.setButtonSize();
-        setTimeout(() => {
-            this.checkBannerSize();
-        }, 0);
     }
     connectedCallback() {
         window.addEventListener("resize", this.checkBannerSize);
@@ -83,6 +80,9 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
     disconnectedCallback() {
         window.removeEventListener("resize", this.checkBannerSize);
     }
+    componentDidRender() {
+        this.checkBannerSize();
+    }
     /**
      * render() function
      * Always the last one of the class.

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-e61e745f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-17cca138.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-e44c0eff.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
-import { d as defineCustomElement$3 } from './p-e8ab4056.js';
-import { d as defineCustomElement$2 } from './p-18f2ebcd.js';
+import { d as defineCustomElement$3 } from './p-b6978bc4.js';
+import { d as defineCustomElement$2 } from './p-f35c9559.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>"};
 

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-e61e745f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-17cca138.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getLocaleString } from './p-2e36d5bf.js';
 import { g as getColorByName } from './p-25c80cdb.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-a33222ce.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-8bfe29b8.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;