npm - @swisspost/design-system-components - Versions diffs - 10.0.0-next.50 → 10.0.0-next.52 - Mend

@swisspost/design-system-components 10.0.0-next.50 → 10.0.0-next.52

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 (208) hide show

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

@@ -71,7 +71,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'cdde276f07efb0916bb3b0cd7cf761788421e251', "data-version": version }, h("post-popovercontainer", { key: '06b4d472448d4083f717ce13e73ff9426f422ec4', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c5efcac53b6c0fa207ceee34ee86580c7566f8a8' }))));
+        return (h(Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": version }, h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
+const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
 const NAMESPACE = 'post-components';
 const BUILD = /* post-components */ { hydratedSelectorName: "data-hydrated", lazyLoad: false, slotRelocation: true, updatable: true};

package/dist/components/react/{p-CDsgZHvX.js → p-B35HsBxh.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 const PLACEMENT_TYPES = [
     'top',
@@ -1323,14 +1323,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1369,7 +1364,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1403,6 +1398,10 @@ function getDocumentRect(element) {
   };
 }
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1420,6 +1419,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -2728,8 +2745,12 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     constructor() {
         super();
         this.__registerHost();
+        this.postBeforeShow = createEvent(this, "postBeforeShow");
+        this.postShow = createEvent(this, "postShow");
+        this.postHide = createEvent(this, "postHide");
+        this.postBeforeToggle = createEvent(this, "postBeforeToggle");
         this.postToggle = createEvent(this, "postToggle");
-        this.firstOpen = true;
+        this.hasOpenedOnce = true;
         /**
          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
          * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
@@ -2783,36 +2804,79 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
+        this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     /**
      * Programmatically display the popovercontainer
-     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
         if (this.toggleTimeoutId)
             return;
         this.eventTarget = target;
+        if (this.toggleTimeoutId)
+            return;
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Handles the popover opening process and emits related events.
+     */
+    async open() {
+        const content = this.host.querySelector('.popover-content');
+        this.startAutoupdates();
+        if (content) {
+            const animation = popIn(content);
+            if (animation?.playState === 'running') {
+                this.postBeforeToggle.emit({ willOpen: true });
+                this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+            }
+            animation?.finished.then(() => {
+                this.postToggle.emit({ isOpen: true });
+                this.postShow.emit({ first: this.hasOpenedOnce });
+                if (this.hasOpenedOnce)
+                    this.hasOpenedOnce = false;
+            });
+        }
+        if (this.safeSpace) {
+            window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+        }
+    }
+    /**
+     * Handles the popover closing process and emits related events.
+     */
+    async close() {
+        if (typeof this.clearAutoUpdate === 'function') {
+            this.clearAutoUpdate();
+        }
+        if (this.safeSpace) {
+            window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+        }
+        this.postToggle.emit({ isOpen: false });
+        this.postHide.emit();
+    }
     /**
      * Programmatically hide the popovercontainer
      */
     async hide() {
         if (!this.toggleTimeoutId) {
+            if (this.eventTarget && this.eventTarget instanceof H) {
+                this.eventTarget.focus();
+            }
             this.eventTarget = null;
             this.host.hidePopover();
+            this.postHide.emit();
         }
     }
     /**
      * Toggle popovercontainer display
-     * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
+        this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
-            this.eventTarget = target;
             this.calculatePosition();
             this.host.togglePopover(force);
             this.toggleTimeoutId = null;
@@ -2829,27 +2893,11 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
         const isOpen = e.newState === 'open';
         if (isOpen) {
-            const content = this.host.querySelector('.popover-content');
-            this.startAutoupdates();
-            if (content && this.animation === 'pop-in') {
-                popIn(content);
-            }
-            if (this.safeSpace)
-                window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
-            // Emit event with `first` flag only true on the first open
-            if (this.firstOpen) {
-                this.postToggle.emit({ isOpen, first: this.firstOpen });
-                this.firstOpen = false;
-                return;
-            }
+            this.open();
         }
         else {
-            if (typeof this.clearAutoUpdate === 'function')
-                this.clearAutoUpdate();
-            if (this.safeSpace)
-                window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
+            this.close();
         }
-        this.postToggle.emit({ isOpen: isOpen, first: false });
     }
     /**
      * Start listening for DOM updates, scroll events etc. that have
@@ -2980,9 +3028,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
+        return (h(Host, { key: 'cdb25a25fbd5e411e380175a8d3789cec83e2755', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e99bcc4d5123b335b4b8be7044a80b2913ab6fce', class: "popover-content" }, this.arrow && (h("span", { key: '3c228829cc7e5bd83d7f1759ef163407ebcd10c5', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
+            } })), h("slot", { key: '6a213deed5ccfec47d4dee903c7544d30a3f5748' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2999,6 +3047,8 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "manualClose": [4, "manual-close"],
         "safeSpace": [513, "safe-space"],
         "show": [64],
+        "open": [64],
+        "close": [64],
         "hide": [64],
         "toggle": [64]
     }, undefined, {

package/dist/components/react/{p-BuKAaKXE.js → p-BL8WEb6K.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-BcVKzjda.js';
+import { d as defineCustomElement$1 } from './p-DnqwBx5e.js';
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
-const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
+const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
 const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton extends H {
     constructor() {

package/dist/components/react/p-BVXiQdHq.js ADDED Viewed

@@ -0,0 +1,64 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    return Array.from(focusableChildren).filter(isVisible);
+}
+// Searches deeper accross shadowDom
+function getDeepFocusableChildren(element) {
+    const results = [];
+    function traverse(node) {
+        if (isElementFocusable(node)) {
+            results.push(node);
+        }
+        if (node instanceof HTMLElement && node.shadowRoot) {
+            traverse(node.shadowRoot);
+        }
+        for (const child of Array.from(node.children)) {
+            traverse(child);
+        }
+        if (node instanceof HTMLElement) {
+            for (const slot of Array.from(node.querySelectorAll('slot'))) {
+                for (const el of slot.assignedElements({ flatten: true })) {
+                    traverse(el);
+                }
+            }
+        }
+    }
+    traverse(element);
+    return results;
+}
+function isVisible(el) {
+    const style = window.getComputedStyle(el.parentElement);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+}
+function isElementFocusable(node) {
+    return (node instanceof HTMLElement &&
+        node.matches(`${focusableSelector}:not(${focusDisablingSelector})`) &&
+        isVisible(node));
+}
+export { getDeepFocusableChildren as a, getFocusableChildren as g };

package/dist/components/react/{p-BmpB1vs4.js → p-By7jk8fL.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { e as checkEmptyOrType } from './p-CV7fm1rW.js';

package/dist/components/react/{p-BXPcgIqO.js → p-C4zJkcAb.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
-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:.5rem;font-size:.875rem;color:#050400;border-radius:0}post-menu-item button post-icon,post-menu-item a post-icon{width:1.25rem;height:1.25rem;margin:.125rem}@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.375rem;height:1.375rem;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 post-icon,post-menu-item a post-icon{width:1.5rem;height:1.5rem}}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 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 = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends H {
     constructor() {
@@ -9,7 +9,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '6b2c8542aed22132c627fadb6be036124e37853e', "data-version": version }, h("slot", { key: '8059cb5112270641ef7ba860cdacb2cdaa75fd59' })));
+        return (h(Host, { key: 'd37c4eed483b46dedcccbc835017ff2415dbd22e', "data-version": version }, h("slot", { key: 'e13d1f35e7883a0aee4d08ceb39caeb97fb960ec' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

package/dist/components/react/{p-U9MTjvRU.js → p-CQhnMei5.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
@@ -80,7 +80,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
+        return (h(Host, { key: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-BlOv-NDA.js → p-CrEdcwed.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
 import { n as nanoid } from './p-BLchVpF6.js';
-import { d as defineCustomElement$3 } from './p-BmpB1vs4.js';
-import { d as defineCustomElement$2 } from './p-B392lG2N.js';
-import { d as defineCustomElement$1 } from './p-BcVKzjda.js';
+import { d as defineCustomElement$3 } from './p-By7jk8fL.js';
+import { d as defineCustomElement$2 } from './p-lC8Sp5tg.js';
+import { d as defineCustomElement$1 } from './p-DnqwBx5e.js';
 const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.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-extra-black)}.accordion-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;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));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-device-border-width-default);border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.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,.accordion-button:focus-visible{color:Highlight}}.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}";
@@ -62,7 +62,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         return (h(Host, { key: 'b98847d19894430b6f65130aebf8673a45afd1e6', id: this.id, "data-version": version }, h("div", { key: 'f26f9d3a4a1f59db23b4698b321e28e112c3eed0', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '14bdacce04d67a03655f600feeaeec065e0fc198', for: `${this.id}--collapse` }, h(HeadingTag, { key: '7a07a70d172306ce37f8bd0143b21ed7ec0cab8a', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '5ad0698a62df5c4b2c0a77ff622090b20f348e9c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '6e5fcb0c9efa8a57e05fd162c72b9c170a8210c6', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '41a1409f723bf52de893324ce45d4e7f31eb8908', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '7186adfe4a4fe67f4dbaeb7569820d0d06c18428', name: "header" }), h("post-icon", { key: 'fbfcbdc9947a8c7cf80d861aba3a77be0dff91d1', name: "2051" })))), h("post-collapsible", { key: '5de19aab5eb0134b7c3e7f43e5c2da0cb8413908', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '5112ba8604ea177af4d88033f682c2a4cc6c4ffd', class: "accordion-body", part: "body" }, h("slot", { key: 'd70ab76842fced3f7dec812471685071e377bc61' }))))));
+            } }, h("slot", { key: '41a1409f723bf52de893324ce45d4e7f31eb8908', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '7186adfe4a4fe67f4dbaeb7569820d0d06c18428', name: "header" }), h("post-icon", { key: 'add240b0275b083c537efb28c4a2825ac22e1b47', name: "chevrondown" })))), h("post-collapsible", { key: '4231577c41c7633327c147d2b9adcd847ffc7261', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '3f3cea3f5468e35f658f7d143db32391fa5fe2f1', class: "accordion-body", part: "body" }, h("slot", { key: '013f6cc755a04b880d91513059e36bcc2be5f412' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-DnHwlsBi.js → p-Dl8clYLV.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$1 } from './p-BcVKzjda.js';
+import { d as defineCustomElement$1 } from './p-DnqwBx5e.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}}";
@@ -44,7 +44,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'e0c9479626737582764a4ecd55612d3d9ee4ae21', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '75f7b88edee2dda2907429c3c1ab55efe9e5137b', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: '1e59f84b6a9fd8b73372371e79fff43e44bd88c6' }))));
+        return (h(Host, { key: '9ccdcf67335a106fd70e1d756a941736827454c0', "data-version": version }, h("post-icon", { key: 'c2061015e34cc3c37d343abd872bd8bd3cc82615', name: "chevronright", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3e9659ac705d801699167864a06cde461bc84185', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'e86e3333db8b0636a9a9635a5f11960c7d839e3d' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/{p-B9Y7UQKI.js → p-DnhWNGb-.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 import { H as HEADING_LEVELS } from './p-r4txK0AC.js';
 import { b as checkRequiredAndOneOf } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';

package/dist/components/react/{p-BcVKzjda.js → p-DnqwBx5e.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './p-CV7fm1rW.js';
-import { v as version } from './p-DimG3b3P.js';
+import { v as version } from './p-kxuZ8mOU.js';
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";

package/dist/components/react/{p-Bw6vnK1I.js → p-Due3yZDR.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-CDsgZHvX.js';
-import { v as version } from './p-DimG3b3P.js';
-import { g as getFocusableChildren } from './p-C35MCWIp.js';
+import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './p-B35HsBxh.js';
+import { v as version } from './p-kxuZ8mOU.js';
+import { g as getFocusableChildren } from './p-BVXiQdHq.js';
 import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
 import { E as EventFrom } from './p-CzIKqBrS.js';
@@ -58,35 +58,32 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostToggle = (event) => {
+        this.handlePostShown = (event) => {
+            // Only for the first open
+            if (event.detail.first) {
+                // Add "menu" and "menuitem" aria roles and aria-label
+                this.host.setAttribute('role', 'menu');
+                const menuItems = this.getSlottedItems();
+                for (const item of menuItems) {
+                    item.setAttribute('role', 'menuitem');
+                }
+                if (this.label)
+                    this.host.setAttribute('aria-label', this.label);
+            }
+        };
+        this.handlePostToggled = (event) => {
             this.isVisible = event.detail.isOpen;
             this.toggleMenu.emit(this.isVisible);
-            requestAnimationFrame(() => {
-                if (this.isVisible) {
-                    this.lastFocusedElement = this.root?.activeElement;
-                    const menuItems = this.getSlottedItems();
-                    if (event.detail.first) {
-                        if (menuItems.length > 0) {
-                            // Add role="menu" to the popovercontainer
-                            this.host.setAttribute('role', 'menu');
-                            // Add role="menuitem" to the focusable elements
-                            menuItems.forEach(item => {
-                                item.setAttribute('role', 'menuitem');
-                            });
-                            // Add aria-label to the menu
-                            if (this.label)
-                                this.host.setAttribute('aria-label', this.label);
-                        }
-                    }
+            if (this.isVisible) {
+                this.lastFocusedElement = this.root?.activeElement;
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
                     menuItems[0].focus();
                 }
-                else if (this.lastFocusedElement) {
-                    setTimeout(() => {
-                        // This timeout is added for NVDA to announce the menu as collapsed
-                        this.lastFocusedElement.focus();
-                    }, 0);
-                }
-            });
+            }
+            else if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
         };
         this.handleClick = (e) => {
             const target = e.target;
@@ -109,14 +106,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.handleKeyDown);
         this.host.removeEventListener('click', this.handleClick);
-        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
     }
     componentDidLoad() {
         this.validatePlacement();
         this.validateLabel();
-        if (this.popoverRef) {
-            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
-        }
     }
     /**
      * Toggles the menu visibility based on its current state.
@@ -200,7 +193,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": version }, h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
+        return (h(Host, { key: '092a180331d50cfe701ad440569e0e6bd4bcd0c8', "data-version": version }, h("post-popovercontainer", { key: '96f33df1a47d2fb1f6f862a7d7f97def5fd8b642', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5d23d1059dd1cf68ac817acc8227129267a3c5a4', part: "menu" }, h("slot", { key: '020fbf8912393d85cd5a6fd9f65fdf264f2ba6f6', name: "header" }), h("slot", { key: '07cd9cb978ec85dd7fbbaed527520b97484e2030' })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -221,7 +214,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends H {
     }]);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggle", void 0);
+], PostMenu.prototype, "handlePostShown", void 0);
+__decorate([
+    EventFrom('post-popovercontainer')
+], PostMenu.prototype, "handlePostToggled", void 0);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;