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

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

@@ -19,7 +19,7 @@ export class PostAvatar {
         this.imageUrl = '';
         this.imageAlt = '';
         this.initials = '';
-        // To handle email or userid updates and reset the storage item
+        // To handle email updates and reset the storage item
         this.storageKey = '';
     }
     validateFirstname() {
@@ -28,10 +28,6 @@ export class PostAvatar {
     validateLastname() {
         checkEmptyOrType(this, 'lastname', 'string');
     }
-    updateUserid() {
-        this.validateUserId();
-        this.getAvatarImage();
-    }
     updateEmail() {
         this.validateEmail();
         this.getAvatarImage();
@@ -39,9 +35,6 @@ export class PostAvatar {
     validateDescription() {
         checkEmptyOrType(this, 'description', 'string');
     }
-    validateUserId() {
-        checkEmptyOrType(this, 'userid', 'string');
-    }
     validateEmail() {
         if (this.email)
             checkEmptyOrPattern(this, 'email', emailPattern);
@@ -51,10 +44,7 @@ export class PostAvatar {
         this.slottedImage = this.host.querySelector('img');
         const imageUrl = this.slottedImage?.getAttribute('src');
         if (!imageUrl) {
-            if (this.userid) {
-                imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
-            }
-            if (!imageLoaded && this.email?.match(emailPattern)) {
+            if (this.email?.match(emailPattern)) {
                 imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
             }
             if (!imageLoaded) {
@@ -93,9 +83,6 @@ export class PostAvatar {
             return true;
         }
     }
-    async fetchImageByUserId() {
-        return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
-    }
     async fetchImageByEmail() {
         const email = await cryptify(this.email);
         const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
@@ -140,7 +127,6 @@ export class PostAvatar {
         this.validateFirstname();
         this.validateLastname();
         this.validateDescription();
-        this.validateUserId();
         this.validateEmail();
     }
     render() {
@@ -150,7 +136,7 @@ export class PostAvatar {
             .join('')
             .trim();
         const fullname = names.join(' ');
-        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)))));
+        return (h(Host, { key: 'f0617cd81944692e525750d5c61a1d4ea7991b55', "data-version": version }, h("span", { key: 'ab0280fe0445ed8c97fc5bbf7d1c510cefa42621', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '03737f45e5cd54f3999bbf3a9c326dd747c7ed36', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '0f4290d3b3586c68b3b33ceb44e46ba863d39f74', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: 'e38459c13ed79df9905a69218cac303ed3fc8ff9', class: "initials" }, initials, h("span", { key: '6c47fba8605290d9cc7795c2bdbc72004f963c89' }, this.description ?? fullname)))));
     }
     static get is() { return "post-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -204,25 +190,6 @@ export class PostAvatar {
                 "reflect": false,
                 "attribute": "lastname"
             },
-            "userid": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the company internal userId.<post-banner type=\"warning\" data-size=\"sm\"><p>Can only be used on post.ch domains!</p></post-banner>"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "userid"
-            },
             "email": {
                 "type": "string",
                 "mutable": false,
@@ -281,9 +248,6 @@ export class PostAvatar {
             }, {
                 "propName": "lastname",
                 "methodName": "validateLastname"
-            }, {
-                "propName": "userid",
-                "methodName": "updateUserid"
             }, {
                 "propName": "email",
                 "methodName": "updateEmail"
@@ -293,4 +257,3 @@ export class PostAvatar {
             }];
     }
 }
-PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';

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

@@ -1 +1 @@
-:host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{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}.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item: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){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}
+a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-current-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{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}a: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){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a: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){a: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){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}}:host(:not([variant=menuitem])){display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}:host(:not([variant=menuitem])) :is(button,a){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;display:flex;align-self:start;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}:host(:not([variant=menuitem])) :is(button,a):hover{text-decoration:none}:host(:not([variant=menuitem])) :is(button,a):disabled{border-style:var(--post-core-border-style-dash)}:host(:not([variant=menuitem])) :is(button,a){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:not([variant=menuitem])) :is(button,a):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){:host(:not([variant=menuitem])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host(:not([variant=menuitem])) :is(button,a):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){:host(:not([variant=menuitem])) :is(button,a):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){:host(:not([variant=menuitem])) :is(button,a):is(a){color:LinkText;border:unset}:host(:not([variant=menuitem])) :is(button,a):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host(:not([variant=menuitem])) :is(button,a):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host(:not([variant=menuitem])) :is(button,a):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host(:not([variant=menuitem])) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host(:not([variant=menuitem]))::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;content:"";display:flex;height:16px;width:16px;margin-block:var(--post-device-spacing-padding-35);margin-inline:var(--post-core-dimension-4);flex-shrink:0}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host :is(a,span){margin-block:var(--post-device-spacing-padding-block-6)}:host([selected]:not([selected=false])){display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}:host([selected]:not([selected=false])) :is(button,a){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;display:flex;align-self:start;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}:host([selected]:not([selected=false])) :is(button,a):hover{text-decoration:none}:host([selected]:not([selected=false])) :is(button,a):disabled{border-style:var(--post-core-border-style-dash)}:host([selected]:not([selected=false])) :is(button,a){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host([selected]:not([selected=false])) :is(button,a):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){:host([selected]:not([selected=false])) :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host([selected]:not([selected=false])) :is(button,a):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){:host([selected]:not([selected=false])) :is(button,a):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){:host([selected]:not([selected=false])) :is(button,a):is(a){color:LinkText;border:unset}:host([selected]:not([selected=false])) :is(button,a):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host([selected]:not([selected=false])) :is(button,a):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host([selected]:not([selected=false])) :is(button,a):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host([selected]:not([selected=false])) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host([selected]:not([selected=false]))::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;content:"";display:flex;height:16px;width:16px;margin-block:var(--post-device-spacing-padding-35);margin-inline:var(--post-core-dimension-4);flex-shrink:0}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host([selected]:not([selected=false])) :is(a,span){color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}:host([selected]:not([selected=false]):not([data-measuring])){align-items:start}:host([selected]:not([selected=false]):not([data-measuring])) :is(a,span){white-space:normal;overflow-wrap:anywhere}

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

@@ -1,42 +1,34 @@
-import { h, Host } from "@stencil/core";
+import { checkEmptyOrOneOf, checkEmptyOrUrl, checkRequiredAndType } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrUrl } from "../../utils/index";
+import { h, Host } from "@stencil/core";
+import { VARIANTS } from "./variants";
 /**
- * @slot default - Slot for placing the text inside the breadcrumb item.
+ * @slot default - The content displayed inside the breadcrumb item.
  */
 export class PostBreadcrumbItem {
-    validateUrl() {
-        try {
-            this.validUrl = this.constructUrl(this.url);
-        }
-        catch {
-            this.validUrl = undefined;
-        }
+    constructor() {
+        /**
+         * Controls how the item is rendered, either as a standard list item or within an overflow menu.
+         */
+        this.variant = 'listitem';
+        /**
+         * Indicates that the item represents the current page, applying appropriate styling.
+         */
+        this.selected = false;
     }
-    // Helper to construct a valid URL string or return undefined
-    constructUrl(value) {
-        const hasBaseURL = /^https?:\/\//.test(String(this.url));
-        if (typeof value === 'string') {
-            this.fullUrl = hasBaseURL ? value : `${globalThis.location.origin}${value}`;
-            checkEmptyOrUrl(this, 'fullUrl');
-            return this.fullUrl;
-        }
-        return undefined;
+    validateURL() {
+        checkEmptyOrUrl(this, 'url');
     }
-    connectedCallback() {
-        this.validateUrl();
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', VARIANTS);
     }
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            const linkElement = this.host.shadowRoot?.querySelector('a');
-            if (linkElement) {
-                event.preventDefault();
-                linkElement.click();
-            }
-        }
+    validateSelected() {
+        checkRequiredAndType(this, 'selected', 'boolean');
     }
     render() {
-        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)))));
+        const href = this.url instanceof URL ? this.url.href : this.url;
+        const content = href ? (h("a", { href: href, "aria-current": this.selected ? 'page' : undefined, "aria-label": this.label, "aria-description": this.description }, h("slot", null))) : (h("span", null, h("slot", null)));
+        return this.variant === 'listitem' || this.selected ? (h(Host, { "data-version": version, role: "listitem", slot: this.selected ? 'selected' : undefined }, content)) : (h(Host, { "data-version": version }, h("post-menu-item", null, content)));
     }
     static get is() { return "post-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +61,7 @@ export class PostBreadcrumbItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The optional URL to which the breadcrumb item will link."
+                    "text": "The destination URL for the breadcrumb item. If omitted, the item is rendered as non-interactive text."
                 },
                 "getter": false,
                 "setter": false,
@@ -88,7 +80,7 @@ export class PostBreadcrumbItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "ARIA label, screen readers will use this instead of the breadcrumb item content."
+                    "text": "An accessible label screen readers will use this instead of the breadcrumb item content."
                 },
                 "getter": false,
                 "setter": false,
@@ -107,25 +99,73 @@ export class PostBreadcrumbItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "ARIA description for additional context, read after the breadcrumb item content or `label`."
+                    "text": "An accessible description for additional context, read after the content or `label`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "description"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Variant",
+                    "resolved": "\"listitem\" | \"menuitem\"",
+                    "references": {
+                        "Variant": {
+                            "location": "import",
+                            "path": "./variants",
+                            "id": "src/components/post-breadcrumb-item/variants.ts::Variant",
+                            "referenceLocation": "Variant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls how the item is rendered, either as a standard list item or within an overflow menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'listitem'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates that the item represents the current page, applying appropriate styling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
             }
         };
     }
-    static get states() {
-        return {
-            "fullUrl": {}
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "url",
-                "methodName": "validateUrl"
+                "methodName": "validateURL"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }, {
+                "propName": "selected",
+                "methodName": "validateSelected"
             }];
     }
 }

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

@@ -0,0 +1 @@
+export const VARIANTS = ['listitem', 'menuitem'];

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

@@ -1 +1 @@
-:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{position:absolute;height:0;overflow:hidden;white-space:nowrap;display:flex;flex-wrap:wrap}.hidden-items .hidden-breadcrumb-item{display:inline-flex;padding-inline-end:var(--post-device-spacing-gap-inline-4)}.hidden-items .hidden-breadcrumb-item:last-child{padding-inline-end:0;font-weight:var(--post-device-font-weight-bold)}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{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}li a: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){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a: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){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{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}post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}li[aria-current=page] post-breadcrumb-item{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}li[aria-current=page] post-breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+:host{position:relative}nav{max-width:100%}nav.invisible{visibility:hidden;overflow:hidden;position:absolute;inset:0}[role=list]{display:flex;align-items:start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item :is(button,a){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;display:flex;align-self:start;font:inherit;padding:unset;border:unset;color:var(--post-scheme-color-interactive-primary-enabled-fg1);border-radius:var(--post-device-border-radius-focus);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash)}.breadcrumb-item :is(button,a){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}.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):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){.breadcrumb-item :is(button,a):is(a){color:LinkText;border:unset}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.breadcrumb-item :is(button,a):not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.breadcrumb-item :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;content:"";display:flex;height:16px;width:16px;margin-block:var(--post-device-spacing-padding-35);margin-inline:var(--post-core-dimension-4);flex-shrink:0}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home::before{content:unset}.home post-icon{font-size:var(--post-core-dimension-24)}@media screen and (min-width: 0)and (max-width: 599.98px){.home post-icon{font-size: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-breadcrumbs/post-breadcrumbs.js

@@ -1,25 +1,10 @@
 import { h, Host } from "@stencil/core";
+import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
-import { checkRequiredAndUrl, debounce, checkRequiredAndType } from "../../utils/index";
+import { checkRequiredAndUrl, checkRequiredAndType, componentOnReady, nanoid } from "../../utils/index";
 export class PostBreadcrumbs {
     constructor() {
-        this.breadcrumbItems = [];
-        // Waits for breadcrumbs navigation reference to be available
-        this.waitForBreadcrumbsRef = debounce(() => {
-            if (this.breadcrumbsNavRef?.clientWidth > 0) {
-                this.checkConcatenation();
-            }
-            else {
-                this.waitForBreadcrumbsRef();
-            }
-        }, 50);
-        // Handles resizing to check concatenation
-        this.handleResize = () => {
-            if (window.innerWidth === this.lastWindowWidth)
-                return;
-            this.lastWindowWidth = window.innerWidth;
-            this.checkConcatenation();
-        };
+        this.shouldRenderMenu = false;
     }
     validateHomeUrl() {
         checkRequiredAndUrl(this, 'homeUrl');
@@ -33,75 +18,92 @@ export class PostBreadcrumbs {
     validateTextMoreItems() {
         checkRequiredAndType(this, 'textMoreItems', 'string');
     }
+    componentWillLoad() {
+        this.id = this.host.id || `b${nanoid(6)}`;
+    }
     componentDidLoad() {
         this.validateHomeUrl();
         this.validateTextHome();
         this.validateTextBreadcrumbs();
         this.validateTextMoreItems();
-        window.addEventListener('resize', this.handleResize);
-        this.waitForBreadcrumbsRef();
+        this.createMutationObserver();
+        this.createResizeObserver();
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+    }
+    createMutationObserver() {
+        this.mutationObserver = new MutationObserver(this.duplicateNavElement.bind(this));
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        this.duplicateNavElement();
+    }
+    createResizeObserver() {
+        this.resizeObserver = new ResizeObserver(throttle(50, this.checkOverflow.bind(this)));
+        this.resizeObserver.observe(document.body);
+    }
+    /**
+     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
+     */
+    duplicateNavElement() {
+        const shadowRoot = this.host.shadowRoot;
+        const nav = shadowRoot?.querySelector('nav');
+        if (!shadowRoot || !nav)
+            return;
+        this.prepareBreadcrumbItemsForClone();
+        const clone = nav.cloneNode(true);
+        clone.classList.add('invisible');
+        shadowRoot.querySelector('nav.invisible')?.remove();
+        shadowRoot.append(clone);
         requestAnimationFrame(() => {
-            this.updateBreadcrumbItems();
+            this.duplicateSlottedElements(clone, 'slot:not([name])');
+            this.duplicateSlottedElements(clone, 'slot[name="selected"]');
+            this.checkOverflow();
         });
     }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-    }
-    // Updates breadcrumb items and sets the last item
-    updateBreadcrumbItems() {
-        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
-            text: item.textContent || '',
-            url: item.getAttribute('url') ?? undefined,
-            description: item.getAttribute('description') ?? undefined,
-            label: item.getAttribute('label') ?? undefined,
-        }));
-        this.lastItem = this.breadcrumbItems.at(-1);
-    }
-    // Determines parent width for concatenation logic
-    getParentWidth() {
-        let parent = this.host.parentNode;
-        while (parent && !(parent instanceof HTMLElement)) {
-            parent = parent.parentNode;
-        }
-        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
-    }
-    checkConcatenation() {
-        if (!this.breadcrumbsNavRef)
+    duplicateSlottedElements(clone, slotSelector) {
+        const originalSlot = this.host.shadowRoot?.querySelector(slotSelector);
+        const clonedSlot = clone.querySelector(slotSelector);
+        if (!originalSlot || !clonedSlot)
             return;
-        const visibleWidth = this.getParentWidth();
-        // Measure all hidden breadcrumb items
-        const hiddenItems = Array.from(this.host.shadowRoot?.querySelectorAll('.hidden-breadcrumb-item') || []);
-        const totalWidth = hiddenItems.reduce((accum, element) => {
-            const rect = element.getBoundingClientRect();
-            return accum + rect.width;
-        }, 0);
-        this.isConcatenated = totalWidth > visibleWidth;
-    }
-    // Handles breadcrumb item click to open the menu
-    handleBreadcrumbItemClick() {
-        if (this.host.shadowRoot) {
-            const menuTrigger = this.host.shadowRoot
-                ?.querySelector('.menu-trigger-wrapper')
-                ?.querySelector('button');
-            if (menuTrigger) {
-                menuTrigger.click();
-            }
-        }
+        originalSlot.assignedElements().forEach(element => {
+            const cloned = element.cloneNode(true);
+            cloned.dataset.measuring = 'true';
+            clonedSlot.before(cloned);
+        });
+        clonedSlot.remove();
+    }
+    checkOverflow() {
+        const hiddenNav = this.host.shadowRoot?.querySelector('nav.invisible');
+        if (!hiddenNav)
+            return;
+        const breadcrumbItems = Array.from(hiddenNav.querySelectorAll('post-breadcrumb-item'));
+        Promise.all(breadcrumbItems.map(item => componentOnReady(item))).then(() => {
+            this.shouldRenderMenu = hiddenNav.scrollWidth > hiddenNav.clientWidth;
+            this.updateBreadcrumbItemProps();
+        });
+    }
+    prepareBreadcrumbItemsForClone() {
+        this.shouldRenderMenu = false;
+        this.updateBreadcrumbItemProps();
+    }
+    updateBreadcrumbItemProps() {
+        const breadcrumbItems = this.host.querySelectorAll('post-breadcrumb-item');
+        breadcrumbItems.forEach((item, index) => {
+            item.setAttribute('variant', this.shouldRenderMenu ? 'menuitem' : 'listitem');
+            item.setAttribute('selected', String(index === breadcrumbItems.length - 1));
+        });
+    }
+    renderMenu() {
+        const menuId = `${this.id}-menu`;
+        return (h("div", { role: "listitem" }, h("div", { class: "breadcrumb-item" }, h("post-menu-trigger", { for: menuId }, h("button", null, h("span", { class: "visually-hidden" }, this.textMoreItems), h("span", { "aria-hidden": "true" }, "...")))), h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, h("slot", null))));
     }
     render() {
-        const visibleItems = this.breadcrumbItems.slice(0, -1);
-        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();
-                }
-            } }, h("button", { class: "btn", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu", label: this.textMoreItems }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    const linkElement = e.currentTarget.querySelector('a');
-                    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: '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)))))));
+        return (h(Host, { key: '85cb104032c0caed5ab2fb442be0a6d7eac5b67a', "data-version": version }, h("nav", { key: 'be4b2b8c6333ef3bf3440de0ce61958d1a07952b', "aria-label": this.textBreadcrumbs }, h("div", { key: '28531f638065e6db5cbf7e29d87086933fb47235', role: "list" }, h("div", { key: '4a71e5b143e271e26f032e8d4ed329aee949bf32', class: "breadcrumb-item home", role: "listitem" }, h("a", { key: '3e58ac2d4bbbc2e56a7acd28119b235edadc8fa0', href: this.homeUrl }, h("span", { key: '1a31a9963898005b218177d78adbb7813728b0ce', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '668a636881fbea1a7129b9108cc234c257e0fffb', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : h("slot", null), h("slot", { key: '0c8bad3de95f0ca51dfd8a15c4cb6e79e2499b1b', name: "selected" })))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -129,7 +131,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL for the home breadcrumb item."
+                    "text": "The URL for the root (home) breadcrumb item."
                 },
                 "getter": false,
                 "setter": false,
@@ -148,7 +150,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text label for the home breadcrumb item."
+                    "text": "An accessible label for the root (home) breadcrumb item."
                 },
                 "getter": false,
                 "setter": false,
@@ -167,7 +169,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible label for the breadcrumb component."
+                    "text": "An accessible label for the breadcrumb navigation."
                 },
                 "getter": false,
                 "setter": false,
@@ -186,7 +188,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible label for the breadcrumb menu when breadcrumb items are concatenated."
+                    "text": "An accessible label for the overflow menu that contains collapsed breadcrumb items."
                 },
                 "getter": false,
                 "setter": false,
@@ -197,9 +199,8 @@ export class PostBreadcrumbs {
     }
     static get states() {
         return {
-            "breadcrumbItems": {},
-            "isConcatenated": {},
-            "lastWindowWidth": {}
+            "shouldRenderMenu": {},
+            "id": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -54,7 +54,7 @@ export class PostClosebutton {
         }
     }
     render() {
-        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' })))));
+        return (h(Host, { key: 'ae74db094a2b1de985564d3f7528f78a98fd7ce9', "data-version": version }, h("button", { key: '7bab137e2dab6b3b405f486c10b3bbfbecdebafa', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ed323a3c13211f234551957a498f678e18ff4f66', "aria-hidden": "true", name: "closex" }), h("span", { key: 'aad44b5c93d357fab3d7cf537f477abd7c89f9be', class: "visually-hidden" }, h("slot", { key: 'd8424ae25100fc673188e3c77f89abe95847a38a' })))));
     }
     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: '79ec1a3eb11225a93f5e5b6da7334d20d5e4b565', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: 'baff34fc9b45aec4c3fb0f74ad676ea1237c7d23' })));
+        return (h(Host, { key: 'd376f9ca2621660a062f3cb5ea0164df088d9e8e', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '1debe186e172e978b8a32388a0f5b26eb2a602b3' })));
     }
     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: 'a4d1613dc3cbcfa627f920275eb3508939b63609', "data-version": version }, h("slot", { key: 'baa22c46a7a982afcd09253daa95f68f1709d509' })));
+        return (h(Host, { key: 'f5055d5970eb900d345957f306c9a373680f257a', "data-version": version }, h("slot", { key: 'cf63bdbca00602b9c4e2a81f28723bd274561045' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }