@duetds/components 10.3.1 → 10.4.0

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

@@ -176,7 +176,9 @@ export class DuetChoice {
             input.disabled = this.getDisabled();
             input.id = this.identifier || this.choiceId;
             input.type = this.type;
-            input.name = this.name;
+            if (input.name !== this.name) {
+                input.name = this.name;
+            }
             input.value = this.value;
             input.checked = this.checked;
             input.required = this.required;
@@ -422,7 +424,7 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '20fca5910765c8cca647f5632a5b922957ab3295', class: {
+        return (h(Host, { key: 'c4b3a5c501d38245acc5af3e2b9f544bd0bf7072', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 [`horizontal-responsive-${this.groupResponsive}`]: this.groupDirection === "horizontal" && !!this.groupResponsive,
                 "vertical-stretch": this.groupDirection === "horizontal",
@@ -431,10 +433,10 @@ export class DuetChoice {
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: 'fd4d2187540b58f67ba2215fb1e92ae80e1bda59', class: {
+            } }, h("div", { key: '795598769dac455ce019fafc78a0da012fab367e', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: '767518376936e2ac6b0317ed2961c9832a9540f9', class: {
+            } }, h("div", { key: '7c2d292a71e2c29410fe1b25b23f21d2331a2441', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -443,16 +445,16 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, h("slot", { key: '3218ec3ce6232219942048b1dc4720e6544d5a8e', name: "choiceinput" }), h("label", { key: '43d66fc0a5fbe3dc91ba24b1b9a61bfe1565c9c4', class: {
+            } }, h("slot", { key: '7c8737f5f56691e6d91b1ef6aa88d4d429a91853', name: "choiceinput" }), h("label", { key: '956d1a8a3e617e20822cb45e16510552377c689a', class: {
                 "duet-choice-label": true,
                 "has-before-text": this.hasBeforeText,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '144d416819882f6ef4d1b7e8fc2de04e045e9e6f', name: "before-text" }), this.icon && (h("div", { key: 'adfb01ba2ba8dd118a9780ec2e01db2efa75c0ce', class: "duet-choice-card-icon" }, h("duet-icon", { key: 'abf48b519c4d60cc2ce9923eaf6a1830061a13a6', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: 'ddccee835dbdc2c123fc51ec2ced2539515f5e07', class: "duet-choice-card-text" }, h("div", { key: '68c2770f71856d031a720d03242809bcae202624' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '67a7ead271ee52570028c6f2ce64267c9b7e687d' }, h("duet-spacer", { key: 'eb726497b2e68a5ddc43486af8fa621e4a620dd0', size: "xx-small" }), h("duet-caption", { key: '7656a138b5d881f6aaa5ce978816d550d30debd4', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: 'ed0700c59f2e492ba38dd03f1157332ac5794003' }, h("duet-spacer", { key: 'e45435defc128599b911095c8d845a4b19b5085c', size: "xx-small" }), h("slot", { key: 'aff1622080409265769aad87862ad14e6f4e96a1', name: "additional" })))), h("div", { key: '01f506c4af993b10b3f651a4175a3f93288ffac4' }, h("div", { key: '9d328e36a1e61a1ebec8bc5bab0fdbce0ba03cc2', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'ebad90b11052d439d9a9c3243fa32a621d770215', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: 'a1d78aab1bd360876936e79ad1c8a00d534ad2d5', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: '8e06e00faf592c2217bcdf4125de0a3fbe688226', name: "before-text" }), this.icon && (h("div", { key: 'a03eb510213a5dacea0ea1a8fba5c59e3f7b5adf', class: "duet-choice-card-icon" }, h("duet-icon", { key: '6f1da454489ebc91e044c73bcaa72e4dc0cbc434', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '7ae5d20c3621b1ea86a08e01752a1501f4c6141f', class: "duet-choice-card-text" }, h("div", { key: '48924d49aa8990d06b898d5e859d3259340424f3' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '159e947250b2e752ede4b9e1cc239a17beb56e4a' }, h("duet-spacer", { key: '841d4ceb579eafb87c381f78c4a62d6943480702', size: "xx-small" }), h("duet-caption", { key: 'da80efff2d5db1ac58bcba1074d2acd8ebe49fc4', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '990e772b8ed9d22a20f5a6718d5884d49135b6b1' }, h("duet-spacer", { key: '691495c8aeb63a55951a36c28f15bcb049c9d36e', size: "xx-small" }), h("slot", { key: 'ba5ca5f8c750aa685ae9560f482401e315e1700b', name: "additional" })))), h("div", { key: 'a5a27faf19b806f0cbe5d78c751acbc05cd70a4e' }, h("div", { key: '5191f1bc54972485f2850139cf7dedb0c66e0f69', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'abe835c0eb8f2917a1e1e87b883d9a43c8883ae6', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '232418bd6f978e77039ebea2bdea0388efeae571', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
                 "duet-choice-info-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: '8c394a1cc633e65e9f8c9162fbe4c361e37a15f6', class: "duet-choice-info-icon" }, h("duet-icon", { key: '52c25fe2a72346e9efde109af0736ec6673dfc0e', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'dda02c201e7874c64ed98b6b48e30f734bc8ecb8', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'cd5726ddd6b87acb1c4a8b0661906c4555c8371a', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'd2d3d9bc3e7862c2f01ba3b2ad27dd7662c0a8a4', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'eab4a0209ba1f4fe2bb7a4be8971f843a67b77e6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
                 "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
                 "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
             } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
@@ -1316,32 +1318,3 @@ export class DuetChoice {
     }
     static get elementRef() { return "element"; }
 }
-/*
-
-{this.type === "checkbox" && (
-              <input
-                class="duet-choice-input"
-                type={this.type}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onChange={this.onChange}
-                disabled={this.getDisabled()}
-                required={this.required}
-                id={identifier}
-                name={this.name}
-                value={this.value}
-                checked={this.checked}
-                aria-label={this.getLabel()}
-                aria-controls={this.accessibleControls}
-                aria-activedescendant={this.accessibleActiveDescendant}
-                aria-labelledby={this.accessibleLabelledBy}
-                aria-details={this.accessibleDetails}
-                aria-description={this.accessibleDescription}
-                aria-owns={this.accessibleOwns}
-                aria-describedby={this.getAriaDescribedby()}
-                onKeyDown={this.handleKeyDown}
-                ref={input => (this.focusableElement = input)}
-              ></input>
-            )}
-
-*/

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

@@ -183,14 +183,14 @@ export class DuetChoiceGroup {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '76d5ad8cc7a9f59c9ab08932b3e6e6596ff1f9d0', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, class: {
+        return (h(Host, { key: '39267534dcf19f7f942ef44d869d302552ad8463', 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: 'ade69113f55cbcc86f0504f857ede704aa4c0075', 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: '388b1ccb2ac2ba51cb35dbe6f9f824183f0d3f0f', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '104f30e94ea5413347edb6abc1975fcd9ae8ad6c', name: "tooltip", slot: "tooltip" }), h("div", { key: 'af118f2f9fef2e7c2a6aa8d242bdd0cb4001f328', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'ebb96354e1a32cb4821ad6700e0cdbe1087ee815' })))));
+            } }, h("duet-fieldset", { key: '1e292babf2206d42d58c46f88bed02959e595dc1', 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: '435735b34c7f437aba23bda2eebd7fa78aa30f3d', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '390312b35af123116ec5919b31f61d9499559813', name: "tooltip", slot: "tooltip" }), h("div", { key: 'fb68426f6c7feac6c767511bcaccfb6585515e3e', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: '5b26fd1d7d1239fdcdcb6d736445a6366995c3bc' })))));
     }
     static get is() { return "duet-choice-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,6 +20,7 @@ export class DuetCombobox {
         this.activeDescendantId = createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isInsideModal = false;
+        this.labelClick = false;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
@@ -104,8 +105,18 @@ export class DuetCombobox {
             const newValue = e.detail.value;
             this.inputValue = newValue;
         };
-        this.onInputClick = () => {
-            this.popupMenuController = this.input.nativeInputElement;
+        this.onInputClick = e => {
+            const composedPath = e.composedPath();
+            if (composedPath && composedPath[1].nodeName === "LABEL") {
+                this.labelClick = true;
+                this.listOpen = false;
+                return;
+            }
+            if (this.labelClick || (composedPath && composedPath[0].nodeName !== "INPUT")) {
+                this.labelClick = false;
+                this.listOpen = false;
+                return;
+            }
             // change listOpen on next tick so popup controller is set when open changes
             setTimeout(() => {
                 var _a, _b;
@@ -183,7 +194,6 @@ export class DuetCombobox {
                     return;
                 }
                 nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-                this.popupMenuController = this.input.nativeInputElement;
                 // change listOpen on next tick so popup controller is set when open changes
                 setTimeout(() => {
                     this.listOpen = true;
@@ -356,7 +366,7 @@ export class DuetCombobox {
         this.input.chips = this.multiple;
         this.input.addEventListener("duetChange", this.onInputChange);
         this.input.addEventListener("duetInput", this.onInputTyping);
-        this.input.addEventListener("click", this.onInputClick);
+        this.element.addEventListener("click", this.onInputClick);
         //add correct aria attributes to the input element
         this.input.role = "combobox";
         this.input.accessibleExpanded = this.listOpen ? "true" : "false";
@@ -366,13 +376,20 @@ export class DuetCombobox {
         this.element.addEventListener("keydown", this.onKeyDown);
         connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelDefaults" });
         this.processListOpenChange();
+        setTimeout(() => {
+            var _a;
+            const nativeInputElement = (_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeInputElement;
+            if (nativeInputElement && this.popupMenuController !== nativeInputElement) {
+                this.popupMenuController = nativeInputElement;
+            }
+        }, 100);
     }
     disconnectedCallback() {
         if (Build.isServer) {
             return;
         }
         this.input.removeEventListener("duetChange", this.onInputChange);
-        this.input.removeEventListener("click", this.onInputClick);
+        this.element.removeEventListener("click", this.onInputClick);
         this.element.removeEventListener("keydown", this.onKeyDown);
         this.resizeObserver.disconnect();
         disconnectLanguageChangeObserver(this);

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

@@ -47,10 +47,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: 'a08fac4daef7586a885d4556d27260feb027d4fb', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd70cc29e06be46210e3150661f16bcf19fab27b1', class: {
+        return (h(Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', 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: '4cde139368ebb252e83638d0634671f2167b14a0' }, this.name && (h("duet-heading", { key: 'c91fe7f5ef066de893cfa2fb4018e9b17e5e66af', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '9ef8bdab5f11c125115cfa147428327131e6086a', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: 'd07bbb21d8963247655a3b172e26c9f1becc2fd2', class: "email" }, h("duet-icon", { key: 'd25b13911b29302d0eabc8f715e13ff59b473c7f', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '2765a6cbc0fb671c3cb8a37d7ac2fe578f369cfe', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fcbed4d2a82ed0ee1e90665f5e42f10bfdcaf344', class: "phone" }, h("duet-icon", { key: '17233a8a4863c68255e207c23de3667437bd1177', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '0a49811728ddfd13096701fe9d33c54722554107', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'eb199cf8f4f83cb7ebebbfb2e791c78b6424091e', class: "call-to-action" }, h("duet-button", { key: 'c8e0d2d72d5b15a74b0d7fd79a595c6ffddf6f7e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '5e2f0915b883c85ad3bca3f54b62347af8250749' }), h("slot", { key: '388383ea2ca2a756a28d13bdbf521cd85094526a' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,7 +179,6 @@
   pointer-events: none;
   cursor: not-allowed;
   background: rgb(245, 248, 250) !important;
-  border: 0 !important;
 }
 .duet-date-button:disabled::before {
   display: none;

package/lib/collection/components/duet-empty-state/duet-empty-state.css

@@ -40,10 +40,63 @@
   color: rgb(8, 42, 77);
   text-align: center;
   background: rgb(245, 248, 250);
-  border-radius: 4px;
+  border-radius: 12px;
+}
+.duet-empty-state.padding-small {
+  padding: 36px;
+}
+.duet-empty-state.padding-large {
+  padding: 72px;
+}
+.duet-empty-state.warning {
+  background: rgb(255, 247, 221);
+}
+.duet-empty-state.duet-no-background {
+  background: none;
+}
+.duet-empty-state > div {
+  max-width: 800px;
+  margin: auto;
+}
+.duet-empty-state .duet-empty-state-heading {
+  font-size: 4vw;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.25;
+  color: rgb(8, 42, 77);
+  letter-spacing: 0;
+}
+@media (max-width: 27.5rem) {
+  .duet-empty-state .duet-empty-state-heading {
+    font-size: 1.1rem;
+  }
+}
+@media (min-width: 28.4090909091rem) {
+  .duet-empty-state .duet-empty-state-heading {
+    font-size: 1.1363636364rem;
+  }
+}
+@container (width < 576px) {
+  .duet-empty-state {
+    padding: 36px;
+  }
+  .duet-empty-state.padding-small {
+    padding: 28px;
+  }
+  .duet-empty-state.padding-large {
+    padding: 48px;
+  }
 }
 
-.duet-empty-state.duet-theme-turva {
+.duet-theme-turva.duet-empty-state {
   color: rgb(23, 42, 59);
+}
+.duet-theme-turva.duet-empty-state:not(.warning):not(.duet-no-background) {
   background: rgb(245, 246, 247);
+}
+.duet-theme-turva.duet-empty-state .duet-empty-state-heading {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 700;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -10,9 +10,26 @@ export class DuetEmptyState {
          */
         this.theme = "";
         /**
-         * Icon shown in the empty state component.
+         * The variation of the empty state component. Use "warning" when the empty state is due to an error.
+         */
+        this.variation = "default";
+        /**
+         * Set background to "none" when no background is wanted, e.g. inside a table.
+         */
+        this.background = "auto";
+        /**
+         * Icon shown in the empty state component. For warning variation a status icon is always used.
+         * Use value "none" for no icon at all.
          */
         this.icon = "messaging-question";
+        /**
+         * Heading to show above the component content
+         */
+        this.heading = "";
+        /**
+         * Padding of the empty state component
+         */
+        this.padding = "medium";
         /**
          * The size of the empty state message.
          */
@@ -24,16 +41,25 @@ export class DuetEmptyState {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    getIcon() {
+        const size = this.size === "small" ? "large" : "x-large";
+        if (this.variation === "warning") {
+            return h("duet-status-icon", { variation: "warning", size: size, strong: true });
+        }
+        return h("duet-icon", { color: "currentColor", name: this.icon, size: size });
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9018087936c4abe5adead5d4fe62991ea84b3dc1' }, h("div", { key: 'a0aa84fb06673f4d741891019a98fd7d4f03b174', class: {
+        return (h(Host, { key: '83c41a104ebe8f29f18a2d0754a822981edd2204' }, h("div", { key: 'c2b928a204ec58089c46368f0e7a73f2f6880633', class: {
                 "duet-empty-state": true,
+                [this.variation]: true,
+                [`padding-${this.padding}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-                "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '8d9265fb0946a832c1c386b139b28b775ade9936', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '87abfa72d165e96e3ca1798ab0023e13d540d757' }, h("slot", { key: 'fc437b4821cbc146906f8c33aa06d4718a0584b2' })))));
+                "duet-no-background": this.background === "none",
+            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: '8b6f183f2022ef6a5d00b93cb4b345d93e310d45' }, h("strong", { key: 'fd7369964488e3821b00cbf3493fa873ee5a969e', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7b96f48b9587efa581fc84b2205a32e839e03ee7', size: "x-small" }))), h("div", { key: 'ea6a1f4c70a824c705e8f644f8e58f9768db8317' }, h("slot", { key: '77c8aa58fa27abf0635ea22f22fd7d5c06d151dc' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -75,12 +101,58 @@ export class DuetEmptyState {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "variation": {
+                "type": "string",
+                "attribute": "variation",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStateStatus",
+                    "resolved": "\"default\" | \"warning\"",
+                    "references": {
+                        "DuetEmptyStateStatus": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variation of the empty state component. Use \"warning\" when the empty state is due to an error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "background": {
+                "type": "string",
+                "attribute": "background",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\"",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set background to \"none\" when no background is wanted, e.g. inside a table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetIconName",
+                    "original": "DuetIconName | \"none\"",
                     "resolved": "string",
                     "references": {
                         "DuetIconName": {
@@ -94,13 +166,59 @@ export class DuetEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon shown in the empty state component."
+                    "text": "Icon shown in the empty state component. For warning variation a status icon is always used.\nUse value \"none\" for no icon at all."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"messaging-question\""
             },
+            "heading": {
+                "type": "string",
+                "attribute": "heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading to show above the component content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStatePadding",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DuetEmptyStatePadding": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStatePadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding of the empty state component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
             "size": {
                 "type": "string",
                 "attribute": "size",

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: '150ed749bb02f820ab14416d153e67cea52dc29e', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '17055f020b42050cfc12e5954edaac9c6658788e', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '1cf7a2d88bbcea640fe06e19ce4b2d633be56c3b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'aec7db3663b9cc1c1ac2205ab103c708c56a0573' }, this.label), this.caption && h("span", { key: '849cec9875e1713b0c53ee81ffdcb33b501a78b1' }, this.caption)), h("div", { key: '319c243237ed47fe584e7498514a3f392d9b8b19', class: {
+            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: 'c69484583f6027412eb7d50a33af3db48a4b9755', class: "duet-fieldset-label" }, h("span", { key: 'b8df8f29e780738665c0a054399d1d1f97f5e7ea', "aria-hidden": "true" }, this.label), h("slot", { key: '18d94da36179d4ba5b78c3ed6ac83f41d401c067', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '5ceb8c432f19ab8b18d04ce12f6463e563a7459a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c6f433f3e47f2e2fdedcbc158d169ab6bea4a0a0', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'b8a61deb6211c5abbc806d2762088fcedb936873' }), h("span", { key: 'a6c68e7ef61365792b92fc6ef7290d3b3a3cdd65', 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: '4fea45e086a99437a8f7ddc0e1617a3a6046beed', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -48,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '4990de1bf699e3f0daea24f507a9b9e252b11d9a' }, h("duet-visually-hidden", { key: '0a226f6f53a8da89230e81df8be61a2413c44af1', "aria-hidden": "true" }, h("input", { key: 'a8a8e3bfc73847a74ea8dc8dff0da0c16d510e15', ref: input => {
+        return (h(Host, { key: '96ed40ea2f9ae846c2ad9654c04511e312933fcd' }, h("duet-visually-hidden", { key: '2092c91fbf71c47a422748e27741c8a2695d4d5f', "aria-hidden": "true" }, h("input", { key: '1e83b554493c852b23e14bd801f8c48a42c8790e', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -160,16 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: 'cded4930f82ba556fe630d4295e351cbbb2082e2', class: {
+        return (h("footer", { key: '803a027abb0c9d387f880a40cf4fa48cfdc96ab0', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '937096c43e34404c84fa15418efd41c5692f6ac1', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '865c6932f382aba543ca23c1bd4ab5aab4885b0a', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '46da624a2ea71bc94e7029110f2aa4b264e21a0b', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'bb5d3de968dc4d893e002294a3ab5106ca3676ad', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '5a4e9f746ddacca61409f6d398474e142ddffe81', class: "footer-top-logo" }, h("duet-logo", { key: '9a80fbca3c693fdc4a659b4644b0de9ed23c6773', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'ca9651a3a6c65b51931f237bc81d6f95fe779134', class: "footer-top-right-container" }, h("slot", { key: '7c84d38abbbc5618d311e8ef263a4a1aef8ae2b7', name: "info" }), h("div", { key: '488bde039351fbbf7618daaaa071b3420662e317', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '33805ebcfc7766486807318270595db1deedbb24', name: "extra" }), h("p", { key: '90ac218478d2659b7f74bb370d8066fd7ef7cf1c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '957a273602b782e88c3e4bd9ae639a68cfd8b966', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'd96e17ca5743ed26b331ecd377b6210dcf3e5a2a', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'b1495de197bbd8ab5a4ca4c0feddf656e4bfc0b3' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '8be41d3d9944acb6903a6f3caff06d6f8f9cd5cc', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: 'a3c27f3c9fbf54263b0e632307fe2ed39aeb9e46', class: "footer-top-logo" }, h("duet-logo", { key: '5f7440b81f78389724830f3e843c71de140ae05d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'f0a8b5cdda02fbd0fbff1015320572900e12a16e', class: "footer-top-right-container" }, h("slot", { key: '2c9e48c0350b76dbb74c59cfbca727d1c579b7a5', name: "info" }), h("div", { key: '4df2f42f2dc49b084a94de90de892adac97866c9', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '51d5f56fe14519205709b1cb02bcfa1b87e6a3c2', name: "extra" }), h("p", { key: '3e2b620a21d109d0f4119d5b2a8a1a5c1404ec5c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9a5becef9ceb454715ee6f560e3f9df8ae72357a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '34b3c5e0d44b6a0497b7983ddde14380175618cc', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd7defe3bd130ba7fb71731f71860351dbca3d726' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '4c708db5c94a113edcda458bd9375cdb382a3237', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -389,6 +389,29 @@
   }
 }
 
+:host(.duet-grid-variation-grid.duet-grid-no-row-gap) {
+  row-gap: 0;
+}
+
+:host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+  column-gap: 0;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(8, 83px);
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, 91.6666666667px);
+  }
+}
+
 :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
   grid-column: 1/span 4;
 }

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

@@ -44,6 +44,11 @@ export class DuetGrid {
          * CSS grid based templates that can be used to create pre-defined layouts.
          */
         this.gridTemplate = null;
+        /**
+         * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first
+         * is row-gap and the second column-gap. Does not apply to button-grid.
+         */
+        this.gridTemplateGap = "auto";
     }
     validateAlignment() {
         if (this.alignment === "form_distribute") {
@@ -203,7 +208,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ad66e7c93a876e1c16fcd3e463dfbac854f9572b', class: {
+        return (h(Host, { key: 'e83b3b47e6285da96df9121db761bc7c5feddd65', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -230,7 +235,9 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: 'cb6c2453668b0a2ea8b90eb003a61f78585576a0' })));
+                "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
+                "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
+            } }, h("slot", { key: 'f53c15eef6edec556ff4200a95675a2feb5574e4' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -435,6 +442,26 @@ export class DuetGrid {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "gridTemplateGap": {
+                "type": "string",
+                "attribute": "grid-template-gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\" | \"auto none\" | \"none auto\"",
+                    "resolved": "\"auto none\" | \"auto\" | \"none auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first\nis row-gap and the second column-gap. Does not apply to button-grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
         };
     }