@duetds/components 9.19.0 → 9.20.0

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

@@ -34,7 +34,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;
 }
 @media (max-width: 35.9375em) {
@@ -49,7 +49,7 @@
 :host(.square):last-child, :host(.square):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(.square):last-of-type {
+[alignment=form-distribute] > :host(.square):last-of-type:not(:last-child) {
   margin-right: 12px !important;
 }
 
@@ -67,8 +67,8 @@
 :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(.duet-small):last-of-type,
-[alignment=form-distribute] > :host(.duet-x-small):last-of-type {
+[alignment=form-distribute] > :host(.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
   margin-right: 4px !important;
 }
 @media (max-width: 35.9375em) {
@@ -84,7 +84,7 @@
 :host(.duet-x-small):last-child, :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(.duet-x-small):last-of-type {
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
   margin-right: 2px !important;
 }
 
@@ -97,8 +97,8 @@
 :host(.square.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > :host(.square.duet-small):last-of-type,
-[alignment=form-distribute] > :host(.square.duet-x-small):last-of-type {
+[alignment=form-distribute] > :host(.square.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.square.duet-x-small):last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }
 
@@ -657,6 +657,10 @@
   background: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary:hover {
+  background: rgb(140, 0, 30);
+  border-color: rgb(140, 0, 30);
+}
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded {
   color: rgb(23, 42, 59) !important;
   border-color: rgb(23, 42, 59);

package/lib/collection/components/duet-checkbox/duet-checkbox.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: 8px !important;
 }
 

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

@@ -32,7 +32,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-choice/duet-choice.css

@@ -32,7 +32,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 (max-width: 35.9375em) {
@@ -63,15 +63,67 @@
   }
 }
 
+@media (min-width: 22.5em) {
+  :host(.horizontal-responsive-x-small) {
+    margin-bottom: 0 !important;
+    margin-right: 16px !important;
+  }
+  :host(.horizontal-responsive-x-small):last-child, :host(.horizontal-responsive-x-small):last-of-type {
+    margin-right: 0 !important;
+  }
+  [alignment=form-distribute] > :host(.horizontal-responsive-x-small):last-of-type:not(:last-child) {
+    margin-right: 16px !important;
+  }
+}
+
+@media (min-width: 36em) {
+  :host(.horizontal-responsive-small) {
+    margin-bottom: 0 !important;
+    margin-right: 16px !important;
+  }
+  :host(.horizontal-responsive-small):last-child, :host(.horizontal-responsive-small):last-of-type {
+    margin-right: 0 !important;
+  }
+  [alignment=form-distribute] > :host(.horizontal-responsive-small):last-of-type:not(:last-child) {
+    margin-right: 16px !important;
+  }
+}
+
 @media (min-width: 48em) {
-  :host(.horizontal-responsive) {
+  :host(.horizontal-responsive-medium) {
+    margin-bottom: 0 !important;
+    margin-right: 16px !important;
+  }
+  :host(.horizontal-responsive-medium):last-child, :host(.horizontal-responsive-medium):last-of-type {
+    margin-right: 0 !important;
+  }
+  [alignment=form-distribute] > :host(.horizontal-responsive-medium):last-of-type:not(:last-child) {
+    margin-right: 16px !important;
+  }
+}
+
+@media (min-width: 62em) {
+  :host(.horizontal-responsive-large) {
+    margin-bottom: 0 !important;
+    margin-right: 16px !important;
+  }
+  :host(.horizontal-responsive-large):last-child, :host(.horizontal-responsive-large):last-of-type {
+    margin-right: 0 !important;
+  }
+  [alignment=form-distribute] > :host(.horizontal-responsive-large):last-of-type:not(:last-child) {
+    margin-right: 16px !important;
+  }
+}
+
+@media (min-width: 64.0625em) {
+  :host(.horizontal-responsive-x-large) {
     margin-bottom: 0 !important;
     margin-right: 16px !important;
   }
-  :host(.horizontal-responsive):last-child, :host(.horizontal-responsive):last-of-type {
+  :host(.horizontal-responsive-x-large):last-child, :host(.horizontal-responsive-x-large):last-of-type {
     margin-right: 0 !important;
   }
-  [alignment=form-distribute] > :host(.horizontal-responsive):last-of-type {
+  [alignment=form-distribute] > :host(.horizontal-responsive-x-large):last-of-type:not(:last-child) {
     margin-right: 16px !important;
   }
 }
@@ -80,6 +132,16 @@
   margin-right: 0 !important;
 }
 
+:host(.vertical-stretch) .duet-choice-card-flextainer {
+  height: 100%;
+}
+:host(.vertical-stretch) .duet-choice-card-flextainer .duet-choice-label {
+  align-items: flex-start;
+}
+:host(.vertical-stretch) .duet-choice-card-flextainer .duet-choice-label > div {
+  margin-top: 0.25rem;
+}
+
 .duet-choice-card {
   position: relative;
   display: block;

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

@@ -260,7 +260,8 @@ export class DuetChoice {
         const identifier = this.identifier || this.choiceId;
         return (h(Host, { class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
-                "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
+                [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
+                "vertical-stretch": this.groupDirection === "horizontal",
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 "duet-theme-turva": this.theme === "turva",
@@ -837,19 +838,25 @@ export class DuetChoice {
                 "reflect": false
             },
             "groupResponsive": {
-                "type": "boolean",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DuetChoiceGroupBreakpoint",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+                    "references": {
+                        "DuetChoiceGroupBreakpoint": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetChoiceGroupBreakpoint"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
-                            "text": "Determines whether the group has responsive behavior"
+                            "text": "Determines at which breakpoint the group has responsive behavior"
                         }],
                     "text": ""
                 },

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

@@ -115,7 +115,7 @@ export class DuetChoiceGroup {
             choice.required = this.required;
             choice.groupDisabled = this.disabled;
             choice.groupDirection = this.direction;
-            choice.groupResponsive = this.responsive;
+            choice.groupResponsive = this.responsive ? this.breakpoint : undefined;
             if (!hasChecked && choice.value === value) {
                 // Correct value for this choice, but this choice isn't checked yet
                 // and we haven't found a checked yet

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

@@ -154,7 +154,7 @@
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {
   margin-right: 0 !important;
 }
-[alignment=form-distribute] > .duet-collapsible-heading-icon:last-of-type {
+[alignment=form-distribute] > .duet-collapsible-heading-icon:last-of-type:not(:last-child) {
   margin-right: 8px !important;
 }
 [aria-expanded=true] .duet-collapsible-heading-icon {

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

@@ -7,8 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { checkNamedSlotElement, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
-import { sanitizeString } from "../../utils/string-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
@@ -19,6 +18,7 @@ import { sanitizeString } from "../../utils/string-utils";
 export class DuetCollapsible {
     constructor() {
         this.id = createID("DuetCollapsible");
+        this.headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
         this.handleKeyDown = (e) => {
             if (isKeyboardClick(e)) {
                 this.handleClick(e);
@@ -104,7 +104,12 @@ export class DuetCollapsible {
         inheritGlobalTheme(this);
         this.hasAfterHeadingSlot = hasSlot(this.element, "after-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
-        checkNamedSlotElement(this.element, "heading", "h1, h2, h3, h4, h5, h6");
+        checkNamedSlotElement(this.element, "heading", this.headingTags.join(","));
+        // As the slotted heading is inside a button it is assigned a presentational role. To provide the correct
+        // level to assistive technologies we copy the slotted heading's level for the heading wrapping the button.
+        if (this.hasHeadingSlot) {
+            this.headingLevel = getElementsFromNamedSlot(this.element, "heading")[0].tagName.toLowerCase();
+        }
     }
     connectedCallback() {
         subscribeTabbingChange(this);
@@ -127,8 +132,8 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '491c8d50564fe200f63bce1926984df56d988340', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '5b4014c7cd9911d38bb99f5552107244afb856b1' }, h("button", { key: 'a24f83bd274bd9b20ba6132da1a7a2859103eba6', class: {
+        const HeadingTagName = this.headingTags.includes(this.headingLevel) ? this.headingLevel : "div";
+        return (h(Host, { key: 'd4e3f686937d93bdf484ffae863443fe77c210be', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'e7ba14607b1e4d73d5f6272c00e2ceb0b8aa07ba' }, h("button", { key: '351d29316e93e66753701bbef469b6ec45518ead', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
@@ -136,7 +141,7 @@ export class DuetCollapsible {
                 "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'b748199f0715c1236573441ac601a174a104a89c', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '5abc89da39733fcf24605f919971b87053f2c3b5', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '4ad7a599fcf2198838b85fe531ab32eae005c235', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '19b333d50cf04db0aefffd763ecdbfd487884069', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: '0bccd472b3eb373b2a2d725e4c40aa8ee2705706', part: "duet-collapsible-after-heading" }, h("slot", { key: '39f90f69cd933d6f7d7657e593126a01589f63b7', name: "after-heading" })))), this.caption && (h("div", { key: '5fc18d8f1e8010c368d49770ed89371ed2e09457', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'd83d5d514cd020a7f97b0e19d0afe7e61b500582', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'd9687fa0fb07e389ea350ec3448f935d3fc8e332', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '423d7640d82b84912f65637ff6f9d490502373a6' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '1e209486bb08e851fb98f60b4d24e4db0d6b3d87', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '40b9e2fb2b7b5967c46fca245b772404ed8d274f', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '07f471ddd35c31014d5fd6b02698b7061daafc54', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'b6ff01c3e226758716fe24ad0a9b911ccc09b145', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: 'ff88bb6f7c9a581479a698927e0240cbc4602356', part: "duet-collapsible-after-heading" }, h("slot", { key: '38ec3c75fa1328af535bf7fd07a3c4fdc41fbb8c', name: "after-heading" })))), this.caption && (h("div", { key: '49ca6eedead259a8a78fd043a62482248b047db9', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'fe7690a05a479010d8b5fdb325959ab6f9aed226', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'f0e833d4d0987a5b05f5daf1e098c633adae5e11', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '1a2ffd5f9b35957a876cc1ce0940e10274037476' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -351,7 +356,7 @@ export class DuetCollapsible {
             },
             "headingLevel": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetHeadingLevel | undefined",
                     "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",

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

@@ -32,16 +32,20 @@ export class DuetCombobox {
             this.inputValue = newValue;
         };
         this.onInputClick = () => {
-            var _a, _b;
-            if (this.openListOnClick) {
-                this.listOpen = !this.listOpen;
-            }
-            else {
-                this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
-            }
-            if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.listOpen = false;
-            }
+            this.popupMenuController = this.input.nativeInputElement;
+            // change listOpen on next tick so popup controller is set when open changes
+            setTimeout(() => {
+                var _a, _b;
+                if (this.openListOnClick) {
+                    this.listOpen = !this.listOpen;
+                }
+                else {
+                    this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
+                }
+                if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
+                    this.listOpen = false;
+                }
+            });
         };
         this.onInputTyping = async (e) => {
             var _a;
@@ -126,6 +130,7 @@ export class DuetCombobox {
         this.processedItems = null;
         this.inputValue = "";
         this.listOpen = false;
+        this.popupMenuController = undefined;
         this.selectedItems = new Set();
         this.activeItem = undefined;
         this.accessibleLabelDefaults = {
@@ -551,7 +556,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -860,6 +865,7 @@ export class DuetCombobox {
             "processedItems": {},
             "inputValue": {},
             "listOpen": {},
+            "popupMenuController": {},
             "selectedItems": {},
             "activeItem": {}
         };

package/lib/collection/components/duet-date-picker/duet-date-picker.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-hero/duet-hero.js

@@ -95,18 +95,19 @@ export class DuetHero {
      * Component lifecycle events.
      */
     componentWillLoad() {
-        const headings = "h1, h2, h3, h4, h5, h6";
+        const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
         inheritGlobalTheme(this);
         this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
         this.hasSubHeadingSlot = hasSlot(this.element, "subheading");
         checkNamedSlotElement(this.element, "pre-heading", "span");
-        checkNamedSlotElement(this.element, "heading", `span, ${headings}`);
-        checkNamedSlotElement(this.element, "subheading", "span");
-        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
+        checkNamedSlotElement(this.element, "heading", `span,${headings.join(",")}`);
+        // for subheadings h1 should not be used, hence slice(1)
+        checkNamedSlotElement(this.element, "subheading", `span, ${headings.slice(1).join(",")}`);
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings.join(","))) {
             this.hasHeadingSlotNative = true;
         }
-        if (this.hasSubHeadingSlot && getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings)) {
+        if (this.hasSubHeadingSlot && getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings.join(","))) {
             this.hasSubHeadingSlotNative = true;
         }
         this.refresh();
@@ -198,7 +199,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '1fbd9962c3489ee8b3c350e99fe0b7e99a0db6f2', role: "region", class: {
+        return (h("div", { key: 'fa35dbee8b994ef184ee7f14037be974a09331c2', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -213,20 +214,20 @@ export class DuetHero {
                 "duet-hero-content": this.variation === "content",
                 "duet-hero-gray-with-actions": !!this.processedActions,
                 "duet-hero-gray-with-back": !!this.processedBack,
-                "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
-                "duet-hero-left-align": this.leftAlign && !campaignOrSection,
+                "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
+                "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '1fc3163bd1a52e8289056313c08f4697e9e2b662', class: "background-area" }, h("div", { key: 'c21f6997d31c25133dca05d1a853f7d490e60052', class: "background-container" }, h("div", { key: 'ac7a43202885742dc98a535143954c97def0a855', class: "background" }, h("img", { key: '9574406eb8ed97f0decbca4def0bf7a94529679d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'd35128a5fa6f8a7f00e8df3940a4e347822aec04', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '226c7247fe08bd694da1d594d5d0efbce3cc99cb', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '47d1811c6af96ab9536f5da9ed053b7c71c2b303', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'abbdcbf247461ae489bea75984676f6c0010d0ff', class: { background: true, [this.layout]: true } }, h("div", { key: 'd684e7a5cb272d16b0bc53a12cda860a3304b7d7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '54d3e5d5fc433bb7ff51a5b2ab4653b11dd93789', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8f93ff6fa715b3218549aef0837da54722630e56', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '88f93fa6f5ebd24b51f30b1214821abbf249e50e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'd75f941bd6917dafe5dad64a5122b5058e09c4a7', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '7fbcde433ec34499af429a23038615f9d5b02849', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '5060f6dc479a54be7a91ee4f14bf133e95425514', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '22bea138a33fcceb6c25e01493300650f5060bc8', class: "background-area" }, h("div", { key: '1700e043bf84702aa49061b78e4f66f5e4ffd7ae', class: "background" }, h("div", { key: '2910c2fcb2d2a0f97814807cc00f0baafd092132', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '36edb6e5216814ff3820a0f6e0a51cfdf3f27bba', class: "brand-shape" }), h("div", { key: '68f10868f4fbfd2979e44f30ff065684b2e1762a', class: "brand-shaped-image" }, h("div", { key: 'c6d8b858f43531bbc4d2093df7d56dde145ff0ae', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'ef5bdd9d2fb65140dbe3b5842938aff51fe47c1e', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '0d0f813a8c87fc705f40d326cf04ca661b4e0345', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c85b5f23fcfb67a8853a895d6c34bade622c4bf4', class: "duet-hero-image-mask" }, h("div", { key: '9f96a6ee0d7dbe965c4d87cf9c6042ed371511fe', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '3f91277d921ba1e24d5d1d91d9be8eb0e721230a', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '04bebe7cf9a7861063df73b4b145e23024b2b357', class: "duet-hero-back" }, h("duet-button", { key: 'aa268558b148b77731c78c8a9552f5ec44f1fb99', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '05a01c2c503d74eddc8c596fc1d880639aaa5862', class: "background-area" }, h("div", { key: 'a6d159fe2a9ed0eb667d1db53089be54762b920e', class: "background-container" }, h("div", { key: 'f875de16cc5a0cc400a0ace3152ede4ae27bd5d5', class: "background" }, h("img", { key: 'bef8f024778718abcfa0f92f40117ffa28b1d0f7', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: '6cb813b93f709ecf11ea04f2782395c6a39670e4', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '12fa379acbfdb4cae24f8c51e3a790209fb0509a', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '9a080bab844fa201d634fa360c9b89e4f1c5a4fc', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '6d8d78c810ab12dbbb9f3c41214e0105da786bbc', class: { background: true, [this.layout]: true } }, h("div", { key: 'f6aa46f768812d5628df22f1431068e0b5933b74', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '13ada3b92d17cfa4f8254617388e2ade41e8fadf', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '1ce05345c82a79acea5583708f461e084897de4a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '62bdb4c78133848961eac8bef8b83d463f3e63d0', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'a720f43c7e685c051de7d2e61c9acc25afae1dbb', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: 'a8d2976ed3643db156452d547523a2fc841f3d0e', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'c38414fbb99e65b1f9c4a664a6e676a9f8b7025f', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'e5cdd2479783fcad7c1f97f1715e86b856b28a6f', class: "background-area" }, h("div", { key: 'b8f2c219770ce4b9e1fd77d588be1eb7163f5af8', class: "background" }, h("div", { key: 'c60a75e5d5716223833deac1252a69349be7130a', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'b8089d1d256c7651d46ddba3719865efa82443fc', class: "brand-shape" }), h("div", { key: '55fd2721160fa3b9ce006e1bbd6003adbda99a3a', class: "brand-shaped-image" }, h("div", { key: '5d710677ca730efb2602cf3af9fba5281a4f499e', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'f28d8fc889e31ac6bfdfbd9f981161520a0d51a8', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '7c202d74c190ba3a14fa25ec7f54ffeacf7291c8', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '454ba005b410efa34603628681e8b714d89a5665', class: "duet-hero-image-mask" }, h("div", { key: '7877477496c7dfa40734e43b35ab6526f1509830', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: '42ae141822152fe2d014713b47324b30f3472eed', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: 'b1762400833a30827acb6ec41b9916f109ddfb0b', class: "duet-hero-back" }, h("duet-button", { key: '1eedfa284e166efd92bb19955dc9805abe9e272d', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '1cc9b8391c6b969c49874c06c6cd8dfcfbec259c', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '4ff89423844a75b8297e5120796238a6e081f2e4', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '89a6e67512a31710e42bdaf18842e5f1e3d3196c', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '07977695a569298f04255bd459abef76a50d9b9b', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '4e142cb8344bf05edafa30facc7036014bb46f53', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '600e6a035d0449a6b8523dd72a5ff0c034a8524f', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'df3fab2c2877e3c7d87ffaf3095741447b66a6d4', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '3a32395112fb7b7171f5dd7106df32c878148778', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c8eac98c6f6720e21304abdc668d4b823d38de24', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '1ab6ba33bd362d329be7940d419d59ff91559283', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '1d17230b6fe08862a4572c9f3199f83ab0b7f5b5' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'c3fe5e8fcbf5a15479cc241e5a84633653842440', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'fa3ecd954954f891f21f519a317d675336ee4c1c', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '04a5ffacc49a0fa85947f3f480b2286c5b39e5c6', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '01eb5298baa073d78e8fa0ce33fc99368575ef5e', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'e76b43180f840efb71d90fb08fe70c863c4ed823', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '1d018e37fb570861415391084ebda9b811172d86', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: 'a8440dae00d85d43bd773362f69bd8650ae04754', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '6e2b10d8dbc216c0f6ab19a8067565e214eaf072', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '78e530df9740b183cf43eb4dafdfc5b32ca7c999', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '859a45212d18fb98d836ce4d7052644d38195d17', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '3e48b26a763819458bb4fb43261d367951eeb7ce', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: 'a6db74c909cba288f62bb02c2541fd5268a52ea8' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '9be975f3d542c4a87fb80fbda376778edcb5378e', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", Object.assign({ key: 'e0342b005149594372844914be95a65e39febd3f', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '7484f06d422af7427143c2d99cb97a1a79b895cc', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '031c374f9e451037685f935474bf73642d28cee8', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '7751d8263998d8164696ad5975c437b3dc305658', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,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-input/duet-input.js

@@ -182,13 +182,13 @@ export class DuetInput {
         this.language = getLanguage();
         this.isPasswordRevealed = undefined;
         this.isFocused = false;
+        this._accessiblePopup = undefined;
         this.accessibleActiveDescendant = undefined;
         this.accessibleAutocomplete = undefined;
         this.accessibleControls = undefined;
         this.accessibleOwns = undefined;
         this.accessibleExpanded = undefined;
         this.accessibleDescribedBy = "";
-        this.accessibleHasPopup = undefined;
         this.accessibleDetails = undefined;
         this.accessibleLabelledBy = undefined;
         this.accessibleDescription = undefined;
@@ -228,6 +228,24 @@ export class DuetInput {
         this.tooltip = "";
         this.tooltipDirection = "auto";
     }
+    /**
+     * @deprecated, use `accessiblePopup` property instead
+     */
+    get accessibleHasPopup() {
+        return this._accessiblePopup;
+    }
+    set accessibleHasPopup(value) {
+        this._accessiblePopup = value;
+    }
+    /**
+     * Indicates value of any popup element associated with the input.
+     */
+    get accessiblePopup() {
+        return this._accessiblePopup;
+    }
+    set accessiblePopup(value) {
+        this._accessiblePopup = value;
+    }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
     }
@@ -258,6 +276,12 @@ export class DuetInput {
     get validity() {
         return this.nativeInput.validity;
     }
+    /**
+     * @internal
+     */
+    get nativeInputElement() {
+        return this.nativeInput;
+    }
     /**
      * Component lifecycle events.
      */
@@ -601,6 +625,29 @@ export class DuetInput {
                 "defaultValue": "\"\""
             },
             "accessibleHasPopup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": ", use `accessiblePopup` property instead"
+                        }],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "attribute": "accessible-has-popup",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessiblePopup": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -614,9 +661,9 @@ export class DuetInput {
                     "tags": [],
                     "text": "Indicates value of any popup element associated with the input."
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "accessible-has-popup",
+                "getter": true,
+                "setter": true,
+                "attribute": "accessible-popup",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
@@ -1401,6 +1448,31 @@ export class DuetInput {
                 "getter": true,
                 "setter": false
             },
+            "nativeInputElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false
+            },
             "tooltip": {
                 "type": "string",
                 "mutable": false,
@@ -1453,7 +1525,8 @@ export class DuetInput {
         return {
             "language": {},
             "isPasswordRevealed": {},
-            "isFocused": {}
+            "isFocused": {},
+            "_accessiblePopup": {}
         };
     }
     static get events() {