@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

package/dist/collection/utils/breakpoints.js

@@ -1,9 +1,10 @@
 export class Breakpoint {
+    breakpointMap;
+    current = {
+        key: '',
+        name: '',
+    };
     constructor() {
-        this.current = {
-            key: '',
-            name: '',
-        };
         if (!this.breakpointMap) {
             const styles = getComputedStyle(document.documentElement);
             const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
@@ -26,13 +27,15 @@ export class Breakpoint {
         const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
         if (this.current.key !== calculated.key) {
             this.current.key = calculated.key;
-            if (emitEvents)
+            if (emitEvents) {
                 this.dispatchEvent('key');
+            }
         }
         if (this.current.name !== calculated.name) {
             this.current.name = calculated.name;
-            if (emitEvents)
+            if (emitEvents) {
                 this.dispatchEvent('name');
+            }
         }
     }
     dispatchEvent(type) {

package/dist/collection/utils/component-on-ready.js

@@ -2,7 +2,7 @@
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-export const componentOnReady = (el) => {
+export function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -11,10 +11,10 @@ export const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+function customOnReady(callback) {
     if (typeof requestAnimationFrame === 'function') {
         return requestAnimationFrame(callback);
     }
     return setTimeout(callback);
-};
+}

package/dist/collection/utils/debounce.js

@@ -1,8 +1,9 @@
 export function debounce(callback, timeout = 200) {
     let id;
     return (...args) => {
-        if (id)
+        if (id) {
             clearTimeout(id);
+        }
         id = setTimeout(callback, timeout, ...args);
     };
 }

package/dist/collection/utils/get-focusable-children.js

@@ -22,6 +22,6 @@ const focusDisablingSelector = `:where(${[
     'details:not([open]) > *:not(details > summary:first-of-type) *',
     '[tabindex^="-"]',
 ].join(',')})`;
-export const getFocusableChildren = (element) => {
+export function getFocusableChildren(element) {
     return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
-};
+}

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -1,4 +1,5 @@
 export function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
+    if (!possibleValues.includes(value)) {
         throw new Error(error);
+    }
 }

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -1,4 +1,5 @@
 export function checkPattern(value, pattern, errorMessage) {
-    if (typeof value !== 'string' || !pattern.test(value))
+    if (typeof value !== 'string' || !pattern.test(value)) {
         throw new Error(errorMessage);
+    }
 }

package/dist/collection/utils/property-checkers/check-type.js

@@ -2,11 +2,11 @@ export function checkType(value, type, error) {
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
+        if (valueIsArray !== typeIsArray) {
             throw new Error(error);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(error);
     }
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -1,6 +1,7 @@
 export function checkUrl(value, error) {
-    if (typeof value !== 'string' && !(value instanceof URL))
+    if (typeof value !== 'string' && !(value instanceof URL)) {
         throw new Error(error);
+    }
     try {
         new URL(value);
     }

package/dist/collection/utils/property-checkers/empty-or.js

@@ -2,7 +2,8 @@ import { EMPTY_VALUES } from "./constants";
 export function emptyOr(check) {
     return (...args) => {
         const value = args[0];
-        if (!EMPTY_VALUES.some(v => v === value))
+        if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
+        }
     };
 }

package/dist/collection/utils/sass-export.js

@@ -2,11 +2,14 @@ export function parse(scss) {
     return Object.entries(scss).reduce((object, [path, value]) => {
         let output = object;
         path.split('_').forEach((key, i, values) => {
-            const pathKey = key;
-            const normalized = /^\[.*\]$/.test(value) ? JSON.parse(value) : value;
-            const pathValue = i >= values.length - 1 ? normalized : output[pathKey] || {};
-            output[pathKey] = pathValue;
-            output = output[pathKey];
+            const normalized = /^\[.*\]$/.test(value)
+                ? JSON.parse(value)
+                : value;
+            const pathValue = i >= values.length - 1 ? normalized : output[key] || {};
+            output[key] = pathValue;
+            if (i < values.length) {
+                output = output[key];
+            }
         });
         return object;
     }, {});

package/dist/components/index.js

@@ -1,35 +1,36 @@
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { P as PostAccordion } from './post-accordion2.js';
-export { P as PostAccordionItem } from './post-accordion-item2.js';
-export { P as PostAvatar } from './post-avatar2.js';
-export { P as PostBackToTop } from './post-back-to-top2.js';
-export { P as PostBanner } from './post-banner2.js';
-export { P as PostBreadcrumb } from './post-breadcrumb2.js';
-export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
-export { P as PostCardControl } from './post-card-control2.js';
-export { P as PostClosebutton } from './post-closebutton2.js';
-export { P as PostCollapsible } from './post-collapsible2.js';
-export { P as PostCollapsibleTrigger } from './post-collapsible-trigger2.js';
-export { P as PostFooter } from './post-footer2.js';
-export { P as PostHeader } from './post-header2.js';
-export { P as PostIcon } from './post-icon2.js';
-export { P as PostLanguageOption } from './post-language-option2.js';
-export { P as PostLanguageSwitch } from './post-language-switch2.js';
-export { P as PostList } from './post-list2.js';
-export { P as PostListItem } from './post-list-item2.js';
-export { P as PostLogo } from './post-logo2.js';
-export { P as PostMainnavigation } from './post-mainnavigation2.js';
-export { P as PostMegadropdown } from './post-megadropdown2.js';
-export { P as PostMegadropdownTrigger } from './post-megadropdown-trigger2.js';
-export { P as PostMenu } from './post-menu2.js';
-export { P as PostMenuItem } from './post-menu-item2.js';
-export { P as PostMenuTrigger } from './post-menu-trigger2.js';
-export { P as PostPopover } from './post-popover2.js';
-export { P as PostPopovercontainer } from './post-popovercontainer2.js';
-export { P as PostRating } from './post-rating2.js';
-export { P as PostTabs } from './post-tabs2.js';
-export { P as PostTabHeader } from './post-tab-header2.js';
-export { P as PostTabPanel } from './post-tab-panel2.js';
-export { P as PostTag } from './post-tag2.js';
-export { P as PostTogglebutton } from './post-togglebutton2.js';
-export { P as PostTooltip } from './post-tooltip2.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3e8554e7.js';
+export { P as PostAccordion } from './p-a3a004e6.js';
+export { P as PostAccordionItem } from './p-68ecd276.js';
+export { P as PostAvatar } from './p-d3fb70af.js';
+export { P as PostBackToTop } from './p-e20366a6.js';
+export { P as PostBanner } from './p-4965cfe1.js';
+export { P as PostBreadcrumb } from './p-146677d1.js';
+export { P as PostBreadcrumbItem } from './p-c7c1d466.js';
+export { P as PostCardControl } from './p-38778a14.js';
+export { P as PostClosebutton } from './p-bf14d264.js';
+export { P as PostCollapsible } from './p-b018d864.js';
+export { P as PostCollapsibleTrigger } from './p-05590ac0.js';
+export { P as PostFooter } from './p-58878996.js';
+export { P as PostHeader } from './p-424d5ea9.js';
+export { P as PostIcon } from './p-91031e3b.js';
+export { P as PostLanguageOption } from './p-d47bb5bf.js';
+export { P as PostLanguageSwitch } from './p-f6d80d76.js';
+export { P as PostLinkarea } from './p-5653923a.js';
+export { P as PostList } from './p-536eba02.js';
+export { P as PostListItem } from './p-9e4b1f10.js';
+export { P as PostLogo } from './p-5f51ec58.js';
+export { P as PostMainnavigation } from './p-1ee1742f.js';
+export { P as PostMegadropdown } from './p-46a6c5ec.js';
+export { P as PostMegadropdownTrigger } from './p-27edc023.js';
+export { P as PostMenu } from './p-91882483.js';
+export { P as PostMenuItem } from './p-ccccf0c3.js';
+export { P as PostMenuTrigger } from './p-8b053fd5.js';
+export { P as PostPopover } from './p-af23f7de.js';
+export { P as PostPopovercontainer } from './p-60cf53cc.js';
+export { P as PostRating } from './p-fc59de7c.js';
+export { P as PostTabs } from './p-ce854a7d.js';
+export { P as PostTabHeader } from './p-75b8b652.js';
+export { P as PostTabPanel } from './p-78e1d893.js';
+export { P as PostTag } from './p-cab43cee.js';
+export { P as PostTogglebutton } from './p-3cee636a.js';
+export { P as PostTooltip } from './p-2d9b46b4.js';

package/dist/components/{post-collapsible-trigger2.js → p-05590ac0.js}

@@ -1,32 +1,23 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-import { d as debounce } from './debounce.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkType } from './p-8562c7dc.js';
+import { c as checkNonEmpty } from './p-b095519d.js';
+import { d as debounce } from './p-e1baac59.js';
+import { g as getRoot } from './p-fc91cbc2.js';
 
-const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
+const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.observer = new MutationObserver(() => this.setTrigger());
-        this.debouncedUpdate = debounce(() => {
-            var _a;
-            if (!this.trigger)
-                return;
-            // add the provided id to the aria-controls list
-            const ariaControls = this.trigger.getAttribute('aria-controls');
-            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
-                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-                this.trigger.setAttribute('aria-controls', newAriaControls);
-            }
-            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
-            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
-        });
-        this.for = undefined;
     }
+    trigger;
+    observer = new MutationObserver(() => this.setTrigger());
+    root;
+    get host() { return this; }
+    /**
+     * Link the trigger to a post-collapsible with this id
+     */
+    for;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
@@ -74,12 +65,25 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     async update() {
         this.debouncedUpdate();
     }
+    debouncedUpdate = debounce(() => {
+        if (!this.trigger)
+            return;
+        // add the provided id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+        const isCollapsed = this.collapsible?.collapsed;
+        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+    });
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
     async toggleCollapsible() {
-        var _a;
-        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+        await this.collapsible?.toggle();
     }
     /**
      * Retrieve the post-collapsible controlled by the trigger
@@ -102,7 +106,6 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.trigger.addEventListener('click', () => this.toggleCollapsible());
         this.setAriaAttributes();
     }
-    get host() { return this; }
     static get watchers() { return {
         "for": ["setAriaAttributes"]
     }; }

package/dist/components/{post-breadcrumb2.js → p-146677d1.js}

@@ -1,45 +1,37 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkUrl } from './index2.js';
-import { d as debounce } from './debounce.js';
-import { d as defineCustomElement$6 } from './post-breadcrumb-item2.js';
-import { d as defineCustomElement$5 } from './post-icon2.js';
-import { d as defineCustomElement$4 } from './post-menu2.js';
-import { d as defineCustomElement$3 } from './post-menu-item2.js';
-import { d as defineCustomElement$2 } from './post-menu-trigger2.js';
-import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { b as checkUrl } from './p-eabb09ad.js';
+import { d as debounce } from './p-e1baac59.js';
+import { d as defineCustomElement$6 } from './p-c7c1d466.js';
+import { d as defineCustomElement$5 } from './p-91031e3b.js';
+import { d as defineCustomElement$4 } from './p-91882483.js';
+import { d as defineCustomElement$3 } from './p-ccccf0c3.js';
+import { d as defineCustomElement$2 } from './p-8b053fd5.js';
+import { d as defineCustomElement$1 } from './p-60cf53cc.js';
 
 const postBreadcrumbCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */: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-bottom: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:inherit;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}";
 const PostBreadcrumbStyle0 = postBreadcrumbCss;
 
-const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb extends HTMLElement {
+const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        // Waits for breadcrumb navigation reference to be available
-        this.waitForBreadcrumbRef = debounce(() => {
-            var _a;
-            if (((_a = this.breadcrumbNavRef) === null || _a === void 0 ? void 0 : _a.clientWidth) > 0) {
-                this.checkConcatenation();
-            }
-            else {
-                this.waitForBreadcrumbRef();
-            }
-        }, 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;
     }
+    get host() { return this; }
+    /**
+     * The URL for the home breadcrumb item.
+     */
+    homeUrl;
+    /**
+     * The text label for the home breadcrumb item.
+     */
+    homeText = 'Home';
+    breadcrumbItems = [];
+    isConcatenated;
+    lastWindowWidth;
+    breadcrumbNavRef;
+    lastItem;
     validateUrl() {
         checkUrl(this.homeUrl, 'The "url" property of the home-icon is invalid');
     }
@@ -53,6 +45,15 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleResize);
     }
+    // Waits for breadcrumb navigation reference to be available
+    waitForBreadcrumbRef = debounce(() => {
+        if (this.breadcrumbNavRef?.clientWidth > 0) {
+            this.checkConcatenation();
+        }
+        else {
+            this.waitForBreadcrumbRef();
+        }
+    }, 50);
     // Updates breadcrumb items and sets the last item
     updateBreadcrumbItems() {
         this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map((item) => ({
@@ -61,21 +62,27 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
         }));
         this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
     }
+    // Handles resizing to check concatenation
+    handleResize = () => {
+        if (window.innerWidth === this.lastWindowWidth)
+            return;
+        this.lastWindowWidth = window.innerWidth;
+        this.checkConcatenation();
+    };
     // Determines parent width for concatenation logic
     getParentWidth() {
         let parent = this.host.parentNode;
-        while (parent && !(parent instanceof HTMLElement)) {
+        while (parent && !(parent instanceof H)) {
             parent = parent.parentNode;
         }
-        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
+        return parent instanceof H ? parent.clientWidth : window.innerWidth;
     }
     checkConcatenation() {
-        var _a;
         if (!this.breadcrumbNavRef)
             return;
         const visibleWidth = this.getParentWidth();
         // Measure all hidden breadcrumb items
-        const hiddenItems = Array.from(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.hidden-breadcrumb-item')) || []);
+        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;
@@ -84,9 +91,10 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     }
     // Handles breadcrumb item click to open the menu
     handleBreadcrumbItemClick() {
-        var _a, _b;
         if (this.host.shadowRoot) {
-            const menuTrigger = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-trigger-wrapper')) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+            const menuTrigger = this.host.shadowRoot
+                ?.querySelector('.menu-trigger-wrapper')
+                ?.querySelector('button');
             if (menuTrigger) {
                 menuTrigger.click();
             }
@@ -94,7 +102,7 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '1baffcf05840127383931baec809e2b94e402e5e', "data-version": version }, h("nav", { key: 'c6725b8aa970f35f15f31ecc56280e7518b2dba9', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: (el) => (this.breadcrumbNavRef = el) }, h("ol", { key: '3166f345dde9f7003b23f5e7a1ddbe587b3fb4be', class: "no-list breadcrumbs-list" }, h("li", { key: '2efcbd6502cc5245ee63fd344a28c8aea4561cde' }, h("a", { key: 'b727c3d880ca9ebb7fc8527263a142662e4d42fd', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'd683d05bce032759aa224e7a36ef5d7fb3883187', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'f17d5f56a49f0525d64414c079968d80b0c7eca3', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: (e) => {
+        return (h(Host, { key: 'd24a602e1c84ec7227c44a02ac0bebcfe0358b89', "data-version": version }, h("nav", { key: '7ba77ead7ee58f141da4b3e38b11372312ddccf0', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: (el) => (this.breadcrumbNavRef = el) }, h("ol", { key: '210f747196e7450c25f088b258868adc4809e587', class: "no-list breadcrumbs-list" }, h("li", { key: '66627682df3f2a9879d037c1f1f0ed3633267590' }, h("a", { key: 'eb3f05c7badfb40f91aa8d961b4a3cca15946c6e', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'd4295523999fe7b0192d7d110e84f939b93be1a9', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'd77ed3f3b22acefd7675dbe94023a9763e7afac9', 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();
@@ -102,12 +110,11 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
             } }, 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 === null || linkElement === void 0 ? void 0 : linkElement.click();
+                    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: '674dd84e23c325f874f57b92b0171b47d600d463', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: 'b4131833874403a8166446991510a36003a21aed', class: "hidden-items" }, h("a", { key: 'aa31950651d486afdb97974c24929cc80e0c3f53', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'e9d1f5e225220a5942f8844dc26014f1278f935f', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '493a91739d10c3e536da52d636aca4b305f88273', 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)))))));
+            } }, 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: '602d2071f6077fa61782f87970c8e8756ad8c20d', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: 'e00662dad1d308e9791140acd85dbe34084adf34', class: "hidden-items" }, h("a", { key: '8d71359ec18220eaa83095750a1e0fb82e716238', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'c5231a0e4d392627bbc8df44016bd8336438a1fd', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '449f27766fb18df99f70cba07de7d5e861a25da6', 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)))))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "homeUrl": ["validateUrl"]
     }; }