@duetds/components 6.11.0 → 6.11.2

package/lib/collection/collection-manifest.json

@@ -49,7 +49,6 @@
     "./components/duet-textarea/duet-textarea.js",
     "./components/duet-toggle/duet-toggle.js",
     "./components/duet-tooltip/duet-tooltip.js",
-    "./components/duet-tooltip/duet-tooltip-popup.js",
     "./components/duet-upload/duet-upload.js",
     "./components/duet-upload-item/duet-upload-item.js",
     "./components/duet-badge/duet-badge.js",
@@ -91,6 +90,8 @@
     "./components/duet-toolbar-dropdown/duet-toolbar-dropdown.js",
     "./components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js",
     "./components/duet-toolbar-link/duet-toolbar-link.js",
+    "./components/duet-tooltip/duet-tooltip-button.js",
+    "./components/duet-tooltip/duet-tooltip-popup.js",
     "./components/duet-tray/duet-tray.js",
     "./components/duet-upload-aria-status/duet-upload-aria-status.js",
     "./components/duet-visually-hidden/duet-visually-hidden.js"

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

@@ -116,9 +116,16 @@
 }
 .duet-button.duet-button-is-small:not(.duet-button-icon-only) {
   padding: 9px 19px 10px !important;
-  min-width: 5.3333333333rem;
+  min-width: 48px;
   font-size: 0.875rem;
 }
+.duet-button.duet-button-is-small:not(.duet-button-icon-only).plain {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+.duet-button.duet-button-is-small:not(.duet-button-icon-only).duet-p-0 {
+  padding: 0 !important;
+}
 .duet-button.duet-button-is-small:not(.duet-button-icon-only).icon {
   padding-left: 48px !important;
 }
@@ -396,6 +403,20 @@
   padding-right: 20px !important;
   padding-left: 0 !important;
 }
+.duet-button.plain.icon.small {
+  padding-left: 20px !important;
+}
+.duet-button.plain.icon.small.icon-right {
+  padding-right: 20px !important;
+  padding-left: 0 !important;
+}
+.duet-button.plain.icon.medium-small {
+  padding-left: 20px !important;
+}
+.duet-button.plain.icon.medium-small.icon-right {
+  padding-right: 20px !important;
+  padding-left: 0 !important;
+}
 .duet-button.plain.icon.medium {
   padding-left: 24px !important;
 }

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

@@ -51,12 +51,12 @@ input[type=search]::-webkit-search-cancel-button {
 }
 
 duet-tooltip {
+  position: relative;
   top: 12px;
   right: 0;
 }
 @media (min-width: 48em) {
   duet-tooltip {
-    position: relative;
     right: auto;
   }
 }

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

@@ -32,7 +32,8 @@ export class DuetMenuBar {
       });
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
-          this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;
+          this.container.scrollLeft =
+            active.offsetLeft - this.element.getBoundingClientRect().width / 2 + active.offsetWidth / 2;
         }
       }
     };

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

@@ -159,6 +159,7 @@
 }
 .duet-multiselect > :first-child {
   flex: 1;
+  min-height: 24px;
 }
 .duet-multiselect .duet-multiselect-badge {
   position: absolute;
@@ -221,6 +222,42 @@
   transition-property: transform, opacity;
   transform: scale(1.0001) translateZ(0) translateY(0);
 }
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons {
+  padding: 8px 0;
+  margin: -16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+  padding: 6px 16px;
+  margin: -4px 0;
+  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-weight: 600;
+  color: rgb(0, 119, 179);
+  cursor: pointer;
+  border-radius: 4px;
+}
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
+  border-right: 1px solid rgb(225, 227, 230);
+}
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+  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(198, 12, 48);
+}
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+  color: rgb(23, 28, 58);
+}
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+  color: rgb(0, 41, 77);
+}
 
 .duet-multiselect-help {
   display: block;

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

@@ -23,6 +23,16 @@ export class DuetMultiselect {
       fi: "valittu",
       sv: "vald",
     };
+    this.selectAllLabel = {
+      en: "Select all",
+      fi: "Valitse kaikki",
+      sv: "Välj alla",
+    };
+    this.clearAllLabel = {
+      en: "Clear all",
+      fi: "Tyhjennä kaikki",
+      sv: "Rensa alla",
+    };
     /**
      * Component event handling.
      */
@@ -62,7 +72,7 @@ export class DuetMultiselect {
         this.toggleCheckboxes();
         setTimeout(() => {
           if (this.checkboxesVisible) {
-            const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(0)}`);
+            const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(this.allControls ? -2 : 0)}`);
             if (firstOption) {
               firstOption.focus();
             }
@@ -91,6 +101,14 @@ export class DuetMultiselect {
       this.value = toggleInArray(this.value, item);
       this.onChange(e);
     };
+    this.handleSelectAllClick = (e) => {
+      this.value = this.processedItems;
+      this.onChange(e);
+    };
+    this.handleClearAllClick = (e) => {
+      this.value = [];
+      this.onChange(e);
+    };
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
@@ -119,6 +137,7 @@ export class DuetMultiselect {
     this.theme = "";
     this.labelHidden = false;
     this.identifier = createID("DuetMultiselect");
+    this.allControls = false;
     this.placeholder = "";
     this.caption = undefined;
     this.items = undefined;
@@ -180,7 +199,7 @@ export class DuetMultiselect {
       }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
         "duet-multiselect-checkboxes": true,
         "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-      }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
+      }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
       this.processedItems.map((item, key) => {
         var _a, _b;
         return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
@@ -357,6 +376,24 @@ export class DuetMultiselect {
         "reflect": false,
         "defaultValue": "createID(\"DuetMultiselect\")"
       },
+      "allControls": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, the multiselect will display buttons to select or deselect all items.\nThis should be used when there are many items, consider when the number of items is more than 5."
+        },
+        "attribute": "all-controls",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "placeholder": {
         "type": "string",
         "mutable": false,

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

@@ -68,6 +68,7 @@ export class DuetSubmenuBar {
       }
     }
     this.boundMqlFunctions = [];
+    enableBodyScroll(this.element);
   }
   /**
    * Sets focus. Use this method instead of the global focus().

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

@@ -81,6 +81,9 @@ duet-table .duet-table-action-row td:last-child {
   padding-right: 20px !important;
   white-space: nowrap;
 }
+duet-table span.duet-table-cell-heading {
+  display: none;
+}
 
 .duet-table-flattened table,
 .duet-table-flattened thead,
@@ -107,6 +110,16 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-flattened td:not(:last-child) {
   margin-bottom: 16px !important;
 }
+.duet-table-flattened td span.duet-table-cell-heading {
+  margin-bottom: 4px !important;
+  display: block;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(0, 41, 77);
+}
+.duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading {
+  color: rgb(23, 28, 58);
+}
 .duet-table-flattened tbody td,
 .duet-table-flattened tbody th,
 .duet-table-flattened tfoot td {
@@ -119,17 +132,6 @@ duet-table .duet-table-action-row td:last-child {
   color: rgb(101, 119, 135);
   text-align: left;
 }
-.duet-table-flattened td[data-heading]::before {
-  margin-bottom: 4px !important;
-  display: block;
-  font-size: 1rem;
-  font-weight: 600;
-  color: rgb(0, 41, 77);
-  content: attr(data-heading);
-}
-.duet-table-flattened.duet-theme-turva td[data-heading]::before {
-  color: rgb(23, 28, 58);
-}
 
 .duet-table-sticky thead th {
   position: sticky;

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

@@ -95,7 +95,16 @@ export class DuetTable {
     rowElements.forEach(tr => {
       tr.querySelectorAll("td").forEach((td, i) => {
         if (headings[i]) {
-          td.dataset.heading = headings[i];
+          const previousSpan = td.querySelector(".duet-table-cell-heading");
+          if (!previousSpan || previousSpan.textContent !== headings[i]) {
+            previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
+            const span = document.createElement("span");
+            span.textContent = headings[i];
+            span.classList.add("duet-table-cell-heading");
+            span.setAttribute("aria-hidden", "true");
+            span.inert = true;
+            td.prepend(span);
+          }
         }
       });
     });

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

@@ -0,0 +1,87 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.duet-tooltip-button {
+  z-index: 100;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 48px;
+  padding: 0 !important;
+  margin-right: -12px;
+  line-height: normal !important;
+  color: rgb(0, 119, 179);
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent !important;
+  border-radius: 4px;
+}
+.duet-tooltip-button.duet-theme-turva {
+  color: rgb(198, 12, 48);
+}
+.duet-tooltip-button:hover {
+  color: rgb(0, 77, 128);
+}
+.duet-tooltip-button:hover.duet-theme-turva {
+  color: rgb(148, 9, 37);
+}
+.duet-tooltip-button:focus {
+  background: transparent !important;
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tooltip-button:focus {
+  background: transparent !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+}
+:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+}
+.duet-tooltip-button svg {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
+}
+
+.duet-tooltip-button-has-label {
+  margin-right: 0;
+}
+
+.duet-tooltip-label {
+  position: relative;
+  z-index: 100;
+  display: inline-block;
+  max-width: calc(100% - 30px);
+  margin-left: 12px !important;
+  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: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: left;
+  white-space: normal;
+  vertical-align: top;
+}
+.duet-theme-turva .duet-tooltip-label {
+  font-family: "turva-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-tooltip/duet-tooltip-button.js

@@ -0,0 +1,175 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+/**
+ * @internal
+ * This component is solely for internal use by duet-tooltip.
+ */
+export class DuetTooltipButton {
+  constructor() {
+    this.label = "";
+    this.accessibleLabel = undefined;
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async setFocus(options) {
+    if (this.buttonElement) {
+      this.buttonElement.focus(options);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    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",
+      } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+  }
+  static get is() { return "duet-tooltip-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-tooltip-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-tooltip-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the card. Can be one of: \"default\", \"turva\"."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false
+      },
+      "tooltipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip-id",
+        "reflect": false
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -25,6 +25,7 @@
 }
 
 .duet-tooltip {
+  position: relative;
   width: 282px;
   min-height: 48px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -58,6 +59,7 @@
 }
 .duet-tooltip .arrow-container {
   position: relative;
+  left: 4px;
   width: 100%;
   height: 100%;
   pointer-events: none;

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

@@ -3,17 +3,15 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { FocusGuard } from "../../utils/focus-utils";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
  */
 export class DuetTooltipPopup {
   constructor() {
-    this.handleCloseClick = (evt) => {
-      this.tooltipPopupClosed.emit({
-        originalEvent: evt,
-        component: "duet-tooltip-popup",
-      });
+    this.handleCloseClick = () => {
+      this.tooltipPopupClosed.emit();
     };
     this.theme = "";
     this.active = undefined;
@@ -42,10 +40,10 @@ export class DuetTooltipPopup {
         "duet-tooltip": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-tooltip-active": this.active === true,
-      }, onClick: e => e.stopPropagation() }, h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)), h(FocusGuard, { moveFocusTo: this.contentEl }))));
   }
   static get is() { return "duet-tooltip-popup"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["duet-tooltip-popup.scss"]
@@ -178,12 +176,11 @@ export class DuetTooltipPopup {
           "text": "Component event handling."
         },
         "complexType": {
-          "original": "DuetTooltipPopupEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-tooltip-popup\"; }",
+          "original": "CustomEvent",
+          "resolved": "CustomEvent<any>",
           "references": {
-            "DuetTooltipPopupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip-popup.tsx"
+            "CustomEvent": {
+              "location": "global"
             }
           }
         }