@postnord/pn-marketweb-components 4.3.6 → 4.3.8

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { h, Host, Mixin } from "@stencil/core";
+import { h, Host, Mixin, forceUpdate, } from "@stencil/core";
 import { awaitTopbar, uuidv4, en, getTotalHeightOffset, getMenuWidth } from "../../../index";
 import { animateHeightFactory } from "../../../globals/mixins/index";
 import { translations } from "./translations";
@@ -27,13 +27,14 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
         super();
     }
     id = `pn-date-picker-${uuidv4()}`;
-    idFrom = `${this.id}-from`;
-    idTo = `${this.id}-to`;
-    idFromButton = `${this.id}-from-button`;
-    idToButton = `${this.id}-to-button`;
+    idStart = `${this.id}-from`;
+    idEnd = `${this.id}-to`;
+    idStartButton = `${this.id}-from-button`;
+    idEndButton = `${this.id}-to-button`;
     idHelper = `${this.id}-helper`;
     idError = `${this.id}-error`;
     idCalendar = `${this.id}-calendar`;
+    mo;
     calendarElement;
     today = getToday();
     separators = [];
@@ -43,7 +44,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     hostElement;
     open = false;
     openUp = false;
-    selectingTo = false;
+    selectingEnd = false;
     grid;
     viewYearStart = null;
     dateViewYear;
@@ -57,72 +58,67 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     labelTo;
     /** Provide a helpertext for the date input. */
     helpertext;
-    /** Set a predefined value for the from date. @see {@link format} */
+    /** Manually set language; this will be inherited from the topbar. */
+    language = undefined;
+    /** Set a predefined value for the from date (input value). @see {@link format} @category Native attributes */
     start = '';
     /**
-     * Set a predefined value for the from date.
+     * Set a predefined value for the from date. (input value end)
      *
      * @see {@link range}
      * @see {@link format}
+     * @category Native attributes
      */
     end = '';
-    /**
-     * Set the date format of the value.
-     *
-     * While you can set any date value from the Dayjs documentation,
-     * we strongly recommend you pick a simple format that you can also type manually.
-     *
-     * @since v7.6.0
-     * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
-     */
-    format = 'YYYY-MM-DD';
-    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
-    compact = false;
-    /** Manually set language; this will be inherited from the topbar. */
-    language = null;
-    /** Set a custom ID for the calendar. @since v7.6.0 @category HTML attributes */
-    dateId = this.id;
-    /** HTML input name @since v7.6.0 @category HTML attributes */
+    /** HTML input name @since v7.6.0 @category Native attributes*/
     name;
+    /** HTML input name @since v7.25.0 @category Native attributes */
+    nameEnd;
     /**
      * Placeholder for the input field (defaults to the format prop).
      * @see {@link format}
-     * @category HTML attributes
+     * @category Native attributes
      **/
-    placeholder = this.format;
+    placeholder;
     /**
      * Placeholder for end date (defaults to the format prop).
      * @see {@link format}
-     * @category HTML attributes
+     * @deprecated Use `placeholder-end` instead
+     * @category Native attributes
+     **/
+    endPlaceholder;
+    /**
+     * Placeholder for end date (defaults to the format prop).
+     * @see {@link format}
+     * @since v7.25.0
+     * @category Native attributes
      **/
-    endPlaceholder = this.format;
-    /** Set the input `autocomplete` attribute. @category HTML attributes */
+    placeholderEnd;
+    /** Set the input `autocomplete` attribute. @category Native attributes */
     autocomplete;
-    /** Set the input `list` attribute for the first date input. @since v7.6.0 @category HTML attributes */
+    /** Set the input `list` attribute for the first date input. @since v7.6.0 @category Native attributes */
     list;
-    /** Set the input `list` attribute for the second date input. @since v7.6.0 @category HTML attributes */
+    /** Set the input `list` attribute for the second date input. @since v7.6.0 @category Native attributes */
     listEnd;
-    /** Set the HTML pattern prop on the input elements. Make sure it matches the format. @since v7.6.0 @category HTML attributes */
+    /** Set the HTML pattern prop on the input elements. Make sure it matches the format. @since v7.6.0 @category Native attributes */
     pattern;
-    /** Allow the selection of a date range. @category Features */
-    range = false;
+    /** Set the date picker as required. @category Native attributes */
+    required = false;
+    /** Set the date picker as readonly. @since v7.6.0 @category Native attributes */
+    readonly = false;
+    /** Set the date picker as disabled. @since v7.6.0 @category Native attributes */
+    disabled = false;
     /**
-     * Set a limit on how many days one may select.
-     * By default, you can select an unlimited range.
+     * Set the date format of the value.
      *
-     * @todo Create a range limit function.
-     * @see {@link range}
+     * While you can set any date value from the Dayjs documentation,
+     * we strongly recommend you pick a simple format that you can also type manually.
      *
+     * @since v7.6.0
+     * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
      * @category Features
-     * @hide true
-     **/
-    rangeLimit;
-    /** The calendar grid is shown as default. You can set either `months` or `years` as your first choice. @since v7.6.0 @category Features */
-    view = CALENDAR;
-    /** Make the calendar open upwards by default. Opens downwards if there is not enough space. @since v7.6.0 @category Features */
-    calendarUp = false;
-    /** Show weekend numbers to the left of the calendar grid. @since v7.6.0 @category Features */
-    weekNumbers = false;
+     */
+    format = 'YYYY-MM-DD';
     /** Disable the automatic insertion of separators when typing in the input. @since v7.6.0 @category Features */
     disableTypeAhead = false;
     /** Remove the option to select dates on weekends. @category Features */
@@ -136,25 +132,72 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
      * @category Features
      **/
     disabledDates;
-    /** If you use a format with an unknown length, disable the max length. @category Features */
+    /** If you use a format with an unknown length, disable the max length. @since 7.11.3 @category Features */
     disableMaxLength = false;
-    /** Set the date picker as required. @category State */
-    required = false;
-    /** Set the date picker as readonly. @since v7.6.0 @category State */
-    readonly = false;
-    /** Set the date picker as disabled. @since v7.6.0 @category State */
-    disabled = false;
-    /** Set an error message for the date picker. Overwrites the helpertext if used at the same time. @since v7.6.0 @category Validation */
-    error;
-    /** Trigger the invalid state without an error message. @since v7.6.0 @category Validation */
+    /** Allow the selection of a date range. @category Features */
+    range = false;
+    /**
+     * Set a limit on how many days one may select.
+     * By default, you can select an unlimited range.
+     *
+     * @todo Create a range limit function.
+     * @see {@link range}
+     *
+     * @category Features
+     * @hide true
+     **/
+    rangeLimit;
+    /** Show weekend numbers to the left of the calendar grid. @since v7.6.0 @category Features */
+    weekNumbers = false;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact = false;
+    /** Make the calendar open upwards by default. Opens downwards if there is not enough space. @since v7.6.0 @category Features */
+    calendarUp = false;
+    /** The calendar grid is shown as default. You can set either `months` or `years` as your first choice. @since v7.6.0 @category Features */
+    view = 'calendar';
+    /** Trigger the invalid state without an error message. @since v7.6.0 @category Features */
     invalid = false;
+    /** Set an error message for the date picker. Overwrites the helpertext if used at the same time. @since v7.6.0 @category Features */
+    error;
+    /** Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label-from` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label for the end input via an aria attribute.
+     * We strongly recommend you use the `label-to` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelEnd;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label-from` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /**
+     * Provide the label for the end input from another element via its ID.
+     * We strongly recommend you use the `label-to` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledbyEnd;
+    /** Set a custom ID for the calendar. @since v7.6.0 @deprecated Use `pn-id` instead. @category HTML attributes */
+    dateId;
     /**
      * Earliest date possible, this will determine how many years back the date picker will show.
      *
      * Remember to use the same format that you have in the `format` prop.
      * @see {@link format}
      * @example "2024-05-25"
-     * @category Min/max date
+     * @category Features
      **/
     minDate = null;
     watchMin() {
@@ -169,7 +212,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
      * Remember to use the same format that you have in the `format` prop.
      * @see {@link format}
      * @example "2024-06-25"
-     * @category Min/max date
+     * @category Features
      **/
     maxDate = null;
     watchMax() {
@@ -213,13 +256,13 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
             .forEach((item, index) => this.separatorRegex.exec(item) && this.separators.push({ name: item, index }));
     }
     watchId() {
-        this.idFrom = `${this.dateId}-from`;
-        this.idTo = `${this.dateId}-to`;
-        this.idFromButton = `${this.id}-from-button`;
-        this.idToButton = `${this.id}-to-button`;
-        this.idHelper = `${this.dateId}-helper`;
-        this.idError = `${this.dateId}-error`;
-        this.idCalendar = `${this.dateId}-calendar`;
+        this.idStart = this.getId();
+        this.idEnd = `${this.getId()}-end`;
+        this.idStartButton = `${this.idStart}-from-button`;
+        this.idEndButton = `${this.idEnd}-to-button`;
+        this.idHelper = `${this.idStart}-helper`;
+        this.idError = `${this.idStart}-error`;
+        this.idCalendar = `${this.idStart}-calendar`;
     }
     watchView() {
         const data = this.getCurrentDateObject();
@@ -313,10 +356,18 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
             return;
         this.toggleGrid(false);
     }
+    connectedCallback() {
+        this.mo = new MutationObserver(() => {
+            forceUpdate(this.hostElement);
+            this.handleMessage();
+        });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
     async componentWillLoad() {
-        this.watchMin();
-        this.watchMax();
-        this.watchId();
         this.handleFormat();
         this.handleMessage();
         const valid = validateDate(this.start || this.end, this.format);
@@ -325,9 +376,29 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
         this.setViewDate({ date: data.date || date });
         this.setViewMonth({ month: data.month || month });
         this.setViewYear({ year: data.year || year });
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
+    getId() {
+        return this.pnId || this.dateId || this.id;
+    }
+    getAriaLabel(end) {
+        if (end)
+            return !this.labelTo && !this.pnAriaLabelledbyEnd ? this.pnAriaLabelEnd : null;
+        return !this.labelFrom && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby(end) {
+        if (end)
+            return !this.labelTo && !this.pnAriaLabelEnd ? this.pnAriaLabelledbyEnd : null;
+        return !this.labelFrom && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
+    getPlaceholder(end) {
+        if (this.compact)
+            return ' ';
+        if (end)
+            return this.placeholderEnd || this.endPlaceholder || this.format;
+        return this.placeholder || this.format;
+    }
     dropdownHandler() {
         if (this.open)
             this.openDropdown(this.calendarElement);
@@ -359,7 +430,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     }
     toggleGrid(state, selecting) {
         this.open = state ?? !this.open;
-        this.selectingTo = selecting;
+        this.selectingEnd = selecting;
     }
     hasHelperText() {
         return this.helpertext?.length > 0 || this.showHelperSlot;
@@ -380,6 +451,12 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
         const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
         this.showErrorSlot = !!slottedError?.length;
     }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
+    }
     viewingCalendar() {
         return this.view === CALENDAR;
     }
@@ -432,8 +509,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     getCurrentViewDate(data = this.getCurrentDateObject()) {
         return getReadableDate(data, this.language, 'MMMM YYYY');
     }
-    isSelected(data, to = false) {
-        const value = to ? this.end : this.start;
+    isSelected(data, end = false) {
+        const value = end ? this.end : this.start;
         return selectedDate(value, this.getCurrentDateObject(data), this.format, this.viewType());
     }
     isToday(data) {
@@ -546,24 +623,24 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
         }
         return value;
     }
-    inputHandler(event, to = false) {
-        const propName = to ? 'end' : 'start';
+    inputHandler(event, end = false) {
+        const propName = end ? 'end' : 'start';
         const value = this.disableTypeAhead ? event.target.value : this.handleSeparator(event);
         this[propName] = value;
     }
     setValue(date) {
         const value = getReadableDate(this.getCurrentDateObject({ date }), this.language, this.format);
-        if (this.selectingTo)
+        if (this.selectingEnd)
             this.end = value;
         else
             this.start = value;
         this.setViewDate({ date });
-        if (!this.range || this.selectingTo) {
+        if (!this.range || this.selectingEnd) {
             this.toggleGrid(false);
             this.focusToggleCalendarButton();
         }
-        if (this.range && !this.selectingTo)
-            this.selectingTo = true;
+        if (this.range && !this.selectingEnd)
+            this.selectingEnd = true;
     }
     getDayAttributes(dateObject, blank) {
         const data = this.getCurrentDateObject(dateObject);
@@ -618,7 +695,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     /** Focus the button toggling the calendar. Handles the start/from date on its own. */
     focusToggleCalendarButton() {
         requestAnimationFrame(() => {
-            const id = this.range ? this.idToButton : this.idFromButton;
+            const id = this.range ? this.idEndButton : this.idStartButton;
             this.hostElement.querySelector(`#${id}`).focus({ preventScroll: true });
         });
     }
@@ -700,30 +777,32 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     renderYearGrid() {
         return (h("ul", { class: "pn-date-picker-list" }, this.getYearGrid()?.map(year => (h("li", { key: year, class: "pn-date-picker-item", "data-item": "year" }, h("button", { type: "button", class: "pn-date-picker-button", ...this.getDayAttributes({ year }, false) }, h("span", null, year)))))));
     }
-    renderLabel(to = false) {
-        const id = to ? this.idTo : this.idFrom;
-        const label = to ? this.labelTo : this.labelFrom;
+    renderLabel(end = false) {
+        const id = end ? this.idEnd : this.idStart;
+        const label = end ? this.labelTo : this.labelFrom;
+        if (!label)
+            return null;
         return (h("label", { class: "pn-date-picker-label", htmlFor: id, "data-compact": this.compact }, h("span", null, label)));
     }
-    renderInput({ to = false } = {}) {
-        const id = to ? this.idTo : this.idFrom;
-        const idButton = to ? this.idToButton : this.idFromButton;
-        const value = to ? this.end : this.start;
-        const placeholder = to ? this.endPlaceholder : this.placeholder;
-        const list = to ? this.listEnd : this.list;
-        const editing = this.open ? (this.selectingTo ? to : !to) : false;
+    renderInput({ end = false } = {}) {
+        const id = end ? this.idEnd : this.idStart;
+        const idButton = end ? this.idEndButton : this.idStartButton;
+        const value = end ? this.end : this.start;
+        const list = end ? this.listEnd : this.list;
+        const name = end ? this.nameEnd : this.name;
+        const editing = this.open ? (this.selectingEnd ? end : !end) : false;
         const defaultText = this.translate('SELECT_DATE');
-        const textProp = this.range ? (to ? 'END_' : 'START_') : '';
+        const textProp = this.range ? (end ? 'END_' : 'START_') : '';
         const dateText = this.translate(`SELECTED_${textProp}DATE`);
         let textButton = defaultText;
         if (value) {
             textButton += `, ${dateText.replace('{date}', value)}`;
         }
         const showButton = !(this.disabled || this.readonly);
-        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(to), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: this.compact ? ' ' : placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, to) }), this.compact && this.renderLabel(to), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
+        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(end), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: name, placeholder: this.getPlaceholder(end), autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.getAriaLabel(end), "aria-labelledby": this.getAriaLabelledby(end), "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, end) }), this.compact && this.renderLabel(end), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, end), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '0485d508d1df7d71009ab2c22096384928750697' }, h("div", { key: '31514c4b9c216ca227ac91c90e82846992df283c', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '2d924b59e6f7e41364413935b08640db0aa1622e', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: '51ec54178bbf69c66fe17228017aeb8985e551fc', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '16d60d86b8d9c01b7732a3c7b773d1157eedbd2b', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '703d253840d5e9943750469c9495c3151b85f08c', class: "pn-date-picker-wrapper" }, h("nav", { key: 'e25723946681d630dffeeddbf814b3a720c9685c', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '9dec68c96c3ab4f8ca0c29783cd1e693e43281e1', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '33dfc7f288f489eb814f27f61869793bf718fb6a', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '67b029ff5dae525732dc78d1be4a3c706848078c', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '82b2346a120e52d3f55d40eae85d191673c4e906', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '64c4b74c742c62370e8fe74b7ffd0c8e10c8c8d7', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '065dcdbccfaf4f4b3eeae1bba9772a8bce804b66', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '2c0b032610650aa43701a3f52052defad495569d' }, this.dateViewYear)), h("pn-button", { key: 'feb54d3c95595a39aa93eb2c74c7582a82b3031a', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '1d1aa223f4314d714db6e994a7f87f3f0004f472', class: "pn-date-picker-chips" }, h("slot", { key: '1239efd56b8aa01558c9671e3a1c198af8cdec28', name: "chips" })), h("nav", { key: '0410b4a1a92b1ccb56dee901be8df49933301142', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: 'ec803a3af2c22f05f1416e0f62424b3341256d0f', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '76b1889719347c417b5366bc511f48604aad35e1' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'efb966a5373f0a1b0e300999af60a1f8b9194429', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'cf169a86e1a4c9ca46d835a536971306dba5224f' }, this.helpertext), h("slot", { key: '858470af2c9febb68a7beffa3014485d91297893', name: "helpertext" })), h("p", { key: '219d57d13eebcb6d6621fe8e1a717fedcc39e641', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '92b84f913d27642f9487f6316040f95478a75373' }, this.error), h("slot", { key: '31a3de009f3b54f775f558ae6a9aa17ebb2bbc88', name: "error" }))));
+        return (h(Host, { key: 'dbe09316ddf6365ad119afe9fd01a363aa3cf9bf' }, h("div", { key: 'b6aa1c922859c282529ff9e1297aacc79111a0f9', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '48d050a834a2df16b33759bbe117a5c378dfa069', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: '6b6507409ba5eaf3de232dff28785d9c7c0a85f0', icon: arrow_right }))), this.range && this.renderInput({ end: this.range })), h("div", { key: '9a9d31f221aabbf0927bcc8ae602d1330d75b4d3', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '56137ab966418bda3abd61bbcc12ff004feca5c0', class: "pn-date-picker-wrapper" }, h("nav", { key: '67a2fea072a8e4953fa9803e77d0245760b7195a', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '9d9d0aa471baa6d6183a4b3b920cf8d05737e8a1', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '57988169fdd38cb05c18c6d4f8e71ded23f97f5f', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '93c98b9aeabdc4b08e59afdaf8655dfe3c440b13', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '9c0b0c3378f00755ef84e5e87426c1a9bedb0651', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '02d40d1aa03dd69f5b344295713ec9c45431b3e9', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '4f953719a89967b10c98472b24f732c42cd61e3c', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: 'a91a0dd940b94d0f71d887508644d6acfa3ef098' }, this.dateViewYear)), h("pn-button", { key: '3eabe547992de22014f3e229c9e7e17eab395d56', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '6eaefead16141908688578834b1e6a2ba87e8161', class: "pn-date-picker-chips" }, h("slot", { key: '43bcfa9bb50d6dbd912ae8cfee339b642b9363a5', name: "chips" })), h("nav", { key: 'b22d7112ba5d3d012f5d2617586bd251547f4ed7', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '41031640dbac5130b3fb9029b36c5e732068c78f', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '08568a439547db8728c3f110c00854d49ec7eb77' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'e890351198e9eaa85e9db3bcc55bc8bdd48f3538', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: this.hideHelpertext() }, h("span", { key: '0b776595b33ed64cb73b5060d023eb89421ad758' }, this.helpertext), h("slot", { key: 'e9ef3797e3baae78dca7efc2313e1b6cf9c7efd7', name: "helpertext" })), h("p", { key: 'aa43fb6eaf42251bb7dadab0f724edee0e6d42b2', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: this.hideError() }, h("span", { key: '556bfbb5e5ba697234734eb601445150b23ddcf2' }, this.error), h("slot", { key: '21dd12fd2c3f1ac814699f4785ece567136cedd2', name: "error" }))));
     }
     static get is() { return "pn-date-picker"; }
     static get originalStyleUrls() {
@@ -746,8 +825,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Set a label for the from date."
@@ -798,6 +877,33 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "helpertext"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PnLanguages",
+                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
+                    "references": {
+                        "PnLanguages": {
+                            "location": "import",
+                            "path": "@/index",
+                            "id": "src/index.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Manually set language; this will be inherited from the topbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "undefined"
+            },
             "start": {
                 "type": "string",
                 "mutable": true,
@@ -812,8 +918,11 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "tags": [{
                             "name": "see",
                             "text": "{@link format }"
+                        }, {
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a predefined value for the from date."
+                    "text": "Set a predefined value for the from date (input value)."
                 },
                 "getter": false,
                 "setter": false,
@@ -838,8 +947,11 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                         }, {
                             "name": "see",
                             "text": "{@link format }"
+                        }, {
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a predefined value for the from date."
+                    "text": "Set a predefined value for the from date. (input value end)"
                 },
                 "getter": false,
                 "setter": false,
@@ -847,7 +959,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "attribute": "end",
                 "defaultValue": "''"
             },
-            "format": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -856,74 +968,23 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "since",
                             "text": "v7.6.0"
                         }, {
-                            "name": "see",
-                            "text": "{@link https://day.js.org/docs/en/display/format Day.js format documentation.}"
-                        }],
-                    "text": "Set the date format of the value.\n\nWhile you can set any date value from the Dayjs documentation,\nwe strongly recommend you pick a simple format that you can also type manually."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "format",
-                "defaultValue": "'YYYY-MM-DD'"
-            },
-            "compact": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "v7.21.0"
+                            "name": "category",
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "compact",
-                "defaultValue": "false"
-            },
-            "language": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "PnLanguages",
-                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
-                    "references": {
-                        "PnLanguages": {
-                            "location": "import",
-                            "path": "@/index",
-                            "id": "src/index.ts::PnLanguages",
-                            "referenceLocation": "PnLanguages"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Manually set language; this will be inherited from the topbar."
+                    "text": "HTML input name"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "language",
-                "defaultValue": "null"
+                "attribute": "name"
             },
-            "dateId": {
+            "nameEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -932,24 +993,23 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "since",
-                            "text": "v7.6.0"
+                            "text": "v7.25.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a custom ID for the calendar."
+                    "text": "HTML input name"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "date-id",
-                "defaultValue": "this.id"
+                "attribute": "name-end"
             },
-            "name": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -961,20 +1021,20 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "since",
-                            "text": "v7.6.0"
+                            "name": "see",
+                            "text": "{@link format }"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "HTML input name"
+                    "text": "Placeholder for the input field (defaults to the format prop)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "placeholder"
             },
-            "placeholder": {
+            "endPlaceholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -988,19 +1048,21 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "tags": [{
                             "name": "see",
                             "text": "{@link format }"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `placeholder-end` instead"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
-                    "text": "Placeholder for the input field (defaults to the format prop)."
+                    "text": "Placeholder for end date (defaults to the format prop)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "this.format"
+                "attribute": "end-placeholder"
             },
-            "endPlaceholder": {
+            "placeholderEnd": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1014,17 +1076,19 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "tags": [{
                             "name": "see",
                             "text": "{@link format }"
+                        }, {
+                            "name": "since",
+                            "text": "v7.25.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
                     "text": "Placeholder for end date (defaults to the format prop)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "end-placeholder",
-                "defaultValue": "this.format"
+                "attribute": "placeholder-end"
             },
             "autocomplete": {
                 "type": "string",
@@ -1039,7 +1103,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the input `autocomplete` attribute."
                 },
@@ -1064,7 +1128,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the input `list` attribute for the first date input."
                 },
@@ -1089,7 +1153,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the input `list` attribute for the second date input."
                 },
@@ -1114,7 +1178,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "HTML attributes"
+                            "text": "Native attributes"
                         }],
                     "text": "Set the HTML pattern prop on the input elements. Make sure it matches the format."
                 },
@@ -1123,7 +1187,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "reflect": false,
                 "attribute": "pattern"
             },
-            "range": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1136,83 +1200,45 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Features"
+                            "text": "Native attributes"
                         }],
-                    "text": "Allow the selection of a date range."
+                    "text": "Set the date picker as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "range",
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "rangeLimit": {
-                "type": "number",
+            "readonly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "todo",
-                            "text": "Create a range limit function."
-                        }, {
-                            "name": "see",
-                            "text": "{@link range }"
+                            "name": "since",
+                            "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "Features"
-                        }, {
-                            "name": "hide",
-                            "text": "true"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set a limit on how many days one may select.\nBy default, you can select an unlimited range."
+                    "text": "Set the date picker as readonly."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "range-limit"
+                "attribute": "readonly",
+                "defaultValue": "false"
             },
-            "view": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "CalendarView",
-                    "resolved": "\"calendar\" | \"months\" | \"years\"",
-                    "references": {
-                        "CalendarView": {
-                            "location": "import",
-                            "path": "@/globals/date",
-                            "id": "src/globals/date/index.ts::CalendarView",
-                            "referenceLocation": "CalendarView"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "v7.6.0"
-                        }, {
-                            "name": "category",
-                            "text": "Features"
-                        }],
-                    "text": "The calendar grid is shown as default. You can set either `months` or `years` as your first choice."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "view",
-                "defaultValue": "CALENDAR"
-            },
-            "calendarUp": {
-                "type": "boolean",
-                "mutable": false,
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -1226,22 +1252,22 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "Features"
+                            "text": "Native attributes"
                         }],
-                    "text": "Make the calendar open upwards by default. Opens downwards if there is not enough space."
+                    "text": "Set the date picker as disabled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "calendar-up",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "weekNumbers": {
-                "type": "boolean",
+            "format": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -1250,17 +1276,20 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                     "tags": [{
                             "name": "since",
                             "text": "v7.6.0"
+                        }, {
+                            "name": "see",
+                            "text": "{@link https://day.js.org/docs/en/display/format Day.js format documentation.}"
                         }, {
                             "name": "category",
                             "text": "Features"
                         }],
-                    "text": "Show weekend numbers to the left of the calendar grid."
+                    "text": "Set the date format of the value.\n\nWhile you can set any date value from the Dayjs documentation,\nwe strongly recommend you pick a simple format that you can also type manually."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "week-numbers",
-                "defaultValue": "false"
+                "attribute": "format",
+                "defaultValue": "'YYYY-MM-DD'"
             },
             "disableTypeAhead": {
                 "type": "boolean",
@@ -1351,6 +1380,9 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "7.11.3"
+                        }, {
                             "name": "category",
                             "text": "Features"
                         }],
@@ -1362,7 +1394,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "attribute": "disable-max-length",
                 "defaultValue": "false"
             },
-            "required": {
+            "range": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1375,17 +1407,48 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the date picker as required."
+                    "text": "Allow the selection of a date range."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "range",
                 "defaultValue": "false"
             },
-            "readonly": {
+            "rangeLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "todo",
+                            "text": "Create a range limit function."
+                        }, {
+                            "name": "see",
+                            "text": "{@link range }"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }, {
+                            "name": "hide",
+                            "text": "true"
+                        }],
+                    "text": "Set a limit on how many days one may select.\nBy default, you can select an unlimited range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-limit"
+            },
+            "weekNumbers": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1401,17 +1464,43 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the date picker as readonly."
+                    "text": "Show weekend numbers to the left of the calendar grid."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "readonly",
+                "attribute": "week-numbers",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "calendarUp": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1427,40 +1516,48 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the date picker as disabled."
+                    "text": "Make the calendar open upwards by default. Opens downwards if there is not enough space."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "calendar-up",
                 "defaultValue": "false"
             },
-            "error": {
+            "view": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "CalendarView",
+                    "resolved": "\"calendar\" | \"months\" | \"years\"",
+                    "references": {
+                        "CalendarView": {
+                            "location": "import",
+                            "path": "@/globals/date",
+                            "id": "src/globals/date/index.ts::CalendarView",
+                            "referenceLocation": "CalendarView"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "since",
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
-                    "text": "Set an error message for the date picker. Overwrites the helpertext if used at the same time."
+                    "text": "The calendar grid is shown as default. You can set either `months` or `years` as your first choice."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "error"
+                "attribute": "view",
+                "defaultValue": "'calendar'"
             },
             "invalid": {
                 "type": "boolean",
@@ -1478,7 +1575,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "v7.6.0"
                         }, {
                             "name": "category",
-                            "text": "Validation"
+                            "text": "Features"
                         }],
                     "text": "Trigger the invalid state without an error message."
                 },
@@ -1488,6 +1585,184 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "attribute": "invalid",
                 "defaultValue": "false"
             },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.6.0"
+                        }, {
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Set an error message for the date picker. Overwrites the helpertext if used at the same time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            },
+            "pnAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label-from` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-label"
+            },
+            "pnAriaLabelEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label for the end input via an aria attribute.\nWe strongly recommend you use the `label-to` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-label-end"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label-from` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby"
+            },
+            "pnAriaLabelledbyEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label for the end input from another element via its ID.\nWe strongly recommend you use the `label-to` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby-end"
+            },
+            "dateId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.6.0"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the calendar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date-id"
+            },
             "minDate": {
                 "type": "string",
                 "mutable": true,
@@ -1507,7 +1782,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "\"2024-05-25\""
                         }, {
                             "name": "category",
-                            "text": "Min/max date"
+                            "text": "Features"
                         }],
                     "text": "Earliest date possible, this will determine how many years back the date picker will show.\n\nRemember to use the same format that you have in the `format` prop."
                 },
@@ -1536,7 +1811,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                             "text": "\"2024-06-25\""
                         }, {
                             "name": "category",
-                            "text": "Min/max date"
+                            "text": "Features"
                         }],
                     "text": "Latest date possible, this will determine how many years forward the date picker will show.\n\nRemember to use the same format that you have in the `format` prop."
                 },
@@ -1552,7 +1827,7 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
         return {
             "open": {},
             "openUp": {},
-            "selectingTo": {},
+            "selectingEnd": {},
             "grid": {},
             "viewYearStart": {},
             "dateViewYear": {},
@@ -1680,10 +1955,16 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     static get watchers() {
         return [{
                 "propName": "minDate",
-                "methodName": "watchMin"
+                "methodName": "watchMin",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }, {
                 "propName": "maxDate",
-                "methodName": "watchMax"
+                "methodName": "watchMax",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }, {
                 "propName": "start",
                 "methodName": "watchValue"
@@ -1694,8 +1975,14 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "propName": "format",
                 "methodName": "handleFormat"
             }, {
-                "propName": "id",
+                "propName": "dateId",
                 "methodName": "watchId"
+            }, {
+                "propName": "pnId",
+                "methodName": "watchId",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }, {
                 "propName": "dateViewYear",
                 "methodName": "watchView"