@duetds/components 10.7.0 → 10.8.0

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

@@ -146,7 +146,16 @@ export class DuetChoiceGroup {
         var _a;
         const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
         const allChoices = Array.from(this.element.querySelectorAll("duet-choice"));
-        const ownChoices = allChoices.filter(choice => !allChoices.includes(choice.parentElement.closest("duet-choice")));
+        const ownChoices = allChoices
+            .filter(choice => !allChoices.includes(choice.parentElement.closest("duet-choice")))
+            .filter(ownChoice => {
+            if (ownChoice.type === "checkbox") {
+                console.error("Choice Group must consist of type=radio Choices. Choise type=checkbox is not allowed. They will be removed in a future Duet version", ownChoice);
+                // ownChoice.remove()
+                return false;
+            }
+            return true;
+        });
         let hasChecked = false;
         this.choices.clear();
         ownChoices.forEach(choice => this.choices.add(choice));
@@ -181,14 +190,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd310a51e8554b474adaaa10b91392effcac7e189', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: 'bef9e6aed77ae942a881822af3fd9b2fd340088b', 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: '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' })))));
+            } }, h("duet-fieldset", { key: '18197d3bbcf9772c85e002a0df25e9df79dcb3a7', 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: 'f9a555c68c6f7312e0941a16752f5c2b3e488e93', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '041c890f290b5ecd750edd189288cfb2769aa60b', name: "tooltip", slot: "tooltip" }), h("div", { key: '01d3e4cad179c9aa864c80557831cbf10bf2b0f2', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '87f9ea13d22d029ba9025572432ebdde96456838' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,5 +14,5 @@ export const DuetComboBoxSelect = ({ item, activeDescendant, selected, label = u
         .map(term => regexEscape(term));
     const regEx = search !== "" ? new RegExp(`(${searchTerms.join("|")})`, "i") : undefined;
     const highlightStyle = "text-decoration: underline";
-    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": activeDescendant ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant }, regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+    return (h("duet-popup-menu-item", { id: activeDescendant ? id : "", active: selected, "data-index": item.id, "aria-selected": selected ? "true" : undefined, "aria-current": activeDescendant ? "true" : undefined, role: "option", "aria-label": label, tabindex: isAndroidDevice ? "-1" : null, onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), accessibleRole: "option", activeDescendant: activeDescendant }, regEx ? (h("span", { class: "option-container", "aria-hidden": "true" }, h("span", { innerHTML: item.name.replace(regEx, `<span style="${highlightStyle}">$&</span>`) }))) : (item.name), item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
 };

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

@@ -38,6 +38,7 @@ export class DuetCombobox {
         // the activeItem number is based upon the array.index of the array stored in processedItems
         this.activeItem = undefined;
         this.activeItemAnnouncement = "";
+        this.optionsFoundAnnouncement = "";
         /**
          * Defaults for the accessible labels for the select items
          */
@@ -45,17 +46,23 @@ export class DuetCombobox {
             en: {
                 heading: "Select:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount} options found",
+                noOptionsFound: "No options found",
             },
             fi: {
                 heading: "Valitse:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount}, valintaa löydetty", // extra comma to prevent unwanted conjugation
+                noOptionsFound: "Yhtään valintaa ei löydy",
             },
             sv: {
                 heading: "Välj:",
                 item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
+                activeItemLabel: "{name}, {current} / {total}",
+                optionsFound: "{optionCount} val hittades",
+                noOptionsFound: "Inget val hittades",
             },
         };
         /**
@@ -131,6 +138,7 @@ export class DuetCombobox {
                 }
             });
         };
+        this.optionsFoundTimeoutId = 0;
         this.onInputTyping = async (e) => {
             var _a;
             const newValue = e.detail.value;
@@ -140,7 +148,14 @@ export class DuetCombobox {
             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;
+            const filteredItemsCount = ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            this.listOpen = String(newValue).length >= this.minCharacters && filteredItemsCount > 0;
+            clearTimeout(this.optionsFoundTimeoutId);
+            this.optionsFoundTimeoutId = setTimeout(() => {
+                this.optionsFoundAnnouncement = filteredItemsCount
+                    ? this.accessibleLabels.optionsFound.replace("{optionCount}", `${filteredItemsCount}`)
+                    : this.accessibleLabels.noOptionsFound;
+            }, 1000);
         };
         this.onKeyDown = (e) => {
             var _a, _b, _c;
@@ -363,6 +378,7 @@ export class DuetCombobox {
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
         this.input.accessibleAutocomplete = "list";
         this.input.accessibleControls = this.listBoxId;
+        this.input.spellcheck = false;
         this.input.id = this.inputId;
         this.element.addEventListener("keydown", this.onKeyDown);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
@@ -379,6 +395,7 @@ export class DuetCombobox {
         if (Build.isServer) {
             return;
         }
+        clearTimeout(this.optionsFoundTimeoutId);
         this.input.removeEventListener("duetChange", this.onInputChange);
         this.element.removeEventListener("click", this.onInputClick);
         this.element.removeEventListener("keydown", this.onKeyDown);
@@ -549,7 +566,8 @@ export class DuetCombobox {
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = document.getElementById(`${this.activeDescendantId}`);
+        var _a;
+        const activeElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(`${this.activeDescendantId}`);
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -561,12 +579,11 @@ export class DuetCombobox {
         if (!item || itemsLength === undefined) {
             return "";
         }
-        const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
+        const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.activeItemLabel;
         return labelString
             .replace("{name}", String(item.name))
             .replace("{current}", String(itemIndex + 1))
-            .replace("{total}", String(length))
-            .replace("{hiddenItems}", String(itemsLength - length));
+            .replace("{total}", String(length));
     }
     /**
      * Filter the items based on the input value
@@ -640,7 +657,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("duet-visually-hidden", null, h("span", { "aria-live": "assertive", "aria-atomic": "true" }, this.activeItemAnnouncement)), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, mainAxisOffset: verticalOffset, crossAxisOffset: horizontalOffset, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container", style: this.getMenuContainerStyles() }, this.listOpen &&
+            } }, h("slot", null), h("duet-visually-hidden", null, h("span", { "aria-live": "polite", "aria-atomic": "true" }, this.optionsFoundAnnouncement), h("span", { "aria-live": "assertive", "aria-atomic": "true" }, this.activeItemAnnouncement)), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, mainAxisOffset: verticalOffset, crossAxisOffset: horizontalOffset, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container", style: this.getMenuContainerStyles() }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -683,7 +700,7 @@ export class DuetCombobox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
+                "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount} options found\",\n      noOptionsFound: \"No options found\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount}, valintaa l\u00F6ydetty\", // extra comma to prevent unwanted conjugation\n      noOptionsFound: \"Yht\u00E4\u00E4n valintaa ei l\u00F6ydy\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      activeItemLabel: \"{name}, {current} / {total}\",\n      optionsFound: \"{optionCount} val hittades\",\n      noOptionsFound: \"Inget val hittades\",\n    },\n  }"
             },
             "accessibleLabels": {
                 "type": "unknown",
@@ -954,7 +971,8 @@ export class DuetCombobox {
             "popupMenuController": {},
             "selectedItems": {},
             "activeItem": {},
-            "activeItemAnnouncement": {}
+            "activeItemAnnouncement": {},
+            "optionsFoundAnnouncement": {}
         };
     }
     static get events() {

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

@@ -59,10 +59,10 @@ export class DuetContactCard {
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'e33b5a9345cc0e38336978b22b5a5e833bb03bb9', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '836de470febdb6a96d024a08f55a25a62392b350', class: {
+        return (h(Host, { key: '04096609d15dbb158a385792f711da26ee95dd95', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'a0878e116a425a2ed9652904f7bc7d3d93544354', 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: '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' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h(DuetPicture, Object.assign({}, pictureSource)) : h("div", null), h("div", { key: '152a894a38c39c7f16488b0507ea8a2c139d29c5' }, this.name && (h("duet-heading", { key: '8738ca48c85445b027021dc89b500332a6d6b449', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'a9f592ba12df7aeb59c5a5e2fad53ae1e52bab85', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'afc1e103364b705e988962ab9edfdd5e0dfbbf5f', class: "email" }, h("duet-icon", { key: '5cf4768948c4b002f742233dc4d4f279bbc45b54', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e2e59421cec8883de026f5f47a6da855545a68ce', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '5a4085420c24900f3ae971f5cf5b84a91a830da4', class: "phone" }, h("duet-icon", { key: '01c049683d092c7b71fcdbf24b9a8470bd8af2da', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '99c27b5983a2388e1349de7eb7b7db19d754b475', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '9996e7c2693ddb274ab8a803e0dc564bfc40c246', class: "call-to-action" }, h("duet-button", { key: 'c0730311ffec7410311d527e75a725332a849ac8', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '136c1d0c39ad396194d2f9f7e9ca180e82aa66a7' }), h("slot", { key: 'fc98de9e746468e61a869ed3f4678495fe9df91f' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,5 +18,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : undefined}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
+    return (h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : ""}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };

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: '6b5e616dee35539f33f740844d8cb031480e7034', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b9847559a5f6d043d40cf13941b02abcafcd4826', "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: '00db725af6a81cc39f9812b6ad907e14099e640b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'e790c1bb2136af773035d687afa1af037f965174' }, this.label), this.caption && h("span", { key: '94cfa68d4e1bc683b16749e06667ad9fa13a84c6' }, this.caption)), h("div", { key: 'f7fbe98556ff25593ef84788b28a95a684a923e6', 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: '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)))));
+            } }, 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-item/duet-grid-item.js

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1a1bfed712a2b3acd4f87bd37bb4b22e06521056', 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: '11a8e27d181731baadfceaafef6de847fd3fd081' })));
+            } }, h("slot", { key: '51f9a6b4ce1898cf60071a5d527a3c542c761051' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,11 +144,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '4165c86903dae730023be910be36389c7151045d', class: {
+        return (h(Host, { key: 'fc3baf3fd1c385e8841cb935f5ea4781fed66367', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '9efda9e15441290db9c499f59fc3f4feed86e5b2', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '5c8edb2e88c8214bb38753dd019c9d24a1421dad', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -157,7 +157,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: 'a59c6e8741e859747f51863e7677de1f95e71b29', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '93836d0a46c0293fc59790869a0c0732b055c191', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -310,6 +310,10 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
+.duet-input[readonly] {
+  color: rgb(62, 84, 102) !important;
+  border-color: rgb(212, 223, 229);
+}
 .has-error .duet-input {
   outline-offset: -1px;
   background-color: rgb(255, 240, 243) !important;
@@ -500,6 +504,9 @@ duet-caption:not(:last-of-type) {
 .duet-input-variation-revealable.disabled .duet-input-relative {
   outline: none;
   background: rgb(245, 248, 250);
+  border-color: rgb(181, 198, 208);
+}
+.duet-input-variation-revealable.readonly .duet-input-relative {
   border-color: rgb(212, 223, 229);
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
@@ -525,6 +532,14 @@ duet-caption:not(:last-of-type) {
   border-color: rgb(214, 28, 82) !important;
 }
 
+.duet-input-container.has-adornment.disabled .duet-input-relative,
+.duet-input-container.has-chips.disabled .duet-input-relative {
+  border-color: rgb(181, 198, 208);
+}
+.duet-input-container.has-adornment.readonly .duet-input-relative,
+.duet-input-container.has-chips.readonly .duet-input-relative {
+  border-color: rgb(212, 223, 229);
+}
 .duet-input-container.has-adornment.has-focus .duet-input-relative,
 .duet-input-container.has-chips.has-focus .duet-input-relative {
   outline: 2px solid;
@@ -637,6 +652,10 @@ duet-caption:not(:last-of-type) {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 42, 59) !important;
 }
+.duet-theme-turva .duet-input[readonly] {
+  color: rgb(53, 79, 101) !important;
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva .duet-input[disabled] {
   color: rgb(95, 122, 143) !important;
   cursor: not-allowed !important;
@@ -671,6 +690,12 @@ duet-caption:not(:last-of-type) {
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
   border-color: rgb(120, 145, 164);
 }
+.duet-theme-turva.duet-input-variation-revealable.disabled .duet-input-relative {
+  border-color: rgb(178, 194, 205);
+}
+.duet-theme-turva.duet-input-variation-revealable.readonly .duet-input-relative {
+  border-color: rgb(212, 221, 226);
+}
 .duet-theme-turva.duet-input-variation-revealable.has-error .duet-input-relative {
   border-color: rgb(214, 28, 82);
 }
@@ -687,4 +712,10 @@ duet-caption:not(:last-of-type) {
 }
 .duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
   border-color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-input-container.has-chips.disabled .duet-input-relative {
+  border-color: rgb(178, 194, 205);
+}
+.duet-theme-turva .duet-input-container.has-chips.readonly .duet-input-relative {
+  border-color: rgb(212, 221, 226);
 }