@duetds/components 9.14.0 → 9.16.0

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

@@ -122,19 +122,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6451c0e04650a56832e3b55dfb562db4ddd484b2' }, h("nav", { key: '4322bfa5ae8eb0207c78e21d85bdb3c65e290ae1', class: {
+        return (h(Host, { key: 'af1b15954a8651589b75a71211b2afc7d11b4728' }, h("nav", { key: '8060c7a7b7cc9b2b5b51f61927a291cc291191b9', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'a4c9f8ecdab4fb8154b80b75bdf0764b70fd55cc', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '38e52490582abe63054643cb4038196cea78f460', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: 'fa313aef921cebfb7826c447e97d92237064ac78', class: "label" }, h("slot", { key: 'c346b15a97b5c5bf7aca4b6d1a659eb0aeae70f1', name: "label" }), h("duet-icon", { key: 'fd7cfc9e987128b16f195fdc4602fd5bc44f3453', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '0a7c79a9c68419f026435543666b9b28df6bcd41', class: {
+            }, onClick: this.onClick }, h("span", { key: '2409617cc4571c9bc502f163130eb90d858d1494', class: "label" }, h("slot", { key: '8dadc19b14475990fe4da9f60237678b9aed0298', name: "label" }), h("duet-icon", { key: 'b776299707367fee5fe0ee075f9090510341a387', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'd7bc94b646e87cc22c0e325340450ac0c4c746cb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '30367df592ab0dada667a922dfe69f1a97dd63e3', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: 'd56f9657beb5c1f3b964f4e552318e5f585db494', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'a42fa718e8fc1d41e2d87bad0dc276b8977c7dee', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '478a0ac25a2aae7aa09dad0d455804fbd97b2163' }), h("div", { key: '209d7083a63c7b3cb652d8d7cf40fa0276cd5927', class: "list-padding" }))), h("duet-overlay", { key: '0fe995dd00566aace4e6e4398c23717a0e022e49', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'd9beafc8b99857bb0722fac9eca8a8f8f51d74ff', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'b0e11600b15b58c0f9a83d2344189bc2f18df7cd' }), h("div", { key: '3613887ba9a6b68ba1674b22ea20ffaa3eb00aa6', class: "list-padding" }))), h("duet-overlay", { key: 'b24bdad2ce787d341b7f04a31f24f0526950933a', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,18 +96,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cb5e677b605455d234582b23f7014776882640ca', role: "listitem" }, h("div", { key: '038f74a0f7e4a5d2a692f710609cc35a0f0b8b9b', class: {
+        return (h(Host, { key: '9f33cd768a1ec69877aa0c76a0c77e1a100afae1', role: "listitem" }, h("div", { key: '4d52101b1614586ac501f4e7104da73bbc451f70', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '559b1fe4df7f7f2e2bba75966a78a26ca556e1a6', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '9d4b01c987a80d3ecead8711cd042160ad11c493', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b1446d0146342e9fffcfe689eb23a19520b3226b', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '27aad4809f2f613bfad1c9204f4cb0031951a411', class: "label" }, h("span", { key: '4565a4a2825fd8c0ff7e5b1607e29079ee91580a', class: "label-text" }, h("slot", { key: '374137f23f75556640572ce4e55ac8dea77b4eab', name: "label" })), h("duet-icon", { key: 'eb2ff3b2bb13cb24456bd05ff6e190b6f1ca52b3', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '49f18ebd3fc6765db9a5fd286649226ebe79ed42', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'f854ac46417778ce5eda977417cac11d9c50312a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '3db9012df5d99c1130d2fb288e0442d1ddec24ac', class: "label" }, h("span", { key: '389bad658d35704a5ab2bb38e41a6db3f11d73f7', class: "label-text" }, h("slot", { key: 'ad3d4061471320cd5c87002e3a218f2e02434a2f', name: "label" })), h("duet-icon", { key: 'f357faf4c4fa580b7cd66ce2d237ba4f18f0cb13', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7f5d346ee0965ad2fb4ae90035c37da48f5986bc', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'dbc7854708620fc971a0fbc755e75d918975678f' })))));
+            } }, h("slot", { key: '3290a7f8ab15948f69c18da3cd0311615484b5ad' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8b009426558f928de713ea2bb30eac1d4fe5b9fd' }, h("a", { key: '80067be3f308ddef002926e8e81a0e7e031f9e57', class: {
+        return (h(Host, { key: '19d203a6a4985d18c2b7714a75fb763188d04e1d' }, h("a", { key: 'a8d6478b1b598715a43964d304e26fae436e9974', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '319594b6529b9a4c1c5cce67e79e33e062708171', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '645e44313c0a1311e04587b484f73bda875987f5', class: "label-container" }, h("span", { key: '2da2a5c2904e5507f1edb4d0bb7f414d976d10fd', class: "label" }, h("slot", { key: '5f47fe83755d3caa4d520b547fee609cd93017da' })), this.caret && h("duet-icon", { key: 'b89a6102c74ee5460b2ceffed40eb895d64f8d54', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'ff7a33663227d6dd8489f66b2b5929057da8c659', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '97b08ff1b5c0f8ce1dff0165f48822ec17cbed8b', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '28c79e781839ffd6bf371b22bebd8987ee542493', class: "label-container" }, h("span", { key: '9580582e487212cfdf8db2a873f28395f4354c33', class: "label" }, h("slot", { key: 'bf4e8914b9284c0096d90b032b81e93d3d93da1d' })), this.caret && h("duet-icon", { key: '6e5bc6f7b3bb53001e69c03c6b375aa1b448b4b1', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'fc32960d986c1dcc88e60944358dfa5320494c41', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'eddc232862537069e646d18e8de3e6b7e5570f9d', role: "listitem" }, h(TagName, { key: '3203c493afd7c1fee94ab963d73d444ac214edc6', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c237f48ffb0a803f346e627f3378db0447095f04', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '5bc1441b2296f4e359097aa111e2943d7964f3d9', class: "label" }, h("span", { key: '7c2f284efc6f683f0fa8dd0999279b1e5815e5e3', class: "label-text" }, h("slot", { key: '688632c54762efe35b397ef550a184d49c3409a4' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '75a8d9157f7dc2a8408281b48727e0bcf5199165', class: {
+        return (h(Host, { key: 'c287dfc01f81f1f141e6737865729ed1f150393f', role: "listitem" }, h(TagName, { key: 'b3a25e1a9868133e026cc59014a92bc47b967da4', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "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, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '0155ac8b93b2da25697c0d19ea81b8b0fc12782b', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '71c2350aa20bcd4c44e2fda3789734b7571d0882', class: "label" }, h("span", { key: '177921fcf4100c4accbb883e635b0ca4e7b4a8e2', class: "label-text" }, h("slot", { key: '5bf35114d835ce7fbe1e0576fd56afce9050fa15' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '419f75603602b79929bd47fc4f50e57ba2912ed6', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

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

@@ -29,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1851290835bc0e6215a468b46de5d4b4507a1459', role: "listitem" }, h("a", { key: 'f69c3eb64a32fe2fb4751eefddd68e84fed53b97', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '682c9d777be7cc59c30b734aeb2c31843e45671c', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '24f70e921680f881498908e2b5269b8e3ac6b842', class: "label" }, h("slot", { key: '4f66a4338778fa2891eaa88c8ddffe65af1f7a30' })))));
+        return (h(Host, { key: '1631b8785eac1ae6b4572821e41bca2cc8301e65', role: "listitem" }, h("a", { key: '275eb5769ff90ea7bd0e2be9120dc2d8791c5c5b', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'ef4c344048e8407ef8c7cea344d613a57b530315', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '8c6ba8356f5a4ec23c0bcf3ea6f8face48e62397', class: "label" }, h("slot", { key: '19a1be178aeec7d6086db248c1cc80a276239f90' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,6 +48,8 @@ export class DuetTab {
         this.caption = undefined;
         this.selected = undefined;
         this.notificationMark = undefined;
+        this.indicator = undefined;
+        this.indicatorAccessibleLabel = undefined;
         this.accessibleDescriptionDefault = null;
         this.accessibleDescription = this
             .accessibleDescriptionDefault
@@ -65,6 +67,9 @@ export class DuetTab {
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
         subscribeTabbingChange(this);
+        if (this.notificationMark) {
+            this.indicator = this.notificationMark === "warning" ? "change" : "error";
+        }
         this.setupContentElement();
     }
     disconnectedCallback() {
@@ -215,14 +220,61 @@ export class DuetTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Notification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use indicator property instead.\nNotification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "notification-mark",
                 "reflect": true
             },
+            "indicator": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IndicatorVariation",
+                    "resolved": "\"change\" | \"error\" | \"new\" | \"success\"",
+                    "references": {
+                        "IndicatorVariation": {
+                            "location": "import",
+                            "path": "../duet-indicator/duet-indicator",
+                            "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicator to show in the tab button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indicator",
+                "reflect": true
+            },
+            "indicatorAccessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indicator-accessible-label",
+                "reflect": false
+            },
             "accessibleDescriptionDefault": {
                 "type": "string",
                 "mutable": false,

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

@@ -166,74 +166,19 @@
   min-width: fit-content;
   text-align: center;
 }
-.duet-tab-button.duet-notification-mark-warning::after {
+.duet-tab-button duet-indicator {
   position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
+  top: 5px;
+  right: 5px;
 }
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
-.duet-tab-button.duet-notification-mark-danger::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
-}
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
+.duet-tab-variation-plain .duet-tab-button duet-indicator {
+  top: calc(50% - 0.5rem - 7px);
+  right: -7px;
 }
 .duet-theme-turva .duet-tab-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
-.duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
-.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
 }

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

@@ -90,7 +90,7 @@ export class DuetTabGroup {
             });
             this.mutationO.observe(this.element, {
                 attributes: true,
-                attributeFilter: ["label"],
+                attributeFilter: ["label", "selected"],
                 childList: true,
                 characterData: true,
                 subtree: true,
@@ -169,24 +169,27 @@ export class DuetTabGroup {
         return description;
     }
     async updateTabs() {
-        this.selected = undefined;
+        let selected;
         this.tabs = this.getTabs();
         this.tabs.forEach((tab, index) => {
             tab.id = this.getTabId(index);
             if (tab.selected) {
-                if (this.selected === undefined) {
-                    this.selected = index;
+                if (selected === undefined) {
+                    // keep first selected
+                    selected = index;
                 }
                 else {
+                    // unselect the rest
                     tab.selected = false;
                 }
             }
         });
-        if (this.selected === undefined) {
-            this.selected = 0;
+        // select first tab if none were selected
+        if (selected === undefined) {
+            selected = 0;
             this.tabs[0].selected = true;
         }
-        return;
+        this.selected = selected;
     }
     /**
      * To support text-align: center;
@@ -208,16 +211,15 @@ export class DuetTabGroup {
                 "duet-tab-button": true,
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
-                [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
-            }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label))));
-        return (h("div", { key: '8d00d531e80a9c26cf00ef7d0315105c478c02fb', class: {
+            }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
+        return (h("div", { key: '82bdbb06df621e50abe48e5112df78c99213c193', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '8c9abd65ee9f805d69745ee46af2e3626fad5e8b', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '56bbfe2c4f72ffd7ca9f56df5df3f22bcb59ca3d', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -228,11 +230,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '93070e930820e5f493f118e8d60c95b47d4fe47e', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'c26feb7c39a92f1a3d44d09fb2e97a9667e54f41', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: '4b95faccd490ae74645f2eccf68636703ff1fae8' }))));
+            } }, h("slot", { key: 'c6cb02cb9b42a53c57e63e9aafb505af31e9b2de' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'fc3dbefb9caed333ce27098bac9cad5154d0527d', class: {
+        return (h(Host, { key: '147da4a8e086100e74e07d3bdb773b73b53072ec', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,7 +122,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '34742ef188f22769be8c47a122f782193529f933' })));
+            } }, h("slot", { key: '127854a0ecfcd4b3debf08383af581e80dce62b7' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '64b4d516cebc6fa24510aca130d70fc9bb513fb4' }, h("nav", { key: '9b6ce4135f83abc26ed0abd1220dec0c983784f5', class: {
+        return (h(Host, { key: 'ef985ffd5d6ace34e338b68d717e0ff4ddfba289' }, h("nav", { key: 'e7ca6e1aaa3342e2422c4ad43e6a52162f1b181e', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '4480fce81d73c41904c4f6045da68f4b938692e8', class: "container" }, h("div", { key: '077ee51ac07a8369f4ab3e33503080f63d2e3098', class: "list", role: "list" }, h("slot", { key: '7359e182598454aca46588af570ecc83e888d34f', name: "left" })), h("div", { key: '189d1363763a63c10040d2ae9843695027c52657', class: "list", role: "list" }, h("slot", { key: 'f10760c354e2a1d080107eff5dbde9c1bc3b1cf5', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '3c0c92fc2fdd0b5736bc9c61951d4269b24580f8', class: "container" }, h("div", { key: 'f9f17a0ed80a2c530caf8537857dfc76d51c4a50', class: "list", role: "list" }, h("slot", { key: '22cd0173e2588e554cbb8ef035da5d875b28927b', name: "left" })), h("div", { key: '28483b4d1a73201f840eb08fcbf5be41250142a1', class: "list", role: "list" }, h("slot", { key: '97e0bad5bdb1951d56d8c0bb30d031e1d0404d6c', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'a845cc23755fc7a4852b9a6034c7a3da2464af09', role: "listitem" }, h("div", { key: 'd9d3bc229d8ab3369a031fc1acc1e2b88452f797', class: {
+        return (h(Host, { key: '596f1d30769cfc73eff986daa58617c9a93c262b', role: "listitem" }, h("div", { key: '83887c28043e54be6a283bc56dcf4ecaf1a150d9', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '4e2458e7f3458884e6ccc16d15e07e57611a4cb6', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: 'c26200e08162ae86a4df238749142e12bcb46bb9', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '73cccaa547adab87c3480e6b1462a978568faf3f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '81926dc68885ca6ca2290a298727b9d71fc2fc07', class: "label" }, h("slot", { key: '7d99a9ce05e38925b5782fe6f12716446afc2c8d', name: "label" }), h("duet-icon", { key: 'c83b298d4b3e2dadc25702efb503a4c6d2087356', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5129184bb7ae73dd61761748c0d4bc91d963e320', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b771ad4e3866fd9ec5ce2b78daa6fee856581f7b', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'c7f76672e64e33c62e120a4051f37a7f55dc8462', class: "label" }, h("slot", { key: '04884aecafe96d8dba32dd276fa40b63c931f29d', name: "label" }), h("duet-icon", { key: '3b785a7dfec4e735690909bffcc7f8c25520c6b7', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '94c2c5c1847ce591dd7769e536f152362ff6821b', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'edc919fd8370473ebf8ce396986c0ca90bb8a143' })))));
+            } }, h("slot", { key: '30a47f3493e33d12f8b50923fea15f0a5c259b7c' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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: '3a8f1796da5e4eed80e084833b77f496163c9a84' }, h("a", { key: 'fd20d08ddf5814318cd34453e5c9d5c258bd613a', class: {
+        return (h(Host, { key: 'c632f004e1b25c843e913d55c75fc9ce59261541' }, h("a", { key: '3c28f36f8f9b8aecf176de0b5b59b508e625dfad', 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: '271f53fb65a420b00f3318a8ac0adeea352d0237', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '7f381a95d1a2838540bba5c109b07a73ebc2c91d', class: "label" }, h("slot", { key: 'a91086b05e18c4b125704df49f5302b291b3fc8b' })), this.active && (h("duet-icon", { key: 'e8039a105270b943bddb019a3f107badfeba322c', 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: '759c36b6ef114a2fa7e9a72cbe3944307b7fda6d', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '2b66326e82cce5ed92f79c98d21d11b8277bc1e8', class: "label" }, h("slot", { key: '58edb19f68c081b56682e2f89057150456959f8e' })), this.active && (h("duet-icon", { key: '6fff9520d86555a4ad81465b21c8dea364218c3b', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,20 +61,6 @@
   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;
@@ -182,6 +168,15 @@
   background: rgba(23, 28, 58, 0.2);
 }
 
+duet-indicator {
+  top: 4px;
+  left: 16px;
+  z-index: 1;
+}
+duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
+  left: 36px;
+}
+
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
   color: #172a3b;
 }

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

@@ -57,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'd69676de72b58792b6fd41da3e6eb09a53cd48d3', role: "listitem" }, h(TagName, { key: 'd2ff00e84af5a473dac3b4caf3b2a491593dfcbd', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '4a794a46e3a85399537b5d0e754c96023b8965bb', role: "listitem" }, this.badge && h("duet-indicator", { key: '2b7fcc59e1a6085d01e352f4588c8ec1cd9d77f6', variation: "change" }), h(TagName, { key: '75faf7f2cc4771e483596c42d4dc1618dd17ccf0', 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("div", { key: '99f91d28951629539f577ba0aefda88a1a0116f9', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'dc80d784768df86809d20c377e3c7179ca124998', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '345f9099e4c859093b70fca3388867aab136345b', class: "duet-toolbar-badge" }))), h("slot", { key: 'c63b02d192ca68bcd5ec87c9419ae5f18f5b26e1' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '037443df79d823efb2919538d02cac0b047532f0', class: "duet-toolbar-icon" }, h("duet-icon", { key: '1e9c5d4addcaba3688edb9ce169bc20b407b2bbf', 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: 'bcebd3cdca6ac2bd138ae887c0282bdb3a079313', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'b1fa628989fa3fe411e832a64b4db44fdebc9bca', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'cbbaa29928d65247ab5d5502e30939215845ebe3', class: "duet-toolbar-badge" }))), h("slot", { key: '584f63205dd40d32c2dec8ffcbc1c9395f7c1a7f' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'a5ebf0393700731a0962b7d7086f38253fd7af1b', class: "duet-toolbar-icon" }, h("duet-icon", { key: '5336b5e76fd461dfa557864f105814f92451b6e9', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, 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: 'e4a1519e0557bb0d77b6ab89d17e72cefd121540', class: "duet-toolbar-badge" }))))));
+            }, 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: 'fe044a52349d31c7dfad3937841f29b50f90f282', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }

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: '9bf5e5c3c16886df82ba85532811902289208a09', role: "listitem" }, h("a", { key: '549e03a44fd766dabcf4b9a90deced22126d9170', class: {
+        return (h(Host, { key: 'ea2f78ced1097c2fe7e8299533f653269b7cbf97', role: "listitem" }, h("a", { key: '3d624303af389afe4d08c50756e3e0e240eb65b2', 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: '8946a984d10dd47804f79ed821ca8d3e5c94c12e', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'cfa598fbbb9d48527c3eb23aaeb9acea33ebc5f8' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '075505b373aaa3dbd7103ade34ef42a6d7a07ec6', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e78fa0abab2fe36cf44e42208b7f341041ef068b' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,13 +39,13 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        const visuallyHidden = h("duet-visually-hidden", { key: 'e33d5ff7c54de9ccfc5e8fb1412e269a84b35991' }, this.accessibleLabel);
-        return (h(Host, { key: 'ab547cfbb38f6b76df6709a7990d5747ddc6bf7b' }, h("button", { key: '940756da9995337019b88c3d73a88903e6d01e48', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        const visuallyHidden = h("duet-visually-hidden", { key: '9eb5db50b79dc2250ccf2e24dd8d260daee0344c' }, this.accessibleLabel);
+        return (h(Host, { key: '90c2f17d3ecc3d65c2eabf37bc3b9d13cb43c898' }, h("button", { key: '9daf36dd45f62c0319805cbda850d325d7fae558', 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",
                 "duet-tooltip-button-negative": this.negative,
-            } }, h("svg", { key: '878411718bd0af7f2570c2c5fbc798255b7fd167', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cb0fa3b6b5b095d85e2b04bd7a3b2771d1be7dcb', 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: '56af372800cd47d4649fdbde93f4c5a58d648b3b', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '1e7d617fa97e77282ed8c5eb0cc4c6950843e146', 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, visuallyHidden)) : (visuallyHidden))));
+            } }, h("svg", { key: '09b56bf7d3108b987c1d3718c3daa99f30f450ab', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1c61f6ef5e02f9c6cf82f24133b5e6ed5efe653d', 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: 'dc68127a8bcf1b9e8538ffd25362fdbadb4f631f', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '146f6ab16c918f0f88b01c2c5da82a64a51ce814', 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, visuallyHidden)) : (visuallyHidden))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }

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: '52785c8e588e72a87dcf1add6c8ccca0cbd26448' }, h("div", { key: '085b0aa28ec28f0615daedf985fb23f7db8d35c7', class: {
+        return (h(Host, { key: '20c858471eb122674b6c7ac5de1b243eee925fa2' }, h("div", { key: '663db7f4fcfc622d7eacf3a688c9855299ba8cf9', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: 'ae3793ed10fa5b4c6d85350f9bae48a32a93bf8b', moveFocusTo: this.buttonEl }), h("div", { key: 'f4654d51693c02e8c7c95dcfd11b07dd498d31ee', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '3cb80ff2bd3e5f22e91de7d5cb8c719f9650cf48' })), h("div", { key: 'a6e3ac901d41380301f593aba7542ba445a34a64', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '4abf64ccc297dde45c638b2669a44901a3249b1b', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '8a5f07200d7128784b691dc089a9dcc70ea3ba25', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'aa4359871dd0fbea3ca4853cad8eeedc8f54d7ef', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'ae77b164703d563392d427039d075c7e123fe825' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '1ac506b5ff7da2efefaeb004032ccae12c73982f', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '7ad49fff09a690cae1a3089dc34028fbce775265', moveFocusTo: this.buttonEl }), h("div", { key: 'c5a92a166d28092b2c58ecbf3fb5f9074e254081', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: 'aa4ffe0b471baf807fcc21a4fcba7dd61872a614' })), h("div", { key: '541a8ca3aa8963840740481b632d95d31b040643', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'fdd6a17db7b4ca37ade95264d6c8024d45011af6', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '914f2a0fb4376f8033059f8c5fe34f42bb6e6672', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'ca76340b0f68ec1d424384f2adc3cea1de1d9e76', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '7a58123fa4fb824972ed724bf2ab67326f634617' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '079e18d721f95ca86e3b58818bdc4362ff5f528b', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,14 +87,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '96084606679ac986f5d860ffc195f26aab281295', class: {
+        return (h("div", { key: '1d7ecedacff4c6f944fba1cd8a8e3ead97d0bdb7', class: {
                 "duet-tray": true,
                 "duet-tray-is-active": this.active,
                 "duet-tray-is-hidden": this.hiddenState,
                 "duet-tray-is-responsive": this.responsive,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: 'c216ef5fe147332444de7041a7cf055ef7647d11', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '1142c70df87b38b5db3a2406f353ec9406cebfb3' })), this.hasAdditionalContent && (h(Fragment, { key: '86874d91c2e4c75d3b8d7e874950e9c0b450ddf1' }, h("button", { key: '5cd57f0eb06084abf2a12285efd180312dc877f0', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '7c210e3b602778375c1ffc82b0af164704ec61ea', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '5a5538e6925ceef086a3e065854445f142215310' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'a8f2db600b259ebc99a7ae2c406f1f88d8cad5f0', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '04eb7a74c403f4e837ea55f95039c24eeac235aa', class: "duet-tray-expandable-content" }, h("slot", { key: '512d3db4d7f11126a4b56870afb70f4d74189c8e', name: "additional" })))))));
+            } }, h("div", { key: '975ab4626c5bf9b232bce92778d549aab452ff8c', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '2e0747c828ad43d2924a86ad0b92e530bef3fc88' })), this.hasAdditionalContent && (h(Fragment, { key: 'ea46786865bd60c5bb2e76ea53c4440e5e66b58d' }, h("button", { key: 'b2d26fdc7da5127389c579f8fd237d5ad8d86f76', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '100006a3739e953ac6e59b0de175a458a67f002f', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '0a573ad597411e4c05bc55f3398a266a9394f2fb' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '8f32327012fee5df11e22a02e46d75fab9c51e07', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '181ace36ed5a84c229e0af26e5b410b11456fb20', class: "duet-tray-expandable-content" }, h("slot", { key: 'a0ed8f11df760051de06207ccd8abe43bd26a7c0', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }