@duetds/components 9.1.2 → 9.2.1

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

@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '238ac01f83f3e796534c0ef17857631a329f6a42', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '2db66f288ef50d588016e131d548b22a77f99dd6', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: '756ad0511064e85742b3bb271bdd2a468f3f1eb0', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '4d235370cef9fc2b6d9448b2b02a02eefc04b97b', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: '4c03feef0a35eaa9ec13e5c3d5103ae1facbd832', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '6ac1a80080fe006f2c576999b9ef0718c6339a04', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '0ebf21ab341811673ea978e22a085cba7eaaf75c', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '4e98bb73d78c7cb713ac1de78d9d5ccbdce1687d', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '9d16f94604abbcfbbd8b538395e46c024b88c0a2', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '7bbec70a660779cabba7847dd76732e9bfb71f1b', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '63a2904ccc7d0c008332625069c9083610c471ab', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '974c29ddf4de1b7aca6e24f289be9fbb4177eb56', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'fd709f59213de7f819c05b997b84d8ed39ec4566', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '7000cadb2b9214ac7e460fc9df1893017243aba5', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd8fd5f3a859d470c11c15ae197313cc6c8983fc2', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'c03e92b8f6ba758dd49e881380c964c87f155dcc', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'a1fbc90286ef69e26c2050f5dd1e77cfd5f8496d', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '71b346d9a35b397951223fb32bdd449441dab0bf', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '6c3b28e93bf637ceeb7c58fc743f381ef1db509c' }, h("li", { key: '33f0f34c511b50fd228ea44bf6f4feb408ede264', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '746eb995e69baaf75b731923c1827a995fc2cc3a', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '067f6fb84943bf3f448f0474041ae821871fb8a2', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'd8a1df197cee21fe581338838587bbdb8800d874', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '464fc5efe12433ea2ba6d3c287ecb5e2110626d8', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '0c6467cfe44e34a16fcb222040ad894f4733a799', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: '0bc436817f1dcb0fddc29e58e55b41b0829969ed' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'acaac82b2aa83002ea653aa9cad50488124405ec', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '4bb24fe4575b9bd1673a51413d40826be404c6b7', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'e044660e2a3ece57534cdf03382241a986c319a9', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'ec2abf76d2fec68bf91289013be139ba4348ed0a', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '06dec4fc55486effcff9f16fe9118e4e920edd66', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '142ba228678916f8f9a69de0c8f38430c6db7623' }, h("li", { key: '6e2370fdf3f65c69d30ccee081b6426c12267a11', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '887ee7242f007578beb3b1a59702ab619d0a7e5e', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '0b5d04b555f074972abcc93a70a0d80bdadabcd4', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '3cbe3bbf9ef3406f2a98aa736f692aaf87119857', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '462643a69aeecc463a23ba22f0bf79ea8c4456c3', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: 'fa748ff5b134b6a0a3a4550f0073fbf45baf2337', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: '0459e62e54d351fa5f22afa7afb3a3a6027df6c1' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'fb76ad813a83768da7a52230342170198efc321d', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '14b9164e41b63d0adbbfe5ef29074a46695a44d6', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '551f91a348760b5101e88adc3a3d8a3d692fc804', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '454ccc661d104be10d0a3908fa7516e1f627fb57', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '01eeca39b9de17e25c39ffec6296c26920b86380', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: 'd92331de76576b275c1189fce2634abf12f49eb7', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: 'ba8c5fa8c6a228e7585c1d6bd0a913b92174b7dd', class: {
+                : undefined }, h("div", { key: 'f4c0ca8a738f21233a966611c8ce15d7f776c7d7', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '3dc850213f9f9c7aac8cabba1901740d6068cdde', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'fb7c84dfeda7e02cd891269391b07cefaaa1a4e4', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'ddf5b89fac538ccdae84e031bea7a2830f656bc0', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '45f6d91ce4a38bc672c600b11ce700a383154d0b', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '78c2482a7d36358e53000e55c19057c2b4585165', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '0168ec664180f13c8ed94f258cc24277c46daa32', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '330747e12a1e3d8bc0fb74f3945d99c06d8132d0', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

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

@@ -32,7 +32,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: '15e61ed3ba7f3ce62cf3ecd38fd313875b3b49b4', "aria-describedby": this.id }, h("p", { key: '9f2c19ee2b3fb5693d56e5359ef2d059b1a1349c', id: this.id, class: {
+        return (h(Host, { key: 'e9f8164c6795c950d1f1340cc8a723113f2e231a', "aria-describedby": this.id }, h("p", { key: '87942327cc0a685a6d1435adc090b8c0aa5c54ac', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -40,7 +40,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'a6e89e000ca0cfbdfc22a2fc3dae50c3e38ff284' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '858b0de4a678c0320e76f1479d7e9a7202a749ac' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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/duet-popup-menu.js

@@ -17,7 +17,9 @@ export class DuetPopupMenu {
                 const button = element;
                 button.accessiblePopup = "true";
                 button.accessibleExpanded = false;
-                button.setAttribute("trailing-icon", "action-arrow-down-small");
+                if (this.controllerIcon) {
+                    button.setAttribute("trailing-icon", "action-arrow-down-small");
+                }
                 this.openButton = button;
             }
             catch (_e) { }
@@ -54,6 +56,7 @@ export class DuetPopupMenu {
         this.position = "absolute";
         this.mainAxisOffset = 0;
         this.crossAxisOffset = 0;
+        this.controllerIcon = "action-arrow-down-small";
     }
     /**
      * Component lifecycle events.
@@ -81,7 +84,9 @@ export class DuetPopupMenu {
     disconnectedCallback() {
         if (this.openButton) {
             this.openButton.removeEventListener("click", this.openButtonEventListener);
-            this.openButton.removeAttribute("trailing-icon");
+            if (this.controllerIcon) {
+                this.openButton.removeAttribute("trailing-icon");
+            }
         }
     }
     /**
@@ -185,7 +190,9 @@ export class DuetPopupMenu {
             if (this.openButton) {
                 this.openButton.accessibleExpanded = true;
             }
-            this.teleport.makeSiblingsInert();
+            if (this.accessibleRole !== "listbox") {
+                this.teleport.makeSiblingsInert();
+            }
             this.updatePlacement();
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
@@ -203,7 +210,9 @@ export class DuetPopupMenu {
                     this.focusOpenButton();
                 }
                 this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                this.teleport.removeInertFromSiblings();
+                if (this.accessibleRole !== "listbox") {
+                    this.teleport.removeInertFromSiblings();
+                }
             }, 200);
         }
     }
@@ -225,12 +234,15 @@ export class DuetPopupMenu {
         return -1;
     }
     render() {
-        const positionStyles = {
+        const styles = {
             top: `${this.menuY}px`,
             left: `${this.menuX}px`,
             position: this.position,
+            overflowY: "auto",
         };
-        return (h(Host, { key: 'dbd5d6ba344124704ad5798622aeed8e2f1edb1b' }, h("div", { key: 'a59dd98042f84b7460956b4b94870691f7af399e', ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '2a0d9c72cc78e95918685a0b13f9c184d352867e' }))));
+        return (h(Host, { key: '389d4d1b46db081d29a7fa8d57fd65f9c113f7a9' }, h("div", { key: '8d5e47a1dac1f4a7b17aed4aa69afed4cfa44a39', ref: element => {
+                this.menuElement = element;
+            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '09fc711a6dc838d9e345a694c5e45c09a01bf4ed' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -267,8 +279,8 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"menu\" | \"list\"",
-                    "resolved": "\"list\" | \"menu\"",
+                    "original": "\"menu\" | \"listbox\" | \"list\"",
+                    "resolved": "\"list\" | \"listbox\" | \"menu\"",
                     "references": {}
                 },
                 "required": false,
@@ -329,8 +341,8 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLDuetInputElement",
+                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -345,6 +357,10 @@ export class DuetPopupMenu {
                             "location": "import",
                             "path": "../../common",
                             "id": "src/common/index.ts::OpenerComponent"
+                        },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
                         }
                     }
                 },
@@ -446,6 +462,24 @@ export class DuetPopupMenu {
                 "attribute": "cross-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "controllerIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default Popup Menu adds \"action-arrow-down-small\" icon to the controller.\nThis can be removed with controller-icon=\"\"."
+                },
+                "attribute": "controller-icon",
+                "reflect": false,
+                "defaultValue": "\"action-arrow-down-small\""
             }
         };
     }

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,20 +55,28 @@
   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;
 }
 .duet-popup-menu-item .duet-popup-menu-item-trailing {
   padding-left: 20px;
+}
+
+.active-descendant {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }

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

@@ -37,6 +37,7 @@ export class DuetPopupMenuItem {
         this.trailingIcon = undefined;
         this.trailingText = undefined;
         this.active = false;
+        this.activeDescendant = false;
     }
     /**
      * Component lifecycle events.
@@ -62,8 +63,9 @@ export class DuetPopupMenuItem {
             "duet-popup-menu-item": true,
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
+            "active-descendant": this.activeDescendant,
         };
-        return (h(Host, { key: '35289f7f89fa2e759761d2b5309c1c50903cde81', role: this.accessibleRole }, h(TagName, { key: 'dd0cb6088ab305ed97ff28598ca5424893c71aab', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -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: 'b877792e8c47959bfa240713f74a510930630cdf', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '99d5337b72c8aa36a6ae2962e4112cf0158ea3e2', class: "duet-popup-menu-item-label" }, h("slot", { key: 'ca46da07ce9fdd7e9a080a1f592b213dac6e7ede' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '22bdf49aaed6e82113dd096de1e8f6c730034c3c', 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: '3ab96002796300ed841354ad491ec77c99be97b5', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        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))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,8 +102,8 @@ export class DuetPopupMenuItem {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"menuitem\" | \"listitem\"",
-                    "resolved": "\"listitem\" | \"menuitem\"",
+                    "original": "\"menuitem\" | \"listitem\" | \"option\"",
+                    "resolved": "\"listitem\" | \"menuitem\" | \"option\"",
                     "references": {}
                 },
                 "required": false,
@@ -316,6 +318,27 @@ export class DuetPopupMenuItem {
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "activeDescendant": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Focus simulation when parent element uses aria-activedescendant"
+                        }],
+                    "text": ""
+                },
+                "attribute": "active-descendant",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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: '15e241ca4500fba19ae5c931200d929f7c26feab', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '762dec6d01cff5f5850f16176f306ac1cbf2f4d2', 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: '76e2710c25b70b7310756f47d072e762e88bc247', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '699f6cf997f4a59c46fe2ede3a6b4ae74cab3ab6', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'bfa918f0068b2aec0496cfd9a681b8ff89ddbc4f', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '4a5504dac64db3f856e37425b2af6bc88c82cf2c', class: "pre-heading" }, h("slot", { key: 'f83e1dd97784f9544dcf8bc638d91da52e1552f5', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '5588c3bf5dfb560a7b778a6bd644b67853b7d52f', class: "heading" }, h("duet-heading", { key: 'f5940bc4f214466b485a1836683e1aeead0e87c7', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '23f5ffc9111c2a40cacbb9b7c5b6bda3dd142b23' }, h("slot", { key: '2b5c24d08332aa20d04287b5694e9bc03b183481', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'e076b2091a72aa687e188f96e26260d92a7c348e', class: "description" }, h("duet-paragraph", { key: 'bbf71a9b26b3e84c028b53680c024fd3dd644761', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '73f2a19b25f92101b65d3c2a81becdb2d03c13ff' }, h("slot", { key: 'a7da789756ddc98fec9cdc3dcd988a7d9b8ddcc4', name: "description" }))))), this.hasActionSlot && (h("div", { key: '02e40e9d53bb5d954455a63340af25b95e5c2e03', class: "action" }, h("slot", { key: '5db34d5353f04f26a5934c35f8a21dfbb7d753ed', 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-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;