@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -10,92 +10,77 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkRequiredAndType, EventFrom } from "../../utils/index";
+import { checkRequiredAndType, EventFrom, IS_BROWSER } from "../../utils/index";
 export class PostMegadropdownTrigger {
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
+    }
     constructor() {
+        this.mutationObserver = new MutationObserver(this.cloneSlottedButton.bind(this));
+        this.isMegadropdownExpanded = false;
+        this.slottedContent = null;
         /**
-         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
-         */
-        this.ariaExpanded = false;
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
-         */
-        this.slottedButton = null;
-        /**
-         * Tracks whether this trigger's dropdown was expanded before a state change.
-         * Used to determine if this trigger should handle focus when its dropdown closes.
+         * Sets the trigger state to be active or inactive.
          */
-        this.wasExpanded = false;
-        this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.handleToggle();
-                if (this.megadropdown && !this.ariaExpanded) {
-                    setTimeout(() => this.megadropdown.focusFirst(), 100);
-                }
-            }
-        };
-        this.handleToggleMegadropdown = (event) => {
-            if (event.target.id === this.for) {
-                this.ariaExpanded = event.detail.isVisible;
-                // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
-                if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
-                    setTimeout(() => {
-                        this.slottedButton?.focus();
-                    }, 100);
-                }
-                this.wasExpanded = this.ariaExpanded;
-                if (this.slottedButton) {
-                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                }
-            }
-        };
+        this.active = false;
+        this.onMegadropdownToggled = this.onMegadropdownToggled.bind(this);
     }
-    /**
-     * 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.
-     */
-    validateControlFor() {
-        checkRequiredAndType(this, 'for', 'string');
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+    }
+    componentWillLoad() {
+        this.cloneSlottedButton();
+    }
+    componentDidLoad() {
+        this.validateFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        if (IS_BROWSER)
+            document.addEventListener('postToggleMegadropdown', this.onMegadropdownToggled);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.onMegadropdownToggled);
+    }
+    cloneSlottedButton() {
+        this.slottedContent = this.host.innerHTML;
     }
     get megadropdown() {
         const ref = document.getElementById(this.for);
-        return ref && ref.localName === 'post-megadropdown'
-            ? ref
-            : null;
-    }
-    handleToggle() {
-        if (this.megadropdown) {
-            this.megadropdown.toggle();
-        }
-        else {
+        if (ref?.localName !== 'post-megadropdown') {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
+            return null;
         }
+        return ref;
     }
-    componentDidLoad() {
-        this.validateControlFor();
-        // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
-        this.slottedButton = this.host.querySelector('button');
-        if (this.slottedButton) {
-            this.slottedButton.setAttribute('aria-haspopup', 'menu');
-            this.slottedButton.addEventListener('click', () => {
-                this.handleToggle();
-            });
-            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
-        }
-        else {
-            console.warn('No button found within post-megadropdown-trigger');
-        }
+    onClick() {
+        this.megadropdown?.toggle();
     }
-    disconnectedCallback() {
-        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    onKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const megadropdown = this.megadropdown;
+        if (!megadropdown)
+            return;
+        event.preventDefault();
+        this.megadropdown.toggle();
+    }
+    onMegadropdownToggled(event) {
+        if (event.target.id === this.for) {
+            const wasMegadropdownExpanded = this.isMegadropdownExpanded;
+            this.isMegadropdownExpanded = event.detail.isVisible;
+            const haveBeenClosed = wasMegadropdownExpanded && !this.isMegadropdownExpanded;
+            if (!haveBeenClosed || !event.detail.focusParent)
+                return;
+            // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+            setTimeout(() => {
+                this.interactiveButton.focus();
+            }, 100);
+        }
     }
     render() {
-        return (h(Host, { key: 'b5d3eb64df71ac025f1ca882811b4c6f20ccf8b7', "data-version": version, "tab-index": "-1" }, h("button", { key: '2ba6ec332db1ffbac84dd134b144e33115bac31e' }, h("slot", { key: '39b36a16250897f243b8039342c7ff294f83df4d' }))));
+        return (h(Host, { key: 'e2fccf83b9957d929e8014bcaae51511ddbb3e8f', "data-version": version }, h("button", { key: '1b796d6f5e3be99db7037dce808a42a7ca82cff7', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: '4de2cc323cfb9d7288ca950ba20c9072cf4b9a38' }, h("span", { key: '64829988553f7086a8d79e15a3282d2e577bc6ba' }, h("slot", { key: '8e59c15428d9a201ef38419db3f502be82458462' })), h("span", { key: '323e643fc73b41b4dfb6ae813a3132b99e671ae6', "aria-hidden": "true", innerHTML: this.slottedContent })), h("post-icon", { key: '8a48e81632b6e290f6176a006e5adf5cf871ef45', name: "chevrondown" }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-megadropdown-trigger.scss"]
@@ -108,9 +93,28 @@ export class PostMegadropdownTrigger {
     }
     static get properties() {
         return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the trigger state to be active or inactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
             "for": {
                 "type": "string",
-                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -125,23 +129,25 @@ export class PostMegadropdownTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "for"
             }
         };
     }
     static get states() {
         return {
-            "ariaExpanded": {}
+            "isMegadropdownExpanded": {},
+            "slottedContent": {}
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "for",
-                "methodName": "validateControlFor"
+                "methodName": "validateFor"
             }];
     }
 }
 __decorate([
     EventFrom('post-megadropdown', { ignoreNestedComponents: false })
-], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
+], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);

package/dist/collection/components/post-menu/post-menu.css

@@ -1 +1 @@
-:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}
+:host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}

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

@@ -14,7 +14,7 @@ import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { getRoot, checkEmptyOrOneOf, checkRequiredAndType, EventFrom } from "../../utils/index";
 /**
- * @part menu - The container element that holds the list of menu items.
+ * @part post-menu - The container element that holds the list of menu items.
  * @slot header - Holds the header part of the menu.
  */
 export class PostMenu {
@@ -52,35 +52,6 @@ export class PostMenu {
                 this.controlKeyDownHandler(e);
             }
         };
-        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);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    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)) {
@@ -142,6 +113,35 @@ export class PostMenu {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    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);
+        }
+    }
+    handlePostBeforeToggle(event) {
+        this.isVisible = event.detail.willOpen;
+        this.toggleMenu.emit(this.isVisible);
+        if (this.isVisible) {
+            this.lastFocusedElement = this.root?.activeElement;
+            requestAnimationFrame(() => {
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
+                    menuItems[0].focus();
+                }
+            });
+        }
+        else if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -191,7 +191,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'ab27eeef6ddcca57eb65ca9f7471809d9f78d7d1', "data-version": version }, h("post-popovercontainer", { key: 'c8053a6cbae6d22751e81107099180b95829b8c4', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c60d336220b331cd7f3d5b896788f3fdcee090cf', part: "menu" }, h("slot", { key: '629b1f5dbe4074df6459bdfe64e1c0f836314e85', name: "header" }), h("slot", { key: 'c918bba494424db857e7e99fd80d24224bdeb9ed' })))));
+        return (h(Host, { key: 'b8eed085445b840a741ee5115c10ef4e9b3fb387', "data-version": version }, h("post-popovercontainer", { key: '4d885d0d4a23c5b29312588bccdc0cbbf7e3da23', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '69ed7ce44051026ca85f6a6cd25aeb1f2ef56a3c', part: "post-menu" }, h("slot", { key: '431d56f067986a0eded7b15c6dbc4ab0662a5b86', name: "header" }), h("slot", { key: '3b906c3a19cce7372de493b5dfe90d1587925a2c' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -209,7 +209,6 @@ export class PostMenu {
         return {
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -218,7 +217,8 @@ export class PostMenu {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -231,11 +231,11 @@ export class PostMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'bottom'"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,11 +246,12 @@ export class PostMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An accessible name for the menu."
+                    "text": "A descriptive label that clearly identifies the menu\u2019s content so assistive technologies can convey its purpose."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             }
         };
     }
@@ -364,7 +365,7 @@ export class PostMenu {
 }
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
+], PostMenu.prototype, "handlePostShown", null);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
+], PostMenu.prototype, "handlePostBeforeToggle", null);

package/dist/collection/components/post-menu-item/post-menu-item.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostMenuItem {
     render() {
-        return (h(Host, { key: '9d6015291b82728739de4263a62a59ad4a99c94d', "data-version": version }, h("slot", { key: '51f5ff356cddffc806639cc343437500f898065e' })));
+        return (h(Host, { key: 'd7958ea4788b9bc5fb635f1ebbeb8201ee4f8bbe', "data-version": version }, h("slot", { key: '1dc07d2f88142186ec9bef36ee10ed723e500292' })));
     }
     static get is() { return "post-menu-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-menu-trigger/post-menu-trigger.js

@@ -73,7 +73,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
+        return (h(Host, { key: '13701a50f739c2252ab296e13c657e1d4c51444b', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'dc5fd68d917d3cfe2a9703553b1fba4047770260' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {
@@ -90,7 +90,6 @@ export class PostMenuTrigger {
         return {
             "for": {
                 "type": "string",
-                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -105,7 +104,8 @@ export class PostMenuTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "for"
             }
         };
     }

package/dist/collection/components/post-pagination/post-pagination.css

@@ -0,0 +1 @@
+.pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:8px;overflow:hidden}.pagination-list{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;padding:0;margin:0;font-size:14px;font-weight:700;color:#050400;text-decoration:none;background-color:rgba(0,0,0,0);border:1px solid #ccc;border-radius:100%;cursor:pointer;appearance:none;outline:none}.pagination-link:hover:not(:disabled):not(.pagination-link-disabled){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:active:not(:disabled):not(.pagination-link-disabled):not(.pagination-link-active){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:focus-visible{z-index:1;outline:2px solid #050400;outline-offset:2px}.pagination-link:focus:not(:focus-visible){outline:none}.pagination-link.pagination-link-active{font-weight:700;color:#fff;background-color:#050400;border-color:#050400;cursor:default}.pagination-link.pagination-link-active:hover:not(:disabled):not(.pagination-link-disabled){background-color:#504f4b;border-color:#504f4b;color:#fff}.pagination-link:disabled,.pagination-link.pagination-link-disabled{color:#6b6b6b;background-color:#f0f0f0;border-color:#ccc;opacity:.6;cursor:default}@media(min-width: 600px){.pagination-link{width:40px;height:40px;min-width:40px;font-size:16px}}@media(min-width: 1024px){.pagination-link{width:48px;height:48px;min-width:48px;font-size:20px}}.pagination-control-button post-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media(min-width: 600px){.pagination-control-button post-icon{width:18px;height:18px}}@media(min-width: 1024px){.pagination-control-button post-icon{width:20px;height:20px}}.pagination-control-button:active:not(:disabled):not(.pagination-link-disabled){background-color:#f5f5f5;border:2px solid #504f4b}.pagination-ellipsis{display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#050400;user-select:none}@media(min-width: 600px){.pagination-ellipsis-content{width:40px;height:40px}}@media(min-width: 1024px){.pagination-ellipsis-content{width:48px;height:48px}}.hidden-items{position:absolute;display:flex;gap:4px;height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.pagination-icon-rotated{display:inline-block;transform:rotate(180deg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}