@duetds/components 8.7.2 → 8.7.4

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

@@ -4,10 +4,10 @@
 import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, echoPlaceholder, caption, }) => {
+export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
     const { buttonLabel, selected, formatterLong } = i18n[language];
     return (h("div", { class: {
             "duet-theme-turva": theme === "turva",
             "duet-date-input": true,
-        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -156,6 +156,7 @@ export class DuetDatePicker {
         this.max = "";
         this.incrementYears = 10;
         this.validity = undefined;
+        this.accessibleLiveError = "polite";
     }
     updateValidity() {
         this.determineValidity(parseISODate(this.value));
@@ -341,7 +342,7 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { class: {
+        return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { class: "duet-date" }, h(DatePickerInput, { value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), h("div", { class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
@@ -910,6 +911,24 @@ export class DuetDatePicker {
                     "tags": [],
                     "text": "This offers information relating to the current validity of the component.\nIt follow as closely as possible the behaviour of the native date input.\nUseful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.\n**This property should be treated as read only**."
                 }
+            },
+            "accessibleLiveError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"off\" | \"polite\" | \"assertive\"",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+                },
+                "attribute": "accessible-live-error",
+                "reflect": false,
+                "defaultValue": "\"polite\""
             }
         };
     }

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

@@ -39,20 +39,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ef488d03d8ab5898306fb32e6a37e66422abe71e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'd9066fef1913a1bb7c1abc765891e0c671f10321', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '4b7d0d8326673fbc6e1e7c775e7fa4ee12d1bf33', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '24c00f00cb4bc4d9e765732e9aca337f8081e523', "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: '74fb853c07e685342be1e4dbed33f55e18b0139d', id: this.labelId }, h(this.labelHeadingLevel, { key: 'bb8637bad31e34aa017a8a8e7a94a22b726851c1' }, this.label), this.caption && h("span", { key: 'e7012969462972e0e19025d262e1b99b1339590b' }, this.caption)), h("div", { key: '81293e9d6b955e0d4d98c7e21adadf1aa653abdb', class: {
+            } }, h("legend", { key: '25cc5a4565627e7253cf51ddd8387242901e5291', id: this.labelId }, h(this.labelHeadingLevel, { key: 'b6fbd1a1aec1d5417c0402ca6e620989a214243d' }, this.label), this.caption && h("span", { key: '8f2d3a785504eff5b08dacdd91f7563ea8d23556' }, this.caption)), h("div", { key: '321ba668ccd5893bacfc4504144fe72afb9d7423', 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: '826e92ec6ea4979cfc5278b2b2e6d35b87beb402', class: "duet-fieldset-label" }, h("span", { key: '7c0d0a85e2e782c1fa82d82b14cdbd953ef5759a', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc0e388e3171f83b8f10042f781bd82d5b21b670', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '6a107b24bfdca3a356c122ad85c6e3b3232751c3', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '10f0e84529d98709ab33cbcca888d6be559a634a', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'c6ebf5a81d24b65a5e716e41434a931b25451b45' }), h("span", { key: '2296d9a54ef5a470002c5e841217741ce06e1216', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '25186afb78cdcff0737bb94ab25f48a8d7efc82c' }, this.error)))));
+            } }, h("div", { key: '829ebed3b5303fc9745a4188341bc0f3265ab43c', class: "duet-fieldset-label" }, h("span", { key: '8b510fdf1f3986a02a9c0bf8d68af86958d74d7c', "aria-hidden": "true" }, this.label), h("slot", { key: '7cb0efc0b6f5790887cd1d1f971738d0050d03fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '60587899d57d4c56f83f2cc0419eed5e5d74fbc9', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '503211941d2c58bb3b7b84c5c4dfa587b01f2ae5', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b37c634b0db76801085598ab9b9e2b06321448f3' }), h("span", { key: 'eb6c9de533eb068ef21e322df6d8e5f30ac75e07', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'ed99f6a92ade89c6e1f971dc4aa03985e3d87d57' }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,17 +106,17 @@ export class DuetFooter {
      * Always the last one in the class.
      */
     render() {
-        const text = getLocaleString(i18n);
+        const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '47a97afd2b5b3f5e7460bb2e1dfc11cb7a5a496e', class: {
+        return (h("footer", { key: '75ce11161efe6855a6a5b9ea3ac69f765607dc76', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c035ff684ed139032b909e424fef8f6e82cbcaab', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '6202afea0bca318f33db3260864c90762a5921e8', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '23c753fba06a5ed4b0de30765fce8e919e291f05', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'd7e9578069a59e30d214706e33de6956ffe2cf3a', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '677101a10fa913fc5e0415eb67971f98ca921182', class: "footer-top-logo" }, h("duet-logo", { key: '569f9db0deb4fef8b257f410a5e397a54803c5df', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '29c11549ecc793726ed94a741755308744bb5ced', class: "footer-top-right-container" }, h("slot", { key: '999fec8b73b976f2b31c50fee3d78e3579b8745e', name: "info" }), h("div", { key: 'ba4730fee1d26a06608505fe16da12840a536797', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: '8ad9d1ea07a57748f5ebdd059988938a21267931', class: "footer-top-logo" }, h("duet-logo", { key: '25ea3935ef88a5d3c1e42e9fdf64872588002a9e', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '2006d743a6ed3d7488253961c4340f66496823a4', class: "footer-top-right-container" }, h("slot", { key: 'd327dab130eabe791f9ae1018e5c4e9561ff565b', name: "info" }), h("div", { key: 'ad543c47ee44aec916299a4bd621fbdfb8b926bb', class: "footer-top-items" }, this.processedItems &&
             this.processedItems.map((item, index) => {
                 var _a, _b, _c, _d, _e, _f;
                 return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
@@ -126,7 +126,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: 'f17cf15b23236336833cfcab6d0f646c64b6e89e', name: "extra" }), h("p", { key: '93dcb5735b5101fcbd9d3ac4d4ee5d90d74fcb50', class: "duet-footer-menu", part: "menu" }, h("span", { key: '8112f2bc797cfa3cb445eb458427230348980373', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '2dcda626564785607ae4ec642a2e01b8b5337ed8', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '8f700b3e37d3e19d3b4605c194d051f9ec6a8f79' }, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '532cf4e87f7ebb8ad68dfe12aabd12cceb7d1881', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '290581e40b6f214b20375b6aaa687ef30d2f8277', name: "extra" }), h("p", { key: '9ed4238b3f37a84cc206e43f67b0c72fea3810ab', class: "duet-footer-menu", part: "menu" }, h("span", { key: '388d43bba3aef1e0a88f65a2416217c6d76a236a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'e7f66b6f310a9770ae74eb507f09824c8c3fff1c', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'f5e52871d8d27400126ee19b4720a45598d561cf' }, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: 'f8bd86bfb9707786b07f5e49ac957a0c0f3c0380', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,11 +97,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: 'a3593df5452b917ea5ef9564818dc2fecb2f0534', class: {
+        return (h(Host, { key: '56b942a1ac469f7ccd921c88b0824a31f43192f7', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: 'f4e2d26101ca844b17c7bde3925de8ae98683763', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '0c151b14def0111c53d55b2af24a8484211dfc8a', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -110,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '21ed486b7bd353958a0a6971a442a3e4b0d804db', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '971aea6375e7dda9fbef44d886a032c9214e09a5', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,10 +144,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: '6027d8a11fbed60c56a8e92444b240eddad70ead', class: {
+        return (h(Host, { key: 'e36e1eeaa70e3b27fdd7bedc29d5cc1eefd6bee4', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: '9e8ab76a22b1f410e4a443a7e58780ed748bc188', href: this.url, class: {
+            } }, h(Tag, { key: '67c80605b613db0d14289361318d4bfe090beca6', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,

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

@@ -16,14 +16,14 @@ export class DuetListItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9f02a32dfda740d8fd038119f27225599588fd97', class: {
+        return (h(Host, { key: '0df4c6498653a7f20f8ac8d21f1044cd5ffd509b', class: {
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
                 "duet-list-item-breakpoint-small": this.breakpoint === "small",
                 "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
                 "duet-list-item-breakpoint-large": this.breakpoint === "large",
                 "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
-            } }, h("dt", { key: 'c057075af0ff47f791c6f6300c70ed2a9f67175b' }, h("slot", { key: '19911d9d22137c269051f911be56d1921f9cea72', name: "label" })), h("dd", { key: '80e6d9589f19c8205f50ddd613e7dbcd1ecc2b4e' }, h("slot", { key: 'a2a02ff0eb23f44763b99336dc85ff076cd550a4', name: "value" }))));
+            } }, h("dt", { key: 'dc9ead4dada3ad614b7099be0e86d80e05971257' }, h("slot", { key: '48f7393a2af77be1e716dbb617de3951d5bfae8c', name: "label" })), h("dd", { key: '571e2c23a8de7facceb48bf8bf2924f34e7a9505' }, h("slot", { key: '2b5f6420744bbac07db85a58d9b3524f86b51549', name: "value" }))));
     }
     static get is() { return "duet-list-item"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -38,10 +38,10 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e9ff5fdc9c677062662a1a11d59f2da1e2bfff26', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '96938596966833c0e5260b0fc3f7e00a4d2d9886', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: '2d7d290b93ece34e74dbecb9b7d30a3a899b37b0', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '99cb1fbd3aab73f4c75484ee7755c00fdf521965', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '211b9373f51f8e927fced27e95b74d2328ac0188', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'abe25a1f98b6a0a072fd51e6dc29af8740311a02' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '811e8d68347707cf1011a541db3e857ec947e8d4', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '543ce298b12035fd8ebe69dfa5ca25f4c431a277' }))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -54,17 +54,17 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7b666e1b5e5e5e3b75855ca9b709eed1796a32a4', role: "listitem" }, h("div", { key: 'a385cebde1d61ec3fa612308ea4931e377c0bcb0', class: {
+        return (h(Host, { key: 'f7cb616fbeb0e89cd04e89f7a19b73e4f6305b57', role: "listitem" }, h("div", { key: 'a3f4701b11e9317377629b5fe2148530dab3c0a7', class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
-            } }, h("button", { key: '2b7716617decf49c99a67165f613a635687b11b1', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '928feac0a153bab46435694b95f4b0cbb2930874', ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'be1b090617c5e912ff7b22fcf02fc9f3c6baa02d', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'b138f9150e6e212978dac85aeb16350b631643a7', class: "label" }, h("slot", { key: 'ad8408f7841203878ed849524ee9219f8bf68f66', name: "label" }), h("duet-icon", { key: '020ff46e4b9aedc81de9a6b2868ebb8fbd417da6', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '47c1f7b100b73064dca1cdd964d97d070e5704db', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '7bd089cdec793c5853d3a2fb50c3f5c4ba579a4a', class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'baf4943655e0fd4ec680eec5ecf523828ddb2584', class: "label" }, h("slot", { key: '726942f2da202ad37393a7979a5ee49d3c830561', name: "label" }), h("duet-icon", { key: '68c1eb71b7c4112ebc3ea30d62324c7c1b0aea4e', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '0f1c939e3cc1b537f176ca076a2e20bc38f804d7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '120401394abf2260aebc4ce41c28ddcd82c171ce' })))));
+            } }, h("slot", { key: '62b2f301e57348d2308017ceaff0f22b8858eaef' })))));
     }
     static get is() { return "duet-menu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -40,11 +40,11 @@ export class DuetMenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e9d92b5322f59dc27d352ea47d73b8163f959750' }, h("a", { key: '93f48d001c0b6b744747d8f9bd59b8a14c8df74d', class: {
+        return (h(Host, { key: 'f7702f6502c6ec2bed8ef4d87146a6523456a5e4' }, h("a", { key: '5923a9d404aaa1b183edef94c7f66e305a0d4a46', class: {
                 "duet-menu-bar-dropdown-link": true,
                 [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2b231c97a41a7ed719a83d89a62eefc23e22c3ec', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '3f7c75809558580625c4ecce4bbe142ca99d51e4' }))));
+            }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '29ac748920ac962f47fd43548ccdedb42b8517e1', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", { key: '6e1f0d21b27a696c4bc2ba6369d884e7acc77db4' }))));
     }
     static get is() { return "duet-menu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,11 +32,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: '6c9c94e3afe239db2ad4ac9743ace782d4ec84ff', role: "listitem" }, h(TagName, { key: 'a0407b920548f68a68b0c96cc03bb03966a242b2', ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'a8d19e16b23cd70c744f29a603093db8846d522d', role: "listitem" }, h(TagName, { key: '84e76a7bc574e20f77c1e8a09531e40c80d3d7f1', ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '0c21edde98126006acb41edcf4288575691a487c', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '1945f308d808a5bc38c0ed607e5d7d70ff44ac6d' }), this.trailingIcon && (h("duet-icon", { key: '703e85cd9ac06d465e7df8e832518bb4f65177ad', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { key: '4a80b815a0d9ee32e7ab84210bfd0f004a754bd6', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '334e9b3d14cf86e8b3757f34953b047219b23a98' }), this.trailingIcon && (h("duet-icon", { key: '8faee80d1e563ad7abca96c635f193a203ae44c2', class: {
                 "trailing-icon": true,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,

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

@@ -22,11 +22,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2f893204e6787a355ce661f5cb2d6bfe6e56bcc8', role: "listitem" }, h("a", { key: 'deffe377753abdde9fb1fa65840a0b389e9eef35', class: {
+        return (h(Host, { key: '094d7e86967446a1b42ad3c0bd117815807d119c', role: "listitem" }, h("a", { key: '0b7f1206828ff009f5470b77f6bfbf35cea8a096', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '2b104a8857071c4c4a896141dc29717cb3eae517', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '627b9f6fd8dd467905acc1eb896162ddfb21877a' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '38082080f6bc0ac1ba5bb01a007424ed85c681ad', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'c1b71a2b6af96adb50d6b47daaff277e4d369527' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3b2496f7806deb24c2b91c846174bd64f2e3fc53' }, h("div", { key: '9d17932300f5f1cbc6dd5b9120dccb46e36c32b3', class: "container" }, h("slot", { key: 'ebc5a9923ac3e3b441dccc87d80b588810b44717' }), h("slot", { key: '8ee01c4edc73f0ba261fff423c6dadc7eeb67251', name: "mobile" }), h("slot", { key: '87dbeff01ad24c1a4aefd824f2cc64413ec0faa9', name: "desktop" }))));
+        return (h(Host, { key: '9a0c3b353b5d18b60eaef2baf47a0b862216472b' }, h("div", { key: '8e5cbd87881f498c82ab93c4047b87e6129c20d4', class: "container" }, h("slot", { key: 'ff7f551d2833d0d4fe53c335694d973c02d5bc40' }), h("slot", { key: 'd33c124ed54d4897ebd773650e1eacbb8bb9c1d8', name: "mobile" }), h("slot", { key: 'c8423dcbb9873fd7fa4b6e6d7af566c0c7ea3e6b', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,11 +43,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '7b66b4910e2ebb20f4d2c4119802079a7164664b', role: "listitem", class: {
+        return (h("div", { key: '31926a96290eaa70a332805dc930bab97aa91ee2', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'bb98a609af0b145e942bf81e5619ab9c7ac2e36b', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: 'b3ce8b478aa6af7288eccefbfc2e20e420adf15f', class: "duet-notification-container" }, h("div", { key: '6d389da1924357921cea153915fdc91d2a45a077', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '94c0c8ebf2c63303cea7dedb4cc5a8c57e102a31', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'e31f704d6fbd9e4fcf19a3dfa164201f449411ca' }, this.accessibleLabelUnread, ":")))), h("div", { key: '41c760598dd9822c309d3eb31f29887344e079ed', class: "duet-notification-content" }, h("slot", { key: '512e4c2c39e507a972ce0b6181037976b4bb97f4' })), h("div", { key: 'be179c4fcb84d2e34cf19581655402d2e47b334a', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '14e0e4e81c9d231084e314a981304362de7758be', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '123fd56a88e760764c221f99d5a092f6f86c53c4', class: "duet-notification-container" }, h("div", { key: '9c5ba90262fae4edc38fbb51cf615cfcf1f7b1fb', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '28988c4eae8aff0ba8beea8ea0ff59836d2c1010', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '8625af9a335b53772307bc39c487bfa204ad7fef' }, this.accessibleLabelUnread, ":")))), h("div", { key: 'c4e97807e5b766fe36cfdfe01f54e102a827de33', class: "duet-notification-content" }, h("slot", { key: 'b6f2f399ba2d3b6016560ea8d45996bea0de10b1' })), h("div", { key: 'a546eca5e3f2b25723040fe49ce6330a452a55a8', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,12 +23,12 @@ export class DuetPageHeading {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'c05188694590ea8a9c653f053cea7d86b9441dad', class: {
+        return (h("div", { key: '9a346b268bb3820e5c79d76269fb5c413944661e', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [this.layout]: true,
-            } }, h("div", { key: 'd3da67130f0f7ee74fc891684a67d57ea4ad1375', class: "background" }, this.theme === "turva" && h("div", { key: '0e0ee3121845a3105a11bd6e62ccd46cdad76895', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '5865db263e8def8f48b0c76cb7d21efd1310a1c3', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '414ce8b1f41c0442303fec947cddcac7278a5835', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'eab5850133193f37c1aeee8a5e63b126a6fe4dea', class: "brand-shaped-icon" }, h("duet-icon", { key: 'd4ce35c725812665c47371b266a0c97a00585b41', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '56ea19496b230ef4e9b05285f3c931c494f77d7a', class: "heading" }, h("slot", { key: '3da25ec3e7f55b94993048ce3a30dea944972ef2', name: "heading" }))));
+            } }, h("div", { key: 'b177f432a795af434c7f40cf3e284bca548a2b80', class: "background" }, this.theme === "turva" && h("div", { key: '9215c53675f84ff571474af2024d1f6947e29567', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'cbbea6d65b3986f9e43bb75bf2802f7ce8e084b4', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: 'd1d7d38dd810028e3e8f1f63827803983c7f56a2', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '07c767fa56d088367b4c9b52ce507c328be20e3f', class: "brand-shaped-icon" }, h("duet-icon", { key: 'b224ae5b9b2dc1ea219d54dfb5f6fb830f0e0557', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '24bad9ec98a8d14773f43d2218da6c9ae6227d56', class: "heading" }, h("slot", { key: '34d1eedc45a21089b9b3ca71634373285e83b8ba', name: "heading" }))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { createID } from "../../utils/create-id";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-paragraph - piercing selector for styling the paragraph
  */
 export class DuetParagraph {
     constructor() {
+        this.id = createID("duet-paragraph");
         this.theme = "";
         this.margin = "auto";
         this.size = "medium";
@@ -28,7 +30,9 @@ export class DuetParagraph {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h("p", { key: 'ffa70aecad7c7e0c2fff900310ba0dd9a11be1d1', class: {
+        // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
+        // are not announced when placed inside duet-modal
+        return (h(Host, { key: 'c7b5b351b124c27505e15e2299a6a4d5772fe8d5', "aria-describedby": this.id }, h("p", { key: '5d22488efc06c58bf883e6b450388e18c41a1f1d', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -36,7 +40,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '9701deb7163c1b6aad4d18b690f01aea8d6a162e' })));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: '1cf4198632e008eadea9b0d3bdf6f33cd66b7007' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, { key: '6117171a46a997c303162325d0b92af293a3a5c9', role: this.accessibleRole }, h(TagName, { key: '24ef77094f37e7afcc91b445a6e5c58b82ed379e', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '268d7aa84d1688afe8c5e3646dd7c5619166634d', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '25c35efb455d04d71b66c8766cf375d4ba9869a8', class: "duet-popup-menu-item-label" }, h("slot", { key: '228661a99b2f825c5563bc1779689cc352fd728b' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '6718babaa66231e6914d33bbef66810bb0f46db2', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '0d7fffcfc385c0c11045390120f1fcd9f6a4bf67', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, { key: '80b018046d69005fdb9011144b2de9fd3adc731b', role: this.accessibleRole }, h(TagName, { key: 'a7b5c05a5fb1b7b6999eb9a32418ac2f255980c8', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'beaef9eece706f94f8e9b5a5e1bd69bb1764e979', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '43bf3e1bd920656c855169445b45ed5cfbdae448', class: "duet-popup-menu-item-label" }, h("slot", { key: '3503f15d4cf7e9bd7b966a4dcb08f75c0a9d3c7b' })), (this.trailingIcon || this.active) && (h("duet-icon", { key: '259b2cfe7a3f190672a053051e83152a1fcda298', name: this.active ? "messaging-checked-small" : this.trailingIcon, size: this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'facbf7915ac26f2258689873544f3cebcda6bdb8', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,12 +53,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: 'dd179e38966112c037a1a97bf8a2e158915e5bf2', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '904758e37acfcb134dcb8a85937c6959930773de', class: {
+        return (h(Host, { key: '1fceac86194cde8be8411df802fce3cbc32c2a33', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'a2972cefc7eda90ddb8d3cec9ffc47bce867b819', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'ce81250935a84ea5a126443cb21ffb6eb65ae078', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'f3ba86ae2af7b012879d54c15b57a6c58926431a', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a7035d2e3aeed02908acc329ac4dbca0f7b3d044', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'b7455d6f02facdd6b75f5cb0e8a2f045480027d3', class: "pre-heading" }, h("slot", { key: 'bf56763d2469a30a790e150e9553573cf931bfbd', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '69b837dc53ebcdad4a3be557ea21ffdc5dab34e8', class: "heading" }, h("duet-heading", { key: '20090fa0c42004ae0e0b67253b0382c53d1621ca', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '45d5069071ee05529e70fd3dd1c6671f926c4048' }, h("slot", { key: 'ba5349565ba963ee7a3c9ea0fafca05c1c6b1f66', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '9cec68f2befb06183a118b3b7474258ebfb64ef5', class: "description" }, h("duet-paragraph", { key: '1fbb4c62a657cbc7aa743e7434a8454aa900cf97', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '4337ddb5fc7a59313c054862208f012135890cda' }, h("slot", { key: '9e248444c7c071156e2502343d79e98b874d9484', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'debf6f99e39d7020982dbac8f0f130d99b8fcd63', class: "action" }, h("slot", { key: '836e7a342d3b8b44e4ce5958a516d16755bc081c', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '884ba6e7c8e1e3d8327d28379f7b3592712e459d', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'd97956583131c433fed96a5c5c78e48aea7dcf4d', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'ffd8ae45e80d9f814aefce601c9075ea14005565', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: 'bd86de82e0bee45cfd934dffabf7151b96b12d0f', class: "pre-heading" }, h("slot", { key: 'f49fbc6582907f002cdc221b56915a488ba27654', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'bf88ef5d8a33217e0e427e449aaaddf56bc02f29', class: "heading" }, h("duet-heading", { key: 'e8246c04add20ee8a57965cbf32ab424c89894bb', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '9e44ed8a8a7386a781079d9ec3b6cf659255f084' }, h("slot", { key: 'ee0c8afd853efe649344773b4aea80de4dfb4261', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '3435dfbb988b1e51b1d4959bf41b0ebad7e16391', class: "description" }, h("duet-paragraph", { key: 'c9bccbc795307d0aa76fe39573ff66d2ea8dfb26', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: '690b619959b022276253ac3a9901a87e40cf2aaa' }, h("slot", { key: '5a992285eb1bea7f4db6def451463a64bb343880', name: "description" }))))), this.hasActionSlot && (h("div", { key: 'f521fc1887fcb6665d9eab6109cae350267c2629', class: "action" }, h("slot", { key: '348d9093056a98d29ff0114a14faf6dac749bee3', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -169,10 +169,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '111693be22f93e2ca3e4850484ae8121ee67dd56', class: {
+        return (h("div", { key: 'a92935b56e004e75b82f986000bcf1c3afaf24b2', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '9497c2ddcc19d707e8db8064178b20d9d590ba5d', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '0f99efec9db613dcb7fe9a1e512f321e5757946f', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'a517133428ccb97769aa5e3ae906babd2e012932', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: 'ff6e79d20675537cbff69b230b1faf1562c42c82', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: '16cf1ae00638198cdbd2741aa42e65efbc7a3ab9', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'b0fc37262024f452d9ff863080ce0901fb3fb3a8', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@
   position: relative;
   top: -50px;
   left: 20px;
-  z-index: 950;
+  z-index: 250;
   display: block;
   width: 30px;
   height: 100%;
@@ -51,7 +51,7 @@
   position: relative;
   top: -50px;
   right: 15px;
-  z-index: 950;
+  z-index: 250;
   display: block;
   width: 30px;
   height: 100%;

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

@@ -165,36 +165,36 @@ export class DuetScrollable {
     render() {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
         const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
-        return (h(Host, { key: '4fcbcaecb236d22e3d81a6d2269dcb564aeee649', class: {
+        return (h(Host, { key: 'd2a5c93f74aaa92cc0aa19cdb35e74ca27281ca7', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'dfe6ad7c7d152f899bddbca6f8ae4564abc65f66', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '18ea6bdd338875b7f370ac371485fecdc7acc995', class: {
                 collapse: true,
                 hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
-            } }, h("duet-button", { key: '3402503fbbcc184c193518fdbc60bb2118c038cb', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '40cce68dae00f3724cabbd691f665b72fc39f193', name: "collapse-button-label" })))), h("div", { key: '181cc8c335be1c8a5cb5bbb0992650d0401aa60f', class: {
+            } }, h("duet-button", { key: '528c8c0897ce763b151fd8b06f4cd27c4f373f2b', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'ef0fa7be803670d02ad13065de2b5a9db3b339a9', name: "collapse-button-label" })))), h("div", { key: 'b16641f5551eee2784f12e6cead15e8115317479', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, h("div", { key: '1f639ddf0e5818d4b14d5b5d677fd70021150732', class: {
+            } }, h("div", { key: '56469a25557b2882adf346eeef65b7adf959ebfb', class: {
                 "duet-scrollable-button-container": true,
                 left: true,
                 "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { key: '39dbfb43d7048347804b5d35a2a174cc0dc38070', part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+            } }, h("button", { key: 'e660b966d92f5eb9b1f83496fead98eef7b4bea7', part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
-            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '9a183412d07974d452858ab9d7e4f3fa1e1ca239', color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { key: '6befc01423321a62ebb54e54edc9f3734d435887', class: {
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: 'e6b03d5aef9b71b25707fa3fa9c3f4bb9176785f', color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { key: 'ef1381e95f5ce2c7df85f5d7ab27dd0993cddea5', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'b857a63d05c43c84d58b66847835b14adea92671' })), h("div", { key: 'dff2e6af23b3201d89433c110189c72cded05227', class: {
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'a7dcef6d0d3564efeb18447f50f8180b0ea3a086' })), h("div", { key: 'ae1e68000832159e3ff81f6314b9e14a23608a4b', class: {
                 "duet-scrollable-button-container": true,
                 right: true,
                 "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { key: 'ec0e6149990950c3f9f92597af6123b8bc1aa903', part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+            } }, h("button", { key: '24ff6945ae349ff90e49fb689fb267aa91f65685', part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
-            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: 'c234e9218a01017220da205292d69fd20ce2985f', color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '7384c2cfcde3ebcb8bf34ca313e70f5b79967cb0', color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -13,13 +13,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f5c45c26ed1d22d93699ed794836c0946a846b90', class: {
+        return (h(Host, { key: '6bc98c1f8cfba7788c3cf6a683537c4e20983623', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '9d567d59d6d1762ca63e359e56cedf5fa9b264a6', class: {
+            } }, h("div", { key: '75b0a33d0868bcc5511f7bc7efd6ccdd79c15568', class: {
                 "duet-layout": true,
                 "duet-m-0": this.margin === "none",
-            } }, h("section", { key: '20de320e97dd1c56727d90166fa750cf45588eb2', class: "duet-main" }, h("slot", { key: 'd78061d48e1b8480ee184297e09aa346e5f94ecc' })))));
+            } }, h("section", { key: '2df1a07f8ac3f2a90bb0d88032436ce4ad6c6a3d', class: "duet-main" }, h("slot", { key: 'b1d6048841e748393c122746191a85b6df6e4c69' })))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '8ead01568c296258869626437f5216e403e31583', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '1cb0e51d54e12692aa3675ffd0e971ea7a268fb4', class: {
+        return (h(Host, { key: 'cd0b0f6d908af8e5c1788f66c005af3d54ec8686', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'ab56ab6af75d0a182f5a02ead485ffc9f4205ea4', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: 'aab0e0ee894d1fac79d13fb3c733b89b849e8b4e', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '4f53551cbf381bc3a2ec3986f42442c8e099c9fe', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '7933b45865574df0185d2ee4913cba4744215d87', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '5ad7e042965e34bc68d5e6f277a4f222590e83cc', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -90,12 +90,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '2cd3a66448b7881b67531aa4430f8e43861fa9fd' }, h("div", { key: '17a15de8f5f025b64c1cfd98e8917d67f569277f', class: {
+        return (h(Host, { key: '6b46f3f0eab6ba2fdce84a8c418e9b923dc9a3e5' }, h("div", { key: '15dd7aa5362e312a7fa8fa0b40ed2f7f66d48232', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'e23d42bf6e56b2def82bbf56f7dcb5dd7451b318', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '5a38ad325305548cf5eb56496a011c02ae6fdea1', class: { "slotted-content": true } }, h("slot", { key: '28accb673aa7cc76b4b863e28af8a6eaeb10310d' }))), h("duet-button", { key: 'e035788f95d720cd37d0f3aa458f36d4e5f341da', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, this.open ? this.showLessLabel : this.showMoreLabel))));
+            } }, h("div", { key: '854b6230d37ba521eee564e95775aa8f36c230c2', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '659074cc474a92c398cbb11851d0a41a34ffa55a', class: { "slotted-content": true } }, h("slot", { key: 'bded5897ef3f9953b537dbfc6821fd87d34cfc6a' }))), h("duet-button", { key: '37931074ecf3bfb158c08dfd878a0d9718c72968', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, this.open ? this.showLessLabel : this.showMoreLabel))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }