@duetds/components 8.5.0 → 8.5.2

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

@@ -24,7 +24,7 @@ export class DuetFieldset {
         this.compactLabel = false;
         this.error = undefined;
         this.accessibleLiveError = "polite";
-        this.labelHeadingLevel = "h3";
+        this.labelHeadingLevel = "span";
         this.labelHidden = false;
     }
     /**
@@ -210,8 +210,8 @@ export class DuetFieldset {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetHeadingLevel",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "original": "DuetHeadingLevel | \"span\"",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\"",
                     "references": {
                         "DuetHeadingLevel": {
                             "location": "import",
@@ -228,7 +228,7 @@ export class DuetFieldset {
                 },
                 "attribute": "label-heading-level",
                 "reflect": false,
-                "defaultValue": "\"h3\""
+                "defaultValue": "\"span\""
             },
             "labelHidden": {
                 "type": "boolean",

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

@@ -182,7 +182,7 @@ export class DuetHero {
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("div", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", null)), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&

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

@@ -301,5 +301,7 @@
 .duet-icon svg {
   width: 100%;
   min-width: 100%;
+  overflow: clip;
   fill: currentColor;
+  overflow-clip-margin: 1px;
 }

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

@@ -37,6 +37,10 @@
   margin-right: 0 !important;
 }
 
+:host(.duet-m-0) {
+  margin: 0 !important;
+}
+
 .duet-link {
   display: inline;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -34,6 +34,7 @@ export class DuetLink {
         this.iconColor = "currentColor";
         this.iconBackground = null;
         this.iconResponsive = false;
+        this.margin = "auto";
         this.padding = "auto";
         this.isSmallScreen = false;
         this.isMediumScreen = false;
@@ -142,6 +143,7 @@ export class DuetLink {
         const Tag = !this.url ? "button" : "a";
         return (h(Host, { class: {
                 [`duet-link-${this.variation}`]: true,
+                "duet-m-0": this.margin === "none",
             } }, h(Tag, { href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
@@ -539,6 +541,30 @@ export class DuetLink {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component (only with \"button\" variation)"
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "padding": {
                 "type": "string",
                 "mutable": false,

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

@@ -150,19 +150,24 @@
   position: relative;
   height: 120px;
 }
+.duet-modal.loader .duet-modal-inner-slot-default {
+  position: relative;
+  backdrop-filter: blur(10px);
+}
 .duet-modal.loader duet-paragraph.duet-loader-message {
-  max-height: 0;
+  position: absolute;
   opacity: 0;
   transition: all 300ms ease;
-  transform: scale(0.9);
+  transform: scaleY(0);
+  transform-origin: top;
 }
 .duet-modal.loader duet-paragraph.duet-loader-message.show {
-  max-height: 100px;
   opacity: 1;
-  transform: scale(1);
+  transform: scaleY(1);
+  transform-origin: bottom;
 }
-.duet-modal.loader duet-paragraph.duet-loader-message:first-of-type::part(duet-paragraph) {
-  font-weight: 600;
+.duet-modal.loader duet-paragraph.duet-loader-message.show::part(duet-paragraph) {
+  backdrop-filter: blur(10px);
 }
 .duet-disable-transitions .duet-modal {
   transition: none;

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { createPage, isFocused } from "../../utils/test-utils";
+import { createPage } from "../../utils/test-utils";
 describe("duet-modal", () => {
     // we want to wait for modal to be focused to ensure close button
     // automatically receives focus when `active` prop is `true`
@@ -59,39 +59,6 @@ describe("duet-modal", () => {
         const element = await page.find("duet-modal >>> .duet-modal-container");
         expect(element).toHaveClass("duet-modal-active");
     });
-    it("traps focus", async () => {
-        const page = await createPage(`
-      <duet-modal
-        size="small"
-        heading="Modal test"
-        icon="damage-breakage"
-        class="duet-text-center"
-        active
-      >
-        <duet-paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam quis nostrud.
-        </duet-paragraph>
-        <duet-paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-        </duet-paragraph>
-        <duet-collapsible heading="Click to open details">
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-          Aperiam impedit, possimus minima repudiandae.
-        </duet-collapsible>
-      </duet-modal>
-    `);
-        await page.find("duet-modal");
-        await page.waitForFunction(isModalFocused);
-        // tab to link in light dom
-        await page.keyboard.press("Tab");
-        const collapsible = await page.find("duet-collapsible >>> button");
-        expect(await isFocused(collapsible)).toBe(true);
-        // focus should now go back to close button
-        await page.keyboard.press("Tab");
-        const closeButton = await page.find("duet-modal >>> duet-button");
-        expect(await isFocused(closeButton)).toBe(true);
-    });
     it.skip("closes on blur", async () => {
         const page = await createPage(`
       <duet-modal

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.
@@ -180,11 +184,9 @@ export class DuetModal {
         const el = document.createElement(visible ? "duet-paragraph" : "duet-visually-hidden");
         el.textContent = message;
         el.classList.add("duet-loader-message");
-        if (this.variation === "loader" && visible) {
-            el.setAttribute("color", "gray-lightest");
-        }
         if (visible) {
             setTimeout(() => {
+                this.slotContainerEl.querySelectorAll(".duet-loader-message").forEach(el => el.classList.remove("show"));
                 el.classList.add("show");
             }, 10);
         }
@@ -210,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 })));
@@ -218,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, dark: this.variation === "loader" }), 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",
@@ -246,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: "gray-lightest" }))), 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"; }
@@ -404,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.css

@@ -26,7 +26,14 @@
   opacity: 0;
 }
 .duet-overlay.dark {
-  opacity: 0.5;
+  opacity: 0.85;
+}
+.duet-overlay.white {
+  background: rgb(255, 255, 255);
+  opacity: 0.9;
+}
+.duet-overlay.white.duet-theme-turva {
+  background: rgb(255, 255, 255);
 }
 .duet-overlay.display-x-small {
   display: none;

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

@@ -22,7 +22,7 @@ export class DuetOverlay {
         this.displayDevice = "all";
         this.transition = "slowly";
         this.zIndex = "400";
-        this.dark = false;
+        this.variation = "default";
     }
     /**
      * Component lifecycle events.
@@ -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,
@@ -46,7 +46,7 @@ export class DuetOverlay {
                 "display-large": this.getDisplayBreakpoint() === "large",
                 not: this.displayDevice.startsWith("not"),
                 hidden: !this.visible,
-                dark: this.dark,
+                [this.variation]: true,
             } })));
     }
     static get is() { return "duet-overlay"; }
@@ -201,23 +201,23 @@ export class DuetOverlay {
                 "reflect": false,
                 "defaultValue": "\"400\""
             },
-            "dark": {
-                "type": "boolean",
-                "mutable": true,
+            "variation": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "\"default\" | \"dark\" | \"white\"",
+                    "resolved": "\"dark\" | \"default\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Darker overlay allowing white text without background"
+                    "text": "Variation, dark and white can be used when we want to have text on the overlay"
                 },
-                "attribute": "dark",
+                "attribute": "variation",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"default\""
             }
         };
     }

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

@@ -68,6 +68,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 +185,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 +203,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

@@ -92,6 +92,12 @@ export class DuetSlideout {
         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 +112,9 @@ export class DuetSlideout {
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
-        enableBodyScroll(this.dialog);
+        if (this.dialog) {
+            enableBodyScroll(this.dialog);
+        }
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
@@ -124,7 +132,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 +150,7 @@ export class DuetSlideout {
             setTimeout(() => {
                 focusElement(this.openButton);
                 enableBodyScroll(this.dialog);
-                this.teleport.resume();
+                this.teleport.removeInertFromSiblings();
             }, 200);
         }
     }

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,14 +22,6 @@ export class DuetTooltipPopup {
         this.placement = undefined;
         this.accessibleCloseLabel = undefined;
     }
-    handleActiveChange() {
-        if (this.active) {
-            this.teleport.go();
-        }
-        else {
-            this.teleport.resume(200);
-        }
-    }
     /**
      * Component lifecycle events.
      */
@@ -39,6 +31,15 @@ export class DuetTooltipPopup {
     }
     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 +270,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/keyboard-utils.js

@@ -41,7 +41,8 @@ function listenMouse() {
 // start listening for mouse clicking (and tabbing through that) only if window is defined (i.e. not on server)
 if (typeof window !== "undefined") {
     window.addEventListener("mousedown", listenMouse, false);
-    window.addEventListener("blur", () => notifySubscribers(true));
+    // on blur, leave the window in tabbing state
+    window.addEventListener("blur", () => listenKeys({ key: "Tab" }));
 }
 export const subscribeTabbingChange = component => {
     tabbingChangeSubscribers.add(component);