@duetds/components 10.5.0 → 10.7.0

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

@@ -28,9 +28,11 @@ export class DuetChip {
         /**
          * Variation of the chip.
          * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
-         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
-         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
-         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with
+         * a value. Filter can also be used with a popup-menu - then the initial text describes the type of category of
+         * filtering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,
+         * and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,
+         * and it should be used with a value and name.
          */
         this.variation = "button";
         /**
@@ -64,6 +66,10 @@ export class DuetChip {
          * Use this property to add an aria-haspopup attribute.
          */
         this.accessiblePopup = "false";
+        /**
+         * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+         */
+        this.accessibleDescribedBy = "";
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -95,6 +101,9 @@ export class DuetChip {
             radioInput.value = this.value;
             radioInput.checked = this.checked;
             radioInput.ariaLabel = this.element.textContent;
+            if (!!this.accessibleDescribedBy) {
+                radioInput.setAttribute("aria-describedby", this.accessibleDescribedBy);
+            }
             if (slotInput) {
                 this.radioInputListenersRemove(radioInput);
             }
@@ -104,13 +113,15 @@ export class DuetChip {
             this.radioInputListenersAdd(radioInput);
             this.focusableElement = radioInput;
         };
+        this.originalFilterChipText = "";
+        this.originalFilterChipValue = "";
         this.popupSetUp = () => {
             const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
             if (popup) {
                 this.popupElement = popup;
                 popup.controller = this.element;
-                const originalText = this.element.textContent;
-                const originalValue = this.value;
+                this.originalFilterChipText = this.element.textContent;
+                this.originalFilterChipValue = this.value;
                 if (!popup.id) {
                     popup.id = "popup-menu";
                 }
@@ -135,8 +146,8 @@ export class DuetChip {
                         }
                         else {
                             clearActive();
-                            this.element.textContent = originalText;
-                            this.value = originalValue;
+                            this.element.textContent = this.originalFilterChipText;
+                            this.value = this.originalFilterChipValue;
                             this.checked = false;
                         }
                         this.emitChange(evt);
@@ -287,6 +298,11 @@ export class DuetChip {
     getAccessibleInputChipLabel() {
         return `${this.element.textContent}${this.selected ? ` (${getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
     }
+    getAccessibleFilterLabel() {
+        return this.value !== this.originalFilterChipValue
+            ? `${this.originalFilterChipText}: ${this.element.textContent}`
+            : undefined;
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -331,7 +347,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: 'ebc8f8cba112ee9f682c22ba09f04b05968d4ba2', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '6bf0c0545a457d2917df074d7d263e12e07e3255', class: classes }, h("button", Object.assign({ key: '51780aa4be42824dd17784e59b17ff23cdca4ea1', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '52036fee728f26c3b21701d9ed870caf45e9295f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '7ef322e3c74ca552fb91a03d1d4d7cbba4b325e3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b781a521f1dc02c0c7b0792309d4fb730acc5c2d' })))), this.variation === "input" && (h("span", { key: 'c997bfd1f27de93629210b953c9788bdf754538f', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'c1ff3d503dda53884a42637460d048a27fe0d40e', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '73d0e2250e46b6bdd1ffd65f9879e7c9d90da448', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'f5353d825977fb008fb2d71fe796a2c6f4720181', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '2932e26e6266957b80953b2ce275d580466e47ba' })), h("button", { key: '248c016d99211ec7893a1cc74f7ecd268d44d343', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '6172cedf507d0e6f69ea39ce8fa6a4e21b714d11', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: '8c7b88c4c077b7bd4afd0c7bdf36d01f9c9092ae', class: classes }, h("input", Object.assign({ key: 'b97c5cba016483f506521d00100f022160f48680', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'cc082e72c8f2a782f4bfd44afc35daea973c6b08', htmlFor: identifier }, this.icon && (h("span", { key: 'a453948d4d0507fe5dbd080f573d83356f95f35c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '4545c9c75f4ac311e19d9932328eb7e6d8318ac9', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '2dd3e4bc69e6efd4138ba8b74a5fddf52394416f', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '5367a32b3b34e7c67412bd0a0dfa9ace24636687' }), this.popupElement && (h("span", { key: 'edad2d024ba464eea661cd1990629633438b6ba0', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'aa76a07f9446fea95dc61660c92c5bee645f27d4', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '97fe2aee42e9823b794acaeda3df724470c4c832', class: classes }, h("slot", { key: 'f820fe5d09ff67433693698dd9d60848535cab8a', name: "input" }), h("label", { key: '0953b3248cc1c8f6fa46f2684f7fc465bfd0a412', htmlFor: identifier }, this.icon && (h("span", { key: '25e66d3992af529de900ead65488bf64a4c12650', class: "duet-chip-icon-container" }, h("duet-icon", { key: '731d3562a51b7c231d8142c7b0ec8d95675439ab', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '9b041e11ab55414369bcd45962c31263129fd5b6', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '9a9dd5c4ba7e327a2df00f24bb272f61a4061d65' }))))));
+        return (h(Host, { key: '84203a4f6d7de284823eb560bfb95b2aec1ac5e4', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '3c735a109cf161c40ff2eb4cdd3ab6ae9ccd07f1', class: classes }, h("button", Object.assign({ key: 'd91978a69db645b988514f9fe147ff6a0e618f06', id: identifier, "aria-label": this.accessibleLabel, "aria-describedby": this.accessibleDescribedBy || undefined, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '00a9bfa1e9b1654a6b1bdbd47298f54ccdc445f5', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '2f8756f5ffb41e04e5842dab15f1b908086c753d', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '2e791bd8bab1495608208ad696fe9150ddc28e34' })))), this.variation === "input" && (h("span", { key: 'd6a9ece4abe8ebac562a31e3970255bbe4f8eadd', class: classes }, h("button", Object.assign({ key: 'dbb7a3ee7849bb53b58bae7dcb6373ec685de638', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.getAccessibleInputChipLabel(), "aria-describedby": this.accessibleDescribedBy, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '1e0b295b70924c7bbaf945ba1af950f63668c5a8', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '1d5ec89006c85f4b8a630215a19055d863c67416', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '5f52df5a6d4d675f24a6bd927593e336612997f5' })), h("button", { key: 'f056e733dcc146eed6228a060736690a33c40311', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '6f052eca141e3eea229954f7034c479d14c38d6f', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'b573900d3ad93f1e8f49bb1f27e7d1d5e87f1ad3', class: classes }, h("input", Object.assign({ key: 'd558bee064252fff70ef6db2b7292d8e5019bd78', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.getAccessibleFilterLabel(), "aria-describedby": this.accessibleDescribedBy || undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '7f88107a9734bd1142d00dc26ce1ceed694b0904', htmlFor: identifier }, this.icon && (h("span", { key: '35559b51d65f9d609edebe6d641c11f936b43bd2', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a1a51b616e4fb7c9d949bfca74a6cb1a7fa549a5', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '320133b510ed5702a9fd1a30f01deb9b266531f8', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'b1133a5c686b6c8fc8a6f7d16281b25a584f8943' }), this.popupElement && (h("span", { key: 'd6d6785289ba11bfcb83877c45f85e9ad9f43683', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: '3c930adbf23abfeee3d2c5fcbbb151878a4b9a39', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'aa5035fea2416069bc01fe07a28b3da134fdd886', class: classes }, h("slot", { key: 'f861682874396c57779c427fb4f89556884f9434', name: "input" }), h("label", { key: '80a7465dae485bf1cdcbee5b10210dc158c6425b', htmlFor: identifier }, this.icon && (h("span", { key: 'dc5ffe43af42a08253de88bdc17a16022cd3a40d', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'c0b3326871d1f440b1196fdef2d6a6961b8b883f', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'f6d6f16565393969a6945d11f00736726e95aef1', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8ba0c81daff6bc6f966afd5f75582a89f932e8b1' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -360,7 +376,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology. With input variation this is not used,\nas the accessible label is automatically generated."
+                    "text": "Adds accessible label for the chip that is used by screen readers and other assistive technology. Has effect only\nwith \"button\" variation as for the other variations the accessible label is automatically generated."
                 },
                 "getter": false,
                 "setter": false,
@@ -376,7 +392,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
                         }
                     }
@@ -385,7 +401,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nRadio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name."
+                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with\na value. Filter can also be used with a popup-menu - then the initial text describes the type of category of\nfiltering, and the selection from the popup-menu sets the filter value. Input represents items input by the user,\nand the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off in a group,\nand it should be used with a value and name."
                 },
                 "getter": false,
                 "setter": false,
@@ -402,7 +418,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipSize"
                         }
                     }
@@ -431,7 +447,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Id of the DuetPopupMenu that is controlled by the chip."
+                    "text": "Id of the DuetPopupMenu that is controlled by the chip. Works only with \"filter\" variation."
                 },
                 "getter": false,
                 "setter": false,
@@ -647,6 +663,26 @@ export class DuetChip {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "\"false\""
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "attribute": "accessible-described-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
@@ -676,7 +712,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -697,7 +733,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -718,7 +754,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -739,7 +775,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }

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

@@ -33,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '77d8d9cfa205def19022cd899ab98eb36007d2e2', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'b93b32d626ceca01d12390209e700eef8665fd8b', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'fa4d7323cf416248275604e05b261bc1f542ea6e', 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: 'd2a988ecdd6f5d41ce318365966515ff92c252c6', 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/duet-choice.js

@@ -1221,7 +1221,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1242,7 +1242,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }
@@ -1263,7 +1263,7 @@ export class DuetChoice {
                     "references": {
                         "DuetChoiceEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-choice/duet-choice.tsx",
                             "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
                         }
                     }

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: '94d0ad93557a1487328291dec3786b2a54809a33', 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: '21ef6afa85bf7d3dddc001aae2583adbd3dee304', 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: '5ff31a8282e6e7eace9d2bb035d325af2d073fea', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '8e9b7d9abb95cd49f4bbc5fa9a694c2691a32c7d', name: "tooltip", slot: "tooltip" }), h("div", { key: 'be989adb0d4a5794d0132a3ee00979cf1bf79bd9', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '725c965b94dd5e8555d9e2e450ac6d61e74cefb6' })))));
+            } }, 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-collapsible/duet-collapsible.js

@@ -356,7 +356,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleWeight": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
                         }
                     }
@@ -382,7 +382,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleHeadingFontSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
                         }
                     }
@@ -489,7 +489,7 @@ export class DuetCollapsible {
                     "references": {
                         "DuetCollapsibleToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
                             "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
                         }
                     }

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();
@@ -853,7 +844,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     }
@@ -983,7 +974,7 @@ export class DuetCombobox {
                     "references": {
                         "DuetComboboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
                         }
                     }
@@ -1007,7 +998,7 @@ export class DuetCombobox {
                         },
                         "DuetComboboxItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-combobox/duet-combobox.tsx",
                             "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
                         }
                     },
@@ -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.css

@@ -53,6 +53,9 @@
     gap: 20px;
   }
 }
+.duet-contact-card picture {
+  display: block;
+}
 .duet-contact-card .image {
   width: 4rem;
   height: 4rem;

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

@@ -4,6 +4,8 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { DuetPicture } from "../../utils/picture-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
 export class DuetContactCard {
     constructor() {
         /**
@@ -47,10 +49,20 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '6cf20cb225b22fbb826b136c3909234684d30e3d', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '24e57cbe34b4d01ff024fe8128d3168b61e61af6', class: {
+        const pictureSource = {
+            img: {
+                src: this.image,
+                alt: this.name || "",
+                loading: this.imagePriority === "high" ? "eager" : "lazy",
+                fetchpriority: this.imagePriority,
+                class: "image",
+            },
+            sources: parsePossibleJSON(this.sources),
+        };
+        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("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'f3c40c440d2d9dd97e3c1e24817d60e62f6347f0' }, this.name && (h("duet-heading", { key: 'cde7a70f10cfdd45e801c9ef923e116b2ee12e42', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '1c855114d2101701a8b39f75fe8b2ae76d5ffe57', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'b552b0f0de5e16059e77ee518e2087d24a2171c4', class: "email" }, h("duet-icon", { key: '2048a5cb8e29d7d664c984c72031cdfd1894e0a6', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '6e2a9b632e0fb1df3efd51dc66d6df1891eaa3a1', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '1a263f67d1844f9c2ba334ba24ebc32d9faf4b86', class: "phone" }, h("duet-icon", { key: 'dab3c18ed7f4c092aa8644ef6d9a915854c9e33d', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '68c6b2ff4480300f563b7d8d65fb4d47160fcd8b', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '70288a25480b39a333831a129def567c99f202b7', class: "call-to-action" }, h("duet-button", { key: 'c5fccd74b8b2b6b4917b464c5e723c657e326bb0', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '9fd8e574534d15aa89eaac786c257586a6f9f845' }), h("slot", { key: 'ab0fa1cc3232c70441d441e4c673b8b562ffbe92' }))));
+            }, 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"; }
@@ -137,6 +149,50 @@ 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",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSource[] | string",
+                    "resolved": "DuetSource[] | string",
+                    "references": {
+                        "DuetSource": {
+                            "location": "import",
+                            "path": "../../utils/picture-utils",
+                            "id": "src/utils/picture-utils.tsx::DuetSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of sources for responsive images. Sources have the properties of <source> element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "name": {
                 "type": "string",
                 "attribute": "name",

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -127,7 +127,7 @@ export class DuetCookieConsent {
                     "references": {
                         "DuetCookieConsentEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
                             "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
                         }
                     }

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

@@ -5,8 +5,9 @@ import { h } from "@stencil/core";
 import i18n from "./date-i18n";
 import { DatePickerDay } from "./date-picker-day";
 import { getViewOfMonth, inRange, isEqual } from "./date-utils";
+import { isDateDisallowed } from "./disallowed-days";
 import { chunk } from "./utils";
-export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
+export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, disallowWeekends, disallowBankHolidays, disallowedDates, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
     const { dayLabels } = i18n[language];
     const today = new Date();
     const days = getViewOfMonth(focusedDate);
@@ -19,7 +20,8 @@ export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme
     }
     return (h("div", { role: "application" }, h("table", { role: "presentation", class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
         // @ts-ignore
-        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max) &&
+            !isDateDisallowed(day, { disallowWeekends, disallowBankHolidays, disallowedDates }), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
             if (el && isEqual(day, focusedDate)) {
                 focusedDayRef(el);
             }

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

@@ -140,6 +140,13 @@ export function setYear(date, year) {
     d.setFullYear(year);
     return d;
 }
+/**
+ * Check if date falls on a Saturday or Sunday
+ */
+export function isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+}
 /**
  * Check if date is within a min and max
  */

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

@@ -0,0 +1,23 @@
+/*!
+ * Built with Duet Design System
+ */
+import { isEqual, isWeekend, parseISODate } from "./date-utils";
+import { isFinnishBankHoliday } from "./finnish-bank-holidays";
+function parseDisallowedDates(disallowedDates) {
+    if (!disallowedDates) {
+        return [];
+    }
+    return Array.isArray(disallowedDates) ? disallowedDates : disallowedDates.split(",").map(date => date.trim());
+}
+/**
+ * Check if a date is disallowed by any of the given weekend/bank-holiday/explicit-date rules
+ */
+export function isDateDisallowed(date, options) {
+    if (options.disallowWeekends && isWeekend(date)) {
+        return true;
+    }
+    if (options.disallowBankHolidays && isFinnishBankHoliday(date)) {
+        return true;
+    }
+    return parseDisallowedDates(options.disallowedDates).some(isoDate => isEqual(parseISODate(isoDate), date));
+}