@swisspost/design-system-components 10.0.0-next.65 → 10.0.0-next.67

package/dist/collection/components/{post-datepicker/post-datepicker.js → post-date-picker/post-date-picker.js}

@@ -1,14 +1,15 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host, Build, } from "@stencil/core";
 import AirDatepicker from "air-datepicker";
 import IMask from "imask";
 import { localesMap } from "./locales";
-import { checkEmptyOrDate, checkRequiredAndType, IS_BROWSER } from "../../utils/index";
-export class PostDatepicker {
+import { checkEmptyOrDate, checkRequiredAndType, checkIsoDate, isIsoDate } from "../../utils/index";
+export class PostDatePicker {
     constructor() {
         this.today = new Date();
         this.inputDisabled = false;
         /**
-         * Whether the datepicker expects a range selection or a single date selection.
+         * Whether the date picker expects a range selection or a single date selection.
+         *
          */
         this.range = false;
         /**
@@ -16,13 +17,51 @@ export class PostDatepicker {
          */
         this.inline = false;
         this.startDate = new Date();
-        this.locale = IS_BROWSER ? document.documentElement.lang : 'en';
+        this.locale = Build.isBrowser ? document.documentElement.lang : 'en';
         this.currentViewType = 'days';
         this.euFormat = true;
         this.skipOnSelectCount = 0;
         this.skipFocusOnNextRender = false;
+        this.handleInputBlur = () => {
+            if (this.range) {
+                const dates = this.splitRangeDates(this.inputMask.value);
+                const start = this.dateStrToDate(dates[0]);
+                const end = this.dateStrToDate(dates[1]);
+                const startValid = this.isValidDate(start);
+                const endValid = this.isValidDate(end);
+                if (startValid && endValid) {
+                    // Check if user entered dates in wrong order
+                    const reversed = start > end;
+                    this.skipOnSelectCount = reversed ? 0 : 2; // don't skip if reversed
+                    this.dpInstance.selectDate([start, end]);
+                    this.dpInstance.setViewDate(start);
+                }
+                else if (startValid && !endValid) {
+                    this.dpInstance.clear();
+                    this.dpInstance.selectDate(start);
+                    this.dpInstance.setViewDate(start);
+                }
+                else {
+                    this.resetSelection();
+                }
+            }
+            else {
+                const date = this.dateStrToDate(this.inputMask.value);
+                if (this.isValidDate(date)) {
+                    this.skipOnSelectCount = 1;
+                    this.dpInstance.selectDate(date);
+                    this.dpInstance.setViewDate(date);
+                }
+                else {
+                    this.resetSelection();
+                }
+            }
+        };
+        this.handlePrevNextClick = () => {
+            this.skipFocusOnNextRender = true;
+        };
         /**
-         * Loop through the datepicker when not in inline mode
+         * Loop through the date picker when not in inline mode
          */
         this.handleTab = (e) => {
             if (this.inline || (e.key !== 'Tab' && e.key !== 'Escape'))
@@ -141,19 +180,23 @@ export class PostDatepicker {
     }
     validateSelectedStartDate() {
         checkEmptyOrDate(this, 'selectedStartDate');
+        checkIsoDate(this, 'selectedStartDate');
     }
     validateSelectedEndDate() {
         checkEmptyOrDate(this, 'selectedEndDate');
+        checkIsoDate(this, 'selectedEndDate');
     }
     validateMin() {
         checkEmptyOrDate(this, 'min');
+        checkIsoDate(this, 'min');
     }
     validateMax() {
         checkEmptyOrDate(this, 'max');
+        checkIsoDate(this, 'max');
     }
     validateInline() {
         if (!this.inline && !this.dpInput) {
-            console.error('A non-inline datepicker should contain one input');
+            console.error('A non-inline date picker should contain one input');
         }
     }
     validateTextNextMonth() {
@@ -184,12 +227,12 @@ export class PostDatepicker {
     }
     /**
      * Displays the popover calendar, focusing the first calendar item.
-     * @param target - The HTML element relative to which the popover calendar should be displayed
      */
-    async show(target) {
+    async show() {
         if (this.popoverRef) {
-            await this.popoverRef.show(target);
+            await this.popoverRef.show(this.dpInput);
             this.enhanceAccessibility();
+            this.host.shadowRoot.removeEventListener('keydown', this.handleTab, true); // remove before adding
             this.host.shadowRoot.addEventListener('keydown', this.handleTab, true);
         }
         else {
@@ -212,10 +255,13 @@ export class PostDatepicker {
             return;
         if (!this.dpInput)
             return;
-        const observer = new MutationObserver(() => {
-            this.syncDatepickerState();
+        if (this.inputObserver) {
+            this.inputObserver.disconnect();
+        }
+        this.inputObserver = new MutationObserver(() => {
+            this.syncDatePickerState();
         });
-        observer.observe(this.dpInput, {
+        this.inputObserver.observe(this.dpInput, {
             attributes: true,
             attributeFilter: ['disabled'],
         });
@@ -242,7 +288,7 @@ export class PostDatepicker {
     }
     setActiveCell(date, focusOnDate = true) {
         const cells = this.getCells();
-        if (!cells.length)
+        if (cells.length === 0)
             return;
         let target;
         // If selected date is visible
@@ -273,7 +319,7 @@ export class PostDatepicker {
         }
         // fallback
         if (!target) {
-            target = cells[cells.length - 1];
+            target = cells.at(-1);
         }
         // Make only the target focusable
         cells.forEach(c => (c.tabIndex = -1));
@@ -342,10 +388,10 @@ export class PostDatepicker {
         });
         body.removeEventListener('keydown', this.handleGridKeydown);
         body.addEventListener('keydown', this.handleGridKeydown);
-        this.setActiveCell(this.selectedStartDate ? new Date(this.selectedStartDate) : this.startDate, focusOnDate);
+        this.setActiveCell(this.isoToDate(this.selectedStartDate) || this.today, focusOnDate);
     }
     /**
-     * Set up the masks on the inputs to reflect the datepickers
+     * Set up the masks on the inputs to reflect the date pickers
      */
     setUpMask() {
         const usBlockOpts = {
@@ -408,7 +454,7 @@ export class PostDatepicker {
             }
         }
     }
-    configDatepicker() {
+    configDatePicker() {
         const slot = this.host.shadowRoot.querySelector('slot');
         const assignedNodes = slot && slot.assignedElements();
         const locale = localesMap[this.locale] || localesMap.en;
@@ -451,15 +497,26 @@ export class PostDatepicker {
                     this.updateNavigationButtonLabels();
                 },
                 onSelect: ({ date }) => {
+                    if (!date || (Array.isArray(date) && date.length === 0))
+                        return;
                     this.getCells().forEach(c => {
                         c.setAttribute('aria-selected', c.classList.contains('-selected-') ? 'true' : 'false');
                     });
-                    this.postUpdateDates.emit(date);
                     // If selected date is added dynamically after user has typed it in the input
                     if (this.skipOnSelectCount > 0) {
                         this.skipOnSelectCount--;
                         return;
                     }
+                    // update props
+                    if (Array.isArray(date) && date.length === 2) {
+                        this.selectedStartDate = this.dateToIso(date[0]);
+                        this.selectedEndDate = this.dateToIso(date[1]);
+                    }
+                    else if (!Array.isArray(date)) {
+                        this.selectedStartDate = this.dateToIso(date);
+                        this.selectedEndDate = undefined;
+                    }
+                    this.postUpdateDates.emit(Array.isArray(date) ? date.map(d => this.dateToIso(d)) : this.dateToIso(date));
                     // Assign value to the input, close the popover and focus on the input
                     if (this.dpInput) {
                         if (Array.isArray(date)) {
@@ -491,12 +548,8 @@ export class PostDatepicker {
             };
             this.dpInstance = new AirDatepicker(this.dpContainer, options);
             this.reorderNavigation();
-            this.prevBtn?.addEventListener('click', () => {
-                this.skipFocusOnNextRender = true;
-            });
-            this.nextBtn?.addEventListener('click', () => {
-                this.skipFocusOnNextRender = true;
-            });
+            this.prevBtn?.addEventListener('click', this.handlePrevNextClick);
+            this.nextBtn?.addEventListener('click', this.handlePrevNextClick);
             this.handleSelectedDates();
         }
     }
@@ -510,15 +563,18 @@ export class PostDatepicker {
         if (this.range) {
             if ((this.selectedStartDate && !this.selectedEndDate) ||
                 (!this.selectedStartDate && this.selectedEndDate)) {
-                console.error('The range datepicker expects either no selected dates or both of them defined.');
+                console.error('The range date picker expects either no selected dates or both of them defined.');
             }
             else if (this.selectedStartDate && this.selectedEndDate) {
-                this.dpInstance.selectDate([this.selectedStartDate, this.selectedEndDate]);
+                this.dpInstance.selectDate([
+                    this.isoToDate(this.selectedStartDate),
+                    this.isoToDate(this.selectedEndDate),
+                ]);
             }
         }
         else {
-            if (this.selectedStartDate) {
-                this.dpInstance.selectDate(this.selectedStartDate);
+            if (this.selectedStartDate && this.isoToDate(this.selectedStartDate)) {
+                this.dpInstance.selectDate(this.isoToDate(this.selectedStartDate));
             }
         }
     }
@@ -534,6 +590,15 @@ export class PostDatepicker {
     splitRangeDates(rangeStr) {
         return rangeStr.split(' - ');
     }
+    isoToDate(iso) {
+        if (!isIsoDate(iso))
+            return null;
+        const [y, m, d] = iso.split('-').map(Number);
+        return new Date(y, m - 1, d);
+    }
+    dateToIso(date) {
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    }
     dateStrToDate(dateStr) {
         return this.euFormat ? this.euDateStrToDate(dateStr) : this.usDateStrToDate(dateStr);
     }
@@ -661,41 +726,24 @@ export class PostDatepicker {
         });
     }
     addInputListener() {
-        this.dpInput.addEventListener('blur', () => {
-            if (this.range) {
-                const dates = this.splitRangeDates(this.inputMask.value);
-                const start = this.dateStrToDate(dates[0]);
-                const end = this.dateStrToDate(dates[1]);
-                if (start && end) {
-                    // Because selectDate is called twice if there are two dates
-                    this.skipOnSelectCount = 2;
-                    // Select the dates in the datepicker
-                    this.selectedStartDate = start.toString();
-                    this.selectedEndDate = end.toString();
-                    this.dpInstance.selectDate([start, end]);
-                    this.dpInstance.setViewDate(start);
-                }
-            }
-            else {
-                if (this.dpInput.value) {
-                    this.skipOnSelectCount = 1;
-                    const date = this.dateStrToDate(this.inputMask.value);
-                    this.selectedStartDate = date.toString();
-                    // Select the date in the datepicker
-                    this.dpInstance.selectDate(date);
-                    this.dpInstance.setViewDate(date);
-                }
-            }
-        });
+        this.dpInput.addEventListener('blur', this.handleInputBlur);
     }
-    syncDatepickerState() {
-        if (this.dpInput.disabled) {
-            this.inputDisabled = true;
-        }
+    resetSelection() {
+        this.skipOnSelectCount = 0;
+        this.dpInstance.clear();
+        this.dpInstance.setViewDate(this.today);
+        this.selectedStartDate = undefined;
+        this.selectedEndDate = undefined;
+    }
+    isValidDate(date) {
+        return date instanceof Date && !Number.isNaN(date.getTime());
+    }
+    syncDatePickerState() {
+        this.inputDisabled = this.dpInput.disabled;
     }
     async componentDidLoad() {
         this.euFormat = document.documentElement.lang !== 'en-US';
-        this.configDatepicker();
+        this.configDatePicker();
         this.setupGridObserver();
         this.setupNavObserver();
         this.setupInputObserver();
@@ -718,45 +766,50 @@ export class PostDatepicker {
         else {
             this.addInputListener();
             requestAnimationFrame(() => {
-                this.syncDatepickerState();
+                this.syncDatePickerState();
             });
         }
     }
     disconnectedCallback() {
-        this.host.shadowRoot.removeEventListener('keydown', this.handleTab);
+        this.host.shadowRoot?.removeEventListener('keydown', this.handleTab, true);
         this.titleBtn?.removeEventListener('click', this.forceTitleClickToYear);
-        if (this.gridObserver) {
-            this.gridObserver.disconnect();
-        }
+        const body = this.dpContainer?.querySelector('.air-datepicker-body--cells');
+        body?.removeEventListener('keydown', this.handleGridKeydown);
+        this.prevBtn?.removeEventListener('click', this.handlePrevNextClick);
+        this.nextBtn?.removeEventListener('click', this.handlePrevNextClick);
+        this.dpInput?.removeEventListener('blur', this.handleInputBlur);
+        this.gridObserver?.disconnect();
+        this.navObserver?.disconnect();
+        this.inputObserver?.disconnect();
         if (this.dpInstance) {
             this.dpInstance.destroy();
             this.dpInstance = null;
         }
     }
     render() {
-        return (h(Host, { key: 'ff36af3af2a07b77eeac42d6e8e612aa438a672f' }, this.inline && h("div", { key: '25c203eccb811b3aac90dd762391d8d13b0ffb0e', class: "datepicker-container" }), !this.inline && (h("div", { key: 'a2cfa29d2507817dd4d655b992ce289944819d9e' }, h("div", { key: '24dcd00b4df7fdf653fa39e11680fb62fd8a510a', class: {
+        return (h(Host, { key: 'b721b731d9ad4ff3c6d80c995a3c471786b6425a' }, this.inline && h("div", { key: '9dc37bf0ab23a5ce611139d0efd7f3fca4f6e6e2', class: "datepicker-container" }), !this.inline && (h("div", { key: 'f2e0376510e5e26a98e29703fbf11c0be90266bb' }, h("div", { key: '52e05c2f28a725c5336fca16842e97ce21a36b42', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, h("slot", { key: 'c1f322258d0d5177f624d2045cc8b8aca01731d7' }), h("button", { key: '87d31ec61bd04786905df6cd323a1de1c868ba89', onClick: e => this.show(e.currentTarget), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled }, h("post-icon", { key: '64cdbbeba4e90d11fb024da637eb5f57688ccd9e', name: "calendar" }))), h("post-popovercontainer", { key: '4dec376d186dfc37743b1aa1b0fcd17193843047', placement: "bottom", ref: e => (this.popoverRef = e) }, h("div", { key: 'ac644c015ba652561e5d97969650ddbc20c17193', class: "datepicker-container" }))))));
+            } }, h("slot", { key: '11147329e23c51b3bf7c5fa2925cbf97d26c9da2' }), h("button", { key: 'c57f2450bd8ce1976876a8bc11f7d238300ca687', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled }, h("post-icon", { key: 'd6a37bfc1471a8eabbf3e0450c3010da8e7ef28e', name: "calendar" }))), h("post-popovercontainer", { key: 'fd4259c066d92c5bbf1066940da72f74a58bdfe8', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '0ba6ef3f33a003317ab70728e1c67fc8c1d726a9', class: "datepicker-container" }))))));
     }
-    static get is() { return "post-datepicker"; }
+    static get is() { return "post-date-picker"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["post-datepicker.scss"]
+            "$": ["post-date-picker.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["post-datepicker.css"]
+            "$": ["post-date-picker.css"]
         };
     }
     static get properties() {
         return {
             "selectedStartDate": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -766,7 +819,7 @@ export class PostDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The datepicker's selected date. If in range mode, the selected start date."
+                    "text": "The date picker's selected date. If in range mode, the selected start date.\nMust be a valid date in ISO 8601 format (YYYY-MM-DD)."
                 },
                 "getter": false,
                 "setter": false,
@@ -775,7 +828,7 @@ export class PostDatepicker {
             },
             "selectedEndDate": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -785,7 +838,7 @@ export class PostDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The datepicker's selected end date (for range datepicker only)."
+                    "text": "The date picker's selected end date (for range date picker only).\nMust be a valid date in ISO 8601 format (YYYY-MM-DD)."
                 },
                 "getter": false,
                 "setter": false,
@@ -804,7 +857,7 @@ export class PostDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the datepicker expects a range selection or a single date selection."
+                    "text": "Whether the date picker expects a range selection or a single date selection."
                 },
                 "getter": false,
                 "setter": false,
@@ -824,7 +877,7 @@ export class PostDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Minimun possible date to select."
+                    "text": "Minimun possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD)."
                 },
                 "getter": false,
                 "setter": false,
@@ -843,7 +896,7 @@ export class PostDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Maximum possible date to select."
+                    "text": "Maximum possible date to select. Must be a valid date in ISO 8601 format (YYYY-MM-DD)."
                 },
                 "getter": false,
                 "setter": false,
@@ -859,8 +912,8 @@ export class PostDatepicker {
                     "references": {
                         "AirDatepickerCustomOptions": {
                             "location": "local",
-                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-datepicker/post-datepicker.tsx",
-                            "id": "src/components/post-datepicker/post-datepicker.tsx::AirDatepickerCustomOptions"
+                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-date-picker/post-date-picker.tsx",
+                            "id": "src/components/post-date-picker/post-date-picker.tsx::AirDatepickerCustomOptions"
                         }
                     }
                 },
@@ -1067,14 +1120,9 @@ export class PostDatepicker {
                     "text": "An event emitted when a date or a range of dates have been selected."
                 },
                 "complexType": {
-                    "original": "Date | Date[]",
-                    "resolved": "Date | Date[]",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
                 }
             }];
     }
@@ -1082,30 +1130,19 @@ export class PostDatepicker {
         return {
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": "- The HTML element relative to which the popover calendar should be displayed"
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "Displays the popover calendar, focusing the first calendar item.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target - The HTML element relative to which the popover calendar should be displayed"
-                        }]
+                    "tags": []
                 }
             },
             "hide": {
@@ -1171,3 +1208,4 @@ export class PostDatepicker {
             }];
     }
 }
+PostDatePicker.FLYOUT_OFFSET = 4;

package/dist/collection/components/post-footer/post-footer.css

@@ -1 +1 @@
-:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-list-flex-direction: column;--post-footer-list-gap: 8px;--post-footer-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-list-flex-direction: row;--post-footer-list-gap: 16px;--post-footer-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}:is(h3,.h3){margin:0;font-size:var(--post-device-font-size-6);line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black);text-wrap:balance}::slotted(ul){list-style:none;padding:0;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(div),.footer-app ::slotted(div),.footer-meta ::slotted(div){display:flex !important;flex-direction:var(--post-footer-list-flex-direction) !important;gap:var(--post-footer-list-gap) !important;align-items:var(--post-footer-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-businesssectors ::slotted(div){display:flex;flex-wrap:wrap;align-items:center;gap:var(--post-footer-list-gap) !important}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}
+:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-list-flex-direction: column;--post-footer-list-gap: 8px;--post-footer-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-list-flex-direction: row;--post-footer-list-gap: 16px;--post-footer-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}:is(h3,.h3){margin:0;font-size:var(--post-device-font-size-6);line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black);text-wrap:balance}::slotted(ul){list-style:none;padding:0;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid:has(>.d-none+.d-none+.d-none+.d-none){margin-block-end:0;padding-block-end:0;row-gap:0;column-gap:0}.footer-grid post-accordion:has(>.d-none+.d-none+.d-none+.d-none){display:none}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(div),.footer-app ::slotted(div),.footer-meta ::slotted(div){display:flex !important;flex-direction:var(--post-footer-list-flex-direction) !important;gap:var(--post-footer-list-gap) !important;align-items:var(--post-footer-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-businesssectors ::slotted(div){display:flex;flex-wrap:wrap;align-items:center;gap:var(--post-footer-list-gap) !important}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}

package/dist/collection/components/post-footer/post-footer.js

@@ -24,7 +24,7 @@ export class PostFooter {
         this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
     }
     connectedCallback() {
-        window.addEventListener('postBreakpoint:device', this.breakpointChange);
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
         this.validateTextFooter();
@@ -35,7 +35,7 @@ export class PostFooter {
         });
     }
     disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
     }
     handleGridSlotChange(...devices) {
         return (e) => {
@@ -56,7 +56,7 @@ export class PostFooter {
         return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '463d05f761606823f6a0509961719a166802df0b', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '235731df03aa871b5d411d208df54fe26008e4d7' }, h("h2", { key: '7bb8f8013b7c0deb5f021105bbb193c922efabd4', class: "visually-hidden" }, this.textFooter), h("div", { key: '9aaf9cb32744df2d1c0585342a6fd9783702995a', class: "footer-container" }, h("div", { key: '4dcbf986a6241a3bcd4e7a6e311d5640773a69e7', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '9e295c05da9b0b8f3c4a01b8e433d5ef4f5c71ac', class: "footer-column" }, h("div", { key: '1703a08855755586c4721ddc50e1f3bd121907a5', class: "footer-socialmedia" }, h("slot", { key: 'c7961d016fb26f6af5022fff4550e15ef36a3881', name: "socialmedia" })), h("div", { key: 'cef3bdd672ab0cddc7aa7e2b3d85705752caeb9e', class: "footer-app" }, h("slot", { key: '5f97c901fb99e4f7458ef5036a55a887186b29b6', name: "app" }))), h("div", { key: '33d8851199a96900353591d4af606f710f440892', class: "footer-businesssectors" }, h("slot", { key: 'ae94799f81ea9031aa3a4489cbcc218afcfed257', name: "businesssectors" })), h("div", { key: '3c9f984ebb4dfaa3aa595e804043d1d023616360', class: "footer-meta" }, h("slot", { key: 'be63fa921c073a2b6bb396339bea7a850f908b4c', name: "meta" })), h("div", { key: '2a2b7a4f9a5cf9b31534ab42ded552872582aaeb', class: "footer-copyright" }, h("slot", { key: 'c80396f078acf145fa2b873a0ea3e453723488d9', name: "copyright" }))))));
+        return (h(Host, { key: 'be8e78b13597a378a3f37a89f2f4fa5553036206', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '623aa5da3107b544c697f030a050b3ac516867ec' }, h("h2", { key: 'e916c70696d0bfa37a9770ed714073e48bf10fb6', class: "visually-hidden" }, this.textFooter), h("div", { key: 'f85439265e62b5d262d8fa2aff87df35df2f4b74', class: "footer-container" }, h("div", { key: '91235f909d2138536273c87afd69ba0008df8776', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '22185d166fbb42ab089475a85847933fee4bcf97', class: "footer-column" }, h("div", { key: 'a8f482d680f84ce0d146c313cb47b533d29f6dfa', class: "footer-socialmedia" }, h("slot", { key: 'b5299b55e738ae34c4805ee73e8e7313bb645a75', name: "socialmedia" })), h("div", { key: '8a95fa529436c71f2b3c3f2b3bc64eefe5325f99', class: "footer-app" }, h("slot", { key: 'f2c43566ff23b06663b0807f021830af8405e3d2', name: "app" }))), h("div", { key: '539d6db985d9158bf61eae1bd80c52a39ec19cab', class: "footer-businesssectors" }, h("slot", { key: '1c433ce5950e8ee2116afe50c3efd3290f4cec8d', name: "businesssectors" })), h("div", { key: '7d71af6cb0b7b1d4cd1f0ef45386dfd4da974664', class: "footer-meta" }, h("slot", { key: '67905639dfdc2ef406ac23a93cd3ae623f14e47b', name: "meta" })), h("div", { key: '94892c47ebf68134d28417c4fccb9bace0ee4038', class: "footer-copyright" }, h("slot", { key: 'bd4853f4cb3342f7ef2c01f2c16cd3378a6c2899', name: "copyright" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-header/post-header.js

@@ -55,11 +55,11 @@ export class PostHeader {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
         if (this.device !== 'desktop' && burgerMenuExtended) {
-            scrollParent.setAttribute('data-post-scroll-locked', '');
+            scrollParent.dataset.postScrollLocked = '';
             this.host.addEventListener('keydown', this.keyboardHandler);
         }
         else {
-            scrollParent.removeAttribute('data-post-scroll-locked');
+            delete scrollParent.dataset.postScrollLocked;
             this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
@@ -103,15 +103,15 @@ export class PostHeader {
         this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
     }
     connectedCallback() {
-        window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent, {
+        globalThis.addEventListener('resize', this.throttledResize, { passive: true });
+        globalThis.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
         this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        window.addEventListener('postBreakpoint:device', this.breakpointChange);
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
         this.handleScrollParentResize();
         this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
     }
@@ -139,9 +139,9 @@ export class PostHeader {
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
-        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
-        window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent);
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        globalThis.removeEventListener('resize', this.throttledResize);
+        globalThis.removeEventListener('scroll', this.handleScrollEvent);
         if (scrollParent)
             scrollParent.removeEventListener('scroll', this.handleScrollEvent);
         document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
@@ -213,7 +213,7 @@ export class PostHeader {
         const focusableElements = [this.burgerMenuButton];
         focusableElements.push(...getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
         this.firstFocusableEl = focusableElements[0];
-        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
+        this.lastFocusableEl = focusableElements.at(-1);
     }
     keyboardHandler(e) {
         if (e.key !== 'Tab' || !this.burgerMenuExtended)
@@ -317,10 +317,10 @@ export class PostHeader {
     render() {
         const onDesktop = Build.isServer || this.device === 'desktop';
         const onTabletAndMobile = Build.isServer || this.device !== 'desktop';
-        return (h(Host, { key: '927a12917d64f0e0fed247764ab5a89c2ff66453', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '58e53821b44b9569a1a1f39663c6e315142fb0c2' }, h("div", { key: 'ead8157d4b94892be4e20c98ba9480411a08aafe', class: "global-header" }, h("div", { key: 'e2c6bbabfbfca71a978b6ed3e2ecbb105751bdd1', class: "section" }, h("div", { key: 'e52b27fc0a128e2bcd6d14c232a6091129a5562d', class: "logo" }, h("slot", { key: '72a698e81b6fa12f7ced243396dd39adef2da34c', name: "post-logo" })), h("div", { key: '82523f2072649282591d643db0f48d518a1ce4a6', class: "sliding-controls" }, onDesktop && (h("div", { key: 'f85c022c415dbd631b63a528ad8f19466901c248', class: "audience" }, h("slot", { key: '772525ed51e5fc3c92b523c1b71b1d67bf01038d', name: "audience" }))), h("slot", { key: 'a73f412a7634075fd6721c1d50aef56231f647a4', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
-            h("slot", { key: 'dd9b0cc2582285c18afec62522fff7ab2fe6b34a', name: "global-nav-secondary" }),
-            h("slot", { key: 'f4e4f916c66d7d1d6fc43f73e8af40a81d11c55d', name: "language-menu" }),
-        ], h("slot", { key: 'edbaa4e685f65ca22c1a3c7eca5b53f5d297b66a', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '5086903a3e9e01fec9273b71c7c9262026df9208', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'b069fe1a4f1ac7aac9a1779a26e72e8b50a7aecc' }, this.textMenu), h("post-icon", { key: 'e4e35ce811dd238db1b432aa9a2c33f270ab4d81', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'a6dbcdc99f86ab7dafef916b23b1172fd94894bd', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'cc9c29c26166b789b566819a1247af0126b190a1', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '6a46fce27e151905c1c00bd72aff6bd57e88ebec', class: "section" }, h("slot", { key: 'b4b442dc52e45bfd84e3695f48d4a172e9d12786', name: "title" }), this.hasTitle && h("slot", { key: '6b569368e83793b19f4bfd5b0ab4c42ef7f4f594', name: "local-nav" }), onDesktop && h("slot", { key: '7a5ba718de6a6f54b9a97c1be93b2ffc41d71122', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: 'd62ff184e22380c837794b2e2c813189b546e9b7', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        return (h(Host, { key: '3a91565f737ace8c2afa09aea4376301df78de15', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '3983485ef60f0ac3a14224ebc3e550c73b183533' }, h("div", { key: 'fcb70d0d33448afd05a9d0cc2045cbf954ffef8b', class: "global-header" }, h("div", { key: 'fc4a7fe09d320c801ffab5b8a1652078685ec126', class: "section" }, h("div", { key: '41ea4d25ae37ad90875201a6d580bf0e856055e0', class: "logo" }, h("slot", { key: 'c1fc7972273b8ca82d41535f6a3c0ee8f4a7da6a', name: "post-logo" })), h("div", { key: 'fb7d8e98ac126416c7342b34e9655e1ef82fed20', class: "sliding-controls" }, onDesktop && (h("div", { key: 'e9556afe505005b09892fcf7a9092ac5892337ee', class: "audience" }, h("slot", { key: '62a2bec634b4f5afff5a3323187de4bfa7ddcf3c', name: "audience" }))), h("slot", { key: 'e8e88e7547d71312cf868f81386eba9405b5e6b2', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            h("slot", { key: '85d07e119df995f5b4aec62675eb821dee0b3059', name: "global-nav-secondary" }),
+            h("slot", { key: '087f20e4844e9bf5fa6a945e4352509f0128eb70', name: "language-menu" }),
+        ], h("slot", { key: 'b4def359986a7093cacf963709ca27180c34d294', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '534cb2b1f21ac6408f7ea14722c2ee8c82e268eb', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'fe96f2269a1e76e26edcef2d66beacac5149dea0' }, this.textMenu), h("post-icon", { key: '7eabffedbe08a520d7be8c930168ac15428c132d', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'fb3cdba5cce308547bb057bfb5e915b3b7b3848b', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '48f203901cd57d50f3a70b8065e65e2a45e6e0bb', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '846dc6852d5978a3fd1d3cd22a6c870c8d9f1cf3', class: "section" }, h("slot", { key: '91d510bd1948b004787c1d77f9d0ae0669a7a231', name: "title" }), this.hasTitle && h("slot", { key: '13fd6cd078235ee8449d22944ee67926f11b3db1', name: "local-nav" }), onDesktop && h("slot", { key: '67b37a81c37cf6a77df5a15519e09b884d3cd892', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '6ca6a422b465a38a1c02e21229dc5f9f0178ffcc', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }