@duetds/components 8.1.0 → 8.1.2

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

@@ -760,7 +760,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -781,7 +781,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -802,7 +802,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -823,7 +823,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }

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

@@ -4,6 +4,7 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 export class DuetToggle {
     constructor() {
         /**
@@ -53,6 +54,12 @@ export class DuetToggle {
             this.value = this.identifier;
         }
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Sets focus on the specified `duet-toggle`. Use this method instead of the global
      * `input.focus()`.
@@ -437,7 +444,7 @@ export class DuetToggle {
                     "references": {
                         "DuetToggleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
                             "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
                         }
                     }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -79,7 +79,7 @@
 }
 .duet-toolbar-dropdown .items {
   position: absolute;
-  top: 102%;
+  top: 93%;
   right: 0%;
   left: auto;
   z-index: 600;
@@ -88,11 +88,11 @@
   align-items: center;
   justify-content: center;
   min-width: 175px;
-  padding: 1rem 0;
+  padding: 8px;
   color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+  background: rgb(255, 255, 255);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
 }
 .duet-toolbar-dropdown .items.hidden {
   display: none;

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

@@ -27,15 +27,15 @@
 .duet-toolbar-dropdown-link {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
-  padding: 0.5rem 20px;
+  padding: 0.5rem 8px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
@@ -47,17 +47,19 @@
 .duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-dropdown-link .label {
+  flex: 1;
+  text-align: left;
+}
 .duet-toolbar-dropdown-link.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";
   color: rgb(23, 28, 58);
 }
-.duet-toolbar-dropdown-link.active, .duet-toolbar-dropdown-link.active:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(0, 119, 179);
+.duet-toolbar-dropdown-link.active {
+  background: rgb(243, 249, 252);
 }
-.duet-toolbar-dropdown-link.active.duet-theme-turva, .duet-toolbar-dropdown-link.active:hover.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(198, 12, 48);
+.duet-toolbar-dropdown-link.active.duet-theme-turva {
+  background: rgb(245, 245, 247);
 }
 .duet-toolbar-dropdown-link:hover {
   background: rgb(230, 242, 248);

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

@@ -35,7 +35,7 @@ export class DuetToolbarDropdownLink {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("slot", null))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,13 +3,13 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
  */
 export class DuetTooltipButton {
     constructor() {
-        this.userIsTabbing = false;
         this.label = "";
         this.accessibleLabel = undefined;
         this.theme = "";
@@ -22,13 +22,11 @@ export class DuetTooltipButton {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    listenKeys(event) {
-        if (event.keyCode === 9) {
-            this.userIsTabbing = true;
-        }
+    connectedCallback() {
+        subscribeTabbingChange(this);
     }
-    listenMouse() {
-        this.userIsTabbing = false;
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
     }
     async setFocus(options) {
         if (this.buttonElement) {
@@ -40,7 +38,7 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, h("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, null, h("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
@@ -155,11 +153,6 @@ export class DuetTooltipButton {
             }
         };
     }
-    static get states() {
-        return {
-            "userIsTabbing": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {
@@ -190,19 +183,4 @@ export class DuetTooltipButton {
         };
     }
     static get elementRef() { return "element"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenKeys",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenMouse",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
 /**
  * @internal
@@ -14,7 +15,6 @@ export class DuetTooltipPopup {
         this.handleCloseClick = () => {
             this.tooltipPopupClosed.emit();
         };
-        this.userIsTabbing = false;
         this.theme = "";
         this.active = undefined;
         this.tooltipId = undefined;
@@ -37,13 +37,11 @@ export class DuetTooltipPopup {
         inheritGlobalTheme(this);
         this.teleport = new Teleport(this.element);
     }
-    listenKeys(event) {
-        if (event.keyCode === 9) {
-            this.userIsTabbing = true;
-        }
+    connectedCallback() {
+        subscribeTabbingChange(this);
     }
-    listenMouse() {
-        this.userIsTabbing = false;
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
     }
     async getArrowElement() {
         return this.arrowEl;
@@ -55,7 +53,7 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, h("div", { class: {
+        return (h(Host, null, h("div", { class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
@@ -184,11 +182,6 @@ export class DuetTooltipPopup {
             }
         };
     }
-    static get states() {
-        return {
-            "userIsTabbing": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "tooltipPopupClosed",
@@ -282,19 +275,4 @@ export class DuetTooltipPopup {
                 "methodName": "handleActiveChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenKeys",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenMouse",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

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

@@ -190,6 +190,10 @@ export class DuetTooltip {
             // top of other tooltips and the header.
             zIndex: this.active ? "201" : "",
         };
+        const popupContainerStyles = {
+            position: "relative",
+            overflow: this.active ? "visible" : "hidden",
+        };
         const positionStyles = {
             top: `${this.tooltipY}px`,
             left: `${this.tooltipX}px`,
@@ -200,7 +204,7 @@ export class DuetTooltip {
             top: this.arrowY ? `${this.arrowY}px` : undefined,
             left: this.arrowX ? `${this.arrowX}px` : undefined,
         };
-        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null))));
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -413,7 +417,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }

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

@@ -5,6 +5,7 @@ import { sizeHeader } from "@duetds/tokens";
 import { Fragment, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
@@ -61,9 +62,11 @@ export class DuetTray {
             { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
         ]);
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Component event handling.

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

@@ -991,7 +991,7 @@ export class DuetUpload {
                     "references": {
                         "XHRInternalMiddleWare": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
                         }
                     }
@@ -1377,7 +1377,7 @@ export class DuetUpload {
                     "references": {
                         "StringMap": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
                         }
                     }
@@ -1923,7 +1923,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadTableGroupName": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
                         }
                     }
@@ -1966,7 +1966,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -1987,7 +1987,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2008,7 +2008,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2029,7 +2029,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2050,7 +2050,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2071,7 +2071,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2092,7 +2092,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2113,7 +2113,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2134,7 +2134,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2155,7 +2155,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2176,7 +2176,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }

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

@@ -142,7 +142,7 @@ export class DuetUploadItem {
                     "references": {
                         "ItemType": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
                             "id": "src/components/duet-upload-item/duet-upload-item.tsx::ItemType"
                         }
                     }

package/lib/collection/global/duet-global.js

@@ -2,32 +2,6 @@
  * Built with Duet Design System
  */
 import { setupLoggers } from "./log-wrapper";
-const TAB_KEY = 9;
 export default () => {
-    function listenKeys(event) {
-        if (event.keyCode === TAB_KEY) {
-            var components = document.querySelectorAll(".hydrated");
-            for (var i = 0; i < components.length; i++) {
-                components[i].classList.add("user-is-tabbing");
-            }
-            if (typeof window !== "undefined") {
-                window.removeEventListener("keydown", listenKeys);
-                window.addEventListener("mousedown", listenMouse, false);
-            }
-        }
-    }
-    function listenMouse() {
-        var components = document.querySelectorAll(".hydrated");
-        for (var i = 0; i < components.length; i++) {
-            components[i].classList.remove("user-is-tabbing");
-        }
-        if (typeof window !== "undefined") {
-            window.removeEventListener("mousedown", listenMouse);
-            window.addEventListener("keydown", listenKeys, false);
-        }
-    }
-    if (typeof window !== "undefined") {
-        window.addEventListener("keydown", listenKeys, false);
-    }
     setupLoggers();
 };

package/lib/collection/utils/keyboard-utils.js

@@ -1,18 +1,49 @@
 /*!
  * Built with Duet Design System
  */
-export const isArrowLeftKey = (e) => e.keyCode === 37;
-export const isArrowUpKey = (e) => e.keyCode === 38;
-export const isArrowRightKey = (e) => e.keyCode === 39;
-export const isArrowDownKey = (e) => e.keyCode === 40;
+export const isArrowLeftKey = (e) => e.key === "ArrowLeft" || e.key === "Left";
+export const isArrowUpKey = (e) => e.key === "ArrowUp" || e.key === "Up";
+export const isArrowRightKey = (e) => e.key === "ArrowRight" || e.key === "Right";
+export const isArrowDownKey = (e) => e.key === "ArrowDown" || e.key === "Down";
 export const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
-export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
-export const isTabKey = (e) => e.key === "Tab" || e.keyCode === 9;
-export const isBackspaceKey = (e) => e.keyCode === 8;
-export const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
-export const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
-export const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
+export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc";
+export const isTabKey = (e) => e.key === "Tab";
+export const isBackspaceKey = (e) => e.key === "Backspace";
+export const isSpaceKey = (e) => e.key === " " || e.key === "Spacebar";
+export const isPlusKey = (e) => e.key === "+" || e.key === "Add";
+export const isMinusKey = (e) => e.key === "-" || e.key === "Subtract";
 export const isQuestionKey = (e) => e.key === "?";
-export const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
+export const isEnterKey = (e) => e.key === "Enter";
 export const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
-export const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
+export const isNumber = (e) => e.key >= "0" && e.key <= "9";
+/**
+ * Component instances that have subscribed to tabbing change.
+ */
+const tabbingChangeSubscribers = new Set();
+function notifySubscribers(tabbing) {
+    tabbingChangeSubscribers.forEach(subscriber => {
+        subscriber.element.classList[tabbing ? "add" : "remove"]("user-is-tabbing");
+    });
+}
+function listenKeys(event) {
+    if (isTabKey(event)) {
+        notifySubscribers(true);
+        window.removeEventListener("keydown", listenKeys);
+        window.addEventListener("mousedown", listenMouse, false);
+    }
+}
+function listenMouse() {
+    notifySubscribers(false);
+    window.removeEventListener("mousedown", listenMouse);
+    window.addEventListener("keydown", listenKeys, false);
+}
+// start listening for tabbing (and mouse clicking through that) only if window is defined (i.e. not on server)
+if (typeof window !== "undefined") {
+    window.addEventListener("keydown", listenKeys, false);
+}
+export const subscribeTabbingChange = component => {
+    tabbingChangeSubscribers.add(component);
+};
+export const unsubscribeTabbingChange = component => {
+    tabbingChangeSubscribers.delete(component);
+};

package/lib/collection/utils/teleport.js

@@ -19,6 +19,10 @@ export class Teleport {
      * @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 && skipTeleport !== "false") {
+            return;
+        }
         // React handles teleporting itself with portals
         if (!this.element.dataset.reactPortal) {
             this.stub = document.createElement("template");
@@ -33,6 +37,10 @@ export class Teleport {
         this.isActive = true;
     }
     resume(delay = 0) {
+        const skipTeleport = this.element.getAttribute("skip-teleport");
+        if (skipTeleport && skipTeleport !== "false") {
+            return;
+        }
         if (!this.isActive) {
             return;
         }

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-402e81c0.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-04889da1.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-247a9d01.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-803d6f4c.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-a6e6f578.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-c7e8eeec.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;