@swisspost/design-system-components 10.0.0-next.70 → 10.0.0-next.72

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

@@ -1,7 +1,17 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Pattern, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, checkEmptyOrPattern, checkEmptyOrType } from "../../utils/index";
-import { GRAVATAR_BASE_URL, cryptify } from "./avatar-utils";
+import { h, Host } from "@stencil/core";
+import { cryptify, GRAVATAR_BASE_URL } from "./avatar-utils";
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
 (function (AvatarType) {
@@ -19,42 +29,18 @@ 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() {
-        checkRequiredAndType(this, 'firstname', 'string');
-    }
-    validateLastname() {
-        checkEmptyOrType(this, 'lastname', 'string');
-    }
-    updateUserid() {
-        this.validateUserId();
-        this.getAvatarImage();
-    }
     updateEmail() {
-        this.validateEmail();
         this.getAvatarImage();
     }
-    validateDescription() {
-        checkEmptyOrType(this, 'description', 'string');
-    }
-    validateUserId() {
-        checkEmptyOrType(this, 'userid', 'string');
-    }
-    validateEmail() {
-        if (this.email)
-            checkEmptyOrPattern(this, 'email', emailPattern);
-    }
     async getAvatarImage() {
         let imageLoaded = false;
         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 +79,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);
@@ -136,13 +119,6 @@ export class PostAvatar {
         this.avatarType = AvatarType.Initials;
         this.getAvatarImage();
     }
-    componentDidLoad() {
-        this.validateFirstname();
-        this.validateLastname();
-        this.validateDescription();
-        this.validateUserId();
-        this.validateEmail();
-    }
     render() {
         const names = [this.firstname, this.lastname].filter(Boolean).map(n => n.trim());
         const initials = names
@@ -150,7 +126,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: '85af49f5beca48bec805f9c126e635b8b1042de3', "data-version": version }, h("span", { key: '950d20eeb38eae131bd2e459741ab03f7208ec37', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '5404e8d04de78e9c95d7b7e0b1dbb42fb6afc3e6', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '0d9c7b0f74e99072544eaa94b408d8e70f5cef57', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: 'e7260e54f5510707b19016badad66920df6b38f0', class: "initials" }, initials, h("span", { key: '647fe23a98a1338936ce701024bae944d6cce7ae' }, this.description ?? fullname)))));
     }
     static get is() { return "post-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -204,25 +180,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,
@@ -276,21 +233,21 @@ export class PostAvatar {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "firstname",
-                "methodName": "validateFirstname"
-            }, {
-                "propName": "lastname",
-                "methodName": "validateLastname"
-            }, {
-                "propName": "userid",
-                "methodName": "updateUserid"
-            }, {
                 "propName": "email",
                 "methodName": "updateEmail"
-            }, {
-                "propName": "description",
-                "methodName": "validateDescription"
             }];
     }
 }
-PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
+__decorate([
+    Required(),
+    Type('string')
+], PostAvatar.prototype, "firstname", void 0);
+__decorate([
+    Type('string')
+], PostAvatar.prototype, "lastname", void 0);
+__decorate([
+    Pattern(emailPattern)
+], PostAvatar.prototype, "email", void 0);
+__decorate([
+    Type('string')
+], PostAvatar.prototype, "description", void 0);

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

@@ -1,7 +1,17 @@
-import { Host, h } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { fadeSlide } from "../../animations/fade-slide";
+import { Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostBackToTop {
     constructor() {
         this.belowFold = false;
@@ -12,9 +22,6 @@ export class PostBackToTop {
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    validateTextBackToTop() {
-        checkRequiredAndType(this, 'textBackToTop', 'string');
-    }
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
@@ -67,13 +74,12 @@ export class PostBackToTop {
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
         this.animateButton();
-        this.validateTextBackToTop();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        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))));
+        return (h(Host, { key: 'b4fb2fd83336752a5c67ab9ded8a20b871b8f967', "data-version": version }, h("button", { key: 'cdee4a23f45f9293ac0da814f97df8bda73028ef', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '91e2be9b6c5dcd2b8e11aec4ff839de259d47a13', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '0bee6a5151a4919ddffc436924a8a494650b069a', class: "visually-hidden" }, this.textBackToTop))));
     }
     static get is() { return "post-back-to-top"; }
     static get encapsulation() { return "shadow"; }
@@ -118,11 +124,12 @@ export class PostBackToTop {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "textBackToTop",
-                "methodName": "validateTextBackToTop"
-            }, {
                 "propName": "belowFold",
                 "methodName": "watchBelowFold"
             }];
     }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostBackToTop.prototype, "textBackToTop", void 0);

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

@@ -8,10 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Host, h, } from "@stencil/core";
-import { version } from "../../../../package";
 import { fade } from "../../animations/index";
-import { checkEmptyOrOneOf, EventFrom } from "../../utils/index";
+import { EventFrom, OneOf } from "../../utils/index";
+import { version } from "../../../../package";
+import { h, Host, } from "@stencil/core";
 import { BANNER_TYPES } from "./banner-types";
 /**
  * @slot heading - Slot for placing custom content within the banner's heading.
@@ -28,15 +28,11 @@ export class PostBanner {
          */
         this.type = 'info';
     }
-    validateType() {
-        checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
-    }
     connectedCallback() {
         this.mutationObserver.observe(this.host, { childList: true });
     }
     componentDidLoad() {
         this.checkContent();
-        this.validateType();
     }
     disconnectedCallback() {
         this.mutationObserver.disconnect();
@@ -57,7 +53,7 @@ export class PostBanner {
         this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
     }
     render() {
-        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" })))));
+        return (h(Host, { key: '97695d768495db6f56d797d58d94db4b935c5436', "data-version": version, role: "alert", "data-color-scheme": "light" }, h("slot", { key: 'd60d826952da373557af9b2362cd26f2e246796e', name: "close-button" }), h("slot", { key: '2f731ec8f29f6a8dc281fab5884a3dc2e4c4e5ae', name: "heading" }), h("slot", { key: 'e4db84d239998661a3a3d68e7f1df0a076115b29' }), this.hasActions && (h("div", { key: '1b88d16970a728c3064d325296a529bc93cde41a', class: "actions" }, h("slot", { key: 'ea5570b8b8c23cb9a7c2b086ddd1a09a517e0f6a', name: "actions" })))));
     }
     static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -147,12 +143,6 @@ export class PostBanner {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "type",
-                "methodName": "validateType"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -163,6 +153,9 @@ export class PostBanner {
             }];
     }
 }
+__decorate([
+    OneOf(BANNER_TYPES)
+], PostBanner.prototype, "type", void 0);
 __decorate([
     EventFrom('post-closebutton', { allowDescendants: true })
 ], PostBanner.prototype, "onCloseButtonClick", null);

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,35 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { OneOf, Required, Type, Url } 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;
-        }
-    }
-    // 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;
-    }
-    connectedCallback() {
-        this.validateUrl();
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            const linkElement = this.host.shadowRoot?.querySelector('a');
-            if (linkElement) {
-                event.preventDefault();
-                linkElement.click();
-            }
-        }
+    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;
     }
     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 +62,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 +81,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 +100,77 @@ 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"
-            }];
-    }
 }
+__decorate([
+    Url()
+], PostBreadcrumbItem.prototype, "url", void 0);
+__decorate([
+    Type('string')
+], PostBreadcrumbItem.prototype, "label", void 0);
+__decorate([
+    Type('string')
+], PostBreadcrumbItem.prototype, "description", void 0);
+__decorate([
+    OneOf(VARIANTS)
+], PostBreadcrumbItem.prototype, "variant", void 0);
+__decorate([
+    Required(),
+    Type('boolean')
+], PostBreadcrumbItem.prototype, "selected", void 0);

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}