@duetds/components 9.1.0 → 9.1.2

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: '5e9d763d516ddde6ca5669cc153e0694445a50ee', role: "listitem" }, h("div", { key: '4dc0d8860562c85e0d70c8ebaea4bb8eef639aaf', class: {
+        return (h(Host, { key: '361b820b8f227befb95bc64b87c761c2d0396a4f', role: "listitem" }, h("div", { key: '53210cb90b3d5e714d1d8e30cca928b9ca22e416', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: 'fe9dc76f1238082d436632a00af9ab0c584af486', 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: '2df474dfe088be14b042114456474c876f4b61a0', 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: '5ed527a853ded56c0711ff4caf53b653dadcfcb8', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4649353d7427e225a315c084cdfcf4bbe10f5487', class: "label" }, h("span", { key: 'a5d20f7ef8dfd1389dbcd79e6c4417f964cd6a5c', class: "label-text" }, h("slot", { key: 'a568dd1e1ab914bad89cbe2db7ed9143523dc24f', name: "label" })), h("duet-icon", { key: 'fcdbf9e30b8c837c74d1c4377a2eee142f3ff282', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5b389af3d376b72a9c08eecd59f259f29b705959', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '89d102ebae36a02c887f3824fffaa4271590d92a', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '31866b710f3df48bfb0aa0dcff165e617e8cc327', class: "label" }, h("span", { key: '193d3e662d773b7ce3bc8e67265469fb254d8f1f', class: "label-text" }, h("slot", { key: 'a1c2a3a7d385a99ad697244ea8ff303bc9f62d34', name: "label" })), h("duet-icon", { key: '7190348fc2dd0ea59e407be5b60de9476a349594', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'c0cad51034312dcdb9ff9ca435f9091ae9ecfc55', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '2bb565befadb2adc00eaa7b924adbb6826642f14' })))));
+            } }, h("slot", { key: 'e53f34efca52841432dd37b703f1ffdaa68eb940' })))));
     }
     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: 'a400917134e580c4893ad3eba9903b940b0cdbae' }, h("a", { key: '871e51527e709c741f03abbd80a1e29da982aefa', class: {
+        return (h(Host, { key: '64c7a859f5b865bc0308445b9d0156156837fe49' }, h("a", { key: 'c44943bce8c5a15f3ede97c010eff57f7f7941c7', 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: '0da2198cdb336d7ea2497eb41142a87bafe8acba', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'dd44684f0c0675ced40c76f2f146710d93967de9', class: "label-container" }, h("span", { key: '2d2a082969a43fc184d3279995fb8b44326eeaef', class: "label" }, h("slot", { key: '54cb80ae2ee9abb088d6a47fd32b386a176ed1bd' })), this.caret && h("duet-icon", { key: '12aee3915eb2a897ec544a52ed04a135555dd5d8', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'b065c6fe0ce97224497f0b7c62c3f987dc71ce72', 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: '83939de1b509ebcfc60714398b51dcaf374d6b30', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'ce3588496af8ffac960897c667027edd97ae5e65', class: "label-container" }, h("span", { key: '752537ca0a31718f20089bb9804ba19b20c0c443', class: "label" }, h("slot", { key: '16331721c331936cb46311d02038526b00b7bcac' })), this.caret && h("duet-icon", { key: 'ac8613eceb672049fc7d6c05c51e2216d93b61df', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'f18ca26aca59468eac301dd11a1f13a0c77aaa31', 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

@@ -41,7 +41,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '8cc1a0b506da38e97dafdecef3327240d12bb5a8', role: "listitem" }, h(TagName, { key: '765f433a86d9d9ffda61763568f30a7a1681c579', 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.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role }, this.leadingIcon && (h("duet-icon", { key: '7690f8773410b97bf23f655bed252364770f47ed', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '888fb4e1d7fc3771d3aa2047f5769749011bb933', class: "label" }, h("span", { key: '4af6033f4e8c7cb5df1297f20da66803b1766535', class: "label-text" }, h("slot", { key: '3b3e763fbbc6393d3fe77fc788349cf0ba097b98' })), this.trailingIcon && (h("duet-icon", { key: 'ffc928b61503ca23430a8ff7d55b12b19aab1358', class: {
+        return (h(Host, { key: '0e1724544b134f6de86d56dd739a9635f337e717', role: "listitem" }, h(TagName, { key: '6f04e57ea3e9bf27a1967283e2375a281d675529', 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.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role }, this.leadingIcon && (h("duet-icon", { key: 'e1b98f949d70182538731d1d7f07bd961fd79836', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'af220f398f6bdc969c4de91c5bdf03cb814631f0', class: "label" }, h("span", { key: '6b376bcca90ac606bd44f4dc04026d8eda710004', class: "label-text" }, h("slot", { key: 'cec40ee0c2ca47ee02e3b0ede33d41d8a0e6d797' })), this.trailingIcon && (h("duet-icon", { key: '243fd913a9c6d73489e2d1bcfa60566fa72bfcf6', class: {
                 "trailing-icon": true,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,

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: '7799bc6e797bb8c20f16c0a5e9c093a0379c0e8e', role: "listitem" }, h("a", { key: 'e6094af1e28f4472cf111a5777b79a4494468507', 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: '3071e878792df456c6ea249b880650a98f22b44c', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '2a6d9b005442abdd93fd8174e0e1b1005f5c0c71', class: "label" }, h("slot", { key: '2c76abfc6fce3e7dd769633bcaf0e54f009b0a19' })))));
+        return (h(Host, { key: 'ab3dd8345454b3f0c20458f6302dffaaee6cc002', role: "listitem" }, h("a", { key: 'bcc31509ceddcef3f2c3c58e29c5b108eb8b432f', 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: 'f5d87725bdb14e435d6d4b04ef0c84b1de5d1a3e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: 'f24d079552fa8ce924d8dd3125afe01bbd331ab5', class: "label" }, h("slot", { key: '669772430086a3f897f68ab40b5703a75e631f3a' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -326,7 +326,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"
                         }
                     }
@@ -570,7 +570,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"
                         }
                     }
@@ -591,7 +591,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"
                         }
                     }
@@ -612,7 +612,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"
                         }
                     }
@@ -636,7 +636,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: '26413c0ac0eee035612ced49d409de6d59f13a66', class: {
+        return (h(Host, { key: '0ba86b55e9fd8e291fc94aad48b312107970d243', 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: 'fa0424a461e64bbd5f822a8cc5af79f1a147e8e2' })));
+            } }, h("slot", { key: '886e2b664a351ba71a333ee8c256ed02465b0114' })));
     }
     static get is() { return "duet-table"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
@@ -162,26 +162,23 @@ export class DuetTextarea {
      * Always the last one in the class.
      */
     render() {
-        if (Build.isServer) {
-            return;
-        }
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { class: {
+        return (h(Host, { key: '95fd5e5a71db0cbdbdb4e4f51c031eb38e98eb20', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { class: {
+            } }, h("div", { key: '417ef9e56fbc4667adfcddd29e709b86b3c29496', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { key: 'c970faa68895f7c718c3461ff56b36ba51ca2b39', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'e819a4b2a028a99b64c2065f4c9f6029600d2acb', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '3ec4fdbb3f16f533c56b73d7f9c435345f4ce0ce', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'ac0b106adb6889cb8eb4878fb26f4e8e2dda7188', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '7214df64bab9dce0d99d3ff2a96ff2e010d2fb83', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'ff3814fd43da859de1cf2269bf6e2b55cc34fd9c', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '56f4f30b7d7ee1407aefe788835ada1305f7bcf9', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '622cfa8317fe37f645b1180c6ad35f59b8351fa4', alignment: "stretch" }, h("duet-grid-item", { key: '9a1ef5419a5f72b2d23986eef1681b547067c5f4', margin: "none", fill: true }, h("div", { key: 'd7e0dcd97261a2ee0744b19efb5c6f78ab6b2a9f', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'e1673fe8bdc7e4560a701074a103b0ef8f6fd5f8' }, this.error))), h("duet-grid-item", { key: '8be9f6e9ca8afbe0734c4a366d4a7c43fdc01cdb', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '853baf2df8a6816d1af92476a4af383e5d656ea2', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '9f13bfdda388bd779ebad2bcbd33058f3242f79c', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }
     static get is() { return "duet-textarea"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["duet-textarea.scss"]
@@ -820,7 +817,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"
                         }
                     }
@@ -841,7 +838,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"
                         }
                     }
@@ -862,7 +859,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"
                         }
                     }
@@ -883,7 +880,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

@@ -486,7 +486,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.css

@@ -55,10 +55,16 @@
   justify-content: center;
   height: 100%;
 }
-.duet-toolbar.negative {
+.duet-toolbar.primary {
   background: rgb(0, 119, 179);
 }
-.duet-toolbar.negative .container {
+.duet-toolbar.primary .container {
+  border-bottom: 0;
+}
+.duet-toolbar.secondary {
+  background: rgb(8, 42, 77);
+}
+.duet-toolbar.secondary .container {
   border-bottom: 0;
 }
 .duet-toolbar.duet-theme-turva {
@@ -67,9 +73,9 @@
 .duet-toolbar.duet-theme-turva .container {
   border-bottom: 1px solid rgb(228, 228, 230);
 }
-.duet-toolbar.duet-theme-turva.negative {
+.duet-toolbar.duet-theme-turva.primary {
   background: rgb(198, 12, 48);
 }
-.duet-toolbar.duet-theme-turva.negative .container {
+.duet-toolbar.duet-theme-turva.primary .container {
   border-bottom: 0;
 }

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

@@ -24,12 +24,18 @@ export class DuetToolbar {
      * Always the last one in the class.
      */
     render() {
-        const variation = this.variation === "negative" ? "negative" : "default";
-        return (h(Host, { key: '4facdd60bf2770ac4d23b3a197abd0922439a81e' }, h("nav", { key: 'a06f660682e41dfb2ab07f9035312d1ac69a37a7', class: {
+        const variation = this.variation === "primary" ||
+            this.variation === "negative" ||
+            (this.theme === "turva" && this.variation === "secondary")
+            ? "primary"
+            : this.variation === "secondary"
+                ? "secondary"
+                : "default";
+        return (h(Host, { key: 'eefe1ccb55e157002c987d984645204ef1180dbe' }, h("nav", { key: '62efd79c042a659c4bbee9f62a61d22218c4e79b', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eb4ad22e5e60557d5352b613e8f0997f410b8d6b', class: "container" }, h("div", { key: '6f61b75507ec89330908509fe11a74c0ee2828ad', class: "list", role: "list" }, h("slot", { key: '0e5058eec8df0653a688a21eada26a54e68c4cc8', name: "left" })), h("div", { key: '52218682d3a0daee51db5a199d905ed19e3f5904', class: "list", role: "list" }, h("slot", { key: 'ace123ab65ae117b0025a415bbdc35626e2d4233', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '45c6853e0ddbbd7d4e108dcd1a953cb3ec56f0e8', class: "container" }, h("div", { key: 'a842d519cb078cba8b4aca675ff55d3b2320e303', class: "list", role: "list" }, h("slot", { key: '7d034eb78a40ca22aeb9a6450d0fb70d418d03d9', name: "left" })), h("div", { key: '94a6e0def0e7d556721247f576605dc2fa0ccf1f', class: "list", role: "list" }, h("slot", { key: '3c7c48e9959fa7fc27577c89723f72d022c0a663', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -73,15 +79,15 @@ export class DuetToolbar {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "\"default\" | \"negative\"",
-                    "resolved": "\"default\" | \"negative\"",
+                    "original": "\"default\" | \"primary\" | \"negative\" | \"secondary\"",
+                    "resolved": "\"default\" | \"negative\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation."
+                    "text": "Variation. Secondary is not supported for Turva theme. Negative is deprecated."
                 },
                 "attribute": "variation",
                 "reflect": false,

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: '19ef8c9db7fd05380093c031c8c05d8badb0424e', role: "listitem" }, h("div", { key: '1a267244eab116c66c471ccb0a40d6bd72f14dfa', class: {
+        return (h(Host, { key: 'c896db9b3ac2a4d10e400e67b7f31b6ecacb3737', role: "listitem" }, h("div", { key: '7f55d5535230767d71071a62c58f6754e8cafc1f', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '1966a5bdab9d8e19fe632d8a37e7f48dee3082c5', 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: 'ce96d8220ea871a3ab72bf615107174f6c0802e8', 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: '24ee36902c7e8e1a918abff4d08860206d06e768', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '641c4277c69f7f6d896c3a44485381e2a4fe15f0', class: "label" }, h("slot", { key: 'ad1db677d2797edfb2dc77867d2368ba34fb20a9', name: "label" }), h("duet-icon", { key: 'ad574f7149c8ec05652b84cb8cb6a1978c08c50a', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'f60d03104f67f0e2473743a47aa2f6923c02d57d', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '11582ddf116e08da6aa3ba54ccc2db6e4a395abb', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '74d8a298238f17ab10bc16d0073aeb0104699047', class: "label" }, h("slot", { key: '8df1bb703f76b2ef0460055c037bcfc4e842d10b', name: "label" }), h("duet-icon", { key: 'acfa3f2f7862089008f8d8b2eba95bb6dfef3aa0', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '718e2a52bf0c3579a1094991f83f2b9fd6e8491c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '88ad120c98a2187b554640d22a771184b87d0538' })))));
+            } }, h("slot", { key: 'ececcbe7ad87bdc55995ce8db36d464f47fefbf9' })))));
     }
     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: '7380e5415f6e010bd5be0c40e974dd5943a53950' }, h("a", { key: '4ec2369809bc9688741a3c6c6a2e65e98a49c01f', class: {
+        return (h(Host, { key: 'd363a198149fd9a4c08eb181eaa1056d18c0898a' }, h("a", { key: '99aad91124922259990a94a28be6e94622eea6c5', 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: '6ef55e0a6828af8826987b471ebe4aa09a71d567', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '2dc2718da722d3649d671a8e57b9a6cb7d6c7c97', class: "label" }, h("slot", { key: '71f6f8fb4796a6af5a7640838290800231ac7cfe' })), this.active && (h("duet-icon", { key: '8e202836940fbb593750efa3f7603739ebd9f61f', 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: '8eb9410146ab81b0cf902afb892e67f693a10be3', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '780d2b204def16a761608214698d0486905e7c3f', class: "label" }, h("slot", { key: 'bd1aba77300442cf2d08d04221e8b7a44c93d168' })), this.active && (h("duet-icon", { key: '26f6d4384f221713f8dc3b58945a77cecd2b746d', 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

@@ -51,55 +51,71 @@
 .duet-toolbar-item[aria-expanded=true] .trailing-icon.rotate {
   transform: rotate(180deg);
 }
-.duet-toolbar-item.negative {
+.duet-toolbar-item.primary, .duet-toolbar-item.secondary {
   color: rgb(255, 255, 255);
 }
-.duet-toolbar-item.negative[aria-expanded=true] {
+.duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgba(0, 41, 77, 0.2);
 }
-.duet-toolbar-item.negative duet-icon {
+.duet-toolbar-item.primary duet-icon, .duet-toolbar-item.secondary duet-icon {
   color: rgb(205, 229, 241);
 }
+.duet-toolbar-item.primary[aria-expanded=true] {
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-item.secondary[aria-expanded=true] {
+  background: rgb(3, 56, 102);
+}
 .duet-toolbar-item.duet-theme-turva {
   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-toolbar-item.duet-theme-turva.negative {
+.duet-toolbar-item.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
 }
-.duet-toolbar-item.duet-theme-turva.negative[aria-expanded=true] {
+.duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
   background: rgba(23, 28, 58, 0.2);
 }
-.duet-toolbar-item.duet-theme-turva.negative duet-icon {
+.duet-toolbar-item.duet-theme-turva.primary duet-icon {
   color: rgb(244, 207, 214);
 }
 .duet-toolbar-item:hover {
   color: rgb(0, 41, 77);
   background: rgb(243, 249, 252);
 }
-.duet-toolbar-item:hover.negative {
+.duet-toolbar-item:hover.primary, .duet-toolbar-item:hover.secondary {
   color: rgb(255, 255, 255);
+}
+.duet-toolbar-item:hover.primary {
   background: rgba(0, 41, 77, 0.2);
 }
+.duet-toolbar-item:hover.secondary {
+  background: rgb(3, 56, 102);
+}
 .duet-toolbar-item:hover.duet-theme-turva {
   color: rgb(23, 28, 58);
   background: rgb(245, 245, 247);
 }
-.duet-toolbar-item:hover.duet-theme-turva.negative {
+.duet-toolbar-item:hover.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
 }
 .duet-toolbar-item.active {
   color: rgb(0, 41, 77);
 }
-.duet-toolbar-item.active.negative {
+.duet-toolbar-item.active.primary, .duet-toolbar-item.active.secondary {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
 }
-.duet-toolbar-item.active.negative::after {
+.duet-toolbar-item.active.primary::after, .duet-toolbar-item.active.secondary::after {
   display: none;
 }
+.duet-toolbar-item.active.primary {
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-item.active.secondary {
+  background: rgb(3, 56, 102);
+}
 .duet-toolbar-item.active::after {
   position: absolute;
   top: auto;
@@ -122,7 +138,7 @@
 .duet-toolbar-item.active.duet-theme-turva::after {
   background: rgb(198, 12, 48);
 }
-.duet-toolbar-item.active.duet-theme-turva.negative {
+.duet-toolbar-item.active.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
 }

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

@@ -33,13 +33,19 @@ export class DuetToolbarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'f537e00b3e817d6c14854bdda1c99988377d6b13', role: "listitem" }, h(TagName, { key: '34841f02d2f4bf132a164b67b0b8085ff2aa1662', ref: element => (this.itemElement = element), class: {
+        const variation = this.variation === "primary" ||
+            this.variation === "negative" ||
+            (this.theme === "turva" && this.variation === "secondary")
+            ? "primary"
+            : this.variation === "secondary"
+                ? "secondary"
+                : "default";
+        return (h(Host, { key: 'be0a9608c45623e976d79e193f6f4255fad2812d', role: "listitem" }, h(TagName, { key: 'baeb9d0e203b2fc97983530d798121d4df7e9b7b', 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.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '0380aa7589bb53319535d58e78d9702da36cbc09', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e1950f24c70b736917ebc73a5e6da993d22f4a43' }), this.trailingIcon && (h("duet-icon", { key: 'c2b250ef34b273a6cd3d1a95dff46ffb717d08fa', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: 'c77109ca570f1c6da5e3aef5a71a3c708d8962e9', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e020d036269f7847cbd20c879c4d2267f312f6e3' }), this.trailingIcon && (h("duet-icon", { key: '00d90da73a2063c9990fd93f4aa0c613a7d0f52f', class: {
                 "trailing-icon": true,
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
             }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : "x-small", color: "currentColor" })))));
@@ -86,15 +92,15 @@ export class DuetToolbarItem {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "\"default\" | \"negative\"",
-                    "resolved": "\"default\" | \"negative\"",
+                    "original": "\"default\" | \"primary\" | \"negative\" | \"secondary\"",
+                    "resolved": "\"default\" | \"negative\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation."
+                    "text": "Variation. Secondary is not supported for Turva theme. Negative is deprecated."
                 },
                 "attribute": "variation",
                 "reflect": false,

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

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'b832ea851b28b4646fe9e96daaf3c22c80d8f7b1', role: "listitem" }, h("a", { key: 'fc54c56579b8d3af9779651ac6f1b1ea459f1b15', class: {
+        return (h(Host, { key: '258aa71d94e0e3959eef224ab891ceb4db3886ad', role: "listitem" }, h("a", { key: 'e3557495157f9c6212582f47cf027f1f8389d7e9', 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: '410f962aff3503e7bc290ad612e1768e0286ba34', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'f7e9577e8ff512c64164f73d25426e8f9cd154e4' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '28195a63fb2020c70155284152086fa6fd4be0a1', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '85fdc84a09716bf992dbb7325b9677ed74fec706' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,11 +38,11 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '04f6705a481ebb216bb5df66dbdb4043b8cdef48' }, h("button", { key: '49af408c735e209c64c8d0d108a966ddcbb0f4a4', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: '4be97c3001005d18be45efe72c3b80bab321580f' }, h("button", { key: '610f35f05d9c3caac636aa3d32dfda78df0a41be', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("svg", { key: '7861f7b8ad6482b8a64a261896ae913fa0cb5b98', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1fe0cd6a81634da2a5b915533ade21281f478491', 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: '036344e0005eb10f72bdcdd5cb10a51cd7c3f589', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'b007d82c4f370fe0a60030db70e8e3f6b35953e9', 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: 'c8c4071751aaed98f301674b9dd26d5e1ed67033', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'beb7762d011e678668b723c8c362ad6fe09a7e71', 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: '2e18209c0945b8bbed7132d7c58e6987d195f936', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0d2299a6de3f42d32be3268c9efeca24fea9f7b4', 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: '2c0a3cbe2d1e70112a8e36fb5486c0b3828fec6e' }, h("div", { key: '9615ecf77473659b94f595ce74e4d193f0910c2d', class: {
+        return (h(Host, { key: '5937d404a3288b6afe2b9c8e1d47147e96eef933' }, h("div", { key: 'bc2694a70963dabcaddce627d1abfe51dc36ebac', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '178d295e1ea3cb5ccc5bec86b9f3fc0d7fcdf963', moveFocusTo: this.buttonEl }), h("div", { key: '1155f49ddfdb942c5ae5898fb4820a80a5c40328', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'c8a124d7d082b709143701811fdec18d579d57e6' })), h("div", { key: 'f0e09b06cdd9f9945e99ec2b1910ff7decf89134', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'eedba52de69d73626caba16ba466803be54a327d', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'aa5ccd0ff5db12c5608f296ef3428e60fee82599', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'f66f28e0b597d51fd5823a3586e2c9a30c3c643a', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'b61c91a4128f970d3fd243405d990cea29f80524' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '44f290cf1a0dbf47fe135818d42c55534f182bcb', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '461ee4e709c80fae34d04f2bba0fd60e6305f594', moveFocusTo: this.buttonEl }), h("div", { key: '47e8f609387722060e93fc37558a219c2bad2ed6', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '64350c3d73d2560711890254d8be979f07c27f1b' })), h("div", { key: '0544215577fd0b4e6be97eadcbad8f58114ffb38', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '1076a224b4a4f9d455271245e7bd879689a96bf4', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'bf275bd1c1597e42ab29ce57338a37e8ff534bfc', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'e06529abd6465f5e65f57f85ba2392c1df82d59f', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '43cabf152e52e237b886642e66a30875973fac6f' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '47ef9a81ce996efe8d52d06f36799c5a4f3b26cc', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -424,7 +424,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: '9ca451a14ab21f41ef8b413dd0695d0fa9625a08', class: {
+        return (h("div", { key: '422e3ef16e6442e5e64ddeb7cf159aba8480bb0c', 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: '1363c709ec1abaf78155e81519a78af9fab1fd3b', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '7904af5a351d3438a3bd17dbf00e3a215d850fcb' })), this.hasAdditionalContent && (h(Fragment, { key: '29c834cfa4e11140ed597c440bc70466e784306c' }, h("button", { key: '9c416fa9a6bf76eb3f1b3c7aba4d002cec13320c', "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: 'bf2948293a89b14c4712cf0123158bfd6fa09f36', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '377191436c0dc3207906654df3abf2334a1dc886' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '30810b57c176998e6e304f6be52f27de5a2cd6b6', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'c82e3a298bec6767ee5ecc167348b7153f28c24c', class: "duet-tray-expandable-content" }, h("slot", { key: '5fe1b4e00504d3e98d8e17bc0eab86a27bf7b87e', name: "additional" })))))));
+            } }, h("div", { key: '2a123be4ba03f0ca7097365d9d28501f3e55dfb1', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '170a493490fc917470b22039d4d9205c4925ad48' })), this.hasAdditionalContent && (h(Fragment, { key: '398d11e06e1f271c565170e15ecb307741e1d9c5' }, h("button", { key: 'ee94b64530befedfd2d8388fd4ad18d49f32e1f3', "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: 'af7c543c625487955c4c06b3904ace9e0042bcc1', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '4800b309084526993db20f4e98b9ecd45e6831d0' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '7cd6e21a5665066901ea37827c47e5569bc9ff5e', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'a8912419d82f6acb7eb4e8c4de5a3b083ab059cb', class: "duet-tray-expandable-content" }, h("slot", { key: '9de06515af6bd91e8b82b45e7dfec1ead9b8092d', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }