@swisspost/design-system-components 10.5.0 → 10.6.0

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-CXnlZiX8.js');
+var index = require('./index-B3PXzvDk.js');
 require('./breakpoints-Kruvy8Dm.js');
 var componentOnReady = require('./component-on-ready-CifOTqw1.js');
 var nanoid = require('./nanoid-CmjyF1Cm.js');
-var _package = require('./package-DdU-rENe.js');
+var _package = require('./package-pKyFPwiA.js');
 var index$1 = require('./index-CggFmZ8n.js');
-var required = require('./required-bJzxBV-V.js');
-var url = require('./url-Dxdd6tWj.js');
-var type = require('./type-CGPnqGY1.js');
-require('./create-validator-decorator-u-Byhihe.js');
+var required = require('./required-DhAEd0c7.js');
+var url = require('./url-DePscsTj.js');
+var type = require('./type-2Ma9dvHs.js');
+require('./create-validator-decorator-Cy5yN6u9.js');
 
-const postBreadcrumbsCss = () => `:host{display:block;position:relative}nav{max-width:100%}nav.invisible{overflow:hidden;visibility:hidden;position:absolute;inset:0}nav.loading>div>:not(.home){display:none}[role=list]{display:flex;align-items:flex-start;gap:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);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-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;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):not(:disabled):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.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){border-width:1px !important;transition:none}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !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;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}.home{padding-block:var(--post-device-spacing-padding-47)}.home::before{content:unset}.home post-icon{width:var(--post-device-sizing-interactive-icon-size2);height:var(--post-device-sizing-interactive-icon-size2)}.menu{margin-inline-end:calc(-1*var(--post-device-spacing-gap-inline-4))}.menu.empty{display:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+const postBreadcrumbsCss = () => `:host{display:block;position:relative}nav{max-width:100%}nav.invisible{overflow:hidden;visibility:hidden;position:absolute;inset:0}nav.loading>div>:not(.home){display:none}[role=list]{display:flex;align-items:flex-start;gap:var(--post-device-spacing-gap-inline-4)}[role=list]>.menu:first-child::before{content:none}.breadcrumb-item{display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);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-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;border-radius:var(--post-device-border-radius-focus);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item :is(button,a):not(:disabled):hover{text-decoration:none}.breadcrumb-item :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.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){border-width:1px !important;transition:none}.breadcrumb-item :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !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;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}post-menu-item>slot[name=home]>a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none;min-width:0;white-space:normal;overflow:visible;text-overflow:unset;justify-content:start;overflow-wrap:anywhere;hyphens:auto;line-break:strict}@media screen and (min-width: 780px){post-menu-item>slot[name=home]>a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item>slot[name=home]>a{font-size:1.25rem;padding-block:13px}}post-menu-item>slot[name=home]>a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item>slot[name=home]>a:hover{background-color:#504f4b;color:#fff}.home{flex:none}.home::before{content:unset}.home.icon{padding-block:var(--post-device-spacing-padding-47)}.home.icon post-icon{width:var(--post-device-sizing-interactive-icon-size2);height:var(--post-device-sizing-interactive-icon-size2)}.menu{margin-inline-end:calc(-1*var(--post-device-spacing-gap-inline-4))}.menu.empty{display:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -30,17 +30,33 @@ const PostBreadcrumbs = class {
         index.registerInstance(this, hostRef);
         this.debounceUpdateCollapsedItems = index$1.throttle(MEASUREMENT_DEBOUNCE_MS, this.updateCollapsedItems.bind(this));
         this.resizeObserver = new ResizeObserver(this.debounceUpdateCollapsedItems);
-        this.mutationObserver = new MutationObserver(this.updateHiddenNav.bind(this));
+        this.mutationObserver = new MutationObserver(() => {
+            void this.updateAfterMutation();
+        });
         this.loaded = false;
-        /** The number of breadcrumb items, counted from the start, that are moved into the overflow menu. */
+        /** Whether the consumer slotted their own `<a>` into the `home` slot. When true, `home-url` is not required, since the internal fallback link is not rendered. */
+        this.hasSlottedHomeAnchor = false;
+        /** Whether the slotted home anchor contains a post-icon. */
+        this.hasSlottedHomeIcon = false;
+        /** The number of breadcrumb items, counted from the start, moved into the overflow menu. */
         this.collapsed = 0;
+        /** Whether the home item is collapsed into its own overflow menu. */
+        this.homeCollapsed = false;
+        /** Whether the last (selected) item wraps onto multiple lines. */
+        this.lastItemWraps = false;
         /** The visible breadcrumb navigation. */
         this.nav = null;
         /** An off-screen copy of the breadcrumb navigation used for measurement. */
         this.hiddenNav = null;
+        /**
+         * Whether `text-home` content is displayed instead of the home icon, enabling segment specific
+         * breadcrumbs (like "Private customers" or "About us").
+         */
+        this.homeTextOnly = false;
     }
     componentWillLoad() {
         this.id = this.host.id || `b${nanoid.nanoid(6)}`;
+        this.checkSlottedHomeAnchor();
     }
     async componentDidLoad() {
         this.resizeObserver?.observe(document.body);
@@ -58,69 +74,95 @@ const PostBreadcrumbs = class {
         this.mutationObserver?.disconnect();
         this.debounceUpdateCollapsedItems.cancel();
     }
-    /**
-     * Measures the space available in the breadcrumb navigation and moves the items that do not fit
-     * into the overflow menu.
-     */
+    checkSlottedHomeAnchor() {
+        const homeSlotElement = Array.from(this.host.children).find(child => child.getAttribute('slot') === 'home');
+        this.hasSlottedHomeAnchor = homeSlotElement?.tagName === 'A';
+        this.hasSlottedHomeIcon =
+            this.hasSlottedHomeAnchor && !!homeSlotElement?.querySelector('post-icon');
+    }
+    get usesHomeText() {
+        return this.hasSlottedHomeAnchor ? !this.hasSlottedHomeIcon : this.homeTextOnly;
+    }
+    // Degrade order: collapse middle items -> collapse home -> wrap the last item.
+    /** Measures the available space and updates all three degrade-stage states. */
     async updateCollapsedItems() {
         if (!this.nav)
             return;
-        this.collapsed = await this.calculateCollapsedItems();
+        const { overflowing, homeOverflows, lastItemWraps } = await this.calculateCollapsedItems();
+        this.collapsed = overflowing;
+        this.homeCollapsed = homeOverflows;
+        this.lastItemWraps = lastItemWraps;
     }
-    /**
-     * Determines how many items have to be collapsed, either because they do not fit the breadcrumb
-     * navigation or because they exceed the maximum number of visible items.
-     */
     async calculateCollapsedItems() {
         const items = this.host.querySelectorAll('post-breadcrumb-item');
-        const overflowing = await this.calculateOverflowingItems();
+        const { overflowing, homeOverflows, lastItemWraps } = await this.calculateOverflowingItems();
         // Never show more than `MAX_VISIBLE_ITEMS`, even if the nav is wide enough to fit them all.
-        return Math.max(overflowing, items.length - MAX_VISIBLE_ITEMS);
+        return {
+            overflowing: Math.max(overflowing, items.length - MAX_VISIBLE_ITEMS),
+            homeOverflows,
+            lastItemWraps,
+        };
     }
-    /**
-     * Determines how many items overflow the width of the breadcrumb navigation.
-     */
+    /** Runs the three degrade stages in order against the off-screen measurement clone. */
     async calculateOverflowingItems() {
-        // Fallback to zero if the hidden nav is not available for measurement.
         if (!this.hiddenNav)
-            return 0;
-        const gap = Number.parseFloat(getComputedStyle(this.hiddenNav.firstElementChild).gap);
-        const menu = this.hiddenNav.querySelector('.menu').clientWidth;
-        // The last item can never be collapsed, so it is ignored when measuring the width of the items.
-        const items = Array.from(this.hiddenNav.querySelectorAll('post-breadcrumb-item')).slice(0, -1);
-        // Start from the assumption that all items fit and that no menu is shown.
-        // Therefore, subtract the width of the overflow menu.
-        let width = this.hiddenNav.scrollWidth - menu + gap;
+            return { overflowing: 0, homeOverflows: false, lastItemWraps: false };
+        const nav = this.hiddenNav;
+        const availableWidth = nav.clientWidth;
+        const gap = Number.parseFloat(getComputedStyle(nav.firstElementChild).gap);
+        const menuWidth = nav.querySelector('.menu')?.clientWidth ?? 0;
+        const homeWidth = nav.querySelector('.home')?.clientWidth ?? 0;
+        // Stage 1: collapse middle items, starting closest to home, until the rest fits.
+        const middleItems = Array.from(nav.querySelectorAll('post-breadcrumb-item')).slice(0, -1);
+        const { overflowing, remainingWidth } = this.collapseMiddleItems(middleItems, gap, menuWidth, availableWidth);
+        // Stage 2: home + last item, single-line. Text home can collapse into the menu, while the
+        // icon-only home remains visible and lets the last item wrap instead.
+        const homeOverflows = this.usesHomeText && remainingWidth > availableWidth;
+        // Stage 3: home joins the existing menu when middle items have collapsed. If no middle item
+        // collapsed, the menu needs to be added when home moves into it.
+        const widthWithHomeCollapsed = remainingWidth - homeWidth + (overflowing === 0 ? menuWidth : 0);
+        const lastItemWraps = this.usesHomeText
+            ? homeOverflows && widthWithHomeCollapsed > availableWidth
+            : remainingWidth > availableWidth;
+        return { overflowing, homeOverflows, lastItemWraps };
+    }
+    /** Stage 1: collapses middle items until the rest fits, or none are left. */
+    collapseMiddleItems(items, gap, menuWidth, availableWidth) {
+        // Start from the assumption that all items fit and that no menu is shown, so subtract the
+        // overflow menu's width from the total.
+        let width = this.hiddenNav.scrollWidth - menuWidth + gap;
         let overflowing = 0;
-        // Discard items from the start until the remaining ones fit the available width.
-        while (overflowing < items.length && width > this.hiddenNav.clientWidth) {
+        while (overflowing < items.length && width > availableWidth) {
             // The overflow menu needs to be displayed as soon as the first item is moved into it, so its
             // width needs to be taken into account when measuring the remaining items.
             if (overflowing === 0)
-                width += menu;
+                width += menuWidth;
             width -= items[overflowing++].clientWidth + gap;
         }
-        return overflowing;
+        return { overflowing, remainingWidth: width };
     }
-    /**
-     * Moves `collapsed` items into the overflow menu and marks the last item as selected.
-     */
-    updateItems(items, collapsed) {
+    /** Applies the degrade states to the `<post-breadcrumb-item>` elements. */
+    updateItems(items, collapsed, lastItemWraps) {
         items.forEach((item, index) => {
+            const isLast = index === items.length - 1;
             item.setAttribute('variant', index < collapsed ? 'menuitem' : 'listitem');
-            item.setAttribute('selected', String(index === items.length - 1));
-            item.setAttribute('standalone', String(index === items.length - 1 && index === collapsed));
+            item.setAttribute('selected', String(isLast));
+            item.setAttribute('standalone', String(isLast && index === collapsed && lastItemWraps));
         });
     }
-    /**
-     * Rebuilds the off-screen copy of the breadcrumb navigation.
-     */
+    /** Rebuilds the off-screen copy of the breadcrumb navigation. */
     async updateHiddenNav() {
         this.hiddenNav?.remove();
         this.hiddenNav = await this.renderHiddenNav();
     }
+    async updateAfterMutation() {
+        await this.updateHiddenNav();
+        await this.updateCollapsedItems();
+    }
     /**
-     * Renders an off-screen copy of the breadcrumb navigation that is used for measurements.
+     * Renders an off-screen copy of the nav for measurements. `.home` is rebuilt independently (see
+     * `buildMeasurementHomeElement`) rather than cloned, since the live nav may show the home item
+     * in the overflow menu instead if it is already collapsed.
      */
     async renderHiddenNav() {
         const shadowRoot = this.host.shadowRoot;
@@ -131,12 +173,29 @@ const PostBreadcrumbs = class {
         // Deep clone the breadcrumb navigation and flatten its slots into the clone.
         this.nav.querySelectorAll('slot').forEach((source, index) => {
             const target = slots[index];
-            // Insert the assigned elements where the slot used to be, then drop the now empty slot
-            source.assignedElements().forEach(element => {
-                target.insertAdjacentElement('beforebegin', element.cloneNode(true));
-            });
-            target.remove();
+            const assignedElements = source.assignedElements();
+            if (assignedElements.length > 0) {
+                // Insert the assigned elements where the slot used to be, then drop the now empty slot.
+                assignedElements.forEach(element => {
+                    target.insertAdjacentElement('beforebegin', element.cloneNode(true));
+                });
+                target.remove();
+            }
+            else {
+                // Nothing assigned: keep the slot's own fallback content (e.g. the default home link) by
+                // unwrap the <slot> in place, move its children to where it was, then remove it.
+                const parent = target.parentNode;
+                if (parent) {
+                    Array.from(target.childNodes).forEach(child => parent.insertBefore(child, target));
+                    target.remove();
+                }
+            }
         });
+        // Always measure the full, uncollapsed home item — see the method doc above. Uses
+        // replaceChild rather than replaceWith, since the latter isn't implemented by Stencil's
+        // mock-doc DOM used during SSR/hydration.
+        const existingHome = clone.querySelector('.home');
+        existingHome?.parentNode?.replaceChild(this.buildMeasurementHomeElement(), existingHome);
         clone.classList.remove('loading');
         clone.classList.add('invisible');
         // Show the overflow menu so that we can include the space it takes up in the measurement.
@@ -145,31 +204,72 @@ const PostBreadcrumbs = class {
         // Wait for all items to be fully hydrated before measuring.
         const items = clone.querySelectorAll('post-breadcrumb-item');
         await Promise.all(Array.from(items).map(item => componentOnReady.componentOnReady(item)));
-        // Move the items out of the overflow menu so that the uncollapsed layout can be measured.
-        this.updateItems(items, 0);
+        // Uncollapsed layout, both single-line, for measurement.
+        this.updateItems(items, 0, false);
         return clone;
     }
+    /** Builds `.home` in its full, uncollapsed form for measurement. Mirrors `renderHomeContent`, but as plain DOM since this runs outside the render cycle. */
+    buildMeasurementHomeElement() {
+        const home = document.createElement('div');
+        home.className = `breadcrumb-item home${this.usesHomeText ? '' : ' icon'}`;
+        home.setAttribute('role', 'listitem');
+        const slottedAnchor = this.hasSlottedHomeAnchor
+            ? Array.from(this.host.children).find(child => child.getAttribute('slot') === 'home')
+            : null;
+        if (slottedAnchor) {
+            home.append(slottedAnchor.cloneNode(true));
+            return home;
+        }
+        const anchor = document.createElement('a');
+        if (this.homeUrl)
+            anchor.href = this.homeUrl;
+        const label = document.createElement('span');
+        if (!this.usesHomeText)
+            label.className = 'visually-hidden';
+        label.textContent = this.textHome;
+        anchor.append(label);
+        if (!this.usesHomeText) {
+            const icon = document.createElement('post-icon');
+            icon.setAttribute('aria-hidden', 'true');
+            icon.setAttribute('name', 'home');
+            anchor.append(icon);
+        }
+        home.append(anchor);
+        return home;
+    }
     renderMenu() {
         const menuId = `${this.id}-menu`;
-        return (index.h("div", { class: `breadcrumb-item menu ${this.collapsed === 0 ? 'empty' : ''}`, role: "listitem" }, index.h("post-menu-trigger", { for: menuId }, index.h("button", null, index.h("span", { class: "visually-hidden" }, this.textMoreItems), index.h("span", { "aria-hidden": "true" }, "..."))), index.h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, index.h("slot", { name: "menu" }))));
+        return (index.h("div", { class: `breadcrumb-item menu ${this.collapsed === 0 && !this.homeCollapsed ? 'empty' : ''}`, role: "listitem" }, index.h("post-menu-trigger", { for: menuId }, index.h("button", null, index.h("span", { class: "visually-hidden" }, this.textMoreItems), index.h("span", { "aria-hidden": "true" }, "..."))), index.h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, this.homeCollapsed && this.usesHomeText && (index.h("post-menu-item", null, this.renderHomeContent())), index.h("slot", { name: "menu" }))));
+    }
+    /** Reused by the plain home item and the home menu — a slot can only be assigned once. */
+    renderHomeContent() {
+        return (index.h("slot", { name: "home", onSlotchange: () => this.checkSlottedHomeAnchor() }, index.h("a", { href: this.homeUrl }, index.h("span", { class: this.usesHomeText ? undefined : 'visually-hidden' }, this.textHome), !this.usesHomeText && index.h("post-icon", { "aria-hidden": "true", name: "home" }))));
+    }
+    /** Degrade stage 2: home renders in full, single-line, not yet collapsed. */
+    renderHome() {
+        return (index.h("div", { class: `breadcrumb-item home${this.usesHomeText ? '' : ' icon'}`, role: "listitem" }, this.renderHomeContent()));
     }
     render() {
         if (this.loaded) {
             const items = this.host.querySelectorAll('post-breadcrumb-item');
-            this.updateItems(items, this.collapsed);
+            this.updateItems(items, this.collapsed, this.lastItemWraps);
         }
-        return (index.h(index.Host, { key: '501384cb07b2deac87a21800fc4d39d695747341', "data-version": _package.version }, index.h("nav", { key: '20aa57da865967458169544dec75d975926eb675', "aria-label": this.textBreadcrumbs, ref: el => (this.nav = el), class: this.loaded ? '' : 'loading' }, index.h("div", { key: 'cf8f21f2ee9de01bac0edf9379ba5c183b938d70', role: "list" }, index.h("div", { key: '9bd29a83cb976d67f3c6ea24cf23b2a07e40ca84', class: "breadcrumb-item home", role: "listitem" }, index.h("a", { key: '675638668994f074951491040c6043819e6f7282', href: this.homeUrl }, index.h("span", { key: '3ce1f8ea5ba5738925bff000ec5a8c32603ae963', class: "visually-hidden" }, this.textHome), index.h("post-icon", { key: '1b35b22788d4e70c948e1067d99265e8af9c74e7', "aria-hidden": "true", name: "home" }))), this.renderMenu(), index.h("slot", { key: 'f7fe7cd0b16a9064aba28149756f785c47133351' }), index.h("slot", { key: 'c62ce84877203586c184e1adaea1ecb6ed8a0912', name: "selected" })))));
+        return (index.h(index.Host, { key: '8d5f457a7c6a2df0cfaf5c31f3ffc6937de76e57', "data-version": _package.version, class: this.homeCollapsed && this.usesHomeText ? 'home-collapsed' : undefined }, index.h("nav", { key: 'ce3fd7ad69060dd6968afaad6170e27eee72682f', "aria-label": this.textBreadcrumbs, ref: el => (this.nav = el), class: this.loaded ? '' : 'loading' }, index.h("div", { key: '1c400c8c1e1b625203876cc9804936782a2202c6', role: "list" }, (!this.homeCollapsed || !this.usesHomeText) && this.renderHome(), this.renderMenu(), index.h("slot", { key: '5cf6618b487961c0e7d70637f5396d023660ec55' }), index.h("slot", { key: 'f4fb662d04d9966c76a22444844d692611472b2d', name: "selected" })))));
     }
     get host() { return index.getElement(this); }
 };
 __decorate([
-    required.Required(),
+    required.Required({ when: 'hasSlottedHomeAnchor', truthy: false }),
     url.Url()
 ], PostBreadcrumbs.prototype, "homeUrl", void 0);
 __decorate([
-    required.Required(),
+    required.Required({ when: 'hasSlottedHomeAnchor', truthy: false }),
     type.Type('string')
 ], PostBreadcrumbs.prototype, "textHome", void 0);
+__decorate([
+    required.Required(),
+    type.Type('boolean')
+], PostBreadcrumbs.prototype, "homeTextOnly", void 0);
 __decorate([
     required.Required(),
     type.Type('string')

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

@@ -1,23 +1,23 @@
 'use strict';
 
-var index = require('./index-CXnlZiX8.js');
+var index = require('./index-B3PXzvDk.js');
 var breakpoints = require('./breakpoints-Kruvy8Dm.js');
 var eventFrom = require('./event-from-CTcQxB9-.js');
-var _package = require('./package-DdU-rENe.js');
-var oneOf = require('./one-of-LGG0uEIi.js');
-var required = require('./required-bJzxBV-V.js');
+var _package = require('./package-pKyFPwiA.js');
+var oneOf = require('./one-of-CRFrfihj.js');
+var required = require('./required-DhAEd0c7.js');
 var fade = require('./fade-CPQhl1fP.js');
 var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
 var index$1 = require('./index-CggFmZ8n.js');
-var type = require('./type-CGPnqGY1.js');
+var type = require('./type-2Ma9dvHs.js');
 var nanoid = require('./nanoid-CmjyF1Cm.js');
-var pattern = require('./pattern-B-csvfNt.js');
-var url = require('./url-Dxdd6tWj.js');
+var pattern = require('./pattern-D329DFcf.js');
+var url = require('./url-DePscsTj.js');
 var utils = require('./utils-s05L2ulk.js');
 var fadeSlide = require('./fade-slide-dPhQa-I1.js');
 var placement = require('./placement-qEFR9hmI.js');
 var getRoot = require('./get-root-B1FnQ50K.js');
-require('./create-validator-decorator-u-Byhihe.js');
+require('./create-validator-decorator-Cy5yN6u9.js');
 
 const CLOSABLE_TARGETS = [
     {
@@ -125,7 +125,7 @@ const PostClosebutton = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f46ba6cbd82793b2a3d3a72c2f89236f0904eb68', "data-version": _package.version }, index.h("button", { key: 'd014e76ccce88a087f8dd9caaac002eb09f64699', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: this.handleClick }, index.h("post-icon", { key: '442305b327aabe61f259b98694118ec1b4ed2f09', "aria-hidden": "true", name: "closex" }), index.h("span", { key: '530149339a2a983d1e5d23c149abd0faf6f912b5', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, index.h("slot", { key: 'b90d5bea08c70c6df33dc5fc74bcf06eb2b6cd14' })))));
+        return (index.h(index.Host, { key: 'b8e2214b904f5167fa3753aab947418891236fcf', "data-version": _package.version }, index.h("button", { key: '224ca42d3be187062ba9717e4a534ff34eeafaf7', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm", onClick: this.handleClick }, index.h("post-icon", { key: '5b289691599d6f9a3bb0fa7a28c71eecd1f5aee7', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'e22045f15b3dc8b8b228eb4282114e10db68b186', ref: el => (this.visuallyHidden = el), class: "visually-hidden" }, index.h("slot", { key: 'e492390c995a993ffc8988a1c90a41e59fbe39f5' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
@@ -472,10 +472,10 @@ const PostHeader = class {
     render() {
         const onDesktop = this.device === 'desktop';
         const onTabletAndMobile = this.device !== 'desktop';
-        return (index.h(index.Host, { key: '4ae4873c57cd307d3a4073f3d712bcf975528a90', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: 'cbc743a8981f4bbc3d42807244d88edba88e6a6c' }, index.h("div", { key: 'f39c122246336d0de803353d9abb9e573459073e', class: "global-header" }, index.h("div", { key: 'a76628c6501851bbfd597e0106847da12dc0b705', class: "section" }, index.h("div", { key: 'b703c54159955ae272378aab5172f0bcd1b638d1', class: "logo" }, index.h("slot", { key: 'a55336f3bee22b2c9a2cb0426b5e04ba5c8f29c4', name: "post-logo" })), index.h("div", { key: '9b6db729465dae5c503d461a115af296730b2ce6', class: "sliding-controls" }, onDesktop && (index.h("div", { key: 'cf4124ae4aaf47c2445499ce08ebb15076ac4bf2', class: "audience" }, index.h("slot", { key: '830003c8b3b50abeb9d82bdfde83212f20a4da3d', name: "audience" }))), index.h("slot", { key: '458afb2da52853fbc9bc066fc487fcf77df0d2a0', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+        return (index.h(index.Host, { key: 'd288ef2e58942c2cbc5da673076548c97eef04ed', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: '5357f3edf382dec9b552fdfe9fb51d0878de697c' }, index.h("div", { key: 'bafa11390b33056e5a3d1a8a2922fd3a43a25020', class: "global-header" }, index.h("div", { key: '2d54e8d2931864880ff7a28aea64625e775ce327', class: "section" }, index.h("div", { key: 'b3a87bbf3b87213e22043d58a7298d0cff530cdf', class: "logo" }, index.h("slot", { key: '9d559b9231dc23841e277d3f4633cdeba2da12b2', name: "post-logo" })), index.h("div", { key: '64ebd463868ce8b417023651e745e33331feb908', class: "sliding-controls" }, onDesktop && (index.h("div", { key: 'b4e7d7231a0d8bebe620d41cb655c3686449b19f', class: "audience" }, index.h("slot", { key: '0781a76b1853a842dc74ec2a2a649f7de487e148', name: "audience" }))), index.h("slot", { key: '25f1d5b34a5aa950014214f810f3acca95dbbe80', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
             index.h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
             index.h("slot", { key: "language-menu", name: "language-menu" }),
-        ], index.h("slot", { key: 'ffab20101950b7472c97ff0675f36903a6a66ebd', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: 'd1cb44efb5ae024bc225487be4e592a406acf138', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: 'c33d2bb5c415f58829ad10026b9811684eac3d35' }, this.textMenu), index.h("post-icon", { key: '7acb3d93aec23ef1c1efd9c9d52832395e66abf0', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: '7b6fb17d50df4474ddd282d7e202a43c324c3b87', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: 'c7e6d91a0cd4a286b7186d0f41abdf9dc1e9ffd4', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: '670d00fb0a79ecc1f2bb45645887db13c7ea500f', class: "section" }, index.h("slot", { key: '5d3b0c9b97be561875fc908b2b7bf4d558513318', name: "side-nav" }), index.h("slot", { key: '39348fb8869f5623da026ed08ce69f727d9de7e6', name: "title" }), this.hasTitle && index.h("slot", { key: '883097731548de45adec9cbbf7df1c80a37b76b5', name: "local-nav" }), onDesktop && index.h("slot", { key: 'fbc77dee6ed73d8a13da75d3d695af80ce32c3af', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: '94a989295ae04cd8259ba22e583d41bcb4701881', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        ], index.h("slot", { key: 'd7121e5e9ddf825f96a3a82e65ff135c61891adb', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: 'dd0bcf9cfd96d4ffa44fc549d518d7b39d287156', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: '23004cb12733a7081f828d33327cc26adafe3888' }, this.textMenu), index.h("post-icon", { key: '7fb36892eadfcce0a85d964c411aeafc3fbbde1b', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: 'a41292205573c03f25d225d4f4296f75ffe6c7ce', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: '7d6d1424881bb5277210c86b194dfb9e5dcb7c59', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: '724a8d3f79112875ba343470f9d0b753ce5d4861', class: "section" }, index.h("slot", { key: '688aafdec4e4d5565f3d0a9d9bd9bb7bc78152be', name: "side-nav" }), index.h("slot", { key: '12590bfb4bfcc8c565f008a8e3d75b5951eb73bc', name: "title" }), this.hasTitle && index.h("slot", { key: 'd862de0f3aaba5ea22a26c387ea7e93dc0c5e79c', name: "local-nav" }), onDesktop && index.h("slot", { key: '1a25ec6694bc8b2c06e21449dc566f36595afbb5', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: '987c26ee73fb19049fdd19de79b537b71e2771de', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -605,7 +605,7 @@ const PostIcon = class {
         }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (index.h(index.Host, { key: '917a78dbe4db46244348298b08a2176c9028048e', "data-version": _package.version }, index.h("span", { key: '06f07755212e2b6a9a5957d7fd37751c62343be6', style: this.getStyles() })));
+        return (index.h(index.Host, { key: '405ccfde4206c14f044575d0b23998d93a03ffb6', "data-version": _package.version }, index.h("span", { key: 'ad70ccf63add4b881ef6096ae460e13fba09f508', style: this.getStyles() })));
     }
     get host() { return index.getElement(this); }
 };
@@ -838,7 +838,7 @@ const PostLogo = class {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (index.h(index.Host, { key: 'dd8ddb0dcbed8062ee5adecf2a26ad98b42c94b1', "data-version": _package.version }, index.h(LogoTag, { key: 'f4d8ad34cdd455c3e2096ce26db7bc775d7e05c3', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '87a58c2904f3dae5406b5652787ca1d99dbda0dc', class: "description" }, index.h("slot", { key: 'ae69c86c4bfed42b25aafa948f13989c31833466', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'e51164151a1a53971414ea37af5085f99575fc36', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'fa946d3ded62128ca4469b160103b464eb59329b', id: "Logo" }, index.h("rect", { key: '18424ee0ca3256f9169d8dac6223df3d49cb09b9', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '96381aeedbc8536fd551ec8ac4161db842b3bfc9', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: 'c1bbdb1bb687390d59ec2e6dcf83e80d1606582f', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (index.h(index.Host, { key: '1f69b0ddc0ecf2fde47423cd7824fcbe76e4a529', "data-version": _package.version }, index.h(LogoTag, { key: '096736bd50a6dd43e02a104e7e81897cb286db60', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: 'bc49b9591424f02744f771eb1079911f02ceca33', class: "description" }, index.h("slot", { key: 'ea905eac805e2a9940bfe50aa222bef738d15d27', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '482d94c38347017269dabd0ab3d15f4ede14f187', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'fcd3dc56e8a0e448abe65b557639a8bea8ca580f', id: "Logo" }, index.h("rect", { key: '11ed7bad596ee07301f1c1101ddded089ef2bf99', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '6ab9d28c8492c746a2620cff62dbd92a59a00aff', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: '8b96cee7ee8ad1ec3c22aaf7928f7a711c05c828', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -978,7 +978,7 @@ const PostMainnavigation = class {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (index.h(index.Host, { key: '9fe43f86cab360591a15a033e0dc657096a69c00', version: _package.version, class: this.canScroll ? 'scrollable' : '' }, index.h("div", { key: 'f68ea70e332336e99c0b51b19e33647b40fcfbb4', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: 'fac01a93fd7cbfe2548a4d049d59f0bc6d01af63', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '7787a27e76350e9e86a97a58a20abe1286786ff7', ref: el => (this.navbar = el), "aria-label": this.textMain }, index.h("slot", { key: '357a8f5fe1e7b6bea5ae67d87c979f785ea24b82' })), index.h("div", { key: 'ce6091a9466fcd17aca39fcb5d6c204e1782c95d', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '92d35b38a453326701a0837e6187abf82fa37bf4', "aria-hidden": "true", name: "chevronright" }))));
+        return (index.h(index.Host, { key: 'cf7b2328a41b41ca28956120b8042590655e7bb2', version: _package.version, class: this.canScroll ? 'scrollable' : '' }, index.h("div", { key: 'a25c55cf7b11a11ce86fb134dd57dbdad3d30301', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '013778591637d5ee0ac2cd2bf3f23c677ba2a13f', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: 'a007b7be57429580de35865e5eff0c54378d0a8e', ref: el => (this.navbar = el), "aria-label": this.textMain }, index.h("slot", { key: 'bc8e1db18430ee43b5963539fbaa65e1fb1b0c55' })), index.h("div", { key: 'cdb413fedc9a90c712db0fe5d6ab760a426ff632', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: 'b2df569a79881b3a044556ba9c0f2e2b0646e78b', "aria-hidden": "true", name: "chevronright" }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -1001,6 +1001,8 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostMegadropdown = class {
+    /** Tracks the currently active dropdown instance. */
+    static { this.activeDropdown = null; }
     get megadropdownTrigger() {
         const hostId = this.host.getAttribute('id');
         return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
@@ -1282,12 +1284,10 @@ const PostMegadropdown = class {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (index.h(index.Host, { key: '2cc8228a628b2a0380acf4fcac8daa1ef1a7bf2f', version: _package.version }, index.h("div", { key: '709fe50f23fd355bd97add916b451d5abf653780', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: 'e2bac29e70e39800ee55c8454f78b6889b241121', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '6c28bc5d3e3b8c8dab385f13a4b9b8a7b7ba70b9', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: 'bf71d0d7b4a84ae1238f27373d195403d8a1f812', class: "megadropdown-content" }, index.h("slot", { key: '9812bec733ca678b1a3681d90859082e57fbd64a' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (index.h(index.Host, { key: 'c0854fff62bf5e8de1597e46051aea5f300ee686', version: _package.version }, index.h("div", { key: '1f4f66b74d7129481d76f1eec15a924b2c37718c', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, index.h("div", { key: 'af743442fe3ad6211cddccddf5d0803de9f501b5', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (index.h("p", { key: '35a03b2ee32498aa157140d4e6916cbf66655e5c', class: "megadropdown-title" }, this.megadropdownTitle)), index.h("div", { key: '6c4efb52e7bb04c4f40d5b3f739ca69771c48602', class: "megadropdown-content" }, index.h("slot", { key: '2b3200495cf23fe049734de9de9a5a1f4c9b09f3' })), this.device === 'desktop' ? (index.h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (index.h("button", { onClick: () => this.hide(true), class: "back-button" }, index.h("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     get host() { return index.getElement(this); }
 };
-/** Tracks the currently active dropdown instance. */
-PostMegadropdown.activeDropdown = null;
 __decorate$4([
     required.Required(),
     type.Type('string')
@@ -1369,7 +1369,7 @@ const PostMegadropdownTrigger = class {
         this.megadropdown.toggle();
     }
     render() {
-        return (index.h(index.Host, { key: 'd5242fd9126f3486f731ed6f369f3a6c38a5d1e9', "data-version": _package.version }, index.h("button", { key: '6af086a50a9c788b35ba542531950b69a5e249da', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, index.h("span", { key: 'dacf0bd6dc576fa7c70353c98eacb3d81ddf83e5' }, index.h("span", { key: '0c7b950ea9bfcae62b367900d78f155edc49de72', innerHTML: this.slottedContent }), index.h("span", { key: '999325546eb3196f6e704ebeb18f436ff3d53756', "aria-hidden": "true" }, index.h("slot", { key: '08fa107b944a87edf156ea7d5e12692eba64952d' }))), index.h("post-icon", { key: 'eb32199b1ff6951b6025c1e4919674f5419f7d49', name: "chevrondown" }))));
+        return (index.h(index.Host, { key: '7e6201e3cdea96113bbebdeeb805acff557c8bbb', "data-version": _package.version }, index.h("button", { key: '1863f48dbd6e98b7a2b226b7c3b25b16a38c644b', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, index.h("span", { key: 'dee7e77e45914a3e40a9f5027570bef0035dfdf2' }, index.h("span", { key: '362865f7946f14f45ecdb240e81f09370e3f6d10', innerHTML: this.slottedContent }), index.h("span", { key: 'd61eb63433aa65631f787646df2c6705c3d6e7a1', "aria-hidden": "true" }, index.h("slot", { key: 'c831f7299fe3c80b8229c861e01e09a2ee481bc8' }))), index.h("post-icon", { key: 'bcc8ed53293e16d4571e989a491760f98425b298', name: "chevrondown" }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -1577,7 +1577,7 @@ const PostMenu = class {
         ]));
     }
     render() {
-        return (index.h(index.Host, { key: 'cc6ede4cdacb722006475de88385b041d7e42dcb', "data-version": _package.version }, index.h("post-popovercontainer", { key: '3931f604aad477441112fd0b5a4800c8f034abbb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '1b0adb12bb1369d14a6bcfac3c956090eb66572a', part: "post-menu" }, index.h("slot", { key: '9c2518e7e9e6ccaa64d486a90b5fc7eec15c24b8', name: "header" }), index.h("slot", { key: 'd28df1e411010aabe083255cd5e5ece4bd62424d' })))));
+        return (index.h(index.Host, { key: '22441c2bef0402f10e77b96b8a5d48a0648615f7', "data-version": _package.version }, index.h("post-popovercontainer", { key: '8b37fe55d58a3a486e947266348b55408999a8bb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '2679eb9c4a95585b8aaf74e29f026c84b10aa6f3', part: "post-menu" }, index.h("slot", { key: '0da58a1bde1bdb4c1f8b7b19ca8cbde14d7946fc', name: "header" }), index.h("slot", { key: '801f7bc59d4d3267728b9adf0750dbea76a7652c' })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -1596,7 +1596,7 @@ __decorate$2([
 ], PostMenu.prototype, "handlePostBeforeToggle", null);
 PostMenu.style = postMenuCss();
 
-const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}`;
+const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}`;
 
 const PostMenuItem = class {
     constructor(hostRef) {
@@ -1676,7 +1676,7 @@ const PostMenuTrigger = class {
         return null;
     }
     render() {
-        return (index.h(index.Host, { key: 'fcdfd58ba24cd5269461477ac3d00a53ccf2ea1b', "data-version": _package.version }, index.h("slot", { key: 'b3a6b137bf61accd32eb1bec5af5e39e68ec6613' })));
+        return (index.h(index.Host, { key: 'f75522d28e9a45c80846a191cff3ea2eb51b5bde', "data-version": _package.version }, index.h("slot", { key: 'bc70e3ddc8dc372611c00a4cda52cd35ede02a3f' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -4546,7 +4546,7 @@ function applySafeArea(clippingRect, element) {
  */
 const computePositionWithSafeArea = (reference, floating, options) => {
     // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
-    options ?? (options = {});
+    options ??= {};
     return computePosition(reference, floating, {
         ...options,
         platform: {
@@ -4573,6 +4573,30 @@ const ANIMATIONS = {
     'pop-in': popIn,
 };
 const PostPopovercontainer = class {
+    static {
+        this.STATIC_SIDES = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+        };
+    }
+    static {
+        this.PROPERTIES_TO_CLEAR = [
+            '--post-safe-space-popover-x',
+            '--post-safe-space-popover-y',
+            '--post-safe-space-popover-x-start',
+            '--post-safe-space-popover-x-end',
+            '--post-safe-space-popover-y-start',
+            '--post-safe-space-popover-y-end',
+            '--post-safe-space-trigger-x',
+            '--post-safe-space-trigger-y',
+            '--post-safe-space-trigger-x-start',
+            '--post-safe-space-trigger-x-end',
+            '--post-safe-space-trigger-y-start',
+            '--post-safe-space-trigger-y-end',
+        ];
+    }
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.postBeforeShow = index.createEvent(this, "postBeforeShow");
@@ -4908,32 +4932,12 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a6f41ad3ef982f9e9ec0d6450837d1cfdca73d16', "data-version": _package.version, popover: "auto" }, index.h("div", { key: '40afab436d5550fda44c8995139080161eab5b09', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (index.h("span", { key: '580bd8fcaecb89334aca05001137a4d7cccd254a', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (index.h(index.Host, { key: 'f3ea4bfc9a59faa2fbf1e413a1ec648f598a6779', "data-version": _package.version, popover: "auto" }, index.h("div", { key: 'a328c73c7e08eca1e423fcbe736798188cca2a87', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (index.h("span", { key: '8fad0095fb8d8c903ba84a639b4efc3e321c6aef', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), index.h("span", { key: '61a6e4e8026832afc188edd5a74535716db65945', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: 'd79cb69a77dbba13ffa3c30e0393db4f3a669a12' }))));
+            } })), index.h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), index.h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
     }
     get host() { return index.getElement(this); }
 };
-PostPopovercontainer.STATIC_SIDES = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-};
-PostPopovercontainer.PROPERTIES_TO_CLEAR = [
-    '--post-safe-space-popover-x',
-    '--post-safe-space-popover-y',
-    '--post-safe-space-popover-x-start',
-    '--post-safe-space-popover-x-end',
-    '--post-safe-space-popover-y-start',
-    '--post-safe-space-popover-y-end',
-    '--post-safe-space-trigger-x',
-    '--post-safe-space-trigger-y',
-    '--post-safe-space-trigger-x-start',
-    '--post-safe-space-trigger-x-end',
-    '--post-safe-space-trigger-y-start',
-    '--post-safe-space-trigger-y-end',
-];
 __decorate([
     oneOf.OneOf(placement.PLACEMENT_TYPES)
 ], PostPopovercontainer.prototype, "placement", void 0);
@@ -4974,7 +4978,7 @@ const PostTogglebutton = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'ae46e9fcd82766abcf76c4b37d0341cfd29f2f4f', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '9c71c065225f0f5c68e76fa2cec6d75bdf29fed0' })));
+        return (index.h(index.Host, { key: '81fa9d922480059096e4146c10cf2ef72357b482', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '4e8d793e3867ba4c9c8e17d509652309a79f032a' })));
     }
     get host() { return index.getElement(this); }
 };