@duetds/components 8.5.1 → 8.5.3

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

@@ -87,14 +87,6 @@
 .duet-icon.duet-icon-shape-brand {
   border-radius: 25%;
 }
-.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg {
-  width: 10px;
-  height: 10px;
-}
-.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg {
-  width: 16px;
-  height: 16px;
-}
 @media (max-width: 35.9375em) {
   .duet-icon.duet-icon-not-responsive {
     transform: scale(1) !important;
@@ -106,69 +98,6 @@
 .duet-icon.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
-.duet-icon.auto .duet-icon-svg {
-  width: 100%;
-  height: 100%;
-}
-.duet-icon.xxx-small .duet-icon-svg {
-  width: 7px;
-  height: 7px;
-}
-.duet-icon.duet-icon-has-background.xxx-small {
-  padding: 6px;
-}
-.duet-icon.duet-icon-has-outline.xxx-small {
-  padding: 4px;
-}
-.duet-icon.xx-small .duet-icon-svg {
-  width: 10px;
-  height: 10px;
-}
-.duet-icon.duet-icon-has-background.xx-small {
-  padding: 8px;
-}
-.duet-icon.duet-icon-has-outline.xx-small {
-  padding: 7px;
-}
-.duet-icon.x-small .duet-icon-svg {
-  width: 16px;
-  height: 16px;
-}
-.duet-icon.duet-icon-has-outline.x-small {
-  padding: 10px;
-}
-.duet-icon.duet-icon-has-background.x-small {
-  padding: 12px;
-}
-.duet-icon.small .duet-icon-svg {
-  width: 20px;
-  height: 20px;
-}
-.duet-icon.duet-icon-has-background.small {
-  padding: 14px;
-}
-.duet-icon.large .duet-icon-svg {
-  width: 30px;
-  height: 30px;
-}
-.duet-icon.x-large .duet-icon-svg {
-  width: 36px;
-  height: 36px;
-}
-.duet-icon.xx-large .duet-icon-svg {
-  width: 48px;
-  height: 48px;
-}
-.duet-icon.xxx-large .duet-icon-svg {
-  width: 48px;
-  height: 48px;
-}
-@media (min-width: 48em) {
-  .duet-icon.xxx-large .duet-icon-svg {
-    width: 72px;
-    height: 72px;
-  }
-}
 .duet-icon.duet-icon-shape-brand.rotated {
   transform: rotate(20deg) scale(0.875);
   transform-origin: center;
@@ -185,121 +114,206 @@
 .duet-icon.duet-icon-shape-brand.duet-theme-turva .duet-icon-svg {
   min-width: auto;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-small {
-  width: 18px;
-  height: 15px;
-  padding: 0;
+.duet-icon .duet-icon-svg {
+  display: block;
+  width: 24px;
+  min-width: 100%;
+  height: 24px;
+  font-size: 0;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-small {
-  width: 32px;
-  height: 30px;
-  padding: 0;
+.duet-icon .duet-icon-svg.rotated {
+  transform: rotate(-20deg) scale(1.14);
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.small {
-  width: 36px;
-  height: 34px;
-  padding: 0;
+.duet-icon svg {
+  width: 100%;
+  min-width: 100%;
+  overflow: clip;
+  fill: currentColor;
+  overflow-clip-margin: 1px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.medium {
-  width: 48px;
-  height: 44px;
-  padding: 0;
+
+:host([size=auto]) .duet-icon-svg {
+  width: 100%;
+  height: 100%;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.large {
-  width: 62px;
-  height: 56px;
-  padding: 0;
+
+:host([size=xxx-small]) .duet-icon-svg {
+  width: 7px;
+  height: 7px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.x-large {
-  width: 76px;
-  height: 68px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-background {
+  padding: 6px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xx-large {
-  width: 95px;
-  height: 86px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-outline {
+  padding: 4px;
 }
-.duet-icon.duet-icon-shape-brand.duet-theme-turva.xxx-large {
-  width: 144px;
-  height: 130px;
-  padding: 0;
+:host([size=xxx-small]) .duet-icon-has-background .duet-icon-svg,
+:host([size=xxx-small]) .duet-icon-has-outline .duet-icon-svg {
+  width: 10px;
+  height: 10px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-small {
+:host([size=xxx-small]) .duet-icon-shape-brand {
   padding: 0;
 }
-.duet-icon.duet-icon-shape-brand.xxx-small .duet-icon-svg {
+:host([size=xxx-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 0;
   height: 0;
 }
-.duet-icon.duet-icon-shape-brand.xx-small {
+
+:host([size=xx-small]) .duet-icon-svg {
+  width: 10px;
+  height: 10px;
+}
+:host([size=xx-small]) .duet-icon-has-background {
+  padding: 8px;
+}
+:host([size=xx-small]) .duet-icon-has-outline {
+  padding: 7px;
+}
+:host([size=xx-small]) .duet-icon-has-background .duet-icon-svg,
+:host([size=xx-small]) .duet-icon-has-outline .duet-icon-svg {
+  width: 16px;
+  height: 16px;
+}
+:host([size=xx-small]) .duet-icon-shape-brand {
   padding: 4px;
 }
-.duet-icon.duet-icon-shape-brand.xx-small .duet-icon-svg {
+:host([size=xx-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 10px;
   height: 10px;
 }
-.duet-icon.duet-icon-shape-brand.x-small {
+:host([size=xx-small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 18px;
+  height: 15px;
+  padding: 0;
+}
+
+:host([size=x-small]) .duet-icon-svg {
+  width: 16px;
+  height: 16px;
+}
+:host([size=x-small]) .duet-icon-has-outline {
+  padding: 10px;
+}
+:host([size=x-small]) .duet-icon-has-background {
+  padding: 12px;
+}
+:host([size=x-small]) .duet-icon-shape-brand {
   padding: 8px;
 }
-.duet-icon.duet-icon-shape-brand.x-small .duet-icon-svg {
+:host([size=x-small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 16px;
   height: 16px;
 }
-.duet-icon.duet-icon-shape-brand.small {
+:host([size=x-small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 32px;
+  height: 30px;
+  padding: 0;
+}
+
+:host([size=small]) .duet-icon-svg {
+  width: 20px;
+  height: 20px;
+}
+:host([size=small]) .duet-icon-has-background {
+  padding: 14px;
+}
+:host([size=small]) .duet-icon-shape-brand {
   padding: 8px;
 }
-.duet-icon.duet-icon-shape-brand.small .duet-icon-svg {
+:host([size=small]) .duet-icon-shape-brand .duet-icon-svg {
   width: 20px;
   height: 20px;
 }
-.duet-icon.duet-icon-shape-brand.medium {
+:host([size=small]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 36px;
+  height: 34px;
+  padding: 0;
+}
+
+:host([size=medium]) .duet-icon-shape-brand {
   padding: 12px;
 }
-.duet-icon.duet-icon-shape-brand.medium .duet-icon-svg {
+:host([size=medium]) .duet-icon-shape-brand .duet-icon-svg {
   width: 24px;
   height: 24px;
 }
-.duet-icon.duet-icon-shape-brand.large {
+:host([size=medium]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 48px;
+  height: 44px;
+  padding: 0;
+}
+
+:host([size=large]) .duet-icon-svg {
+  width: 30px;
+  height: 30px;
+}
+:host([size=large]) .duet-icon-shape-brand {
   padding: 16px;
 }
-.duet-icon.duet-icon-shape-brand.large .duet-icon-svg {
+:host([size=large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 30px;
   height: 30px;
 }
-.duet-icon.duet-icon-shape-brand.x-large {
+:host([size=large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 62px;
+  height: 56px;
+  padding: 0;
+}
+
+:host([size=x-large]) .duet-icon-svg {
+  width: 36px;
+  height: 36px;
+}
+:host([size=x-large]) .duet-icon-shape-brand {
   padding: 20px;
 }
-.duet-icon.duet-icon-shape-brand.x-large .duet-icon-svg {
+:host([size=x-large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 36px;
   height: 36px;
 }
-.duet-icon.duet-icon-shape-brand.xx-large {
+:host([size=x-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 76px;
+  height: 68px;
+  padding: 0;
+}
+
+:host([size=xx-large]) .duet-icon-svg {
+  width: 48px;
+  height: 48px;
+}
+:host([size=xx-large]) .duet-icon-shape-brand {
   padding: 24px;
 }
-.duet-icon.duet-icon-shape-brand.xx-large .duet-icon-svg {
+:host([size=xx-large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 48px;
   height: 48px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-large {
+:host([size=xx-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 95px;
+  height: 86px;
+  padding: 0;
+}
+
+:host([size=xxx-large]) .duet-icon-svg {
+  width: 48px;
+  height: 48px;
+}
+@media (min-width: 48em) {
+  :host([size=xxx-large]) .duet-icon-svg {
+    width: 72px;
+    height: 72px;
+  }
+}
+:host([size=xxx-large]) .duet-icon-shape-brand {
   padding: 36px;
 }
-.duet-icon.duet-icon-shape-brand.xxx-large .duet-icon-svg {
+:host([size=xxx-large]) .duet-icon-shape-brand .duet-icon-svg {
   width: 72px;
   height: 72px;
 }
-.duet-icon .duet-icon-svg {
-  display: block;
-  width: 24px;
-  min-width: 100%;
-  height: 24px;
-  font-size: 0;
-}
-.duet-icon .duet-icon-svg.rotated {
-  transform: rotate(-20deg) scale(1.14);
-}
-.duet-icon svg {
-  width: 100%;
-  min-width: 100%;
-  fill: currentColor;
+:host([size=xxx-large]) .duet-theme-turva .duet-icon-shape-brand {
+  width: 144px;
+  height: 130px;
+  padding: 0;
 }

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

@@ -24,9 +24,4 @@ describe("duet-icon", () => {
         const element = await page.find("duet-icon >>> .duet-icon-has-background");
         expect(element).not.toBeNull();
     });
-    it("should provide a property that changes the icon size", async () => {
-        const page = await createPage(`<duet-icon size="xx-large"></duet-icon>`);
-        const element = await page.find("duet-icon >>> .xx-large");
-        expect(element).not.toBeNull();
-    });
 });

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 import { getColorByName, rgbaColorFromRgb } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
@@ -25,24 +25,47 @@ export class DuetIcon {
     /**
      * Component lifecycle events.
      */
-    componentWillLoad() {
+    async componentWillLoad() {
         inheritGlobalTheme(this);
         if (this.src && this.icon) {
             console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
         }
-        this.loadIcon();
+        await this.loadIcon(null, null);
     }
-    async loadIcon() {
+    async loadIcon(newValue, oldValue) {
         // static icon known at build-time, so we can set it synchronously
         if (this.icon) {
             this.svgContent = this.icon;
             return;
         }
-        // on server, don't make requests
+        // on server import icon from icons lib
         if (!Build.isBrowser) {
+            if (this.name) {
+                const iconPath = `@duetds/icons/lib/assets/${this.name}`;
+                try {
+                    const icon = await import(iconPath);
+                    this.svgContent = icon.svg;
+                }
+                catch (e) {
+                    console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG ${iconPath} from local dependency.`, e);
+                }
+            }
             return;
         }
-        // dynamically load icon from url
+        // svgContent being empty and svg being found indicates server side rendered icon
+        if (this.element.shadowRoot.querySelector("svg") && !this.svgContent) {
+            if (oldValue === null && newValue === null) {
+                // when coming from componentWillLoad don't let go further
+                return;
+            }
+            else if (this.element.shadowRoot.querySelector(`.duet-icon-svg[data-name="${newValue}"]`)) {
+                // When duet-icon is used inside another component the name attribute is first the default "action-add"
+                // when the parent component initializes it changes this to the correct name and triggers this
+                // loadIcon(newValue, oldValue) function. This else if is here to notice this and compares the
+                // newValue to the one we have set on server, if its the same we don't let this function go further.
+                return;
+            }
+        }
         const src = this.src ? this.src : buildIconUrl(this.name);
         try {
             this.svgContent = await fetchIconByUrl(src);
@@ -80,7 +103,6 @@ export class DuetIcon {
                 "duet-icon-has-background": !!this.background,
             } }, h("span", { "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
-                [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
                 "duet-icon-has-outline": !!this.outline,
@@ -88,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +165,7 @@ export class DuetIcon {
                     "text": "A raw SVG string."
                 },
                 "attribute": "icon",
-                "reflect": false
+                "reflect": true
             },
             "src": {
                 "type": "string",
@@ -339,7 +361,7 @@ export class DuetIcon {
                     "text": "Icon size. Entered as one of the icon size design tokens."
                 },
                 "attribute": "size",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"medium\""
             },
             "outline": {

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-menu-bar-item/duet-menu-bar-item.css

@@ -48,6 +48,22 @@
 .duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-menu-bar-item .leading-icon,
+.duet-menu-bar-item .trailing-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-item .leading-icon,
+  .duet-menu-bar-item .trailing-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+.duet-menu-bar-item .trailing-icon.trailing-icon-arrow {
+  width: 7px;
+  height: 7px;
+}
 .duet-menu-bar-item[aria-expanded=true] {
   color: rgb(0, 119, 179);
 }

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

@@ -1,22 +1,10 @@
 /*!
  * 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";
 export class DuetMenuBarItem {
     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 = "x-small";
         this.theme = "";
         this.active = false;
         this.url = undefined;
@@ -32,26 +20,6 @@ export class DuetMenuBarItem {
     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 = [];
-    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -68,10 +36,11 @@ export class DuetMenuBarItem {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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", { size: this.iconSize, name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "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", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), 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-menu-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -248,11 +217,6 @@ export class DuetMenuBarItem {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {

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