npm - @swisspost/design-system-components - Versions diffs - 9.0.0-next.7 → 9.0.0-next.9 - Mend

@swisspost/design-system-components 9.0.0-next.7 → 9.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (363) hide show

package/dist/components/post-accordion-item2.js CHANGED Viewed

@@ -2,10 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkEmptyOrOneOf } from './index2.js';
-import { d as defineCustomElement$2 } from './post-collapsible2.js';
-import { d as defineCustomElement$1 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$3 } from './post-collapsible2.js';
+import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
-const postAccordionItemCss = ".accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item){--post-bg-opacity:1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item){--post-contrast-color:#000;--post-focus-color:#1976c8;--post-contrast-color-inverted:#fff;--post-gray-10:hsl(0, 0%, 90%);--post-gray-20:hsl(0, 0%, 80%);--post-gray-40:hsl(0, 0%, 60%);--post-gray-60:hsl(0, 0%, 40%);--post-gray-80:hsl(0, 0%, 20%);--post-yellow:#fc0;--post-white:#fff;--post-light:#faf9f8;--post-gray:#f4f3f1;--post-dark:hsl(0, 0%, 20%);--post-black:#000;--post-primary:hsl(0, 0%, 20%);--post-secondary:hsl(0, 0%, 40%);--post-success:#2c871d;--post-warning:#f49e00;--post-error:#a51728;--post-info:#cce4ee;--post-success-background:#c0debb;--post-warning-background:#fce2b2;--post-error-background:#ffdade;--post-contrast-color-rgb:0, 0, 0;--post-contrast-color-inverted-rgb:255, 255, 255;--post-gray-10-rgb:230, 230, 230;--post-gray-20-rgb:204, 204, 204;--post-gray-40-rgb:153, 153, 153;--post-gray-60-rgb:102, 102, 102;--post-gray-80-rgb:51, 51, 51;--post-black-alpha-10-rgba:rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba:rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba:rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba:rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba:rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba:rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba:rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba:rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba:rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba:rgba(255, 255, 255, 0.8);--post-yellow-rgb:255, 204, 0;--post-white-rgb:255, 255, 255;--post-light-rgb:250, 249, 248;--post-gray-rgb:244, 243, 241;--post-dark-rgb:51, 51, 51;--post-black-rgb:0, 0, 0;--post-primary-rgb:51, 51, 51;--post-secondary-rgb:102, 102, 102;--post-success-rgb:44, 135, 29;--post-warning-rgb:244, 158, 0;--post-error-rgb:165, 23, 40;--post-info-rgb:204, 228, 238;--post-success-background-rgb:192, 222, 187;--post-warning-background-rgb:252, 226, 178;--post-error-background-rgb:255, 218, 222}.accordion-item{border-block:2px solid #666;--post-bg-rgb:244, 243, 241}.bg-yellow .accordion-item{--post-bg-rgb:255, 255, 255}.bg-white .accordion-item{--post-bg-rgb:244, 243, 241}.bg-light .accordion-item{--post-bg-rgb:255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb:255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb:255, 255, 255}.bg-black .accordion-item{--post-bg-rgb:255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb:255, 255, 255}.bg-secondary .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error .accordion-item{--post-bg-rgb:255, 255, 255}.bg-info .accordion-item{--post-bg-rgb:255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb:255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb:255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;outline:none}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:400}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb:244, 243, 241}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-secondary post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb:255, 255, 255}:host(:not(:first-of-type)) .accordion-item{border-block-start:0}";
+const postAccordionItemCss = ":host::after{display:block;content:\"\";margin-top:calc(var(--post-device-border-width-default)*-1);border-bottom:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;bottom:auto;border-top:var(--post-accordion-button-border-top)}.accordion-button{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:var(--post-device-border-width-default) solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
 const PostAccordionItemStyle0 = postAccordionItemCss;
 const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
@@ -14,18 +15,19 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.__registerHost();
         this.__attachShadow();
         this.id = undefined;
+        this.slottedLogo = undefined;
         this.collapsed = false;
         this.headingLevel = undefined;
     }
     validateHeadingLevel(newValue = this.headingLevel) {
         checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
     componentWillLoad() {
         this.id = this.host.id || `a${crypto.randomUUID()}`;
     }
+    componentDidLoad() {
+        this.validateHeadingLevel();
+    }
     // capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
         if (event.target === this.host &&
@@ -39,10 +41,20 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     async toggle(force) {
         return this.collapsible.toggle(force);
     }
+    onSlotLogoChange() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    componentWillRender() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
     render() {
-        var _a;
-        const HeadingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
-        return (h(Host, { key: '3d2740ab4942832231737f1c26c075f37590bf53', id: this.id, "data-version": version }, h("div", { key: 'cba3f09d50db4ad285cc20a051763e7d843ab36d', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '87e7da5bfaee393fdf8423e8521448b976125daa', for: `${this.id}--collapse` }, h(HeadingTag, { key: '89d218bd032caddc6b484edab1f8d3d912c73c17', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '2f4597376234c64fec882ecdac76c2e3f541474c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}` }, h("slot", { key: '573e3a196c71548868698066c1220f56f5c39181', name: "header" })))), h("post-collapsible", { key: '6e07f4dfe240e52aad4d8e7b176ca2ec9476d605', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'f7f10770fbd1ae6ac867fb1ff255a303fd42c461', class: "accordion-body" }, h("slot", { key: 'dc0d49c7484481b57e7665e25761c425db3247b4' }))))));
+        var _a, _b;
+        const headingLevel = (_a = this.host.closest('post-accorddion')) === null || _a === void 0 ? void 0 : _a.getAttribute('heading-level');
+        const HeadingTag = `h${(_b = headingLevel !== null && headingLevel !== void 0 ? headingLevel : this.headingLevel) !== null && _b !== void 0 ? _b : 2}`;
+        return (h(Host, { key: 'e11a8ce9df85f6813f152433d0b5526668415953', id: this.id, "data-version": version }, h("div", { key: 'd62b7f758fca1ffbcef7c6f29b3a0ce48ded9749', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '492458d3cda61325d931a83be1f1be1f98f63301', for: `${this.id}--collapse` }, h(HeadingTag, { key: '1a4bc90415504cd00a65922ff5e61221c8368eea', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'c14154955c74a4482cc197aca95297ae29ef066f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '112810b9df4a73bc02a46a98ba2d0ce069168c7c', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, h("slot", { key: '67e72b84363597fc0e239baccb533b9083251a6b', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '3e9a2b38f621990cabfa84431ca8a7fd39087c88', name: "header" }), h("post-icon", { key: 'e8337b48394b9357b62e517c3b066dfa1bb5f5d7', name: "2051" })))), h("post-collapsible", { key: 'ca23a5a9a8b1615dc4352223a3135514ea5f279a', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '668805a03a3ee2facee60ecba0fa549edf0cecba', class: "accordion-body", part: "body" }, h("slot", { key: '3ddf282a59dad61dcd093c11a23f33635c9162d1' }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -53,6 +65,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         "collapsed": [1028],
         "headingLevel": [2, "heading-level"],
         "id": [32],
+        "slottedLogo": [32],
         "toggle": [64]
     }, [[2, "postToggle", "onCollapseToggle"]], {
         "headingLevel": ["validateHeadingLevel"]
@@ -61,7 +74,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger"];
+    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "post-accordion-item":
             if (!customElements.get(tagName)) {
@@ -70,10 +83,15 @@ function defineCustomElement() {
             break;
         case "post-collapsible":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/post-accordion2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkOneOf } from './check-one-of.js';
-const postAccordionCss = ":host{display:block}";
+const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-top:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
 const PostAccordionStyle0 = postAccordionCss;
 const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {

package/dist/components/post-back-to-top.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface PostBackToTop extends Components.PostBackToTop, HTMLElement {}
+export const PostBackToTop: {
+    prototype: PostBackToTop;
+    new (): PostBackToTop;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-back-to-top.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { P as PostBackToTop$1, d as defineCustomElement$1 } from './post-back-to-top2.js';
+const PostBackToTop = PostBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+export { PostBackToTop, defineCustomElement };

package/dist/components/post-back-to-top2.js ADDED Viewed

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as slideUp, a as slideDown } from './slide.js';
+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 defineCustomElement$1 } from './post-icon2.js';
+const postBackToTopCss = ":host{--post-floating-button-translate-y:calc(-1 * var(--post-core-dimension-112));position:fixed;top:var(--post-device-position-1);right:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const PostBackToTopStyle0 = postBackToTopCss;
+const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
+        this.label = undefined;
+        this.belowFold = false;
+    }
+    isBelowFold() {
+        return window.scrollY > window.innerHeight;
+    }
+    // Watch for changes in belowFold
+    watchBelowFold(newValue) {
+        if (newValue) {
+            slideUp(this.el, this.translateY);
+        }
+        else {
+            slideDown(this.el, this.translateY);
+        }
+    }
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+        });
+    }
+    // Validate the label
+    validateLabel() {
+        checkType(this.label, 'string', 'The label property of the Back to Top component is required for accessibility purposes. Please ensure it is set.');
+        checkNonEmpty(this.label, 'The label property of the Back to Top component must not be empty. Please provide a proper text for the label');
+    }
+    // Set the initial state
+    componentWillLoad() {
+        this.belowFold = this.isBelowFold();
+    }
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll, false);
+        this.translateY = window
+            .getComputedStyle(this.el)
+            .getPropertyValue('--post-floating-button-translate-y');
+        if (!this.belowFold) {
+            this.el.style.transform = `translateY(${this.translateY})`;
+        }
+        // Initial load
+        if (this.belowFold) {
+            slideUp(this.el, this.translateY);
+        }
+        this.validateLabel();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+    render() {
+        return (h(Host, { key: '92d56ff9055c2af38ae47b28c3af20771eed9a39', "data-version": version }, h("button", { key: 'ae305dd5b5a3f8d97553945e547ad45e824e6b7d', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '37792f99d6ef79df4260f6ad1c5780e545f7870a', "aria-hidden": "true", name: "3026" }), h("span", { key: '8768101a26e259c2bd0695a97e6bb4077ad31ae6', class: "visually-hidden" }, this.label))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "belowFold": ["watchBelowFold"],
+        "label": ["validateLabel"]
+    }; }
+    static get style() { return PostBackToTopStyle0; }
+}, [1, "post-back-to-top", {
+        "label": [1],
+        "belowFold": [32]
+    }, undefined, {
+        "belowFold": ["watchBelowFold"],
+        "label": ["validateLabel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-back-to-top", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-back-to-top":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBackToTop);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { PostBackToTop as P, defineCustomElement as d };

package/dist/components/post-banner2.js CHANGED Viewed

@@ -69,14 +69,14 @@ const PostBanner = /*@__PURE__*/ proxyCustomElement(class PostBanner extends HTM
     }
     render() {
         const defaultBannerContent = [
-            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: '3fb76153e81b56bf69a5163bcbfce24686524190', name: "heading" }))),
+            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: '7c03020bf287d48d71b31a7ae1d973ec0094d0f8', name: "heading" }))),
             h("slot", { key: `${this.bannerId}-message` }),
         ];
         const actionBannerContent = [
             h("div", { key: `${this.bannerId}-content`, class: "banner-content" }, defaultBannerContent),
-            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '0c25933ee7f2c90bb5f547878569b45ae33a2991', name: "actions" })),
+            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: 'e7a4fca1de6d984560ab46c87c9406e567b482f9', name: "actions" })),
         ];
-        return (h(Host, { key: 'c25f656224071310134d417ba13a6fce9a9cdd48', "data-version": version }, h("div", { key: '168b35ebf3530ad88f33dde2cee9c8b3670eef55', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '81875aa33c3922f888c779150bf023e75d0787c8', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: 'e45dd23c0309f9622cf5c2fcd6648a44d3fc4c8f', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
+        return (h(Host, { key: '58fcfe2258e5d5426c713864af729b046c9ed678', "data-version": version }, h("div", { key: '0c54f8b1ece142fd9cd3d071cf36fde2dc5e1d08', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '8e1c32b63a39605ad15c550f4cd55ebb5630e4fe', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: 'cea941fe2637f3cabb5889875ca12d6f9818e636', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-breadcrumb-item2.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { b as checkEmptyOrUrl } from './index2.js';
+import { d as checkEmptyOrUrl } from './index2.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
-const postBreadcrumbItemCss = ":host{display:inline-block}:host{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item{display:inline-flex;align-items:center;justify-content:center;padding-block:var(--post-device-spacing-padding-block-7);gap:var(--post-device-spacing-gap-inline-5);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item post-icon{height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}@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}}";
+const postBreadcrumbItemCss = ":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}}";
 const PostBreadcrumbItemStyle0 = postBreadcrumbItemCss;
 const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbItem extends HTMLElement {
@@ -36,9 +36,19 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     connectedCallback() {
         this.validateUrl();
     }
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Enter' || event.key === ' ') {
+            const linkElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+            if (linkElement) {
+                event.preventDefault();
+                linkElement.click();
+            }
+        }
+    }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '186e843c0679eebaa10e3c4b100460be4759e1c7', "data-version": version }, h(BreadcrumbTag, Object.assign({ key: '3fd5173cd3b9222a9541781e78d760988e854886', class: "breadcrumb-item" }, (this.validUrl ? { href: this.validUrl } : {})), h("post-icon", { key: '7df175644667e7f26582ea74ae27fdaf873f6f9d', name: "2111", class: "breadcrumb-item-icon" }), h("slot", { key: 'd59da7c93a49374440d5e84e904515466fc86eac' }))));
+        return (h(Host, { key: 'b64295c6b59c2e200fe0eae5483e60b733f5eb8c', "data-version": version }, h("post-icon", { key: '0e8a0712f03b551206e8cfeef51446f318d60f20', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, Object.assign({ key: 'd3e218f0b3b8feab97cbce6a8190dcddc0b92c92', class: "breadcrumb-item" }, (this.validUrl ? { href: this.validUrl } : {}), { onKeyDown: (event) => this.handleKeyDown(event) }), h("slot", { key: 'dea5990614b38fcaab1fae46aafa6c2ed652cf9a' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-breadcrumb.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface PostBreadcrumb extends Components.PostBreadcrumb, HTMLElement {}
+export const PostBreadcrumb: {
+    prototype: PostBreadcrumb;
+    new (): PostBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-breadcrumb.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { P as PostBreadcrumb$1, d as defineCustomElement$1 } from './post-breadcrumb2.js';
+const PostBreadcrumb = PostBreadcrumb$1;
+const defineCustomElement = defineCustomElement$1;
+export { PostBreadcrumb, defineCustomElement };

package/dist/components/post-breadcrumb2.js ADDED Viewed

@@ -0,0 +1,168 @@
+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';
+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 {
+    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;
+    }
+    validateUrl() {
+        checkUrl(this.homeUrl, 'The "url" property of the home-icon is invalid');
+    }
+    componentWillLoad() {
+        this.updateBreadcrumbItems();
+    }
+    componentDidLoad() {
+        window.addEventListener('resize', this.handleResize);
+        this.waitForBreadcrumbRef();
+    }
+    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() {
+        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 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() {
+        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');
+            if (menuTrigger) {
+                menuTrigger.click();
+            }
+        }
+    }
+    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) => {
+                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 === null || linkElement === void 0 ? void 0 : 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)))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "homeUrl": ["validateUrl"]
+    }; }
+    static get style() { return PostBreadcrumbStyle0; }
+}, [1, "post-breadcrumb", {
+        "homeUrl": [1, "home-url"],
+        "homeText": [1, "home-text"],
+        "breadcrumbItems": [32],
+        "isConcatenated": [32],
+        "lastWindowWidth": [32]
+    }, undefined, {
+        "homeUrl": ["validateUrl"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-breadcrumb", "post-breadcrumb-item", "post-icon", "post-menu", "post-menu-item", "post-menu-trigger", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBreadcrumb);
+            }
+            break;
+        case "post-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { PostBreadcrumb as P, defineCustomElement as d };