@swisspost/design-system-components 10.0.1 → 10.2.0

package/dist/collection/components/post-date-picker/post-date-picker.js

@@ -42,6 +42,8 @@ export class PostDatePicker {
         this._lastInputValue = null;
         this.skipOnSelectCount = 0;
         this.skipFocusOnNextRender = false;
+        // Date the keyboard is navigating to, used to keep focus correct when the grid redraws
+        this.pendingFocusDate = null;
         this.handleInputBlur = () => {
             if (this.range) {
                 const parts = this.inputMask.value.split(this.dateFormatRangeSeparator);
@@ -182,10 +184,17 @@ export class PostDatePicker {
             // If month has changed, update view date
             const monthChanged = current.getMonth() !== newDate.getMonth() || current.getFullYear() !== newDate.getFullYear();
             if (monthChanged) {
+                this.pendingFocusDate = newDate;
                 this.skipFocusOnNextRender = false;
                 this.dpInstance.setViewDate(newDate);
                 requestAnimationFrame(() => {
                     this.setActiveCell(newDate, true);
+                    // Clear it a frame later, in case the grid redraws itself twice
+                    requestAnimationFrame(() => {
+                        if (this.pendingFocusDate === newDate) {
+                            this.pendingFocusDate = null;
+                        }
+                    });
                 });
             }
             else {
@@ -465,6 +474,28 @@ export class PostDatePicker {
             this.nextBtn?.setAttribute('aria-label', this.textNextMonth);
         }
     }
+    // ARIA requires role="grid" to own role="row", and role="row" to own role="gridcell"
+    // AirDatepicker renders cells flat, so we wrap them in row divs to satisfy that
+    wrapCellsInRows(body) {
+        this.gridObserver?.disconnect();
+        body.querySelectorAll(':scope > [role="row"]').forEach(row => {
+            while (row.firstChild)
+                body.insertBefore(row.firstChild, row);
+            row.remove();
+        });
+        const cells = Array.from(body.children).filter(el => el.classList.contains('air-datepicker-cell'));
+        const columns = PostDatePicker.COLUMNS_BY_VIEW[this.currentViewType];
+        for (let i = 0; i < cells.length; i += columns) {
+            const row = document.createElement('div');
+            row.setAttribute('role', 'row');
+            row.classList.add('a11y-row');
+            body.insertBefore(row, cells[i]);
+            for (let j = i; j < i + columns && j < cells.length; j++) {
+                row.append(cells[j]);
+            }
+        }
+        this.gridObserver.observe(body, { childList: true, subtree: false });
+    }
     enhanceAccessibility(focusOnDate = true) {
         let body = this.dpContainer.querySelector('.air-datepicker-body--cells');
         if (this.currentViewType === 'months') {
@@ -476,6 +507,7 @@ export class PostDatePicker {
         if (!body)
             return;
         body.setAttribute('role', 'grid');
+        this.wrapCellsInRows(body);
         this.getCells().forEach(c => {
             c.setAttribute('aria-selected', c.classList.contains('-selected-') ? 'true' : 'false');
             if (c.classList.contains('-current-')) {
@@ -486,7 +518,9 @@ export class PostDatePicker {
         body.addEventListener('keydown', this.handleGridKeydown);
         const dates = this.getIsoDates();
         const selectedDate = dates[0] ? isoToDate(dates[0]) : null;
-        this.setActiveCell(selectedDate || this.today, focusOnDate);
+        // Focus the keyboard's target date if there is one, else the selected date, else today
+        const dateToFocus = this.pendingFocusDate || selectedDate || this.today;
+        this.setActiveCell(dateToFocus, focusOnDate);
     }
     /**
      * Set up the masks on the inputs to reflect the date pickers
@@ -654,8 +688,8 @@ export class PostDatePicker {
         if (this.dpContainer) {
             const options = {
                 navTitles: {
-                    days: `<button aria-label="${this.textSwitchYear}"><strong>MMMM yyyy</strong><post-icon name="chevrondown"></post-icon></button>`,
-                    months: `<button aria-label="${this.textSwitchYear}"><strong>yyyy</strong><post-icon name="chevrondown"></post-icon></button>`,
+                    days: `<button><strong>MMMM yyyy</strong><span class="visually-hidden">, ${this.textSwitchYear}</span><post-icon name="chevrondown"></post-icon></button>`,
+                    months: `<button><strong>yyyy</strong><span class="visually-hidden">, ${this.textSwitchYear}</span><post-icon name="chevrondown"></post-icon></button>`,
                 },
                 prevHtml: '<button><post-icon name="chevronleft" ></post-icon></button>',
                 nextHtml: '<button><post-icon name="chevronright" ></post-icon></button>',
@@ -863,11 +897,11 @@ export class PostDatePicker {
         }
     }
     render() {
-        return (h(Host, { key: '81640c91615041d9f52f58395ac3a6a23ba9bad2', "data-version": version }, this.inline && (h("div", { key: 'e405be301af265906fb6ba5f966810a99a15cc21', dir: this.textDirection }, h("slot", { key: '0072a973e6f6e52bedf330c382a88c4c7f7a1ab6' }), h("div", { key: '8f57e51e54188bfdb3fad31d40c528885a4109a2', class: "datepicker-container" }))), !this.inline && (h("div", { key: 'e36a35c4125942422e803a9751fa8b9842edf472', dir: this.textDirection }, h("div", { key: '8cc9e3bb801cfb6b999a473462bf2072bbc57426', class: {
+        return (h(Host, { key: '231026bbf4e2ea6e12abc613f5a44ad1df7a1c88', "data-version": version }, this.inline && (h("div", { key: '69f1343a088c986e28aa2648eeb389432353e1eb', dir: this.textDirection }, h("slot", { key: 'f2c0bc1c1f5a6b716f421301418e0fcf11cbc774' }), h("div", { key: '17e7f3f6be51ed283ab80adcfb182ad36ac14b17', class: "datepicker-container" }))), !this.inline && (h("div", { key: '8cc1938f558f764cc3a02351e4470b4bdde54210', dir: this.textDirection }, h("div", { key: 'e2a241a226e4817e17d3ffb96ac0f8ccbc1e9e5f', class: {
                 'calendar-input': !this.range,
                 'calendar-input-range': this.range,
                 'disabled': this.inputDisabled,
-            } }, h("slot", { key: '3d4efd053a72c1e5d5622889eefe4cb9745ef148' }), h("button", { key: '8d27e799e2dda60207e6fbf3923ceb2d12b1ea00', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: 'b8faa8720d9a8fe7043392ba3a20de168841f5d8', name: "calendar" }))), h("post-popovercontainer", { key: '9999a1bb1272c1b2a51715363f89afafcc6de33f', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '8950128377fdc625a2da501c609dd25b0993b12e', class: "datepicker-container" }))))));
+            } }, h("slot", { key: '90a42ee8a1f9df6a541c0573ec6ea5b872abf6b6' }), h("button", { key: '04e02dce4a4c35681f7db41b1b222a24716f7ebc', onClick: () => this.show(), "aria-haspopup": "true", "aria-label": this.textToggleCalendar, disabled: this.inputDisabled, ref: e => (this.dpTrigger = e) }, h("post-icon", { key: 'd325b4589e1cbd237207fe1b6bc9af7bd8907e7c', name: "calendar" }))), h("post-popovercontainer", { key: '5616c7c6c3db35838de04ecbdadd0ba398e8cb37', placement: "bottom-end", offset: PostDatePicker.FLYOUT_OFFSET, ref: e => (this.popoverRef = e) }, h("div", { key: '1df05f1c4e855ffc3549f48073ae28ef87067007', class: "datepicker-container" }))))));
     }
     static get is() { return "post-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1226,6 +1260,12 @@ export class PostDatePicker {
     }
 }
 PostDatePicker.FLYOUT_OFFSET = 4;
+// Cells per row for each view
+PostDatePicker.COLUMNS_BY_VIEW = {
+    days: 7,
+    months: 4,
+    years: 4,
+};
 __decorate([
     DateValue(),
     IsoDate()

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

@@ -1 +1 @@
-:host{display:block}footer{border-block-start:1px solid #373632;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-prefooter-padding-block: 16px;--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-prefooter-padding-block: 32px;--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)}.prefooter{background-color:#fafafa}.prefooter .footer-container{padding-block:0}.prefooter ::slotted([slot=prefooter]){padding-block:var(--post-footer-prefooter-padding-block)}.footer-main{background-color:#fc0}.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)}.prefooter ::slotted(div),.footer-businesssectors ::slotted(div){display:flex;flex-wrap:wrap;align-items:center;gap:var(--post-footer-list-gap) !important}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.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{border-block-start:1px solid #373632;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-prefooter-padding-block: 16px;--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-prefooter-padding-block: 32px;--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)}.prefooter{background-color:#fafafa}.prefooter .footer-container{padding-block:0}.prefooter ::slotted([slot=prefooter]){padding-block:var(--post-footer-prefooter-padding-block)}.footer-main{background-color:#fc0}.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)}.prefooter ::slotted(div),.footer-businesssectors ::slotted(div){display:flex;flex-wrap:wrap;align-items:center;gap:var(--post-footer-list-gap) !important}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.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

@@ -12,6 +12,7 @@ import { breakpoint, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
 const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
+const SECTION_SLOTS = ['socialmedia', 'app', 'businesssectors', 'meta', 'copyright'];
 /**
  * @slot prefooter - Slot for the pre-footer.
  * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
@@ -19,26 +20,27 @@ const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
  * @slot socialmedia - Slot for the social media links.
  * @slot app - Slot for the app links.
  * @slot businesssectors - Slot for the business sectors links.
- * @slot meta - Slot for the meta links.
- * @slot copyright - Slot for the copyright text.
+ * @slot meta - **Required.** Slot for the meta links.
+ * @slot copyright - **Required.** Slot for the copyright text.
  */
 export class PostFooter {
     constructor() {
         this.device = breakpoint.get('device');
-        this.gridSlotDisplayed = {};
+        this.slotDisplayed = {};
         this.breakpointChange = (e) => {
             this.device = e.detail;
         };
         this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
+        this.handleSlotChange = this.handleSlotChange.bind(this);
     }
     connectedCallback() {
         globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
-        // initialize grid visibility by checking the content of each slot
-        GRID_SLOTS.forEach(slotName => {
+        // initialize slot visibility by checking the content of each slot
+        [...GRID_SLOTS, ...SECTION_SLOTS].forEach(slotName => {
             const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
-            this.updateGridSlotDisplay(slotName, assignedElements.length > 0);
+            this.updateSlotDisplay(slotName, assignedElements.length > 0);
         });
     }
     disconnectedCallback() {
@@ -47,23 +49,39 @@ export class PostFooter {
     handleGridSlotChange(...devices) {
         return (e) => {
             if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
-                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+                this.updateSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
             }
         };
     }
-    updateGridSlotDisplay(slotName, hasContent) {
-        if (this.gridSlotDisplayed[slotName] !== hasContent) {
-            this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
+    handleSlotChange(e) {
+        if (e.target instanceof HTMLSlotElement) {
+            this.updateSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+        }
+    }
+    updateSlotDisplay(slotName, hasContent) {
+        if (this.slotDisplayed[slotName] !== hasContent) {
+            // @State only re-renders when this.slotDisplayed itself is replaced,
+            // not when one of its properties is changed directly
+            this.slotDisplayed = { ...this.slotDisplayed, [slotName]: hasContent };
         }
     }
     renderAccordion() {
-        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
+        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { key: slotName, class: { 'd-none': !this.slotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
     }
     renderColumns() {
-        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 }))));
+        return GRID_SLOTS.map(slotName => (h("div", { key: slotName, class: { 'd-none': !this.slotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '87cf55de334d5e0f43bf466185d78c4786d49492', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '01820a64befabb4b96c731daaef91cada24b59dc' }, h("h2", { key: '1b7b0177206199fe9eb1a16877002718225c5b0f', class: "visually-hidden" }, this.textFooter), h("div", { key: '3252249313ad2ab7059d37ea62f3d0daefb64049', class: "prefooter" }, h("div", { key: 'b3e48c915c0589a6d48da769a23370bff625075d', class: "footer-container" }, h("slot", { key: 'c77d6704a11bb26f2b65824840409c5be1088360', name: "prefooter" }))), h("div", { key: 'c68e4b4ed01a70af29415eca329e026a0428c0be', class: "footer-main" }, h("div", { key: '7996bca4f2d84268dca0bbde8bc4df35eaaa7710', class: "footer-container" }, h("div", { key: '3300d3fbcdffa533f91393a076d04e3fd03ead21', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '03c147ac0aa74c63defdf3d8e8a73b11826f4130', class: "footer-column" }, h("div", { key: '3e90fd4ba3de91a5f93bf18b4ce35bc1fc2533d3', class: "footer-socialmedia" }, h("slot", { key: 'eb0cdffde42c3e3583526480a435ef4f43e85395', name: "socialmedia" })), h("div", { key: '2a861100a8e6421c246a6c1a1ba0270c35941789', class: "footer-app" }, h("slot", { key: 'fc851920dfe073739792ae575d4d7c991d3687a5', name: "app" }))), h("div", { key: '9f849af988b281c3951f5a59d350cba3145fb1fb', class: "footer-businesssectors" }, h("slot", { key: '49afff2a24d9b27afedf2b8a3702209725648ba4', name: "businesssectors" })), h("div", { key: 'e213b2b70acf362f6e5070d256f00a833c4ba09b', class: "footer-meta" }, h("slot", { key: '064b8f8c7b66f23186d9e18e4ae1768ff117eaa0', name: "meta" })), h("div", { key: 'f4ebcebe64a68b504840c7ed6e1e449def977956', class: "footer-copyright" }, h("slot", { key: 'e91e587a3c3babb8e350fbf540c892d2659b6c50', name: "copyright" })))))));
+        const renderSocialmedia = this.slotDisplayed['socialmedia'];
+        const renderApp = this.slotDisplayed['app'];
+        const renderBusinesssectors = this.slotDisplayed['businesssectors'];
+        const renderMeta = this.slotDisplayed['meta'];
+        const renderCopyright = this.slotDisplayed['copyright'];
+        const allGridSlotsEmpty = GRID_SLOTS.every(slotName => !this.slotDisplayed[slotName]);
+        return (h(Host, { key: 'd34606bcddf871bcf82c64dd710a1e7d1d1dcbb5', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'a82c77c34e1308ed02445a221776f37ebe26d7f9' }, h("h2", { key: '3d6bd7b10494661506a1bd60323e3e3205b1a400', class: "visually-hidden" }, this.textFooter), h("div", { key: '6497d40d70757426194142d8b597101d4f0f5ce6', class: "prefooter" }, h("div", { key: '7d352f9029fe397f0ada15de8dacb9d8a0b2a831', class: "footer-container" }, h("slot", { key: 'bbe3c744a1ea06544ccfda3b1f9a7e52666b69c3', name: "prefooter" }))), h("div", { key: '4bdd7e6f0507bbbc9ccb7a9b3a5f1dad2f1c6936', class: "footer-main" }, h("div", { key: '3b141f824900b9dccb6746bb4b11678f2b90ef53', class: "footer-container" }, h("div", { key: '46ef9417bb0aced5506e8adbeb6001dbcfe119a5', class: { 'footer-grid': true, 'd-none': allGridSlotsEmpty } }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'd25f9b4b8e8bf8ce7d090c41c8b9de0c1454c566', class: {
+                'footer-column': true,
+                'd-none': !renderSocialmedia && !renderApp,
+            } }, h("div", { key: '43888182ec9db5d001ff724648f02a43acddb198', class: { 'footer-socialmedia': true, 'd-none': !renderSocialmedia } }, h("slot", { key: 'd96fe2e61b69ead95ba6235bdd63951ff177377a', onSlotchange: this.handleSlotChange, name: "socialmedia" })), h("div", { key: '0eb5c0c55f6d86ef4a179fa55bfb2b37311e1563', class: { 'footer-app': true, 'd-none': !renderApp } }, h("slot", { key: 'dcc9d0121b0febc2b2d4d183ca0aa979dd27b35c', onSlotchange: this.handleSlotChange, name: "app" }))), h("div", { key: '85a47b73374144b13fd40d3f25582e4375873647', class: { 'footer-businesssectors': true, 'd-none': !renderBusinesssectors } }, h("slot", { key: '1cbd28be1c5b8d52df6139db49e1e3b31db03a5a', onSlotchange: this.handleSlotChange, name: "businesssectors" })), h("div", { key: '1877c5230c17196d647f9ed145a21bcfed36321a', class: { 'footer-meta': true, 'd-none': !renderMeta } }, h("slot", { key: '12ca6c0a79db19365daddf3c14b4a395f664d3e1', onSlotchange: this.handleSlotChange, name: "meta" })), h("div", { key: '3dd50edca20df5bd258b1b01da2a88d556d5ea04', class: { 'footer-copyright': true, 'd-none': !renderCopyright } }, h("slot", { key: '058326a07ee00caea0cbac3843ba8190cf68abde', onSlotchange: this.handleSlotChange, name: "copyright" })))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -103,7 +121,7 @@ export class PostFooter {
     static get states() {
         return {
             "device": {},
-            "gridSlotDisplayed": {}
+            "slotDisplayed": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -93,7 +93,6 @@ export class PostHeader {
         this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
         this.keyboardHandler = this.keyboardHandler.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
-        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
         this.checkSlottedContent = this.checkSlottedContent.bind(this);
         this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
     }
@@ -311,10 +310,10 @@ export class PostHeader {
     render() {
         const onDesktop = Build.isServer || this.device === 'desktop';
         const onTabletAndMobile = Build.isServer || this.device !== 'desktop';
-        return (h(Host, { key: '3a016b6739ecd18aa06908b9afad8687d4a712c1', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '7066f5c25151411f0278fd533b94f58c33639734' }, h("div", { key: '983c81fbf93d290ea922ef096cd3975dbe50f2cf', class: "global-header" }, h("div", { key: '544c383fdaa252e7830ad516817f76c078b5f470', class: "section" }, h("div", { key: 'c40d977c47523dd9e77189e6cdc6bd2244efd494', class: "logo" }, h("slot", { key: 'bbf8224f6175164fcfdbd2a3ff82e716e95f2625', name: "post-logo" })), h("div", { key: '12b86a5d0a1e699bea709843dcc1fc5c337c0f5f', class: "sliding-controls" }, onDesktop && (h("div", { key: 'e61e9dd6d8b71c2dc85585474cd8c706298134f7', class: "audience" }, h("slot", { key: 'cda29d61263c8db64871bbdd024082e7fe85e981', name: "audience" }))), h("slot", { key: '003dcc8c02571ae211ae5533bbf497294742b72d', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
-            h("slot", { key: 'b29102d85a0f072f0180fc31a98926e65e8f5787', name: "global-nav-secondary" }),
-            h("slot", { key: '5b026ad48db5d9cd1965d2fe3738a76643221ae9', name: "language-menu" }),
-        ], h("slot", { key: '689a024322afc2104e904692653aaa29a58f37cb', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '3abdb29b313a7f87d7a5db4016dbca6c2db245ab', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'dbc87e156c0517bbb248a4a64722a390a80fce4f' }, this.textMenu), h("post-icon", { key: 'da8b9e64e10d99a2d6f9228fb2646c03392468e2', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '3122703175ff68eed014a025939a1021fcb39343', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'ce46d99d627c827a19b173a566c6000b708c8fc3', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: 'e11916e8674ca5154b3d2926f68f38760ae0a8ed', class: "section" }, h("slot", { key: '001da677105c63d3e491af0ce96d9cb44073addd', name: "side-nav" }), h("slot", { key: '1dd01962688baba6001bb1b0d2e6f12a1bd9ecee', name: "title" }), this.hasTitle && h("slot", { key: 'bf80e01e8559b857a86b6c4a47f890c75881c1ac', name: "local-nav" }), onDesktop && h("slot", { key: '9a23f56489ec5183a30db3556a2dc643681ab6d5', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '730782e3a41cb80427ef97a1c452f0de588c62e2', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        return (h(Host, { key: '27f2b45fb1462bab63be02bbdcb57ad9a2598bde', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '294bef701f378a96b06379806edae087d9211270' }, h("div", { key: '2df4d34bd7d5b714cac70b7201f2a17f7bf64517', class: "global-header" }, h("div", { key: 'd7902c1b10177b3790fb61035c527acf36fc0c3d', class: "section" }, h("div", { key: '952fed12ff5c717750a50ac32872f728ddabb113', class: "logo" }, h("slot", { key: 'a0a824677325c8a68fe483c8f6f7ef49378d5f4e', name: "post-logo" })), h("div", { key: '0dd5218658a03ebfcf049f47a1efa7197ca4e8cc', class: "sliding-controls" }, onDesktop && (h("div", { key: '9911f969b099b26d5e84d37d36aa7fd0ba44969f', class: "audience" }, h("slot", { key: '57b09b2030b7812990a915691fad10fb6d5bb474', name: "audience" }))), h("slot", { key: 'b6ba1ee1d5371504d3b4b9f12ca6d8ff2b5c36fa', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
+            h("slot", { key: "language-menu", name: "language-menu" }),
+        ], h("slot", { key: '669cebef2ce5905fee07abec99b0acced7ef42e5', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '9268220b8e838053d86abacc9e8334463a23350c', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '6706c34956268e049dd35fe12992b7b746aa394a' }, this.textMenu), h("post-icon", { key: '6578bc195b018c1202bda1732253f71e27df6244', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '506087286c148dbb55b963288add6935001c1feb', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'c645c82f3a71151a16bda3802a69228c1be048e9', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: 'ae30584b05570d62323a2d32f90653b38297b869', class: "section" }, h("slot", { key: '70b60e0d71a2f9c1e6a48d664ceb3778f5a3067a', name: "side-nav" }), h("slot", { key: 'cc356649c53e46b758916a44d4d7fb889e031172', name: "title" }), this.hasTitle && h("slot", { key: 'fbbd76c5c2cce8991c0cfcc740fe9231c1677f79', name: "local-nav" }), onDesktop && h("slot", { key: 'fd7e94fac20a263960e7ebbc66ddfac23bd954e8', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '38ac26fb18f85f1c42b4a7bdd97dc0e1b25ca940', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class PostIcon {
         }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (h(Host, { key: 'ce81db69bf77d09a0a331bac48cdaede7ff3cb8e', "data-version": version }, h("span", { key: '211f999da845687289fd991421f4315a090a67ba', style: this.getStyles() })));
+        return (h(Host, { key: '9d7b98a18fa098702c0fe1bd06544f605801db6a', "data-version": version }, h("span", { key: '847682d63ce72e26a541f40b29255e81febaf79e', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,61 +1,66 @@
 import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
-const INTERACTIVE_ELEMENTS = [
+const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'fieldset',
+    'optgroup',
+    'option',
+].join(',');
+const LINKAREA_TARGET_SELECTOR = [
     'a',
     'label[for]',
     'input[type="checkbox"]',
     'input[type="radio"]',
 ].join(',');
-const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
+function isDisabled(element) {
+    const fieldset = element.closest('fieldset');
+    if (fieldset && fieldset.disabled)
+        return true;
+    return 'disabled' in element && Boolean(element.disabled);
+}
 export class PostLinkarea {
-    get interactiveElement() {
-        return this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
+    getDirectTarget(event) {
+        for (const element of event.composedPath()) {
+            if (element instanceof HTMLSlotElement)
+                break;
+            if (element === this.host)
+                break;
+            if (element instanceof HTMLElement && element.matches(INTERACTIVE_ELEMENT_SELECTOR)) {
+                return element;
+            }
+        }
+        return null;
     }
-    isDisabledElement(element) {
-        // check if the element is an interactive, deactivatable element (button, fieldset, optgroup, option, select, textarea, input) and is disabled
-        const isDeactivatableElement = [
-            HTMLButtonElement,
-            HTMLFieldSetElement,
-            HTMLOptGroupElement,
-            HTMLOptionElement,
-            HTMLSelectElement,
-            HTMLTextAreaElement,
-            HTMLInputElement,
-        ].some(instance => element instanceof instance);
-        const isDisabled = element.disabled;
-        const isFieldsetDisabled = element.closest('fieldset')?.hasAttribute('disabled');
-        return isDeactivatableElement && (isDisabled || isFieldsetDisabled);
+    getDelegateTarget() {
+        return this.host.querySelector(LINKAREA_TARGET_SELECTOR);
     }
-    dispatchClick({ target, ctrlKey, shiftKey, altKey, metaKey }) {
-        const interactiveElement = target.closest(INTERACTIVE_ELEMENTS_SELECTOR);
-        let dispatchEvent;
-        if (!this.interactiveElement) {
-            // do NOT dispatch event, if there is no interactive element inside the host,
-            // as there is no element to dispatch the event to
-            dispatchEvent = false;
-        }
-        else if (this.isDisabledElement(this.interactiveElement)) {
-            // do NOT dispatch event, if the interactive element is disabled,
-            // as disabled elements do not trigger events
-            // in this case, it's not important if the interactive element has been clicked directly or not, as the event will not be dispatched in either case
-            dispatchEvent = false;
-        }
-        else if (interactiveElement instanceof HTMLLabelElement) {
-            // do NOT dispatch event, if the label (or a descendant) is associated with an input element inside the host,
-            // as the label will trigger a click on the associated input element anyway
-            dispatchEvent = this.host.querySelector(`#${interactiveElement.htmlFor}`) === null;
-        }
-        else {
-            // do NOT dispatch event, if the interactive element (or a descendant) has been clicked directly,
-            // as the event will be dispatched by the interactive element itself
-            dispatchEvent = !interactiveElement;
-        }
-        if (dispatchEvent) {
-            this.interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
-        }
+    dispatchClick(event) {
+        // If a non-disabled interactive element was clicked directly, let the browser handle it
+        const directTarget = this.getDirectTarget(event);
+        if (directTarget && !isDisabled(directTarget))
+            return;
+        // No delegate target or delegate target is disabled — nothing to forward
+        const delegateTarget = this.getDelegateTarget();
+        if (!delegateTarget || isDisabled(delegateTarget))
+            return;
+        const { ctrlKey, shiftKey, altKey, metaKey, button } = event;
+        delegateTarget.dispatchEvent(new MouseEvent('click', {
+            cancelable: true,
+            bubbles: true,
+            ctrlKey,
+            shiftKey,
+            altKey,
+            metaKey,
+            button,
+        }));
     }
     render() {
-        return (h(Host, { key: 'cb2563465ebe024e8e98539c27c7a8d7084229d3', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '68fc1468da418e4ed38e89cbf7ef932f819993dd' })));
+        return (h(Host, { key: 'aa721ba7506fefd66348e09fd17ce828dec89050', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '1ad85663662fc0f6c877ff88a6570ff4d4b1fa33' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-post-popovercontainer{border-radius:4px;overflow:hidden;box-shadow:var(--post-device-elevation-300)}div[role=listbox]{max-height:384px;overflow:auto;display:flex;flex-direction:column}::slotted([slot=blank-slate]){display:block;padding:.75rem;color:#666}
+post-popovercontainer{border-radius:4px;overflow:hidden;box-shadow:var(--post-device-elevation-300)}div[role=listbox]{max-height:384px;overflow:auto;display:flex;flex-direction:column}

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

@@ -129,7 +129,7 @@ export class PostListbox {
         this.updateSelection(event.detail);
     }
     render() {
-        return (h(Host, { key: '55f1f7335a5eed38163aa58a43f091f130a9a2ff', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '303a6b38d8c5e5fae7b295dd0a58008c7b39a23f', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
+        return (h(Host, { key: 'd9008aa55aca4e0a65fdffd67485d74ddc4069f6', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '5ba4d68483581101ca4bf6fea04102fa883b71d1', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, h("slot", { key: '286a31eff1b70ec35efcfa745103933598589f2a', name: "blank-slate" }), h("slot", { key: '4cebce7de3143c3eb1deafa57209f7295aa6ec44' }))));
     }
     static get is() { return "post-listbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,6 +38,10 @@ export class PostMegadropdown {
         this.trigger = false;
         /** Holds the current animation class. */
         this.animationClass = null;
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+            this.cancelAnimation();
+        };
         this.handleClickOutside = async (event) => {
             if (this.device !== 'desktop')
                 return;
@@ -65,7 +69,7 @@ export class PostMegadropdown {
         this.handleClickOutside = this.handleClickOutside.bind(this);
     }
     connectedCallback() {
-        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentDidRender() {
         this.getFocusableElements();
@@ -76,7 +80,7 @@ export class PostMegadropdown {
         this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
-        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
         if (PostMegadropdown.activeDropdown === this)
             PostMegadropdown.activeDropdown = null;
         this.removeListeners();
@@ -204,10 +208,6 @@ export class PostMegadropdown {
         this.currentAnimation?.cancel();
         this.currentAnimation = null;
     }
-    breakpointChange(e) {
-        this.device = e.detail;
-        this.cancelAnimation();
-    }
     addListeners() {
         this.host.addEventListener('keydown', this.keyboardHandler);
         document.addEventListener('keyup', this.handleTabOutside);
@@ -295,7 +295,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'e2f7cac1fd168c54334a7c2584ce07f387457c77', version: version }, h("div", { key: '5bd9e9d856c3038d30246e913b51348097507f21', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '13bf455331b1921f5e12fa0ebac27261bc608e89', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '75985254f1217f0f6d138fa14aa6af228ee1d0f5', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '2bb4219a62f7de1236f8208bdd01f22fd00dab00', class: "megadropdown-content" }, h("slot", { key: 'ad3c1b6e6ad5bc07e64f829a68fb933db1fc5016' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (h(Host, { key: '355f69ea10cd4c3c058e4c1e6818f1c9da7d4102', version: version }, h("div", { key: '9c2b9b31aa450c1e1b4257066a38bd3660e834ef', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '7fe7f257bb41b43b72cda39f1614c5ba4726b940', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '09ffb0ce4a56453d33d4366ce30c0bce09395f93', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'd88fb0218c8788981dd7f3213979eba5ab7ff333', class: "megadropdown-content" }, h("slot", { key: 'ab64e771770bd42c4f077ebe5e05685cb285134f' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     static get is() { return "post-megadropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){border-radius:var(--post-device-border-radius-focus)}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){border-radius:var(--post-device-border-radius-focus)}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:var(--post-device-spacing-padding-15);overflow:hidden}.pagination-list{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-4);min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-list .pagination-control:first-child{margin-inline-end:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.pagination-list .pagination-control:last-child{margin-inline-start:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-ellipsis,.pagination-link,.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center}.pagination-link,.pagination-ellipsis-content{width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-width:var(--post-device-sizing-interactive-button-height-1);font-size:var(--post-device-font-size-6);color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-weight:var(--post-device-font-weight-bold)}.pagination-link{box-sizing:border-box;padding:0;margin:0;font-weight:var(--post-device-font-weight-bold);text-decoration:none;background-color:var(--post-scheme-color-interactive-primary-enabled-bg4);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke5);border-radius:var(--post-device-border-radius-round);cursor:pointer;appearance:none;outline:none;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.pagination-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.pagination-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.pagination-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.pagination-link:active:not(.pagination-link-active),.pagination-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);background-color:var(--post-scheme-color-interactive-primary-hover-bg5);border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.pagination-link.pagination-link-active{color:var(--post-scheme-color-interactive-primary-selected-fg3);background-color:var(--post-scheme-color-interactive-primary-selected-bg4);border-color:var(--post-scheme-color-interactive-primary-selected-stroke1);cursor:default}.pagination-ellipsis{flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{user-select:none}.hidden-items{position:absolute;display:flex;gap:var(--post-device-spacing-gap-11);height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){border-radius:var(--post-device-border-radius-focus)}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){border-radius:var(--post-device-border-radius-focus)}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:var(--post-device-spacing-padding-15);overflow:hidden;box-sizing:border-box}.pagination-list{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-4);min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-list .pagination-control:first-child{margin-inline-end:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.pagination-list .pagination-control:last-child{margin-inline-start:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-ellipsis,.pagination-link,.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center}.pagination-link,.pagination-ellipsis-content{width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-width:var(--post-device-sizing-interactive-button-height-1);font-size:var(--post-device-font-size-6);color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-weight:var(--post-device-font-weight-bold)}.pagination-link{box-sizing:border-box;padding:0;margin:0;font-weight:var(--post-device-font-weight-bold);text-decoration:none;background-color:var(--post-scheme-color-interactive-primary-enabled-bg4);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke5);border-radius:var(--post-device-border-radius-round);cursor:pointer;appearance:none;outline:none;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.pagination-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.pagination-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.pagination-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pagination-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.pagination-link:active:not(.pagination-link-active),.pagination-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);background-color:var(--post-scheme-color-interactive-primary-hover-bg5);border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.pagination-link.pagination-link-active{color:var(--post-scheme-color-interactive-primary-selected-fg3);background-color:var(--post-scheme-color-interactive-primary-selected-bg4);border-color:var(--post-scheme-color-interactive-primary-selected-stroke1);cursor:default}.pagination-ellipsis{flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{user-select:none}.hidden-items{position:absolute;display:flex;gap:var(--post-device-spacing-gap-inline-4);height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.hidden-items .pagination-control-button:not(.hidden-page-button):first-child{margin-inline-end:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.hidden-items .pagination-control-button:not(.hidden-page-button):last-child{margin-inline-start:calc(var(--post-device-spacing-gap-11) - var(--post-device-spacing-gap-inline-4))}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

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

@@ -103,15 +103,14 @@ export class PostPagination {
         const paginationPadding = this.getPaginationPadding();
         const availableWidth = this.getAvailableWidth();
         const netWidth = availableWidth - paginationPadding;
-        const controlButtonsWidth = this.getControlButtonsWidth();
         const pageButton = this.hiddenItemsRef.querySelector('.hidden-page-button');
         const ellipsis = this.hiddenItemsRef.querySelector('.hidden-ellipsis');
         if (!pageButton)
             return;
         const singleButtonWidth = pageButton.getBoundingClientRect().width;
         const gap = pageButton && ellipsis ? this.calculateGap(pageButton, ellipsis) : 0;
-        const controlButtonGaps = gap * 2; // Gap after prev and before next
-        const widthForPages = netWidth - controlButtonsWidth - controlButtonGaps;
+        const controlButtonsWidth = this.getControlButtonsWidth(gap);
+        const widthForPages = netWidth - controlButtonsWidth;
         // Calculate how many page buttons can fit
         const maxPages = Math.floor((widthForPages + gap) / (singleButtonWidth + gap));
         const clampedMaxPages = Math.max(MIN_VISIBLE_PAGES, Math.min(maxPages, totalPages));
@@ -119,13 +118,17 @@ export class PostPagination {
         this.updatePagesWithValidation();
     }
     /**
-     * Gets total width of control buttons (prev/next)
+     * Gets total width of control buttons (prev/next) with their respective margins and gaps
      */
-    getControlButtonsWidth() {
+    getControlButtonsWidth(gap) {
         if (!this.hiddenItemsRef)
             return 0;
         const controlButtons = Array.from(this.hiddenItemsRef.querySelectorAll('.hidden-control-button'));
-        const totalWidth = controlButtons.reduce((sum, el) => sum + el.getBoundingClientRect().width, 0);
+        const totalWidth = controlButtons.reduce((sum, el) => {
+            const mStart = Number.parseFloat(globalThis.getComputedStyle(el).marginInlineStart);
+            const mEnd = Number.parseFloat(globalThis.getComputedStyle(el).marginInlineEnd);
+            return sum + el.getBoundingClientRect().width + mStart + mEnd + gap;
+        }, 0);
         return totalWidth;
     }
     /**
@@ -415,6 +418,7 @@ export class PostPagination {
      */
     emitPageChange(newPage) {
         this.page = newPage;
+        requestAnimationFrame(() => this.measureAndCalculateVisiblePages());
         this.postChange.emit(newPage);
     }
     /**
@@ -499,10 +503,10 @@ export class PostPagination {
      */
     renderHiddenItems(totalPages, isPrevHidden, isNextHidden) {
         return [
-            !isPrevHidden && (h("button", { class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronleftwide", "aria-hidden": "true" }))),
-            h("button", { class: "pagination-link pagination-control-button hidden-page-button", "aria-label": this.buildPageLabel(totalPages), disabled: true }, h("span", { "aria-hidden": "true" }, totalPages)),
-            h("span", { class: "pagination-ellipsis-content hidden-ellipsis", "aria-hidden": "true" }, ELLIPSIS),
-            !isNextHidden && (h("button", { class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronrightwide", "aria-hidden": "true" }))),
+            !isPrevHidden && (h("button", { key: "hidden-prev", class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronleftwide", "aria-hidden": "true" }))),
+            h("button", { key: "hidden-page", class: "pagination-link pagination-control-button hidden-page-button", "aria-label": this.buildPageLabel(totalPages), disabled: true }, h("span", { "aria-hidden": "true" }, totalPages)),
+            h("span", { key: "hidden-ellipsis", class: "pagination-ellipsis-content hidden-ellipsis", "aria-hidden": "true" }, ELLIPSIS),
+            !isNextHidden && (h("button", { key: "hidden-next", class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronrightwide", "aria-hidden": "true" }))),
         ];
     }
     render() {