@duetds/components 10.0.0-alpha.27 → 10.0.0-alpha.29

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { hasSlot } from "../../utils/slot-utils";
+import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
@@ -116,10 +116,19 @@ export class DuetCollapsible {
             if (this.accessibleLabel) {
                 return this.accessibleLabel;
             }
-            if (this.heading && this.caption) {
-                return `${this.heading}. ${this.caption}`;
+            const labelParts = [];
+            if (this.heading) {
+                labelParts.push(this.heading);
             }
-            return this.heading || null;
+            if (this.hasAfterHeading) {
+                labelParts.push(getElementsFromNamedSlot(this.element, "after-heading")
+                    .map(e => e.textContent.trim())
+                    .join(", "));
+            }
+            if (this.caption) {
+                labelParts.push(this.caption);
+            }
+            return labelParts.join(". ");
         };
         this.handleClick = (e) => {
             e.preventDefault();
@@ -159,7 +168,7 @@ export class DuetCollapsible {
      */
     render() {
         const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: 'c9d5a712bfb5b37c276871acd49f1f427115123c', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '66b546314cf88918517dac44746c8cd01f600777' }, h("button", { key: '42d5229a2e076b434f18414c83c86b2000923a5b', class: {
+        return (h(Host, { key: '4c35285a6b1bb57e8a4b9606a6f30df1d17d700d', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '10373d162861548e8bf0e6a6ec48cc9e6feada66' }, h("button", { key: 'f2a7de72d427282d7344fa887eae3ec9d1108598', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
@@ -167,7 +176,7 @@ export class DuetCollapsible {
                 "has-after-heading": this.hasAfterHeading,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '2ea194820ac005ad8b7764d11b157f2852f508f1', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '8858a6837ac03c2c7ca3d6d0710073a1ad3c1cf9', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '5f369d914ae01a0f79667e4ae2d50355bbf04e43', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: 'edd61cefab1acfa7a8b11cacb611521c49821f4b', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'afa02200acd4f871aaaa2b6b351af15c195f14b4', part: "duet-collapsible-after-heading" }, h("slot", { key: '7c07f36202471bfad63252268d336c18d71ac88d', name: "after-heading" })))), this.caption && (h("div", { key: '595b23e11232e4f90f973b88459231dfec2e0dbc', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '7cc446a7c23a2b6a044e256e18d5e1fbf14f4de2', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'cd2888df0b2d63a3787e678c4fec6e7698b1cb0b', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '643e40fc94d87cce2769b7930bd83514cb0b3d6f' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c14f682e6f885865d5261150ce734ed7da7ecbca', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '68a1f424f6a8acb4851ec5847b847a39386a9c2d', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '06679c60e3aee0f6c6230ab00d85910cf06073c0', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '2514a96bfde0da2606ebe29e31170408dc4bd004', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '16129fc66c34f9a107aa21c64c2af5ef4e8345c9', part: "duet-collapsible-after-heading" }, h("slot", { key: '952802b3fad8ea858438be89acd628e758bab39f', name: "after-heading" })))), this.caption && (h("div", { key: '365284fa408a990dc24d00e8701da4ac8b54fac3', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '31f4325613bd800ad627d614e00705323d9d5049', size: "small", margin: "none" }, this.caption))))), h("div", { key: '3472e80b23745a5deb2a186f8670873ad74628a8', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '09bab3ef3b7b7ee8015e79723f3c28095663883a' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -480,13 +480,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '19c0a0a7ca3a67641f2e2fd47b1f66ef3942be00', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '4c0294d785d5fbfc00d0b19369c365e03ec540a1', class: "duet-date" }, h(DatePickerInput, { key: '33285b02172cd08e881bbdb2fca5624b5a99f8cb', hasFocus: this.inputHasFocus, 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 || (!this.disableBuiltInErrors && this.internalValidityError) || null, 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", { key: '2c9407fdc22f7f3f9345bf342d606483806cf0e6', class: {
+        return (h(Host, { key: '37f45a71c4032ac634736a6920fb025734c3bbe2', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '61c829b503df044c1b67f460b7dacd7398078cba', class: "duet-date" }, h(DatePickerInput, { key: '8a04908b051939c5c8eb85cf7efdeac0d3a21d6c', hasFocus: this.inputHasFocus, 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 || (!this.disableBuiltInErrors && this.internalValidityError) || null, 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", { key: 'acd43f63f5682534c6bf78625fe43c6c86a46dc0', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: 'acfc613bbfb189023c734698aa31d8559adbcc7c', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '6a8197e6d5f96312d6f7c150ae5978334ee44af7', moveFocusTo: this.focusedDayNode }), h("div", { key: '16d4fd5169ce40f3bcd66805a28ed366891e88e7', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: 'eb26a4f9a803ce065946f742bdcb64db803a0b32', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '00ca0c13193e6443c4989582e3eb1f570fd3e113', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'd3a5c701a6f1d8c2a2a99194fe1152a76133c9c6', margin: "none" }, this.label), h("button", { key: 'fb2a86e1f251a338a2cb6b4e30260995c485cced', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '7ac51349e66f258160ecd1ca093c739555dbac8a', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'd22d21a5ff614c658b83edb6631b893b8e9fefe4' }, text.closeLabel))), h("div", { key: 'dafd3a931c7efed8c5d36996e306635e130e5cc4', class: "duet-date-dialog-header" }, h("div", { key: '655b64aeb6eb804538da39d1540bd975dc0d42a8', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'ec0305c056c683a7e8cede20f22317e231b85bbd' }, h("h2", { key: '82779b7ba7a438b467a21ecb2871f64b7bce6714', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '9f050f46de2be9dc3c1f9d6965eb72901ca12d67' }, h("label", { key: '940dfb77c9440379d63297393a3cb7af96deba3e', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '5d5c3bb349257c8e43f6e63ce1e142b6c630519f', class: "duet-date-dialog-select" }, h("select", { key: '74ef4df111f0793d17a3e4439fea8690f5c5169c', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '894fdd48da75442d368a1101a5c4a8042b3cf418', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'b3b88e90b0e690f29dcd72937b36ca2a027177e6' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'd030fc66e0e0fdcda78f26d7a117ea252932be5a', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '83f4b90e3d44537cb079f91f911385931d43f89c' }, h("label", { key: 'c2dfc3a34d2236e45726eff1523b22f22b532cfa', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '708dad74eb23709ac341e0bb60ca2960a2fc2131', class: "duet-date-dialog-select" }, h("select", { key: 'ddda42ee0a550dac56dc85c5e96be637771b5f2e', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'ea037965dc2d924343aaac84ef2bd3afe3940b67', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '3c6bd199597d6635350ea348f90cf8d94f9c1121' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'cdd40b45f01e58dfdb1380aeef672632252c75a7', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'a23a3b6969f46d06bdbd80ce21adeeaa6705ad14', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '2140b1f39112967e325f84f505880e582eb5f5f7', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: '00a9ecf746d5a43e4c7f6bc66a77d00cfcbfb800', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: 'ad33c40984a96557732fb910e1c640e6d09363e6', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '117953981892ef42470c071ddbde955972a2461d', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("duet-overlay", { key: '88bd9a51351af2edf1e2e07f155c1eabbff10646', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '08fa3fd43496f0250e63598a879eb03ff81ade36', moveFocusTo: this.focusedDayNode }), h("div", { key: 'a7d8dd867afa616cd47543b8c47a160b710b70f3', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '81c99489839f6ceb28ac6f25f73a0d92f054b0bc', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '404552e44ed007048db39d1d20108c6c38aca2bf', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'd49183b544c8e2a4a23ca281a62b3c4be8a90ebf', margin: "none" }, this.label), h("button", { key: '3adb95e86f08e23c1b60e6e19ec3d9d23467f33f', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'c500a093b3fdae7155e3a5aed30539f009f156c2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '1f23e50c6c479195a622d512ac4ee5d866ebcd9b' }, text.closeLabel))), h("div", { key: '662972a21f2c4cd532471209c9d49e51142f0b25', class: "duet-date-dialog-header" }, h("div", { key: 'fb7cbfa6f3ccded04f8d481447c5847a1293d535', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '8aa30a4e48fcc57ee56d7564284ff219260e8d5f' }, h("h2", { key: '7a40dd8ca6344ac0ccf504ce73b476a3f5e4b0f6', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '7ef05a1a7fab5bebf6d24bc78bb9789efd85835e' }, h("label", { key: 'b93bb5d18acd17fb2bc22bc43c00d16199d254da', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '72f8d34639a3a7de933c91e781b9aafa8e3fb668', class: "duet-date-dialog-select" }, h("select", { key: 'a09e0ba04dfd0da49e8d141c8b2c520d49a6108d', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '85e19eac15e8475ea1a891b49796c2999e9800b8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ae692bf29092ba59affd6258f57ef9dcc1847f2e' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'aed73b3af5c337b8e7ff70699106d3c685206ff1', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '860526bf60d4e94dfd2c19a5eabcd049b8273d82' }, h("label", { key: '6852a9ff1990eddd80f8c0edfa59cc762d68fcc9', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '28bf2d2a99952eb203a2198f558b7ccba9ae99c3', class: "duet-date-dialog-select" }, h("select", { key: 'efafa17aa2c9306af0ca13dbee83cdefeed076b2', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '5d9f4154d302ea2733b72a2f613abd9f7f569be8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'a6996b5aa61aa5227048b4eb1b8cb227b0dcda33' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '6c999d099466d7b9ac2dd54ba7cf9b80732d82ef', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '7c63a65698b7a07d10c9b75ad21a6c7585c99034', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '3599aaffa6d0b601b35cfa244faa11b705724ef0', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h("duet-action-button", { key: 'dfff287908a10fd3b84abbd643af6d095bb70537', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h(DatePickerMonth, { key: '4f9b1c1fd0791045a5d04055e1c61182f11ebe86', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '06daea4e6567faa83c290236d3bafd2ed6bb310e', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -794,7 +794,7 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "disableBuiltInErrors": {

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

@@ -30,6 +30,10 @@ export class DuetFieldset {
          * If caption is present, larger lineheight is used regardless of this prop.
          */
         this.compactLabel = false;
+        /**
+         * An error message to be shown next to the label.
+         */
+        this.error = "";
         /**
          * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
          * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
@@ -71,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '258a1f3685f4b3062dde173a5794b9b28c09907f', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '2c02911b79dc15bab34df3f44a51422915f85512', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "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: 'e8cc33c8ce84e853fc7c7346b530e2e6aaad3183', id: this.labelId }, h(this.labelHeadingLevel, { key: '67c582882054f866aeeb51fe1a3cd265fba86c3d' }, this.label), this.caption && h("span", { key: 'd7e7385c337f132b5f9c9a05fa1d0882059b5b4f' }, this.caption)), h("div", { key: '1bde79106ff72cb9a950abb9063c1f361ebc88b8', class: {
+            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', 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: '5bdd5a1d10ec0ca02f0d663c4c0398cf4f15f912', class: "duet-fieldset-label" }, h("span", { key: '6da5eaba488e3691f1b3f5e4641b0043f7b264dc', "aria-hidden": "true" }, this.label), h("slot", { key: '8720d1bc6a9fd0b88a2e2f3ec04a783f33c25f8f', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'f2701433f3204d8c606d025e2db9824f8975dd6b', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'edf83cd535f5139e64f86a962f9a247e33d9b3b1', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b8aa86236854c21d9662cf8bf46c70d5cf8c0d68' }), h("span", { key: 'b8877c8c9a710aa4b59d77ebd847ff3f13b57d6d', 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: 'b8781cebef3af6ea44dd2754ae2ae7c05f63b1f1', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', 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: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }
@@ -230,7 +234,8 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",

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

@@ -26,9 +26,10 @@ export class DuetGrid {
          */
         this.rowReverse = false;
         /**
-         * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+         * Adjusts the vertical alignment of the grid items, if set to "form-distribute"
          * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-         * so that they align even when displaying errors.
+         * so that they align even when displaying errors. Value "form_distribute" is deprecated, use
+         * "form-distribute" for new development.
          */
         this.alignment = "top";
         /**
@@ -44,6 +45,12 @@ export class DuetGrid {
          */
         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
      */
@@ -71,10 +78,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();
@@ -108,7 +120,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",
@@ -185,11 +197,11 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2bb3d9243ec7a125fb661965f3cbaf286783b81d', class: {
+        return (h(Host, { key: '9212e2e0bff89f3625e4194c7c1ea2d8f71576c9', class: {
                 "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
@@ -212,7 +224,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: 'c24fa9a1a433f68a451601ab0313149b4c2cd13d' })));
+            } }, h("slot", { key: '3b4490d66c0ad8256492ab43535a62150495ca41' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -323,10 +335,10 @@ export class DuetGrid {
             "alignment": {
                 "type": "string",
                 "attribute": "alignment",
-                "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",
@@ -339,11 +351,11 @@ 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,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"top\""
             },
             "distribution": {
@@ -423,6 +435,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

@@ -180,13 +180,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() {
@@ -270,7 +277,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '050542b6acfc853e803793b7ce454506a9c485d4', role: "region", class: {
+        return (h("div", { key: 'fc3ecc930f72a824e8e8e488594714fe52f31fff', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -288,17 +295,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: 'db9f7d160ebee968dca3e4efead01b0af6288043', class: "background-area" }, h("div", { key: 'c0bf3537b54cc4d8b04b72360be1bc922b887c0d', class: "background-container" }, h("div", { key: '39f9c4466c54b54fce2f8ea33c9163a4ca5a8cf1', class: "background" }, h("img", { key: 'bc5aefeac085a2f758668ec48b3ffd4d313b43a5', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '296411aa792beefc76a425f5b39f16f39486c5c2', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '7f53ee027d3b917a9bc5284dbb152ae96ab034ad', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'e5119c084fc6b292252a111c4acb3e2ea6c6cd77', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '3faf62ed852d07e8458c379a06ed3cfd3ca3fafb', class: { background: true, [this.layout]: true } }, h("div", { key: '43b7df5d771099f7c819c23c820b18fb053b67f0', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '3ac9ab64a699f79eafe749c027383f7753437805', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2bd54c40138a7a732cf0bae9a5b57137a3cfded4', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '63a9404b8e42499bcd15bacdca4658931c49fbcc', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '038c455f20502c4600208d6a4e31a8dabd9b7799', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '9b5e7df86df015dbabfaff2fc4f37c1c54f82cd3', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd9ab558d532f77eca798e2998ba5cd592881f03a', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'fe41770dc2aa046b1f7eeb76ac8d77dd0ff964cf', class: "background-area" }, h("div", { key: 'a1821e7ecd479f6d5e78d30aa60b9eaca214de30', class: "background" }, h("div", { key: '37093f57801077d47fc4da19453b47979039d1f5', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '6c2ca91302a3ddccfc3f61043d660d5c86ef2bd6', class: "brand-shape" }), h("div", { key: '5e862b201459878273988077df6fe7d10abcbf55', class: "brand-shaped-image" }, h("div", { key: '915e7aed1c7561bb280156e72b7b03fc6f711c81', class: "brand-shaped-image-wrapper" }, h("div", { key: 'abcbf26a40434f3470ef7576b3f342dcd6e75081', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8b81e3958219408f71b8c7a53b325097f9d95c0c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'cba83e5423eae68e909b4ca76af31aa2ad621b0b', class: "duet-hero-image-mask" }, h("div", { key: '7b6f261e94a3233c4254a729c94196e0c6f27324', class: "duet-hero-image-wrapper" }, h("div", { key: '7e8b9202b8ffe7b6e5f91b432ec68dd3272789bd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '2623bba361537fb8e0c7103ad62b76cd25e33388', class: "duet-hero-back" }, h("duet-button", { key: '1e4c727a46d6554826d3e30653244c1a51162b92', 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: 'a8cdeb3e0c17fed0de61ab1c84a5f8b4eb92d43f', class: "background-area" }, h("div", { key: 'c0e772e0eb58c3b59be2ef2441653d7d9355b7be', class: "background-container" }, h("div", { key: 'ff30622beb78548046143236845a8c6252dc4c40', class: "background" }, h("img", { key: '4ed685b3b1f5926867fcf8e53050a4f4dbe71060', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '8757c109c1ecbf249d31b7f3fdfe062e7cbcdf46', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'b6b734d21571cbe03adab7be1942caa351eb886e', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '5e6e459f153a9665bc8993789961ae5d23ff389e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '593f8f68c2df59b1e6499eb6f59394dee782891e', class: { background: true, [this.layout]: true } }, h("div", { key: '49aaadfc675e5cc1cf528cfb3516577d3baa1c4f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '52d15566f49e4ee0d72ab9ec10f992d55291a2cd', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'a7275c16c76b667037cfe0044b21b11ce09bf413', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'a3522f3ed67befbb439ee07195e959180b3e01a1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '3cb4ef66b9af1357e75318bc6f97e732e1787ce2', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'c15dfb764fe13d5766c3ad5e2b4bf012c739e257', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd5f3d4a50473d2e2b56575de789e42c246c69987', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'c0ace6245e4431276a7e72a618b37f967d0b4bc5', class: "background-area" }, h("div", { key: 'cf04f88d15da106d8416d910835e07e87dd04bea', class: "background" }, h("div", { key: '0536ea5ec869a1ec253ab616a12485b01433982d', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'd7933f6c85dc709697ba451cf89cda8f7a9e3f03', class: "brand-shape" }), h("div", { key: 'c5fd0f3a99befd7d054303c9ebfd596989e7ccb8', class: "brand-shaped-image" }, h("div", { key: '96c71979b18e456b1a94fbb2bc1ae56bbf5cf318', class: "brand-shaped-image-wrapper" }, h("div", { key: 'acd8a1ce0a639e28970c6ca41b789bcfac03f9c7', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8d08cf63aac9a03e1874b8cbfa4741ee1f1c4949', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '6da49938f8cf4c5038179fb9b48e0d8d5b8a521a', class: "duet-hero-image-mask" }, h("div", { key: '1682a488a00e1188d2be47d0aa895277f065adee', class: "duet-hero-image-wrapper" }, h("div", { key: '6fc100efe321915493d840f3fd2f01100fa954fd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '2777feaa8cc994cf4215d49143c69bee06d85552', class: "duet-hero-back" }, h("duet-button", { key: '57315d5cb34c6db55f6642224b442b12ebb7fe9a', 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: 'b3222a455e2be4304240b213ec34ff9a8254511d', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '1f369768e19771c9d962558704707072c355577f', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '319f24f87d1adfa4840e1b3c4adfa9e5a4efdbcc', 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: 'cab3fd5560e97bdaa5e7da9833bebdb1b58c77aa', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '070825e4bae09477947bc840a07df3a49f72cda3', 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: '593ff167e8e2027765467078c3a8e7fb6478a0f2', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'b0dfe6f310419cd5129b6419c2f98fcee3510439', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'e4f7966e4118c83e518b170818e0a07b8bff8f0c', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'c50112688f95b19886481c47f6158f9ce5a73dc0', 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: '1d9a44bd408aad6ed6f7571660b6284a2622c9ee', 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: '6409f66cd66a04c3720b95444ca4354e1927bf92' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8103af21642ae0c19bb00cf2918afe83bca217ac', 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: '282df2be20e350964563837a2344b4fd3fbd6812', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '0a04e8f9ada19e0e157a52295248291e4ce30703', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '38897d3fc34f854e13e2675bc3c79005a7ba16b1', 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: 'c77b97021d7c7a735ce0aeba42fabce91d83da39', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'cd22335d7881e672e2df6367d58c734784ff5f6e', 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: 'ce92b7e2ce3f86fa082b8601dd070d5a76b27437', 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: 'f79855d9d88deba48f86e05f2318cf9459da6db0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '9b3cefb7c435efb47e07a1501e18dee9db1b6b5b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '1c4915294fb3b2335ff981939207a961069d6b74', 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: 'ba2b9cded251cad0aea4ebd4c66d1fddf78bea38', 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: '0570f78ab10d749668c6dc20bb97db5896ce1039' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '647db5a0b2aa0416fd2a499bf168523b2f090e81', 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: '2e854294f691337a3683daa831b498bdcdf56945', class: "duet-hero-image", style: styles }), h("slot", { key: '21cb460439eddf5f9a251722b9c6c3b3864a701d', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '32f36cc551b37aefb3a06403431479f4d4e7460d', class: "duet-hero-image", style: styles }), h("slot", { key: 'd53f84c8a9c995bb049ba25531b49b8119d40353', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,6 +123,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

@@ -160,8 +160,7 @@ export class DuetInput {
          */
         this.variation = "default";
         /**
-         * @internal
-         * Render a container for chips
+         * Render a container into which Duet Chip components can be added with the method "addChip".
          */
         this.chips = false;
         /**
@@ -465,32 +464,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.shadowRoot.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());
@@ -528,7 +527,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: 'a510fa25a1bfafc15b45ec3ae52673542c9431f8', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'de872f33e40e697f2bfbbd44cf50baa6119d7cf1', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'c90de920afdad7d205699cea7d5f4fdd1572a87b', class: {
+        return (h(Host, { key: '114adc16746f53eff8aaf5e8d40f7705dc7e6f21', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'dd579486970d79ed302f16de907aaaec01d24a08', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'd687b1b683ffab3045c2668cd691123682549163', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -542,7 +541,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '25af0df12601480977d1073be0dac1f37edce26e', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '8472acbdb1f02f3177acb1cc359b684359577c97', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '6ae13a9809afd8abea403d05594d0ac605043f13', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '456f3ee403878a23c7141e9b063c8d8e04e95be2', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c4c6f0174d210348bbbab129508fc99917243f2c', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'ba63a0017715fab0c39fca2a948c9bfbfdad1f31', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'eaad95087d69b5b4a8e72b43ddb184bf8b941087', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '2013c4ffb1127068ced232f02ef8885f3e8f614e', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '5fbfb4ca2fd57a0ae853d4ec2512c79fa85aefd0', name: "button-left" }), h("input", Object.assign({ key: '060cab78180db35d613d8e8944ae17fc61dcb7c8', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: 'fa683202d05f4eab1f4ce8a24bda5a145c862f4d', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '54065b39f6bab8d3082096f2fb9151e2d92d9c04', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '1ab4bede74df49fcc2a11eb4d259ee49a25eb6f6', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '14ab07e67e7cdbeac4e96128177b336daed9500f', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'fa7deb88045a38d9b31bc395d87e061c599edd2f', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'efc1fcb507a40731adf2e3e698951a450c58898d', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '1224f040086ac6a27de0080a01e61c282b6082c3', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '61f65a6638d3be429701fc1485216b46132b1b99', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '26dadaa62adc545911f4c6e54621dd72318e7d36', name: "button-left" }), h("input", Object.assign({ key: '7d254243306b9cdbdbd86be50068c307b34bc316', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -550,17 +549,17 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2ef57d881263ad7285afe3bd58ed9de8913131ca', class: "duet-input-icon" }, h("duet-icon", { key: '0424cb373c27e808b8ed1e1f44ca28b077af2f43', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '2ba7ed30cf2409845b231bbc21cb1a7b9e001196', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '634cf27751d584258d0afba60e28e3ffc77077b7', class: "duet-input-icon" }, h("duet-icon", { key: '0ac55c1115030c99f3e5339749e881184920f704', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f59573bd40a8e5fb4d1c82b1619b9be8ab75ec45', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: '7be0f3cce53d669a7cb2553ea0c720a0a8f234fb', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'd51041231a488756076772109503dcb42a47cef9', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '34624c33d8582374f0deddee30d4cc3968fa38db', class: "duet-input-icon" }, h("duet-icon", { key: 'f1fde9b9334ea64219f70363ec2bf40aa9e57d6f', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5f490c321a2ac47676a4aff02e30f0871b640dc2', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'd8c8a40544d07411b453bfa332c9741851bf6226', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '591370f9af7be91b78a1553a5bba5f6a0fa69a57', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2c4124a3e9b05925f2e29b54eb8cd5ebdb315f18', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '9803a77a5ae599994e1fd4b7dcc3a91c7efcabdb', class: "duet-input-icon" }, h("duet-icon", { key: 'b7618b017964582807de116dcc37c70b498aa97f', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'a2359de76233b102bee918f4c9349f7785c46169', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4d69f99e663c77e7574b9b5c1229648533464925', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '6c96533d140ef424e33a3a67961042c3d3838161' }, h("span", { key: '6ab1b5959e16b393688eaa068d772b0a600badaf', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '4e683b6138b1e9c651f5b16b375cdd90db28b093' }, h("span", { key: 'e20e93bb8aae9f8dc9bee33b7cf9b9bc7b7ce615', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '5546955121bfe120490c3b22825c1035c096dd6c' })), h("span", { key: '79328cf71b7ba877431ed97a0ec98cadc31efa56', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f483bcaa8219c1636b5f0b83ee1ee33bd49ec1d5', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '04f3a1b6af610d890d77b7aa42041145144299b0' })), h("span", { key: '89b2554748c89a52f5ecce6a32a39f001468db58', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '870e9c2ca62ca98d42c295f63ab813726140aeff', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1111,11 +1110,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,
@@ -1203,7 +1199,7 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
@@ -1741,11 +1737,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": {
@@ -1765,11 +1758,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": {
@@ -1789,11 +1779,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": {
@@ -1809,11 +1796,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 {