@duetds/components 9.2.0 → 9.2.1

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

@@ -364,7 +364,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -385,7 +385,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

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: 'd106a014e2f606089c38d6dc260b1ad45ca54957', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '5686290471d3dd623d00687c2d8589d68cf41a6b', 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: '6969a22abb5eef82bd7b7be41f549f8e0068ee1b', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'bb0a3199e2fe2df65755fd95b1c7d864c24e4321', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '33993c917fd1a136cde8a94968d3378ada24a87f', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '7d29c53b121f8d7c1b9ed3c8a5f8b8320f23605a', class: "pre-heading" }, h("slot", { key: 'bbe8d30708743401c10d77e8e396d68a623b3799', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'e7f37460aabadc39bd6d58107df780f3370c20c6', class: "heading" }, h("duet-heading", { key: '73014d60a050052991ca8b9cd4b708e09cc4b2c5', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: 'aeb47383807703238ef6b8e05d60b546e9ce5401' }, h("slot", { key: '22c41d18e22855f6bf5a5a0f1a394cc80211412c', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'f9062af866af231584a768fabb3cd41c93a5ecb3', class: "description" }, h("duet-paragraph", { key: 'a36fa27d4a90966385b9fd2a7da872ab7cab05ae', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'c447f09c8e3f8614a6b14259020308dd612fea18' }, h("slot", { key: '1b25d2412516f52a3332d8b9694c8f203e2e32db', name: "description" }))))), this.hasActionSlot && (h("div", { key: '724d901256f13542bb24489bf487a56d44fbd57b', class: "action" }, h("slot", { key: 'ea8b1fe60559b9b1ba9f1e6efa59ca7e587d7d13', 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-radio/duet-radio.js

@@ -546,7 +546,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

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-slider/duet-range-slider.js

@@ -567,7 +567,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

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-range-stepper/duet-range-stepper.js

@@ -379,7 +379,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

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: '8cd00d30bab204218507a5f2cc933593256dc211', 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: 'bf3fbde0fa3d1e62a072385f9224bfed02394257', 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: 'd2eec5f6186d39ac5dc628c17e7905ca4861d273', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'c258896a5157720fdd1bdfbcfa5fbb5eef9f252e', name: "collapse-button-label" })))), h("div", { key: '78db72bcd08b2537cfea85fe93e2d52f9a0c5fc0', 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: '11de576708e608721a3b4bfa056f266189c92d27', 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: '269440da90135c9ac4159522cce22b32df62a5e1' })), 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: '6bc31c9e1170800e377bae9bfddbfb0f50b3747d', 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: '56cdfd23f32d5ff47130d9f247b95d81fd57bad2', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'b1a797a77e8f60f14c966ceba0eb1c41fefdd7cc', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '4aa12807146fee156f174be8670802f0d79f9974', class: "duet-main" }, h("slot", { key: 'b3fb02f84266a65c67156bef474f9f6f2531623f' }))))));
+            } }, h("section", { key: '87aec98914b281099c0a16b8d6e4e16048cafdc6', class: "duet-main" }, h("slot", { key: '116e073f6de9c5ffc8c84f967a4bfc2aff067440' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,11 +133,11 @@ duet-tooltip,
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 .duet-select-wrapper select:hover + .duet-select {
-  border-color: rgb(144, 149, 153);
+  border-color: rgb(127, 150, 165);
   box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
   box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-select-wrapper select:hover + .duet-select {
@@ -172,18 +172,18 @@ duet-tooltip,
   cursor: default !important;
 }
 .duet-select-wrapper select[disabled] + .duet-select {
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   cursor: default !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
   box-shadow: none !important;
   opacity: 1 !important;
-  -webkit-text-fill-color: rgb(0, 41, 77) !important;
+  -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
 .duet-theme-turva .duet-select-wrapper select[disabled] + .duet-select {
   color: rgb(23, 28, 58) !important;
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(245, 245, 247) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(245, 247, 250) !important;
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-select-wrapper span.duet-keep-container-height {
@@ -211,31 +211,31 @@ duet-tooltip,
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: 150ms ease;
 }
 .has-error .duet-select {
-  border-color: rgb(222, 35, 98) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .has-error .duet-select .duet-select-icon {
-  color: rgb(222, 35, 98) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-select {
-  border-color: rgb(224, 42, 13) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-select .duet-select-icon {
-  color: rgb(224, 42, 13) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva .duet-select {
   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);
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-select svg {
   position: absolute;
@@ -244,7 +244,7 @@ duet-tooltip,
   z-index: 200;
   width: 20px;
   height: 20px;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   pointer-events: none;
   transform: translateY(-50%);
 }
@@ -279,7 +279,7 @@ duet-tooltip,
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   border-radius: 4px;
 }
 .duet-select-help span {
@@ -288,13 +288,13 @@ duet-tooltip,
 }
 .duet-theme-turva .duet-select-help {
   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(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .has-error .duet-select-help {
-  color: rgb(222, 35, 98);
+  color: rgb(214, 28, 82);
 }
 .duet-theme-turva.has-error .duet-select-help {
-  color: rgb(224, 42, 13);
+  color: rgb(214, 28, 82);
 }
 
 .duet-label-hidden duet-label {