@duetds/components 9.19.0 → 9.20.0

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

@@ -36,7 +36,7 @@
 :host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(.duet-link-button):last-of-type {
+[alignment=form-distribute] > :host(.duet-link-button):last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }
 
@@ -158,6 +158,10 @@ button {
 .block-center.duet-link.none {
   padding: 0;
 }
+.block.duet-link:hover .duet-link-content,
+.block-center.duet-link:hover .duet-link-content {
+  color: rgb(0, 97, 155);
+}
 .block .block__icon,
 .block-center .block__icon {
   display: flex;
@@ -433,30 +437,40 @@ button {
   }
 }
 
-:host(.duet-theme-turva2) .duet-link.duet-theme-turva {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link {
   color: rgb(185, 3, 41);
 }
-:host(.duet-theme-turva2) .duet-link.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link:hover {
   color: rgb(140, 0, 30);
 }
-:host(.duet-theme-turva2) .duet-tab-to-link.duet-theme-turva {
-  color: rgb(23, 42, 59);
-}
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva,
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button {
   border-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva .duet-link-content,
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva .duet-link-content {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button .duet-link-content {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-link.button.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.button:hover {
   outline-color: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button:hover {
   border-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover .duet-link-content {
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.list-button:hover .duet-link-content {
   color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center .duet-link-content {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block:hover, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center:hover {
+  color: rgb(185, 3, 41);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-link.block:hover .duet-link-content, :host(.duet-theme-turva2) .duet-theme-turva.duet-link.block-center:hover .duet-link-content {
+  color: rgb(185, 3, 41);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-to-link {
+  color: rgb(23, 42, 59);
 }

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

@@ -94,7 +94,7 @@ export class DuetLink {
         return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderBlockContent() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { class: this.iconResponsive ? "icon-responsive" : "", size: "auto", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary" }))));
     }
     renderButtonCardContent() {
         const iconWrapStyle = {
@@ -123,10 +123,10 @@ export class DuetLink {
         const Tag = !this.url && this.variation !== "default" ? "button" : "a";
         const role = !this.url && this.variation === "default" ? "button" : null;
         const isButton = Tag === "button";
-        return (h(Host, { key: 'd83502af54d3fa4f2aec80d7082a5a6969207a39', class: {
+        return (h(Host, { key: 'bcb9fe0becd4120ea1e5f71539e54bce7b8dd9e5', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '534e9bcb74e02dc050ac1986b251f08215c8aa7d', href: this.url, class: {
+            } }, h(Tag, { key: '6c49284e34742515619fed318a67bc7f62484a74', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -110,13 +110,13 @@
   color: rgb(23, 28, 58);
 }
 
-:host(.duet-list-striped:nth-child(odd)) dt,
-:host(.duet-list-striped:nth-child(odd)) dd {
+:host(.duet-list-striped:nth-of-type(odd)) dt,
+:host(.duet-list-striped:nth-of-type(odd)) dd {
   background: rgb(245, 248, 250);
 }
 
-:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
-:host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
+:host(.duet-list-striped.duet-theme-turva:nth-of-type(odd)) dt,
+:host(.duet-list-striped.duet-theme-turva:nth-of-type(odd)) dd {
   background: rgb(245, 247, 250);
 }
 
@@ -436,8 +436,8 @@
   color: rgb(23, 42, 59);
 }
 
-:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
-:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
+:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-of-type(odd)) dt,
+:host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-of-type(odd)) dd {
   background: rgb(245, 246, 247);
 }
 

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

@@ -28,7 +28,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }
 

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

@@ -30,7 +30,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

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

@@ -33,7 +33,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

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

@@ -197,15 +197,15 @@ export class DuetNumberInput {
         this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
         this.accessibleLiveEnabled = true;
         this.accessibleAddDefaults = {
-            fi: "Lisää summaan",
-            en: "Add to the amount",
-            sv: "Lägg till beloppet",
+            fi: "Lisää {step} {unit}",
+            en: "Add {step} {unit}",
+            sv: "Lägg till {step} {unit}",
         };
         this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
         this.accessibleSubtractDefaults = {
-            fi: "Vähennä summasta",
-            en: "Subtract from the amount",
-            sv: "Dra från beloppet",
+            fi: "Vähennä {step} {unit}",
+            en: "Subtract {step} {unit}",
+            sv: "Subtrahera {step} {unit}",
         };
         this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
         this.theme = "";
@@ -302,7 +302,11 @@ export class DuetNumberInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract
+            .replace(/\{\s*step\s*\}/, `${this.step}`)
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd
+            .replace(/\{\s*step\s*\}/, `${this.step}`)
+            .replace(/\{\s*unit\s*\}/, `${this.unit}`)), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "scoped"; }
@@ -623,7 +627,7 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                            "text": "{fi: \"Lis\u00E4\u00E4 {step} {unit}\", en: \"Add {step} {unit}\", sv: \"L\u00E4gg till {step} {unit}\"}"
                         }],
                     "text": "Defaults for accessibleAdd"
                 },
@@ -631,7 +635,7 @@ export class DuetNumberInput {
                 "setter": false,
                 "attribute": "accessible-add-default",
                 "reflect": false,
-                "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
+                "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 {step} {unit}\",\n    en: \"Add {step} {unit}\",\n    sv: \"L\u00E4gg till {step} {unit}\",\n  }"
             },
             "accessibleAdd": {
                 "type": "string",
@@ -646,9 +650,9 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+                            "text": "{fi: \"Lis\u00E4\u00E4 {step} {unit}\", en: \"Add {step} {unit}\", sv: \"L\u00E4gg till {step} {unit}\"}"
                         }],
-                    "text": "Accessible label for the add button that is read for screen reader users."
+                    "text": "Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit}\nare replaced with respective properties."
                 },
                 "getter": false,
                 "setter": false,
@@ -675,7 +679,7 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                            "text": "{fi: \"V\u00E4henn {step} {unit}\u00E4\", en: \"Subtract {step} {unit}\", sv: \"Sutrahera {step} {unit}\"}"
                         }],
                     "text": "Defaults for accessibleSubtract"
                 },
@@ -683,7 +687,7 @@ export class DuetNumberInput {
                 "setter": false,
                 "attribute": "accessible-subtract-defaults",
                 "reflect": false,
-                "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
+                "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 {step} {unit}\",\n    en: \"Subtract {step} {unit}\",\n    sv: \"Subtrahera {step} {unit}\",\n  }"
             },
             "accessibleSubtract": {
                 "type": "string",
@@ -698,9 +702,9 @@ export class DuetNumberInput {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+                            "text": "{fi: \"V\u00E4henn\u00E4 {step} {unit}\", en: \"Subtract {step} {unit}\", sv: \"Sutrahera {step} {unit}\"}"
                         }],
-                    "text": "Accessible label for the subtract button that is read for screen reader users."
+                    "text": "Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit}\nare replaced with respective properties."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -17,8 +17,9 @@
     margin: 12px 0 28px 0;
   }
 }
-:host .duet-m-0 {
-  margin: 0 !important;
+
+:host(.duet-m-0) {
+  margin: 0;
 }
 
 .duet-panel {

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

@@ -21,15 +21,14 @@ export class DuetPanel {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '8b846b25b51818d64ede169d7eb7a178e7620658' }, h("section", { key: '9825b3985ca00766d50876ba21a7cf4fc8aa1e64', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+        return (h(Host, { key: 'b5e4419a744dda0b43c018dbf8c353f69899bcf3', class: { "duet-m-0": this.margin === "none" } }, h("section", { key: '6bcaa57151e39e90884a89dc2cbc87839754c4ef', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
                 "duet-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation.split("-")[0]]: true,
                 [this.variation.split("-")[1]]: true,
                 [`padding-${this.padding}`]: true,
                 border: this.border,
-                "duet-m-0": this.margin === "none",
-            } }, h("slot", { key: 'c5470707b941b16e0ea79c1a13b6b9b6056f4e22' }))));
+            } }, h("slot", { key: '8bb284bc305964b85745e72b13c7fad3348b626e' }))));
     }
     static get is() { return "duet-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ span.flag-container {
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -152,7 +152,7 @@ export class DuetPhoneInput {
         return (_c = (_b = (_a = this.duetInputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.replace(/\s/g, "")) !== null && _c !== void 0 ? _c : "";
     }
     set value(val) {
-        if (!this.duetInputElement) {
+        if (!this.duetInputElement || !this.countryCodePopup) {
             this.pendingValue = val;
         }
         else {
@@ -177,7 +177,7 @@ export class DuetPhoneInput {
     }
     componentDidLoad() {
         if (this.pendingValue) {
-            this.duetInputElement.value = this.pendingValue;
+            this.value = this.pendingValue;
         }
     }
     connectedCallback() {
@@ -697,7 +697,7 @@ export class DuetPhoneInput {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",

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

@@ -5,6 +5,7 @@ import { spaceXSmall } from "@duetds/tokens";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { getLanguage } from "../../utils/language-utils";
@@ -27,8 +28,7 @@ export class DuetPopupMenu {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 if (this.controllerIcon) {
                     button.setAttribute("trailing-icon", "action-arrow-down-small");
                 }
@@ -254,13 +254,13 @@ export class DuetPopupMenu {
         if (!!newValue === !!oldValue) {
             return;
         }
+        if (this.openButton) {
+            setOpenerExpanded(this.openButton, this.open);
+        }
         if (this.open && !oldValue) {
             const autoUpdateConfig = {
                 ancestorScroll: !this.forcePlacement,
             };
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
             if (this.accessibleRole !== "listbox") {
                 this.teleport.makeSiblingsInert();
             }
@@ -281,9 +281,6 @@ export class DuetPopupMenu {
             }, 200);
         }
         else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
             // Clean up autoUpdate when closed
             if (this.autoUpdateCleanup) {
                 this.autoUpdateCleanup();
@@ -355,17 +352,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '8162bd3dcf089f1fbd0890ba90752b8375845e02' }, h("div", { key: 'a960165406ca70e48975935be91407e196af3acb', ref: element => {
+        return (h(Host, { key: '4492ab7c249dc54ff4351d7307705dbda42197df' }, h("div", { key: '440058efaafdc50cf0e8dc6aff3b00ac4e446d1b', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '41ff2d5c37e1b82432abe9ae940120c4f27c2de7' }, h("duet-input", { key: 'aeeebdf64aa13db39dc6bb49e9a33a9eddf71171', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '22bffb507bc56003ed6df5c58255bba01938e985' }, h("span", { key: '2720b44f182bd5590999b37d4ac9157bf3d72a1c', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '625ca4c7f0d8daaddfac0b399637af6604bd8744' }, h("duet-input", { key: 'd046c9db74fa05e4f753105b201f731c56846716', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'a7774edb80cd2e8ceb1ea422db22ef4253a8e3cc' }, h("span", { key: 'a83bd1d5d6468c2d93aef69c2b175a2c28722593', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: 'ab6b1d79410935e50a5c6a15fc5f66d141ee5590', size: "xx-small" }))), h("slot", { key: '6265f5a9f3cde710961b4e815da45501016f4056' }))));
+                `)), h("duet-spacer", { key: 'd60bc86becbbc4d00aef492cd84df10e820e80b5', size: "xx-small" }))), h("slot", { key: 'f8959e360869e9aa3c0c67227f851b8272faf5ca' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -472,17 +469,17 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",
@@ -510,17 +507,17 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",

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

@@ -28,7 +28,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 4px !important;
 }
 

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

@@ -30,7 +30,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 28px !important;
 }
 
@@ -55,7 +55,7 @@
   :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
     margin-right: 0 !important;
   }
-  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type {
+  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type:not(:last-child) {
     margin-right: 28px !important;
   }
   :host(.horizontal-responsive) .duet-label .duet-label-content {

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

@@ -31,7 +31,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {

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

@@ -67,6 +67,25 @@ export class DuetScrollable {
     disconnectedCallback() {
         this.resizeObserver.disconnect();
     }
+    /**
+     * Scrolls the scrollable so that the desired item is visible
+     * @param itemIndex The first item is 1
+     */
+    async scrollToItem(itemIndex) {
+        this.scrollToElement(itemIndex - 1, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the first item is visible
+     */
+    async scrollToStart() {
+        this.scrollToElement(0, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the last item is visible
+     */
+    async scrollToEnd() {
+        this.scrollToElement(this.getScrollPaneElements().length - 1, "center");
+    }
     /**
      * Private methods.
      */
@@ -142,7 +161,7 @@ export class DuetScrollable {
             this.scrollPaneAtStart = false;
         }
         // Round both values to handle sub-pixel precision issues
-        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const visibleContentWidth = Math.ceil(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
         const totalContentWidth = Math.round(container.scrollWidth);
         this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
@@ -228,18 +247,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3858f9356ec3ea38a7c475ce2d2fff6485827f82', class: {
+        return (h(Host, { key: '5dccde443367903cd786fcfddc57728395a7ea94', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'b142496c0e6686103983b537b53ccdc7e8cae7c0', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '1c6725c97fa1701963139257653a25377eace462', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '50d5f6266a0f0432cd1dd752a00260d5246890d3', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '5c05fd2e927df5ebd7b5c2cec3112013b58cec01', name: "collapse-button-label" })))), h("div", { key: '33f0efaf3fcc09241a9e75fa75b86ef093bc811f', class: {
+            } }, h("duet-button", { key: '848338c8377121539a2873ebb90b46e7d4929d4e', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '8792f3c6219b939e2a82bd04c01661c66cf58bc2', name: "collapse-button-label" })))), h("div", { key: '84dbb203e6d64d0ddc7b8359acc47125ef0407a1', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '6b0f1e40aa5c8406b448e93bcecb8343a0a883a3', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '313888e6a6a495b6b39feaafd17c437e82cb01a6', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -247,7 +266,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '77747e312df865dc66478dd32fcf87507bde8016' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '4a918b666f4c729953a1b2849cb05f9d6e2f9414' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -514,6 +533,68 @@ export class DuetScrollable {
             "childrenData": {}
         };
     }
+    static get methods() {
+        return {
+            "scrollToItem": {
+                "complexType": {
+                    "signature": "(itemIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemIndex",
+                            "type": "number",
+                            "docs": "The first item is 1"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the desired item is visible",
+                    "tags": [{
+                            "name": "param",
+                            "text": "itemIndex The first item is 1"
+                        }]
+                }
+            },
+            "scrollToStart": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the first item is visible",
+                    "tags": []
+                }
+            },
+            "scrollToEnd": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the last item is visible",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

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

@@ -30,7 +30,7 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host:last-of-type {
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
   margin-right: 16px !important;
 }
 @media (min-width: 36em) {