@duetds/components 8.2.2 → 8.3.1

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

@@ -96,7 +96,7 @@ export class DuetSpinner {
                     "references": {
                         "DuetSpinnerSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
                             "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
                         }
                     }

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

@@ -202,7 +202,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepState": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
                         }
                     }
@@ -280,7 +280,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepClickEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
                         }
                     }

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

@@ -225,7 +225,7 @@ export class DuetStepper {
                     "references": {
                         "DuetStepChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
                             "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
                         }
                     }

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

@@ -25,4 +25,14 @@
 }
 .duet-tab.selected {
   display: block;
+}
+.duet-tab.has-content-id, .duet-tab.has-content-id.selected {
+  display: none;
+}
+:host(.user-is-tabbing) .duet-tab:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+:host(.user-is-tabbing) .duet-tab.duet-theme-turva:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }

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

@@ -2,9 +2,48 @@
  * Built with Duet Design System
  */
 import { Build, h } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { getShadowByName } from "../../utils/token-utils";
 export class DuetTab {
     constructor() {
+        this.setupContentElement = () => {
+            if (this.contentId) {
+                this.tabpanelElement = document.getElementById(this.contentId);
+                if (this.tabpanelElement) {
+                    this.tabpanelElement.setAttribute("role", "tabpanel");
+                    this.tabpanelElement.setAttribute("tabindex", "-1");
+                    this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener);
+                    this.tabpanelElement.addEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.addEventListener("blur", this.tabpanelElementBlurListener);
+                    if (this.accessibleDescription) {
+                        this.tabpanelElement.setAttribute("aria-description", this.accessibleDescription);
+                    }
+                    if (this.accessibleLabelledBy) {
+                        this.tabpanelElement.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+                    }
+                    if (this.selected) {
+                        this.tabpanelElement.toggleAttribute("hidden", false);
+                    }
+                    else {
+                        this.tabpanelElement.toggleAttribute("hidden", true);
+                    }
+                }
+            }
+        };
+        this.tabpanelElementFocusListener = () => {
+            if (this.element.classList.contains("user-is-tabbing")) {
+                this.tabpanelElement.style.outline = "0";
+                this.tabpanelElement.style.boxShadow = getShadowByName(this.theme === "turva" ? "focus-turva" : "focus");
+            }
+        };
+        this.tabpanelElementBlurListener = () => {
+            this.tabpanelElement.style.outline = null;
+            this.tabpanelElement.style.boxShadow = null;
+        };
+        this.theme = "";
         this.label = undefined;
         this.caption = undefined;
         this.selected = undefined;
@@ -14,15 +53,44 @@ export class DuetTab {
             ? getLocaleString(this.accessibleDescriptionDefault)
             : null;
         this.accessibleLabelledBy = undefined;
+        this.contentId = undefined;
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
     /**
      * Component lifecycle events.
      */
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+        subscribeTabbingChange(this);
+        this.setupContentElement();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+        if (this.tabpanelElement) {
+            this.tabpanelElement.removeAttribute("role");
+            this.tabpanelElement.removeAttribute("tabindex");
+            this.tabpanelElement.removeAttribute("aria-description");
+            this.tabpanelElement.removeAttribute("aria-labelledby");
+            this.tabpanelElement.removeAttribute("hidden");
+            this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener.bind(this));
+            this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener.bind(this));
+            this.tabpanelElement = undefined;
+        }
+    }
+    setupSelected(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        this.setupContentElement();
+    }
+    /**
+     * Sets focus on the tab panel.
+     */
+    async setFocus(options) {
+        this.tabpanelElement.focus(options);
     }
     /**
      * render() function
@@ -32,7 +100,16 @@ export class DuetTab {
         if (Build.isServer) {
             return;
         }
-        return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, h("slot", null)));
+        return (h("div", { ref: element => {
+                if (!this.contentId) {
+                    this.tabpanelElement = element;
+                }
+            }, role: "tabpanel", class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-tab": true,
+                selected: this.selected,
+                "has-content-id": !!this.contentId,
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", null)));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "scoped"; }
@@ -48,6 +125,30 @@ export class DuetTab {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -164,8 +265,61 @@ export class DuetTab {
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
+            },
+            "contentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML id of element that is to be used when opening this tab.\nThis enables decoupling the content from the tab buttons."
+                },
+                "attribute": "content-id",
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the tab panel.",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "setupSelected"
+            }];
+    }
 }

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

@@ -4,7 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isShiftTabKey, isTabKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
@@ -24,6 +24,10 @@ export class DuetTabGroup {
             else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
                 button = ev.target.nextElementSibling;
             }
+            if (isTabKey(ev) && !isShiftTabKey(ev)) {
+                ev.preventDefault();
+                this.element.querySelector("duet-tab[selected]").setFocus();
+            }
             if (button) {
                 ev.preventDefault();
                 button.click();
@@ -56,7 +60,7 @@ export class DuetTabGroup {
         };
         this.renderTab = () => {
             const renderedTabs = this.tabs.map((element, index) => {
-                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
                         "duet-p-0": this.padding === "none",
                         "duet-tab-button": true,
                         "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
@@ -214,7 +218,7 @@ export class DuetTabGroup {
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? "0" : null, class: {
+            } }, this.renderTab()), h("div", { class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
@@ -321,7 +325,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
                         }
                     }
@@ -509,8 +513,11 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Controls if tab content should have tab index and be accessible by pressing tab"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "in favour of Duet Tab component owning the tab indexing\nControls if tab container should have tab index and be accessible by pressing tab"
+                        }],
+                    "text": ""
                 },
                 "attribute": "set-tab-index",
                 "reflect": false,
@@ -562,7 +569,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -583,7 +590,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -604,7 +611,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -628,7 +635,7 @@ export class DuetTabGroup {
                         },
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     },

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

@@ -5,7 +5,7 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
     if (maxlength == null) {
         return;
@@ -130,6 +130,7 @@ export class DuetTextarea {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
@@ -166,7 +167,7 @@ export class DuetTextarea {
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }
@@ -806,7 +807,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"
                         }
                     }
@@ -827,7 +828,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"
                         }
                     }
@@ -848,7 +849,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"
                         }
                     }
@@ -869,7 +870,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

@@ -486,7 +486,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.js

@@ -58,7 +58,7 @@ export class DuetToolbarDropdown {
             } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
             } }, h("slot", null)))));

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

@@ -14,30 +14,35 @@ async function openWithClick(page) {
     const popup = await getPopup(page);
     await trigger.click();
     await popup.waitForVisible();
+    await page.waitForChanges();
 }
 async function closeWithClick(page) {
     const trigger = await getTrigger(page);
     const popup = await getPopup(page);
     await trigger.click();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function clickOutside(page) {
     const popup = await getPopup(page);
     await page.mouse.click(0, 0);
     await page.waitForChanges();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function clickCloseButton(page) {
     const popup = await getPopup(page);
     const closeButton = await page.find(`duet-tooltip-popup >>> .duet-tooltip-close`);
     await closeButton.click();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function closeWithEsc(page) {
     const popup = await getPopup(page);
     await page.keyboard.press("Escape");
     await page.waitForChanges();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 describe("duet-tooltip", () => {
     it("should render a tooltip", async () => {

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

@@ -28,13 +28,21 @@ export class DuetTooltip {
          */
         this.openTooltip = () => {
             this.active = true;
-            this.focusTarget = "tooltip";
+            setTimeout(() => {
+                this.contentEl.focus({ preventScroll: true });
+                this.buttonActive = true;
+            }, 200);
         };
         this.closeTooltip = (moveFocusToButton = false) => {
             this.active = false;
             if (moveFocusToButton) {
-                this.focusTarget = "trigger";
+                setTimeout(() => {
+                    this.buttonEl.setFocus({ preventScroll: true });
+                }, 200);
             }
+            setTimeout(() => {
+                this.buttonActive = false;
+            }, 201);
             setTimeout(() => {
                 this.updatePlacement();
             }, 200);
@@ -73,6 +81,7 @@ export class DuetTooltip {
         this.tooltipX = undefined;
         this.arrowX = undefined;
         this.arrowY = undefined;
+        this.buttonActive = undefined;
         this.theme = "";
         this.language = getLanguage();
         this.accessibleLabelDefault = {
@@ -101,6 +110,7 @@ export class DuetTooltip {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.buttonActive = this.active;
     }
     async componentDidLoad() {
         if (Build.isServer) {
@@ -115,19 +125,6 @@ export class DuetTooltip {
         this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
         this.intersectionObserver.observe(this.element);
     }
-    componentDidUpdate() {
-        switch (this.focusTarget) {
-            case "tooltip":
-                // delay focus so button is correctly announced as "expanded"
-                setTimeout(() => this.contentEl.focus({ preventScroll: true }));
-                break;
-            case "trigger":
-                // delay focus so button is correctly announced as "collapsed"
-                setTimeout(() => this.buttonEl.setFocus({ preventScroll: true }));
-                break;
-        }
-        this.focusTarget = null;
-    }
     connectedCallback() {
         connectLanguageChangeObserver(this, [
             { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
@@ -210,7 +207,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}`) ||
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
                 (this.accessibleAboutLabel &&
                     `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
                 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)))));
@@ -443,7 +440,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"
                         }
                     }
@@ -544,7 +541,8 @@ export class DuetTooltip {
             "tooltipY": {},
             "tooltipX": {},
             "arrowX": {},
-            "arrowY": {}
+            "arrowY": {},
+            "buttonActive": {}
         };
     }
     static get elementRef() { return "element"; }