@duetds/components 9.16.0 → 9.17.0

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

@@ -29,7 +29,7 @@ export class DuetFieldset {
         this.caption = undefined;
         this.label = undefined;
         this.compactLabel = false;
-        this.error = undefined;
+        this.error = "";
         this.accessibleLiveError = "polite";
         this.labelHeadingLevel = "span";
         this.labelHidden = false;
@@ -49,20 +49,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '083178e4b5c3ef208a7d20c1e29ccd67ae436a1e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '371ad27e2db160c7f6c4711a80ad237d8aa59b46', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '085872add879aa2539641db60895e26056cffb30', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b79f060711d6d53f69ac6382184135f2783c77c3', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '6de5ea55ae42baf9675b44f521736892ea4b8e35', id: this.labelId }, h(this.labelHeadingLevel, { key: '664e33dc98e540a2643f8cc3098e6f9a7d565090' }, this.label), this.caption && h("span", { key: '53689d2f323c13e68fc48e8fc4a641dd210c6761' }, this.caption)), h("div", { key: '3a03e91ea4d9603fc9f91f1edba19cb07f63b36f', class: {
+            } }, h("legend", { key: '6eaca9732b9ca890a8312a4af59f7dd1d74e07b1', id: this.labelId }, h(this.labelHeadingLevel, { key: '816155ad9c29b8b943046f423f782205f2403e8f' }, this.label), this.caption && h("span", { key: 'cc32301d0d6f48f0ef6a859a5eb90f99eb1c0b0a' }, this.caption)), h("div", { key: '17245e77617de950b665bf014b94d63ea6257fae', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'daa5af05aa9b131aa9cc56f1b6268cb4ea05d847', class: "duet-fieldset-label" }, h("span", { key: '87309ad8a81cae6cf99e7a2782c493f0de4fd73c', "aria-hidden": "true" }, this.label), h("slot", { key: 'f94b32bb98a136b08901468961f2df0018907e76', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '8d1d958991d27bada3452873155619968813aef4', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'eb614cbb4ce3ce64f5e42cb31dfd106002ec5d2d', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '8385bd2d465d37b3c01eade80dd800b6e0ff880c' }), h("span", { key: 'b22a8dca8b5bccde89451e2153c25d4006826057', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '9673648ce6bfd6d71f16870e62f4551f00a087df', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '83db4833b9a9341431753a01ae442fd12173b7bb', class: "duet-fieldset-label" }, h("span", { key: '8e2eb1435220ec854e1a7a1618d41a62c6e35d2d', "aria-hidden": "true" }, this.label), h("slot", { key: '8f6bb605648c327ffc22f7dcbeda52eadc23082c', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '99e6b5dc67cdd7346c13262d11d4f45a3df22367', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '40db2c10a0eb7e46c8771fa3006319b4e1a520f5', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'ba7045bd687589ee3fdfa64b6558a4c0af1800c6' }), h("span", { key: 'aaeac4a41a2717a52251426b97ca81c634902865', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '0c013b3f79f5163f07ae5952e4dc6fa347beb125', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }
@@ -208,7 +208,8 @@ export class DuetFieldset {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",

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

@@ -14,6 +14,12 @@ export class DuetGrid {
         this.mobile = "";
         this.gridTemplate = null;
     }
+    validateAlignment(newValue) {
+        if (newValue === "form_distribute") {
+            console.warn(`DuetGrid alignment value "form_distribute" is deprecated, replace with "form-distribute"`);
+            this.alignment = "form-distribute";
+        }
+    }
     /**
      * Private functions
      */
@@ -41,10 +47,15 @@ export class DuetGrid {
             this.childObserver.observe(this.element, { childList: true });
         }
         // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-        if (this.alignment === "form_distribute") {
+        if (this.alignment === "form-distribute") {
             if (!Build.isServer) {
                 this.formDistributeObserver = new MutationObserver(this.updateGridItemsWithInputFields.bind(this));
-                this.formDistributeObserver.observe(this.element, { subtree: true, childList: true, characterData: true });
+                this.formDistributeObserver.observe(this.element, {
+                    subtree: true,
+                    childList: true,
+                    characterData: true,
+                    attributeFilter: ["error"],
+                });
                 window.addEventListener("resize", this.debounceWindowResizeHandler);
             }
             this.updateGridItemsWithInputFields();
@@ -78,7 +89,7 @@ export class DuetGrid {
         });
     }
     async updateGridItemsWithInputFields() {
-        // Duet components that need to taken into account in form_distribute
+        // Duet components that need to taken into account in form-distribute
         const elementNames = [
             "duet-button",
             "duet-checkbox",
@@ -162,7 +173,7 @@ export class DuetGrid {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
-                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute", // flex-end
+                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form-distribute", // flex-end
                 "duet-grid-align-center": this.alignment === "center", // center
                 "duet-grid-align-stretch": this.alignment === "stretch", // stretch
                 "duet-grid-align-baseline": this.alignment === "baseline", // baseline
@@ -295,10 +306,10 @@ export class DuetGrid {
             },
             "alignment": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "DuetGridAlignment",
-                    "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form_distribute\" | \"stretch\" | \"top\"",
+                    "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form-distribute\" | \"form_distribute\" | \"stretch\" | \"top\"",
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
@@ -311,12 +322,12 @@ export class DuetGrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Adjusts the vertical alignment of the grid items, if set to \"form_distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors."
+                    "text": "Adjusts the vertical alignment of the grid items, if set to \"form-distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors. Value \"form_distribute\" is deprecated, use\n\"form-distribute\" for new development."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "alignment",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"top\""
             },
             "distribution": {
@@ -396,6 +407,9 @@ export class DuetGrid {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "alignment",
+                "methodName": "validateAlignment"
+            }, {
                 "propName": "responsive",
                 "methodName": "updateGridItems"
             }, {

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

@@ -284,6 +284,10 @@
     top: 310px;
   }
 }
+.duet-hero.duet-hero-campaign ::slotted(.duet-heading), .duet-hero.duet-hero-section ::slotted(.duet-heading) {
+  font-size: inherit !important;
+  color: inherit !important;
+}
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }

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

@@ -94,13 +94,20 @@ export class DuetHero {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        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");
+        checkNamedSlotElement(this.element, "heading", `span, ${headings}`);
         checkNamedSlotElement(this.element, "subheading", "span");
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
+            this.hasHeadingSlotNative = true;
+        }
+        if (this.hasSubHeadingSlot && getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings)) {
+            this.hasSubHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -184,7 +191,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '5f1fa623c6a8b5c570953498c17d38c046e3498c', role: "region", class: {
+        return (h("div", { key: '1a42c8fe01fb20e1a6cb255106032dc91c0781c0', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -202,17 +209,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '8637ec4d16c7f1812a236da0a65729de0aa02bf0', class: "background-area" }, h("div", { key: '84ecb8dbb4f31669f0201f335bfc63a5b5925013', class: "background-container" }, h("div", { key: '63741e44a0aba885f85084d6431a494dee5c45d1', class: "background" }, h("img", { key: '44e2ad8e6e7cb582a798ffbf70879fecad0539ef', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'ac6439114eb01ab9097150e9d086f1089661bebf', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '48ed3a655291d6d07a3d199f826acf2ff31d381a', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '4158e92200f1d5fa2dc571d459fcb5034b452f33', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'b012af078c50b844c385f0d930b6eb227d4beeda', class: { background: true, [this.layout]: true } }, h("div", { key: 'a426ac5178709305c9a2a85705791c33b66c0d20', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'e32c5d247e20d2928bf023295682306bc65c7983', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '09db46430fc3a149a4d7fa288ed8c17241b53346', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'ba02fad3d9ec74a7b0ee36b00b460343e2996fd4', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e889fe0998219fe8642eaf585fc4c1451b6c85fb', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '983fc9745edce8df229165b24036c1459bb1df2a', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: '5e06f744fee0a0c166a97cb831499682929b7154', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '6d4e7390da1e481e0f20f4c7a5cf7fef488d6943', class: "background-area" }, h("div", { key: 'bab5c4eef578dea9b8698d25dd9f440c173e83a3', class: "background" }, h("div", { key: '2aa38a32194f7f1aa2ac9677390f1853719306f4', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '4b9acab7cda8ed679c83efb0555c4c6fc772e650', class: "brand-shape" }), h("div", { key: '772c1f1ef0240210a191967a6bd7f4a4c7d8a70a', class: "brand-shaped-image" }, h("div", { key: 'c5fad3a16528dd772a7be0aa0792b05af6fc9af9', class: "brand-shaped-image-wrapper" }, h("div", { key: '609615bbd1452a9ff02b9bc5dbb7d529dbaeb9f4', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'edb60c1675ebf00914595a40f5984ece68a1b804', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '3b10a5bee636ab4e3ac4f03c000386a919c4b013', class: "duet-hero-image-mask" }, h("div", { key: 'f40bdc888d7a41ded8371b5b8ce222218bf8e812', class: "duet-hero-image-wrapper" }, h("div", { key: 'cae33c0bf93b3542ac85cf51e814474a62f49c9c', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '74d5377e83732f5862c2d90a59df55d4e16af8b1', class: "duet-hero-back" }, h("duet-button", { key: '62fcac914ad58fe6b213abc362e0f09f350d51eb', 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: '57acc6a7f9645ff7e6c276326ffff51325fa2d4a', class: "background-area" }, h("div", { key: '841e799d7a7f515ae81804f9814643bdc059aeab', class: "background-container" }, h("div", { key: 'b2ceb38b291695ee09ca1d8af674c3108373cd0a', class: "background" }, h("img", { key: 'a3dbb066b0a473467b3968f5bc6ba2ff3bc5fdcb', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '3cf5f570be50174dbf27d73676da4dfa11b501e3', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '87611a0c4e7b473a04c6a19f32b73a641279069c', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '85f72141a126387b5e99a78f64132dd4e2d42b0a', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '5a9a357048947507f0733d4e56d04e53e301b632', class: { background: true, [this.layout]: true } }, h("div", { key: 'b341539d0d282bb53f0f162046fa0d7e6e0295a7', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '77c79dfcc391dc1656e1c0581d52f8f88e03e84a', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '8aaf9cbfd9c5e26c65aa0a104df3962529319a1c', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '32ff4ebb447a7f348fb5639d7bb79f1362959c44', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'db6bf1a9fa08d881fece8ac1e667983893250782', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '5a457fda070ace0dba61014a8030110057147ddf', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'ca6999b4fca4165fba696ad2d6f2d5d7286e7735', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'b3bae8667fd012b3a6b480962e6e77ca72b86572', class: "background-area" }, h("div", { key: '58aec435b461102c8c24a97b409f2e820fe11292', class: "background" }, h("div", { key: '31a1abf658dabc4ce7213b8c9e959d0f89975a78', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '2421d09afcabbabc03c254aea2764d269b4f1c3c', class: "brand-shape" }), h("div", { key: 'c8fc67a5b678c63007b66f3b74f2e72de7d4bd4d', class: "brand-shaped-image" }, h("div", { key: 'c87f70958459675a9e4ee1e9f97b82af4ab23cf4', class: "brand-shaped-image-wrapper" }, h("div", { key: 'a29434e7acdaf5e94816a615bd5664dfce459e02', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '1e6792a7b46cbd6889593641cceed1e7fa6545be', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '5a4a0819a41e50bab74f25a6db76ee9a3dc322a8', class: "duet-hero-image-mask" }, h("div", { key: '019c3d85ac09a32989cd461509194453ecfbc1e5', class: "duet-hero-image-wrapper" }, h("div", { key: '61ff1f6a788a631f4ad166e6a3aba17736668627', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '53694382832db2ce4beb52cca2176384aa573e3a', class: "duet-hero-back" }, h("duet-button", { key: '5b946c6c31107a9d10292c0bccb01bfd0f1d9d41', 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: '96c2844b98d28305f7556af68dae30f7c08bd25b', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '5acbe0ac1c6dadc08b8b5e731581246e433a6c16', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'd6ec130b01755771812d74bfbb1296f5b6604599', 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: '72615e7711048a1f4d2c5a3283fd713739377efb', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'c64fc81d93adaa167b54a96aee7d1eca99215091', theme: this.theme, level: 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: '31b0694ec7c4a7f64b0724c301748d6c715656ac', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'f438a6495842925a2281bb2a2cad11e510f51bc0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'ff2d31d7b435f65b4cd244f9f9104c4590e216e7', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '6e299338982bf722a43cca37aaf6a3135947273c', 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: '3139d0bc79278f589e91f0ffa6c1ac32341bc89e', 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: '5f603e8a230a237a80052096a60a9a7940ffbb60' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '299c4226c3d269c2063902ed1fd0e9ee66600c8f', 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: 'f65b35a60499027f178bc1ffd29358c43a25fff5', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'b0357e61c545e38792e90376feace131901da422', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '8e08891d1f98c17a88421b49d4a8ba8b9d3ec005', 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: 'c5498af53feb8925d894ac6a1ddbe3861263e35e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '7c10ede17b3fac92934c2226e7300604887cc2c2', 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: '8c3ab823d74238e029a1390a099e070ac54f183c', 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: 'c0f51acedd4228682c78b214a6043e0b21b50c67', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'd08af51699647880a95eab719f08d83ee610d8d4', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'f841d8d7419c13a61a9a56872304a452a09545f6', 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: '90d2f58011c697921c96233d88b7d4770a2c2375', 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: 'f941fa7b351e3e0100959168f247323e1c8149ba' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '2d248f92700a3821930d14ee88822880f5d25e48', 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", { key: '868a7dfb4d12a20bd74202d4130483cf6d29bad1', class: "duet-hero-image", style: styles }), h("slot", { key: '6d54239cacd33dbba3512eb1419617000cd0db14', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '9a66e46b6a46f6127b2b2ce07aa7cec2410e0f6a', class: "duet-hero-image", style: styles }), h("slot", { key: '4eca0efe9a6fd469214735a604a80ee11e1ecd5f', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,6 +50,13 @@ input[type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
 
+input[type=time]::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+input[type=time]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
 duet-tooltip,
 ::slotted(duet-tooltip) {
   position: relative;

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

@@ -371,32 +371,32 @@ export class DuetInput {
         }
     }
     /**
-     * @internal
-     * Add a chip to the input
+     * Add a chip to the input. Property "chips" must be true.
      */
     async addChip(chip) {
+        if (!this.chips) {
+            console.error("The method addChips requires the property chips to be true");
+            return;
+        }
         const container = this.element.querySelector(".duet-input-relative");
         const input = container.querySelector("input:not(duet-chip input)");
         chip.id = createID("DuetInputChip");
         container.insertBefore(chip, input);
     }
     /**
-     * @internal
-     * Does the input have a chip with the given value and text
+     * Does the input have a chip with the given value and text.
      */
     async hasChip({ value, text }) {
         return this.getAllChips().some(chip => chip.value === value && chip.textContent === text);
     }
     /**
-     * @internal
-     * Get all chips from the input
+     * Get all chips from the input.
      */
     async getChips() {
         return this.getAllChips();
     }
     /**
-     * @internal
-     * Remove all chips from the input
+     * Remove all chips from the input.
      */
     async clearChips() {
         this.getAllChips().forEach(chip => chip.remove());
@@ -1019,11 +1019,8 @@ export class DuetInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Render a container for chips"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Render a container into which Duet Chip components can be added with the method \"addChip\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1112,7 +1109,7 @@ export class DuetInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
@@ -1649,11 +1646,8 @@ export class DuetInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Add a chip to the input"
-                        }]
+                    "text": "Add a chip to the input. Property \"chips\" must be true.",
+                    "tags": []
                 }
             },
             "hasChip": {
@@ -1673,11 +1667,8 @@ export class DuetInput {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Does the input have a chip with the given value and text"
-                        }]
+                    "text": "Does the input have a chip with the given value and text.",
+                    "tags": []
                 }
             },
             "getChips": {
@@ -1697,11 +1688,8 @@ export class DuetInput {
                     "return": "Promise<HTMLDuetChipElement[]>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Get all chips from the input"
-                        }]
+                    "text": "Get all chips from the input.",
+                    "tags": []
                 }
             },
             "clearChips": {
@@ -1717,11 +1705,8 @@ export class DuetInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Remove all chips from the input"
-                        }]
+                    "text": "Remove all chips from the input.",
+                    "tags": []
                 }
             }
         };

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

@@ -430,6 +430,12 @@ button {
   }
 }
 
+:host(.duet-theme-turva2) .duet-link.duet-theme-turva {
+  color: #b90329;
+}
+:host(.duet-theme-turva2) .duet-link.duet-theme-turva:hover {
+  color: #8c001e;
+}
 :host(.duet-theme-turva2) .duet-tab-to-link.duet-theme-turva {
   color: #172a3b;
 }

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

@@ -22,6 +22,10 @@
   appearance: none;
   position: relative;
   width: 100%;
+  pointer-events: none;
+}
+:host * {
+  pointer-events: auto;
 }
 
 .duet-menu-bar {

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

@@ -114,7 +114,7 @@ export class DuetModal {
             this.duetClose.emit();
             this.teleport.removeInertFromSiblings();
             if (this.focusElementOnClose !== "") {
-                setTimeout(() => {
+                setTimeout(async () => {
                     let focusEl = this.focusedElBeforeOpen;
                     if (typeof this.focusElementOnClose === "string") {
                         focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
@@ -122,6 +122,18 @@ export class DuetModal {
                     else {
                         focusEl = this.focusElementOnClose || focusEl;
                     }
+                    if (focusEl.tagName.toLowerCase() === "duet-popup-menu-item") {
+                        const menu = focusEl.closest("duet-popup-menu");
+                        const isOpen = await menu.isOpen();
+                        if (!isOpen && menu.controller) {
+                            if (typeof menu.controller === "string") {
+                                focusEl = document.getElementById(menu.controller);
+                            }
+                            else {
+                                focusEl = menu.controller;
+                            }
+                        }
+                    }
                     focusElement(focusEl);
                 }, TRANSITION_MS);
             }
@@ -267,14 +279,14 @@ export class DuetModal {
         var _a, _b;
         const iconColor = postfixTheme("primary", this.theme);
         const closeColor = postfixTheme("secondary", this.theme);
-        const closingButton = (h("div", { key: 'fb5c0560d2d55f75fdadd3685854d8058581f0c1', class: "duet-modal-close" }, h("duet-button", { key: '7e0adc47d278a98a9fade867f3a80a42529893b8', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        return (h("div", { key: '79df0c89cdf6ed24e73187dbbbaf993f6ff364a0', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const closingButton = (h("div", { key: 'cee464a60790470777e6a499800617fdeda46de2', class: "duet-modal-close" }, h("duet-button", { key: '6eadf084b0e3bdebf9ed9415f993767800a86693', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '569724872e61d206fbca2289a0a1d4b4beb651ca', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: '29059373fe236b590c7052273427485ede1e50a3', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '581e9c4bdf5177f81a55740bc2d30d5886f91f6e', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '631d58f62ee39029e3f410eaad94fc95efcfc4cb', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '8d52e7639d49138fb22c4256e53698a7ee6ecb0d', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -285,22 +297,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: '698ff3a4dcd7ae54ede5b10c222146dc334b9051', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
+            } }, h("div", { key: '9773dc0770a2d32e95b72571778d6b8863f0adbf', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: 'c8e5eb91cb6a35b981ce60b18e0ecb8a6e36adc9' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: 'e3a66f33581bd32351338f3c814272f11296af6c', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '1f51df35643d76720aadc11b98268076bd459cc4' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '5433702f6dad665e82628236206e35a0503c3095', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'c91e1c8caddd1006c3bf43456df9c6085b496270', class: "duet-modal-header" }, h("span", { key: '9523501ef4f262a94b187ebecfe7501053274294', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b7b971eb057c64f1283a30c9f810a55a2fc2eb44', name: "top" })), this.icon && h("duet-icon", { key: '6a09af4246def78037d1963a7cc1837b13e4ef91', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '60cff1e5eeb1be06cae4bee035d4a01d6842b339', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '69115fe8c73a0a9d861b50826d4d7884380c68fa', class: "duet-modal-spinner" }, h("duet-spinner", { key: '93dbd535f7da1e8c1445a53d2880670019a4af7f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '82cd6ae6caa7661516b33d15c6631d51fadf496f', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '579ba1b41caf40e97242aeacbf47ead29ea6aac7', class: "duet-modal-header" }, h("span", { key: '353ab4ce18f8cfaa384b7d1e02e5daf03895fc01', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'd1b1bd5e49db08393d62154e7a3524ea4bc5fc12', name: "top" })), this.icon && h("duet-icon", { key: '559c22da92b732cc829c9047bdc0c6b115058f32', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ffd1a28f6c1ec9a946b362f588e04350bab1dbd', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '2c9b370fbf07ff1804bb2bb8590593dae83cc629', class: "duet-modal-spinner" }, h("duet-spinner", { key: '77c91d8fef8f52c65b5565388343bf0021529c1f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '3d4aa27f79ea4483c783d8f00f29663f0ff8cf0b', "aria-live": this.variation === "loader"
                 ? "assertive"
                 : this.accessibleAnnounceChanges === "body"
                     ? "polite"
-                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '473e494d8e6d05199f2ae3be8dd684fa0e4fe884' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'c67bd34671197745eca7f15cc88c1d42b2e185c1' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -223,23 +223,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'b8cb97bc0d21e85be3db01ef83438fcf7b4b5923', class: {
+        return (h(Host, { key: '43c7f00abf7185b86616e0924f7bb633c94ddc50', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'd93b323c2643eac8e8c20914bbf67fe08d7bb117', class: {
+            } }, h("div", { key: 'd01b848421807a0fcedf6bfe0405f64fe303d574', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '943b19c37d249d61065e1a61efb7641a2abf3f38', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'c6cd56b231fdbe547f7ca92aea632eefa550f748', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '1141d203347bf35375928fa88e20cf47ba9c7140', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'e1634b690e6ac67235b4720571d0ea596ba7e414', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'b2d231bd277ea192e338aa42274665642bef854e', class: "duet-multiselect-wrapper" }, h("button", { key: '807718e802825096cbc1cef4597d8cd2f44ffd71', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'b33e295a375ecae8c1a0f59af9fa1ac0e3a3a829', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '1f835b434209839e7f47d9c87815987f96a6e30a', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '45b265df57cdc72a40695cd01fcf78c47dd5ddb1' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'dd061d5dda63d16eb39f113f78cd0c5b6b3e0158', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '759232c06c78ac2c73bddc2afad5f4fce57f6667', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '7a4d4b2de7f4baac9066570471fdae9fa2bead13', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: '2a456082e84d030ec1e672b499005ad13d5d3e63', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '55ad7b6b96d29db913f5d8205f0d7ede9d5ac5cc', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '0d46006a5dde7481d8a4b2d6ef831f91aa2e5002', name: "tooltip" }), this.caption && (h("duet-caption", { key: '137fda20ad2591ed86051191a9610e3892b52dbd', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '160193ec0197c4bcb67d280c579267baf5a49b46', class: "duet-multiselect-wrapper" }, h("button", { key: 'cfd7aad4536f022d25e781e751c59637144f076d', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: 'd8e491fa292d7ab221cd8ef9d0b867eec8c076e6', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '5e8f178232f7701dca9d80cca13ebd768a5e4c08', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'd0be305c434a170ad026185e1ac30f270ca464e5' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '5ae2f3b2f10fd11beced9b9565448074e5ba5c3f', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'baf833c16c6570098d20e7aba5baad4e4334fc94', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: '28453287bceb92b9acbe1166979217177087f866', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '69a2110105193b7a9b82c75ed856e6d8a9e8913e', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'ce760b620c954a99a9fe0fa65957d8601ad066c5', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '3901f1df01f58804fd5d76a83198b514fd0afdf9', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '9f1c878358d32c901107adee5e3cb2916ee5ac70', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'f887e043ab1065a5e7aaf97848ecb9342d804ce2', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '99bff420820acddc69743ce313bff86f929216db', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: 'cb7b91a522d2bf121f1f140298aea0c00920c24d', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '6070367e449abc5319b659fb95abb83fa0ee06e9' }, this.error)))));
+            })))))), h("span", { key: 'a35440b1574576d27d646befd1907ffc27d28a8c', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '3b2d16886d78642f00e34d0353eddd9aeec8d217' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -298,7 +298,7 @@ export class DuetMultiselect {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "accessibleLiveError": {

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

@@ -31,6 +31,10 @@
 .container {
   position: relative;
   z-index: 400;
+  pointer-events: none;
+}
+.container * {
+  pointer-events: auto;
 }
 
 ::slotted(*[slot=mobile]) {

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

@@ -947,7 +947,7 @@ export class DuetNumberInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "tooltip": {

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

@@ -40,7 +40,7 @@ export class DuetPageHeading {
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '47e1dbf1c820a033dbda5ab2947eb24579dd9b10', class: "background" }, this.theme === "turva" && h("div", { key: '287e0066733158363e3874a95817a762e809da1f', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f027b1ec25e9cdac8567c3ead047915886179621', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '8bf49eda00cde3160850bde060081207d43137b4', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '8c32dee388c499ec6bc26efe8bf82917f72539f4', class: "brand-shaped-icon" }, h("duet-icon", { key: '4d59ed320390cc69707e761c981ac471a6e7553b', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'd9673f6ff5e27fc94b0bc35ff1baed4d8a259f8f', class: "heading" }, h("slot", { key: 'f4d9a0248685888feba270f120dbeb90d10f8676', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '22299a624173a6f063208a63000d3c12d3dc359f' }, h("duet-spacer", { key: '2990a9baff0330d2b907498ec4e93ffcde8f4a1f', size: "large" }), h("div", { key: '9a8388421bfa02d17644fd935f88efdbf1bb39aa', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: '47e1dbf1c820a033dbda5ab2947eb24579dd9b10', class: "background" }, this.theme === "turva" && h("div", { key: '287e0066733158363e3874a95817a762e809da1f', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f027b1ec25e9cdac8567c3ead047915886179621', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '8bf49eda00cde3160850bde060081207d43137b4', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '8c32dee388c499ec6bc26efe8bf82917f72539f4', class: "brand-shaped-icon" }, h("duet-icon", { key: '4d59ed320390cc69707e761c981ac471a6e7553b', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'd9673f6ff5e27fc94b0bc35ff1baed4d8a259f8f', class: "heading" }, h("slot", { key: 'f4d9a0248685888feba270f120dbeb90d10f8676', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (h("div", { key: '6bc7886ae809c319e50005d6bc4ec44552c48256' }, h("duet-spacer", { key: '1792cc877c99c71d244b6180e9b95a0c1d79bf29', size: "large" }), h("div", { key: '2330bdd54dcf3eae2f7f34b97d81769da8138971', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,4 @@
+/* stylelint-disable scss/at-rule-no-unknown */
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -12,7 +13,7 @@
   width: 100%;
   margin: 8px 0 20px 0;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   :host {
     margin: 12px 0 28px 0;
   }
@@ -37,7 +38,7 @@
   padding: 16px;
   border-radius: 12px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-small {
     padding: 20px;
   }
@@ -45,7 +46,7 @@
 .duet-panel.padding-medium {
   padding: 20px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-medium {
     padding: 28px;
   }
@@ -53,7 +54,7 @@
 .duet-panel.padding-large {
   padding: 28px;
 }
-@media (min-width: 36em) {
+@container (width > 36em) {
   .duet-panel.padding-large {
     padding: 36px;
   }