@swisspost/design-system-components 10.0.0-next.66 → 10.0.0-next.68

package/dist/cjs/{post-breadcrumb-item_2.cjs.entry.js → post-breadcrumb-item.cjs.entry.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-YVR3WTTS.js');
-var _package = require('./package-Cixsn1Ql.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
-require('./environment-BQE9Unf_.js');
+var index = require('./index-Du1lKw8D.js');
+var _package = require('./package-DB6yM9Rp.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-B0Olgvgc.js');
 
 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}}`;
 
@@ -16,7 +15,7 @@ const PostBreadcrumbItem = class {
         try {
             this.validUrl = this.constructUrl(this.url);
         }
-        catch (error) {
+        catch {
             this.validUrl = undefined;
         }
     }
@@ -24,7 +23,7 @@ const PostBreadcrumbItem = class {
     constructUrl(value) {
         const hasBaseURL = /^https?:\/\//.test(String(this.url));
         if (typeof value === 'string') {
-            this.fullUrl = hasBaseURL ? value : `${window.location.origin}${value}`;
+            this.fullUrl = hasBaseURL ? value : `${globalThis.location.origin}${value}`;
             index$1.checkEmptyOrUrl(this, 'fullUrl');
             return this.fullUrl;
         }
@@ -43,8 +42,7 @@ const PostBreadcrumbItem = class {
         }
     }
     render() {
-        const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (index.h(index.Host, { key: '2d083dc9ebf3c47dce95f3f854a539afceb24102', "data-version": _package.version }, index.h("post-icon", { key: '40cdd5b85dc3f906d29d7b696264b2f7e8057034', name: "chevronright", class: "breadcrumb-item-icon" }), index.h(BreadcrumbTag, { key: '5b82e332db134788695888f57e6e1e7f0bf0ddf5', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, index.h("slot", { key: 'ee75b4bdd1580edf775bc9322f3a421622e157ab' }))));
+        return (index.h(index.Host, { key: '0e991f1d731e932884c1d03650fc9deb743df5ce', "data-version": _package.version }, index.h("post-icon", { key: '1a29e4d7a3c80a9a42dd3a63bea84b97bbe4f0a8', name: "chevronright", class: "breadcrumb-item-icon" }), this.validUrl ? (index.h("a", { class: "breadcrumb-item", href: this.validUrl, onKeyDown: event => this.handleKeyDown(event), "aria-label": this.label, "aria-description": this.description }, index.h("slot", null))) : (index.h("span", { class: "breadcrumb-item" }, index.h("slot", null)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -55,18 +53,4 @@ const PostBreadcrumbItem = class {
 };
 PostBreadcrumbItem.style = postBreadcrumbItemCss();
 
-const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item a{text-decoration:none}post-menu-item button,post-menu-item a{position:relative;display:flex;width:100%;align-items:center;padding:.5rem .75rem .5rem 1rem;gap:.75rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1rem;height:1rem;margin-block:.25rem}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:.75rem;gap:1rem}post-menu-item button post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem;margin:0}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:.8125rem}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}`;
-
-const PostMenuItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    connectedCallback() {
-        this.host.setAttribute('data-version', _package.version);
-    }
-    get host() { return index.getElement(this); }
-};
-PostMenuItem.style = postMenuItemCss();
-
 exports.post_breadcrumb_item = PostBreadcrumbItem;
-exports.post_menu_item = PostMenuItem;

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

@@ -1,11 +1,10 @@
 'use strict';
 
-var index = require('./index-YVR3WTTS.js');
-var _package = require('./package-Cixsn1Ql.js');
-var index$1 = require('./index-ChzLnSU8.js');
-require('./breakpoints-B81j4H4_.js');
+var index = require('./index-Du1lKw8D.js');
+var _package = require('./package-DB6yM9Rp.js');
+var index$1 = require('./index-qCzRmwgB.js');
+require('./breakpoints-B0Olgvgc.js');
 var debounce = require('./debounce-BsIBi_-2.js');
-require('./environment-BQE9Unf_.js');
 
 const postBreadcrumbsCss = () => `:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{position:absolute;height:0;overflow:hidden;white-space:nowrap;display:flex;flex-wrap:wrap}.hidden-items .hidden-breadcrumb-item{display:inline-flex;padding-inline-end:var(--post-device-spacing-gap-inline-4)}.hidden-items .hidden-breadcrumb-item:last-child{padding-inline-end:0;font-weight:var(--post-device-font-weight-bold)}.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 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}}li[aria-current=page] post-breadcrumb-item{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)}li[aria-current=page] post-breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
 
@@ -42,9 +41,6 @@ const PostBreadcrumbs = class {
     validateTextMoreItems() {
         index$1.checkRequiredAndType(this, 'textMoreItems', 'string');
     }
-    componentWillLoad() {
-        this.updateBreadcrumbItems();
-    }
     componentDidLoad() {
         this.validateHomeUrl();
         this.validateTextHome();
@@ -52,6 +48,9 @@ const PostBreadcrumbs = class {
         this.validateTextMoreItems();
         window.addEventListener('resize', this.handleResize);
         this.waitForBreadcrumbsRef();
+        requestAnimationFrame(() => {
+            this.updateBreadcrumbItems();
+        });
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleResize);
@@ -60,9 +59,11 @@ const PostBreadcrumbs = class {
     updateBreadcrumbItems() {
         this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
             text: item.textContent || '',
-            url: item.getAttribute('url') || '',
+            url: item.getAttribute('url') ?? undefined,
+            description: item.getAttribute('description') ?? undefined,
+            label: item.getAttribute('label') ?? undefined,
         }));
-        this.lastItem = this.breadcrumbItems[this.breadcrumbItems.length - 1];
+        this.lastItem = this.breadcrumbItems.at(-1);
     }
     // Determines parent width for concatenation logic
     getParentWidth() {
@@ -97,7 +98,7 @@ const PostBreadcrumbs = class {
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (index.h(index.Host, { key: '318567e919b1e1e114acaa57195d5123a75e0e4b', "data-version": _package.version }, index.h("nav", { key: '673a5f400ed5d80cde3d3d71b739284d8d4226b4', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, index.h("ol", { key: 'de6d8f6f9c5e5ca78f9dd4da1d84db04efda4457', class: "no-list breadcrumbs-list" }, index.h("li", { key: '89498e7c9e5faf88c5bc2afc7c8de829a592356a' }, index.h("a", { key: 'dcea8c2e7aaf60e8aedcf61a63bd7bc1869da0c3', href: this.homeUrl, class: "breadcrumb-link" }, index.h("span", { key: 'a314db08e5ce9efa8fe75aa860ecff3534316490', class: "visually-hidden" }, this.textHome), index.h("post-icon", { key: 'cd08855f88018c76b1cfebecddc0d469dc4c6b2d', name: "home", class: "home-icon" }))), this.isConcatenated ? (index.h("li", { class: "menu-trigger-wrapper" }, index.h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), index.h("div", { class: "actual-menu" }, index.h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
+        return (index.h(index.Host, { key: 'e0c191cf08f718b945336f38b6ecbb3d6a83eac9', "data-version": _package.version }, index.h("nav", { key: '6c964f85bbf21ec778a2224a1bb436a70e81cb74', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, index.h("ol", { key: '008ba1ddc449bab71450b2962e299f3f8b95efc4', class: "no-list breadcrumbs-list" }, index.h("li", { key: 'a0ba0adde27a4bf3fd85698df06f05ac2a78d659' }, index.h("a", { key: 'f9f6b3f8c2c7b3f497230e67e51b4b40952ae3b1', href: this.homeUrl, class: "breadcrumb-link" }, index.h("span", { key: 'a42bae931167f02bc811b30564b07444156365ed', class: "visually-hidden" }, this.textHome), index.h("post-icon", { key: '87715337fd5be2df0eabb4f3f6d346d2265379a1', name: "home", class: "home-icon" }))), this.isConcatenated ? (index.h("li", { class: "menu-trigger-wrapper" }, index.h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), index.h("div", { class: "actual-menu" }, index.h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -108,7 +109,7 @@ const PostBreadcrumbs = class {
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? index.h("a", { href: item.url }, item.text) : index.h("span", null, item.text)))))))) : (visibleItems.map(item => (index.h("li", null, index.h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text))))), this.lastItem && (index.h("li", { key: '0c7bec7b0468bd025739f83e49ec4c705b84ff5f', "aria-current": "page" }, index.h("post-breadcrumb-item", { key: '4f241748849a7a0bd108a082606ee6f9851ea346', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), index.h("div", { key: '459d049cf7cbafacc5b45bdb4314faf3e432b073', class: "hidden-items" }, index.h("a", { key: '2607b06fa06d7b1137b5c34e65ca0b6427f8f912', href: this.homeUrl, class: "hidden-breadcrumb-item" }, index.h("span", { key: '856d00be8da22e7b8c326828a074377e33d1ddff', class: "visually-hidden" }, this.textHome), index.h("post-icon", { key: '623bb4b66de721539936af7dd25a697a5ed3255e', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (index.h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? (index.h("a", { href: item.url, "aria-label": item.label, "aria-description": item.description }, item.text)) : (index.h("span", null, item.text))))))))) : (visibleItems.map(item => (index.h("li", null, index.h("post-breadcrumb-item", { url: item.url, label: item.label, description: item.description, key: item.url || item.text }, item.text))))), this.lastItem && (index.h("li", { key: '387d8fc4ad2811e069ffbcf120ba94455bf5b07c', "aria-current": "page" }, index.h("post-breadcrumb-item", { key: '177e3b88bf0fd96238070d7459da65b66667a488', url: this.lastItem.url, label: this.lastItem.label, description: this.lastItem.description, tabindex: -1 }, this.lastItem.text)))), index.h("div", { key: 'e30956ea858da56e2142785f0c1a49ddf071e1ff', class: "hidden-items" }, index.h("a", { key: 'a4e487d2c27beabe77277644eb1d22d5f49d92d5', href: this.homeUrl, class: "hidden-breadcrumb-item" }, index.h("span", { key: '836d18e95f7cffdaad3cbdd22a6f25887574c071', class: "visually-hidden" }, this.textHome), index.h("post-icon", { key: 'bed3f5e92820965e0b5f33a037f67d058ac20e50', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (index.h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, label: item.label, description: item.description, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {