@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -47,6 +47,125 @@ export class DuetDatePicker {
                 sv: "Datum krävs",
             },
         };
+        this.open = false;
+        this.focusedDay = new Date();
+        this.inputValue = "";
+        this.inputHasFocus = false;
+        this.internalValidityError = "";
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Expands the date picker input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "";
+        /**
+         * Adds a unique identifier for the date picker input.
+         */
+        this.identifier = "";
+        /**
+         * Label for the date picker input.
+         */
+        this.label = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * The currently active language. This setting changes the month/year/day.
+         * names and button labels as well as all screen reader labels.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Placeholder defaults.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholderDefaults = {
+            fi: "pp.kk.vvvv",
+            en: "dd.mm.yyyy",
+            sv: "dd.mm.åååå",
+        };
+        /**
+         * Hint text to display before the user types into the date picker input.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Display the date picker input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+         */
+        this.disableBuiltInErrors = false;
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Forces the opening direction of the calendar modal to be always left or right.
+         * This setting can be useful when the input is smaller than the opening date picker
+         * would be as by default the picker always opens towards right.
+         */
+        this.direction = "right";
+        /**
+         * Tooltip to display next to the label of the date picker input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
+        /**
+         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+         */
+        this.value = "";
+        /**
+         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+         * This setting can be used alone or together with the max property.
+         */
+        this.min = "";
+        /**
+         * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+         * This setting can be used alone or together with the min property.
+         */
+        this.max = "";
+        /**
+         * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+         */
+        this.incrementYears = 10;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
         this.enableActiveFocus = () => {
             this.focusTarget = "day-button";
         };
@@ -159,43 +278,6 @@ export class DuetDatePicker {
                 this.setValue(parsed);
             }
         };
-        this.open = false;
-        this.focusedDay = new Date();
-        this.inputValue = "";
-        this.inputHasFocus = false;
-        this.internalValidityError = "";
-        this.theme = "";
-        this.expand = false;
-        this.name = "";
-        this.identifier = "";
-        this.label = "";
-        this.caption = undefined;
-        this.margin = "auto";
-        this.language = getLanguage();
-        this.placeholderDefaults = {
-            fi: "pp.kk.vvvv",
-            en: "dd.mm.yyyy",
-            sv: "dd.mm.åååå",
-        };
-        this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
-        this.echoPlaceholder = false;
-        this.disabled = false;
-        this.error = "";
-        this.labelHidden = false;
-        this.role = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.required = false;
-        this.direction = "right";
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.min = "";
-        this.max = "";
-        this.incrementYears = 10;
-        this.accessibleLiveError = "polite";
     }
     /**
      * This offers information relating to the current validity of the component.
@@ -335,10 +417,10 @@ export class DuetDatePicker {
             tooLong: false,
             tooShort: false,
             typeMismatch: false,
-            valueMissing,
             badInput,
             rangeUnderflow,
             rangeOverflow,
+            valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
     }
@@ -398,13 +480,13 @@ export class DuetDatePicker {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: 'b6eb7023664d69420af7bdcc9b9d410982375346', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '000e37d5dc46a2e8d2c5ab5a4780ea59aa6ed464', class: "duet-date" }, h(DatePickerInput, { key: 'a795ccdba4df4bddb94705bba15746eeda04ed4f', 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.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: 'e83795070df263a6c4aeefb2f53caba20628bdf4', class: {
+        return (h(Host, { key: '37f45a71c4032ac634736a6920fb025734c3bbe2', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '61c829b503df044c1b67f460b7dacd7398078cba', class: "duet-date" }, h(DatePickerInput, { key: '8a04908b051939c5c8eb85cf7efdeac0d3a21d6c', 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: 'acd43f63f5682534c6bf78625fe43c6c86a46dc0', 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: '6d725137254f48897b66ee22de8b155bdd1b5f66', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'ca41ba1a3f56fa250f6a70c318bfcef6f457a51b', moveFocusTo: this.focusedDayNode }), h("div", { key: 'dae95bbfd7a1225829c488f5d7190015c75edce2', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '843d37a548ac8bbfc1b22565734562a3aacb9a78', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '0122d3ec3999a339282c52e5b433a364e008697e', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'f12366ba123a38ac9ce9bab84343531cb3e2b814', margin: "none" }, this.label), h("button", { key: 'c84b369fb284cadedbee1b0fc1761c81b010af1e', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '39fa89e90167ba1af7f911be0e3ceda38aaa9641', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '9d33b6103af64e7d894992f54981931676e0151c' }, text.closeLabel))), h("div", { key: '1269835ebe9ff4b854088e6a5bf22fca79b03e16', class: "duet-date-dialog-header" }, h("div", { key: '39f46ed09f80c25530b0f8ef0fce68e6abbbbe88', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: 'e40675ed1793756467a5b0ad0f143de3ff2a1e3e' }, h("h2", { key: 'd550800a84cc85bfd7b6f6c1658f5f4ec69913ce', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '65517cf98d77215c7a98f050ab9b6bb2caca4dce' }, h("label", { key: 'b6252d9a3a0e7caad84964e4075fe3e9733e392e', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'bb09e3d3994bc9c7089723c00e743c176ee926d8', class: "duet-date-dialog-select" }, h("select", { key: '1f3480d735c452a138c63f6b5de1ca37d91eaaef', 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: '92172064bc12ac77ab0d718507c8e7b2ddecd71f', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9d6d5e3488e6e94b339ccba7579529b6315e1b02' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'dafedd887fe57a186da4bf344514518d88d1233e', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '7b0cc5e3adcdd83109ef3248ff6f8511bb90c34a' }, h("label", { key: '14678c1f8035838fbdee98903a9ec0f469fea8bd', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'f69a4b2569e509c3da1c06d36cd4607a779adcdc', class: "duet-date-dialog-select" }, h("select", { key: '1bb3587d15bc53e198e3ad6ba09856bf6c3c5ca5', 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: 'e47f2ae66f07f858fb020b1e458e888f1bc4772f', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '1f8b5df03fc2df12e991094e72b16b904a9f91ef' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '375698ec68186100de9914602f75c44d4a007ed0', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '330f331da1d9a28496c3ac25b902a085ae17a102', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '9b089681d3b58dd0cdbbc5a2f4f09e5f85ba1b3f', 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: '25e3a263e6a550a026f54039f90b64716bf0405b', 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: '8e79a5ae68e17ed6c35a91ef397c4e2d8dd4b223', 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: '51b5470d35cd19e8b3af9f7694a564d8ae0bec2f', 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: '88bd9a51351af2edf1e2e07f155c1eabbff10646', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '08fa3fd43496f0250e63598a879eb03ff81ade36', moveFocusTo: this.focusedDayNode }), h("div", { key: 'a7d8dd867afa616cd47543b8c47a160b710b70f3', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '81c99489839f6ceb28ac6f25f73a0d92f054b0bc', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '404552e44ed007048db39d1d20108c6c38aca2bf', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'd49183b544c8e2a4a23ca281a62b3c4be8a90ebf', margin: "none" }, this.label), h("button", { key: '3adb95e86f08e23c1b60e6e19ec3d9d23467f33f', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'c500a093b3fdae7155e3a5aed30539f009f156c2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '1f23e50c6c479195a622d512ac4ee5d866ebcd9b' }, text.closeLabel))), h("div", { key: '662972a21f2c4cd532471209c9d49e51142f0b25', class: "duet-date-dialog-header" }, h("div", { key: 'fb7cbfa6f3ccded04f8d481447c5847a1293d535', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '8aa30a4e48fcc57ee56d7564284ff219260e8d5f' }, h("h2", { key: '7a40dd8ca6344ac0ccf504ce73b476a3f5e4b0f6', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: '7ef05a1a7fab5bebf6d24bc78bb9789efd85835e' }, h("label", { key: 'b93bb5d18acd17fb2bc22bc43c00d16199d254da', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '72f8d34639a3a7de933c91e781b9aafa8e3fb668', class: "duet-date-dialog-select" }, h("select", { key: 'a09e0ba04dfd0da49e8d141c8b2c520d49a6108d', 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: '85e19eac15e8475ea1a891b49796c2999e9800b8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ae692bf29092ba59affd6258f57ef9dcc1847f2e' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'aed73b3af5c337b8e7ff70699106d3c685206ff1', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '860526bf60d4e94dfd2c19a5eabcd049b8273d82' }, h("label", { key: '6852a9ff1990eddd80f8c0edfa59cc762d68fcc9', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '28bf2d2a99952eb203a2198f558b7ccba9ae99c3', class: "duet-date-dialog-select" }, h("select", { key: 'efafa17aa2c9306af0ca13dbee83cdefeed076b2', 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: '5d9f4154d302ea2733b72a2f613abd9f7f569be8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'a6996b5aa61aa5227048b4eb1b8cb227b0dcda33' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '6c999d099466d7b9ac2dd54ba7cf9b80732d82ef', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: '7c63a65698b7a07d10c9b75ad21a6c7585c99034', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '3599aaffa6d0b601b35cfa244faa11b705724ef0', 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: 'dfff287908a10fd3b84abbd643af6d095bb70537', 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: '4f9b1c1fd0791045a5d04055e1c61182f11ebe86', 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: '06daea4e6567faa83c290236d3bafd2ed6bb310e', moveFocusTo: this.closeButtonNode }))));
     }
     static get is() { return "duet-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -422,6 +504,7 @@ export class DuetDatePicker {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -442,12 +525,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -462,12 +545,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -482,12 +565,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -502,12 +585,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -522,12 +605,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -542,11 +625,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -567,12 +650,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -599,12 +682,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "placeholderDefaults": {
                 "type": "string",
+                "attribute": "placeholder-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -628,12 +711,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"pp.kk.vvvv\",\n    en: \"dd.mm.yyyy\",\n    sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\",\n  }"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -651,12 +734,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -671,12 +754,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -691,12 +774,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -711,12 +794,32 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
+            "disableBuiltInErrors": {
+                "type": "boolean",
+                "attribute": "disable-built-in-errors",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -731,12 +834,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -751,11 +854,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -770,11 +873,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -789,11 +892,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -808,11 +911,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -827,11 +930,11 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -846,12 +949,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDatePickerDirection",
@@ -872,12 +975,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"right\""
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -892,12 +995,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -918,12 +1021,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -938,12 +1041,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -958,12 +1061,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -978,12 +1081,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "incrementYears": {
                 "type": "number",
+                "attribute": "increment",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -998,12 +1101,12 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "increment",
                 "reflect": false,
                 "defaultValue": "10"
             },
             "validity": {
                 "type": "unknown",
+                "attribute": "validity",
                 "mutable": false,
                 "complexType": {
                     "original": "ValidityState",
@@ -1026,6 +1129,7 @@ export class DuetDatePicker {
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -1040,7 +1144,6 @@ export class DuetDatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -30,8 +30,10 @@
   display: block;
   width: 100%;
   height: 1px;
-  margin-top: 36px !important;
-  margin-bottom: 28px;
+  margin-top: var(--divider-margin, 36px) !important;
+  margin-right: var(--divider-margin, 0);
+  margin-bottom: var(--divider-margin, 28px);
+  margin-left: var(--divider-margin, 0);
   background: rgb(212, 223, 229);
 }
 .duet-divider.duet-p-0 {
@@ -46,4 +48,8 @@
 }
 .duet-divider.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-divider.duet-theme-turva {
+  background: rgb(212, 221, 226);
 }