@swisspost/design-system-components 9.0.0 → 10.0.0-next.37

package/dist/collection/components/{post-alert/post-alert.js → post-banner/post-banner.js}

@@ -1,66 +1,59 @@
-import { h, Host, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { version } from "../../../../package";
 import { fadeOut } from "../../animations/index";
 import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from "../../utils/index";
-import { ALERT_TYPES } from "./alert-types";
+import { BANNER_TYPES } from "./banner-types";
+import { nanoid } from "nanoid";
 /**
- * @slot heading - Slot for placing custom content within the alert's heading.
- * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the alert.
- * @slot default - Slot for placing the main content/message of the alert.
+ * @slot heading - Slot for placing custom content within the banner's heading.
+ * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
+ * @slot default - Slot for placing the main content/message of the banner.
  */
-export class PostAlert {
+export class PostBanner {
     constructor() {
-        this.alertId = crypto.randomUUID();
+        this.bannerId = `p${nanoid(6)}`;
         this.classes = undefined;
         this.hasActions = undefined;
         this.hasHeading = undefined;
         this.onDismissButtonClick = () => this.dismiss();
         this.dismissible = false;
         this.dismissLabel = undefined;
-        this.fixed = false;
         this.icon = undefined;
-        this.type = 'primary';
+        this.type = 'neutral';
     }
-    validateDismissible(isDismissible = this.dismissible) {
-        checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
+    validateDismissible() {
+        checkType(this, 'dismissible', 'boolean');
         setTimeout(() => this.validateDismissLabel());
     }
-    validateDismissLabel(dismissLabel = this.dismissLabel) {
+    validateDismissLabel() {
         if (this.dismissible) {
-            checkNonEmpty(dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
+            checkNonEmpty(this, 'dismissLabel', 'Dismissible post-banner\'s require a "dismiss-label" prop.');
         }
     }
-    validateFixed(isFixed = this.fixed) {
-        checkType(isFixed, 'boolean', 'The post-alert "fixed" prop should be a boolean.');
+    validateIcon() {
+        checkEmptyOrPattern(this, 'icon', /\d{4}|none/, 'The post-banner "icon" prop should be a 4-digit string.');
     }
-    validateIcon(icon = this.icon) {
-        checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-alert "icon" prop should be a 4-digits string.');
-    }
-    validateType(type = this.type) {
-        checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
+    validateType() {
+        checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
     componentDidLoad() {
         this.validateDismissible();
-        this.validateFixed();
         this.validateIcon();
         this.validateType();
     }
     componentWillRender() {
-        var _a;
         this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
         this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
-        this.classes = `alert alert-${(_a = this.type) !== null && _a !== void 0 ? _a : 'primary'}`;
+        this.classes = `banner ${this.type ? 'banner-' + this.type : ''}`;
         if (this.dismissible)
-            this.classes += ' alert-dismissible';
+            this.classes += ' banner-dismissible';
         if (this.hasActions)
-            this.classes += ' alert-action';
-        if (this.fixed)
-            this.classes += ' alert-fixed-bottom';
+            this.classes += ' banner-action';
         if (this.icon === 'none')
             this.classes += ' no-icon';
     }
     /**
-     * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+     * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
      */
     async dismiss() {
         const dismissal = fadeOut(this.host);
@@ -69,26 +62,26 @@ export class PostAlert {
         this.postDismissed.emit();
     }
     render() {
-        const defaultAlertContent = [
-            this.hasHeading && (h("div", { key: `${this.alertId}-heading`, class: "alert-heading" }, h("slot", { key: 'a3404eee0322cc2b50125bf4ca08969e33d15763', name: "heading" }))),
-            h("slot", { key: `${this.alertId}-message` }),
+        const defaultBannerContent = [
+            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: 'd4b29e3591f026b880c4b859a47bcbc3e3b11ced', name: "heading" }))),
+            h("slot", { key: `${this.bannerId}-message` }),
         ];
-        const actionAlertContent = [
-            h("div", { key: `${this.alertId}-content`, class: "alert-content" }, defaultAlertContent),
-            h("div", { key: `${this.alertId}-buttons`, class: "alert-buttons" }, h("slot", { key: '50941abd468008cd58a1e05577243d1046a0e20e', name: "actions" })),
+        const actionBannerContent = [
+            h("div", { key: `${this.bannerId}-content`, class: "banner-content" }, defaultBannerContent),
+            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '2f1461a2374d736cb3b72641aa150bc611082f56', name: "actions" })),
         ];
-        return (h(Host, { key: '99c1e3b4cc943d8be2d5abe7b2b27dce03548d15', "data-version": version }, h("div", { key: 'a290771bcc1234684502f524fe6e7e44501fc004', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '57c9cdbec53430b0fc6e121b5928bb14b86c37e0', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: '82d59b6deb736b4053b2b0876c87456c160928ee', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.alertId}-icon`, name: this.icon })), this.hasActions ? actionAlertContent : defaultAlertContent)));
+        return (h(Host, { key: 'ec72012fa82e03b0dca2368025449e1942731c21', "data-version": version }, h("div", { key: 'acae7ac34af951ca9176769ab4bcdc388d769931', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '23cc4d77c2825bc76cedcdc321b80b9b0f333e71', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: '2f0753d49fc86f19df743f33a086c14b2a0686f7', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
     }
-    static get is() { return "post-alert"; }
+    static get is() { return "post-banner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["post-alert.scss"]
+            "$": ["post-banner.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["post-alert.css"]
+            "$": ["post-banner.css"]
         };
     }
     static get properties() {
@@ -105,7 +98,7 @@ export class PostAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, a close button (\u00D7) is displayed and the alert can be dismissed by the user."
+                    "text": "If `true`, a close button (\u00D7) is displayed and the banner can be dismissed by the user."
                 },
                 "attribute": "dismissible",
                 "reflect": false,
@@ -123,29 +116,11 @@ export class PostAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label to use for the close button of a dismissible alert."
+                    "text": "The label to use for the close button of a dismissible banner."
                 },
                 "attribute": "dismiss-label",
                 "reflect": false
             },
-            "fixed": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the alert is positioned at the bottom of the window, from edge to edge."
-                },
-                "attribute": "fixed",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -158,7 +133,7 @@ export class PostAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The icon to display in the alert. By default, the icon depends on the alert type.\n\nIf `none`, no icon is displayed."
+                    "text": "The icon to display in the banner. By default, the icon depends on the banner type.\n\nIf `none`, no icon is displayed."
                 },
                 "attribute": "icon",
                 "reflect": false
@@ -167,13 +142,13 @@ export class PostAlert {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "AlertType",
-                    "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "original": "BannerType",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                     "references": {
-                        "AlertType": {
+                        "BannerType": {
                             "location": "import",
-                            "path": "./alert-types",
-                            "id": "src/components/post-alert/alert-types.ts::AlertType"
+                            "path": "./banner-types",
+                            "id": "src/components/post-banner/banner-types.ts::BannerType"
                         }
                     }
                 },
@@ -181,17 +156,17 @@ export class PostAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The type of the alert."
+                    "text": "The type of the banner."
                 },
                 "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'primary'"
+                "defaultValue": "'neutral'"
             }
         };
     }
     static get states() {
         return {
-            "alertId": {},
+            "bannerId": {},
             "classes": {},
             "hasActions": {},
             "hasHeading": {},
@@ -207,7 +182,7 @@ export class PostAlert {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted when the alert element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible alerts."
+                    "text": "An event emitted when the banner element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible banners."
                 },
                 "complexType": {
                     "original": "void",
@@ -231,7 +206,7 @@ export class PostAlert {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Triggers alert dismissal programmatically (same as clicking on the close button (\u00D7)).",
+                    "text": "Triggers banner dismissal programmatically (same as clicking on the close button (\u00D7)).",
                     "tags": []
                 }
             }
@@ -245,9 +220,6 @@ export class PostAlert {
             }, {
                 "propName": "dismissLabel",
                 "methodName": "validateDismissLabel"
-            }, {
-                "propName": "fixed",
-                "methodName": "validateFixed"
             }, {
                 "propName": "icon",
                 "methodName": "validateIcon"

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

@@ -0,0 +1 @@
+:host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}

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

@@ -0,0 +1,96 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkEmptyOrUrl } from "../../utils/index";
+/**
+ * @slot default - Slot for placing the text inside the breadcrumb item.
+ */
+export class PostBreadcrumbItem {
+    constructor() {
+        this.url = undefined;
+        this.fullUrl = undefined;
+    }
+    validateUrl() {
+        try {
+            this.validUrl = this.constructUrl(this.url);
+        }
+        catch (error) {
+            this.validUrl = undefined;
+        }
+    }
+    // Helper to construct a valid URL string or return undefined
+    constructUrl(value) {
+        const hasBaseURL = /^https?:\/\//.test(String(this.url));
+        if (typeof value === 'string') {
+            this.fullUrl = hasBaseURL ? value : `${window.location.origin}${value}`;
+            checkEmptyOrUrl(this, 'fullUrl');
+            return this.fullUrl;
+        }
+        return undefined;
+    }
+    connectedCallback() {
+        this.validateUrl();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            const linkElement = this.host.shadowRoot?.querySelector('a');
+            if (linkElement) {
+                event.preventDefault();
+                linkElement.click();
+            }
+        }
+    }
+    render() {
+        const BreadcrumbTag = this.validUrl ? 'a' : 'span';
+        return (h(Host, { key: 'd0444118aa031f4cf6f5161d7aa21900e9768348', "data-version": version }, h("post-icon", { key: '719a76e6e86bbb02526c4610acefb3ad253454af', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3f5ffb9c77567dba35efa7938029cd519de55474', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'bb1be29905c1533f2238a47a346fb35d6a7645fd' }))));
+    }
+    static get is() { return "post-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-breadcrumb-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | URL",
+                    "resolved": "URL | string",
+                    "references": {
+                        "URL": {
+                            "location": "global",
+                            "id": "global::URL"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The optional URL to which the breadcrumb item will link."
+                },
+                "attribute": "url",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "fullUrl": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "url",
+                "methodName": "validateUrl"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-block-end:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:var(--post-scheme-color-surface-default-fg);line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item 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 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 a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item 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 a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}

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

@@ -0,0 +1,160 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkUrl, debounce } from "../../utils/index";
+export class PostBreadcrumbs {
+    constructor() {
+        // Waits for breadcrumbs navigation reference to be available
+        this.waitForBreadcrumbsRef = debounce(() => {
+            if (this.breadcrumbsNavRef?.clientWidth > 0) {
+                this.checkConcatenation();
+            }
+            else {
+                this.waitForBreadcrumbsRef();
+            }
+        }, 50);
+        // Handles resizing to check concatenation
+        this.handleResize = () => {
+            if (window.innerWidth === this.lastWindowWidth)
+                return;
+            this.lastWindowWidth = window.innerWidth;
+            this.checkConcatenation();
+        };
+        this.homeUrl = undefined;
+        this.homeText = 'Home';
+        this.breadcrumbItems = [];
+        this.isConcatenated = undefined;
+        this.lastWindowWidth = undefined;
+    }
+    validateUrl() {
+        checkUrl(this, 'homeUrl');
+    }
+    componentWillLoad() {
+        this.updateBreadcrumbItems();
+    }
+    componentDidLoad() {
+        window.addEventListener('resize', this.handleResize);
+        this.waitForBreadcrumbsRef();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    // Updates breadcrumb items and sets the last item
+    updateBreadcrumbItems() {
+        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
+            text: item.textContent || '',
+            url: item.getAttribute('url') || '',
+        }));
+        this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
+    }
+    // Determines parent width for concatenation logic
+    getParentWidth() {
+        let parent = this.host.parentNode;
+        while (parent && !(parent instanceof HTMLElement)) {
+            parent = parent.parentNode;
+        }
+        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
+    }
+    checkConcatenation() {
+        if (!this.breadcrumbsNavRef)
+            return;
+        const visibleWidth = this.getParentWidth();
+        // Measure all hidden breadcrumb items
+        const hiddenItems = Array.from(this.host.shadowRoot?.querySelectorAll('.hidden-breadcrumb-item') || []);
+        const totalWidth = hiddenItems.reduce((accum, element) => {
+            const rect = element.getBoundingClientRect();
+            return accum + rect.width;
+        }, 0);
+        this.isConcatenated = totalWidth > visibleWidth;
+    }
+    // Handles breadcrumb item click to open the menu
+    handleBreadcrumbItemClick() {
+        if (this.host.shadowRoot) {
+            const menuTrigger = this.host.shadowRoot
+                ?.querySelector('.menu-trigger-wrapper')
+                ?.querySelector('button');
+            if (menuTrigger) {
+                menuTrigger.click();
+            }
+        }
+    }
+    render() {
+        const visibleItems = this.breadcrumbItems.slice(0, -1);
+        return (h(Host, { key: 'f0c2507a02ea79059af1e4dfefce17ab04780fbe', "data-version": version }, h("nav", { key: '0307206eecadfa5a47ba88f9c17c72b88d26be5c', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '646809f73775f8cd74b6b97c21b7055569fa5f4c', class: "no-list breadcrumbs-list" }, h("li", { key: '15bd467366517f0b9a11e54dfdffc13a0b681f3c' }, h("a", { key: 'd05e860d2de60b740b77120f0745752ff1ec1d17', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3241f72e9fdc82e1521762d2fc47a6472366f722', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '2cdfdb5641b1ba459070b724e6578b842b8d90ae', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleBreadcrumbItemClick();
+                }
+            } }, h("post-icon", { name: "2111", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0 }, h("button", { class: "btn test", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu" }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    const linkElement = e.currentTarget.querySelector('a');
+                    linkElement?.click();
+                    e.preventDefault();
+                }
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '9820e7cc99072f16f9118e3783de126b1c65c51c', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '960f5784f11bd87e787722bd888cf91ec65329e1', class: "hidden-items" }, h("a", { key: '73dfb29ff5b45c6e3fe9a8f88abfde56fc9bb5e3', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'bf6be08c70fca37879312b2adbf2808d83599cf3', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '8c94c725dc315ac31187e079cb01def2891ac352', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+    }
+    static get is() { return "post-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "homeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL for the home breadcrumb item."
+                },
+                "attribute": "home-url",
+                "reflect": false
+            },
+            "homeText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label for the home breadcrumb item."
+                },
+                "attribute": "home-text",
+                "reflect": false,
+                "defaultValue": "'Home'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "breadcrumbItems": {},
+            "isConcatenated": {},
+            "lastWindowWidth": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "homeUrl",
+                "methodName": "validateUrl"
+            }];
+    }
+}