@duetds/components 10.0.0-alpha.9 → 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: '8061c2ff02f31f289024f98a1868417791c1ceb8', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: 'dc0336af36cf7121e8346ab485e4fea35e3e40a1', class: "duet-date" }, h(DatePickerInput, { key: 'e385f326ee143773b4bdc6812af71b2771e7a23a', 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: 'c75652233cf1139f59570a7216c9bd5b908b2617', 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: 'c437316f64b43a2a47e9c933f22e76874ad481e4', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: 'c373ebd14af34a7d8521f7d8629a3ba4ce7a527b', moveFocusTo: this.focusedDayNode }), h("div", { key: 'c1d1ba78d46086e3d17a75d8287a393789b77308', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: 'f914f3c5d397dea448805da4d4c9cf5467ce7032', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: 'cc36233cb1f032f0f0dcea73a33ae1455a18c950', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '41a8491b1f1c0cf3f03a711ba540f29a74dec52e', margin: "none" }, this.label), h("button", { key: 'be5ccbdfad937acc22a90a2f8061cc937cb9e8aa', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: 'e3757f0a89d63f3e72b650e9caa45b0a95ce8494', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: '02bb2d109ea7ff92817b5220e16f521b14e48d92' }, text.closeLabel))), h("div", { key: '3a2bcae706542219a3f5b5d911cd44d9afe218b3', class: "duet-date-dialog-header" }, h("div", { key: 'a632e2623de2cf7e2c301522fb46379bd6c81437', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '2fdb2751bdfbc30ccb5ed9ba0f1a62a9479b57e4' }, h("h2", { key: '9b0ce568b4fdbbc05b57a2474f563ed516422a9d', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'a2d7529556bb078d2973f51fd92f029298000ee2' }, h("label", { key: '855c0fbe6f66991f1863225bb9465f7fb33004ae', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'b85c481c35d5fc758a2dd84e7447c3cab1bf419d', class: "duet-date-dialog-select" }, h("select", { key: '6e4ed6930261a02ad5259d4123a4260b9f4e40e4', 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: '3eea137e7b0bc3f4954d5789a2cddf6e6a859fee', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '22657fcf4ead40730f886f77a863b0b0f23e8948' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: '51b1280f2d3ec47d0567b7a041d7cfc92d61d235', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '63e59eac0529652ccdcac89f5ae3567c291e2fd5' }, h("label", { key: '140beab557360920f1cc99977b40368d77e6d742', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '848d1ce7184b9f3284967fab1f595ecf0cad5994', class: "duet-date-dialog-select" }, h("select", { key: '56bf07db564cf107aac956411ed5b761f83bebcb', 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: '14e84bf540d7d2cb002b10d2e6ed0776c80f1d96', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'f6b322608ce9629d6078030c86fc408026985e11' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'e726ed9ca06b382bf237b4ae3b1c58d278895850', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'c97bcc59b23d0cf52edfada784f9fd205d94ac99', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: '4b058294b854c4ebe90fdca424a36bac77b1379d', 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: '5697ca8c8539900b6702a98f1660fef9a7925b43', 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: 'f83b03f0d74e0b01a6f9c068cf578b8a600deef7', 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: 'fa28ebc0611d9f08598c0e2057fa13c72ebc8442', 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);
 }