@duetds/components 10.6.0 → 10.7.0

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

@@ -37,11 +37,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: '70c2370b0a61707b44ed89544cf0ae0d3eb5b739' }, h("div", { key: '440dfe7d27ede12ff24de94bd9b598b9a630fdf4', class: {
+        return (h(Host, { key: 'd3e96c80e032ccbcd8acf8a4f3b8d8d358548786' }, h("div", { key: 'b6caf5e67fcb292b3bf73dc0b9bf27fd06be5590', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: 'b3aa896544cb2cc6021eb50ea96e317fd256d266', class: "container" }, h("duet-icon", { key: 'cdffa280e6126af9e8e77bc6a96821cf7b229796', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '8b3d9b55675179e4ed743459009d4f278bf2b30a' }, h("slot", { key: '41a60c64671630e6199cb5bcc94a9d19f530b8f3' })), this.hasAuthorSlot && (h("figcaption", { key: '80d6481648829aead64c88db38312ee34253424e', class: "author" }, h("span", { key: '2bf9d1de8bfa5456ea8c69c9b2731e2b1a4bbef3' }, "\u2014 "), h("slot", { key: '091fcf50b602dccfb2d8ae005999539a0dde8efb', name: "author" })))))));
+            } }, h("figure", { key: '0b1740d79f890107d1ed0f48b2d0bc9904a6c6c4', class: "container" }, h("duet-icon", { key: 'fc90c293c0008e13b6b7355e4ab32a09d23aaf5e', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: 'a9de71b59c2208091da32a2e9c0acb2fe121d7f7' }, h("slot", { key: '45e54b298e547f5a1dd2f33abf07f48a1bfbea84' })), this.hasAuthorSlot && (h("figcaption", { key: 'f495d161f2993d6cfe240cbd7fe583b447b65186', class: "author" }, h("span", { key: '95b14fcee9c5ed6bbaf04f1711348164a07bf592' }, "\u2014 "), h("slot", { key: '1371283e50a2b7580799984ad815542ccb9e87db', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,16 +156,17 @@ export class DuetCard {
             img: {
                 src: this.image,
                 alt: this.imageAlt || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "duet-card-image",
                 role: this.imageAlt ? undefined : "presentation",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'd61c941d4cbcd29c34375c93cf2c414b553e6825', class: {
+        return (h(Host, { key: 'e665c5842a71a942c9098bb06045587327958776', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: '3e8e63bc3077e7ee7008816f3f1c0928a9ac6cad', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
+            } }, h(TagName, { key: '10722ae1c42744e1924df0a38313eb68acb8a4b1', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
                 "duet-card": true,
                 [this.padding]: true,
                 [this.variation]: true,
@@ -175,7 +176,7 @@ export class DuetCard {
                 "duet-card-has-bg": this.background !== "gray-lightest",
                 "duet-card-has-icon": !!this.icon,
                 "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: '430d6550590b6ba8ff0582c6bfe1de5556149597', class: "duet-card-image-mask" }, h(DuetPicture, Object.assign({ key: 'b2c6457f6fad9275a9fdaff2b1a3a492dc08a1e1' }, pictureSource)))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '705605a43265107ea95fa7d9147cb7cbe82ad586', class: "duet-card-content", id: this.cardId }, h("slot", { key: '2eeb551820975ccbcb3c72f4c2ae4f315848d024' }), this.hasFooter && (h("div", { key: '4ef3a54510d5747516a767282d7392e81eb7ced2', class: "duet-card-footer" }, h("slot", { key: 'f0f8e31a0beba199f3826ec58d277e848134ce38', name: "footer" })))))));
+            } }, this.image && (h("div", { key: 'a9a0b21ac68624cba6b3bfb9c0e8d3d87597cfe0', class: "duet-card-image-mask" }, h(DuetPicture, Object.assign({ key: 'efa16a802e16d5be73243c2c1e2c2bd7fe49839b' }, pictureSource)))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: 'a6ea5db0ad9150e7e5a4dd59ae42bb1c6603aac3', class: "duet-card-content", id: this.cardId }, h("slot", { key: '33a498070a2b68d6361247afe7bd12c440abad6b' }), this.hasFooter && (h("div", { key: 'f2ddb3f3e200fcab419911d5023831019cc4e9e3', class: "duet-card-footer" }, h("slot", { key: 'ac749be2398980321f3cfe4f6b3b679cd2803be0', name: "footer" })))))));
     }
     static get is() { return "duet-card"; }
     static get encapsulation() { return "shadow"; }
@@ -456,6 +457,25 @@ export class DuetCard {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",

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

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '588662850d35631ef6cb3c242d050f4049af0f59', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '301f41ca7f4d90729bffe6940380d56b4d226407', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'b0c88fd8e22781c438ec744fc2b24b6263ecf272', class: {
+        return (h(Host, { key: '599968da32eca61083a4709ce013889772213f97', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '57f28c3d631c55101a557422617bbd4507ccd2cc', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '6dcd9490f08a532578bd12aa808e40ff5014597d', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '389644f6a51bf281434c674aefc560e35dec4a6e', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '8c27e1f31cf9e1625838308435b62ac73421d350', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {

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

@@ -181,14 +181,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0d7434c28155b9472c8819d53c34843052a58d0d', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: 'd310a51e8554b474adaaa10b91392effcac7e189', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
                 horizontal: this.direction === "horizontal",
                 "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
                 "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
                 "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
                 "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
                 "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: 'd0abc308f9f4e0b001efb4923b0e5203ae1d00a6', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'f8e3bbac49fdb91180c3caa1b32e7d6eb1305086', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '9ebac012a0024a84eaa3b320a9d1aca91bb48480', name: "tooltip", slot: "tooltip" }), h("div", { key: '9b811428dda8073221eedb0b5a64ddff1662828d', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '22ab1bec355e45e4bd35c68e2d9c86815b99852f' })))));
+            } }, h("duet-fieldset", { key: 'a107c1b68c3227d3236020bb9721218f1be052fd', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: '0e45f60e7b2ebe7f30f0f87216bbcc176244f80a', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'd129fc812d0be8450b08588910c30be0b4db8a02', name: "tooltip", slot: "tooltip" }), h("div", { key: 'e2ca5fd41342dd4b38442fbb718f2a06c1ba3237', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '12f74fdf5360122b6d5fef83495ba68dede524da' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class DuetCombobox {
             if (!this.force && !this.multiple && this.selectedItems.size > 0 && newValue !== this.getSelectedItemLabel()) {
                 this.selectedItems.clear();
             }
-            if (!this.force && !this.multiple && newValue === "") {
+            if (!this.multiple && newValue === "") {
                 this.value = undefined;
             }
             this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -245,15 +245,6 @@ export class DuetCombobox {
         }
         this.activeItemAnnouncement = "";
     }
-    inputValueHandler() {
-        setTimeout(async () => {
-            const label = await this.getSelectedItemLabel();
-            if (this.input.value == "" && label) {
-                this.input.value = "";
-                this.value = undefined;
-            }
-        }, 200);
-    }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
         const path = e.composedPath();
@@ -1031,9 +1022,6 @@ export class DuetCombobox {
             }, {
                 "propName": "activeItem",
                 "methodName": "activeItemHandler"
-            }, {
-                "propName": "inputValue",
-                "methodName": "inputValueHandler"
             }, {
                 "propName": "items",
                 "methodName": "processItems"

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

@@ -53,15 +53,16 @@ export class DuetContactCard {
             img: {
                 src: this.image,
                 alt: this.name || "",
-                loading: "lazy",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
                 class: "image",
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'f64dabbe00a4d4f03132a6adc7bc3b95bdd6042a', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '0f5bf8d1828462b3f5e6aa9f5d7e11b338a2b61c', class: {
+        return (h(Host, { key: 'e33b5a9345cc0e38336978b22b5a5e833bb03bb9', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '836de470febdb6a96d024a08f55a25a62392b350', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: 'c7f1a34d6324e755b84db0dc4da6ccfe23c2caea' }, this.name && (h("duet-heading", { key: 'b5e344e3a442dd32b215a64c5ac5050004205cd2', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'c0691195632640e79ff0138fd59b974764f4e653', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '69b2e8b159c01ac6a10b0e9f5db6484e24d7ba88', class: "email" }, h("duet-icon", { key: '610229dce2bd62cdd469f1507a3d7ab2fb9bbf2e', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b8de1672468624fb4d187f2284d59057abc6fc02', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'f1f0f4cb51fb389b4af742d8aff457575ba2fea8', class: "phone" }, h("duet-icon", { key: 'bf01da4d50e3c15d6e5e6578e560746cd0290cdc', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b13decd3ea2cbe80e5eb96f4214db65bcf318918', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'e9d62c80a434400828e323a802e873df327e9c28', class: "call-to-action" }, h("duet-button", { key: '5603fe9f97b490a96cfb04cb6efbc98093d8e216', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6fd00f636dd39f1ad02f62fa2a63cfe7f00f67b2' }), h("slot", { key: 'f91dc7abe608519b46f5bf421f09258cabdda749' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: '7b0b31acf238f0b6c8a8579bc22f5f819fa794a3' }, this.name && (h("duet-heading", { key: '03c95063f1c164feeee6d7ffec8050e76a863065', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '35343cc1d650f5f6f83d1c98db2e7d5d8df32232', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'a4565eeb9a17b36e5cb086f4a7a071f7da471958', class: "email" }, h("duet-icon", { key: '622531d9bba0fb9991aa5d15577d906aa637fb97', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'dc454c0170ea57a3e9e9a1c891cda1852c20330c', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '8df6d3ba05579ea713093fb7a254c85ea2827f17', class: "phone" }, h("duet-icon", { key: 'c0551285cbe9b64e23ca131cbc6be05efab7bbe1', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'd3f01bfb37c0120280514925cb386a75f660ee26', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'df56d1a6ac897401fa74b40da6f163908dedd2db', class: "call-to-action" }, h("duet-button", { key: 'be684b20bf8f7f976cc2b8934b10650c09dc824d', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'c1719ef0b401fd6d6a189a68ad61a6339f1299c9' }), h("slot", { key: '59366556e70ea407134c67f51da830cab886171d' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +149,25 @@ export class DuetContactCard {
                 "setter": false,
                 "reflect": false
             },
+            "imagePriority": {
+                "type": "string",
+                "attribute": "image-priority",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"high\" | \"low\"",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the image load with higher or lower priority. Value \"high\" sets the img's attributes fetchpriority and loading to\n\"high\" and \"eager\", while value \"low\" sets those attributes to \"low\" and \"lazy\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "sources": {
                 "type": "string",
                 "attribute": "sources",

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dfc4801eaf8c1165b778701dffc06cb6c6729dab', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '720a2326b5106d5a7665528aedf93a351173abd0', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: '6b5e616dee35539f33f740844d8cb031480e7034', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b9847559a5f6d043d40cf13941b02abcafcd4826', "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: 'a3e0f5a2079c07462370fe5b4953029868a34128', id: this.labelId }, h(this.labelHeadingLevel, { key: '8b09fc7c58d0cb9ce5228f420c16b7e753cbff32' }, this.label), this.caption && h("span", { key: '5505e5ff8f0fb05d0de2100a606281efc89de10d' }, this.caption)), h("div", { key: 'c283e26732c4a1a23ab92f2f69c470f8576a1295', class: {
+            } }, h("legend", { key: '00db725af6a81cc39f9812b6ad907e14099e640b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'e790c1bb2136af773035d687afa1af037f965174' }, this.label), this.caption && h("span", { key: '94cfa68d4e1bc683b16749e06667ad9fa13a84c6' }, this.caption)), h("div", { key: 'f7fbe98556ff25593ef84788b28a95a684a923e6', 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: '1ffa47a6b399b46b218a71a35e645f3c7f3e4699', class: "duet-fieldset-label" }, h("span", { key: '8f13839c07004cfa7b57c7e90a56a9416e5318cd', "aria-hidden": "true" }, this.label), h("slot", { key: '48871bac950c808682971d71b05bffb3e4d2f423', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '9a67fb599acf90e1b6711421f08b5f76776c9c2a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '4b40741c7e05704d6c7d8226a926a6a38ceff851', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'f57fd8b8ab64c31c89e7daf22baa9c9ae1251cfa' }), h("span", { key: '3fc490294c332706136999063ea7b3091c95676d', 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: 'f8b4d8ccd2a8d7b1b0ef640f55520278995fe80b', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '1ed3c1d5c1e394cc84c6b38d05d6dae5c81025de', class: "duet-fieldset-label" }, h("span", { key: '0a004664043ce7eecc9a0a12383342f4d6bd7b46', "aria-hidden": "true" }, this.label), h("slot", { key: '3e1c56c60ca7a1b343aa25d3e63609ddcfef2822', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '8b165ea6688eb0a0c179fe76c583990d357e99d6', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'b54388620f28ecef14c0da6d4e8d27ed9b16de78', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '41fa24ea72a9f4318bb6dd183fb0a464ed45d8ca' }), h("span", { key: '6569844fd76312f12b64a7864f35e6f4637110db', 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: 'cef4273c56dff02051a14435d02d975131d4c4a4', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -594,4 +594,26 @@
   :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
+
+:host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+  grid-template-columns: minmax(0, 540px);
+  gap: 40px;
+  padding: 0;
+}
+@container (min-width: 720px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+    grid-template-columns: repeat(2, minmax(0, 540px));
+  }
+}
+@container (min-width: 1100px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser) {
+    grid-template-columns: repeat(3, minmax(0, 540px));
+  }
+}
+
+@container (min-width: 1100px) {
+  :host(.duet-grid-variation-grid.duet-grid-template-teaser.duet-grid-direct-children-4) {
+    grid-template-columns: repeat(2, minmax(0, 540px));
+  }
 }

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

@@ -5,6 +5,7 @@ import { Build, h, Host } from "@stencil/core";
 import { debounce } from "../../utils/js-utils";
 export class DuetGrid {
     constructor() {
+        this.directChildCount = 0;
         /**
          * Enable or disable the automatic responsive behaviour of the grid component.
          * Setting this option to "true" makes sure that contents are stacked vertically
@@ -121,7 +122,9 @@ export class DuetGrid {
         return Array.from(Build.isServer ? this.element.children : this.element.querySelectorAll(":scope > *"));
     }
     async updateGridItems() {
-        const items = this.getDirectChildren().filter(child => child.tagName.toLowerCase() === "duet-grid-item");
+        const children = this.getDirectChildren();
+        this.directChildCount = children.length;
+        const items = children.filter(child => child.tagName.toLowerCase() === "duet-grid-item");
         items.forEach(item => {
             item.responsive = this.responsive;
             item.breakpoint = this.breakpoint;
@@ -208,7 +211,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e64260236eda4217a2cb10444342c33d243da8cf', class: {
+        return (h(Host, { key: 'af6ceb11c84216f03b1dda1c12f3ae224b5c4874', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -235,9 +238,10 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
+                [`duet-grid-direct-children-${this.directChildCount}`]: true,
                 "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
                 "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
-            } }, h("slot", { key: '1cb11ce3685bf5043dfa3e36e6a0ff3653106b54' })));
+            } }, h("slot", { key: 'c000cfdac55f96a2f4698668e48b13f1e6829ccc' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -428,8 +432,8 @@ export class DuetGrid {
                 "attribute": "grid-template",
                 "mutable": false,
                 "complexType": {
-                    "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"",
-                    "resolved": "\"button-grid\" | \"large\" | \"medium\" | \"sidebar-left\" | \"sidebar-right\" | \"small\" | \"three-columns\" | \"two-columns\"",
+                    "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"\n    | \"teaser\"",
+                    "resolved": "\"button-grid\" | \"large\" | \"medium\" | \"sidebar-left\" | \"sidebar-right\" | \"small\" | \"teaser\" | \"three-columns\" | \"two-columns\"",
                     "references": {}
                 },
                 "required": false,
@@ -465,6 +469,11 @@ export class DuetGrid {
             }
         };
     }
+    static get states() {
+        return {
+            "directChildCount": {}
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

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

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'df12b3cc2925272599581a0a6c922364a9ddbc83', style: {
+        return (h(Host, { key: '1a1bfed712a2b3acd4f87bd37bb4b22e06521056', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: 'beb1eff26b3dd81aab53500be3b2f5274c099c9d' })));
+            } }, h("slot", { key: '11a8e27d181731baadfceaafef6de847fd3fd081' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }