@swisspost/design-system-components 10.0.1 → 10.1.0

package/dist/esm/post-linkarea.entry.js

@@ -1,67 +1,72 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
+import { v as version } from './package-jK9tFtoG.js';
 
 const postLinkareaCss = () => `:host{display:block;cursor:pointer;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}:host(:focus-within){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-within){outline-color:Highlight !important}}`;
 
-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);
+}
 const PostLinkarea = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    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' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-listbox-option.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DE1aWdqx.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-CsEmPq6P.js';
+import { v as version } from './package-jK9tFtoG.js';
 
 const postListboxOptionCss = () => `:host{padding:12px 12px 9px 16px;background-color:#fff;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;justify-content:space-between}:host(:hover){background-color:#f0efed}:host([data-active=true]){outline:2px solid #000;outline-offset:-4px}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid #050400;outline-offset:2px}.option-content{display:flex;flex-direction:column;min-width:0}.option-description{display:none;font-size:.85em;color:#666}:host(:not(:empty)) .option-description{display:block}post-icon{width:24px;height:24px}`;
 
@@ -14,9 +14,9 @@ const PostListboxOption = class {
         this.highlighted = false;
     }
     render() {
-        return (h(Host, { key: 'ff0e773f8a89f9df3996a83cd2be6247c1ab5475', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
+        return (h(Host, { key: '083077341f74f3d6f7baad7599aef968a9f07582', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
             /* Prevent focus change from triggering onblur event in post-autocomplete */
-            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: 'cb43e8bec5f262ae25ddfdcae1b7f9979bdd6858', class: "option-content" }, this.value, h("span", { key: '5b314c41073a357185613a04a07d2020e4eab300', class: "option-description" }, h("slot", { key: 'ac1ed1be98f9a348952c0169d7ec89f8aaa99474' }))), this.selected && h("post-icon", { key: '7691085df732c0c2c5db9824587d54047017adf5', "aria-hidden": "true", name: "checkmark" })));
+            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: '7d844e51e7f90ea77075f83b663b2b77049f04df', class: "option-content" }, this.value, h("span", { key: 'b7b19312ebaf634292076425725434d18a8a6532', class: "option-description" }, h("slot", { key: '69db5aad7cbe41419398ca32c7ca2b955fbcaefe' }))), this.selected && h("post-icon", { key: '8969fc083fb669a4c5e9d8dbb1c12e1fcde053d5', "aria-hidden": "true", name: "checkmark" })));
     }
 };
 PostListboxOption.style = postListboxOptionCss();

package/dist/esm/post-listbox.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import './breakpoints-BQ3HlJPr.js';
 import { E as EventFrom } from './event-from-rEfV4v4a.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { v as version } from './package-jK9tFtoG.js';
 
 const postListboxCss = () => `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}`;
 
@@ -135,7 +135,7 @@ const PostListbox = class {
         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) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-number-input.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import { d as debounce } from './breakpoints-BQ3HlJPr.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { v as version } from './package-jK9tFtoG.js';
 
 function getSlottedElement(host, selector) {
     const slottedElements = host.querySelectorAll(selector);
@@ -126,10 +126,10 @@ const PostNumberInput = class {
     }
     render() {
         const areButtonsShown = !!this.input;
-        return (h(Host, { key: '59cbe12c66b0eabbff15a3110ee847396df2d261', "data-version": version, class: {
+        return (h(Host, { key: 'a515b63f296ab4d5fcddeebee0fd1edec22093b8', "data-version": version, class: {
                 'number-input-sm': this.small,
                 'disabled': this.isDisabled,
-            } }, areButtonsShown && (h("div", { key: '43fca97c040104786ab528b04f3e0dd576f29025', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: '1b41c236beb802d98f60776827928335d00599c4', name: "minus" }))), h("div", { key: '8342d335e0a84f78514edac5052ffea081fb40c7', class: "input-container" }, h("slot", { key: 'd2f8eae0656faaab31358cd3582c873d4a491e73', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '0055b317ed6ec64f2451640c436d169bb0b07626', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: 'dafe4a65f6d5d6ba4f54229c55506d5cf14fe126', name: "plus" })))));
+            } }, areButtonsShown && (h("div", { key: '17b65f0454b9843796dc0604a20df539326be003', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: '109251510a76ced4aed7e52ec08bf54241a4a625', name: "minus" }))), h("div", { key: '22a6cca78b4054cd04edb824c1b03dcbca087c60', class: "input-container" }, h("slot", { key: '1d54a8b78666d6525e017268dc02a543a19f88a9', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '696ca615ff1a030b64e19b1b43b5eed978b1afe8', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: 'd4d34aee8d6b09514a6a7aae7db5459a9aaefe09', name: "plus" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-pagination.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import './breakpoints-BQ3HlJPr.js';
 import { d as debounce } from './debounce-C9hMpmsD.js';
 import { n as nanoid } from './nanoid-8LXe8Zt_.js';
-import { v as version } from './package-Y58zWPwj.js';
-import { T as Type } from './type-S-4aPMGU.js';
-import { R as Required } from './required-DeOhRbtk.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { T as Type } from './type-BXIcop4C.js';
+import { R as Required } from './required-CE6lKrV1.js';
+import './create-validator-decorator-BURbkkYl.js';
 
-const postPaginationCss = () => `.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}`;
+const postPaginationCss = () => `.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}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -113,15 +113,14 @@ const PostPagination = class {
         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));
@@ -129,13 +128,17 @@ const PostPagination = class {
         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;
     }
     /**
@@ -425,6 +428,7 @@ const PostPagination = class {
      */
     emitPageChange(newPage) {
         this.page = newPage;
+        requestAnimationFrame(() => this.measureAndCalculateVisiblePages());
         this.postChange.emit(newPage);
     }
     /**
@@ -509,10 +513,10 @@ const PostPagination = class {
      */
     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() {

package/dist/esm/post-popover-trigger.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import './breakpoints-BQ3HlJPr.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { v as version } from './package-jK9tFtoG.js';
 import { i as isFocusable } from './focusable-C7afHKmo.js';
-import { T as Type } from './type-S-4aPMGU.js';
+import { T as Type } from './type-BXIcop4C.js';
 import './_commonjsHelpers-BFTU3MAI.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import './create-validator-decorator-BURbkkYl.js';
 
 const postPopoverTriggerCss = () => `:host{cursor:pointer}`;
 
@@ -114,7 +114,7 @@ const PostPopoverTrigger = class {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '009495ba354321f2b0162c4a0c4fcb1e165074e7', "data-version": version }, h("slot", { key: 'f0e5ef7851b4bc9916382b0910d9500db52668d4', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '999ec824514eb6e340fd607ce03d82c76354e102', "data-version": version }, h("slot", { key: '3429ab6e44441c2660c14c40436682b5ac49a1b6', onSlotchange: () => this.setupTrigger() })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/post-popover.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
 import './breakpoints-BQ3HlJPr.js';
 import { g as getDeepFocusableChildren } from './get-focusable-children-DxYnH2ye.js';
-import { v as version } from './package-Y58zWPwj.js';
-import { O as OneOf } from './one-of-Ug1_Xoes.js';
-import { R as Required } from './required-DeOhRbtk.js';
-import { T as Type } from './type-S-4aPMGU.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { O as OneOf } from './one-of-C-rie7lV.js';
+import { R as Required } from './required-CE6lKrV1.js';
+import { T as Type } from './type-BXIcop4C.js';
 import './get-root-08F-DB-d.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import './create-validator-decorator-BURbkkYl.js';
 
 const postPopoverCss = () => `*{box-sizing:border-box}:host{display:contents}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}`;
 
@@ -35,6 +35,9 @@ const PostPopover = class {
          */
         // eslint-disable-next-line @stencil-community/ban-default-true
         this.arrow = true;
+        this.breakpointChange = () => {
+            requestAnimationFrame(() => this.updateEdgeGap());
+        };
     }
     /**
      * Programmatically display the popover,
@@ -43,6 +46,7 @@ const PostPopover = class {
     async show(target) {
         await this.popoverRef.show(target);
         this.focusFirstEl();
+        this.updateEdgeGap();
     }
     /**
      * Programmatically hide this popover
@@ -56,8 +60,26 @@ const PostPopover = class {
      */
     async toggle(target, force) {
         const isOpen = await this.popoverRef.toggle(target, force);
-        if (isOpen)
+        if (isOpen) {
+            this.updateEdgeGap();
             this.focusFirstEl();
+        }
+    }
+    connectedCallback() {
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    // Use rendered close button size to define edge gap
+    updateEdgeGap() {
+        const closeButton = this.host.shadowRoot?.querySelector('post-closebutton');
+        if (!closeButton)
+            return;
+        const width = closeButton.getBoundingClientRect().width;
+        if (!width || Number.isNaN(width))
+            return;
+        this.edgeGap = width / 2;
     }
     focusFirstEl() {
         const focusableChildren = getDeepFocusableChildren(this.host);
@@ -68,7 +90,10 @@ const PostPopover = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f24329a264569794e7108875eda111a1456c5b47', "data-version": version }, h("post-popovercontainer", { key: 'ae8e9498e59de8a515f5bd11ecf79a2be9a513d1', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '76e4e49d302159db19c8e83a7ece60945f003da5', class: "popover-container" }, h("div", { key: '3fb7c1ca533e54b4960bd5d7c54535b0097831d8', class: "popover-content" }, h("slot", { key: '5bdf6a0a75d0c433f88afe0a6e9c6f298bbb64a7' })), h("post-closebutton", { key: '26d7569bb60cdb1aa5479260738f33cf65737df9', onClick: () => this.hide() }, this.textClose)))));
+        return (h(Host, { key: '967010ba495bd92f6f3482905689aeb42a4fcdf3', "data-version": version }, h("post-popovercontainer", { key: '1bd071b552544d7eb5245d74e794bd17e598a3df', arrow: this.arrow, placement: this.placement, edgeGap: this.edgeGap, ref: e => {
+                if (e)
+                    this.popoverRef = e;
+            } }, h("div", { key: '85c66b18d5aec9a2562102f73eee769e8137f4b7', class: "popover-container" }, h("div", { key: 'c105b7c234b9563089278425c242a1747141ed5c', class: "popover-content" }, h("slot", { key: '057699ccc414e0037aa82ddd40c3f523f0db9b9a' })), h("post-closebutton", { key: 'cf1f60f9700c7c41ac8e62699f1e1fa745fb49f8', onClick: () => this.hide() }, this.textClose)))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-progressbar.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import './breakpoints-BQ3HlJPr.js';
-import { r as registerDependency, c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-CYYTw0AS.js';
-import { T as Type } from './type-S-4aPMGU.js';
+import { r as registerDependency, c as createValidatorDecorator, g as getValidationContext } from './create-validator-decorator-BURbkkYl.js';
+import { T as Type } from './type-BXIcop4C.js';
 
 function resolveBound(component, bound) {
     const resolvedValue = typeof bound === 'string' ? component[bound] : bound;
@@ -124,7 +124,7 @@ const PostProgressbar = class {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (h(Host, { key: '26bdbb5219393e8b44e2fe5395d8a4cd8aa7e18a', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '65b81479fac7aa6024556ef6589064f997f4394e', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (h(Host, { key: '3d48615c3f08904f896eb5ebb7d8bfdff882a89b', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'dd8c0d44ba1aeccb3102cb15556517df98b9cf63', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-rating.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
 import './breakpoints-BQ3HlJPr.js';
-import { v as version } from './package-Y58zWPwj.js';
-import { R as Required } from './required-DeOhRbtk.js';
-import { T as Type } from './type-S-4aPMGU.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { R as Required } from './required-CE6lKrV1.js';
+import { T as Type } from './type-BXIcop4C.js';
+import './create-validator-decorator-BURbkkYl.js';
 
 const postRatingCss = () => `:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}`;
 
@@ -92,7 +92,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c793abbf5e0d01bb19dc4464ebd75249959a1717', "data-version": version }, h("div", { key: '357946df40a3d3a85ece2d0ac6ecc761951d9471', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c037e21b074c9ebc433e325e49d17dbe06d8db43', "data-version": version }, h("div", { key: 'f661eac91003680598c38d54dbc5fa3f482b7ad8', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/esm/post-side-navigation-trigger.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
+import { v as version } from './package-jK9tFtoG.js';
 import './breakpoints-BQ3HlJPr.js';
 import { E as EventFrom } from './event-from-rEfV4v4a.js';
 import { g as getRoot } from './get-root-08F-DB-d.js';
-import { R as Required } from './required-DeOhRbtk.js';
-import { T as Type } from './type-S-4aPMGU.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import { R as Required } from './required-CE6lKrV1.js';
+import { T as Type } from './type-BXIcop4C.js';
+import './create-validator-decorator-BURbkkYl.js';
 
 const postSideNavigationTriggerCss = () => `:host{display:inline-block}@media screen and (min-width: 1024px){:host{display:none}}`;
 
@@ -91,7 +91,7 @@ const PostSideNavigationTrigger = class {
         await this.sideNavigation?.toggle();
     }
     render() {
-        return (h(Host, { key: '62fd7ce0eb2583decb73c4505bf5a9a08e76f862', "data-version": version }, h("slot", { key: 'c3cfa14f670b8bcfc6e780d33c5c87df7880bb16' })));
+        return (h(Host, { key: 'f6b6a9681e0894724cdf523cbd8104f3c3c1924d', "data-version": version }, h("slot", { key: 'cbd61018657553b1aed33bddb3667145548fc653' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/post-side-navigation.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DE1aWdqx.js';
-import { v as version } from './package-Y58zWPwj.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CsEmPq6P.js';
+import { v as version } from './package-jK9tFtoG.js';
 import { b as breakpoint } from './breakpoints-BQ3HlJPr.js';
 import { a as getFocusableChildren } from './get-focusable-children-DxYnH2ye.js';
-import { R as Required } from './required-DeOhRbtk.js';
-import { T as Type } from './type-S-4aPMGU.js';
-import { O as OneOf } from './one-of-Ug1_Xoes.js';
+import { R as Required } from './required-CE6lKrV1.js';
+import { T as Type } from './type-BXIcop4C.js';
+import { O as OneOf } from './one-of-C-rie7lV.js';
 import './get-root-08F-DB-d.js';
-import './create-validator-decorator-CYYTw0AS.js';
+import './create-validator-decorator-BURbkkYl.js';
 
 const SIDE_NAVIGATION_SIZES = ['large', 'small'];
 
-const postSideNavigationCss = () => `:host{--post-side-navigation-padding-block-start:34px;--post-side-navigation-padding-block-end:16px;--post-side-navigation-bg:#f0efed;--post-side-navigation-stroke:#b4b3af;display:flex;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}:host dialog{overflow:visible;width:var(--post-side-navigation-width);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}@media screen and (max-width: 1023.98px){:host dialog{box-shadow:var(--post-device-elevation-300)}}:host post-closebutton{transform:translate(50%, 0)}`;
+const postSideNavigationCss = () => `:host{--post-side-navigation-padding-block-start:34px;--post-side-navigation-padding-block-end:16px;--post-side-navigation-bg:#f0efed;--post-side-navigation-stroke:#b4b3af;display:flex;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}:host dialog{overflow:visible;width:var(--post-side-navigation-width);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke);transform:translateX(-100%);transition-property:transform,overlay,display;transition-behavior:allow-discrete;transition-duration:350ms}@media screen and (max-width: 1023.98px){:host dialog{box-shadow:var(--post-device-elevation-300)}}:host dialog[open]{transform:translateX(0)}@starting-style{:host dialog[open]{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){:host dialog{transition:none}}:host post-closebutton{transform:translate(50%, 0)}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -34,6 +34,12 @@ const PostSideNavigation = class {
         this.size = 'large';
         this.breakpointChange = (e) => {
             this.device = e.detail;
+            if (this.device === 'desktop') {
+                if (this.dialog?.open) {
+                    this.dialog.close();
+                }
+                this.postToggle.emit(false);
+            }
         };
         /**
          * Collapses the active disclosure on Escape; lets the native dialog handle it otherwise.
@@ -122,7 +128,7 @@ const PostSideNavigation = class {
             } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (h(Host, { key: '71ecd690876690a72f5c06b1e91856600aa11b90', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+        return (h(Host, { key: '6eedcff11247da8a32bbf1a217530cdfcd411c91', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
     }
     get host() { return getElement(this); }
 };