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

package/dist/collection/components/post-number-input/post-number-input.js

@@ -3,20 +3,24 @@ import { debounce } from "throttle-debounce";
 import { version } from "../../../../package";
 import { getSlottedElement, repeatOnLongPress } from "../../utils/index";
 function parseNumber(input, key) {
-    const value = parseFloat(input[key]);
-    return isNaN(value) ? undefined : value;
+    const value = Number.parseFloat(input[key]);
+    return Number.isNaN(value) ? undefined : value;
 }
 function compare(value, bound, comparator) {
     return value !== undefined && bound !== undefined && comparator(value, bound);
 }
 export class PostNumberInput {
     constructor() {
+        this.isDisabled = false;
         this.isIncrementDisabled = false;
         this.isDecrementDisabled = false;
+        this.small = false;
         this.setupInput = debounce(50, () => {
             this.input = this.input ?? getSlottedElement(this.host, 'input[type="number"]');
             if (!this.input)
                 return;
+            this.isDisabled = this.input.disabled;
+            this.small = this.input.classList.contains('form-control-sm');
             // step buttons may be disabled when the input loads
             this.updateStepButtonState();
             // step buttons may become disabled after the value is changed via keyboard / typing
@@ -84,7 +88,10 @@ export class PostNumberInput {
     }
     render() {
         const areButtonsShown = !!this.input;
-        return (h(Host, { key: '46550d929e231f75702c1b9117bfc4d14d432aaa', "data-version": version }, areButtonsShown && (h("div", { key: '2b455c22e76e9fc8a2064f522f793aeaede4ee06', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: 'f8708da3644e0f2e07ace2aade7f84f83d446e17', name: "minus" }))), h("div", { key: 'a0c56a85d84d430e33096d2b1f4061231bedd184', class: "input-container" }, h("slot", { key: 'b3ada186248d64a1c77fe3126d5a27855a005021', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '523843cfea31ded5c1e77f2bdaf55aa68e69fb7d', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: 'a57c389d303e23a4f445e6fda2aff3e1c8503f4f', name: "plus" })))));
+        return (h(Host, { key: '84866a46bf2fdf8602213582e71fbc624fb3a7a6', "data-version": version, class: {
+                'number-input-sm': this.small,
+                'disabled': this.isDisabled,
+            } }, areButtonsShown && (h("div", { key: '33ed7af27e07a32d4063474889e15c568a140776', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: 'bf88349e2e442d4db77329cdd33332b5249e745a', name: "minus" }))), h("div", { key: '9e7cd209f45ef55f1e91dc5b9842fb9e56513f4b', class: "input-container" }, h("slot", { key: 'c3da29d4836c913f9ba466835afbd9219a6dc980', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '4fe40703c338a8ec8b1efa9922bcd7b96b72aa30', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: 'da54f7441c60c4732cc671022a33ebb8cfae4472', name: "plus" })))));
     }
     static get is() { return "post-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -100,8 +107,10 @@ export class PostNumberInput {
     }
     static get states() {
         return {
+            "isDisabled": {},
             "isIncrementDisabled": {},
             "isDecrementDisabled": {},
+            "small": {},
             "input": {}
         };
     }

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

@@ -101,7 +101,7 @@ export class PostPagination {
     scheduleMeasurement() {
         if (!this.loaded)
             return;
-        this.measurementTimeoutId = window.setTimeout(() => {
+        this.measurementTimeoutId = globalThis.setTimeout(() => {
             const canMeasure = this.navRef?.clientWidth > 0 && this.hiddenItemsRef;
             if (canMeasure) {
                 this.measureAndCalculateVisiblePages();
@@ -173,9 +173,9 @@ export class PostPagination {
     getPaginationPadding() {
         if (!this.navRef)
             return 0;
-        const computedStyle = window.getComputedStyle(this.navRef);
-        const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-        const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+        const computedStyle = globalThis.getComputedStyle(this.navRef);
+        const paddingLeft = Number.parseFloat(computedStyle.paddingLeft) || 0;
+        const paddingRight = Number.parseFloat(computedStyle.paddingRight) || 0;
         return paddingLeft + paddingRight;
     }
     /**
@@ -196,8 +196,8 @@ export class PostPagination {
      * Clamps the page number to valid range
      */
     clampPageToValidRange(totalPages) {
-        const invalidTotalPages = totalPages === 0 || this.invalidSize || isNaN(totalPages);
-        const invalidPage = !this.page || this.page < 1 || isNaN(this.page);
+        const invalidTotalPages = totalPages === 0 || this.invalidSize || Number.isNaN(totalPages);
+        const invalidPage = !this.page || this.page < 1 || Number.isNaN(this.page);
         const pageExceedsTotal = this.page > totalPages;
         if (invalidTotalPages || invalidPage) {
             return 1;

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

@@ -62,7 +62,7 @@ export class PostPopover {
         }
     }
     render() {
-        return (h(Host, { key: 'a6f257c7ee86f91c1726ab2c0a4f15a8c1725aae', "data-version": version }, h("post-popovercontainer", { key: 'f0a122aa46f9d28d2215e0cd5e5d6aba1e3e714e', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '80c41384076fa08397b44ca8c42a9fe0c0700c27', class: "popover-container" }, h("div", { key: 'c93714efca7aa854189681efa2346a560a68f034', class: "popover-content" }, h("slot", { key: '2b2df304dde672ce8d7415e309c5cd8d70144ada' })), h("post-closebutton", { key: 'e212d4ad9678844e65aa4efb35e796111812b033', onClick: () => this.hide() }, this.textClose)))));
+        return (h(Host, { key: '859812ad40c54e61ea90625d0170cc0336d5eba3', "data-version": version }, h("post-popovercontainer", { key: '47cdd1e48d4bf937d74c90fbb7f8d7ab73af1593', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ec5e72c7d463de0a92220d9a4e7be7fd6f6669a7', class: "popover-container" }, h("div", { key: '4934817369aa06236011af0e34763bd890ac3b4b', class: "popover-content" }, h("slot", { key: 'b3f56b3c9e5642cc210b18bd5a5abc4b4daf36e0' })), h("post-closebutton", { key: '354e2d16c3e4ba475a0cd030539da4a915950b1c', onClick: () => this.hide() }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-popover-trigger/post-popover-trigger.js

@@ -105,7 +105,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '5420b1a86908cc2f103bc7aca148701e8804f21b', "data-version": version }, h("slot", { key: '0e70264cb19becf5386cff430c530de2a8d043dd', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '52d004cbdcb7be0b7df6c10f70f5b3bdbeb89a27', "data-version": version }, h("slot", { key: '5eabc986947a00ed1fad3ce3f8103e615f709d9f', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
-import { Host, h, } from "@stencil/core";
-import { IS_BROWSER, checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
+import { Host, h, Build, } from "@stencil/core";
+import { checkEmptyOrOneOf, checkEmptyOrType } from "../../utils/index";
 import { version } from "../../../../package";
 import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 import { PLACEMENT_TYPES } from "../../types/index";
@@ -14,6 +14,7 @@ const ANIMATIONS = {
  */
 export class PostPopovercontainer {
     constructor() {
+        this.toggleTimeoutId = null;
         this.hasOpenedOnce = true;
         /**
          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
@@ -34,6 +35,7 @@ export class PostPopovercontainer {
          */
         this.animation = 'pop-in';
         this.currentAnimation = null;
+        this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
     }
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -54,7 +56,7 @@ export class PostPopovercontainer {
         this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
     }
     connectedCallback() {
-        if (IS_BROWSER && !isSupported()) {
+        if (Build.isBrowser && !isSupported()) {
             apply();
         }
     }
@@ -129,7 +131,7 @@ export class PostPopovercontainer {
             }
         }
         if (this.safeSpace) {
-            window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+            globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
         }
     }
     /**
@@ -140,7 +142,7 @@ export class PostPopovercontainer {
             this.clearAutoUpdate();
         }
         if (this.safeSpace) {
-            window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+            globalThis.removeEventListener('mousemove', this.boundMouseTrackingHandler);
         }
         // Cancel any running animation
         if (this.currentAnimation) {
@@ -196,7 +198,7 @@ export class PostPopovercontainer {
      * @param e ToggleEvent
      */
     handleToggle(e) {
-        this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
+        this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
         const isOpen = e.newState === 'open';
         if (isOpen) {
             this.open();
@@ -219,7 +221,7 @@ export class PostPopovercontainer {
      */
     getHeaderHeight() {
         const header = document.querySelector('post-header');
-        return header ? parseFloat(getComputedStyle(header).height) : 0;
+        return header ? Number.parseFloat(getComputedStyle(header).height) : 0;
     }
     async calculatePosition() {
         const { x, y, middlewareData, placement } = await this.computeMainPosition();
@@ -256,17 +258,23 @@ export class PostPopovercontainer {
     }
     async computeMainPosition() {
         const gap = this.edgeGap;
-        const middleware = [
-            flip({
-                padding: this.getHeaderHeight(),
+        const isAligned = (this.placement || 'top').includes('-');
+        const flipMiddleware = flip({
+            padding: this.getHeaderHeight(),
+            crossAxis: false,
+        });
+        const shiftMiddleware = shift({
+            padding: gap,
+            limiter: limitShift({
+                offset: 32,
             }),
+        });
+        const middleware = [
+            offset(this.offset ?? (this.arrow ? gap + 4 : gap)),
             inline(),
-            shift({
-                padding: gap,
-                limiter: limitShift({
-                    offset: 32,
-                }),
-            }),
+            // Per floating-ui docs: for aligned placements (e.g. bottom-end),
+            // flip should come before shift. For non-aligned, shift before flip.
+            ...(isAligned ? [flipMiddleware, shiftMiddleware] : [shiftMiddleware, flipMiddleware]),
             size({
                 apply({ availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
@@ -274,7 +282,6 @@ export class PostPopovercontainer {
                     });
                 },
             }),
-            offset(this.offset ?? (this.arrow ? gap + 4 : gap)),
         ];
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: gap }));
@@ -346,9 +353,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '536d77dfb222d814d2ad0fa5abfda9a6b76c1c5f', "data-version": version, popover: "auto" }, h("div", { key: '5b4dcb6f15ce2ddb43cfa545bddfcddb4d96f08f', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: 'cd65bb7aeaa9ba7c5555fbae73c5f1615ee528de', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (h(Host, { key: '9da5ddc34b0f749826341154e1893e2ac303ed4d', "data-version": version, popover: "auto" }, h("div", { key: 'd3a56362b6ecd910455873ce62b1f7a753c6eaa8', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '45b982f1a4d1ca5ca4feae898b1e5ea338409455', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '8e6b37f1f4c4e49db5931130c411b4a2d73ad119' }))));
+            } })), h("slot", { key: 'e9231da953aa6b0e4c63eede8aba900f16fab4b6' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'a8889a8544b91dd589f8ff86e210472915a34100', "data-version": version }, h("div", { key: 'eea1ffd49d7f450362f87d2e5b6d992e0913f5ca', 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: 'c8266ca9d136f7a10f3515e784acad64f4e14aca', "data-version": version }, h("div", { key: '042df9d7d808ce737f56785d3b622c20bad3f280', 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/collection/components/post-stepper/post-stepper.js

@@ -53,7 +53,7 @@ export class PostStepper {
     updateActiveStepNumber() {
         if (this.textStepNumber) {
             const labelTemplate = this.textStepNumber;
-            this.mobileActiveStepLabel = labelTemplate.replace(/#number/g, `${this.selectedIndex + 1}`);
+            this.mobileActiveStepLabel = labelTemplate.replaceAll('#number', `${this.selectedIndex + 1}`);
             if (this.stepItems) {
                 this.updateMobileActiveStepVisibility();
             }
@@ -107,7 +107,7 @@ export class PostStepper {
         }
     }
     render() {
-        return (h(Host, { key: '970f3b7005ccb1407b34dd007cc3350e46648ddd', "data-version": version }, h("ol", { key: 'faca69796019b3062261931d58e3a17d1d733a9a' }, h("slot", { key: '51c7a7890f8024b193f642829fb3f519eee76819', onSlotchange: () => this.updateSteps() })), h("div", { key: '664bba5f3b5d6dffc7f4073b2ee0630d38e31531', class: "active-step", "aria-hidden": "true" }, h("span", { key: 'a9b076a75c5aba806200ffe21a5b06e3dcedae6b', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: 'a0a7a732841cfb36e1fc1e0ada0fcb8549acc3eb', innerHTML: this.mobileActiveStepName }))));
+        return (h(Host, { key: 'c0f0b43848cf7cf2ad3b909b9ac3977214090f49', "data-version": version }, h("ol", { key: 'fb3b6a002e18355f731caa783c1c183e9d17719a' }, h("slot", { key: '3241341b4427e5b5963d5b2f1c8096752e447894', onSlotchange: () => this.updateSteps() })), h("div", { key: 'd7d4b983c5d038f2a214292882ba44c31a47e53d', class: "active-step", "aria-hidden": "true" }, h("span", { key: '82e9aaf029ed13effb873ee0cfcc44b06be18743', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: 'b1874d60c5fff75813094e93cb00b1249f513a55', innerHTML: this.mobileActiveStepName }))));
     }
     static get is() { return "post-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-stepper-item/post-stepper-item.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostStepperItem {
     render() {
-        return (h(Host, { key: '6a9e7ce6dbe2402b04a40db2a177fa7b5666140f', "data-version": version, role: "listitem" }, h("span", { key: 'b4b90071f8a99226490d54463a3f9ae0222d5b56', class: "stepper-item-content" }, h("span", { key: '918f3caaf03d07998c28a4620ee2bee7b5ec2f2c', class: "step-hidden-label visually-hidden" }), h("span", { key: 'a4169e9cba976cbf09560ce05a5ab1a9b1c182a1', class: "label" }, h("slot", { key: 'e200808f2b0d757f12dff465547eb84eeb1f8b71' })))));
+        return (h(Host, { key: '95ebc80981c11cb53b992b55292c8588ece1425d', "data-version": version, role: "listitem" }, h("span", { key: '64a3d6e185d0df66e89e63a09e934129cd51c00f', class: "stepper-item-content" }, h("span", { key: '936c9473e1644a6f77a8b510a9159f3258ab97cc', class: "step-hidden-label visually-hidden" }), h("span", { key: 'd6d256202dd0cc53f106d8452660e96b77557219', class: "label" }, h("slot", { key: 'fe6ce78b72bbb24879fd4b5eba9594d8ef135bc2' })))));
     }
     static get is() { return "post-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-item/post-tab-item.js

@@ -33,7 +33,7 @@ export class PostTabItem {
         this.isNavigationMode = hasAnchor;
     }
     render() {
-        return (h(Host, { key: 'f7e1c00ed73b796ac8b2994f5f6a1825318faae2', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: 'cc1fb5a02298dc775bbaacec051d51d96603ce73' })));
+        return (h(Host, { key: 'e660f8e1051523a4a88a0ad4808b294c2f80bcbb', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: '9e5ec2ac67fbf1c56b8f7bd11205438d5ce08956' })));
     }
     static get is() { return "post-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -15,7 +15,7 @@ export class PostTabPanel {
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '58743e382638b78c8e2bf020a94981e54f8c20d8', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: 'ab35770da08e7ece64d03ab2fa8811b04a42ddd0' })));
+        return (h(Host, { key: '27d2f9dedd65a3500d477ce979ace6d9eb0d429a', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: '890e7ec2bcf451d3281b224601597db281d6da58' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,7 +133,7 @@ export class PostTabs {
         // This works even before post-tab-item sets data-navigation-mode attribute
         const hasNavigationTabs = this.tabs.some(tab => {
             const hasAnchor = tab.querySelector('a') !== null;
-            const navModeAttr = tab.getAttribute('data-navigation-mode') === 'true';
+            const navModeAttr = tab.dataset.navigationMode === 'true';
             return hasAnchor || navModeAttr;
         });
         const hasPanels = this.panels.length > 0;
@@ -282,7 +282,7 @@ export class PostTabs {
             nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
         }
         else {
-            nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
+            nextTab = this.tabs[activeTabIndex - 1] || this.tabs.at(-1);
         }
         if (!nextTab)
             return;
@@ -291,10 +291,10 @@ export class PostTabs {
     }
     render() {
         const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
-        return (h(Host, { key: '49a99226d7f864145e690f6d04c6546ef0a28995', "data-version": version }, h("div", { key: '22684318ed59ae75a81ed00172db0626395d108e', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: 'da2d1befa91d9d1012dbfb30ebe0c03b5b244930', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: '7daf4d6ba4e3b8307919fcd52b98540e97c4a2a3', onSlotchange: () => {
+        return (h(Host, { key: '5ae75fc550faae05dbca22e815a75e05f5cebc54', "data-version": version }, h("div", { key: '606990249519c2504e47e24b1e1b95c660278828', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: 'ed0a4b53c47bc808e0c0713f4d014338e0124e37', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: 'ec504e221fb5694fea03630da0671b7c2c827648', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (h("div", { key: '365b85a14d4b5af73ab0fdd477208b138a185543', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'feb5c8a13b896112a7fce0c598d761d2a3e56cfe', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } }))), !this.isNavigationMode && (h("div", { key: '4bfd0fb25e0070b0a8ebeef0127cb8ac2b097bc0', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'ecf2630c87dce6a797c1c13d31e5ead2b7f903d8', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class PostTogglebutton {
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e), { capture: true });
     }
     render() {
-        return (h(Host, { key: '723a7d107537a8399e193ef9fe40eec67c0a15a2', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '38849e487b4db78584033e51e94b674804966d0b' })));
+        return (h(Host, { key: 'fdf27aa68db2c3e6757176894b5b293a563e444d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '2be2ca3e516a3ee6f39f9dc943142cf5e138d1b2' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '19dd435450b50c6f00fb767b64f02196e2753a61', "data-version": version }, h("post-popovercontainer", { key: 'a12f9c038b279946187377a083014dee7b1b767f', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '4a7009fb3ec0cc938f486de0796f3e4776462ba8' }))));
+        return (h(Host, { key: 'e3dd0e3b779563948a727958237ffb5ee3786c67', "data-version": version }, h("post-popovercontainer", { key: 'bcc80a61fa0292191efc0525c410630b8dbb29e3', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '3b07a74f1edc3d7fc49211b4f85188ad8a05acad' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -1,9 +1,9 @@
-import { h, Host } from "@stencil/core";
-import { checkEmptyOrType, IS_BROWSER } from "../../utils/index";
+import { h, Host, Build } from "@stencil/core";
+import { checkEmptyOrType } from "../../utils/index";
 import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-if (IS_BROWSER) {
+if (Build.isBrowser) {
     (async () => {
         await import('long-press-event');
     })();
@@ -32,7 +32,7 @@ export class PostTooltipTrigger {
         checkEmptyOrType(this, 'for', 'string');
     }
     get tooltip() {
-        if (!IS_BROWSER)
+        if (Build.isServer)
             return null;
         const ref = document.getElementById(this.for);
         return ref?.localName === 'post-tooltip' ? ref : null;
@@ -151,7 +151,7 @@ export class PostTooltipTrigger {
     interestHandler() {
         if (this.trigger) {
             if (this.delay > 0) {
-                this.delayTimeout = window.setTimeout(() => {
+                this.delayTimeout = globalThis.setTimeout(() => {
                     this.tooltip?.show(this.trigger);
                     this.delayTimeout = null;
                 }, this.delay);
@@ -169,7 +169,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '070c1d7c9cbf685113debb314766b2dde8dfe126', "data-version": version }, h("slot", { key: 'b9c2c1339bd54061490e4f8c6303d9290a59dafa', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '130a5d8ad8e981ee3f46fbbfcab74afd4c2dce18', "data-version": version }, h("slot", { key: '6718994fc17acb24dbc176110c9a0356c4158e38', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/attribute-observer.js

@@ -1,4 +1,4 @@
-import { IS_BROWSER } from "./environment";
+import { Build } from "@stencil/core";
 export function getAttributeObserver(attribute, handler) {
     /**
      * Handle attribute changes and childList changes from the observer
@@ -20,5 +20,5 @@ export function getAttributeObserver(attribute, handler) {
         });
     }
     // Initialize a mutation observer for patching accessibility features
-    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
+    return Build.isBrowser ? new MutationObserver(observerHandler) : null;
 }

package/dist/collection/utils/breakpoints.js

@@ -1,5 +1,5 @@
 import { throttle } from "throttle-debounce";
-import { IS_SERVER } from "./environment";
+import { Build } from "@stencil/core";
 class Breakpoint {
     constructor() {
         this.breakpoints = [
@@ -9,6 +9,7 @@ class Breakpoint {
             { key: 'sm', device: 'tablet', minWidth: 600 },
             { key: 'xs', device: 'mobile', minWidth: 0 },
         ];
+        this.resizeObserver = new ResizeObserver(() => this.updateCurrentBreakpoint());
         this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
             const previousBreakpoint = this.currentBreakpoint;
             const newBreakpoint = this.breakpoints.find(breakpoint => {
@@ -23,15 +24,15 @@ class Breakpoint {
                 .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
                 .forEach((key) => this.dispatchEvent(key));
         });
-        if (IS_SERVER)
+        if (Build.isServer)
             return;
         this.updateCurrentBreakpoint({ emitEvents: false });
-        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
+        this.resizeObserver.observe(document.body);
     }
     dispatchEvent(property) {
-        if (IS_SERVER)
+        if (Build.isServer)
             return;
-        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
+        globalThis.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
     }
     get(property) {
         this.updateCurrentBreakpoint({ emitEvents: false });

package/dist/collection/utils/get-focusable-children.js

@@ -37,7 +37,7 @@ export function getDeepFocusableChildren(el, filter, visited = new Set()) {
     // SLOT
     if (el instanceof HTMLSlotElement) {
         const assigned = el.assignedElements({ flatten: true });
-        nodes = assigned.length ? assigned : Array.from(el.children);
+        nodes = assigned.length > 0 ? assigned : Array.from(el.children);
     }
     // SHADOW ROOT
     else if (el instanceof HTMLElement && el.shadowRoot) {
@@ -70,8 +70,8 @@ function isFocusBlockedByCSS(el) {
     if (typeof el.checkVisibility === 'function') {
         return !el.checkVisibility({ visibilityProperty: true });
     }
-    const style = window.getComputedStyle(el);
-    if (style.display === 'none' || style.visibility !== 'visible') {
+    const style = el.ownerDocument?.defaultView?.getComputedStyle(el);
+    if (!style || style.display === 'none' || style.visibility !== 'visible') {
         return true;
     }
     if (el.parentElement) {

package/dist/collection/utils/get-root.js

@@ -1,10 +1,10 @@
-import { IS_BROWSER } from "./environment";
+import { Build } from "@stencil/core";
 /**
  * getRootNode() can only be used after the element has been attached to the document!
  * So use it for example in the componentDidLoad lifecycle hook.
  */
 export function getRoot(element) {
-    const root = IS_BROWSER ? element.getRootNode() : element;
+    const root = Build.isBrowser ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/dist/collection/utils/index.js

@@ -3,7 +3,6 @@ export * from './attribute-observer';
 export * from './breakpoints';
 export * from './component-on-ready';
 export * from './debounce';
-export * from './environment';
 export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';

package/dist/collection/utils/is-iso-date.js

@@ -3,7 +3,7 @@ export function isIsoDate(value) {
     if (!ISO_REGEX.test(value))
         return false;
     const date = new Date(value); // strict UTC parsing
-    if (isNaN(date.getTime()))
+    if (Number.isNaN(date.getTime()))
         return false;
     // Roundtrip comparison to catch auto-corrected dates
     // Use UTC getters to match the UTC parsing above - no timezone shift

package/dist/collection/utils/is-motion-reduced.js

@@ -1,4 +1,4 @@
-import { IS_BROWSER } from "./environment";
+import { Build } from "@stencil/core";
 export function isMotionReduced() {
-    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
+    return Build.isBrowser ? globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
 }

package/dist/collection/utils/property-checkers/check-date.js

@@ -7,7 +7,7 @@ export function checkDate(component, prop) {
         return;
     }
     const date = new Date(value);
-    if (isNaN(date.getTime())) {
+    if (Number.isNaN(date.getTime())) {
         console.error(message);
     }
 }

package/dist/collection/utils/property-checkers/constants.js

@@ -1 +1 @@
-export const EMPTY_VALUES = [undefined, null, '', NaN];
+export const EMPTY_VALUES = [undefined, null, '', Number.NaN];

package/dist/collection/utils/property-checkers/index.js

@@ -6,7 +6,6 @@ import { checkUrl } from "./check-url";
 import { checkDate } from "./check-date";
 import { emptyOr } from "./empty-or";
 import { checkArrayOf } from "./check-array-of";
-import { checkIsoDate } from "./check-iso-date";
 export const checkEmptyOrOneOf = emptyOr(checkOneOf);
 export const checkEmptyOrPattern = emptyOr(checkPattern);
 export const checkEmptyOrType = emptyOr(checkType);
@@ -18,4 +17,4 @@ export const checkRequiredAndPattern = requiredAnd(checkPattern);
 export const checkRequiredAndType = requiredAnd(checkType);
 export const checkRequiredAndUrl = requiredAnd(checkUrl);
 export const checkRequiredAndArrayOf = requiredAnd(checkArrayOf);
-export { checkIsoDate };
+export { checkIsoDate } from './check-iso-date';

package/dist/collection/utils/repeat-on-long-press.js

@@ -2,13 +2,13 @@ export function repeatOnLongPress(callback, options) {
     const stop = repeat(callback, options);
     const handler = () => {
         stop();
-        window.removeEventListener('pointerup', handler);
-        window.removeEventListener('pointercancel', handler);
-        window.removeEventListener('pointerleave', handler);
+        globalThis.removeEventListener('pointerup', handler);
+        globalThis.removeEventListener('pointercancel', handler);
+        globalThis.removeEventListener('pointerleave', handler);
     };
-    window.addEventListener('pointerup', handler);
-    window.addEventListener('pointercancel', handler);
-    window.addEventListener('pointerleave', handler);
+    globalThis.addEventListener('pointerup', handler);
+    globalThis.addEventListener('pointercancel', handler);
+    globalThis.addEventListener('pointerleave', handler);
 }
 function repeat(callback, { delayMs = 300, intervalMs = 100 } = {}) {
     callback(); // immediate action

package/dist/collection/utils/sass-export.js

@@ -15,5 +15,5 @@ export function parse(scss) {
     }, {});
 }
 export function formatAsMap(obj) {
-    return JSON.stringify(obj, null, 2).replace(/[{[]/g, '(').replace(/[}\]]/g, ')');
+    return JSON.stringify(obj, null, 2).replaceAll(/[{[]/g, '(').replaceAll(/[}\]]/g, ')');
 }

package/dist/collection/utils/tests/helpers/mock-match-media.js

@@ -0,0 +1,11 @@
+// Mock the browser's matchMedia API on the global object
+export const mockConfig = { matches: false };
+Object.defineProperty(globalThis, 'matchMedia', {
+    writable: true,
+    value: jest.fn(() => ({
+        writable: true,
+        matches: mockConfig.matches,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+    })),
+});

package/dist/collection/utils/tests/helpers/mock-stencil-constants.js

@@ -0,0 +1,12 @@
+// Mock Stencil's isBrowser and isServer to simulate a browser environment
+jest.mock('@stencil/core', () => {
+    const module = jest.requireActual('@stencil/core');
+    return {
+        ...module,
+        Build: {
+            ...module.Build,
+            isBrowser: true,
+            isServer: false,
+        },
+    };
+});

package/dist/component-names.json

@@ -2,6 +2,7 @@
   "componentNames": [
     "post-accordion",
     "post-accordion-item",
+    "post-autocomplete",
     "post-avatar",
     "post-back-to-top",
     "post-banner",
@@ -17,6 +18,8 @@
     "post-language-menu",
     "post-language-menu-item",
     "post-linkarea",
+    "post-listbox",
+    "post-listbox-option",
     "post-logo",
     "post-mainnavigation",
     "post-megadropdown",