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

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

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-YVR3WTTS.js');
-var _package = require('./package-Cixsn1Ql.js');
+var index = require('./index-Du1lKw8D.js');
+var _package = require('./package-DB6yM9Rp.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-B0Olgvgc.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: '6feec1f002b3fadba76f8cb8f9ea76e455aa6ffe', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels" }, index.h("slot", { key: '073a78293c22557d7b628351bf1eac9882cd98b0' })));
     }
     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-YVR3WTTS.js');
-var _package = require('./package-Cixsn1Ql.js');
+var index = require('./index-Du1lKw8D.js');
+var _package = require('./package-DB6yM9Rp.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-B0Olgvgc.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: 'edb1e06b1b1cdd23db32e42ff77dbc64a44905f0', "data-version": _package.version }, index.h("div", { key: 'd86eb9bb592aff23c38c92b12dfd72623d67f194', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: '6646284be80e647c96065b3c791f34c4b64627f3', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: 'c71ddf4391144b7cb71671e8f564e723c408e723', 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: '625d5b7d8ab2e8cfacce0c2ac6fa94d6f6fc2953', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: '1ddaf37e585d3e9fbb9722e09829956e28dc7fd6', 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-YVR3WTTS.js');
-var index$1 = require('./index-ChzLnSU8.js');
-var environment = require('./environment-BQE9Unf_.js');
-require('./breakpoints-B81j4H4_.js');
-var _package = require('./package-Cixsn1Ql.js');
+var index = require('./index-Du1lKw8D.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-B0Olgvgc.js');
+var _package = require('./package-DB6yM9Rp.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: '67c7165030648b676b85c94cfe8a3d260c2ff9b5', "data-version": _package.version }, index.h("slot", { key: '84013d1f82ccd926d70026055c5a5be441aad9bf', 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-YVR3WTTS.js');
-var _package = require('./package-Cixsn1Ql.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
+var index = require('./index-Du1lKw8D.js');
+var _package = require('./package-DB6yM9Rp.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-B0Olgvgc.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: 'ad87cc5be1949a6a5490c6630b30a5d1d8c5940d', "data-version": _package.version }, index.h("post-popovercontainer", { key: '559478c129c495fa4189566957c22ad0ba3037a4', 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: 'd72e049da6b42839e8c3b6f8f79d2c6bcd108676' }))));
     }
     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,12 +9,18 @@ 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);
 }
 export function expand(el) {
-    const expandedKeyframe = { height: `${el.scrollHeight}px`, offset: 1 };
+    const expandedKeyframe = {
+        height: `${el.scrollHeight}px`,
+        offset: 1,
+        overflow: 'hidden', // <- keep overflow hidden, until the final keyframe to prevent content from overflowing during the animation
+    };
     const finalKeyframe = { height: 'auto', overflow: 'visible' };
     return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
 }

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "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,9 @@
     "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-login-widget/post-login-widget.js",
     "components/post-logo/post-logo.js",
     "components/post-mainnavigation/post-mainnavigation.js",
     "components/post-megadropdown/post-megadropdown.js",
@@ -37,8 +41,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: 'abd12317431d14e61e2f8e54b9f24b801b8c6954', "data-version": version }, h("div", { key: '9e2225a32458319de148a52a276a64407b282ec5', class: "accordion" }, h("slot", { key: 'e8213a7f663c85d16a5e8e1273d2233787b08f49', 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"; }

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}

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

@@ -0,0 +1,271 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { debounce } from "../../utils/index";
+/**
+ * @slot default - Slot for placing post-autocomplete-item components.
+ */
+export class PostAutocomplete {
+    constructor() {
+        this.debouncedHandleInput = debounce((event) => this.handleInput(event), 250);
+        /** Number of characters to type before filtering methods are called */
+        this.filterThreshold = 0;
+        /** Show or hide the clear button */
+        this.clearable = false;
+        this.inputValue = '';
+        this.handleOnBlur = () => {
+            this.inputElement.value = this.inputValue;
+            this.listBoxElement.filter('');
+            this.hideListBox();
+        };
+        this.handleInput = (event) => {
+            if (!this.listBoxElement)
+                return;
+            const value = event.target.value.trim();
+            const query = value.length >= this.filterThreshold ? value : '';
+            // Allow for consuming parent to handle filtering (e.g. for async data) and prevent default filtering behavior
+            const { defaultPrevented } = this.postFilteringEvent.emit(query && query.length >= this.filterThreshold ? query : '');
+            if (defaultPrevented)
+                return;
+            this.listBoxElement.filter(query);
+            if (query) {
+                this.showListBox();
+            }
+            else {
+                this.inputValue = '';
+            }
+        };
+        this.handleKeyDown = (event) => {
+            const { key, altKey } = event;
+            switch (key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.showListBox();
+                    if (!altKey) {
+                        this.listBoxElement.navigate('down');
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('up');
+                    break;
+                case 'Enter':
+                    if (this.listBoxElement.hidden)
+                        return;
+                    event.preventDefault();
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Escape':
+                    this.hideListBox();
+                    break;
+                case 'Tab':
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('first');
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('last');
+                    break;
+            }
+        };
+        this.handleOptionSelected = (e) => {
+            const value = e.detail;
+            this.inputElement.value = value;
+            this.inputValue = value;
+            this.hideListBox();
+        };
+        this.handleOptionActive = (e) => {
+            const value = e.detail;
+            if (value) {
+                this.inputElement.setAttribute('aria-activedescendant', value);
+            }
+            else {
+                this.inputElement.removeAttribute('aria-activedescendant');
+            }
+        };
+        this.hideListBox = () => {
+            this.listBoxElement.hide();
+            this.inputElement.ariaExpanded = 'false';
+            this.host.removeAttribute('open');
+            this.inputElement.removeAttribute('aria-activedescendant');
+        };
+        this.showListBox = () => {
+            this.listBoxElement.show();
+            this.inputElement.ariaExpanded = 'true';
+            this.host.setAttribute('open', '');
+        };
+        this.clearInput = () => {
+            if (this.inputElement) {
+                this.inputElement.value = '';
+                this.inputValue = '';
+                this.listBoxElement.clearSelection();
+                this.hideListBox();
+            }
+        };
+    }
+    get inputElement() {
+        return this.host.querySelector('input');
+    }
+    get listBoxElement() {
+        if (this.listbox) {
+            return document.getElementById(this.listbox);
+        }
+        else {
+            return this.host.querySelector('post-listbox');
+        }
+    }
+    componentWillLoad() {
+        if (!this.inputElement)
+            return;
+        this.inputElement.role = 'combobox';
+        this.inputElement.ariaAutoComplete = 'list';
+        if (!this.listBoxElement)
+            return;
+        if (!this.listBoxElement.id)
+            this.listBoxElement.id = crypto.randomUUID();
+        this.inputElement.setAttribute('aria-controls', this.listBoxElement.id);
+        this.inputElement.setAttribute('aria-expanded', 'false');
+        // Because we're handling that and the browser would show a duplicate native autocomplete dropdown
+        this.inputElement.autocomplete = 'off';
+        this.attachInputListeners();
+        this.attachListboxListeners();
+    }
+    disconnectedCallback() {
+        this.detachInputListeners();
+        this.detachListboxListeners();
+    }
+    attachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.addEventListener('input', this.debouncedHandleInput);
+            this.inputElement.addEventListener('keydown', this.handleKeyDown);
+            this.inputElement.addEventListener('blur', this.handleOnBlur);
+            this.inputElement.addEventListener('click', this.showListBox);
+        }
+    }
+    detachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.removeEventListener('input', this.debouncedHandleInput);
+            this.inputElement.removeEventListener('keydown', this.handleKeyDown);
+            this.inputElement.removeEventListener('blur', this.handleOnBlur);
+            this.inputElement.removeEventListener('click', this.showListBox);
+        }
+    }
+    attachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.addEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.addEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    detachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.removeEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.removeEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    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" })));
+    }
+    static get is() { return "post-autocomplete"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-autocomplete.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-autocomplete.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "filterThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of characters to type before filtering methods are called"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "filter-threshold",
+                "defaultValue": "0"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the clear button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "listbox": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional idref to connect the autocomplete with the options dropdown if not nested"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "listbox"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postFilteringEvent",
+                "name": "postFilteringEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cancelable event emitted when the input value is to be filtered"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -144,13 +144,13 @@ export class PostAvatar {
         this.validateEmail();
     }
     render() {
-        const names = [this.firstname, this.lastname].filter(n => n).map(n => n.trim());
+        const names = [this.firstname, this.lastname].filter(Boolean).map(n => n.trim());
         const initials = names
             .map(n => n.charAt(0))
             .join('')
             .trim();
         const fullname = names.join(' ');
-        return (h(Host, { key: 'bdd17db2ff84691400cdeace8afbcc2e6d618035', "data-version": version }, h("span", { key: '07a61e22fe605647a36976b5f2ceb737bbee34cb', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: 'da66c273d5fe676d1e183d7f27b46426b52ba31a', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '79b3bdf14eabfaf5c2208cc9a24e0c0e5ef0b30d', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '125c3ee489f8e8f0772c856a77c4a97ab11d64f3', class: "initials" }, initials, h("span", { key: 'a48e6e430f0c5de6d790a9a820f86bbb5624ff81' }, this.description ?? fullname)))));
+        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)))));
     }
     static get is() { return "post-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class PostBackToTop {
     }
     animateButton() {
         // Get the back-to-top button top postiion
-        const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
+        const positionTop = globalThis.getComputedStyle(this.host).getPropertyValue('top');
         const buttonElement = this.host.shadowRoot.querySelector('button');
         // Extract the elevation height from the back-to-top button elevation token
         const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
@@ -51,8 +51,8 @@ export class PostBackToTop {
         // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
         this.translateY =
             (-1 * 100) / 100 -
-                parseFloat(positionTop.replace('px', '')) -
-                parseFloat(elevationHeight.replace('px', ''));
+                Number.parseFloat(positionTop.replace('px', '')) -
+                Number.parseFloat(elevationHeight.replace('px', ''));
         if (this.belowFold) {
             fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
@@ -73,7 +73,7 @@ export class PostBackToTop {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: 'f79d17af53f529a1ad27128802ad02d07085d404', "data-version": version }, h("button", { key: '54d76baf6daeadf32d83a8acc5046bb45f8c281c', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '8033928bdd5fdbc07ac948378e9ba5414840e632', "aria-hidden": "true", name: "arrowup" }), h("span", { key: 'ede3e12e6c682b9c641e217b4a6b26c55171ca42', class: "visually-hidden" }, this.textBackToTop))));
+        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))));
     }
     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: '8c06f60d7d33f4087359a3166e16b340bd19cad6', "data-version": version, role: "alert", "data-color-scheme": "light" }, h("slot", { key: '2bb4f8a536012c5577840921aab267a9cb8134b7', name: "close-button" }), h("slot", { key: '7cded56e638ef427884507c0f0cd9557bfb6d1c7', name: "heading" }), h("slot", { key: '4988c4b39c9af989740d642ddb505269951bfd16' }), this.hasActions && (h("div", { key: '5bfd1c2d0869cad0831e5c68632a7309ee399795', class: "actions" }, h("slot", { key: '442abb44a4b947038c5716a0e7b22ff3f0d8b0ee', name: "actions" })))));
+        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" })))));
     }
     static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class PostBreadcrumbItem {
         try {
             this.validUrl = this.constructUrl(this.url);
         }
-        catch (error) {
+        catch {
             this.validUrl = undefined;
         }
     }
@@ -17,7 +17,7 @@ export class PostBreadcrumbItem {
     constructUrl(value) {
         const hasBaseURL = /^https?:\/\//.test(String(this.url));
         if (typeof value === 'string') {
-            this.fullUrl = hasBaseURL ? value : `${window.location.origin}${value}`;
+            this.fullUrl = hasBaseURL ? value : `${globalThis.location.origin}${value}`;
             checkEmptyOrUrl(this, 'fullUrl');
             return this.fullUrl;
         }
@@ -36,8 +36,7 @@ export class PostBreadcrumbItem {
         }
     }
     render() {
-        const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '2d083dc9ebf3c47dce95f3f854a539afceb24102', "data-version": version }, h("post-icon", { key: '40cdd5b85dc3f906d29d7b696264b2f7e8057034', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '5b82e332db134788695888f57e6e1e7f0bf0ddf5', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'ee75b4bdd1580edf775bc9322f3a421622e157ab' }))));
+        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)))));
     }
     static get is() { return "post-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -74,8 +73,46 @@ export class PostBreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "url"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label, screen readers will use this instead of the breadcrumb item content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA description for additional context, read after the breadcrumb item content or `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "description"
             }
         };
     }