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

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

@@ -1 +1,3 @@
-post-megadropdown-trigger{width:100%;position:relative}
+button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}button:hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash)}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}button: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){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button: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){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(a){color:LinkText;border:unset}button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}button{--post-nav-item-border-width: 1px;width:100%;justify-content:start;position:relative;padding:.75rem .75rem calc(.75rem - var(--post-nav-item-border-width)) .5rem;gap:1rem;border-radius:0;line-height:1.5;outline-color:currentColor !important;height:100%}button::before{content:"";background-color:#050400;position:absolute;inset-inline:0;inset-block-end:0;height:var(--post-nav-item-border-width)}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}button:hover::before{background-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}button{outline-offset:calc(
+      -2px - var(--post-device-border-width-focus)
+    ) !important}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:calc(.5rem + 1.5px) .75rem calc(.5rem + 1.5px - var(--post-nav-item-border-width)) .5rem;gap:.5rem;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:1rem .75rem;gap:.5rem}button::before{content:unset}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}

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: '73479c3c80cda63b9f82ec584c962ffa53b7b85c', "data-version": version }, h("button", { key: 'e76d5077f1ac2e6c16e365799ea79f6985ec0d14', 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: 'a60b5838443ccd75fc08e07f791cb4ef088343f3' }, h("span", { key: 'da180bb66704712c0cba7b575ba260765a0df36f' }, h("slot", { key: 'c27dbc706a82fc49acb3414855e0e57d1dac0923' })), h("span", { key: '87ebe5fdcba5a160b2698965284fc5ce66d0fa90', "aria-hidden": "true", innerHTML: this.slottedContent })), h("post-icon", { key: '76f620188ebc3ad60b04523ea70ee4f3b642a2e8', name: "chevrondown" }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-megadropdown-trigger.scss"]
@@ -108,6 +93,26 @@ export class PostMegadropdownTrigger {
     }
     static get properties() {
         return {
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "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,
+                "defaultValue": "false"
+            },
             "for": {
                 "type": "string",
                 "attribute": "for",
@@ -131,17 +136,18 @@ export class PostMegadropdownTrigger {
     }
     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);
+        }
+    }
+    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();
+        }
+    }
     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: '08285b17608e5bc3133a3da6015a5a0d4de6ec29', "data-version": version }, h("post-popovercontainer", { key: '17e45869b5e76cdd9bd43ca77b2f0b3876462014', onPostShow: this.handlePostShown.bind(this), onPostToggle: this.handlePostToggled.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e2486aa099ffc8ac59885a0971ebb13649a49a35', part: "post-menu" }, h("slot", { key: '9f0e05f211fe18cf5beed8e1b33bde26d4974e24', name: "header" }), h("slot", { key: '971ac8ad433467a2ebe2429574cb10dbdadbcf25' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -246,7 +246,7 @@ 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,
@@ -364,7 +364,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, "handlePostToggled", 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: 'ae55d1dca73916188cb269cd7f4c808ee3302288', "data-version": version }, h("slot", { key: 'fabc1b7b4b99d7881bea64593114b6cd4fc606c4' })));
     }
     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: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {

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}