@duetds/components 8.3.0 → 8.4.0

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

@@ -0,0 +1,286 @@
+/*!
+ * 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;
+        this.leadingIcon = undefined;
+        this.trailingIcon = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    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().
+     */
+    async setFocus(options) {
+        setTimeout(() => this.itemElement.focus(options), 200);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const TagName = this.url ? "a" : "button";
+        return (h(Host, { role: "listitem" }, h(TagName, { ref: element => (this.itemElement = element), class: {
+                "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: {
+                "trailing-icon": true,
+                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" })))));
+    }
+    static get is() { return "duet-menu-bar-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-menu-bar-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-menu-bar-item.css"]
+        };
+    }
+    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."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active"
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Url"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left icon."
+                },
+                "attribute": "leading-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Right icon."
+                },
+                "attribute": "trailing-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": true
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute to a button."
+                },
+                "attribute": "accessible-popup",
+                "reflect": true,
+                "defaultValue": "\"false\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "iconSize": {}
+        };
+    }
+    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. Use this method instead of the global focus().",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -57,7 +57,7 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { role: "listitem" }, h("a", { class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,

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

@@ -32,13 +32,13 @@
   max-height: 100vh;
   overflow-y: auto;
   visibility: hidden;
-  background: rgba(0, 41, 77, 0.85);
+  background: rgba(0, 41, 77, 0.3);
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
 }
 .duet-modal-overlay.duet-theme-turva {
-  background: rgba(23, 28, 58, 0.85);
+  background: rgba(23, 28, 58, 0.3);
 }
 .duet-modal-overlay.duet-modal-active {
   visibility: visible;

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

@@ -3,11 +3,12 @@
  */
 import { h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { hasSlot, inheritGlobalTheme } from "../../common";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.

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

@@ -6,7 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
     return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
@@ -170,6 +170,7 @@ export class DuetMultiselect {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.refresh();
     }
     connectedCallback() {
@@ -207,7 +208,7 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, 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)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-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`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { 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: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, 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)), h("slot", { name: "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`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { 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 && 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 &&

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -9,7 +9,7 @@ import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
  */
@@ -237,6 +237,7 @@ export class DuetNumberInput {
         if (this.value) {
             this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
         }
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, [
@@ -291,7 +292,7 @@ export class DuetNumberInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,18 +2,34 @@
  * Built with Duet Design System
  */
 import { computePosition, flip, offset } from "@floating-ui/dom";
-import { Build, h, Host } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
     constructor() {
+        this.setOpenButton = (element) => {
+            if (!element) {
+                return;
+            }
+            try {
+                const button = element;
+                button.accessiblePopup = "true";
+                button.accessibleExpanded = false;
+                button.setAttribute("trailing-icon", "action-arrow-down-small");
+                this.openButton = button;
+            }
+            catch (_e) { }
+        };
+        this.openButtonEventListener = () => {
+            this.toggle();
+        };
         this.updatePlacement = async () => {
-            if (!this.controller) {
+            if (!this.openButton) {
                 return;
             }
-            const coordinates = await computePosition(this.controller, this.menuElement, {
+            const coordinates = await computePosition(this.openButton, this.menuElement, {
                 middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
                 placement: this.placement,
                 strategy: this.position,
@@ -45,6 +61,15 @@ export class DuetPopupMenu {
             this.updatePlacement();
         }
     }
+    connectedCallback() {
+        this.handleControllerChange(this.controller, null);
+    }
+    disconnectedCallback() {
+        if (this.openButton) {
+            this.openButton.removeEventListener("click", this.openButtonEventListener);
+            this.openButton.removeAttribute("trailing-icon");
+        }
+    }
     /**
      * Component event handling.
      */
@@ -52,7 +77,7 @@ export class DuetPopupMenu {
         if (this.open) {
             // When Esc is pressed the menu should be closed
             if (isEscapeKey(evt)) {
-                this.focusController();
+                this.focusOpenButton();
                 this.hide();
             }
         }
@@ -90,7 +115,7 @@ export class DuetPopupMenu {
         }
     }
     handleClick(evt) {
-        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.controller);
+        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
         if (this.open && isClickOutside) {
             this.hide();
         }
@@ -106,23 +131,12 @@ export class DuetPopupMenu {
      */
     async show() {
         this.open = true;
-        this.teleport.go();
-        if (this.accessibleRole === "menu") {
-            this.itemElements[0].setFocus();
-        }
-        this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-        this.updatePlacement();
     }
     /**
      * Hide.
      */
     async hide() {
         this.open = false;
-        this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-        if (this.accessibleRole === "menu") {
-            this.focusController();
-        }
-        this.teleport.resume(200);
     }
     /**
      * Toggle.
@@ -135,9 +149,53 @@ export class DuetPopupMenu {
             this.show();
         }
     }
-    focusController() {
-        if (this.controller) {
-            focusElement(this.controller);
+    handleControllerChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (typeof this.controller === "string") {
+            this.setOpenButton(document.getElementById(this.controller));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(this.controller);
+        }
+    }
+    handleOpenChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        if (this.open && !oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = true;
+            }
+            this.teleport.go(true);
+            this.updatePlacement();
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.itemElements[0].setFocus();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+            }, 200);
+        }
+        else if (!this.open && oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = false;
+            }
+            setTimeout(() => {
+                if (this.accessibleRole === "menu") {
+                    this.focusOpenButton();
+                }
+                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+                this.teleport.resume();
+            }, 200);
+        }
+    }
+    focusOpenButton() {
+        if (this.open) {
+            focusElement(this.openButton);
         }
     }
     get itemElements() {
@@ -156,8 +214,9 @@ export class DuetPopupMenu {
         const positionStyles = {
             top: `${this.menuY}px`,
             left: `${this.menuX}px`,
+            position: this.position,
         };
-        return (h(Host, { class: this.position }, h("div", { ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", null))));
+        return (h(Host, null, h("div", { ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", null))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -233,11 +292,11 @@ export class DuetPopupMenu {
                 "defaultValue": "\"\""
             },
             "controller": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement & FocusableComponent & OpenerComponent",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent",
+                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -260,7 +319,9 @@ export class DuetPopupMenu {
                 "docs": {
                     "tags": [],
                     "text": "Element controlling the opening and closing of the popup menu."
-                }
+                },
+                "attribute": "controller",
+                "reflect": false
             },
             "placement": {
                 "type": "string",
@@ -282,7 +343,7 @@ export class DuetPopupMenu {
             },
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "\"absolute\" | \"fixed\"",
                     "resolved": "\"absolute\" | \"fixed\"",
@@ -440,6 +501,15 @@ export class DuetPopupMenu {
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "controller",
+                "methodName": "handleControllerChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keyup",

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

@@ -30,6 +30,7 @@ export class DuetPopupMenuItem {
         this.theme = "";
         this.url = undefined;
         this.external = false;
+        this.targetLanguage = undefined;
         this.value = undefined;
         this.leadingIcon = undefined;
         this.leadingIconColor = undefined;
@@ -62,7 +63,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"} ${this.accessibleRole}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, { role: this.accessibleRole }, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), (this.trailingIcon || this.active) && (h("duet-icon", { name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +173,24 @@ export class DuetPopupMenuItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "targetLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"en\" | \"fi\" | \"sv\"",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the link. Use this only for language selection links."
+                },
+                "attribute": "target-language",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "value": {
                 "type": "string",
                 "mutable": false,