@duetds/components 9.5.2 → 9.7.0

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

@@ -84,6 +84,49 @@
     overflow: auto;
   }
 }
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper {
+  /* stylelint-enable */
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  /* stylelint-disable */
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay {
+  display: contents;
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background,
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border-radius: 8px;
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background {
+  z-index: 100;
+  background: rgb(245, 248, 250);
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-block: 1px;
+  content: "";
+  border-radius: 8px;
+  box-shadow: 0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229);
+}
+.duet-theme-turva .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after {
+  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border {
+  z-index: 206;
+  border: 1px solid rgb(212, 223, 229);
+}
 
 @media (min-width: 36em) {
   duet-select {
@@ -118,6 +161,11 @@
 .duet-tab-button.duet-m-0 {
   margin: 0 !important;
 }
+.duet-tab-group-stretch .duet-tab-button {
+  flex: 1 1 0;
+  min-width: fit-content;
+  text-align: center;
+}
 .duet-tab-button.duet-notification-mark-warning::after {
   position: absolute;
   top: 6px;
@@ -194,7 +242,7 @@
   border-color: rgb(127, 150, 165);
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: rgb(143, 147, 158);
+  border-color: rgba(199, 202, 207, 0.8);
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -214,20 +262,21 @@
   border-bottom-color: rgb(198, 12, 48);
 }
 .duet-tab-button:focus {
-  z-index: 200;
+  z-index: 205;
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-tab-variation-default .duet-tab-button {
+  z-index: 200;
   padding: 11px 20px 13px 20px;
   overflow: hidden;
   font-size: 0.875rem;
-  color: rgb(81, 105, 123);
+  color: rgb(62, 84, 102);
   background: rgb(245, 248, 250);
   border: 1px solid rgb(212, 223, 229);
 }
@@ -244,8 +293,9 @@
 .duet-tab-variation-default .duet-tab-button.selected {
   color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
+  transition: none;
 }
-.duet-tab-variation-default .duet-tab-button.selected::after {
+.duet-tab-variation-default .duet-tab-button.selected::before {
   position: absolute;
   right: -1px;
   bottom: 0;
@@ -256,11 +306,19 @@
   content: "";
   background-color: rgb(0, 119, 179);
 }
+.duet-tab-variation-default .duet-tab-button.selected:focus-visible {
+  outline: 2px solid rgba(0, 119, 179, 0.8);
+  outline-offset: -5px;
+  box-shadow: none !important;
+}
+.duet-tab-variation-default .duet-tab-button.selected:focus-visible::before {
+  height: 0;
+}
 .duet-tab-variation-default .duet-tab-button:not(.selected) {
   box-shadow: 0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229);
 }
 .duet-tab-variation-default .duet-tab-button:hover:not(.selected) {
-  color: rgb(45, 64, 81);
+  color: rgb(30, 45, 59);
   background: rgb(228, 236, 239);
 }
 .duet-tab-variation-default .duet-tab-button:first-child {
@@ -269,31 +327,47 @@
 .duet-tab-variation-default .duet-tab-button:last-child {
   border-radius: 0 8px 8px 0;
 }
+.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button {
+  z-index: 200;
+}
+.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button:last-child {
+  border-radius: 0;
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button::before {
+  height: 3px;
+}
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button {
-  color: rgb(98, 104, 122);
+  color: rgb(71, 78, 101);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected {
-  color: rgb(51, 5, 20);
+  color: rgb(23, 28, 58);
   background: rgb(255, 255, 255);
 }
-.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::after {
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
   background-color: rgb(198, 12, 48);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected) {
+  z-index: 200;
   box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:hover:not(.selected) {
+  z-index: 200;
   color: rgb(45, 52, 79);
   background: rgb(234, 235, 239);
 }
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
+  border-color: rgb(222, 224, 228);
+  outline-color: rgba(199, 202, 207, 0.8);
+}
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
   padding: 12px 0;
   margin-left: 0;
   font-size: 0.875rem;
-  color: rgb(98, 121, 138);
+  color: rgb(81, 105, 123);
   border-width: 0;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   transition: none;
 }
@@ -309,6 +383,7 @@
 }
 .duet-tab-variation-plain .duet-tab-button:hover {
   color: rgb(8, 42, 77);
+  border-bottom: 2px solid rgb(0, 119, 179);
 }
 .duet-tab-variation-plain .duet-tab-button.selected {
   color: rgb(8, 42, 77);
@@ -318,13 +393,14 @@
   margin-left: 36px;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button {
-  color: rgb(113, 118, 132);
+  color: rgb(71, 78, 101);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
-  color: rgb(51, 5, 20);
+  color: rgb(45, 52, 79);
+  border-bottom: 2px solid rgb(198, 12, 48);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: rgb(51, 5, 20);
+  color: rgb(23, 28, 58);
   border-bottom: 2px solid rgb(198, 12, 48);
 }
 .duet-tab-variation-checked .duet-tab-button {

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

@@ -77,6 +77,8 @@ export class DuetTabGroup {
         this.setTabIndex = true;
         this.tabChangeConfirm = false;
         this.switchLargeBreakpoint = "small";
+        this.fillSpace = false;
+        this.stretch = false;
     }
     /**
      * Component lifecycle events.
@@ -209,23 +211,28 @@ export class DuetTabGroup {
                 [`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: '3c43b90c86da8b84482d816d06e6a3218aaf365c', class: {
+        return (h("div", { key: 'b7f2848d57cafb3d41287f90b8c48b6870ca6e02', 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: 'be929248e27f557e9f274427cf36320db7e0ae52', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd96384958ba83c00c34e4e49d08ea6d90ace8b96', 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,
+                "duet-tab-group-fill-space": this.fillSpace && !this.stretch && this.variation === "default",
+                "duet-tab-group-stretch": this.stretch,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.variation === "checked" ? (buttons) : (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 }, buttons))), h("div", { key: '07d2edc0e8a9935d414571297699b8aa6e6faeab', class: {
+            } }, 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: '1af41aa98fb13ebd5fb4f8913a8ae2a990007271', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'dd98577cd851f44400d93b04a5bd14e3117d9618' }))));
+            } }, h("slot", { key: '2a232778878cbcd955bf24d008384d1dc02659e9' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -342,7 +349,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
                         }
                     }
@@ -597,6 +604,46 @@ export class DuetTabGroup {
                 "attribute": "switch-large-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
+            },
+            "fillSpace": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab group fill the space with background, only used\nwhen tab-group variation is default."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fill-space",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab buttons stretch to fill the available space"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "stretch",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -626,7 +673,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -647,7 +694,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -668,7 +715,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -692,7 +739,7 @@ export class DuetTabGroup {
                         },
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     },

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

@@ -113,7 +113,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'b3ed604b2b5f0b8e31f7b90abc64693662bfef3d', class: {
+        return (h(Host, { key: '27ca97cd0ab8838a914fad68c44307707b13c646', 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: '29df6d3c640fbf3a7fa51b73323c3628246d3095' })));
+            } }, h("slot", { key: 'ef1fc8226a4cbf04cac71ba4e5a9968791806281' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -886,7 +886,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -907,7 +907,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -928,7 +928,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -949,7 +949,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }

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

@@ -526,7 +526,7 @@ export class DuetToggle {
                     "references": {
                         "DuetToggleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-toggle/duet-toggle.tsx",
                             "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
                         }
                     }

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: '6ea0ca6e03a956c5c11e6b6b67802a8344e6f3d8' }, h("nav", { key: '8937fd46b558b273ee838a47b14b9810c074829d', class: {
+        return (h(Host, { key: '5d1928ecfa31b291fb49392ed2a925b7c44f874c' }, h("nav", { key: '77ed3f9e5d74496b37eb2d2cae82ed1b1bf41a27', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c8aa7075e8ab33484f13a8ef7ac8b2127b30ffe2', class: "container" }, h("div", { key: '76d2daf0e82846945f3510cbc21fc26e8d29936c', class: "list", role: "list" }, h("slot", { key: '12bced2c765270ea94a844b9c68d993e9d43f245', name: "left" })), h("div", { key: 'fed6a6058becea2b85d0131488e212967ee9530f', class: "list", role: "list" }, h("slot", { key: 'e51cf22766660164cbd150a6203d8e55929dd40c', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '2dee9cb750eeff0f3503f7cc6089e099121846bf', class: "container" }, h("div", { key: 'a2ce0113b8f5449a6e9444d2c7f7f236ef1453c7', class: "list", role: "list" }, h("slot", { key: '0cb2afde21b99b45b1c77342373646c30bc4a596', name: "left" })), h("div", { key: 'fd0b99b6894243e88baff62fdc90afb219f098ea', class: "list", role: "list" }, h("slot", { key: '3a923f1f78fedb5a60d267d1631a4c2bd2fa62c0', 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: '71c0427eecb0676263c35bff4557210701d27e6f', role: "listitem" }, h("div", { key: 'a5038335629483dcf2d049129ebfed49eae6a457', class: {
+        return (h(Host, { key: '8b511c738a8995c5a277b0614abeead7e2c64643', role: "listitem" }, h("div", { key: '923faa507cfc2540840b56073010bec405c42e43', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '5be6ce290e94c6e03c8c49336f4ef50e4283a92a', 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: '52a182352b7b15c90547a0f6c9f410b80945dffc', 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: 'e4e5076e21a084d205cb550946f6a7914911a4e9', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '4a79cbc7d59d30c5f763050c44c61c03ae502e74', class: "label" }, h("slot", { key: 'adecb2560eba25c9bdb1872fedc29c6b98c4d343', name: "label" }), h("duet-icon", { key: 'ef92b887f19bd4145ae89b3d6ab05be6c3b2fcd0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '61bb1eff472548331aab26b636fb4606fbc982f7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'd071a84e8a5177e0d83000985acf64d710ce9b97', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8a377bd964f4d7e8d843ede3783696ee083c711e', class: "label" }, h("slot", { key: '21a44500f70a23ec00e000847361dc0cd01cd47e', name: "label" }), h("duet-icon", { key: '0d9fce9714df81c477058c8f9c4a167e5bbc8f87', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f1e87be086a8065e38316c0b1acb3df977b3f245', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'bdbb39527038baf411f9f4770cf594bdb3e86378' })))));
+            } }, h("slot", { key: 'f431ba4cbd6d6bbc66603726a04b9f2f1a041735' })))));
     }
     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: '1c874f9ed81beb0ee19f1675e95dffd0a193e2ce' }, h("a", { key: '8b04559cb61b8c25ecfd1511cc07de5a260f70bf', class: {
+        return (h(Host, { key: '934f131ff69a3fb16c5255f19ab67c074c67d97e' }, h("a", { key: '9df6ae3bfff7fcb220bc06917fd5afec8770970f', 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: 'c58dd6c5edc6a41fe20c73876cbe5637b9d389ba', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '93d7b57557f9999e2a790a94407e098a3b43350f', class: "label" }, h("slot", { key: '3ef98fd8e64aebc17df819a375c2e38207ccf3aa' })), this.active && (h("duet-icon", { key: 'a77c71f91778c5e70c0c23decc3ea9e23168422d', 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: '0bbf55cbc6c77128aa15f9f886af498579ca9568', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '38a3e232109349816237d3e1be59d3771cf7cb6a', class: "label" }, h("slot", { key: '782f4a9b43d0f399ea44bedf98d51558728c494c' })), this.active && (h("duet-icon", { key: 'e9d4fd6e46d65868ef1604ab6ac9767de1682f06', 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.js

@@ -57,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: 'c0d5061e7e445fe00600142c5ab9487d8a14be1c', role: "listitem" }, h(TagName, { key: '74aee7fa6cd8f841f47393875699e69880e1ddca', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '4c676c7e5ec6deadf4f2ccfeb1212a329ad31a83', role: "listitem" }, h(TagName, { key: 'ae93e8f9dc15663f92819a9612446f78fe8d3b6b', 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: 'bbd475ae20380e88619c9c5e66a863cd42f1ddd9', class: "duet-toolbar-icon" }, h("duet-icon", { key: '771702c41bdcfc96e85998faf3e491e06a89d858', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '5d8ef6d9d2423149d40ab6fe7d76962dee157f54', class: "duet-toolbar-badge" }))), h("slot", { key: 'f8e1cd47bf03ee4665d3ba89aaca4f159cd64a79' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '850853f0ba43f5fcdbecdfc136abc16503adfe03', class: "duet-toolbar-icon" }, h("duet-icon", { key: '1691701310387fd3b9fc66a3e52a0773e17690f9', 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: '0cbcd4f6525dfb5a0d1406a0a1e35931e6288bdd', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'c25a832e644474f8bb338a0b7f62d21ae58f5269', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '508ccd1988d068dc636aad97b374a3601b74b507', class: "duet-toolbar-badge" }))), h("slot", { key: 'ebba43c92305fc7ebbb6196d8892690eb1df3562' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '188c7bb368121e35d75a66a970782c180d349d80', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'bd851ec1bd852a90739eb790bc7a4853110d48c7', 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: 'eefea78c580bc96af908ae976d2aa95a6dbf3a9b', 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: '433ab564808774541b59ca860b34b0f6e9d8c422', 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: 'a9bad03bed8baaf152e894e7a55ff4320e88a642', role: "listitem" }, h("a", { key: '7d14f4577994ee4bfc3086ba9f5ed9cc5d47c881', class: {
+        return (h(Host, { key: 'e5423c219a30144ea3b3e40ba6aa83ebda9f2b24', role: "listitem" }, h("a", { key: 'f517898e695b37ef3037e7c217d70c135f4d0030', 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: '36472408f3522a7a24312231b7986c550acdca94', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '05f975b4b50d0c7d3077501d0f226bff12562381' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2d36bd6a40eadf4167c8fe7560c6bba4f2199cac', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '930758dcbadf30a2808bcc19c4787a4279aafa67' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,12 +39,12 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '41e46d97560f847907ab8e0579f54ed4f710454b' }, h("button", { key: '04bbaa44c4a90a0da3558c11604ebcb204830ade', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: 'bc36621b7fc830cfb8ca434188d7f50ba4e4542b' }, h("button", { key: 'db275d682c9270a6fda156c50776662d94816b1a', 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: '03203d8047a49b233de788ee7434811708a8d1af', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '32c2fc2cb086463e7711b179d5282c9711029dfe', 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: '29008bcb7893ae4896b9371711faeeba022fb0bd', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '8029a29e34ef3994fc8dc402432329bb4eb1e517', 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: '6f74e7cd6e8ec203590038e36b1351d2245707ee', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '47704ecc8941cdcb856f6882b36ea67b17e2c4cb', 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: '5787a0fd9287e4706445dc87620523fa4cb71868', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '78de402d0a039784299b486eb685bb06e3f3459a', 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"; }

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: 'dcefd2a138b0d6599a09ff8a72f293ad6c7e891c' }, h("div", { key: 'e3ef1db922edbb62bb6164583422409cca33423b', class: {
+        return (h(Host, { key: '8474dad9661249e8ba481e360e8f42a7321c5412' }, h("div", { key: 'f1e70b81c3d3398a5074b07a60e791eca97e2881', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: 'a69785a224b6d332ddef3b3a58a1de92180f0630', moveFocusTo: this.buttonEl }), h("div", { key: '6b9dc31cc5430f788a1a185750bf09135af9d12a', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '248ab704fdde7e7f1a9485df5fec73e4577ef454' })), h("div", { key: '47938f76464592121f5516b83e4efeda81b35cc7', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'd619ec83554676708f8d9bc56dfb7bfa9edaaa8d', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '2e6b1c12e407e9724d6fd14e8c17c6e1471cce7b', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'a32ec01897dc04fa3e70b1b2f0f46d59bf55f9b3', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'be53bde5da4a21dd4641a190587e0cb3f27bd7e6' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '7e378988bbb34cc60540a9c475346f0f2faf0544', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: 'd21aeccf6723db71c44cf16f15a322c1cdc85fdc', moveFocusTo: this.buttonEl }), h("div", { key: '36fe75956cac98e1ecc917dd4eccaebc7ac3659a', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '7e7930c17ae679c7c49f7c6d727ff9d5e33b098a' })), h("div", { key: '05feacb8b46d298d0b789b8e1ba2ef6e291e8d62', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'bf3d5ad0aa7fcd59514e32be36406abad9bdf42a', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '8667096436686fb84ebac5d92d5e15c4d7940d1c', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'dca41a670fb8f3fb7b36261932f0caec193c8fbc', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'f3737f4bc108eba91b5520fbf3ff39ef55d82b3c' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'b702d271e89ba15b2ab3b6f01854238b57a3875d', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -443,7 +443,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }

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: '62a748ef2e433a9c2d08652ec04a9a10971a3ac9', class: {
+        return (h("div", { key: '4eadeeff8f0c1a1047ece3ce7074bbe330b27304', 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: 'd33fb1333ae4950b44ab3c86e803548c6a468552', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'd6ebec5a86056d4e1dbe077afbe5f7ef37984c0c' })), this.hasAdditionalContent && (h(Fragment, { key: '49232fadf33105d0aa26fd5fb7b6e666eedc0b1a' }, h("button", { key: '0859a84faede30184a5f6e731f98fb6aea8f8d5c', "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: '4e5480e755aa9cb9237b6b8f2e8f95270cd9f4d0', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'f0dbe2e47e92902228f9ef20810b22486b40db60' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '15c7bb123ddd408339dee76a90706e40e485c6ac', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '44cd2bb16519b7c134baeb4042a2e960ddaaf229', class: "duet-tray-expandable-content" }, h("slot", { key: '3e88358f56fb1479159dd0aabc7bd20dc702ece2', name: "additional" })))))));
+            } }, h("div", { key: '7fc02b5732546c8f7b90fb6cde20a3113c1e1e27', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '35394a91f0596c48bc44fcb27b9981dc2fe1c669' })), this.hasAdditionalContent && (h(Fragment, { key: 'a202a321ce7400dc6fb261ea98e2c3d7f4224fe1' }, h("button", { key: 'ef99d0253c90ccbbba2cd35803dc1cf8b8b5bcb6', "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: '56ae22d34327fe1cc19dd4cfb1fdca4ab3b8f583', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '1cc8e44778131120961b882dee53268530f7a73a' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '1f258521cc9fc825c60c8392ac3a8a8b63f3f2b6', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '5def2cf12a83a28a4e8331134ba05c2d918316b0', class: "duet-tray-expandable-content" }, h("slot", { key: '3c08dcd0fc017f732f8ad8681e59a886eb2be346', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }