@duetds/components 8.1.1 → 8.1.3

package/lib/cjs/{token-utils-84b3bca6.js → token-utils-f11c288e.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const tokens_module = require('./tokens.module-10f42b21.js');
+const tokens_module = require('./tokens.module-44ad1fdb.js');
 
 const allowedThemes = ["turva"];
 function isDashCase(str) {

package/lib/cjs/{tokens-cecc0f2f.js → tokens-c0b8b3a8.js}

@@ -89,7 +89,7 @@ const shadow_focus_input_turva = "0 0 0 1px #171c3a";
 const shadow_default = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
 const shadow_focus_input = "0 0 0 1px #0077b3";
 const shadow_tooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
-const shadow_hover_input_turva = "0 0 0 1px #0077b3";
+const shadow_hover_input_turva = "0 0 0 1px #747475";
 const shadow_error_turva = "0 0 0 1px #e55039";
 const shadow_hover_input = "0 0 0 1px #909599";
 const shadow_error = "0 0 0 1px #de2362";

package/lib/cjs/{tokens.module-10f42b21.js → tokens.module-44ad1fdb.js}

@@ -89,7 +89,7 @@ const shadowFocusInputTurva = "0 0 0 1px #171c3a";
 const shadowDefault = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
 const shadowFocusInput = "0 0 0 1px #0077b3";
 const shadowTooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
-const shadowHoverInputTurva = "0 0 0 1px #0077b3";
+const shadowHoverInputTurva = "0 0 0 1px #747475";
 const shadowErrorTurva = "0 0 0 1px #e55039";
 const shadowHoverInput = "0 0 0 1px #909599";
 const shadowError = "0 0 0 1px #de2362";

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

@@ -34,7 +34,7 @@ export class DuetBanner {
      * Always the last one of the class.
      */
     render() {
-        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-light" : this.backgroundColor;
+        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
         const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
         const bannerStyles = {
             backgroundColor,

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.css

@@ -24,11 +24,11 @@
   width: 100%;
 }
 
-::slotted(duet-breadcrumb) {
+::slotted(*) {
   font-weight: 400;
 }
 
-::slotted(duet-breadcrumb:last-of-type) {
+::slotted(:last-child) {
   font-weight: 600;
 }
 

package/lib/collection/components/duet-button/duet-button.css

@@ -99,7 +99,7 @@
   background: transparent;
   border-style: solid;
   border-width: 2px;
-  border-radius: 20rem;
+  border-radius: 12.5px;
   transition: background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
@@ -125,6 +125,7 @@
   padding: 9px 19px 10px !important;
   min-width: 48px;
   font-size: 0.875rem;
+  border-radius: 10px;
 }
 .duet-button.duet-button-is-small:not(.duet-button-icon-only).plain {
   padding-right: 0 !important;
@@ -537,7 +538,6 @@
   font-size: 1.25rem;
   border-color: rgb(225, 227, 230);
   border-width: 1px;
-  border-radius: 8px;
 }
 .duet-button.square.duet-button-is-small {
   width: 28px !important;

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

@@ -169,6 +169,7 @@ export class DuetButton {
                 "duet-no-wrap": this.wrapping === "none",
                 "duet-button": true,
                 "duet-button-is-small": this.size === "small",
+                [`duet-button-size-${this.size}`]: true,
                 "duet-button-icon-only": this.iconOnly,
                 "duet-button-text-center": this.centerText,
                 "duet-button-negative": this.negative || this.variation === "negative",

package/lib/collection/components/duet-contact-card/duet-contact-card.css

@@ -81,5 +81,5 @@
   align-items: center;
   justify-content: flex-start;
   padding-bottom: 8px;
-  word-break: break-all;
+  overflow-wrap: break-word;
 }

package/lib/collection/components/duet-footer/duet-footer.css

@@ -279,7 +279,7 @@ a:hover .duet-footer-arrow {
 .duet-footer-menu a {
   display: inline-block;
   text-decoration: none;
-  word-break: break-all;
+  overflow-wrap: break-word;
 }
 .duet-footer-menu a:hover, .duet-footer-menu a:focus {
   text-decoration: underline;

package/lib/collection/components/duet-input/duet-input.css

@@ -272,7 +272,7 @@ duet-caption:not(:last-of-type) {
   box-shadow: 0 0 0 1px #909599 !important;
 }
 .duet-theme-turva .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 1px #747475 !important;
 }
 .has-error .duet-input:hover:not(:disabled) {
   box-shadow: 0 0 0 1px #de2362;
@@ -437,7 +437,7 @@ duet-caption:not(:last-of-type) {
   box-shadow: 0 0 0 1px #909599;
 }
 .duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 1px #747475;
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
   box-shadow: 0 0 0 1px #de2362;

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

@@ -49,8 +49,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   text-align: left;
-  word-break: break-all;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 :host dt {
   font-weight: 600;

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -105,6 +105,7 @@
 }
 .duet-menu-bar-dropdown .items {
   position: absolute;
+  top: 70%;
   right: 0%;
   left: auto;
   z-index: 600;
@@ -113,11 +114,11 @@
   align-items: center;
   justify-content: center;
   min-width: 225px;
-  padding: 1rem 0;
+  padding: 8px;
   color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+  background: rgb(255, 255, 255);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
 }
 .duet-menu-bar-dropdown .items.hidden {
   display: none;

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -27,41 +27,33 @@
 .duet-menu-bar-dropdown-link {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
-  padding: 0.5rem 20px;
+  padding: 0.5rem 8px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
 }
-.duet-menu-bar-dropdown-link.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-menu-bar-dropdown-link--slot-right:focus {
+.duet-menu-bar-dropdown-link:focus {
   outline: 0;
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-.duet-theme-turva .duet-menu-bar-dropdown-link--slot-right:focus, .duet-menu-bar-dropdown-link--slot-right:focus.duet-theme-turva {
+.duet-theme-turva .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
-.duet-menu-bar-dropdown-link--slot-right:hover {
-  background: rgb(230, 242, 248);
-}
-.duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
-  background: rgb(228, 228, 230);
+.duet-menu-bar-dropdown-link.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-menu-bar-dropdown-link--slot-below:hover {
-  color: rgb(0, 77, 128);
-  background: rgb(243, 249, 252);
+.duet-menu-bar-dropdown-link:hover {
+  background: rgb(230, 242, 248);
 }
-.duet-menu-bar-dropdown-link--slot-below:hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
+.duet-menu-bar-dropdown-link:hover.duet-theme-turva {
   background: rgb(228, 228, 230);
 }

package/lib/collection/components/duet-multiselect/duet-multiselect.css

@@ -90,7 +90,6 @@
 
 .duet-multiselect {
   display: flex;
-  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
@@ -112,13 +111,17 @@
   border-radius: 4px;
   transition: 150ms ease;
 }
+.duet-multiselect .duet-multiselect-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .duet-multiselect:hover {
   border-color: rgb(144, 149, 153);
   box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-multiselect:hover {
   border-color: rgb(116, 116, 117);
-  box-shadow: 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-multiselect:hover {
   box-shadow: 0 0 0 1px #de2362;
@@ -162,8 +165,13 @@
   min-height: 24px;
 }
 .duet-multiselect .duet-multiselect-badge {
-  position: absolute;
-  right: 3rem;
+  position: relative;
+  bottom: 2px;
+  height: 20px;
+  margin-left: 4px;
+}
+.duet-multiselect .duet-multiselect-icon {
+  margin-left: 12px;
 }
 .has-error .duet-multiselect {
   border-color: rgb(222, 35, 98) !important;

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

@@ -201,7 +201,7 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language] }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
             }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css

@@ -29,15 +29,14 @@
   z-index: 950;
   width: max-content;
   min-width: 175px;
-  padding: 0;
-  padding: 1rem 0;
+  padding: 8px;
   margin: 0;
   color: rgb(0, 41, 77);
   list-style: none;
   visibility: hidden !important;
-  background: rgb(243, 249, 252);
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+  background: rgb(255, 255, 255);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
   transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
   transform: scaleY(0);
@@ -53,5 +52,5 @@
 }
 .duet-popup-menu-list.duet-theme-turva {
   color: rgb(23, 28, 58) !important;
-  background: rgb(245, 245, 247);
+  background: rgb(255, 255, 255);
 }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.css

@@ -22,7 +22,7 @@
   appearance: none;
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 8px;
   align-items: center;
   justify-content: flex-start;
 }
@@ -30,14 +30,14 @@
 .duet-popup-menu-item {
   display: flex;
   flex-grow: 1;
-  gap: 8px;
+  gap: 12px;
   align-items: center;
   height: 100%;
-  padding: 8px 20px;
+  padding: 8px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: rgb(0, 41, 77);
   text-align: left;
   text-decoration: none;
@@ -50,13 +50,11 @@
 .duet-theme-turva .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
-.duet-popup-menu-item.active, .duet-popup-menu-item.active:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(0, 119, 179);
+.duet-popup-menu-item.active {
+  background: rgb(243, 249, 252);
 }
-.duet-popup-menu-item.active.duet-theme-turva, .duet-popup-menu-item.active:hover.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(198, 12, 48);
+.duet-popup-menu-item.active.duet-theme-turva {
+  background: rgb(245, 245, 247);
 }
 .duet-popup-menu-item:hover {
   background: rgb(230, 242, 248);

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -60,7 +60,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-select/duet-select.css

@@ -136,7 +136,7 @@ duet-tooltip {
 }
 .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
   border-color: rgb(116, 116, 117);
-  box-shadow: 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-select-wrapper select:hover + .duet-select {
   box-shadow: 0 0 0 1px #de2362;

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

@@ -66,6 +66,11 @@ export class DuetSlideout {
                 }, 200);
             }
         };
+        this.bgOnClick = (e) => {
+            if (this.open) {
+                this.toggleMenu(e);
+            }
+        };
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
@@ -197,9 +202,7 @@ export class DuetSlideout {
         return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: {
                 "desktop-bg": true,
                 hidden: !this.open,
-            }, onClick: () => {
-                this.open = false;
-            } }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "menubar", class: {
+            }, onClick: this.bgOnClick }), h("div", { ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "menubar", class: {
                 dialog: true,
                 hidden: !this.open,
             }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {

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

@@ -159,13 +159,13 @@
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown .items {
     position: absolute;
-    top: 102%;
+    top: 93%;
     z-index: 600;
     min-width: 320px;
-    padding: 4px 0 0;
+    padding: 8px;
     background: rgb(255, 255, 255);
-    border-radius: 0 0 4px 4px;
-    box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
     transition: none;
   }
 }

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

@@ -27,7 +27,7 @@
 .duet-submenu-bar-dropdown-link {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
@@ -49,8 +49,9 @@
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link {
-    padding: 0.675rem 16px;
-    font-size: 0.875rem;
+    padding: 0.5rem 8px;
+    font-size: 1rem;
+    line-height: 1.5;
   }
 }
 .duet-submenu-bar-dropdown-link.active .label {
@@ -76,14 +77,21 @@
   background: rgb(198, 12, 48);
 }
 @media (min-width: 62em) {
-  .duet-submenu-bar-dropdown-link:hover {
-    color: rgb(0, 77, 128);
+  .duet-submenu-bar-dropdown-link.active {
     background: rgb(243, 249, 252);
   }
-  .duet-submenu-bar-dropdown-link:hover.duet-theme-turva {
-    color: rgb(148, 9, 37);
+  .duet-submenu-bar-dropdown-link.active .label::after {
+    display: none;
+  }
+  .duet-submenu-bar-dropdown-link.active.duet-theme-turva {
     background: rgb(245, 245, 247);
   }
+  .duet-submenu-bar-dropdown-link:hover {
+    background: rgb(230, 242, 248);
+  }
+  .duet-submenu-bar-dropdown-link:hover.duet-theme-turva {
+    background: rgb(228, 228, 230);
+  }
 }
 .duet-submenu-bar-dropdown-link.highlight {
   color: rgb(0, 119, 179);

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

@@ -86,7 +86,7 @@ export class DuetTabGroup {
         this.identifier = this.id;
         this.margin = "auto";
         this.padding = "auto";
-        this.setTabIndex = false;
+        this.setTabIndex = true;
         this.tabChangeConfirm = false;
     }
     /**
@@ -214,7 +214,7 @@ export class DuetTabGroup {
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: {
+            } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? "0" : null, class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
@@ -514,7 +514,7 @@ export class DuetTabGroup {
                 },
                 "attribute": "set-tab-index",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "tabChangeConfirm": {
                 "type": "boolean",

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

@@ -193,7 +193,7 @@ duet-tooltip {
   box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-textarea:hover:not(:disabled) {
   box-shadow: 0 0 0 1px #de2362;

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

@@ -79,7 +79,7 @@
 }
 .duet-toolbar-dropdown .items {
   position: absolute;
-  top: 102%;
+  top: 93%;
   right: 0%;
   left: auto;
   z-index: 600;
@@ -88,11 +88,11 @@
   align-items: center;
   justify-content: center;
   min-width: 175px;
-  padding: 1rem 0;
+  padding: 8px;
   color: rgb(0, 41, 77);
-  background: rgb(243, 249, 252);
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+  background: rgb(255, 255, 255);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
 }
 .duet-toolbar-dropdown .items.hidden {
   display: none;

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

@@ -27,15 +27,15 @@
 .duet-toolbar-dropdown-link {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
-  padding: 0.5rem 20px;
+  padding: 0.5rem 8px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.5;
   color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
@@ -47,17 +47,19 @@
 .duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-dropdown-link .label {
+  flex: 1;
+  text-align: left;
+}
 .duet-toolbar-dropdown-link.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-dropdown-link.active, .duet-toolbar-dropdown-link.active:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(0, 119, 179);
+.duet-toolbar-dropdown-link.active {
+  background: rgb(243, 249, 252);
 }
-.duet-toolbar-dropdown-link.active.duet-theme-turva, .duet-toolbar-dropdown-link.active:hover.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(198, 12, 48);
+.duet-toolbar-dropdown-link.active.duet-theme-turva {
+  background: rgb(245, 245, 247);
 }
 .duet-toolbar-dropdown-link:hover {
   background: rgb(230, 242, 248);

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

@@ -35,7 +35,7 @@ export class DuetToolbarDropdownLink {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("slot", null))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { 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/utils/teleport.js

@@ -19,6 +19,10 @@ export class Teleport {
      * @param makeSiblingsInert - make all siblings of the element inert, use only with modals
      */
     go(makeSiblingsInert = false) {
+        const skipTeleport = this.element.getAttribute("skip-teleport");
+        if (skipTeleport && skipTeleport !== "false") {
+            return;
+        }
         // React handles teleporting itself with portals
         if (!this.element.dataset.reactPortal) {
             this.stub = document.createElement("template");
@@ -33,6 +37,10 @@ export class Teleport {
         this.isActive = true;
     }
     resume(delay = 0) {
+        const skipTeleport = this.element.getAttribute("skip-teleport");
+        if (skipTeleport && skipTeleport !== "false") {
+            return;
+        }
         if (!this.isActive) {
             return;
         }

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

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

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

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

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

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