@duetds/components 9.2.1 → 9.2.3

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

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a33846447e336d9ba1744b64e256fb6144ecf56d' }, h("a", { key: '8613597d4c4e5de513169f87e426effcf7e1ab68', class: {
+        return (h(Host, { key: 'ca2c386337ef8052184214a47865bc93b192efea' }, h("a", { key: '2601354c27b7ff3858e561585176e040d2bfce25', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e0dc39be130d8cc14a336595098adfec4e2dd74e', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '1dad6713a1f65d274269cdd3475a5e83b6a4ac18', class: "label" }, h("slot", { key: '017e8fe9eec10b313263ba4007c4d10dcef17e8e' })), this.active && (h("duet-icon", { key: '09386e5b6f037069a71777127c4f1b40bf818791', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '0f941114682ef7527bf69e9e5a42ef0d095a1b2b', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'f5eac01e244e0cf0bb48229c58076580fea8e5d6', class: "label" }, h("slot", { key: 'afc1ab27f5e67371e52fa2e4da46b453b24ab75c' })), this.active && (h("duet-icon", { key: '041c528108a13b672788bbc254d7d6c0ee362008', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +65,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -88,6 +90,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -106,6 +110,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Language of the link. Use this only for language selection links."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -124,6 +130,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -142,6 +150,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -160,6 +170,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -48,6 +48,27 @@
 .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-item .duet-toolbar-icon {
+  position: relative;
+  display: inline-flex;
+  font-size: 0;
+  line-height: normal;
+  vertical-align: baseline;
+}
+.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
+  position: absolute;
+  top: 0;
+  left: 11px;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: rgb(247, 178, 40);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #c18b1f;
+}
+.duet-theme-turva .duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
+  background: rgb(247, 178, 40);
+}
 .duet-toolbar-item .trailing-icon {
   width: 16px;
   height: 16px;

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

@@ -21,6 +21,7 @@ export class DuetToolbarItem {
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
         this.external = false;
+        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -56,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'c651741671154cd0e5851a6d6600c2eb96185740', role: "listitem" }, h(TagName, { key: 'dfc4397a8bd132f3a56accb84109c1bc5b0edc71', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'afa849ce4f6ec1c066ee4462c84bf51146a8b1b6', role: "listitem" }, h(TagName, { key: '0af801b2ff5b432b0f41f72ab367932046671b7c', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'd770fb6252e01cfbfdf8c30810dc88f95eb6cc3c', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '4efe99a166b4078028022fbdd23ce8bbf32c6bdc' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4a7f60fa0e412e2254dea5462de15f80fcdd4494', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: 'b90f4fcad2b46e4cb1f39f204595ab30eda04274', class: "duet-toolbar-icon" }, h("duet-icon", { key: '76855f764087b7505ef5eea360be023d894b2d51', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '291a2974a4972a973bbc6f989265a6c0779a1ff3', class: "duet-toolbar-badge" }))), h("slot", { key: '9899ea590965a155c9890dc1d68fe0e8bf874c15' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'dc913307616babe431177341d31a5d0262d7b438', class: "duet-toolbar-icon" }, h("duet-icon", { key: '643938497cfc43a1f85587993a2b11cb54b967e1', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
-                "external-icon": !!this.external,
+                "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" })))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '795d10ab43384c774440487bdef889a0d3b59814', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -102,6 +103,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -120,6 +123,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Variation. Secondary is not supported for Turva theme. Negative is deprecated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -138,6 +143,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -156,6 +163,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Url"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false
             },
@@ -179,6 +188,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Left icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -203,6 +214,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Right icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -221,6 +234,8 @@ export class DuetToolbarItem {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -238,6 +253,8 @@ export class DuetToolbarItem {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-expanded",
                 "reflect": true
             },
@@ -255,6 +272,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Use this property to add an aria-haspopup attribute to a button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
@@ -282,6 +301,8 @@ export class DuetToolbarItem {
                         }],
                     "text": "Defaults for accessibleLabelExternal"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
@@ -303,6 +324,8 @@ export class DuetToolbarItem {
                         }],
                     "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
@@ -321,9 +344,31 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Forces URL to open in a new browser tab. Used together with URL prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "badge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a badge that indicates something has changed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '6a66cea74140b5db01202d0f1ca06072b9c3dbd4', role: "listitem" }, h("a", { key: '7d494df416a0720defd5159669b2c85fb8a5f448', class: {
+        return (h(Host, { key: 'c53a9b05b8bf38d7f393863392ec9ffa5eeea0d6', role: "listitem" }, h("a", { key: '633ff7b9e9e322eb33402d00a3da6ae9dca2a04c', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'f6a26cd3099dd843e09a2473ecdf99e63b55a80f', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '14f9e21db7f199f4c09fd9838162b44f28c685e4' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '4de0041a0235dae5494904de06785b214c6a1edf', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '15fe5f1f6f641fa2c233aca8c0dd1802b22a5143' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +65,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -83,6 +85,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Variation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -101,6 +105,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -119,6 +125,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -137,6 +145,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -155,6 +165,8 @@ export class DuetToolbarLink {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             }

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

@@ -38,11 +38,11 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '4a3bc0a7387a6ee9301370fcddd4cbea3d3744d3' }, h("button", { key: '4b215f11753fe4b67089ee0c4719657f9d67e44e', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: 'e15846eb1696236fe6aba826e5c0fcea835d7c9b' }, h("button", { key: '995033945e9c069143e7ff97a7728766761f8a7b', 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", { key: 'bb183d86de565800c0b7b406f95ae2fa1ee14d4f', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0d71e87e5bfdefc8464e9a42d8868e24d4c17476', 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", { key: '092e34189723e7c5e88f442927af839bc0426d17', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '193b5f7f361c9ae2b1718fc2b5a6f479075b263a', 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)))));
+            } }, h("svg", { key: '38aa8adbeed3df60e30be0a72a9dc23376cf9d47', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '30e417ff8878c2ed36bd59fd92e9e1970aa6c235', 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", { key: '83f4a042160be7dd998ef3247bccebd955498c5b', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '81bd29e6c558d9f3551d65d7f1172c1ba327bbec', 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"; }
@@ -72,6 +72,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -90,6 +92,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -113,6 +117,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": "Theme of the card. Can be one of: \"default\", \"turva\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -131,6 +137,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false
             },
@@ -148,6 +156,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-id",
                 "reflect": false
             }

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

@@ -53,11 +53,11 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: 'ac8f27a96fb59b93219859633b8735e75a4794ed' }, h("div", { key: 'b7741f367063c54bb1134f83ed7939980d8c29d7', class: {
+        return (h(Host, { key: '3f38cf64a79c94b97a530e000c41bf9fe66dc1d3' }, h("div", { key: '8263e22fea17fce355c8dca137501fcebcbac59a', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: 'a04dc03abb6ae1d05fd884de1a39ca071ca77821', moveFocusTo: this.buttonEl }), h("div", { key: '3a035e3a4c49a924e7e269722e1f8831e1539cb8', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '47cf71c973ee05e2f6aac639493932edb87430a0' })), h("div", { key: '538cfc3ac931bf93d3bae72c43667294efff7451', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '7ca7a0576ca1b6e51c71dcffb555cd09be0232d6', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '413c242ac217f365afb66390b80bdbba76417985', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '4c676f3c7b717ba5c885750f1a3695d2f8033efb', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '2491f3bb82311d5e1353690ca70c63a50a447d3d' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'c9d63b7a36d1bdec4efbd032adee2895dd7ae88b', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '45e183fcae3b5a0007ee9bc74f91211911c2c7ee', moveFocusTo: this.buttonEl }), h("div", { key: 'd713e42ca6802b18c6123efd6055b19fc334df03', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'be6787f83b2cd73ccc626643618463eccfb03f09' })), h("div", { key: '0017934953c28e0d1259b2c4d7604ef58d2e4e76', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '48a2789dc17b78d40b10b87f2a640dd2b08922b7', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'a83a9247e89b8a41b57e89ca7bf5e0676f3770f2', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '3ed992460103ed794a1f3f3ee13308970d0a117e', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'a3698d2049410e3098610bcc4c4514b767ac13ef' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '94de660c3ca5a21bbd0d9bb892e0d91b6a1b1f10', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }
@@ -93,6 +93,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": "Theme of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -111,6 +113,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false
             },
@@ -128,6 +132,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-id",
                 "reflect": false
             },
@@ -144,7 +150,9 @@ export class DuetTooltipPopup {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "placement": {
                 "type": "string",
@@ -160,6 +168,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false
             },
@@ -177,6 +187,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label",
                 "reflect": false
             }

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

@@ -230,6 +230,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Theme of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -260,6 +262,8 @@ export class DuetTooltip {
                         }],
                     "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
@@ -287,6 +291,8 @@ export class DuetTooltip {
                         }],
                     "text": "Default language strings for the accessibleLabel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\",\n    en: \"Show more information\",\n    sv: \"Visa mer till\u00E4ggsuppgifter\",\n  }"
@@ -308,6 +314,8 @@ export class DuetTooltip {
                         }],
                     "text": "Adds accessible label for the info icon that is only shown for screen\nreaders. This property is always required to create an accessible interface!"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
@@ -326,6 +334,8 @@ export class DuetTooltip {
                     "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\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-about-label",
                 "reflect": false
             },
@@ -346,6 +356,8 @@ export class DuetTooltip {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-input-label",
                 "reflect": false
             },
@@ -372,6 +384,8 @@ export class DuetTooltip {
                         }],
                     "text": "Default language strings for the accessibleCloseLabel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Sulje lis\u00E4tiedot\",\n    en: \"Close details\",\n    sv: \"St\u00E4ng till\u00E4ggsuppgifter\",\n  }"
@@ -393,6 +407,8 @@ export class DuetTooltip {
                         }],
                     "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefault,\n    this.language\n  )"
@@ -411,6 +427,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Label of the tooltip. If used, replaces the accessibleLabel option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -435,6 +453,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the responsive breakpoint where tooltip starts opening towards left."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -459,6 +479,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -477,6 +499,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the vertical positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position-vertical",
                 "reflect": true,
                 "defaultValue": "\"0\""
@@ -495,6 +519,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position-horizontal",
                 "reflect": true,
                 "defaultValue": "\"0\""
@@ -513,6 +539,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Toggle whether the tooltip is initially visible or not. This property should\nnot be used in production in most cases."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"