@duetds/components 10.6.0 → 10.8.0

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

@@ -117,9 +117,13 @@ export class DuetDatePicker {
          */
         this.error = "";
         /**
-         * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+         * @deprecated changed from opt-out to opt-in with attribute `enable-built-in-errors`
          */
-        this.disableBuiltInErrors = false;
+        this.disableBuiltInErrors = true;
+        /**
+         * Date picker can use built-in error messages for invalid or missing entries if the application does not handle those.
+         */
+        this.enableBuiltInErrors = false;
         /**
          * Visually hide the label, but still show it to screen readers.
          */
@@ -197,7 +201,7 @@ export class DuetDatePicker {
         this.handleBlur = (event) => {
             event.stopPropagation();
             this.inputHasFocus = false;
-            if (!this._validity.valid && !this.disableBuiltInErrors) {
+            if (!this._validity.valid && this.enableBuiltInErrors) {
                 const errorKey = Object.entries(this._validity).find(entry => !!entry[1])[0];
                 this.error = getLocaleString(this.dateErrorMessages[errorKey]);
             }
@@ -435,7 +439,7 @@ export class DuetDatePicker {
             valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow || customError),
         };
-        if (this._validity.valid) {
+        if (this._validity.valid && this.enableBuiltInErrors) {
             this.error = "";
         }
     }
@@ -496,13 +500,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '574a2e443eb79af37f178f46845a206f561cba2e', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '62fa53292d9b464c3bfce84805c61abbc729b32c', class: "duet-date" }, h(DatePickerInput, { key: 'fd44ced264f1b867ffa5642a110d118cfd8a7977', 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, 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: '7db19721a17bc48c0f232de5a91e9aee49435f6b', class: {
+        return (h(Host, { key: '2101b93d551d7db95be216d7e8293354201e68fb', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: 'd23a2c29a015fbf53bf97b6f07cc79230ec77ae3', class: "duet-date" }, h(DatePickerInput, { key: '0d7a4f813cb59f576fe7bdf0b5866e60cbaccc71', 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, 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: '868801785eb752e7c988273787ba367463f0d2c0', 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: 'b762f7971ef0f3cfdba4338da8b66ddd932d739c', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '116f8a028515e1cabbdfe6c7c4fbe46a366e8417', moveFocusTo: this.focusedDayNode }), h("div", { key: '46df5dc4188ca94f1e9288cc94b369a56a951ee1', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '1de44e1f4c44b9c97adb419fa7abf60f937b0fa2', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '4a36684eab5f83211dcd9f04f240ad535f781376', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'ef9877f7fc10b63428437a0ddbc07a787792617b', margin: "none" }, this.label), h("button", { key: '52b087991727aa7c32178aef85a7ff6a88b33f6e', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '9434a8ab91835101fca28fb28d3ba3b5fc768583', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'eaa01ae0b3e0270af1ee5b7777c4bf1c823ed55d' }, text.closeLabel))), h("div", { key: '8f59e259985eb3628f23dd8aa4edd90eab33ce45', class: "duet-date-dialog-header" }, h("div", { key: 'fd9e2ffede5b19a2008684f5587663372a769b0f', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '9bfda8777868d3a1a0b5dfb1146d4bd22ece9b9d' }, h("h2", { key: '4f8171f8b0bfabeb8ef0d44f604c668810572ba8', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'f55f26894bef3e11233e3d72b62d70ff5f4f30fc' }, h("label", { key: '01d6cda898862ee9c82f018e4a875a54c8a4454c', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '758b166665674a916ab6d6b2c9fd78b6f51f27fd', class: "duet-date-dialog-select" }, h("select", { key: '548b2e7615f581454c64c30fe8e8c8d6dfe0d969', 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: '34d1e610de1d9f1c1436fdf1ffb2294742269696', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '84d57f82660038e7fb7d631e6eb03be0ef9c4315' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'f706752d81c80ae05bf13a19ed6cfa3b2d7262cc', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'fb67730ced2246377442fb2fd2ebf5086db34fbd' }, h("label", { key: '0d3d28925711a15b919004ad2384c719b9832f7d', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '371bb8461b655460da25e9982e17c0385fab8f71', class: "duet-date-dialog-select" }, h("select", { key: 'c466eed369426ad7cc78fbed3278a0523529920c', 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: '78db254ed00d0d7b5104f4932415d970ff17e1f4', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9a66b0dad5bf39fd769cd851cb529b4568310d9d' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'a68a8da9385f631020ba28389caf1b611def6676', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'd1dd09f7da7f1e9d50cdd79ae97d13ba4d89be25', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e7b3c41d7d56f2c24b4e69db80e4c8fc2e0395a2', 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: '980a6a1316a3f0b64a0ae62dd80d3494ea855ae8', 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: '8524700a8665fe9b8edc04bd6b90b4aacc1eeea0', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, disallowWeekends: this.disallowWeekends, disallowBankHolidays: this.disallowBankHolidays, disallowedDates: this.disallowedDates, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '8b92a3d7d025848e2e3c976e9c091364b52b7f96', 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: 'ff3ca44007f17949b16824685e55d4b52304a635', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '52415f73958c302f54ed9ed1d2fc4f4d4d8c2413', moveFocusTo: this.focusedDayNode }), h("div", { key: '0dd696ad1ac07902f07f483907d28056a7a53875', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: 'e2a7f570483f794aa9f69367e6d5d264e382704d', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '5fba9ce2d01e722cef8125759dc2ca476a1b75ac', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '1e06e95abf149f493566476b91a8a5478e7978e1', margin: "none" }, this.label), h("button", { key: 'f0d02d5c156532cbcd62a941a3624b7e97f0ffed', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '7ddaf28a52153f0d7c2f514fe4d657a108d8cefb', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'db236821d951de7fec7f33b55841538d9fe5f796' }, text.closeLabel))), h("div", { key: 'bf259e202dd64c21a95dd24ba47b7c0776811b4b', class: "duet-date-dialog-header" }, h("div", { key: '9d833d152a1f2d7f594d5c47e28d18363c8910d7', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'f00f0ff852c76fff5bae02ab2915127b105c4d63' }, h("h2", { key: '028369aad6a32055c14ecf6c0b06334e2e54a9bb', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '73d126ea4d199f59eb55df5113e06c54a4222dc3' }, h("label", { key: '22f1038fdc4e65bf77d0e888f1e4f4e714b70bbc', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '6770d474539174a57fcd109545e693cae6894f77', class: "duet-date-dialog-select" }, h("select", { key: '8a8d5005e81c8ba1838d298599d074b82d2e0197', 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: '8144b70f64ab6f3dd4361ad61e489912c38e02d8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '4e0172c58f7771d0f84ef9fa7ae5bebd7d7b5036' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: '025b0e895b95983de955fbbda9f793ad7b52fb80', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'e0323ecb8e50e0d40dd93b0269dd8dcc07ad6435' }, h("label", { key: '4072da35b9fd966b01d8b49d4c396f66f3c5485a', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '781da9cd4ee79d9e64cb9c76926859d4d819434e', class: "duet-date-dialog-select" }, h("select", { key: '75f150c29f8bc931d36cd02e2a354d89b7f2761b', 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: '96384ab271288677c40cae8d26b7e3d732ac6986', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '6f5068e75adf6ccb8dd62e9e3495278130b8406e' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'ca880dd653adc64184a8804ffeb45b2bad8da968', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '5dd36177b3b2e383e8879dc5fc05eaaa554fc22e', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'ee701d60f8510cf00e34042bd9693ae47f99d6a0', 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: 'c6da5355e47cd7d1fd4402650b019b9a6e36d150', 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: 'b6a5540ec6e095f556c761b2e7784b7004568156', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, disallowWeekends: this.disallowWeekends, disallowBankHolidays: this.disallowBankHolidays, disallowedDates: this.disallowedDates, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'ff93eaf35841d06eb93e2125254f8f801631bd88', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -824,9 +828,32 @@ export class DuetDatePicker {
                 },
                 "required": false,
                 "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "changed from opt-out to opt-in with attribute `enable-built-in-errors`"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableBuiltInErrors": {
+                "type": "boolean",
+                "attribute": "enable-built-in-errors",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those."
+                    "text": "Date picker can use built-in error messages for invalid or missing entries if the application does not handle those."
                 },
                 "getter": false,
                 "setter": false,

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: 'e2c6cc99f8d6e3fcf85ee4a774b61e8a138fe2cb', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '1e382d523fb124212f4475c59f660566b22cac4a', "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: '4af73da9eecbdef957d0d9f9fbbde218082cd94b', id: this.labelId }, h(this.labelHeadingLevel, { key: '5b52e382eecc29c2bd709765592e2b9e6fe0fd60' }, this.label), this.caption && h("span", { key: 'ce5feca713eeddbfafb5ab03576e6026e588ac63' }, this.caption)), h("div", { key: '29f85072f52ccc650302586b79d334d2aa686706', 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: '78421d08367b6a7e158fb3cc461767cd34eb4dad', class: "duet-fieldset-label" }, h("span", { key: '4df48d5fb01b4cdc199ee36b034f0b54c7ad2039', "aria-hidden": "true" }, this.label), h("slot", { key: 'c4e9d3107c5d62aaadb594e9fa41e455159693cb', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1777e78c69d940f110b1ae7bbe33a257197b1229', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '0ded2be735ec605ecd5451e37a0941db8b9cb7ce', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '2c2acbb1a507fcef25618366d958cbe494d0929c' }), h("span", { key: 'acd99ed8f4ce567b424bb0097df9d4fccca103c3', 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: '4bbba6d24a221081cc559fec9cfca914109b1aac', 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: '12dce875bc953154224e96f783fbbc66ecc28884', 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: '51f9a6b4ce1898cf60071a5d527a3c542c761051' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }