@swisspost/design-system-components 10.0.0-next.68 → 10.0.0-next.69

package/dist/collection/collection-manifest.json

@@ -43,9 +43,10 @@
     "components/post-tooltip/post-tooltip.js",
     "components/post-tooltip-trigger/post-tooltip-trigger.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.41.1",
+    "version": "4.43.3",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -1 +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}
+: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}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

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

@@ -1,12 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { debounce } from "../../utils/index";
+import { debounce, checkRequiredAndType } from "../../utils/index";
 /**
  * @slot default - Slot for placing post-autocomplete-item components.
  */
 export class PostAutocomplete {
     constructor() {
-        this.debouncedHandleInput = debounce((event) => this.handleInput(event), 250);
+        this.debouncedHandleInput = debounce((event) => {
+            void this.handleInput(event);
+        }, 250);
         /** Number of characters to type before filtering methods are called */
         this.filterThreshold = 0;
         /** Show or hide the clear button */
@@ -17,7 +19,7 @@ export class PostAutocomplete {
             this.listBoxElement.filter('');
             this.hideListBox();
         };
-        this.handleInput = (event) => {
+        this.handleInput = async (event) => {
             if (!this.listBoxElement)
                 return;
             const value = event.target.value.trim();
@@ -26,12 +28,14 @@ export class PostAutocomplete {
             const { defaultPrevented } = this.postFilteringEvent.emit(query && query.length >= this.filterThreshold ? query : '');
             if (defaultPrevented)
                 return;
-            this.listBoxElement.filter(query);
+            await this.listBoxElement.filter(query);
             if (query) {
                 this.showListBox();
+                this.announceCount();
             }
             else {
                 this.inputValue = '';
+                this.clearAnnouncement();
             }
         };
         this.handleKeyDown = (event) => {
@@ -88,15 +92,17 @@ export class PostAutocomplete {
             }
         };
         this.hideListBox = () => {
+            this.clearAnnouncement();
             this.listBoxElement.hide();
             this.inputElement.ariaExpanded = 'false';
             this.host.removeAttribute('open');
             this.inputElement.removeAttribute('aria-activedescendant');
         };
-        this.showListBox = () => {
-            this.listBoxElement.show();
+        this.showListBox = async () => {
+            await this.listBoxElement.show();
             this.inputElement.ariaExpanded = 'true';
             this.host.setAttribute('open', '');
+            this.announceCount();
         };
         this.clearInput = () => {
             if (this.inputElement) {
@@ -107,6 +113,9 @@ export class PostAutocomplete {
             }
         };
     }
+    validateTextAvailableSuggestions() {
+        checkRequiredAndType(this, 'textAvailableSuggestions', 'string');
+    }
     get inputElement() {
         return this.host.querySelector('input');
     }
@@ -119,6 +128,7 @@ export class PostAutocomplete {
         }
     }
     componentWillLoad() {
+        this.validateTextAvailableSuggestions();
         if (!this.inputElement)
             return;
         this.inputElement.role = 'combobox';
@@ -166,8 +176,18 @@ export class PostAutocomplete {
             this.listBoxElement.removeEventListener('postOptionActive', this.handleOptionActive);
         }
     }
+    clearAnnouncement() {
+        if (this.outputElement)
+            this.outputElement.textContent = '';
+    }
+    announceCount() {
+        if (!this.outputElement || !this.listBoxElement)
+            return;
+        const count = this.listBoxElement.querySelectorAll('post-listbox-option:not([hidden])').length;
+        this.outputElement.textContent = this.textAvailableSuggestions.replace('{count}', String(count));
+    }
     render() {
-        return (h(Host, { key: 'b6cae37c0a09a8ec76a2fdd56e0bb8c2c2f119fb', "data-version": version }, h("slot", { key: '2c5007aae99b96b9884bc3159add8beecad6fcc2' }), this.clearable && this.inputValue && (h("button", { key: 'a47ebadbbbdac11f00e9547d0a4c8224d24f31ca', type: "button", class: " autocomplete-clear", onClick: this.clearInput }, h("post-icon", { key: '2125443326e1656696815a93bda36136b48f2394', "aria-hidden": "true", name: "closex" }))), h("post-icon", { key: '109bba03d5d6567e166141a800c2f13198a16481', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" })));
+        return (h(Host, { key: 'f384c1ed106ad5764078f166bfc692a0f1360956', "data-version": version }, h("slot", { key: 'f7b2859a994888a93c19274d26b473aeae35d1b6' }), this.clearable && this.inputValue && (h("button", { key: 'd87eb95ec872bc4d1ec29cd04f88334541863cf1', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, h("post-icon", { key: '48b4dc91762b8c15af9fc1aeb953e97e6cc81af0', "aria-hidden": "true", name: "closex" }))), h("post-icon", { key: '0a0330204698338da6ddd48b5cacfb51f80c1497', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), h("output", { key: '5e98430b55f4cf2f915061540e6e002749dd2501', class: "visually-hidden", ref: el => (this.outputElement = el) })));
     }
     static get is() { return "post-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +261,25 @@ export class PostAutocomplete {
                 "setter": false,
                 "reflect": true,
                 "attribute": "listbox"
+            },
+            "textAvailableSuggestions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Announcement template for screen readers when the suggestion list updates.\nUse {count} as placeholder for the number of available suggestions,\ne.g. \"{count} suggestions available\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-available-suggestions"
             }
         };
     }
@@ -268,4 +307,10 @@ export class PostAutocomplete {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "textAvailableSuggestions",
+                "methodName": "validateTextAvailableSuggestions"
+            }];
+    }
 }

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

@@ -150,7 +150,7 @@ export class PostAvatar {
             .join('')
             .trim();
         const fullname = names.join(' ');
-        return (h(Host, { key: '56547a49f35e2d9ebafa54c2736b2ab60761c07b', "data-version": version }, h("span", { key: '864c5ab36c64bb440580ed307ce2f3dcefe2839d', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: 'cb06a958dc710675a97d197bffcee6ab742ad391', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: 'abb6262b43b5fc5e2a7e4147c2375c6c623b5bf5', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '8bead70c99c12f3bbaab414e9431c3459553d36e', class: "initials" }, initials, h("span", { key: '45db185da4d9d82b1f08650f4dc40cd759e18c00' }, this.description ?? fullname)))));
+        return (h(Host, { key: '27b541f1ac7546a3c56799c1cbf8f4347b2a0942', "data-version": version }, h("span", { key: '5652c2cec0f4455e44d73d7de22dfe53cc4baf13', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: 'ed8c5e541ed9ae1b43036a540327e426ef6caac4', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: 'c11bc3e761a1ea470547a32bfd74b465382fcf95', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '16afcb46c524440b0071d8346d7ddcc80bda0cf4', class: "initials" }, initials, h("span", { key: '99c190d5d829c0a11385dfc0fe66cbd916961813' }, this.description ?? fullname)))));
     }
     static get is() { return "post-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-back-to-top/post-back-to-top.js

@@ -73,7 +73,7 @@ export class PostBackToTop {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '61eb934495029c80935798908bec448664008db0', "data-version": version }, h("button", { key: 'e7b8b9df30aa1bedef8aae8a5db800bb638c8bf7', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '34d23e7069de235f64743cc791c98034bbf14b5f', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '7479cc95e9e2825455fd8a7e69085ccedc73cb35', class: "visually-hidden" }, this.textBackToTop))));
+        return (h(Host, { key: '259c07a96b529c9db791b4a8a03e545abade77f1', "data-version": version }, h("button", { key: 'eacc98e29e7070f8486c542fc1be1d994bb14683', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '94c77371e34e96e4359c0857f69e971bb39e284b', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '0c8918689fb6c9329233247bcfe6fb5eeb31f03c', class: "visually-hidden" }, this.textBackToTop))));
     }
     static get is() { return "post-back-to-top"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class PostBanner {
         this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
     }
     render() {
-        return (h(Host, { key: 'aba639e5ce3ebc0498437f4011ff4b39e41489ee', "data-version": version, role: "alert", "data-color-scheme": "light" }, h("slot", { key: 'cd81197f4a8aecbec482bbc174783ad1d00fd5eb', name: "close-button" }), h("slot", { key: 'be9fd011e9d17207e1cb56dea3dcfd4481a4c31c', name: "heading" }), h("slot", { key: 'a06e94c05e4cfe4bbb1bdccf29fdc75ed67828ca' }), this.hasActions && (h("div", { key: '3ce94c84ea3eeda53694809432059b05b53c7cde', class: "actions" }, h("slot", { key: 'a33798352de63a23cfa77bbd9be58a8cc5585121', name: "actions" })))));
+        return (h(Host, { key: 'a57b0caac1e70b9ebcbfc17f446c7f0258aa9083', "data-version": version, role: "alert", "data-color-scheme": "light" }, h("slot", { key: 'f34600d0fa1b6dd91eff4655db906befdc74b840', name: "close-button" }), h("slot", { key: 'eee0dd61936ebbcf259df5355f52d85534c4cc92', name: "heading" }), h("slot", { key: 'f837c996723531ade1d8c150ef73659e90fa407c' }), this.hasActions && (h("div", { key: 'cb3fa9ccf57498fb17d4c45afc93d747f7f727e2', class: "actions" }, h("slot", { key: '4e59f64aff2b8d681251a8f997220b3f1efcfed5', name: "actions" })))));
     }
     static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class PostBreadcrumbItem {
         }
     }
     render() {
-        return (h(Host, { key: '0e991f1d731e932884c1d03650fc9deb743df5ce', "data-version": version }, h("post-icon", { key: '1a29e4d7a3c80a9a42dd3a63bea84b97bbe4f0a8', name: "chevronright", class: "breadcrumb-item-icon" }), this.validUrl ? (h("a", { class: "breadcrumb-item", href: this.validUrl, onKeyDown: event => this.handleKeyDown(event), "aria-label": this.label, "aria-description": this.description }, h("slot", null))) : (h("span", { class: "breadcrumb-item" }, h("slot", null)))));
+        return (h(Host, { key: '2b4e7426d804073e5974e3e75303e149c48b3f84', "data-version": version }, h("post-icon", { key: '03f454a41a7f4b28832b05e5d2142aaf1695aa84', name: "chevronright", class: "breadcrumb-item-icon" }), this.validUrl ? (h("a", { class: "breadcrumb-item", href: this.validUrl, onKeyDown: event => this.handleKeyDown(event), "aria-label": this.label, "aria-description": this.description }, h("slot", null))) : (h("span", { class: "breadcrumb-item" }, h("slot", null)))));
     }
     static get is() { return "post-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class PostBreadcrumbs {
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: 'e0c191cf08f718b945336f38b6ecbb3d6a83eac9', "data-version": version }, h("nav", { key: '6c964f85bbf21ec778a2224a1bb436a70e81cb74', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '008ba1ddc449bab71450b2962e299f3f8b95efc4', class: "no-list breadcrumbs-list" }, h("li", { key: 'a0ba0adde27a4bf3fd85698df06f05ac2a78d659' }, h("a", { key: 'f9f6b3f8c2c7b3f497230e67e51b4b40952ae3b1', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'a42bae931167f02bc811b30564b07444156365ed', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '87715337fd5be2df0eabb4f3f6d346d2265379a1', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
+        return (h(Host, { key: '4c0030c6896fa3bbbb26a26668a3b2cf96a110a9', "data-version": version }, h("nav", { key: '80834fa5581243a5cd081626ba743a29a2498502', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '925aff0f9f19ef04e339ead446f5e4d4449b73ec', class: "no-list breadcrumbs-list" }, h("li", { key: '6dd10b7af11f6a63c27dc018dc49cdc8e85f7dcd' }, h("a", { key: '3c6db30d34a5f4d176b6127bc0ccb8fe733846af', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '9a78ed7042859125d32374885c0ce7426e2ff114', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '096eaf22ab0f381de0b4a93a65972718101b2d4e', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -101,7 +101,7 @@ export class PostBreadcrumbs {
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? (h("a", { href: item.url, "aria-label": item.label, "aria-description": item.description }, item.text)) : (h("span", null, item.text))))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, label: item.label, description: item.description, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '387d8fc4ad2811e069ffbcf120ba94455bf5b07c', "aria-current": "page" }, h("post-breadcrumb-item", { key: '177e3b88bf0fd96238070d7459da65b66667a488', url: this.lastItem.url, label: this.lastItem.label, description: this.lastItem.description, tabindex: -1 }, this.lastItem.text)))), h("div", { key: 'e30956ea858da56e2142785f0c1a49ddf071e1ff', class: "hidden-items" }, h("a", { key: 'a4e487d2c27beabe77277644eb1d22d5f49d92d5', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '836d18e95f7cffdaad3cbdd22a6f25887574c071', class: "visually-hidden" }, this.textHome), h("post-icon", { key: 'bed3f5e92820965e0b5f33a037f67d058ac20e50', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, label: item.label, description: item.description, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? (h("a", { href: item.url, "aria-label": item.label, "aria-description": item.description }, item.text)) : (h("span", null, item.text))))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, label: item.label, description: item.description, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '57d4678e05401a248e31559eef7562a1608c0d58', "aria-current": "page" }, h("post-breadcrumb-item", { key: 'b1be2e79473288d0755a65a0819eb2a2301a89f2', url: this.lastItem.url, label: this.lastItem.label, description: this.lastItem.description, tabindex: -1 }, this.lastItem.text)))), h("div", { key: '9eaa408234c3497176bfc116ab02f8280ff1cce7', class: "hidden-items" }, h("a", { key: 'c19fab9c610fe33b0fb980e24fe6395ee4bed8c6', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '9d42d66632535330307f87fdad5ba6e983b4448a', class: "visually-hidden" }, this.textHome), h("post-icon", { key: 'b7cc4122d01930d5736f6eb929a46bcd32c547e4', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, label: item.label, description: item.description, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;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:hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash)}.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(a){color:LinkText;border:unset}.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);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);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);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);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:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.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)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton[size=small] .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}post-closebutton:not([placement]),post-closebutton[placement=auto]{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}post-closebutton .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}
+.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-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:hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash)}.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(a){color:LinkText;border:unset}.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);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);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);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);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:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.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)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton[size=small] .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}post-closebutton:not([placement]),post-closebutton[placement=auto]{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}post-closebutton .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}

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

@@ -54,7 +54,7 @@ export class PostClosebutton {
         }
     }
     render() {
-        return (h(Host, { key: '130f1b06ef428564f8e0b57351f28b4ee64c6d47', "data-version": version }, h("button", { key: '710173d4918e16b2511316ca55caf59aab400dc9', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ddbce04c23089ccb25da9717191d3e0cf86f9007', "aria-hidden": "true", name: "closex" }), h("span", { key: '886145ced526930d35aa96922a15a98a8ad8d52c', class: "visually-hidden" }, h("slot", { key: '4c88b414ba1abd99103437afc4ac3e3e33fbdf15' })))));
+        return (h(Host, { key: '33c801f2e342363d6361f19e65793a4164d45f81', "data-version": version }, h("button", { key: '2fa8ae3a3e57cc971a99648d66612e13bc526e92', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: '5ac2821cdd342115e73b13f692bd7180edab82a8', "aria-hidden": "true", name: "closex" }), h("span", { key: '5eb97879647ef8c866bfdf6cd0819477a13907bc', class: "visually-hidden" }, h("slot", { key: '80eac1979c78526078d57a8398e04824420b7983' })))));
     }
     static get is() { return "post-closebutton"; }
     static get originalStyleUrls() {

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

@@ -53,7 +53,7 @@ export class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'e20569112cd3c844cf9f5e274ef452592f295f3e', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: 'af454694fd370de798c3cdf962b950efbbc7dad9' })));
+        return (h(Host, { key: '79ec1a3eb11225a93f5e5b6da7334d20d5e4b565', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: 'baff34fc9b45aec4c3fb0f74ad676ea1237c7d23' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,7 +97,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '0b5e8c203d582389369dde1246ecc5996d6613b9', "data-version": version }, h("slot", { key: 'b49aead3fd6ebcc3ec9fab200b25d2be919e1b18' })));
+        return (h(Host, { key: 'a4d1613dc3cbcfa627f920275eb3508939b63609', "data-version": version }, h("slot", { key: 'baa22c46a7a982afcd09253daa95f68f1709d509' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,34 @@
+export const airDatepickerLocales = {
+    ar: () => import('air-datepicker/locale/ar'),
+    bg: () => import('air-datepicker/locale/bg'),
+    ca: () => import('air-datepicker/locale/ca'),
+    cs: () => import('air-datepicker/locale/cs'),
+    da: () => import('air-datepicker/locale/da'),
+    de: () => import('air-datepicker/locale/de'),
+    el: () => import('air-datepicker/locale/el'),
+    en: () => import('air-datepicker/locale/en'),
+    es: () => import('air-datepicker/locale/es'),
+    eu: () => import('air-datepicker/locale/eu'),
+    fi: () => import('air-datepicker/locale/fi'),
+    fr: () => import('air-datepicker/locale/fr'),
+    hr: () => import('air-datepicker/locale/hr'),
+    hu: () => import('air-datepicker/locale/hu'),
+    id: () => import('air-datepicker/locale/id'),
+    it: () => import('air-datepicker/locale/it'),
+    ja: () => import('air-datepicker/locale/ja'),
+    ko: () => import('air-datepicker/locale/ko'),
+    nb: () => import('air-datepicker/locale/nb'),
+    nl: () => import('air-datepicker/locale/nl'),
+    pl: () => import('air-datepicker/locale/pl'),
+    pt: () => import('air-datepicker/locale/pt'),
+    ro: () => import('air-datepicker/locale/ro'),
+    ru: () => import('air-datepicker/locale/ru'),
+    si: () => import('air-datepicker/locale/si'),
+    sk: () => import('air-datepicker/locale/sk'),
+    sl: () => import('air-datepicker/locale/sl'),
+    sv: () => import('air-datepicker/locale/sv'),
+    th: () => import('air-datepicker/locale/th'),
+    tr: () => import('air-datepicker/locale/tr'),
+    uk: () => import('air-datepicker/locale/uk'),
+    zh: () => import('air-datepicker/locale/zh'),
+};

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

@@ -0,0 +1,42 @@
+import { UNICODE_BIDI } from "../../utils/locales";
+/**
+ * The unicode bidi characters used to control the text direction in the date string.
+ * These characters are used to ensure that the date string is displayed correctly in both LTR and RTL locales,
+ * especially when the date format contains a separator between the date parts (e.g. " - ").
+ * The TEXT_DIRECTION_MARKERS_REGEX is used to remove these characters from the localized date string when parsing it,
+ * and to ensure that they are not included in the input mask.
+ */
+export const TEXT_DIRECTION_MARKERS = `${UNICODE_BIDI.ltr}${UNICODE_BIDI.rtl}${UNICODE_BIDI.pop}`;
+export const TEXT_DIRECTION_MARKERS_REGEX = new RegExp(`[${TEXT_DIRECTION_MARKERS}]`, 'g');
+/**
+ * The separator used to separate the start and end date in a date range.
+ * It is used in the date string and the input mask.
+ */
+export const DATE_FORMAT_RANGE_SEPARATOR = ' - ';
+/**
+ * A map of date format keys to their corresponding date format values.
+ * The keys are used in this.dateFormat string and to specify the mask,
+ * while the values are used to determine the order of the date parts in the localized date string.
+ */
+export const DATE_FORMAT_MAP = {
+    y: '3333',
+    m: '11',
+    d: '22',
+};
+/**
+ * The keys of the DATE_FORMAT_MAP, used to create regexes for parsing and formatting localized date strings.
+ * The regexes are used to remove the date format keys from the date format string and to split the localized date string into its parts.
+ */
+export const DATE_FORMAT_KEYS = Object.keys(DATE_FORMAT_MAP);
+export const DATE_FORMAT_KEYS_REGEX = new RegExp(`[^${DATE_FORMAT_KEYS.join('')}]`, 'g');
+export const DATE_FORMAT_SEPARATOR_REGEX = new RegExp(`[^${DATE_FORMAT_KEYS.join('')}${TEXT_DIRECTION_MARKERS}]+`, 'g');
+/**
+ * The options used to format the date parts in the localized date string.
+ * These options are passed to the `toLocaleDateString` method when formatting the date parts.
+ * The options are also used to determine the date format string for the input mask.
+ */
+export const DATE_FORMAT_STRING_OPTIONS = {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+};