@swisspost/design-system-components 10.4.0 → 10.6.0

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

@@ -1,14 +1,15 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-sn7oKSwC.js';
-import { t as throttle } from './breakpoints-BQ3HlJPr.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BjziJWh2.js';
+import './breakpoints-I1j7a0bW.js';
 import { c as componentOnReady } from './component-on-ready-lpWRZjJp.js';
 import { n as nanoid } from './nanoid-8LXe8Zt_.js';
-import { v as version } from './package-tTf1w3A9.js';
-import { R as Required } from './required-D2rl2XZJ.js';
-import { U as Url } from './url-1wyUfUv-.js';
-import { T as Type } from './type-CGynDrfh.js';
-import './create-validator-decorator-CNUaQboh.js';
+import { v as version } from './package-T8T3po4z.js';
+import { t as throttle } from './index-bR8vy6-s.js';
+import { R as Required } from './required-B0X7uy13.js';
+import { U as Url } from './url-BL7d6iWZ.js';
+import { T as Type } from './type-CF1dOg6D.js';
+import './create-validator-decorator-C2XlYkNB.js';
 
-const postBreadcrumbsCss = () => `:host{display:block;position:relative}nav{max-width:100%}nav.invisible{--post-breadcrumb-item-wrap:nowrap;visibility:hidden;overflow:hidden;position:absolute;inset:0;padding-inline:1px}[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)}.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;
@@ -20,103 +21,253 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
                 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;
 };
+const MAX_VISIBLE_ITEMS = 6;
+const MEASUREMENT_DEBOUNCE_MS = 50;
 const PostBreadcrumbs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.shouldRenderMenu = false;
+        this.debounceUpdateCollapsedItems = throttle(MEASUREMENT_DEBOUNCE_MS, this.updateCollapsedItems.bind(this));
+        this.resizeObserver = new ResizeObserver(this.debounceUpdateCollapsedItems);
+        this.mutationObserver = new MutationObserver(() => {
+            void this.updateAfterMutation();
+        });
+        this.loaded = false;
+        /** 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(6)}`;
+        this.checkSlottedHomeAnchor();
     }
-    componentDidLoad() {
-        this.createMutationObserver();
-        this.createResizeObserver();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-        this.resizeObserver?.disconnect();
-    }
-    createMutationObserver() {
-        this.mutationObserver = new MutationObserver(this.duplicateNavElement.bind(this));
-        this.mutationObserver.observe(this.host, {
+    async componentDidLoad() {
+        this.resizeObserver?.observe(document.body);
+        this.mutationObserver?.observe(this.host, {
             childList: true,
             characterData: true,
             subtree: true,
         });
-        this.duplicateNavElement();
+        await this.updateHiddenNav();
+        await this.updateCollapsedItems();
+        this.loaded = true;
     }
-    createResizeObserver() {
-        this.resizeObserver = new ResizeObserver(throttle(50, this.checkOverflow.bind(this)));
-        this.resizeObserver.observe(document.body);
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        this.debounceUpdateCollapsedItems.cancel();
     }
-    /**
-     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
-     */
-    duplicateNavElement() {
-        const shadowRoot = this.host.shadowRoot;
-        const nav = shadowRoot?.querySelector('nav');
-        if (!shadowRoot || !nav)
-            return;
-        this.prepareBreadcrumbItemsForClone();
-        const clone = nav.cloneNode(true);
-        clone.classList.add('invisible');
-        shadowRoot.querySelector('nav.invisible')?.remove();
-        shadowRoot.append(clone);
-        requestAnimationFrame(() => {
-            this.duplicateSlottedElements(clone, 'slot:not([name])');
-            this.duplicateSlottedElements(clone, 'slot[name="selected"]');
-            this.checkOverflow();
-        });
+    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');
     }
-    duplicateSlottedElements(clone, slotSelector) {
-        const originalSlot = this.host.shadowRoot?.querySelector(slotSelector);
-        const clonedSlot = clone.querySelector(slotSelector);
-        if (!originalSlot || !clonedSlot)
-            return;
-        originalSlot.assignedElements().forEach(element => {
-            clonedSlot.insertAdjacentElement('beforebegin', element.cloneNode(true));
-        });
-        clonedSlot.remove();
+    get usesHomeText() {
+        return this.hasSlottedHomeAnchor ? !this.hasSlottedHomeIcon : this.homeTextOnly;
     }
-    checkOverflow() {
-        const hiddenNav = this.host.shadowRoot?.querySelector('nav.invisible');
-        if (!hiddenNav)
+    // 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;
-        const breadcrumbItems = Array.from(hiddenNav.querySelectorAll('post-breadcrumb-item'));
-        Promise.all(breadcrumbItems.map(item => componentOnReady(item))).then(() => {
-            this.shouldRenderMenu =
-                hiddenNav.scrollWidth > hiddenNav.clientWidth && breadcrumbItems.length > 1;
-            this.updateBreadcrumbItemProps();
+        const { overflowing, homeOverflows, lastItemWraps } = await this.calculateCollapsedItems();
+        this.collapsed = overflowing;
+        this.homeCollapsed = homeOverflows;
+        this.lastItemWraps = lastItemWraps;
+    }
+    async calculateCollapsedItems() {
+        const items = this.host.querySelectorAll('post-breadcrumb-item');
+        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 {
+            overflowing: Math.max(overflowing, items.length - MAX_VISIBLE_ITEMS),
+            homeOverflows,
+            lastItemWraps,
+        };
+    }
+    /** Runs the three degrade stages in order against the off-screen measurement clone. */
+    async calculateOverflowingItems() {
+        if (!this.hiddenNav)
+            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;
+        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 += menuWidth;
+            width -= items[overflowing++].clientWidth + gap;
+        }
+        return { overflowing, remainingWidth: width };
+    }
+    /** 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(isLast));
+            item.setAttribute('standalone', String(isLast && index === collapsed && lastItemWraps));
         });
     }
-    prepareBreadcrumbItemsForClone() {
-        this.shouldRenderMenu = false;
-        this.updateBreadcrumbItemProps();
+    /** 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();
     }
-    updateBreadcrumbItemProps() {
-        const breadcrumbItems = this.host.querySelectorAll('post-breadcrumb-item');
-        breadcrumbItems.forEach((item, index) => {
-            item.setAttribute('variant', this.shouldRenderMenu ? 'menuitem' : 'listitem');
-            item.setAttribute('selected', String(index === breadcrumbItems.length - 1));
+    /**
+     * 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;
+        if (!shadowRoot || !this.nav)
+            return null;
+        const clone = this.nav.cloneNode(true);
+        const slots = clone.querySelectorAll('slot');
+        // Deep clone the breadcrumb navigation and flatten its slots into the clone.
+        this.nav.querySelectorAll('slot').forEach((source, index) => {
+            const target = slots[index];
+            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.
+        clone.querySelector('.menu').classList.remove('empty');
+        shadowRoot.append(clone);
+        // 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(item)));
+        // 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 (h("div", { role: "listitem" }, h("div", { class: "breadcrumb-item" }, h("post-menu-trigger", { for: menuId }, h("button", null, h("span", { class: "visually-hidden" }, this.textMoreItems), h("span", { "aria-hidden": "true" }, "...")))), h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, h("slot", null))));
+        return (h("div", { class: `breadcrumb-item menu ${this.collapsed === 0 && !this.homeCollapsed ? 'empty' : ''}`, role: "listitem" }, h("post-menu-trigger", { for: menuId }, h("button", null, h("span", { class: "visually-hidden" }, this.textMoreItems), h("span", { "aria-hidden": "true" }, "..."))), h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, this.homeCollapsed && this.usesHomeText && (h("post-menu-item", null, this.renderHomeContent())), h("slot", { name: "menu" }))));
+    }
+    /** Reused by the plain home item and the home menu — a slot can only be assigned once. */
+    renderHomeContent() {
+        return (h("slot", { name: "home", onSlotchange: () => this.checkSlottedHomeAnchor() }, h("a", { href: this.homeUrl }, h("span", { class: this.usesHomeText ? undefined : 'visually-hidden' }, this.textHome), !this.usesHomeText && h("post-icon", { "aria-hidden": "true", name: "home" }))));
+    }
+    /** Degrade stage 2: home renders in full, single-line, not yet collapsed. */
+    renderHome() {
+        return (h("div", { class: `breadcrumb-item home${this.usesHomeText ? '' : ' icon'}`, role: "listitem" }, this.renderHomeContent()));
     }
     render() {
-        return (h(Host, { key: '2640a012ada112396ea3c954cda45c7bfaf2968d', "data-version": version }, h("nav", { key: '397a017f326459c433e0f8fae5766badfad52e29', "aria-label": this.textBreadcrumbs }, h("div", { key: 'eb1d83aeb4aca599350918ba6be9df2a5ce86453', role: "list" }, h("div", { key: '217b359f3da4afc3ca8c28d8fc0d352f4198c9b1', class: "breadcrumb-item home", role: "listitem" }, h("a", { key: '1c2c3754bc0ef04e48ab95b5dad62e2d4cbb85e9', href: this.homeUrl }, h("span", { key: '15878d068a9901a2c7b4f6726e6962dc9158a86f', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '0d755bcc61c49ccd7944b4a9370198ed41ab1c34', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : h("slot", null), h("slot", { key: 'a0bafe06eab2346ea12bd00aec40c91b5e5347d0', name: "selected" })))));
+        if (this.loaded) {
+            const items = this.host.querySelectorAll('post-breadcrumb-item');
+            this.updateItems(items, this.collapsed, this.lastItemWraps);
+        }
+        return (h(Host, { key: '8d5f457a7c6a2df0cfaf5c31f3ffc6937de76e57', "data-version": version, class: this.homeCollapsed && this.usesHomeText ? 'home-collapsed' : undefined }, h("nav", { key: 'ce3fd7ad69060dd6968afaad6170e27eee72682f', "aria-label": this.textBreadcrumbs, ref: el => (this.nav = el), class: this.loaded ? '' : 'loading' }, h("div", { key: '1c400c8c1e1b625203876cc9804936782a2202c6', role: "list" }, (!this.homeCollapsed || !this.usesHomeText) && this.renderHome(), this.renderMenu(), h("slot", { key: '5cf6618b487961c0e7d70637f5396d023660ec55' }), h("slot", { key: 'f4fb662d04d9966c76a22444844d692611472b2d', name: "selected" })))));
     }
     get host() { return getElement(this); }
 };
 __decorate([
-    Required(),
+    Required({ when: 'hasSlottedHomeAnchor', truthy: false }),
     Url()
 ], PostBreadcrumbs.prototype, "homeUrl", void 0);
 __decorate([
-    Required(),
+    Required({ when: 'hasSlottedHomeAnchor', truthy: false }),
     Type('string')
 ], PostBreadcrumbs.prototype, "textHome", void 0);
+__decorate([
+    Required(),
+    Type('boolean')
+], PostBreadcrumbs.prototype, "homeTextOnly", void 0);
 __decorate([
     Required(),
     Type('string')