@swisspost/design-system-components 9.0.0-next.32 → 9.0.0-next.34

package/dist/components/post-menu-trigger2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
+import './breakpoints.js';
 import { g as getRoot } from './get-root.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
@@ -10,16 +11,20 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for menu control.
+         */
+        this.slottedButton = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
-    get host() { return this; }
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for menu control.
-     */
-    slottedButton = null;
-    root;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -39,12 +44,6 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
             console.warn(`No post-menu found with ID: ${this.for}`);
         }
     }
-    handleKeyDown = (e) => {
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.handleToggle();
-        }
-    };
     connectedCallback() {
         this.root = getRoot(this.host);
     }
@@ -80,14 +79,15 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '84316d4a69c4231be636e5ff8971752d5af9bab2', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3091adcf7033c4dd25e49fa383ccb9773b2d226' })));
+        return (h(Host, { key: '1b9589febc2976d17eed3363d91b4321473b7b5e', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'bec55f97274084ab4721dc085dc9e1c3a216c0a3' })));
     }
+    get host() { return this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
     static get style() { return PostMenuTriggerStyle0; }
 }, [4, "post-menu-trigger", {
-        "for": [1],
+        "for": [513],
         "ariaExpanded": [32]
     }, undefined, {
         "for": ["validateControlFor"]

package/dist/components/post-menu2.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
+import './breakpoints.js';
+import { e as eventGuard } from './event-guard.js';
 import { g as getRoot } from './get-root.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
@@ -13,28 +15,54 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.toggleMenu = createEvent(this, "toggleMenu", 7);
+        this.lastFocusedElement = null;
+        this.KEYCODES = {
+            SPACE: ' ',
+            ENTER: 'Enter',
+            UP: 'ArrowUp',
+            DOWN: 'ArrowDown',
+            TAB: 'Tab',
+            HOME: 'Home',
+            END: 'End',
+            ESCAPE: 'Escape',
+        };
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            if (e.key === this.KEYCODES.ESCAPE) {
+                this.toggle(this.host);
+                return;
+            }
+            if (Object.values(this.KEYCODES).includes(e.key)) {
+                this.controlKeyDownHandler(e);
+            }
+        };
+        this.handlePostToggle = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
+                this.isVisible = event.detail;
+                this.toggleMenu.emit(this.isVisible);
+                requestAnimationFrame(() => {
+                    if (this.isVisible) {
+                        this.lastFocusedElement = this.root?.activeElement;
+                        const menuItems = this.getSlottedItems();
+                        if (menuItems.length > 0) {
+                            menuItems[0].focus();
+                        }
+                    }
+                    else if (this.lastFocusedElement) {
+                        this.lastFocusedElement.focus();
+                    }
+                });
+            });
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+                this.toggle(this.host);
+            }
+        };
         this.placement = 'bottom';
         this.isVisible = false;
     }
-    popoverRef;
-    lastFocusedElement = null;
-    KEYCODES = {
-        SPACE: ' ',
-        ENTER: 'Enter',
-        UP: 'ArrowUp',
-        DOWN: 'ArrowDown',
-        TAB: 'Tab',
-        HOME: 'Home',
-        END: 'End',
-        ESCAPE: 'Escape',
-    };
-    get host() { return this; }
-    /**
-     * Emits when the menu is shown or hidden.
-     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
-     **/
-    toggleMenu;
-    root;
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -43,24 +71,12 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.handleKeyDown);
         this.host.removeEventListener('click', this.handleClick);
+        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
     }
     componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.toggleMenu.emit(this.isVisible);
-            requestAnimationFrame(() => {
-                if (this.isVisible) {
-                    this.lastFocusedElement = this.root.activeElement;
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                }
-                else if (this.lastFocusedElement) {
-                    this.lastFocusedElement.focus();
-                }
-            });
-        });
+        if (this.popoverRef) {
+            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
+        }
     }
     /**
      * Toggles the menu visibility based on its current state.
@@ -97,22 +113,6 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             console.error('hide: popoverRef is null or undefined');
         }
     }
-    handleKeyDown = (e) => {
-        e.stopPropagation();
-        if (e.key === this.KEYCODES.ESCAPE) {
-            this.toggle(this.host);
-            return;
-        }
-        if (Object.values(this.KEYCODES).includes(e.key)) {
-            this.controlKeyDownHandler(e);
-        }
-    };
-    handleClick = (e) => {
-        const target = e.target;
-        if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-            this.toggle(this.host);
-        }
-    };
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -159,8 +159,9 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'bbf51586a2b534d8784124547afb4e3a1b5c8dc8', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'd54ac2a016ca74fc9fe8a34cdde5ac42786cde9e', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'bbcd8c421bb6ac757c9d818ce6b56f343032ba74', class: "popover-container", part: "popover-container" }, h("slot", { key: 'af9513da5bb0c9d42b1f1d04af0fd9ee2a681e81' })))));
+        return (h(Host, { key: 'a86276a1fefccbb1f2b50f1ad74dd98ddcbdae5d', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'a0b2a35714ba370b7a73d92d1d6c036aa7039aea', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '98da2e21f8e4b4e02b4c347bc4f9238edc635b77', class: "popover-container", part: "popover-container" }, h("slot", { key: 'd3060c46482c5f3179827b8996a9a4b24abf49fa' })))));
     }
+    get host() { return this; }
     static get style() { return PostMenuStyle0; }
 }, [1, "post-menu", {
         "placement": [1],

package/dist/components/post-popover2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
+import { I as IS_BROWSER } from './breakpoints.js';
+import { v as version } from './package.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
 const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{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;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{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}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-scheme-color-surface-default-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
@@ -25,19 +26,15 @@ const globalToggleHandler = (e) => {
     const popover = document.getElementById(popoverTarget);
     popover?.toggle(currentElement);
 };
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
-    const force = trigger.hasAttribute(popoverTargetAttribute);
-    trigger.setAttribute('aria-expanded', force ? 'false' : null);
-});
 const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
-    popoverRef;
-    localBeforeToggleHandler;
-    get host() { return this; }
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.closeButtonCaption = undefined;
         this.arrow = true;
@@ -48,7 +45,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         if (popoverInstances === 0) {
             window.addEventListener('pointerup', globalToggleHandler);
             window.addEventListener('keydown', globalToggleHandler);
-            triggerObserver.observe(document.body, {
+            this.triggerObserver?.observe(document.body, {
                 subtree: true,
                 childList: true,
                 attributeFilter: [popoverTargetAttribute],
@@ -66,7 +63,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         if (popoverInstances === 0) {
             window.removeEventListener('click', globalToggleHandler);
             window.removeEventListener('keydown', globalToggleHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
         this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
         this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
@@ -102,9 +99,14 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
     beforeToggleHandler() {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
+    patchAccessibilityFeatures(trigger) {
+        const force = trigger.hasAttribute(popoverTargetAttribute);
+        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+    }
     render() {
-        return (h(Host, { key: 'ec1aab472fb8f7d6515050d90f6a8b20730640f0', "data-version": version }, h("post-popovercontainer", { key: 'beda133fe8cf98f9db6b61f2bf3e08b3549d3b86', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'dd0ad949ddc80632b3918cba539781cf23a46163', class: "popover-container" }, h("div", { key: '038dfcf60ff63b0fbe142c0e29db78fe13c5a51b', class: "popover-content" }, h("slot", { key: 'cabcedfbbd0dfc179a66bde0f9afd6a250e4fe1c' })), h("button", { key: 'bb8333e139158f3220c80380cd587e564664b612', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '285a90c985133c7b53150a649850a6e675fdb4d8', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '0eee6a532fc25170b70f2424b7238ae31f0efa2e', "data-version": version }, h("post-popovercontainer", { key: '52af51e794bd070a000fbdd5f0c05ee2f0c3ac1c', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '772b5efef90b136a38b69fccfce2d5607d46035a', class: "popover-container" }, h("div", { key: '8bfdf07447daa58f88c788f04fdfab483783ca7e', class: "popover-content" }, h("slot", { key: '7866899dbf93c856253e2448a0ca696499c94c12' })), h("button", { key: '5056fcd7654309c1f9810b8136ce472b6cf7946f', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '9f9c9b8007a6431367197d824ca42cfd7ca91761', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
+    get host() { return this; }
     static get style() { return PostPopoverStyle0; }
 }, [1, "post-popover", {
         "placement": [1],