@duetds/components 8.1.3 → 8.1.5

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

@@ -3,12 +3,16 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
+import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { FocusGuard } from "../../utils/focus-utils";
+import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { Teleport } from "../../utils/teleport";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling.
+ */
 export class DuetSlideout {
     constructor() {
         this.exitLangObject = {
@@ -22,6 +26,7 @@ export class DuetSlideout {
             sv: "Stäng den här menyn för att hitta objekt på toppnivå",
         };
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+        this.hasStickyHeaderSlot = false;
         this.handleBodyScrolling = () => {
             if (this.displaying && this.open) {
                 disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
@@ -30,6 +35,23 @@ export class DuetSlideout {
                 enableBodyScroll(this.dialog);
             }
         };
+        this.setOpenButton = (element) => {
+            if (!element) {
+                return;
+            }
+            try {
+                const button = element;
+                button.accessiblePopup = "true";
+                button.accessibleExpanded = false;
+                this.openButton = button;
+            }
+            catch (_e) { }
+        };
+        this.openButtonEventListener = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.onClick(e);
+        };
         this.getOpenPanel = () => {
             return this.element.querySelector("duet-slideout-panel[open]");
         };
@@ -59,8 +81,7 @@ export class DuetSlideout {
             }
             else {
                 setTimeout(() => {
-                    var _a;
-                    (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.setFocus();
+                    focusElement(this.openButton);
                     this.handleBodyScrolling();
                     this.teleport.resume();
                 }, 200);
@@ -78,89 +99,48 @@ export class DuetSlideout {
         this.displaying = false;
         this.openPanel = false;
         this.theme = "";
+        this.accessibleRole = "menubar";
         this.open = false;
         this.opener = undefined;
         this.backgroundColor = "gray-lightest";
     }
-    /**
-     * Toggles the slideout.
-     */
-    async toggle() {
-        const event = new CustomEvent("toggle");
-        this.toggleMenu(event);
-        setTimeout(() => {
-            this.closeButton.focus();
-        }, 200);
-    }
-    /**
-     * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
-     * the slideout so that focus can be moved back to this specific element when
-     * the slideout dialog is closed.
-     */
-    async show() {
-        if (this.open) {
-            return;
-        }
-        const button = document.activeElement;
-        if (button) {
-            button.accessiblePopup = "true";
-            this.openButton = button;
-        }
-        this.toggleMenu(new CustomEvent("toggle"));
-    }
-    /**
-     * Hides the slideout dialog and puts focus back to the original element
-     * that triggered the slideout (if we’re still in the same view).
-     */
-    async hide() {
-        if (!this.open) {
-            return;
-        }
-        this.toggleMenu(new CustomEvent("toggle"));
-    }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        const button = this.opener && document.getElementById(this.opener);
-        if (button) {
-            button.accessiblePopup = "true";
-            button.accessibleExpanded = false;
-            button.addEventListener("click", e => {
-                e.stopPropagation();
-                e.preventDefault();
-                this.openButton = button;
-                this.onClick(e);
-            });
-        }
+        this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
         this.teleport = new Teleport(this.element);
     }
-    async componentDidLoad() {
-        if (Build.isServer) {
-            return;
-        }
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.displaying = true;
-            }
-            else {
-                this.displaying = false;
-            }
-            this.handleBodyScrolling();
-        });
-        this.intersectionObserver.observe(this.dialog);
-    }
     connectedCallback() {
         connectLanguageChangeObserver(this);
         if (Build.isServer) {
             return;
         }
+        if (this.opener) {
+            this.setOpenButton(document.getElementById(this.opener));
+            this.openButton.addEventListener("click", this.openButtonEventListener);
+        }
         this.mutationObserver = new MutationObserver(() => {
             this.openPanel = !!this.getOpenPanel();
         });
         this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
     }
+    componentDidRender() {
+        if (Build.isServer) {
+            return;
+        }
+        // intersection observer is here to observe when the dialog is actually visible and when its not
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+        }
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            this.displaying = entries[0].isIntersecting;
+            this.handleBodyScrolling();
+        });
+        // this.dialog can't be observed before rendering because its not available yet
+        this.intersectionObserver.observe(this.dialog);
+    }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
         enableBodyScroll(this.dialog);
@@ -170,6 +150,9 @@ export class DuetSlideout {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
+        if (this.openButton) {
+            this.openButton.removeEventListener("click", this.openButtonEventListener);
+        }
     }
     /**
      * Component event handling.
@@ -189,6 +172,38 @@ export class DuetSlideout {
         var _a;
         (_a = this.openButton) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
+    /**
+     * Toggles the slideout.
+     */
+    async toggle() {
+        const event = new CustomEvent("toggle");
+        this.toggleMenu(event);
+        setTimeout(() => {
+            this.closeButton.focus();
+        }, 200);
+    }
+    /**
+     * Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered
+     * the slideout so that focus can be moved back to this specific element when
+     * the slideout dialog is closed.
+     */
+    async show() {
+        if (this.open) {
+            return;
+        }
+        this.setOpenButton(document.activeElement);
+        this.toggleMenu(new CustomEvent("toggle"));
+    }
+    /**
+     * Hides the slideout dialog and puts focus back to the original element
+     * that triggered the slideout (if we’re still in the same view).
+     */
+    async hide() {
+        if (!this.open) {
+            return;
+        }
+        this.toggleMenu(new CustomEvent("toggle"));
+    }
     /**
      * render() function
      * Always the last one in the class.
@@ -202,13 +217,13 @@ export class DuetSlideout {
         return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: {
                 "desktop-bg": true,
                 hidden: !this.open,
-            }, onClick: this.bgOnClick }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "menubar", class: {
+            }, onClick: this.bgOnClick }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
             } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
     }
@@ -250,6 +265,24 @@ export class DuetSlideout {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "accessibleRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems."
+                },
+                "attribute": "accessible-role",
+                "reflect": false,
+                "defaultValue": "\"menubar\""
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -344,24 +377,32 @@ export class DuetSlideout {
     }
     static get methods() {
         return {
-            "toggle": {
+            "setFocus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "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": "Toggles the slideout.",
+                    "text": "Sets focus. Use this method instead of the global focus().",
                     "tags": []
                 }
             },
-            "show": {
+            "toggle": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -369,20 +410,16 @@ export class DuetSlideout {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLDuetButtonElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetButtonElement"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered\nthe slideout so that focus can be moved back to this specific element when\nthe slideout dialog is closed.",
+                    "text": "Toggles the slideout.",
                     "tags": []
                 }
             },
-            "hide": {
+            "show": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -395,32 +432,24 @@ export class DuetSlideout {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Hides the slideout dialog and puts focus back to the original element\nthat triggered the slideout (if we\u2019re still in the same view).",
+                    "text": "Shows the slideout. Additionally saves the element (DuetButton or DuetMenuBarButton) that triggered\nthe slideout so that focus can be moved back to this specific element when\nthe slideout dialog is closed.",
                     "tags": []
                 }
             },
-            "setFocus": {
+            "hide": {
                 "complexType": {
-                    "signature": "(options?: FocusOptions) => Promise<void>",
-                    "parameters": [{
-                            "name": "options",
-                            "type": "FocusOptions",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "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().",
+                    "text": "Hides the slideout dialog and puts focus back to the original element\nthat triggered the slideout (if we\u2019re still in the same view).",
                     "tags": []
                 }
             }

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

@@ -98,6 +98,8 @@ export class DuetTextarea {
         this.identifier = undefined;
         this.required = false;
         this.label = "label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.labelHidden = false;
         this.name = undefined;
         this.placeholder = undefined;
@@ -160,7 +162,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", 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)), 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)), 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;
             } })))));
     }
@@ -472,6 +474,46 @@ export class DuetTextarea {
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "labelHidden": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -29,6 +29,8 @@ export class DuetToggle {
         this.accessibleLabelledBy = undefined;
         this.accessibleDescription = undefined;
         this.label = "label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.labelPosition = "top";
         this.required = false;
         this.disabled = false;
@@ -81,7 +83,7 @@ export class DuetToggle {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h("duet-label", { theme: this.theme, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { class: "duet-switch", htmlFor: identifier }, h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { class: "duet-slider" })))));
+            } }, h("duet-label", { theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { class: "duet-switch", htmlFor: identifier }, h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { class: "duet-slider" })))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -285,6 +287,46 @@ export class DuetToggle {
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "labelPosition": {
                 "type": "string",
                 "mutable": false,

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

@@ -18,6 +18,11 @@ export class DuetTooltip {
             window.matchMedia(media_query_large.replace(/'/g, "")),
         ];
         this.tooltipId = createID("DuetTooltip");
+        this.aboutString = {
+            fi: "aiheesta",
+            en: "about",
+            sv: "om",
+        };
         /**
          * Local methods
          */
@@ -76,6 +81,7 @@ export class DuetTooltip {
             sv: "Visa mer tilläggsuppgifter",
         };
         this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        this.accessibleAboutLabel = undefined;
         this.accessibleInputLabel = undefined;
         this.accessibleCloseLabelDefault = {
             fi: "Sulje lisätiedot",
@@ -204,7 +210,10 @@ export class DuetTooltip {
             top: this.arrowY ? `${this.arrowY}px` : undefined,
             left: this.arrowX ? `${this.arrowX}px` : undefined,
         };
-        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("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)))));
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
+                (this.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)))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -322,6 +331,23 @@ export class DuetTooltip {
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
             },
+            "accessibleAboutLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String to add after the accessibleLabel to give more context to the tooltip. Preposition \"about\" is\nadded between the strings. In Finnish, the preposition is \"aiheesta\" and in Swedish \"om\"."
+                },
+                "attribute": "accessible-about-label",
+                "reflect": false
+            },
             "accessibleInputLabel": {
                 "type": "string",
                 "mutable": false,

package/lib/collection/utils/teleport.js

@@ -20,7 +20,7 @@ export class Teleport {
      */
     go(makeSiblingsInert = false) {
         const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport && skipTeleport !== "false") {
+        if (skipTeleport !== null && skipTeleport !== "false") {
             return;
         }
         // React handles teleporting itself with portals
@@ -38,7 +38,7 @@ export class Teleport {
     }
     resume(delay = 0) {
         const skipTeleport = this.element.getAttribute("skip-teleport");
-        if (skipTeleport && skipTeleport !== "false") {
+        if (skipTeleport !== null && skipTeleport !== "false") {
             return;
         }
         if (!this.isActive) {

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-32b5c09b.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-4d3e1b52.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-35de0b49.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-4a55dff3.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-87c24ccc.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-1c7bd169.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-1ecc8fe6.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-471a62cc.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-62c7d9d4.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
-import { g as getColorByName } from './p-9a81250e.js';
-import { d as defineCustomElement$4 } from './p-d080d0f8.js';
-import { d as defineCustomElement$3 } from './p-671e391d.js';
-import { d as defineCustomElement$2 } from './p-09d350df.js';
+import { g as getColorByName } from './p-e078836c.js';
+import { d as defineCustomElement$4 } from './p-975a4689.js';
+import { d as defineCustomElement$3 } from './p-c493eecb.js';
+import { d as defineCustomElement$2 } from './p-fc6bb9ab.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1ecc8fe6.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-471a62cc.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8f253845.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
-import { d as defineCustomElement$3 } from './p-671e391d.js';
-import { d as defineCustomElement$2 } from './p-147a15c7.js';
+import { d as defineCustomElement$3 } from './p-c493eecb.js';
+import { d as defineCustomElement$2 } from './p-3158e24f.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-1ecc8fe6.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-471a62cc.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getLocaleString } from './p-2e36d5bf.js';