@duetds/components 9.2.0 → 9.2.2

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

@@ -95,7 +95,7 @@
   box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
-  border-left: 1px solid rgb(207, 210, 212);
+  border-left: 1px solid rgb(181, 198, 208);
 }
 .duet-number-buttons .duet-number-button:first-of-type::before {
   position: absolute;
@@ -104,7 +104,7 @@
   width: 6px;
   height: 100%;
   content: "";
-  background: linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%);
+  background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
 .duet-number-buttons .duet-number-button:last-of-type {
   border-top-right-radius: 4px;
@@ -117,12 +117,12 @@
   width: 1px;
   height: 60%;
   content: "";
-  background: rgb(225, 227, 230);
+  background: rgb(212, 223, 229);
 }
 
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:first-of-type::before {
-  background: linear-gradient(to left, rgba(207, 207, 209, 0.2) 0%, rgba(207, 207, 209, 0.2) 1px, rgba(207, 207, 209, 0.1) 1px, rgba(207, 207, 209, 0) 100%);
+  background: linear-gradient(to left, rgba(199, 202, 207, 0.2) 0%, rgba(199, 202, 207, 0.2) 1px, rgba(199, 202, 207, 0.1) 1px, rgba(199, 202, 207, 0) 100%);
 }
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }

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

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
   visibility: visible;
-  background: rgb(0, 41, 77);
+  background: rgb(8, 42, 77);
   opacity: 0.3;
 }
 .duet-overlay.duet-theme-turva {

package/lib/collection/components/duet-page-heading/duet-page-heading.css

@@ -31,7 +31,7 @@
   margin: 0 auto;
   overflow: hidden;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-page-heading.duet-p-0 {
   padding: 0 !important;
@@ -196,7 +196,7 @@
 }
 .duet-page-heading.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(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-page-heading.duet-theme-turva .brand-shaped-icon {
   background: rgba(198, 12, 48, 0.9);

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -24,12 +24,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '9d96b26d203b8d57c0869d095572ec670ac5118f', class: {
+        return (h("div", { key: '7158f6bb1baba0316e310548c2f11fbba22ed802', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: 'ccae0c1de7c79e9af8be98af89e5e98624a8cfe3', class: "background" }, this.theme === "turva" && h("div", { key: '3b1579dc4acdc50baf1bec8cc5e9fc82c4380807', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '987fd998a596513fd8c3c5de61d6d24b6b44b504', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'b1ba4eae34659ef4662ad34bbb93fd46139a159c', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'dfb95409b76b02cde19eecaaaef50a9c618ffc51', class: "brand-shaped-icon" }, h("duet-icon", { key: 'decdcbde482844fbb493010ff2e7fbd9a26c83a7', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '0dc922a094e4f7d0e1b68d7e72675ec83ed14e1d', class: "heading" }, h("slot", { key: 'f1922d4f41d344867b4c336faaf1acbf94b3b4d0', name: "heading" }))));
+            } }, h("div", { key: '9279bef8f915599c716557dcb4cfae9e8ebdcdd7', class: "background" }, this.theme === "turva" && h("div", { key: '88fee514b2c9d6db4993c6070e379e6d354b7f91', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'cf612c48b8322c7b6f8d15e9e3ae7929ebfc754c', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'c370d729b95244f6b94a6dc1ad15494af14bdcad', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'c6d34424c53f9fd3d0596a04d2fc111e78c36187', class: "brand-shaped-icon" }, h("duet-icon", { key: 'df9bf6856c35d65c8490b3c4738a56ffb5a1b8ee', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '275b220fddac6f60e953cc2dee0aaf6a9766807a', class: "heading" }, h("slot", { key: 'fb7b03458b5853815d412eddd93a164f21d102c6', name: "heading" }))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@
   font-size: 1rem;
   font-weight: 600 !important;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
 }
 

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

@@ -37,7 +37,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-paragraph.duet-p-0 {
   padding: 0 !important;
@@ -94,11 +94,11 @@
   color: rgb(198, 12, 48);
 }
 ::slotted(a):hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-decoration: none;
 }
 ::slotted(a):hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }
 ::slotted(a):active {
   opacity: 0.75;

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

@@ -31,7 +31,7 @@
   min-width: 175px;
   padding: 8px;
   margin: 0;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   list-style: none;
   visibility: hidden !important;
   background: rgb(255, 255, 255);

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

@@ -38,7 +38,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
@@ -55,16 +55,16 @@
   color: rgb(23, 28, 58);
 }
 .duet-popup-menu-item.active {
-  background: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
 }
 .duet-popup-menu-item.active.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 .duet-popup-menu-item:hover {
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
 }
 .duet-popup-menu-item:hover.duet-theme-turva {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }
 .duet-popup-menu-item .duet-popup-menu-item-label {
   flex-grow: 1;

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetPopupMenuItem {
@@ -65,7 +66,11 @@ export class DuetPopupMenuItem {
             "duet-theme-turva": this.theme === "turva",
             "active-descendant": this.activeDescendant,
         };
-        return (h(Host, { key: 'e53141f7390844d3bd55d5204d7dac9334248fdc', role: this.accessibleRole }, h(TagName, { key: '73fe7bb5b8cc6fa57b12e0d210edc4ef25dd401b', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" || "option" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '3fd892272f52814da4c8f14ea7bec580a160e858', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '51b7da7f29ef0f85344e02b1a85aa185bca9b26a', class: "duet-popup-menu-item-label" }, h("slot", { key: '9a72c7fcaeeafe89741760d84c91382b31ab798f' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '1ddf8f956adbe24208d16c33fe28fde167babcb2', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '30aa34505231dbe1a78af9256920294e967a559a', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, { key: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, h(TagName, { key: 'aafbfd9c8bd9cab5f2b2ba259efc8c31964bad10', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" || "option" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '571151b958d0ef9af6f52cda7785555978c9d942', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '99b4a1e46f824fdc684531dfe55b7bc66e06370c', class: "duet-popup-menu-item-label" }, h("slot", { key: 'f76853aa6c7b441dcca9193dd8e73a117a49916f' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'c0a0f628bec874ca8d2d1fe9f1a0992703cfd1c2', name: this.url && this.external
+                ? newWindowIcon.title
+                : this.active
+                    ? "messaging-checked-small"
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'f4287b3ef8b66ce1512254aa8e6383907650283d', 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-progress/duet-progress.css

@@ -44,12 +44,12 @@
   width: 100%;
   height: inherit;
   min-height: 1px;
-  background-color: rgb(243, 249, 252);
+  background-color: rgb(240, 247, 250);
   border-radius: 0;
   box-shadow: none;
 }
 .duet-theme-turva .duet-progress .progress-bar {
-  background-color: rgb(252, 243, 244);
+  background-color: rgb(255, 241, 241);
 }
 .duet-progress .progress-bar > span {
   display: block;
@@ -76,7 +76,7 @@
   appearance: none;
 }
 .duet-progress progress[value]::-webkit-progress-bar {
-  background-color: rgb(243, 249, 252);
+  background-color: rgb(240, 247, 250);
   border-radius: 0;
 }
 .duet-progress progress[value]::-webkit-progress-value {
@@ -87,17 +87,17 @@
   animation: animate-stripes 5s linear infinite;
 }
 .duet-progress progress[value] ::-moz-progress-bar {
-  background-color: rgb(243, 249, 252);
+  background-color: rgb(240, 247, 250);
 }
 .duet-progress.duet-theme-turva progress[value] {
   color: rgb(198, 12, 48);
 }
 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
-  background-color: rgb(252, 243, 244);
+  background-color: rgb(255, 241, 241);
 }
 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
   background-color: rgb(198, 12, 48);
 }
 .duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar {
-  background-color: rgb(252, 243, 244);
+  background-color: rgb(255, 241, 241);
 }

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

@@ -40,7 +40,7 @@
   height: 100%;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-style: normal;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   border-radius: 20px;
 }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'b73cdd4f3dcd554706a13aeaa706543b681529ec', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '76f17c86f64af2cea4a60ce9882f8e76bc475ab6', class: {
+        return (h(Host, { key: '772d875fe0dbb9ad3b6f40df395cabd07b65cfe2', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '3e37a0d57ea0b9a20d515d7aac02ef2b087c4865', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'db345f3d904fc72e3f25618c91ab3f30a0b9e4c7', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ac5645fb64cf5872e0735ce3d97939e37fb10f0a', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'c82dc662a938ca4849089a048c57caa8efc54531', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'cd9ce432bdf6f8ffaa63796a258837e9136e1ea4', class: "pre-heading" }, h("slot", { key: '257b9408b4489f1cc79f503473a8d458a3cb5456', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '1e93652845c4b65d0ab67a0e05889304064fd7b3', class: "heading" }, h("duet-heading", { key: '9e40a46f24aadcee4d43fc36167ed434c2cc8e79', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'd230dbaecd853de2b4b58be416d720048b6ea43b' }, h("slot", { key: '1f99efac6f9a6ebdf6e72066b50d3fe647dfc3f1', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'e61cf4abe59d58e15cefb7f7ff7aa573922154b0', class: "description" }, h("duet-paragraph", { key: '9594eba29974b0176a2fc986df802c8a5afb43f1', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'e800d7bb777802912b16ad4f5c76bb7f9df8c9fe' }, h("slot", { key: '709d27fb9d198c57c8ca8abbbaaedac0790483a8', name: "description" }))))), this.hasActionSlot && (h("div", { key: '2a72594c99d4142f7b1f453df4e24ce794833370', class: "action" }, h("slot", { key: '07f8ccc33355d4fc7be72c64fd758363f76f609e', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: 'bc154d41c8fd9637d3daa3be4eaedf1ade6c56c4', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '49a36a008c5006f0b7ece514c2eb178819a1e3af', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'd699b44c77b9de41cfa1f04703026c3eff90701c', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '6fbe038e30a5e8b6f9736e937a51f6ee4bcd4c9a', class: "pre-heading" }, h("slot", { key: '7e1dd94953f263d5fd5f7403baf9a64fe214d97d', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '87d9413ef845107bb0ea9f90b63460590073ce90', class: "heading" }, h("duet-heading", { key: '6e79bd35cdb2cde71100983934b0233d3e81f725', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '254924fd6185e8ccdc63cb0be081c14e9e9eef8c' }, h("slot", { key: '881f4c33051834e4a4056634b1b8a5ef6baf36c6', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '0365ddf81b773ef61c09232ac70453ce567e86e9', class: "description" }, h("duet-paragraph", { key: '54d6256f80f50b3720a17de720cab84540e231bb', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'ec4c19a46660221400004023fdf87eb5ade14e44' }, h("slot", { key: 'e76c95070806c41c03dfad3251b4167236d031cf', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'da3dee3c187b02a607a4c2f26ae42111ce78fde1', class: "action" }, h("slot", { key: '5d84d7ea30fff32b3de78694f4dd9c7df4d96383', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@
   font-weight: 400;
   hyphens: auto;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   word-break: break-word;
   overflow-wrap: break-word;
   cursor: pointer;
@@ -126,7 +126,7 @@
   margin: 2px 10px 1px 1px;
   content: "";
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(0, 41, 77);
+  border: 1px solid rgb(8, 42, 77);
   border-radius: 50%;
 }
 .duet-theme-turva .duet-radio + label::before {
@@ -157,24 +157,24 @@
   cursor: default;
 }
 .duet-radio[disabled] + label {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 .duet-theme-turva .duet-radio[disabled] + label {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-radio[disabled] + label::before {
-  border-color: rgb(207, 210, 212);
+  border-color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-radio[disabled] + label::before {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-radio[disabled]:checked + label::before {
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
 }
 .duet-radio[disabled]:checked + label::after {
-  background: rgb(144, 149, 153);
+  background: rgb(127, 150, 165);
 }
 .duet-theme-turva .duet-radio[disabled]:checked + label::after {
-  background: rgb(116, 116, 117);
-  border-color: rgb(116, 116, 117);
+  background: rgb(143, 147, 158);
+  border-color: rgb(143, 147, 158);
 }

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -59,7 +59,7 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
 }
 .duet-theme-turva .duet-output {
@@ -67,10 +67,10 @@
   color: rgb(23, 28, 58);
 }
 .duet-range-disabled .duet-output {
-  color: rgb(144, 149, 153);
+  color: rgb(127, 150, 165);
 }
 .duet-range-disabled.duet-theme-turva .duet-output {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 
 .duet-range {
@@ -78,11 +78,11 @@
   z-index: 100;
   width: 100%;
   height: 4px;
-  background: rgb(207, 210, 212);
+  background: rgb(181, 198, 208);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-range {
-  background: rgb(207, 207, 209);
+  background: rgb(199, 202, 207);
 }
 .duet-ie .duet-range {
   display: block;
@@ -119,13 +119,13 @@
   height: 24px;
   cursor: -webkit-grab;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
   transition: box-shadow 300ms ease;
   -webkit-appearance: none;
 }
 .duet-theme-turva .duet-range::-webkit-slider-thumb {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-range:active::-webkit-slider-thumb {
   cursor: -webkit-grabbing;
@@ -136,12 +136,12 @@
   height: 24px;
   cursor: -moz-grab;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
   appearance: none;
 }
 .duet-theme-turva .duet-range::-moz-range-thumb {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-range:active::-moz-range-thumb {
   cursor: -moz-grabbing;
@@ -152,43 +152,43 @@
   height: 24px;
   overflow: visible;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 50%;
 }
 .duet-theme-turva .duet-range::-ms-thumb {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-range:disabled {
-  background: rgb(207, 210, 212) !important;
+  background: rgb(181, 198, 208) !important;
 }
 .duet-theme-turva .duet-range:disabled {
-  background: rgb(207, 207, 209) !important;
+  background: rgb(199, 202, 207) !important;
 }
 .duet-range:disabled::-webkit-slider-thumb {
   cursor: default;
-  background: rgb(207, 210, 212);
+  background: rgb(181, 198, 208);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
-  background: rgb(207, 207, 209);
+  background: rgb(199, 202, 207);
   border-color: transparent;
 }
 .duet-range:disabled::-moz-range-thumb {
   cursor: default;
-  background: rgb(207, 210, 212);
+  background: rgb(181, 198, 208);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-moz-range-thumb {
-  background: rgb(207, 207, 209);
+  background: rgb(199, 202, 207);
   border-color: transparent;
 }
 .duet-range:disabled::-ms-thumb {
   cursor: default;
-  background: rgb(207, 210, 212);
+  background: rgb(181, 198, 208);
   border-color: transparent;
 }
 .duet-theme-turva .duet-range:disabled::-ms-thumb {
-  background: rgb(207, 207, 209);
+  background: rgb(199, 202, 207);
   border-color: transparent;
 }
 .duet-range::-ms-fill-lower {
@@ -200,10 +200,10 @@
 }
 .duet-range::-ms-fill-upper {
   height: 4px;
-  background: rgb(207, 210, 212);
+  background: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-range::-ms-fill-upper {
-  background: rgb(207, 207, 209);
+  background: rgb(199, 202, 207);
 }
 
 .duet-label-hidden duet-label,

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -42,7 +42,7 @@
 }
 .duet-range-stepper .duet-range-step-counter {
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 .duet-range-stepper ::part(button) {
   border: 0;

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

@@ -104,6 +104,9 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom {
   align-items: flex-end;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden] {
+  display: none !important;
+}
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;

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

@@ -20,12 +20,8 @@ export class DuetScrollable {
          * and thus needs scrolling.
          */
         this.resizeObserver = new ResizeObserver(entries => {
-            var _a, _b, _c, _d;
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                const scrollPaneWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                const totalContentWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
-                const scrollingThreshold = 10;
-                this.needsScrolling = totalContentWidth > scrollPaneWidth + scrollingThreshold;
+                this.checkScrollingNeeded(entries[0].target);
             }
         });
         this.collapsedOnClick = () => {
@@ -55,11 +51,12 @@ export class DuetScrollable {
         this.hasCollapseButtonLabelSlot = hasSlot(this.element, "collapse-button-label");
     }
     componentDidLoad() {
-        this.resizeObserver.observe(this.scrollPaneElement);
-        // Use requestAnimationFrame to defer state changes after initial render,
-        // preventing extra re-renders
         requestAnimationFrame(() => {
-            this.updateScrollButtons(this.getScrollPaneElements()[0]);
+            if (this.scrollPaneElement) {
+                this.checkScrollingNeeded();
+                this.updateScrollButtons();
+                this.resizeObserver.observe(this.scrollPaneElement);
+            }
         });
     }
     disconnectedCallback() {
@@ -71,6 +68,25 @@ export class DuetScrollable {
     getScrollPaneElements() {
         return getElementsFromDefaultSlot(this.element);
     }
+    /**
+     * Check if scrolling is needed.
+     */
+    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 10) {
+        if (!element) {
+            return;
+        }
+        const scrollPaneWidth = element.getBoundingClientRect().width;
+        const totalContentWidth = element.scrollWidth;
+        this.needsScrolling = totalContentWidth > scrollPaneWidth + threshold;
+        // Update scroll buttons whenever we check if scrolling is needed
+        if (!this.needsScrolling) {
+            this.scrollPaneAtStart = true;
+            this.scrollPaneAtEnd = true;
+        }
+        else {
+            this.updateScrollButtons();
+        }
+    }
     getLastVisibleElement() {
         const element = this.getScrollPaneElements().find(el => el.getBoundingClientRect().x +
             el.getBoundingClientRect().width -
@@ -189,32 +205,38 @@ export class DuetScrollable {
                 "duet-scrollable-button-container": true,
                 [`${direction}`]: true,
                 "duet-scrollable-button-container--occluded": !this.needsScrolling,
-            } }, h("button", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
+            } }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 [`duet-scrollable-button--${direction}`]: true,
-            }, onClick: () => scrollTo(), disabled: scrollPaneLocation, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: "small", margin: "none" }))));
+            }, onClick: () => {
+                scrollTo();
+                if (document.activeElement) {
+                    ;
+                    document.activeElement.blur();
+                }
+            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: "small", margin: "none" }))));
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6a2f3a6f4036a13721ebcfbb3bb25b8643158e56', class: {
+        return (h(Host, { key: '44691d4a1b441b106e337cf3f53a6936631f5480', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '4bb215f5191f36166ecd690b990d98d8b5734924', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '07fc1a65d6b9b303aa619d3b0f5942b3615ab3ec', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '5613531c8bf0412aa04c37ae90faa516b16b30ac', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'fce3a449acdf28e2a89942dc6a9acc436e457656', name: "collapse-button-label" })))), h("div", { key: '39a8fc136ad07b789f6bfdd6901c1e806744a059', class: {
+            } }, h("duet-button", { key: '49d9240985d93addb7dae6aad6d5443cc8205b70', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'c215d89df2f21047ef1fb2c094c70c6e78869ffa', name: "collapse-button-label" })))), h("div", { key: 'ebdf63f1649ffacf763b4ac6ff52576bca674e83', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: 'c3929264d3c94505dd43827593f1702671629427', class: {
+            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: 'a202dcd5c66b6b5aa69c73903b113dd76078ba0d', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '3b0b1fde6ad0500b0bf893c4b4e8ae3ac90c426b' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'd35f08ff8a30abc8b3bc99e09701c88768d5615c' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -14,13 +14,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3cdda64194aabb0bf4cef5f273b4eb35d956c63a', class: {
+        return (h(Host, { key: '8773917ab1861426ac154e88a578116470c60558', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '167f4d34166d423a1ece6a4699ddf139e54f1c9f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '156a1bfcfb46fecb6c73120927bae1788efd32a1', class: {
+            } }, h("div", { key: '905163b782b84e3989df7c4cb90a5f965152b4e5', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'c3886b18a98df150ba61452fd9edb065a7ec483f', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '4aa12807146fee156f174be8670802f0d79f9974', class: "duet-main" }, h("slot", { key: 'b3fb02f84266a65c67156bef474f9f6f2531623f' }))))));
+            } }, h("section", { key: 'a5e69845c34da96deca2f68270a1431c17186933', class: "duet-main" }, h("slot", { key: 'a1dffe9da76bdc8169e5356463f4426b5e15a7d6' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }