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

package/dist/cjs/post-stepper.cjs.entry.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var _package = require('./package-DJFRMOUR.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
-require('./environment-BQE9Unf_.js');
+var index = require('./index-Byyrsgop.js');
+var _package = require('./package-BMq-R5Xi.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
 
 const postStepperCss = () => `ol{margin-block:0;padding-inline-start:0;list-style:none;counter-reset:step-index;display:grid;position:relative;overflow:hidden;grid-template-columns:20px;grid-auto-columns:minmax(0, 1fr);padding-inline-end:20px}@media screen and (max-width: 779.98px){ol{display:flex;padding-inline-end:0}}.active-step{font-size:var(--post-device-font-size-7);font-weight:var(--post-device-font-weight-bold);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.active-step .active-step-label:has(+span:empty){visibility:hidden}@media screen and (min-width: 780px){.active-step{display:none}}`;
 
@@ -12,7 +11,7 @@ const PostStepper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * Defines the currently active step
+         * Defines the current step, which is the next step the user has to complete.
          */
         this.currentIndex = -1;
     }
@@ -30,8 +29,19 @@ const PostStepper = class {
         index$1.checkRequiredAndType(this, 'currentIndex', 'number');
         if (this.stepItems) {
             this.updateSteps();
+            this.checkIndexes();
         }
     }
+    validateSelectedIndex() {
+        if (this.selectedIndex === undefined) {
+            this.selectedIndex = this.currentIndex;
+        }
+        else {
+            index$1.checkRequiredAndType(this, 'selectedIndex', 'number');
+            this.checkIndexes();
+        }
+        this.updateSteps();
+    }
     componentDidLoad() {
         this.validateTextCompletedStep();
         this.validateTextCurrentStep();
@@ -39,12 +49,18 @@ const PostStepper = class {
         // Wait for slotchange
         setTimeout(() => {
             this.validateCurrentIndex();
+            this.validateSelectedIndex();
         });
     }
+    checkIndexes() {
+        if (this.selectedIndex > this.currentIndex) {
+            console.error('The selected-index cannot be higher than the current-index, as only the current and completed steps can be selected.');
+        }
+    }
     updateActiveStepNumber() {
         if (this.textStepNumber) {
             const labelTemplate = this.textStepNumber;
-            this.mobileActiveStepLabel = labelTemplate.replace(/#number/g, `${this.currentIndex + 1}`);
+            this.mobileActiveStepLabel = labelTemplate.replaceAll('#number', `${this.selectedIndex + 1}`);
             if (this.stepItems) {
                 this.updateMobileActiveStepVisibility();
             }
@@ -58,12 +74,13 @@ const PostStepper = class {
         }
         this.updateActiveStepNumber();
         this.stepItems.forEach((el, i) => {
-            if (this.currentIndex === i) {
+            if (this.selectedIndex === i) {
                 this.mobileActiveStepName = el.innerHTML;
             }
             // Update "post-stepper-item" classes to show correct status
             el.classList.toggle('stepper-item-completed', this.currentIndex > i);
             el.classList.toggle('stepper-item-current', this.currentIndex === i);
+            el.classList.toggle('stepper-item-selected', this.selectedIndex === i);
             el.classList.toggle('stepper-item-inactive', this.currentIndex < i);
             el.classList.toggle('stepper-item-after-current', i === this.currentIndex + 1);
             // Update accessibility label depending on status (Completed/Current/-)
@@ -71,15 +88,15 @@ const PostStepper = class {
             if (hiddenLabel) {
                 let labelText = '';
                 if (this.currentIndex > i) {
-                    labelText = `${this.textCompletedStep}:`;
+                    labelText = `${this.textCompletedStep}: `;
                 }
-                else if (this.currentIndex === i) {
-                    labelText = `${this.textCurrentStep}:`;
+                if (this.selectedIndex === i) {
+                    labelText = `${labelText}${this.textCurrentStep}: `;
                 }
                 hiddenLabel.textContent = labelText;
             }
             // Update accessibility aria attributes
-            if (this.currentIndex === i) {
+            if (this.selectedIndex === i) {
                 el.setAttribute('aria-current', 'step');
                 el.setAttribute('aria-live', 'polite');
             }
@@ -91,13 +108,13 @@ const PostStepper = class {
         this.updateMobileActiveStepVisibility();
     }
     updateMobileActiveStepVisibility() {
-        if (this.currentIndex >= this.stepItems.length || this.currentIndex < 0) {
+        if (this.selectedIndex >= this.stepItems.length || this.selectedIndex < 0) {
             this.mobileActiveStepLabel = '';
             this.mobileActiveStepName = '';
         }
     }
     render() {
-        return (index.h(index.Host, { key: '252102ea05deca3d0d072ddabbc0a926dae356e5', "data-version": _package.version }, index.h("ol", { key: '0f3f87b37539fa59125297c22bf78ddddf57c0b1' }, index.h("slot", { key: 'bb91db0204d8f9f54d6263427b09b8b9acc6a6f4', onSlotchange: () => this.updateSteps() })), index.h("div", { key: 'f53a5dbef33cd550546608198dc3b29a1eadd313', class: "active-step", "aria-hidden": "true" }, index.h("span", { key: '12937ffe4cf3d7c1170e7824612f917a2ae311bb', class: "active-step-label" }, this.mobileActiveStepLabel), index.h("span", { key: 'cc6a253de9024a9580f7ad2c470412504c2a671f', innerHTML: this.mobileActiveStepName }))));
+        return (index.h(index.Host, { key: 'c0f0b43848cf7cf2ad3b909b9ac3977214090f49', "data-version": _package.version }, index.h("ol", { key: 'fb3b6a002e18355f731caa783c1c183e9d17719a' }, index.h("slot", { key: '3241341b4427e5b5963d5b2f1c8096752e447894', onSlotchange: () => this.updateSteps() })), index.h("div", { key: 'd7d4b983c5d038f2a214292882ba44c31a47e53d', class: "active-step", "aria-hidden": "true" }, index.h("span", { key: '82e9aaf029ed13effb873ee0cfcc44b06be18743', class: "active-step-label" }, this.mobileActiveStepLabel), index.h("span", { key: 'b1874d60c5fff75813094e93cb00b1249f513a55', innerHTML: this.mobileActiveStepName }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -112,6 +129,9 @@ const PostStepper = class {
             }],
         "currentIndex": [{
                 "validateCurrentIndex": 0
+            }],
+        "selectedIndex": [{
+                "validateSelectedIndex": 0
             }]
     }; }
 };

package/dist/cjs/post-tab-item.cjs.entry.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var _package = require('./package-DJFRMOUR.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
+var index = require('./index-Byyrsgop.js');
+var _package = require('./package-BMq-R5Xi.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
 var index_browser = require('./index.browser-Doj636JV.js');
-require('./environment-BQE9Unf_.js');
 
 const postTabItemCss = () => `.tab-title,.nav-item a{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0);cursor:pointer}.tab-title:hover,.nav-item a:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title:focus-visible,.nav-item a:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title:focus-visible::after,.nav-item a:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:focus-visible,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title,.nav-item a{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title:hover,.tab-title:focus,.tab-title:focus-within,.tab-title:focus-visible,.nav-item a:hover,.nav-item a:focus,.nav-item a:focus-within,.nav-item a:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}}.nav-item{display:inline-block;position:relative;box-sizing:border-box;cursor:default}.nav-item:focus,.nav-item:focus-visible{outline:none;box-shadow:none}.nav-item:focus::after,.nav-item:focus-visible::after{display:none}.nav-item a{color:inherit;text-decoration:none;display:block;width:100%;height:100%;box-sizing:border-box;position:relative;outline:none;cursor:pointer;border-radius:0}.nav-item a:focus{outline:none}.nav-item a:active{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.nav-item a:focus-visible{outline:none !important}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}.tab-title.active,.nav-item.active a{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title.active::before,.nav-item.active a::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title.active,.nav-item.active a{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title.active::before,.nav-item.active a::before{background-color:Highlight}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}`;
 
@@ -38,7 +37,7 @@ const PostTabItem = class {
         this.isNavigationMode = hasAnchor;
     }
     render() {
-        return (index.h(index.Host, { key: 'f7e1c00ed73b796ac8b2994f5f6a1825318faae2', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": _package.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' }, index.h("slot", { key: 'cc1fb5a02298dc775bbaacec051d51d96603ce73' })));
+        return (index.h(index.Host, { key: 'e660f8e1051523a4a88a0ad4808b294c2f80bcbb', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": _package.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' }, index.h("slot", { key: '9e5ec2ac67fbf1c56b8f7bd11205438d5ce08956' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var _package = require('./package-DJFRMOUR.js');
+var index = require('./index-Byyrsgop.js');
+var _package = require('./package-BMq-R5Xi.js');
 var index_browser = require('./index.browser-Doj636JV.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
-require('./environment-BQE9Unf_.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
 
 const postTabPanelCss = () => `:host{display:none}`;
 
@@ -22,7 +21,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || index_browser.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '58743e382638b78c8e2bf020a94981e54f8c20d8', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels" }, index.h("slot", { key: 'ab35770da08e7ece64d03ab2fa8811b04a42ddd0' })));
+        return (index.h(index.Host, { key: '27d2f9dedd65a3500d477ce979ace6d9eb0d429a', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels" }, index.h("slot", { key: '890e7ec2bcf451d3281b224601597db281d6da58' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tabs.cjs.entry.js

@@ -1,12 +1,11 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var _package = require('./package-DJFRMOUR.js');
+var index = require('./index-Byyrsgop.js');
+var _package = require('./package-BMq-R5Xi.js');
 var fade = require('./fade-CPQhl1fP.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
 require('./utils-s05L2ulk.js');
-require('./environment-BQE9Unf_.js');
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -158,7 +157,7 @@ const PostTabs = class {
         // 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;
@@ -307,7 +306,7 @@ const PostTabs = class {
             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;
@@ -316,10 +315,10 @@ const PostTabs = class {
     }
     render() {
         const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
-        return (index.h(index.Host, { key: '49a99226d7f864145e690f6d04c6546ef0a28995', "data-version": _package.version }, index.h("div", { key: '22684318ed59ae75a81ed00172db0626395d108e', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: 'da2d1befa91d9d1012dbfb30ebe0c03b5b244930', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: '7daf4d6ba4e3b8307919fcd52b98540e97c4a2a3', onSlotchange: () => {
+        return (index.h(index.Host, { key: '5ae75fc550faae05dbca22e815a75e05f5cebc54', "data-version": _package.version }, index.h("div", { key: '606990249519c2504e47e24b1e1b95c660278828', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: 'ed0a4b53c47bc808e0c0713f4d014338e0124e37', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: 'ec504e221fb5694fea03630da0671b7c2c827648', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (index.h("div", { key: '365b85a14d4b5af73ab0fdd477208b138a185543', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'feb5c8a13b896112a7fce0c598d761d2a3e56cfe', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } }))), !this.isNavigationMode && (index.h("div", { key: '4bfd0fb25e0070b0a8ebeef0127cb8ac2b097bc0', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'ecf2630c87dce6a797c1c13d31e5ead2b7f903d8', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tooltip-trigger.cjs.entry.js

@@ -1,17 +1,16 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var index$1 = require('./index-ChzLnSU8.js');
-var environment = require('./environment-BQE9Unf_.js');
-require('./breakpoints-B81j4H4_.js');
-var _package = require('./package-DJFRMOUR.js');
+var index = require('./index-Byyrsgop.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
+var _package = require('./package-BMq-R5Xi.js');
 var focusable = require('./focusable-ZqET_zrB.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 
 const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
 
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-if (environment.IS_BROWSER) {
+{
     (async () => {
         await Promise.resolve().then(function () { return require('./long-press-event-Q8jMUNXD.js'); });
     })();
@@ -38,8 +37,6 @@ const PostTooltipTrigger = class {
         index$1.checkEmptyOrType(this, 'for', 'string');
     }
     get tooltip() {
-        if (!environment.IS_BROWSER)
-            return null;
         const ref = document.getElementById(this.for);
         return ref?.localName === 'post-tooltip' ? ref : null;
     }
@@ -157,7 +154,7 @@ const PostTooltipTrigger = class {
     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);
@@ -175,7 +172,7 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (index.h(index.Host, { key: '070c1d7c9cbf685113debb314766b2dde8dfe126', "data-version": _package.version }, index.h("slot", { key: 'b9c2c1339bd54061490e4f8c6303d9290a59dafa', onSlotchange: () => this.handleSlotChange() })));
+        return (index.h(index.Host, { key: '130a5d8ad8e981ee3f46fbbfcab74afd4c2dce18', "data-version": _package.version }, index.h("slot", { key: '6718994fc17acb24dbc176110c9a0356c4158e38', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-CmbtQEJ0.js');
-var _package = require('./package-DJFRMOUR.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
+var index = require('./index-Byyrsgop.js');
+var _package = require('./package-BMq-R5Xi.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-BTxzC_Qv.js');
 var placement = require('./placement-qEFR9hmI.js');
-require('./environment-BQE9Unf_.js');
 
 const postTooltipCss = () => `:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer::part(post-popovercontainer-content){color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}`;
 
@@ -72,7 +71,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '19dd435450b50c6f00fb767b64f02196e2753a61', "data-version": _package.version }, index.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) }, index.h("slot", { key: '4a7009fb3ec0cc938f486de0796f3e4776462ba8' }))));
+        return (index.h(index.Host, { key: 'e3dd0e3b779563948a727958237ffb5ee3786c67', "data-version": _package.version }, index.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) }, index.h("slot", { key: '3b07a74f1edc3d7fc49211b4f85188ad8a05acad' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/animations/collapse.js

@@ -1,4 +1,5 @@
-import { IS_BROWSER, isMotionReduced } from "../utils/index";
+import { Build } from "@stencil/core";
+import { isMotionReduced } from "../utils/index";
 const collapseDuration = 350;
 const collapseEasing = 'ease';
 export const collapsedKeyframe = { height: '0', overflow: 'hidden' };
@@ -8,7 +9,7 @@ const animationOptions = {
     fill: 'forwards',
 };
 export function collapse(el) {
-    const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
+    const elHeight = Build.isBrowser ? globalThis.getComputedStyle(el).height : `${el.scrollHeight}px`;
     const expandedKeyframe = { height: elHeight };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
 }

package/dist/collection/collection-manifest.json

@@ -1,8 +1,9 @@
 {
   "entries": [
-    "components/post-datepicker/post-datepicker.js",
+    "components/post-date-picker/post-date-picker.js",
     "components/post-accordion/post-accordion.js",
     "components/post-accordion-item/post-accordion-item.js",
+    "components/post-autocomplete/post-autocomplete.js",
     "components/post-avatar/post-avatar.js",
     "components/post-back-to-top/post-back-to-top.js",
     "components/post-banner/post-banner.js",
@@ -17,6 +18,8 @@
     "components/post-language-menu/post-language-menu.js",
     "components/post-language-menu-item/post-language-menu-item.js",
     "components/post-linkarea/post-linkarea.js",
+    "components/post-listbox/post-listbox.js",
+    "components/post-listbox-option/post-listbox-option.js",
     "components/post-logo/post-logo.js",
     "components/post-mainnavigation/post-mainnavigation.js",
     "components/post-megadropdown/post-megadropdown.js",
@@ -37,8 +40,7 @@
     "components/post-tabs/post-tabs.js",
     "components/post-togglebutton/post-togglebutton.js",
     "components/post-tooltip/post-tooltip.js",
-    "components/post-tooltip-trigger/post-tooltip-trigger.js",
-    "utils/tests/environment/post-env-test.js"
+    "components/post-tooltip-trigger/post-tooltip-trigger.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -72,7 +72,7 @@ export class PostAccordion {
         if (this.multiple) {
             await Promise.all(this.accordionItems.map(item => item.toggle(true)));
         }
-        else if (!this.expandedItems.size) {
+        else if (this.expandedItems.size === 0) {
             await this.accordionItems[0].toggle(true);
         }
     }
@@ -97,7 +97,7 @@ export class PostAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'bc106e5857fe5f515c5d6a4afc519c65e43f8d5e', "data-version": version }, h("div", { key: '6fe78902ece11c02db1f54a94d2e67abbb991218', class: "accordion" }, h("slot", { key: '87b51a8884edd69d4b51b22ed8557a679cb1f112', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: 'fa37ee5b4611a84d273229955bcf624e53120022', "data-version": version }, h("div", { key: '0884dc3582eb768c6dd4959168d7e9a9b4195c3c', class: "accordion" }, h("slot", { key: 'f6d81d89aca513094ac5c1d531ed9d63f7b93730', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get is() { return "post-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +155,7 @@ export class PostAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "multiple",
                 "defaultValue": "false"
             }

package/dist/collection/components/post-accordion-item/post-accordion-item.css

@@ -1 +1 @@
-:host{display:block;border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}post-collapsible{margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:var(--post-device-spacing-padding-block-25);padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}
+:host{display:block;border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-color:Highlight}}:host([collapsed]) .accordion-button post-icon{transform:rotate(-180deg)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transform:var(--post-accordion-icon-initial-transform, none)}.accordion-button.collapsed{padding-block-start:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}post-collapsible{margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:var(--post-device-spacing-padding-block-25);padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}

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

@@ -55,10 +55,10 @@ export class PostAccordionItem {
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '9b01410968c934ef4609c1837ef0ba6ff7758e3c', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: '1b59bf16ec81255d0ad9965cb48a1d203415d607', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'e5ab35662cf9aebab48eeb8bc164139bbe3e5820', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '4d7315db281b68e890bcccf088f2c5488d1615ee', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: '43c4aecf3cfb48385897d6b6fdb35f84b6a5300e', class: {
+        return (h(Host, { key: 'cd8271355068aecc392d4bcf588274376fed789f', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: '598a9f0df7f536ffba45c2c634b87840785e244f', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'd04482b9310440102fb6ed454bec2247648b57f2', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '3982fe310732d13ac32e09791278f0748eb99477', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: 'e2e44601a4a73cac5b665b65f6f93e4836ce4729', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: 'c68f38594c60201f10028f1a8db78e5b9f0b5a53', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'ea721e485b56e4dd3bb3978658ca4536ae303269', name: "header" }), h("post-icon", { key: '1bc715ee0a28263954b99ce36f7de102530f8199', name: "chevronup" })))), h("post-collapsible", { key: '034d2f9f4f4382e017917cd28b2ca070cb5cb935', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '8c730f24204f1a0ca99a9b4479689aa5c384150f', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: '3fc43d538112dc634f531955b2514c42d62f6db9' })))));
+            } }, h("slot", { key: 'e716b961b7222d1ef9eeaf19217c72aad5b261be', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'd0c59213d1cbd8d1080bdcbf7fce875a0c02d8bc', name: "header" }), h("post-icon", { key: 'a9d06bcfccf25de71a450ffc23081a22ba11d5c7', name: "chevronup" })))), h("post-collapsible", { key: '3fb6fd19baedbbfb6327bb568a203c4c1ecb1bdc', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '5f50dc6a48dbc4a74780ff7bd54132f7ddaeeabb', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: 'f548651ab3ff5133117cd612964f1426086b5349' })))));
     }
     static get is() { return "post-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +90,7 @@ export class PostAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "collapsed",
                 "defaultValue": "false"
             },

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

@@ -0,0 +1 @@
+:host{position:relative;display:block}.autocomplete-icon,.autocomplete-clear{position:absolute;inset-block-start:16px}@media screen and (min-width: 780px){.autocomplete-icon,.autocomplete-clear{inset-block-start:20px}}.autocomplete-icon{inset-inline-end:16px;width:24px;height:24px;pointer-events:none;transition:transform .2s ease-in-out}:host([open]) .autocomplete-icon{transform:rotate(180deg)}.autocomplete-clear{display:flex;align-items:center;justify-content:center;inset-inline-end:42px;background:none;border:none;cursor:pointer}.autocomplete-clear>post-icon{width:20px;height:20px}