@duetds/components 10.3.0 → 10.4.0

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: '6cf20cb225b22fbb826b136c3909234684d30e3d', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '24e57cbe34b4d01ff024fe8128d3168b61e61af6', 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: '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("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-cookie-consent/duet-cookie-consent.css

@@ -48,7 +48,7 @@
   outline-color: rgba(0, 119, 179, 0.8);
   border-radius: 4px;
 }
-.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -101,7 +101,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva, .duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva {
+.duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 

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

@@ -46,7 +46,7 @@ export class DuetCookieConsent {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a0945b87dc3ca428ebb77b5bafc937d26fe77b58', tabindex: "-1", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'e4870573df557f7b4d7a6075afbd04fc23f54ff1', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'd0f1b43a014ccc35c9845c8c4117a8552eee8209', class: "duet-cookie-consent-content" }, h("div", { key: '98d8e55937ee5afda2a8d975ebb0d4e5aefc0014', class: "expand" }, h("slot", { key: '5529c9819da700b849bbf3e0f4b4c93cf4da6015' })), h("duet-spacer", { key: '82e710ce0de7d91f931cbb2177d6470f77701ec4', size: "large", direction: "horizontal" }), h("div", { key: '9cbf5dd3a7d82025a0912ca016b67e1b0f0022fc' }, h("duet-button", { key: '50a246e22443b54c881d40063c0405f07d7190dc', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+        return (h(Host, { key: 'e79333a51d76cf03ac4fdaee8e2795e98d79319d', tabindex: "-1", class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'befef096fcaaf1b57daa84ff54cbe665e84f3a86', class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '78b54949afed67ada604c2ce9dea9c2fcb87a39f', class: "duet-cookie-consent-content" }, h("div", { key: '84a2a875986036aad4ba0b68fa2f902cf1148b01', class: "expand" }, h("slot", { key: 'd6402515233aaa20e4c1a3ff9b59647c674fe03d' })), h("duet-spacer", { key: 'aa7b8ad14f32db64dd72219593c7217567920556', size: "large", direction: "horizontal" }), h("div", { key: '9e7c71566df83cc4e3b6224b2fcf623e81a80db2' }, h("duet-button", { key: '5dc91aa2ae5b05394f1dce473b831d490d62eeae', variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
     }
     static get is() { return "duet-cookie-consent"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,13 +25,14 @@ function createDate(year, month, day) {
         }
         return date;
     }
+    return undefined;
 }
 /**
  * @param value date string in format dd.mm.yyyy
  */
 export function parseDate(value) {
     if (!value) {
-        return;
+        return undefined;
     }
     const matches = value.match(DATE_FORMAT);
     if (matches) {

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

@@ -169,17 +169,16 @@
 }
 .duet-date-button:hover:not(:disabled) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva, .duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-date-button:disabled {
   pointer-events: none;
   cursor: not-allowed;
   background: rgb(245, 248, 250) !important;
-  border: 0 !important;
 }
 .duet-date-button:disabled::before {
   display: none;
@@ -202,7 +201,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva {
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -371,7 +370,7 @@
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
 }
-.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva, .duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva {
+.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 :focus .duet-date-table-button {
@@ -380,7 +379,7 @@
   outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
 }
-.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva, .duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva {
+.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-date-table-button.disabled {
@@ -452,7 +451,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva, .duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva {
+.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 
@@ -522,7 +521,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva, .duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva {
+.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 36em) {

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

@@ -51,7 +51,6 @@ export class DuetDatePicker {
         this.focusedDay = new Date();
         this.inputValue = "";
         this.inputHasFocus = false;
-        this.internalValidityError = "";
         /**
          * Theme of the component.
          */
@@ -179,10 +178,9 @@ export class DuetDatePicker {
         this.handleBlur = (event) => {
             event.stopPropagation();
             this.inputHasFocus = false;
-            if (!this._validity.valid) {
-                this.value = null;
+            if (!this._validity.valid && !this.disableBuiltInErrors) {
                 const errorKey = Object.entries(this._validity).find(entry => !!entry[1])[0];
-                this.internalValidityError = getLocaleString(this.dateErrorMessages[errorKey]);
+                this.error = getLocaleString(this.dateErrorMessages[errorKey]);
             }
             this.duetBlur.emit({
                 component: "duet-date-picker",
@@ -258,7 +256,6 @@ export class DuetDatePicker {
         this.handleDaySelect = (_event, day) => {
             const min = parseISODate(this.min);
             const max = parseISODate(this.max);
-            this.determineValidity(day);
             if (inRange(day, min, max)) {
                 this.setValue(day);
                 this.hide();
@@ -273,10 +270,7 @@ export class DuetDatePicker {
         this.handleInputChange = (e) => {
             this.inputValue = e.detail.value;
             const parsed = parseDate(this.inputValue);
-            this.determineValidity(parsed);
-            if (parsed || this.inputValue === "") {
-                this.setValue(parsed);
-            }
+            this.setValue(parsed);
         };
     }
     /**
@@ -285,19 +279,15 @@ export class DuetDatePicker {
      * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
      */
     get validity() {
+        this.determineValidity();
         return this._validity;
     }
-    updateValidity(newValue, _oldValue, propName) {
-        if (propName === "value" && newValue === null) {
-            return;
-        }
-        this.determineValidity(parseISODate(this.value));
-        if (this._validity.valid) {
-            this.internalValidityError = "";
-        }
+    updateValidity() {
+        this.determineValidity();
     }
     updateInternalValue() {
-        if (this.value === null) {
+        // don't clear input when user has focus there
+        if (!this.value && this.inputHasFocus) {
             return;
         }
         const parsedValue = parseISODate(this.value);
@@ -316,7 +306,7 @@ export class DuetDatePicker {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.determineValidity(parseISODate(this.value));
+        this.determineValidity();
         this.updateInternalValue();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
@@ -403,13 +393,14 @@ export class DuetDatePicker {
     setFocusedDay(day) {
         this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
     }
-    determineValidity(date) {
+    determineValidity() {
         var _a, _b;
+        const valueAsDate = parseISODate(this.value);
         const inputValue = (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-        const badInput = inputValue !== "" && date == null;
-        const valueMissing = this.required && date == null;
-        const rangeOverflow = date ? !inRange(date, null, parseISODate(this.max)) : false;
-        const rangeUnderflow = date ? !inRange(date, parseISODate(this.min)) : false;
+        const badInput = !valueAsDate && inputValue !== "";
+        const valueMissing = !valueAsDate && this.required;
+        const rangeOverflow = valueAsDate ? !inRange(valueAsDate, null, parseISODate(this.max)) : false;
+        const rangeUnderflow = valueAsDate ? !inRange(valueAsDate, parseISODate(this.min)) : false;
         this._validity = {
             patternMismatch: false,
             customError: false,
@@ -423,6 +414,9 @@ export class DuetDatePicker {
             valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
+        if (this._validity.valid) {
+            this.error = "";
+        }
     }
     setValue(date) {
         const newValue = printISODate(date);
@@ -430,6 +424,7 @@ export class DuetDatePicker {
             return;
         }
         this.value = newValue;
+        this.determineValidity();
         this.duetChange.emit({
             component: "duet-date-picker",
             value: this.value,
@@ -480,13 +475,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '2f9dd355a80f9ed65cc0cfa90d674f426bad4c59', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c023088cf474e2b460139486e85974f53963981', class: "duet-date" }, h(DatePickerInput, { key: '0c678c083138be043f01d6df1522e385a7ee122a', 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 || (!this.disableBuiltInErrors && this.internalValidityError) || null, 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: 'efec9f5c773e36d4e418dac06036390b50bff2a5', class: {
+        return (h(Host, { key: '5ebd34bf6ba1033b890138e5523f45fecd17eaf4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c4b995485be3c6b070ce738f3416db0d9683771', class: "duet-date" }, h(DatePickerInput, { key: 'c0b308099cd5c56790a1160d10a682551ce9da7e', 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: 'cca008327d5a939054a1b2abd748b08170b19a07', 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: '130f52a0f0194b1186619bf6426f97a68c079c11', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'b4c229e9d91c822d87702677e213f8753f344017', moveFocusTo: this.focusedDayNode }), h("div", { key: '3ce07367a559781b9872669665186af5572305ca', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '7740bce6549fc3423947947f68d7e8950baa440d', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '2d80551888be784d8ea12b74c43df593c4701e83', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '27d2994191b94efe00484fbd25d96537d6ed11b2', margin: "none" }, this.label), h("button", { key: '82cf74d2d7aff047562d13320496248d352c1e82', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '92b2e5fd52e4206c00acfd56e0d515d08e4527b1', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '738da11657cbac3ed52ef22490165f4ac76c6ea6' }, text.closeLabel))), h("div", { key: 'e8922fed8ac11149bb603c912d278c0b3843b214', class: "duet-date-dialog-header" }, h("div", { key: 'e922554dbea94dfa70e62983ee6a0b08f8e159d7', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '873ba9c661e3c280c88fffc510dcceab0b2d5863' }, h("h2", { key: 'c769e12a0c0c668164d25d7864a711d0f9268f09', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '5941e8d2cd0f5baec6001808c68cb4c51b37db86' }, h("label", { key: 'bee65da8486f65afe8d18e90b1daed308dda8864', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f9fd8b52eaa90fd555d737e2691b51260592101a', class: "duet-date-dialog-select" }, h("select", { key: '83b7003769bf0042228e2ed36ad4118e8f0f1ab2', 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: '1d9bbde4fcc96fbcaf2d714ecc34a58c755dfc7d', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '3c4be7bf8fefa6ee1f5cede7eeb34ebfeaae35a1' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: '4eece4a65cb58ba45a30e4fd2cf179d61b05625f', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '700e9f50a74a6113c33f149427169ae9917badc0' }, h("label", { key: 'c5f8403791830d9b0ad68ed66af8c3f1c26310e3', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '2c69022a45ab3effd4c907cc6d5c5a508bbb99f7', class: "duet-date-dialog-select" }, h("select", { key: 'fee0495e004775929f7b7aeb66278ac8b4fd003d', 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: 'e50ff66c34ee36e965843e68e1fb3d26690ce1ed', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9808b372ac9fea0ce5c51acee5ee407d5906e3f1' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '90c5c74c91d9e3df13e70987f66c2964feca8cf5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'f66a8e9e9fba23a7a8c9d871f1ff0bbfa6b39b37', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'fe1df2d1456357c2ae731b66c302c45a33f40d06', 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: '86db10ad2c3d1ab190690ae65d4c778084194089', 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: '741527916476f5959328595373dc3e11b02b0df2', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'de920ae43a19a7ca9790056fd3a9f51a08039d4f', 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: 'fcb2d3f3fd5333529c2ebc82590a6a543112a5f4', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '0de38fdb796337ec9448bcff1bb652776fdf6f60', moveFocusTo: this.focusedDayNode }), h("div", { key: '9950afbc58987e498e2e6734fd6af177c65d94a8', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '2394f33f1efd2e0626b2a1bc3642a73193798b13', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '74b68ad35d92ab0c2616be5466ea6b8b2c1a1451', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '7385d9ef814cf4557cf903f705b38a7571369d0f', margin: "none" }, this.label), h("button", { key: '5ba61af3c6b024f1f3ef531b412e5c20243d83ca', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '14e320af49eb06c184cfe918a67f278bdac888bf', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'b58668ebd6f0849ae6e8f0454800b4ceb916443e' }, text.closeLabel))), h("div", { key: '79a07d6373ca479f45808ff3eef1ea6239148b26', class: "duet-date-dialog-header" }, h("div", { key: '6f08a300db74dd1562c658334c8220fc1569228c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '400b1451a2180e0a189a5c1e7c27139647ec5539' }, h("h2", { key: '47225d656584304da5b114f0430e17cb74a38e53', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'b66a24df41db7807ed3c0d3f36d380a897360fa6' }, h("label", { key: 'aae8cf780c5452e1399421e177309ad7a9179803', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f2bad2498489114a7bc0ffd6fc8c4f842b507e43', class: "duet-date-dialog-select" }, h("select", { key: '9d58e711523ace0781cc27947fb9ecc52bda8499', 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: '914f0bef1d172d4d5391991fd9f8206f7d0576df', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '7aebf3e0cbc22a117a5e155e0dd4518189f9b946' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'faf140d4032093b37db295f06e23ea761fa27c65', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '66399d5d57f605fe4db9c13ee13bcf89f4d38efd' }, h("label", { key: '76256efb6db83d4165a903420b70e9a6d43a2e49', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'e871aa90559d85cad33752f52a6e538571e6984f', class: "duet-date-dialog-select" }, h("select", { key: 'af2e90cb3d28123c36c83853753be30beff06400', 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: 'a1487d1853c56fc62c20bf2b3df60cc73d666017', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ad43c7efa4a93e4417c2051e000fe0f786b35612' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '5c42115e3dd7c4a48e5cae87b5f03ed274087ba5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'bc63edbea7a3b069774fc0b8766983f570479501', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e3cb3ade86eeedbaf914d104ce9b638109708eb6', 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: '3d1b9df7ab5852d770d6c98285b73e002a9f4468', 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: 'fb66dbdf2065a158a265490a6f7c0ace038919d5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: 'b40a59659930ae4a47fb6d8dd45f334e5fcdf026', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -780,7 +775,7 @@ export class DuetDatePicker {
             "error": {
                 "type": "string",
                 "attribute": "error",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -1154,8 +1149,7 @@ export class DuetDatePicker {
             "open": {},
             "focusedDay": {},
             "inputValue": {},
-            "inputHasFocus": {},
-            "internalValidityError": {}
+            "inputHasFocus": {}
         };
     }
     static get events() {

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

@@ -32,7 +32,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: 'fc0e7562cb30da77115c7a07938f9d586df909d5', class: {
+        return (h("div", { key: 'a833c22a31c93caea94753696848ad720b5dc06d', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -206,7 +206,7 @@ export class DuetEditableTable {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: '5b1b28e6321b07a1d385c1945f15b0c110a8b068', class: {
+        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -216,7 +216,7 @@ export class DuetEditableTable {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '47a4b4e9d3acf3ca83e70c1aa4e7758e1f6cbbbe', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '975344f17b9271b8ffa4264751aa2dae69279f45', role: this.accessibleRole }, h("caption", { key: 'e9039bfd4c5bf90f96856d13d993be7f13fa2d73' }, h("slot", { key: '38a7cd2c82e45ebcc080e1e20f3f77aa2a46973d', name: "tcaption" })), h("thead", { key: 'c4a02a18bfae96669f45328f6198dc52f43dd887' }, this.hasHeadSlotFirst && (h("tr", { key: 'af846dfeba040ddec43065803327195bea76a404' }, h("td", { key: 'c002827f8c8c6cce8d8d4415c80e4f39d4bb1ed6', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '5673bc937f4bc87b67f6112f59a1981ff7f02c79', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '79a45db93db0d6e5e35aade928f23032efdb821b' }, h("td", { key: 'fddd1434bf5a20188be229e5c3d9bde03b8d8dca', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '53b1ea3494b7e0f39426232f922a040eacf3a0f0', name: "thead-last" }))))), h("tbody", { key: 'b5d38eed528592d29f64f749e1938d0ff5b772b3' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'e2ef34f7d078a7ac7b4a38cd5953b449ce682a23' }, h("tr", { key: '9f2a92be2f425c419abd5fa1a0a7fb763cc0426b' }, h("td", { key: 'da2eeda1f65004cc2c197dad36038dc4a60c2e8e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: '988c400cb8046f0544293b8e1555f7b213f9def6', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
     }
     static get is() { return "duet-editable-table"; }
     static get encapsulation() { return "shadow"; }

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);
 }